/* Castle Inn booking pages (resources/views/site/booking): drawn inside the website theme */
.ci-bk { --ci-primary: #26a3db; --ci-navy: #273272; --ci-dark: #2a2a2a; --ci-muted: #6b7280; --ci-line: #e5e7eb;
    padding: 40px 24px 80px; background: #f7f8f9; color: #444; text-align: left; }
.ci-bk *, .ci-bk *::before, .ci-bk *::after { box-sizing: border-box; }
.ci-bk-inner { max-width: 1200px; margin: 0 auto; }
.ci-bk-narrow { max-width: 560px; }
/* .sb-site .ci-bk … outranks the site-wide h1 / h2 sizes of castle-inn.css */
.sb-site .ci-bk .ci-bk-title, .ci-bk .ci-bk-title { margin: 0 0 20px; font-size: 38px; line-height: 1.15; color: var(--ci-dark); }
.ci-bk-lead { margin: -8px 0 20px; }
.sb-site .ci-bk .ci-bk-h2, .ci-bk .ci-bk-h2 { margin: 0 0 14px; font-size: 22px; line-height: 1.25; color: var(--ci-dark); }
.sb-site .ci-bk .ci-room-name { font-size: 24px; line-height: 1.2; }
.ci-bk a:not(.sb-btn) { color: var(--ci-primary); }

/* steps */
.ci-steps { display: flex; gap: 8px; margin: 0 0 28px; padding: 0; list-style: none; counter-reset: s; }
.ci-steps li { display: flex; flex: 1; align-items: center; gap: 10px; padding: 10px 12px; background: #fff; border-bottom: 3px solid var(--ci-line);
    font-size: 14px; color: var(--ci-muted); }
.ci-steps .ci-step-num { display: grid; flex: 0 0 28px; place-items: center; height: 28px; border-radius: 50%; background: #e9edf1; font-weight: 700; }
.ci-steps .is-current { border-color: var(--ci-primary); color: var(--ci-dark); font-weight: 600; }
.ci-steps .is-current .ci-step-num { background: var(--ci-primary); color: #fff; }
.ci-steps .is-done { border-color: #10b981; }
.ci-steps .is-done .ci-step-num { background: #10b981; color: #fff; }
@media (max-width: 575.98px) { .ci-steps .ci-step-label { display: none; } .ci-steps li { justify-content: center; } .sb-site .ci-bk .ci-bk-title { font-size: 28px; } }

/* search page */
.ci-bk-searchbar { margin: 0 0 16px; padding: 10px; background: #fff; }
.ci-bk-stay { margin: 0 0 20px; }
.ci-bk-stay i { color: var(--ci-primary); margin-right: 4px; }
.ci-bk-results { display: grid; gap: 20px; }
.ci-bk-room.is-highlight { outline: 2px solid var(--ci-primary); }
.ci-bk-room.is-off { opacity: .7; }
.ci-bk-room.is-off .ci-room-img { filter: grayscale(1); }
.ci-bk-tax { display: block; margin-top: 4px; }
.ci-bk-left { margin: 0; font-size: 13px; font-weight: 700; color: #dc2626; }
.ci-bk-off { margin: 0; font-weight: 700; color: #dc2626; }
.ci-bk-foot { margin: 28px 0 0; text-align: center; }

/* alerts */
.ci-bk-alert { margin: 0 0 20px; padding: 12px 16px; border-left: 4px solid; background: #fff; }
.ci-bk-alert-info { border-color: var(--ci-primary); background: #eef8fd; }
.ci-bk-alert-warn { border-color: #f59e0b; background: #fff8e1; }
.ci-bk-alert-err { border-color: #dc2626; background: #fef2f2; }

/* two columns: form or facts | price */
.ci-bk-grid { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 24px; align-items: start; }
.ci-bk-card { margin: 0 0 20px; padding: 24px; background: #fff; border: 1px solid var(--ci-line); }
.ci-bk-side { position: sticky; top: 20px; }
.ci-bk-form { padding: 24px; background: #fff; border: 1px solid var(--ci-line); }
.ci-bk-form fieldset:disabled { opacity: .55; }
.ci-bk-next { display: inline-flex; align-items: center; gap: 10px; }
.ci-bk-note { margin: 12px 0 0; font-size: 14px; color: var(--ci-muted); }
@media (max-width: 991.98px) { .ci-bk-grid { grid-template-columns: 1fr; } .ci-bk-side { position: static; order: -1; } }

.ci-bk-dates { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 0 0 12px; }
.ci-bk-dates span { display: flex; flex-direction: column; padding: 10px 12px; background: #f4f6f8; }
.ci-bk-dates small { font-size: 12px; color: var(--ci-muted); text-transform: uppercase; letter-spacing: .5px; }
.ci-bk-dates b { color: var(--ci-dark); }
.ci-bk-guests { margin: 0 0 16px; font-size: 14px; }

/* price */
.ci-price { margin: 0; }
.ci-price > div { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px dashed var(--ci-line); }
.ci-price dt { font-weight: 400; }
.ci-price dd { margin: 0; white-space: nowrap; }
.ci-price small { color: var(--ci-muted); }
.ci-price-discount dd { color: #059669; }
.ci-price-total { border-bottom: 0 !important; font-size: 18px; font-weight: 700; color: var(--ci-dark); }
.ci-price-total dt { font-weight: 700; }
.ci-price-advance { padding: 10px 12px !important; margin-top: 4px; background: #eef8fd; border: 0 !important; font-weight: 700; color: var(--ci-navy); }
.ci-price-nights { display: block !important; }
.ci-price-nights summary { cursor: pointer; font-size: 14px; color: var(--ci-primary); }
.ci-price-nights ul { margin: 8px 0 0; padding: 0; list-style: none; font-size: 14px; }
.ci-price-nights li { display: flex; justify-content: space-between; padding: 3px 0; }
.ci-price-paid { margin-top: 10px; padding-top: 6px; border-top: 2px solid var(--ci-line); }

/* coupon */
.ci-bk-coupon { margin-top: 18px; }
.ci-bk-coupon label { display: block; margin-bottom: 6px; font-size: 14px; font-weight: 600; }
.ci-bk-coupon div { display: flex; }
.ci-bk-coupon input { flex: 1; min-width: 0; padding: 9px 10px; border: 1px solid #cfd6dd; border-right: 0; text-transform: uppercase; font: inherit; }
.ci-bk-coupon button { padding: 9px 16px; border: 1px solid var(--ci-navy); background: var(--ci-navy); color: #fff; font-weight: 600; cursor: pointer; }
.ci-bk-coupon-err { margin: 8px 0 0; font-size: 14px; color: #dc2626; }
.ci-bk-coupon-ok { margin: 8px 0 0; font-size: 14px; color: #059669; font-weight: 600; }

/* facts */
.ci-bk-facts { margin: 0; }
.ci-bk-facts > div { display: grid; grid-template-columns: 120px 1fr; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--ci-line); }
.ci-bk-facts > div:last-child { border-bottom: 0; }
.ci-bk-facts dt { font-weight: 600; color: var(--ci-muted); }
.ci-bk-facts dd { margin: 0; color: var(--ci-dark); }
.ci-bk-facts small { color: var(--ci-muted); }

/* payment choice */
.ci-bk-options { display: grid; gap: 10px; margin: 0 0 18px; }
.ci-bk-option { display: flex; gap: 12px; align-items: flex-start; padding: 14px; border: 1px solid var(--ci-line); cursor: pointer; }
.ci-bk-option:has(input:checked) { border-color: var(--ci-primary); background: #eef8fd; }
.ci-bk-option input { margin-top: 4px; }
.ci-bk-option span { display: flex; flex-direction: column; }
.ci-bk-option small { color: var(--ci-muted); }
.ci-bk-cancel button { padding: 0; border: 0; background: none; color: #dc2626; text-decoration: underline; cursor: pointer; font: inherit; font-size: 14px; }

/* status page */
.ci-bk-status { display: flex; gap: 18px; align-items: center; margin: 0 0 24px; padding: 22px 24px; background: #fff; border-left: 5px solid; }
.ci-bk-status > i { font-size: 40px; }
.sb-site .ci-bk .ci-bk-status .ci-bk-title { margin: 0 0 4px; font-size: 30px; }
.ci-bk-status p { margin: 0; }
.ci-bk-status-ok { border-color: #10b981; } .ci-bk-status-ok > i { color: #10b981; }
.ci-bk-status-warn { border-color: #f59e0b; } .ci-bk-status-warn > i { color: #f59e0b; }
.ci-bk-status-err { border-color: #dc2626; } .ci-bk-status-err > i { color: #dc2626; }
.ci-bk-status-info { border-color: var(--ci-primary); } .ci-bk-status-info > i { color: var(--ci-primary); }
.ci-bk-badge { display: inline-block; padding: 2px 10px; border-radius: 12px; font-size: 13px; font-weight: 700; }
.ci-bk-badge-ok { background: #d1fae5; color: #065f46; }
.ci-bk-badge-warn { background: #fef3c7; color: #92400e; }
.ci-bk-badge-err { background: #fee2e2; color: #991b1b; }
.ci-bk-badge-info { background: #e0f2fe; color: #075985; }
.ci-bk-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.ci-bk-table th, .ci-bk-table td { padding: 8px 6px; border-bottom: 1px solid var(--ci-line); text-align: left; }
.ci-bk-table .num { text-align: right; }
.ci-bk-print { text-align: center; font-size: 14px; }

@media print {
    .sb-t-header, .sb-t-footer, .sb-t-section:not(:has(.ci-bk)), .ci-fh, .ci-steps, .ci-bk-print, form { display: none !important; }
    .ci-bk { background: #fff; padding: 0; }
}

/* track a booking (resources/views/site/booking/track.blade.php, widget site-widgets.booking-track) */
.ci-bk-track { max-width: 760px; }
.ci-sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ci-track-search { position: relative; display: flex; gap: 10px; margin: 0 0 24px; }
.ci-track-search > i { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--ci-muted, #6b7280); }
.ci-track-search input { flex: 1; min-width: 0; padding: 14px 14px 14px 44px; border: 1px solid #cfd6dd; background: #fff;
    font: 600 17px/1.2 'Roboto', system-ui, sans-serif; letter-spacing: 1px; text-transform: uppercase; color: #222; }
.ci-track-search input::placeholder { text-transform: none; letter-spacing: 0; font-weight: 400; }
.ci-track-search input:focus { outline: 2px solid rgba(38, 163, 219, .35); border-color: var(--ci-primary, #26a3db); }
.ci-track-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 18px; }
.ci-track-code { font: 700 22px/1.2 'Roboto Condensed', 'Roboto', sans-serif; letter-spacing: 1px; color: var(--ci-navy, #273272); }
.ci-track-for { font-size: 14px; color: var(--ci-muted, #6b7280); }
.ci-track-steps { display: flex; margin: 0 0 22px; padding: 0; list-style: none; }
.ci-track-steps li { position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 13px; color: var(--ci-muted, #6b7280); text-align: center; }
.ci-track-steps li::before { content: ""; position: absolute; top: 13px; left: -50%; right: 50%; height: 3px; background: #e5e7eb; z-index: 0; }
.ci-track-steps li:first-child::before { display: none; }
.ci-track-steps li.is-done::before, .ci-track-steps li.is-current::before { background: #10b981; }
.ci-track-dot { position: relative; z-index: 1; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: #e5e7eb; color: #fff; font-size: 12px; }
.ci-track-steps .is-done .ci-track-dot { background: #10b981; }
.ci-track-steps .is-current .ci-track-dot { background: var(--ci-primary, #26a3db); box-shadow: 0 0 0 5px rgba(38, 163, 219, .18); }
.ci-track-steps .is-current .ci-track-label { font-weight: 700; color: var(--ci-dark, #2a2a2a); }
.ci-track-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin: 0; }
.ci-track-facts > div { padding: 12px 14px; background: #f4f6f8; }
.ci-track-facts dt { font-size: 12px; font-weight: 400; text-transform: uppercase; letter-spacing: .5px; color: var(--ci-muted, #6b7280); }
.ci-track-facts dd { margin: 2px 0 0; font-weight: 700; color: var(--ci-dark, #2a2a2a); }
.ci-track-facts small { display: block; font-weight: 400; color: var(--ci-muted, #6b7280); }
.ci-track-verify-row { display: flex; gap: 12px; align-items: flex-end; }
.ci-track-verify-row .ci-field { flex: 1; }
@media (max-width: 575.98px) {
    .ci-track-search { flex-direction: column; }
    .ci-track-search > i { top: 26px; }
    .ci-track-verify-row { flex-direction: column; align-items: stretch; }
    .ci-track-steps .ci-track-label { font-size: 11px; }
}
.ci-trk { text-align: left; }
.sb-site .ci-trk .ci-trk-title { margin: 0 0 6px; font-size: 26px; }
.ci-trk-intro { margin: 0 0 14px; color: var(--ci-muted, #6b7280); }
.ci-trk .ci-track-search { margin: 0; }

/* pay at the hotel (offline), under the online payment when both are on */
.ci-bk-or { display: flex; align-items: center; gap: 12px; margin: 22px 0 14px; color: var(--ci-muted, #6b7280); font-size: 13px; text-transform: uppercase; letter-spacing: 1px; }
.ci-bk-or::before, .ci-bk-or::after { content: ""; flex: 1; border-top: 1px solid var(--ci-line, #e5e7eb); }
.ci-bk-h3 { font-size: 17px; margin: 0 0 6px; }
.ci-bk-h3 i { color: var(--ci-primary, #26a3db); margin-right: 6px; }