/* Canislog – rezervačný formulár hotela. Farby upravíte v premenných nižšie. */
.clh-wrap {
	--clh-ink: #1f2a22;
	--clh-muted: #5d6b61;
	--clh-line: #dfe5df;
	--clh-bg: #ffffff;
	--clh-soft: #f4f7f3;
	--clh-brand: #2f5d3a;
	--clh-brand-ink: #ffffff;
	--clh-accent: #c8892b;
	--clh-free: #3f9a55;
	--clh-few: #e0a82e;
	--clh-full: #cf4b3f;
	--clh-taken: #3d6fc4;
	--clh-radius: 14px;
	color: var(--clh-ink);
	background: var(--clh-bg);
	max-width: 880px;
	margin: 0 auto;
	font-size: 16px;
	line-height: 1.5;
	box-sizing: border-box;
}
.clh-wrap *, .clh-wrap *::before, .clh-wrap *::after { box-sizing: inherit; }
.clh-wrap button { font: inherit; cursor: pointer; }
.clh-wrap [hidden] { display: none !important; }

.clh-section { border: 1px solid var(--clh-line); border-radius: var(--clh-radius); padding: 22px; margin-bottom: 18px; background: var(--clh-bg); }
.clh-section h3 { margin: 0 0 4px; font-size: 1.2rem; display: flex; align-items: center; gap: 10px; }
.clh-step { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--clh-brand); color: var(--clh-brand-ink); font-size: .9rem; font-weight: 700; flex: none; }
.clh-lead { color: var(--clh-muted); margin: 0 0 16px; font-size: .95rem; }

/* Typ ubytovania */
.clh-types { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 18px; }
.clh-type { text-align: left; border: 2px solid var(--clh-line); border-radius: 12px; background: var(--clh-bg); padding: 14px 16px; color: var(--clh-ink); transition: border-color .15s, background .15s; }
.clh-type strong { display: block; font-size: 1rem; }
.clh-type span { display: block; font-size: .85rem; color: var(--clh-muted); }
.clh-type[aria-pressed="true"] { border-color: var(--clh-brand); background: var(--clh-soft); }
.clh-type:focus-visible, .clh-day:focus-visible, .clh-slot:focus-visible { outline: 3px solid var(--clh-accent); outline-offset: 2px; }

/* Kalendár */
.clh-cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.clh-cal-head strong { font-size: 1.05rem; text-transform: capitalize; }
.clh-nav { border: 1px solid var(--clh-line); background: var(--clh-bg); border-radius: 10px; width: 40px; height: 40px; font-size: 1.1rem; color: var(--clh-ink); }
.clh-nav:disabled { opacity: .35; cursor: default; }
.clh-grid7 { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.clh-dow { text-align: center; font-size: .75rem; color: var(--clh-muted); padding: 4px 0; text-transform: uppercase; letter-spacing: .04em; }
.clh-day { position: relative; border: 1px solid var(--clh-line); border-radius: 10px; background: var(--clh-bg); min-height: 62px; padding: 6px 4px 14px; display: flex; flex-direction: column; align-items: center; color: var(--clh-ink); }
.clh-day .n { font-weight: 600; font-size: .95rem; }
.clh-day .f { font-size: .7rem; color: var(--clh-muted); }
.clh-day .bars { position: absolute; left: 6px; right: 6px; bottom: 5px; display: flex; gap: 2px; }
.clh-day .bars i { flex: 1; height: 6px; border-radius: 3px; background: var(--clh-free); }
.clh-day .bars i.few { background: var(--clh-few); }
.clh-day .bars i.full { background: var(--clh-full); }
.clh-day .fs { display: none; font-size: .68rem; font-weight: 700; color: var(--clh-muted); }
.clh-day.part:not(.sel) { background: #eef3fb; }
.clh-day.few:not(.sel) { background: #fdf3e2; }
.clh-day.part:not(.sel) .f, .clh-day.few:not(.sel) .f { color: var(--clh-ink); font-weight: 600; }
.clh-day:disabled { background: var(--clh-soft); color: #a7b0a9; cursor: not-allowed; }
.clh-day:disabled .bars { opacity: .35; }
.clh-day.empty { visibility: hidden; }
.clh-day.in-range { background: #e5efe6; border-color: #bcd3bf; }
.clh-day.sel { background: var(--clh-brand); border-color: var(--clh-brand); color: var(--clh-brand-ink); }
.clh-day.sel .f { color: rgba(255,255,255,.85); }
.clh-day.today .n { text-decoration: underline; text-underline-offset: 3px; }
.clh-legend { display: flex; flex-wrap: wrap; gap: 14px; font-size: .8rem; color: var(--clh-muted); margin-top: 10px; }
.clh-legend i { display: inline-block; width: 18px; height: 6px; border-radius: 3px; vertical-align: middle; margin-right: 5px; }

/* Sloty */
.clh-slots { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 18px; }
.clh-slots h4 { margin: 0 0 6px; font-size: .95rem; }
.clh-slots .d { font-weight: 400; color: var(--clh-muted); }
.clh-slot-row { display: flex; gap: 8px; }
.clh-slot { flex: 1; border: 2px solid var(--clh-line); border-radius: 10px; background: var(--clh-bg); padding: 10px 8px; color: var(--clh-ink); line-height: 1.25; }
.clh-slot small { display: block; color: var(--clh-muted); font-size: .8rem; }
.clh-slot[aria-pressed="true"] { border-color: var(--clh-brand); background: var(--clh-soft); }
.clh-slot:disabled { opacity: .4; cursor: not-allowed; text-decoration: line-through; }

.clh-note { margin-top: 14px; padding: 10px 14px; border-radius: 10px; background: var(--clh-soft); font-size: .9rem; color: var(--clh-muted); }
.clh-note.warn { background: #fdf1e2; color: #7a4a0c; }
.clh-note.err { background: #fbe9e7; color: #8a2419; }
.clh-note.ok { background: #e6f2e8; color: #1f5a2c; }

/* Formulár */
.clh-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; }
.clh-field { display: flex; flex-direction: column; gap: 5px; }
.clh-field.full { grid-column: 1 / -1; }
.clh-field label, .clh-field .lbl { font-size: .88rem; font-weight: 600; }
.clh-field .opt { font-weight: 400; color: var(--clh-muted); }
.clh-wrap input[type=text], .clh-wrap input[type=email], .clh-wrap input[type=tel], .clh-wrap textarea {
	width: 100%; border: 1px solid #c9d2ca; border-radius: 10px; padding: 11px 12px; font: inherit; color: var(--clh-ink); background: #fff;
}
.clh-wrap input:focus, .clh-wrap textarea:focus { outline: none; border-color: var(--clh-brand); box-shadow: 0 0 0 3px rgba(47,93,58,.15); }
.clh-field.invalid input, .clh-field.invalid textarea { border-color: var(--clh-full); }
.clh-err { color: var(--clh-full); font-size: .8rem; min-height: 0; }
.clh-choices { display: flex; flex-wrap: wrap; gap: 8px; }
.clh-choice { display: flex; align-items: center; gap: 8px; border: 1px solid var(--clh-line); border-radius: 10px; padding: 9px 12px; font-size: .92rem; cursor: pointer; background: #fff; }
.clh-choice input { accent-color: var(--clh-brand); margin: 0; }
.clh-choice em { font-style: normal; color: var(--clh-muted); font-size: .82rem; }
.clh-pay-h { margin: 18px 0 8px; font-size: .95rem; }
.clh-pay { display: grid; gap: 8px; }
.clh-paybtn { display: flex; gap: 10px; align-items: flex-start; border: 2px solid var(--clh-line); border-radius: 12px; padding: 11px 14px; cursor: pointer; background: #fff; }
.clh-paybtn input { margin-top: 3px; accent-color: var(--clh-brand); flex: none; }
.clh-paybtn strong { display: block; font-size: .95rem; }
.clh-paybtn small { display: block; color: var(--clh-muted); font-size: .82rem; line-height: 1.35; }
.clh-paybtn:has(input:checked) { border-color: var(--clh-brand); background: var(--clh-soft); }
.clh-paybtn.off { opacity: .55; cursor: not-allowed; }
.clh-bank { margin: 10px 0 4px; text-align: left; }
.clh-bank dd { word-break: break-all; }
.clh-copy { border: 1px solid var(--clh-line); background: #fff; border-radius: 6px; padding: 1px 7px; font-size: .72rem; color: var(--clh-brand); vertical-align: middle; }
.clh-done .clh-note { text-align: left; max-width: 520px; margin: 14px auto; }
.clh-hp { position: absolute !important; left: -10000px !important; width: 1px; height: 1px; overflow: hidden; }

/* Zhrnutie */
.clh-summary table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.clh-summary td { padding: 7px 0; border-bottom: 1px dashed var(--clh-line); }
.clh-summary td:last-child { text-align: right; white-space: nowrap; }
.clh-summary tr.total td { border-bottom: 0; font-weight: 700; font-size: 1.15rem; padding-top: 12px; }
.clh-facts { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; font-size: .93rem; margin-bottom: 14px; }
.clh-facts dt { color: var(--clh-muted); }
.clh-facts dd { margin: 0; font-weight: 600; }
.clh-consent { display: flex; gap: 10px; align-items: flex-start; font-size: .88rem; margin: 16px 0; }
.clh-consent input { margin-top: 4px; accent-color: var(--clh-brand); }
.clh-consent a { color: var(--clh-brand); }
.clh-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 0; border-radius: 12px; padding: 14px 22px; background: var(--clh-brand); color: var(--clh-brand-ink); font-weight: 700; font-size: 1rem; text-decoration: none; }
.clh-btn:hover { filter: brightness(1.08); }
.clh-btn:disabled { opacity: .5; cursor: not-allowed; filter: none; }
.clh-btn.ghost { background: transparent; color: var(--clh-brand); border: 2px solid var(--clh-brand); }
.clh-btn.wide { width: 100%; }
.clh-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.clh-small { font-size: .82rem; color: var(--clh-muted); margin-top: 10px; }

/* Výsledok */
.clh-done { text-align: center; padding: 30px 22px; }
.clh-done .ico { width: 64px; height: 64px; border-radius: 50%; background: #e6f2e8; color: var(--clh-free); display: grid; place-items: center; font-size: 32px; margin: 0 auto 12px; }
.clh-done h3 { justify-content: center; font-size: 1.4rem; }
.clh-done .clh-facts { text-align: left; max-width: 460px; margin: 18px auto; }
.clh-done .clh-actions { justify-content: center; }
.clh-spin { width: 18px; height: 18px; border: 3px solid rgba(255,255,255,.4); border-top-color: #fff; border-radius: 50%; animation: clhspin .8s linear infinite; }
@keyframes clhspin { to { transform: rotate(360deg); } }

@media (max-width: 620px) {
	.clh-section { padding: 16px; }
	.clh-types, .clh-slots, .clh-fields { grid-template-columns: 1fr; }
	.clh-day { min-height: 50px; padding-top: 4px; }
	.clh-day .f { display: none; }
	.clh-day .fs { display: block; }
	.clh-day.sel .fs { color: rgba(255,255,255,.9); }
	.clh-grid7 { gap: 3px; }
}
@media (prefers-reduced-motion: reduce) { .clh-spin { animation-duration: 2s; } }