/* ==========================================================================
   Khone Mosafer design system (shared by Site and Admin)
   Brand tokens carried over from the old project: blue #0863BE, green #1ED783,
   admin purple #7C3AED, IRANSansXV, rounded 2xl/3xl surfaces, soft shadows.
   ========================================================================== */
@font-face {
  font-family: 'IRANSansXV';
  src: url('../fonts/IRANSansXV.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --km-primary: #0863be;
  --km-primary-600: #07549f;
  --km-primary-50: #eaf3fc;
  --km-secondary: #1ed783;
  --km-secondary-600: #15b36b;
  --km-admin: #7c3aed;
  --km-admin-bg: #ede9fe;
  --km-text: #202020;
  --km-muted: #7a7a7a;
  --km-border: #e1e1e1;
  --km-surface: #ffffff;
  --km-bg: #f7f8fa;
  --km-soft: #f5f5f5;
  --km-danger: #fa1744;
  --km-warning: #f59e0b;
  --km-radius: 1rem;
  --km-radius-lg: 1.5rem;
  --km-shadow: 0 10px 30px -12px rgba(8, 40, 90, .18);
  --km-shadow-lg: 0 24px 60px -20px rgba(8, 40, 90, .28);
  --km-ease: cubic-bezier(.2, .8, .2, 1);

  --bs-primary: var(--km-primary);
  --bs-primary-rgb: 8, 99, 190;
  --bs-success: var(--km-secondary-600);
  --bs-success-rgb: 21, 179, 107;
  --bs-body-font-family: 'IRANSansXV', Tahoma, sans-serif;
  --bs-body-color: var(--km-text);
  --bs-border-color: var(--km-border);
  --bs-border-radius: .75rem;
  --bs-border-radius-lg: 1rem;
  --bs-link-color: var(--km-primary);
  --bs-link-color-rgb: 8, 99, 190;
}

html { scroll-behavior: smooth; }

/* One page width for every section (header, hero, content, footer) so all edges line up. */
body.km-site .container, .container-full { width: 100%; max-width: 1440px; margin-inline: auto; padding-inline: clamp(.75rem, 2.2vw, 1.5rem); }
body.km-site { overflow-x: hidden; }
img, video, iframe { max-width: 100%; }
body { font-family: 'IRANSansXV', Tahoma, sans-serif; background: var(--km-bg); color: var(--km-text); -webkit-font-smoothing: antialiased; }
.fa-num { font-feature-settings: "ss01"; }
a { text-decoration: none; }
img { max-width: 100%; }
::selection { background: var(--km-primary); color: #fff; }

/* ---------- buttons ---------- */
.btn { border-radius: .85rem; font-weight: 700; transition: transform .2s var(--km-ease), box-shadow .2s var(--km-ease), background-color .2s; }
.btn:active { transform: scale(.97); }
.btn-primary { --bs-btn-bg: var(--km-primary); --bs-btn-border-color: var(--km-primary); --bs-btn-hover-bg: var(--km-primary-600); --bs-btn-hover-border-color: var(--km-primary-600); --bs-btn-active-bg: var(--km-primary-600); box-shadow: 0 8px 20px -10px rgba(8, 99, 190, .7); }
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 12px 24px -10px rgba(8, 99, 190, .8); }
.btn-secondary-km { background: var(--km-secondary); color: #04361f; border: 0; }
.btn-secondary-km:hover { background: var(--km-secondary-600); color: #fff; }
.btn-soft { background: var(--km-primary-50); color: var(--km-primary); border: 0; }
.btn-soft:hover { background: var(--km-primary); color: #fff; }
.btn-icon { width: 2.5rem; height: 2.5rem; display: inline-flex; align-items: center; justify-content: center; padding: 0; border-radius: 50%; }

/* ---------- surfaces ---------- */
.km-card { background: var(--km-surface); border: 1px solid var(--km-border); border-radius: var(--km-radius-lg); box-shadow: var(--km-shadow); }
.km-card-flat { background: var(--km-surface); border: 1px solid var(--km-border); border-radius: var(--km-radius-lg); }
.km-section-title { font-weight: 800; font-size: 1.35rem; display: flex; align-items: center; gap: .5rem; }
.km-section-title::before { content: ""; width: .45rem; height: 1.4rem; border-radius: 1rem; background: linear-gradient(180deg, var(--km-primary), var(--km-secondary)); }
.text-muted-km { color: var(--km-muted) !important; }
.text-primary-km { color: var(--km-primary) !important; }
.text-secondary-km { color: var(--km-secondary-600) !important; }
.bg-primary-soft { background: var(--km-primary-50) !important; }
.rounded-km { border-radius: var(--km-radius) !important; }
.rounded-km-lg { border-radius: var(--km-radius-lg) !important; }

/* ---------- forms ---------- */
.form-control, .form-select { border-radius: .85rem; padding: .7rem 1rem; border-color: var(--km-border); }
.form-control:focus, .form-select:focus { border-color: var(--km-primary); box-shadow: 0 0 0 .2rem rgba(8, 99, 190, .12); }
.form-label { font-weight: 700; font-size: .85rem; color: #444; }
.is-invalid, .invalid.form-control { border-color: var(--km-danger) !important; }
.validation-message { color: var(--km-danger); font-size: .78rem; margin-top: .25rem; }

/* ---------- animations ---------- */
@keyframes km-fade-up { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes km-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes km-pop { 0% { transform: scale(.92); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
@keyframes km-shimmer { 100% { transform: translateX(-100%); } }
@keyframes km-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes km-pulse-ring { 0% { box-shadow: 0 0 0 0 rgba(30, 215, 131, .5); } 100% { box-shadow: 0 0 0 14px rgba(30, 215, 131, 0); } }
@keyframes km-slide-in { from { transform: translateX(-100%); opacity: 0; } to { transform: none; opacity: 1; } }
.km-anim-up { animation: km-fade-up .6s var(--km-ease) both; }
.km-anim-pop { animation: km-pop .35s var(--km-ease) both; }
.km-anim-fade { animation: km-fade .5s ease both; }
.km-float { animation: km-float 4s ease-in-out infinite; }
.km-delay-1 { animation-delay: .08s; } .km-delay-2 { animation-delay: .16s; } .km-delay-3 { animation-delay: .24s; } .km-delay-4 { animation-delay: .32s; }
[data-reveal] { opacity: 0; transform: translateY(22px); transition: opacity .7s var(--km-ease), transform .7s var(--km-ease); }
[data-reveal].revealed { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } [data-reveal] { opacity: 1; transform: none; } }

.km-skeleton { position: relative; overflow: hidden; background: #eef0f3; border-radius: .75rem; }
.km-skeleton::after { content: ""; position: absolute; inset: 0; transform: translateX(100%); background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .7), transparent); animation: km-shimmer 1.4s infinite; }

/* ---------- header ---------- */
.km-header { position: sticky; top: 0; z-index: 1030; transition: background .3s, box-shadow .3s, backdrop-filter .3s; }
.km-header.scrolled, .km-header.solid { background: rgba(255, 255, 255, .86); backdrop-filter: blur(14px); box-shadow: 0 6px 24px -18px rgba(0, 0, 0, .35); }
.km-header .nav-link { font-weight: 700; font-size: .9rem; color: var(--km-text); position: relative; padding: .5rem .2rem; }
.km-header .nav-link::after { content: ""; position: absolute; right: 0; bottom: 0; height: 2px; width: 0; background: var(--km-primary); transition: width .25s var(--km-ease); }
.km-header .nav-link:hover::after, .km-header .nav-link.active::after { width: 100%; }
.km-logo { height: 46px; }

/* ---------- hero ---------- */
/* The hero itself does not clip (so search popups can overflow it); only the background image and overlay are rounded/clipped. */
.km-hero { position: relative; border-radius: 2rem; min-height: 460px; display: flex; align-items: flex-end; z-index: 20; }
.km-hero > img.km-hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 2rem; animation: km-fade 1s ease both; }
.km-hero::after { content: ""; position: absolute; inset: auto 0 0 0; height: 45%; border-radius: 0 0 2rem 2rem; background: linear-gradient(180deg, transparent, rgba(4, 22, 48, .28)); pointer-events: none; z-index: 1; }
.km-hero-content { position: relative; z-index: 30; width: 100%; padding: 2rem 1.25rem 2.25rem; }
.km-hero h1 { color: #fff; font-weight: 900; font-size: clamp(1.4rem, 3.4vw, 2.6rem); text-shadow: 0 4px 24px rgba(0, 0, 0, .35); }
.km-hero p.lead { color: rgba(255, 255, 255, .85); }
.km-glass { background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .32); backdrop-filter: blur(12px); border-radius: 1.25rem; color: #fff; }
.km-search { padding: .6rem; display: grid; grid-template-columns: 1.4fr 1.2fr .8fr auto; gap: .5rem; }
.km-search .km-field { background: rgba(255, 255, 255, .95); border-radius: 1rem; padding: .55rem .9rem; color: var(--km-text); border: 0; min-height: 56px; display: flex; flex-direction: column; justify-content: center; position: relative; }
.km-search .km-field label { font-size: .7rem; color: var(--km-muted); font-weight: 700; margin: 0; }
.km-search .km-field input, .km-search .km-field select, .km-search .km-field button.km-field-btn { border: 0; outline: 0; background: transparent; font-weight: 700; padding: 0; width: 100%; text-align: right; color: var(--km-text); }
.km-search .btn-search { min-width: 120px; border-radius: 1rem; }
.km-glass.km-search { backdrop-filter: none; background: rgba(255, 255, 255, .18); }
.km-suggest { position: absolute; top: calc(100% + .4rem); right: 0; left: 0; z-index: 1080; background: #fff; border-radius: 1rem; box-shadow: var(--km-shadow-lg); overflow: hidden; animation: km-pop .2s var(--km-ease); }
.km-suggest button { display: flex; width: 100%; justify-content: space-between; padding: .7rem 1rem; border: 0; background: #fff; font-weight: 700; }
.km-suggest button:hover { background: var(--km-primary-50); color: var(--km-primary); }
@media (max-width: 991px) { .km-search { grid-template-columns: 1fr 1fr; } .km-search .btn-search { grid-column: span 2; } .km-hero { min-height: 520px; } }
@media (max-width: 575px) { .km-search { grid-template-columns: 1fr; } .km-search .btn-search { grid-column: auto; } }

/* ---------- hero search (original khonemosafer.ir glass style) ---------- */
.km-hero-blur { position: absolute; inset: auto 0 0 0; height: 16rem; border-radius: 0 0 2rem 2rem; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000); mask-image: linear-gradient(to bottom, transparent, #000); z-index: 1; pointer-events: none; }
.km-hero-bar { width: fit-content; max-width: 100%; margin-inline: auto; display: flex; flex-direction: column; gap: 1rem; }
.km-hero-titles { display: flex; align-items: center; justify-content: space-between; gap: 1rem; color: #fff; font-weight: 800; }
.km-hero-titles h1 { font-size: clamp(1.15rem, 2vw, 1.5rem); margin: 0; font-weight: 800; color: #fff; text-shadow: 0 2px 14px rgba(0, 0, 0, .25); }
.km-hero-titles span { font-size: .85rem; opacity: .95; }
.km-hsearch { display: flex; align-items: center; justify-content: center; gap: .5rem; }
.km-hfield { position: relative; height: 3rem; border-radius: 1rem; border: 1px solid rgba(255, 255, 255, .3); background: rgba(255, 255, 255, .1);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); color: #fff; font-weight: 700; display: flex; align-items: center; transition: background .2s, border-color .2s; }
.km-hfield:hover, .km-hfield:focus-within { background: rgba(255, 255, 255, .18); border-color: rgba(255, 255, 255, .55); }
.km-hfield input, .km-hfield > button { background: transparent; border: 0; outline: 0; color: #fff; font-weight: 700; width: 100%; height: 100%; padding: 0 1rem; text-align: right; font-size: .9rem; }
.km-hfield input::placeholder { color: #fff; font-weight: 300; opacity: 1; }
.km-hfield .ph { font-weight: 300; }
.km-hfield-dest { width: 15.1rem; }
.km-hfield-date { width: 16rem; } .km-hfield-date > button { text-align: center; }
.km-hfield-guests { width: 10rem; justify-content: space-between; padding: 0 .55rem; font-size: .85rem; white-space: nowrap; gap: .25rem; }
.km-hstep { width: 1.4rem; height: 1.4rem; border-radius: 50%; border: 0; background: transparent; color: rgba(255, 255, 255, .85); display: inline-flex; align-items: center; justify-content: center; padding: 0; }
.km-hstep:hover { background: rgba(255, 255, 255, .2); color: #fff; }
.km-hsubmit { height: 3rem; width: 3.5rem; border-radius: 1rem; padding: 0; display: inline-flex; align-items: center; justify-content: center; font-size: 1.3rem; }
.km-hpop { position: absolute; bottom: calc(100% + .5rem); z-index: 1085; animation: km-pop .2s var(--km-ease); }
.km-hpop-glass { right: 0; left: 0; overflow: hidden; border-radius: 1rem; border: 1px solid rgba(255, 255, 255, .25); background: rgba(255, 255, 255, .2); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: var(--km-shadow-lg); }
.km-hpop-glass button { width: 100%; display: flex; justify-content: space-between; align-items: center; padding: .6rem 1rem; border: 0; background: transparent; color: #fff; font-weight: 700; font-size: .88rem; }
.km-hpop-glass button small { color: rgba(255, 255, 255, .65); font-weight: 400; }
.km-hpop-glass button:hover { background: rgba(255, 255, 255, .2); }
.km-hpop-cal { left: 50%; transform: translateX(-50%); width: max-content; max-width: 92vw; background: #fff; color: var(--km-text); border: 1px solid var(--km-border); border-radius: 1.25rem; padding: 1.1rem; box-shadow: var(--km-shadow-lg); }
.km-hpop-cal .km-cal-grid { min-width: 280px; }
@media (min-width: 992px) { .km-hpop-cal { width: 640px; } }
@media (max-width: 767px) {
  .km-hero-bar { width: 100%; }
  .km-hero-titles { flex-direction: column; text-align: center; gap: .25rem; }
  .km-hsearch { flex-wrap: wrap; }
  .km-hfield-dest { width: 100%; }
  .km-hfield-date { flex: 1 1 55%; width: auto; }
  .km-hfield-guests { flex: 1 1 35%; width: auto; }
  .km-hsubmit { width: 100%; font-size: 1rem; }
  .km-hpop-cal { position: fixed; left: 0; right: 0; bottom: 0; top: auto; transform: none; width: 100%; max-width: none; border-radius: 1.5rem 1.5rem 0 0; max-height: 82vh; overflow-y: auto; z-index: 2000; }
}

/* ---------- categories ---------- */
.km-cats { display: flex; gap: 1rem; overflow-x: auto; padding: .5rem .25rem 1rem; scrollbar-width: none; }
.km-cats::-webkit-scrollbar { display: none; }
.km-cat { flex: 0 0 auto; min-width: 104px; display: flex; flex-direction: column; align-items: center; gap: .5rem; padding: 1rem .8rem; border-radius: 1.25rem; background: #fff; border: 1px solid var(--km-border); color: var(--km-text); font-weight: 700; font-size: .85rem; transition: transform .25s var(--km-ease), box-shadow .25s, border-color .25s; }
.km-cat img { width: 44px; height: 44px; object-fit: contain; transition: transform .35s var(--km-ease); }
.km-cat:hover { transform: translateY(-4px); box-shadow: var(--km-shadow); border-color: var(--km-primary); color: var(--km-primary); }
.km-cat:hover img { transform: scale(1.12) rotate(-4deg); }
.km-cat.active { border-color: var(--km-primary); background: var(--km-primary-50); color: var(--km-primary); }

/* ---------- accommodation card ---------- */
.km-acc-card { display: block; color: var(--km-text); border-radius: 1.25rem; transition: transform .3s var(--km-ease); }
.km-acc-card:hover { transform: translateY(-6px); color: var(--km-text); }
.km-acc-img { position: relative; aspect-ratio: 4/3; border-radius: 1.25rem; overflow: hidden; background: #eef0f3; }
.km-acc-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--km-ease); }
.km-acc-card:hover .km-acc-img img { transform: scale(1.07); }
.km-acc-img .km-fav { position: absolute; top: .6rem; left: .6rem; z-index: 2; width: 2.3rem; height: 2.3rem; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .7); backdrop-filter: blur(6px); display: flex; align-items: center; justify-content: center; color: var(--km-danger); transition: transform .2s; }
.km-acc-img .km-fav:hover { transform: scale(1.12); }
.km-acc-img .km-badge-type { position: absolute; bottom: .6rem; right: .6rem; background: rgba(255, 255, 255, .9); border-radius: .7rem; padding: .2rem .6rem; font-size: .72rem; font-weight: 800; color: var(--km-primary); }
.km-acc-body { padding: .7rem .4rem 0; }
.km-acc-title { font-weight: 800; font-size: .98rem; margin: .3rem 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.km-acc-meta { display: flex; justify-content: space-between; color: var(--km-muted); font-size: .78rem; }
.km-acc-price { color: var(--km-primary); font-weight: 800; font-size: .95rem; margin-top: .35rem; }
.km-acc-price small { font-weight: 400; color: var(--km-muted); }
.km-rating { color: #f5a623; font-size: .8rem; font-weight: 700; }

/* ---------- destinations / banners ---------- */
.km-dest { position: relative; display: block; border-radius: 1.5rem; overflow: hidden; aspect-ratio: 3/4; }
.km-dest img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--km-ease); }
.km-dest:hover img { transform: scale(1.08); }
.km-dest span { position: absolute; inset: auto 0 0 0; padding: 1.2rem 1rem .9rem; color: #fff; font-weight: 800; background: linear-gradient(180deg, transparent, rgba(0, 0, 0, .65)); }
.km-promo { position: relative; display: block; border-radius: 1rem; overflow: hidden; color: var(--km-text); transition: transform .35s var(--km-ease), box-shadow .35s; }
.km-promo img { width: 100%; display: block; transition: transform .7s var(--km-ease); }
.km-promo:hover { transform: translateY(-4px); box-shadow: var(--km-shadow-lg); color: var(--km-text); }
.km-promo:hover img { transform: scale(1.04); }
.km-promo-body { position: absolute; top: 0; bottom: 0; right: 2rem; margin: auto 0; height: fit-content; display: flex; flex-direction: column; align-items: center; gap: .75rem; }
.km-promo-title { font-weight: 800; font-size: clamp(.85rem, 1.4vw, 1.15rem); }
.km-promo-btn { background: #fff; color: var(--km-text); font-weight: 700; border-radius: .75rem; padding: .55rem 2rem; font-size: .85rem; box-shadow: 0 6px 16px -8px rgba(0, 0, 0, .35); transition: background .2s, color .2s; }
.km-promo:hover .km-promo-btn { background: var(--km-primary); color: #fff; }
@media (max-width: 575px) { .km-promo-body { right: 1.2rem; gap: .4rem; } .km-promo-btn { padding: .3rem 1.2rem; font-size: .75rem; border-radius: .5rem; } }
.km-hscroll { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 3 * 1.25rem) / 4); gap: 1.25rem; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: .5rem; scrollbar-width: thin; }
.km-hscroll-item { scroll-snap-align: start; }
@media (max-width: 991px) { .km-hscroll { grid-auto-columns: calc((100% - 1.25rem) / 2.2); } }
@media (max-width: 575px) { .km-hscroll { grid-auto-columns: 72%; } }
.km-on-dark .km-acc-card, .km-on-dark .km-acc-title { color: #fff; }
.km-on-dark .km-acc-meta, .km-on-dark .km-acc-price small, .km-on-dark .km-rating .text-muted-km { color: rgba(255, 255, 255, .7) !important; }
.km-on-dark .km-acc-price { color: var(--km-secondary); }
.km-banner { display: block; border-radius: 1.5rem; overflow: hidden; box-shadow: var(--km-shadow); transition: transform .35s var(--km-ease), box-shadow .35s; }
.km-banner:hover { transform: translateY(-4px) scale(1.01); box-shadow: var(--km-shadow-lg); }
.km-featured { background: linear-gradient(135deg, #062f5c 0%, var(--km-primary) 55%, #0aa36a 140%); border-radius: 2rem; position: relative; overflow: hidden; }
.km-featured::before { content: ""; position: absolute; inset: 0; background: url('../images/patterns/featured-background.webp') center/cover; opacity: .18; }

/* ---------- footer ---------- */
.km-footer { background: var(--km-soft); border-radius: 2rem; }
.km-footer h6 { color: var(--km-primary); font-weight: 800; }
.km-footer a { color: var(--km-text); font-size: .9rem; }
.km-footer a:hover { color: var(--km-primary); }
.km-footer .km-social a { width: 2.6rem; height: 2.6rem; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: #fff; color: var(--km-primary); transition: transform .25s, background .25s, color .25s; }
.km-footer .km-social a:hover { transform: translateY(-3px); background: var(--km-primary); color: #fff; }
.km-to-top { position: absolute; top: -1.4rem; left: 50%; transform: translateX(-50%); width: 3rem; height: 3rem; border-radius: 50%; border: 4px solid var(--km-soft); background: var(--km-primary); color: #fff; display: flex; align-items: center; justify-content: center; }

/* ---------- detail page ---------- */
.km-gallery { display: grid; grid-template-columns: 2fr 1fr 1fr; grid-template-rows: 1fr 1fr; gap: .6rem; height: 440px; border-radius: 1.75rem; overflow: hidden; }
.km-gallery a { position: relative; overflow: hidden; display: block; }
.km-gallery a:first-child { grid-row: span 2; }
.km-gallery img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--km-ease), filter .3s; }
.km-gallery a:hover img { transform: scale(1.05); filter: brightness(.92); }
.km-gallery .km-more { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, .45); color: #fff; font-weight: 800; }
@media (max-width: 767px) { .km-gallery { grid-template-columns: 1fr; grid-template-rows: auto; height: auto; } .km-gallery a:not(:first-child) { display: none; } .km-gallery a:first-child { aspect-ratio: 4/3; } }
.km-booking { position: sticky; top: 96px; }
.km-spec { display: flex; gap: .7rem; align-items: center; background: #fff; border: 1px solid var(--km-border); border-radius: 1rem; padding: .8rem 1rem; }
.km-spec i { font-size: 1.3rem; color: var(--km-primary); }
.km-facility { display: inline-flex; align-items: center; gap: .4rem; background: #fff; border: 1px solid var(--km-border); border-radius: 999px; padding: .4rem .9rem; font-size: .85rem; margin: .25rem; }
.km-facility i { color: var(--km-secondary-600); }
.km-tabs { position: sticky; top: 72px; z-index: 5; background: rgba(247, 248, 250, .92); backdrop-filter: blur(10px); }
.km-tabs a { font-weight: 700; color: var(--km-muted); padding: .8rem 1rem; display: inline-block; border-bottom: 2px solid transparent; }
.km-tabs a:hover, .km-tabs a.active { color: var(--km-primary); border-color: var(--km-primary); }

/* ---------- calendar ---------- */
.km-cal { user-select: none; }
.km-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: .3rem; }
.km-cal-head { font-size: .72rem; color: var(--km-muted); text-align: center; font-weight: 700; }
.km-cal-day { border: 1px solid transparent; background: #fff; border-radius: .8rem; min-height: 54px; display: flex; flex-direction: column; align-items: center; justify-content: center; font-weight: 700; cursor: pointer; transition: background .15s, transform .15s; font-size: .9rem; }
.km-cal-day small { font-size: .62rem; font-weight: 500; color: var(--km-muted); }
.km-cal-day:hover:not(.disabled) { background: var(--km-primary-50); transform: translateY(-1px); }
.km-cal-day.holiday { color: var(--km-danger); }
.km-cal-day.disabled { opacity: .35; cursor: not-allowed; text-decoration: line-through; }
.km-cal-day.in-range { background: var(--km-primary-50); }
.km-cal-day.start, .km-cal-day.end { background: var(--km-primary); color: #fff; }
.km-cal-day.start small, .km-cal-day.end small { color: rgba(255, 255, 255, .8); }
.km-cal-day.empty { visibility: hidden; }
.km-cal-day.today { border-color: var(--km-secondary); }

/* ---------- Jalali date picker (single date) ---------- */
.km-dp { position: relative; }
.km-dp-btn { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: .5rem; border: 1px solid var(--km-border); background: #fff; border-radius: .85rem; padding: .55rem .85rem; font-weight: 700; color: var(--km-text); font-size: .88rem; transition: border-color .2s, box-shadow .2s; }
.km-dp-btn.sm { padding: .4rem .7rem; font-size: .82rem; }
.km-dp-btn:hover, .km-dp.open .km-dp-btn { border-color: var(--km-primary); box-shadow: 0 0 0 .2rem rgba(8, 99, 190, .1); }
.km-dp-btn .ph { color: var(--km-muted); font-weight: 500; }
.km-dp-btn i { color: var(--km-primary); }
.km-dp-pop { position: absolute; z-index: 1090; top: calc(100% + .4rem); right: 0; width: 300px; background: #fff; border-radius: 1.2rem; box-shadow: var(--km-shadow-lg); border: 1px solid var(--km-border); padding: .9rem; animation: km-pop .2s var(--km-ease); }
.km-dp-pop.up { top: auto; bottom: calc(100% + .4rem); }
.km-dp-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: .6rem; }
.km-dp-head select { border: 0; background: var(--km-primary-50); color: var(--km-primary); font-weight: 800; border-radius: .6rem; padding: .2rem .4rem; font-size: .85rem; }
.km-dp-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: .2rem; text-align: center; }
.km-dp-grid .wd { font-size: .7rem; color: var(--km-muted); font-weight: 800; padding: .2rem 0; }
.km-dp-grid button { border: 0; background: transparent; border-radius: .6rem; aspect-ratio: 1; font-weight: 700; font-size: .85rem; color: var(--km-text); transition: background .15s, color .15s, transform .15s; }
.km-dp-grid button:hover:not(:disabled) { background: var(--km-primary-50); color: var(--km-primary); transform: scale(1.08); }
.km-dp-grid button.fri { color: var(--km-danger); }
.km-dp-grid button.today { box-shadow: inset 0 0 0 1.5px var(--km-secondary); }
.km-dp-grid button.sel { background: var(--km-primary); color: #fff; }
.km-dp-grid button.inr { background: var(--km-primary-50); }
.km-dp-grid button:disabled { opacity: .3; cursor: not-allowed; }
.km-dp-foot { display: flex; justify-content: space-between; margin-top: .6rem; }
.km-admin .km-dp-btn i, .km-admin .km-dp-head select { color: var(--km-admin); }
.km-admin .km-dp-head select { background: var(--km-admin-bg); }
.km-admin .km-dp-grid button.sel { background: var(--km-admin); }
.km-admin .km-dp-grid button:hover:not(:disabled) { background: var(--km-admin-bg); color: var(--km-admin); }

/* ---------- dashboard (site) ---------- */
.km-dash { display: grid; grid-template-columns: 270px 1fr; gap: 1.5rem; }
.km-dash-side { background: #fff; border: 1px solid var(--km-border); border-radius: 1.5rem; padding: 1rem; height: fit-content; position: sticky; top: 90px; }
.km-dash-side a { display: flex; align-items: center; gap: .7rem; padding: .7rem .9rem; border-radius: .9rem; color: var(--km-text); font-weight: 700; font-size: .9rem; transition: background .2s, color .2s, transform .2s; }
.km-dash-side a:hover { background: var(--km-primary-50); color: var(--km-primary); transform: translateX(-3px); }
.km-dash-side a.active { background: var(--km-primary); color: #fff; box-shadow: 0 10px 20px -12px rgba(8, 99, 190, .8); }
.km-dash-side .km-side-title { font-size: .72rem; color: var(--km-muted); font-weight: 800; padding: .8rem .9rem .3rem; }
@media (max-width: 991px) { .km-dash { grid-template-columns: 1fr; } .km-dash-side { position: static; display: flex; overflow-x: auto; gap: .3rem; } .km-dash-side a { white-space: nowrap; } .km-dash-side .km-side-title { display: none; } }

.km-kpi { background: #fff; border: 1px solid var(--km-border); border-radius: 1.25rem; padding: 1.1rem 1.2rem; position: relative; overflow: hidden; transition: transform .25s var(--km-ease), box-shadow .25s; }
.km-kpi:hover { transform: translateY(-3px); box-shadow: var(--km-shadow); }
.km-kpi .km-kpi-title { font-size: .78rem; color: var(--km-muted); font-weight: 700; }
.km-kpi .km-kpi-value { font-size: 1.35rem; font-weight: 900; margin-top: .3rem; }
.km-kpi .km-kpi-unit { font-size: .72rem; color: var(--km-muted); font-weight: 500; }
.km-kpi .km-kpi-icon { position: absolute; left: 1rem; top: 1rem; width: 2.6rem; height: 2.6rem; border-radius: .9rem; display: flex; align-items: center; justify-content: center; background: var(--km-primary-50); color: var(--km-primary); font-size: 1.2rem; }
.km-kpi .km-change.up { color: var(--km-secondary-600); } .km-kpi .km-change.down { color: var(--km-danger); }
.km-chart-box { position: relative; height: 300px; }
.km-chart-box.sm { height: 230px; }

/* ---------- stepper ---------- */
.km-steps { display: flex; gap: .4rem; overflow-x: auto; padding-bottom: .5rem; }
.km-step { flex: 0 0 auto; display: flex; align-items: center; gap: .45rem; padding: .45rem .8rem; border-radius: 999px; background: #fff; border: 1px solid var(--km-border); font-size: .8rem; font-weight: 700; color: var(--km-muted); cursor: pointer; }
.km-step .n { width: 1.5rem; height: 1.5rem; border-radius: 50%; background: var(--km-soft); display: inline-flex; align-items: center; justify-content: center; font-size: .72rem; }
.km-step.done { color: var(--km-secondary-600); border-color: rgba(21, 179, 107, .4); }
.km-step.done .n { background: var(--km-secondary); color: #fff; }
.km-step.current { color: #fff; background: var(--km-primary); border-color: var(--km-primary); }
.km-step.current .n { background: rgba(255, 255, 255, .25); color: #fff; }
.km-step.locked { opacity: .5; cursor: not-allowed; }

/* ---------- misc ---------- */
.km-otp { display: flex; gap: .6rem; direction: ltr; justify-content: center; }
.km-otp input { width: 3.2rem; height: 3.6rem; text-align: center; font-size: 1.4rem; font-weight: 800; border-radius: .9rem; border: 1.5px solid var(--km-border); transition: border-color .15s, box-shadow .15s; }
.km-otp input:focus { border-color: var(--km-primary); box-shadow: 0 0 0 .2rem rgba(8, 99, 190, .12); outline: 0; }
.km-empty { text-align: center; padding: 3rem 1rem; color: var(--km-muted); }
.km-empty img { width: 140px; opacity: .9; }
.km-toasts { position: fixed; z-index: 2000; bottom: 1.25rem; left: 1.25rem; display: flex; flex-direction: column; gap: .5rem; max-width: 360px; }
.km-toast { background: #fff; border-radius: 1rem; box-shadow: var(--km-shadow-lg); padding: .85rem 1rem; display: flex; gap: .6rem; align-items: center; border-inline-start: 4px solid var(--km-primary); animation: km-slide-in .35s var(--km-ease); font-weight: 700; font-size: .88rem; }
.km-toast.success { border-color: var(--km-secondary); } .km-toast.danger { border-color: var(--km-danger); } .km-toast.info { border-color: var(--km-primary); }
.km-toast.success i { color: var(--km-secondary-600); } .km-toast.danger i { color: var(--km-danger); } .km-toast.info i { color: var(--km-primary); }
.km-modal-backdrop { position: fixed; inset: 0; background: rgba(10, 20, 35, .45); backdrop-filter: blur(4px); z-index: 1060; display: flex; align-items: center; justify-content: center; padding: 1rem; animation: km-fade .2s ease; }
.km-modal { background: #fff; border-radius: 1.5rem; width: 100%; max-width: 520px; max-height: 92vh; overflow: auto; box-shadow: var(--km-shadow-lg); animation: km-pop .3s var(--km-ease); }
.km-modal.lg { max-width: 860px; } .km-modal.xl { max-width: 1140px; }
.km-modal-head { display: flex; justify-content: space-between; align-items: center; padding: 1.1rem 1.4rem; border-bottom: 1px solid var(--km-border); font-weight: 800; }
.km-modal-body { padding: 1.4rem; }
.km-status { display: inline-flex; align-items: center; gap: .35rem; border-radius: 999px; padding: .25rem .7rem; font-size: .75rem; font-weight: 800; }
.km-status::before { content: ""; width: .45rem; height: .45rem; border-radius: 50%; background: currentColor; }
.km-status.success { background: rgba(30, 215, 131, .14); color: #0f8a54; }
.km-status.warning { background: rgba(245, 158, 11, .14); color: #b45309; }
.km-status.danger { background: rgba(250, 23, 68, .1); color: #c8102e; }
.km-status.info { background: var(--km-primary-50); color: var(--km-primary); }
.km-status.secondary { background: #eef0f3; color: #555; }
.km-upload { border: 2px dashed var(--km-border); border-radius: 1.25rem; padding: 1.5rem; text-align: center; cursor: pointer; transition: border-color .2s, background .2s; position: relative; }
.km-upload:hover { border-color: var(--km-primary); background: var(--km-primary-50); }
.km-upload input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.km-thumb { position: relative; border-radius: .9rem; overflow: hidden; aspect-ratio: 1; background: #eee; }
.km-thumb img { width: 100%; height: 100%; object-fit: cover; }
.km-thumb .km-thumb-actions { position: absolute; inset: auto 0 0 0; display: flex; justify-content: space-between; padding: .3rem; background: linear-gradient(180deg, transparent, rgba(0, 0, 0, .6)); }
.km-thumb.featured { outline: 3px solid var(--km-secondary); }
.km-prose { line-height: 2.1; font-size: 1rem; text-align: justify; }
.km-prose h2, .km-prose h3 { font-weight: 800; margin-top: 1.8rem; }
.km-prose img { border-radius: 1rem; margin: 1rem 0; }
.km-breadcrumb { font-size: .8rem; color: var(--km-muted); }
.km-breadcrumb a { color: var(--km-muted); } .km-breadcrumb a:hover { color: var(--km-primary); }
.km-pulse { animation: km-pulse-ring 1.6s infinite; }
.table-km { --bs-table-bg: transparent; }
.table-km thead th { font-size: .75rem; color: var(--km-muted); font-weight: 800; border-bottom-width: 1px; white-space: nowrap; background: #fafbfc; }
.table-km td { vertical-align: middle; font-size: .88rem; }
.table-km tbody tr { transition: background .15s; }
.table-km tbody tr:hover { background: #f8fafd; }
.km-page-loader { position: fixed; top: 0; right: 0; left: 0; height: 3px; z-index: 3000; background: linear-gradient(90deg, var(--km-secondary), var(--km-primary)); animation: km-fade .2s; }
.km-mobile-nav { position: fixed; bottom: 0; left: 0; right: 0; z-index: 1040; background: rgba(255, 255, 255, .95); backdrop-filter: blur(12px); border-top: 1px solid var(--km-border); display: flex; justify-content: space-around; padding: .45rem 0 calc(.45rem + env(safe-area-inset-bottom)); }
.km-mobile-nav a { display: flex; flex-direction: column; align-items: center; font-size: .68rem; color: var(--km-muted); font-weight: 700; gap: .1rem; }
.km-mobile-nav a i { font-size: 1.25rem; }
.km-mobile-nav a.active { color: var(--km-primary); }
@media (min-width: 768px) { .km-mobile-nav { display: none; } }
@media (max-width: 767px) { body.km-site { padding-bottom: 70px; } }

/* ---------- mobile refinements (site + admin) ---------- */
@media (max-width: 575px) {
  /* popups become bottom sheets so they never overflow the screen */
  .km-dp-pop, .km-search .km-suggest.p-3 { position: fixed; top: auto !important; bottom: 0; right: 0; left: 0; width: 100% !important; min-width: 0 !important; border-radius: 1.5rem 1.5rem 0 0; padding-bottom: calc(1rem + env(safe-area-inset-bottom)); max-height: 82vh; overflow-y: auto; z-index: 2000; box-shadow: 0 -20px 50px -20px rgba(0, 0, 0, .4); }
  .km-hero { min-height: 560px; border-radius: 1.4rem; }
  .km-hero > img.km-hero-bg { border-radius: 1.4rem; } .km-hero::after { border-radius: 0 0 1.4rem 1.4rem; height: 85%; }
  .km-hero-content { padding: 1.2rem .8rem; }
  .km-hero h1 { font-size: 1.35rem; }
  .km-hero p.lead { font-size: .9rem; }
  .km-search .km-field { min-height: 52px; }
  .km-cat { min-width: 86px; padding: .8rem .5rem; font-size: .78rem; }
  .km-cat img { width: 36px; height: 36px; }
  .km-section-title { font-size: 1.1rem; }
  .km-acc-title { font-size: .88rem; }
  .km-acc-meta { flex-direction: column; gap: .15rem; }
  .km-acc-price { font-size: .85rem; }
  .km-footer { border-radius: 1.4rem; }
  .km-modal { border-radius: 1.4rem 1.4rem 0 0; max-height: 92vh; align-self: flex-end; }
  .km-modal-backdrop { padding: 0; align-items: flex-end; }
  .km-modal-body { padding: 1rem; }
  .km-otp input { width: 2.7rem; height: 3.1rem; font-size: 1.2rem; }
  .km-kpi { padding: .85rem .9rem; } .km-kpi .km-kpi-value { font-size: 1.05rem; } .km-kpi .km-kpi-icon { width: 2.1rem; height: 2.1rem; font-size: 1rem; }
  .km-chart-box { height: 240px; } .km-chart-box.sm { height: 200px; }
  .km-cal-day { min-height: 44px; font-size: .8rem; } .km-cal-day small { font-size: .55rem; }
  .km-steps .km-step { font-size: .72rem; padding: .35rem .6rem; }
  .km-toasts { left: .75rem; right: .75rem; bottom: 5.2rem; max-width: none; }
  .table-km td, .table-km th { font-size: .78rem; white-space: nowrap; }
  .km-booking { position: static; }
  h1.h3, h1.h4 { font-size: 1.2rem; }
}
@media (max-width: 991px) {
  .km-booking { position: static; }
  .km-tabs { top: 64px; overflow-x: auto; white-space: nowrap; }
  .km-dash-side { scrollbar-width: none; } .km-dash-side::-webkit-scrollbar { display: none; }
  .km-dash-side > div:first-child { display: none !important; }
}

/* ======================================================================
   Accommodation detail page (original khonemosafer.ir layout + motion)
   ====================================================================== */
@keyframes km-tile-in { from { opacity: 0; transform: scale(.96) translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes km-heart { 0% { transform: scale(1); } 30% { transform: scale(1.35); } 60% { transform: scale(.9); } 100% { transform: scale(1); } }
@keyframes km-sheet-up-m { from { transform: translateY(100%); } to { transform: none; } }
@keyframes km-lb-in { from { opacity: 0; transform: scale(.97); } to { opacity: 1; transform: none; } }
@keyframes km-num { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* sticky tabs */
.km-dtabs { position: sticky; top: 72px; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: .75rem; background: rgba(255, 255, 255, .9); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--km-border); margin: 0 0 1.25rem; transition: box-shadow .3s, border-radius .3s; }
.km-dtabs.stuck { box-shadow: 0 12px 24px -18px rgba(10, 30, 60, .35); border-radius: 0 0 1rem 1rem; }
.km-dtabs-list { position: relative; display: flex; overflow-x: auto; scrollbar-width: none; }
.km-dtabs-list::-webkit-scrollbar { display: none; }
.km-dtabs-list a { flex: 0 0 auto; padding: 1rem 1.1rem; font-weight: 700; font-size: .92rem; color: var(--km-muted); transition: color .25s; }
.km-dtabs-list a:hover, .km-dtabs-list a.active { color: var(--km-primary); }
.km-dtabs-ink { position: absolute; bottom: 0; left: 0; height: 3px; width: 0; border-radius: 3px 3px 0 0; background: var(--km-primary); transition: transform .35s var(--km-ease), width .35s var(--km-ease); pointer-events: none; }
.km-dtabs-actions { display: flex; gap: .5rem; flex: 0 0 auto; }
.km-icon-btn { position: relative; width: 2.6rem; height: 2.6rem; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--km-border); background: #fff; border-radius: .9rem; color: var(--km-text); font-size: 1.05rem; transition: border-color .2s, color .2s, transform .2s var(--km-ease), box-shadow .2s; }
.km-icon-btn:hover { border-color: var(--km-primary); color: var(--km-primary); transform: translateY(-2px); box-shadow: 0 8px 18px -12px rgba(8, 99, 190, .6); }
.km-icon-btn.on { color: var(--km-danger); border-color: rgba(250, 23, 68, .35); }
.km-icon-btn.on i { animation: km-heart .45s var(--km-ease); }
.km-copied-tip { position: absolute; top: calc(100% + .4rem); left: 50%; transform: translate(-50%, -4px); white-space: nowrap; background: #1f2937; color: #fff; font-size: .72rem; border-radius: .5rem; padding: .25rem .55rem; opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; }
.km-icon-btn.km-copied .km-copied-tip { opacity: 1; transform: translate(-50%, 0); }

/* gallery */
.km-dgallery { position: relative; display: grid; grid-template-columns: 3fr 1fr 1fr; grid-template-rows: repeat(2, minmax(0, 1fr)); gap: .75rem; height: clamp(320px, 36vw, 520px); }
.km-dg-tile { position: relative; overflow: hidden; border-radius: 1.25rem; background: #f1f3f6; animation: km-tile-in .6s var(--km-ease) both; animation-delay: var(--d, 0ms); }
.km-dg-tile:first-child { grid-row: span 2; }
.km-dg-tile img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--km-ease), filter .35s; }
.km-dg-tile:hover img { transform: scale(1.06); filter: brightness(.9); }
.km-dg-more { position: absolute; inset: 0; z-index: 1; display: flex; align-items: center; justify-content: center; background: rgba(8, 25, 50, .5); color: #fff; font-size: 1.6rem; font-weight: 900; backdrop-filter: blur(2px); }
.km-dg-all { position: absolute; z-index: 2; bottom: 1rem; left: 1rem; border: 0; border-radius: 999px; background: rgba(255, 255, 255, .95); color: var(--km-text); font-weight: 800; font-size: .85rem; padding: .55rem 1rem; box-shadow: 0 10px 25px -12px rgba(0, 0, 0, .45); transition: transform .25s var(--km-ease), color .2s; }
.km-dg-all:hover { transform: translateY(-2px) scale(1.03); color: var(--km-primary); }
.km-dgallery:has(> .km-dg-tile:only-of-type) { grid-template-columns: 1fr; }
.km-dgallery:has(> .km-dg-tile:nth-of-type(2):last-of-type), .km-dgallery:has(> .km-dg-tile:nth-of-type(3):last-of-type), .km-dgallery:has(> .km-dg-tile:nth-of-type(4):last-of-type) { grid-template-columns: 2fr 1fr; }
.km-dgallery:has(> .km-dg-tile:nth-of-type(2):last-of-type) .km-dg-tile:nth-child(2) { grid-row: span 2; }
.km-dgallery:has(> .km-dg-tile:nth-of-type(4):last-of-type) .km-dg-tile:nth-child(4) { display: none; }

/* lightbox */
.km-lb { position: fixed; inset: 0; z-index: 3000; background: rgba(8, 12, 20, .94); display: flex; flex-direction: column; color: #fff; animation: km-fade .25s ease; }
.km-lb.out { opacity: 0; transition: opacity .25s; }
.km-lb-top { display: flex; align-items: center; gap: 1rem; padding: .9rem 1.2rem; }
.km-lb-title { flex: 1; font-weight: 700; font-size: .9rem; opacity: .85; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.km-lb-count { font-weight: 800; font-size: .85rem; background: rgba(255, 255, 255, .12); border-radius: 999px; padding: .25rem .75rem; }
.km-lb-close, .km-lb-nav { flex: 0 0 auto; border: 0; background: rgba(255, 255, 255, .12); color: #fff; width: 2.8rem; height: 2.8rem; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 1.1rem; transition: background .2s, transform .2s var(--km-ease); }
.km-lb-close:hover, .km-lb-nav:hover { background: rgba(255, 255, 255, .25); transform: scale(1.08); }
.km-lb-stage { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; gap: 1rem; padding: 0 1rem; }
.km-lb-stage img { min-width: 0; max-width: min(1200px, 100%); max-height: 100%; object-fit: contain; border-radius: 1rem; box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .7); }
.km-lb-stage img.in { animation: km-lb-in .4s var(--km-ease); }
.km-lb-thumbs { display: flex; gap: .5rem; overflow-x: auto; padding: .9rem 1.2rem calc(.9rem + env(safe-area-inset-bottom)); justify-content: safe center; scrollbar-width: thin; }
.km-lb-thumbs button { flex: 0 0 auto; width: 76px; height: 54px; border: 2px solid transparent; border-radius: .6rem; padding: 0; overflow: hidden; opacity: .5; background: none; transition: opacity .2s, border-color .2s, transform .2s; }
.km-lb-thumbs button img { width: 100%; height: 100%; object-fit: cover; }
.km-lb-thumbs button:hover { opacity: .85; }
.km-lb-thumbs button.active { opacity: 1; border-color: var(--km-secondary); transform: translateY(-2px); }

/* header */
.km-dtitle { font-size: 1.55rem; font-weight: 900; margin: .35rem 0 0; line-height: 1.6; }
.km-dtitle span { color: var(--km-muted); font-weight: 700; font-size: 1.1rem; }
.km-dmeta { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.km-dstar, .km-dcode { display: inline-flex; align-items: center; gap: .35rem; font-weight: 800; font-size: .9rem; background: #fff; border: 1px solid var(--km-border); border-radius: 999px; padding: .35rem .8rem; }
.km-dstar i { color: #ffcb05; } .km-dstar small { color: var(--km-muted); font-weight: 600; }
.km-dcode { color: var(--km-muted); font-weight: 700; font-size: .8rem; }
.km-dhost { display: flex; align-items: center; flex-wrap: wrap; gap: .8rem 1.2rem; margin-top: 1.1rem; }
.km-avatar { width: 42px; height: 42px; border-radius: 50%; border: 2px solid var(--km-primary); background: var(--km-primary-50); color: var(--km-primary); font-weight: 900; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.km-avatar.sm { width: 36px; height: 36px; font-size: .85rem; border-width: 1.5px; }
.km-instant { display: flex; align-items: center; gap: .55rem; padding: .45rem .85rem; border-radius: 1rem; background: linear-gradient(135deg, rgba(30, 215, 131, .12), rgba(8, 99, 190, .08)); }
.km-instant > i { color: #f59e0b; font-size: 1.25rem; animation: km-float 2.4s ease-in-out infinite; }
.km-instant b { font-size: .88rem; } .km-instant small { color: var(--km-muted); font-size: .74rem; }
.km-dchips { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.1rem; }
.km-dchips span { display: inline-flex; align-items: center; gap: .4rem; font-size: .82rem; font-weight: 700; background: var(--km-primary-50); color: var(--km-primary); border-radius: 999px; padding: .4rem .85rem; animation: km-fade-up .5s var(--km-ease) both; animation-delay: calc(var(--d, 0ms) + .2s); }

/* sections */
.km-dsection { padding: 1.75rem 0; border-bottom: 1px solid var(--km-border); scroll-margin-top: 140px; }
.km-dsection:last-child { border-bottom: 0; }
.km-dh2 { font-size: 1.15rem; font-weight: 900; margin-bottom: 1.1rem; display: flex; align-items: baseline; gap: .45rem; }
.km-dh2::before { content: ""; width: 6px; height: 1.05rem; border-radius: 3px; background: linear-gradient(180deg, var(--km-secondary), var(--km-primary)); align-self: center; }
.km-dh3 { font-size: 1rem; font-weight: 800; margin: 1.5rem 0 .8rem; }
.km-ddesc { font-size: .92rem; line-height: 2.1; color: #444; white-space: pre-line; text-align: justify; margin: 0; }

.km-specs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.1rem 1.5rem; }
.km-specs-item { display: flex; gap: .8rem; align-items: flex-start; }
.km-specs-item > i { width: 2.5rem; height: 2.5rem; flex: 0 0 auto; border-radius: .85rem; background: var(--km-primary-50); color: var(--km-primary); display: inline-flex; align-items: center; justify-content: center; font-size: 1.1rem; transition: transform .3s var(--km-ease), background .3s, color .3s; }
.km-specs-item:hover > i { transform: rotate(-8deg) scale(1.08); background: var(--km-primary); color: #fff; }
.km-specs-item b { display: block; font-size: .92rem; }
.km-specs-item span { color: var(--km-muted); font-size: .84rem; }

.km-facbox { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .9rem 1rem; background: #f5f5f5; border-radius: 1.25rem; padding: 1.6rem 1.5rem; font-size: .82rem; font-weight: 600; }
.km-facbox span { display: flex; align-items: center; gap: .55rem; transition: transform .2s var(--km-ease), color .2s; }
.km-facbox span::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: var(--km-primary); flex: 0 0 auto; box-shadow: 0 0 0 3px rgba(8, 99, 190, .15); }
.km-facbox span:hover { color: var(--km-primary); transform: translateX(-3px); }

/* calendar section */
.km-dcal-box { background: #fff; border: 1px solid var(--km-border); border-radius: 1.25rem; padding: 1rem; }
.km-dcal-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; margin-top: .75rem; padding: .8rem 1rem; border-radius: 1rem; background: rgba(225, 225, 225, .2); font-size: .85rem; font-weight: 600; }
.km-clear { border: 0; background: none; color: var(--km-danger); font-weight: 800; font-size: .85rem; display: inline-flex; gap: .3rem; align-items: center; transition: opacity .2s, transform .2s; }
.km-clear:disabled { opacity: .35; }
.km-clear:not(:disabled):hover { transform: scale(1.05); }
.km-room-chips { display: flex; gap: .6rem; overflow-x: auto; padding: .2rem .2rem .4rem; }
.km-room-chip { flex: 0 0 auto; text-align: start; border: 1.5px solid var(--km-border); background: #fff; border-radius: 1rem; padding: .6rem .9rem; display: flex; flex-direction: column; transition: border-color .2s, box-shadow .2s, transform .2s var(--km-ease); }
.km-room-chip small { color: var(--km-muted); font-size: .74rem; }
.km-room-chip:hover { transform: translateY(-2px); }
.km-room-chip.active { border-color: var(--km-primary); box-shadow: 0 0 0 .2rem rgba(8, 99, 190, .12); }
.km-room-chip.active b { color: var(--km-primary); }

/* map */
.km-dmap { position: relative; height: 320px; border-radius: 1.25rem; overflow: hidden; border: 1px solid var(--km-border); }
.km-dmap iframe { width: 100%; height: 100%; border: 0; }
.km-dmap-pin { position: absolute; top: 50%; left: 50%; width: 90px; height: 90px; border-radius: 50%; background: rgba(8, 99, 190, .16); border: 2px solid rgba(8, 99, 190, .5); transform: translate(-50%, -50%); pointer-events: none; animation: km-pulse-blue 2s infinite; }
@keyframes km-pulse-blue { 0% { box-shadow: 0 0 0 0 rgba(8, 99, 190, .4); } 100% { box-shadow: 0 0 0 22px rgba(8, 99, 190, 0); } }

/* rules */
.km-times { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.km-times > div { display: flex; align-items: center; gap: .8rem; padding: 1rem 1.1rem; border-radius: 1.1rem; background: #fff; border: 1px solid var(--km-border); }
.km-times i { font-size: 1.4rem; color: var(--km-primary); }
.km-times span { display: flex; flex-direction: column; font-size: .8rem; color: var(--km-muted); font-weight: 600; }
.km-times b { color: var(--km-text); font-size: .98rem; font-weight: 800; }
.km-rules { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem 1.5rem; }
.km-rules li { display: flex; gap: .55rem; align-items: flex-start; font-size: .88rem; font-weight: 700; }
.km-rules li > i { font-size: 1.05rem; margin-top: .1rem; }
.km-rules li span { display: flex; flex-direction: column; }
.km-rules li small { color: var(--km-muted); font-weight: 500; font-size: .76rem; }
.km-rules li.ok > i { color: #15b36b; }
.km-rules li.no > i { color: var(--km-danger); }
.km-rules li.cond > i { color: #f59e0b; }
.km-cancel { border-radius: 1.1rem; padding: 1rem 1.2rem; background: var(--km-primary-50); border-inline-start: 4px solid var(--km-primary); }
.km-cancel b { color: var(--km-primary); display: block; margin-bottom: .3rem; }
.km-cancel p { font-size: .85rem; line-height: 2; color: #444; }

/* ratings */
.km-rate { display: grid; grid-template-columns: 190px 1fr; gap: 1.5rem; align-items: center; background: #fff; border: 1px solid var(--km-border); border-radius: 1.25rem; padding: 1.3rem; }
.km-rate-score { text-align: center; display: flex; flex-direction: column; align-items: center; gap: .25rem; padding-inline-end: 1.5rem; border-inline-end: 1px solid var(--km-border); }
.km-rate-score b { font-size: 2.6rem; font-weight: 900; line-height: 1.2; background: linear-gradient(135deg, var(--km-primary), var(--km-secondary)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.km-rate-score small { color: var(--km-muted); font-size: .76rem; }
.km-rate:not(:has(.km-rate-bars)) { grid-template-columns: 1fr; }
.km-rate:not(:has(.km-rate-bars)) .km-rate-score { border: 0; padding: 0; }
.km-stars { color: #ffcb05; letter-spacing: .1rem; }
.km-stars.sm { font-size: .78rem; }
.km-rate-bars { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .9rem 1.5rem; }
.km-rate-row { display: grid; grid-template-columns: 7.5rem 1fr 2rem; align-items: center; gap: .6rem; font-size: .84rem; font-weight: 600; }
.km-rate-row b { text-align: center; }
.km-meter { height: 7px; border-radius: 999px; background: #eef1f5; overflow: hidden; }
.km-meter i { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(270deg, var(--km-secondary), var(--km-primary)); transition: width 1.1s var(--km-ease) .25s; }
.revealed .km-meter i { width: var(--w, 0); }

/* comments */
.km-comments { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-bottom: 1rem; }
.km-comment { background: #fff; border: 1px solid var(--km-border); border-radius: 1.25rem; padding: 1rem 1.1rem; }
.km-comment.revealed { transition: transform .3s var(--km-ease), box-shadow .3s; }
.km-comment.revealed:hover { transform: translateY(-3px); box-shadow: var(--km-shadow); }
.km-answer { margin-top: .7rem; padding: .6rem .8rem; border-radius: .9rem; background: var(--km-primary-50); font-size: .82rem; line-height: 1.9; }
.km-answer b { color: var(--km-primary); margin-inline-end: .3rem; }

/* booking widget */
.km-detail .km-booking { top: 150px; }
.km-bw { background: #fff; border: 1px solid var(--km-border); border-radius: 1.5rem; padding: 1.5rem; box-shadow: 0 24px 50px -32px rgba(10, 40, 80, .35); }
.km-bw-price { display: flex; align-items: baseline; gap: .4rem; }
.km-bw-price b { font-size: 1.45rem; font-weight: 900; color: var(--km-primary); }
.km-bw-instant { align-self: center; font-size: .75rem; font-weight: 800; color: #b45309; background: rgba(245, 158, 11, .14); border-radius: 999px; padding: .2rem .6rem; }
.km-bw-dates { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.km-bw-date { position: relative; text-align: start; border: 1.5px solid transparent; background: #f5f5f5; border-radius: 1.1rem; height: 70px; padding: .7rem .9rem; display: flex; flex-direction: column; justify-content: center; transition: border-color .2s, background .2s, transform .2s var(--km-ease); }
.km-bw-date small { color: var(--km-muted); font-size: .74rem; font-weight: 600; }
.km-bw-date span { font-weight: 800; font-size: .9rem; color: var(--km-muted); }
.km-bw-date.set span { color: var(--km-text); animation: km-num .3s var(--km-ease); }
.km-bw-date i { position: absolute; left: .9rem; top: 50%; transform: translateY(-50%); color: var(--km-primary); opacity: .6; transition: opacity .2s, transform .2s; }
.km-bw-date:hover { border-color: var(--km-primary); background: #fff; transform: translateY(-1px); }
.km-bw-date:hover i { opacity: 1; transform: translateY(-50%) scale(1.15); }
.km-bw-select { border-radius: .9rem; }
.km-bw-guests { display: flex; align-items: center; justify-content: space-between; margin-top: 1.1rem; }
.km-stepper { display: flex; align-items: center; gap: .3rem; border: 1px solid var(--km-border); border-radius: 999px; padding: .2rem; }
.km-stepper button { width: 2.1rem; height: 2.1rem; border: 0; border-radius: 50%; background: var(--km-primary-50); color: var(--km-primary); display: inline-flex; align-items: center; justify-content: center; transition: background .2s, color .2s, transform .15s; }
.km-stepper button:hover:not(:disabled) { background: var(--km-primary); color: #fff; }
.km-stepper button:active:not(:disabled) { transform: scale(.88); }
.km-stepper button:disabled { opacity: .35; }
.km-stepper-val { min-width: 2rem; text-align: center; font-weight: 900; animation: km-num .25s var(--km-ease); }
.km-bw-pill { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; margin-top: .8rem; background: #d7ebff; color: var(--km-primary); border-radius: 999px; padding: .45rem .9rem; font-size: .8rem; font-weight: 800; }
.km-bw-pill small { font-weight: 600; font-size: .72rem; }
.km-bw-kids { margin: .6rem 0 0; font-size: .76rem; color: #ea7a00; font-weight: 600; }
.km-bw-total { margin-top: 1.1rem; border-radius: 1.1rem; border: 1px dashed rgba(8, 99, 190, .35); padding: .9rem 1rem; }
.km-bw-check { width: 2.6rem; height: 2.6rem; border-radius: .9rem; background: rgba(30, 215, 131, .15); color: #15b36b; display: inline-flex; align-items: center; justify-content: center; font-size: 1.2rem; }
.km-bw-toggle, .km-bw-more { width: 100%; display: flex; align-items: center; gap: .4rem; border: 0; background: none; padding: .6rem 0 0; font-size: .82rem; font-weight: 800; color: var(--km-primary); }
.km-bw-toggle { justify-content: center; }
.km-bw-more { color: var(--km-muted); margin-top: .8rem; padding-top: .8rem; border-top: 1px solid var(--km-border); }
.km-bw-toggle i, .km-bw-more i.bi-chevron-down { transition: transform .3s var(--km-ease); }
.km-bw .rot { transform: rotate(180deg); }
.km-collapse { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .4s var(--km-ease); }
.km-collapse > div { overflow: hidden; min-height: 0; }
.km-collapse.open { grid-template-rows: 1fr; }
.km-bw-breakdown { margin-top: .7rem; background: #f5f5f5; border-radius: 1rem; padding: .8rem 1rem; font-size: .82rem; display: flex; flex-direction: column; gap: .45rem; }
.km-bw-breakdown > div { display: flex; justify-content: space-between; gap: .5rem; }
.km-bw-night { color: var(--km-muted); font-size: .74rem; }
.km-bw-cta { position: relative; overflow: hidden; border-radius: 1rem; padding: .85rem; font-size: 1rem; }
.km-bw-cta::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .35) 50%, transparent 70%); transform: translateX(100%); transition: transform .8s var(--km-ease); }
.km-bw-cta:hover::after { transform: translateX(-100%); }

/* date sheet (desktop: centered dialog, mobile: bottom sheet) */
.km-sheet-backdrop { position: fixed; inset: 0; z-index: 2100; background: rgba(10, 20, 35, .45); backdrop-filter: blur(4px); animation: km-fade .2s ease; }
.km-sheet { position: fixed; z-index: 2101; top: 50%; left: 50%; width: min(760px, calc(100vw - 2rem)); max-height: 90vh; overflow-y: auto; background: #fff; border-radius: 1.5rem; padding: 1.25rem 1.4rem; box-shadow: var(--km-shadow-lg); transform: translate(-50%, -50%); animation: km-fade .3s var(--km-ease); }
.km-sheet-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; }

/* mobile bottom bar */
.km-dbar { position: fixed; z-index: 1035; left: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .7rem 1rem calc(.7rem + env(safe-area-inset-bottom)); background: rgba(255, 255, 255, .96); backdrop-filter: blur(12px); border-top: 1px solid var(--km-border); box-shadow: 0 -12px 30px -20px rgba(0, 0, 0, .3); animation: km-sheet-up-m .5s var(--km-ease) .4s both; }
.km-dbar > div { display: flex; flex-direction: column; line-height: 1.4; }
.km-dbar b { color: var(--km-primary); font-weight: 900; }
.km-dbar .btn { border-radius: .9rem; padding: .6rem 1.1rem; }

@media (max-width: 1199px) { .km-facbox { grid-template-columns: repeat(3, minmax(0, 1fr)); } .km-rate { grid-template-columns: 1fr; } .km-rate-score { border: 0; padding: 0; } }
@media (max-width: 991px) {
  .km-dtabs { top: 64px; }
  .km-detail { padding-bottom: 5rem; }
  .km-rate-bars, .km-comments { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
  .km-dbar { bottom: 62px; }
  .km-detail { padding-bottom: 8rem; }
  .km-dgallery { display: flex; height: auto; overflow-x: auto; scroll-snap-type: x mandatory; gap: .6rem; scrollbar-width: none; }
  .km-dgallery::-webkit-scrollbar { display: none; }
  .km-dg-tile { flex: 0 0 86%; aspect-ratio: 4 / 3; scroll-snap-align: center; }
  .km-dg-tile:only-of-type { flex-basis: 100%; }
  .km-dgallery:has(> .km-dg-tile:nth-of-type(4):last-of-type) .km-dg-tile:nth-child(4) { display: block; }
  .km-dg-all { display: none; }
  .km-dtitle { font-size: 1.25rem; } .km-dtitle span { font-size: .95rem; }
  .km-dtabs-list a { padding: .85rem .7rem; font-size: .84rem; }
  .km-icon-btn { width: 2.3rem; height: 2.3rem; font-size: .95rem; }
  .km-specs, .km-times, .km-rules { grid-template-columns: 1fr; }
  .km-facbox { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 1.2rem 1rem; }
  .km-rate-row { grid-template-columns: 6.5rem 1fr 1.8rem; }
  .km-dmap { height: 240px; }
  .km-bw { padding: 1.1rem; border-radius: 1.25rem; }
  .km-sheet { top: auto; bottom: 0; left: 0; width: 100%; max-height: 88vh; border-radius: 1.5rem 1.5rem 0 0; transform: none; padding: 1rem 1rem calc(1rem + env(safe-area-inset-bottom)); animation: km-sheet-up-m .35s var(--km-ease); }
  .km-lb-stage { padding: 0; } .km-lb-nav { display: none; } .km-lb-stage img { border-radius: 0; }
}

/* ---------- 404 page ---------- */
@keyframes km-404-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes km-404-drop { 0% { transform: translateY(-40px); opacity: 0; } 60% { transform: translateY(4px); opacity: 1; } 100% { transform: none; } }
@keyframes km-404-drift { from { transform: translateX(0); } to { transform: translateX(26px); } }
@keyframes km-404-road { to { stroke-dashoffset: -64; } }
.km-404 { padding: 2.5rem 0 4rem; }
.km-404-card { display: grid; grid-template-columns: 1fr 1.15fr; align-items: center; gap: 2.5rem; background: radial-gradient(circle at 15% 20%, rgba(8, 99, 190, .07), transparent 55%), radial-gradient(circle at 90% 90%, rgba(30, 215, 131, .08), transparent 50%), #fff; border: 1px solid var(--km-border); border-radius: 2rem; padding: 3rem; box-shadow: 0 30px 60px -45px rgba(10, 40, 80, .4); animation: km-fade-up .6s var(--km-ease) both; }
.km-404-art svg { width: 100%; max-width: 420px; display: block; margin: 0 auto; overflow: visible; }
.km-404-house { animation: km-404-bob 4s ease-in-out infinite; transform-origin: center; }
.km-404-pin { animation: km-404-drop .9s var(--km-ease) .3s both, km-404-bob 2.6s ease-in-out 1.2s infinite; transform-box: fill-box; transform-origin: bottom; }
.km-404-cloud { animation: km-404-drift 6s ease-in-out infinite alternate; }
.km-404-road { animation: km-404-road 2.4s linear infinite; }
.km-404-code { display: inline-block; font-size: clamp(3.5rem, 9vw, 6rem); font-weight: 900; line-height: 1; background: linear-gradient(135deg, var(--km-primary), var(--km-secondary)); -webkit-background-clip: text; background-clip: text; color: transparent; margin-bottom: .6rem; }
.km-404-body h1 { font-size: 1.5rem; font-weight: 900; margin-bottom: .6rem; }
.km-404-body > p { color: var(--km-muted); line-height: 2; margin-bottom: 1.4rem; }
.km-404-search { display: flex; align-items: center; gap: .5rem; background: #f5f7fa; border: 1.5px solid transparent; border-radius: 1.1rem; padding: .35rem .35rem .35rem .4rem; transition: border-color .2s, box-shadow .2s, background .2s; }
.km-404-search:focus-within { border-color: var(--km-primary); background: #fff; box-shadow: 0 0 0 .25rem rgba(8, 99, 190, .1); }
.km-404-search > i { color: var(--km-muted); padding-inline-start: .7rem; }
.km-404-search input { flex: 1; min-width: 0; border: 0; background: transparent; outline: 0; font-size: .92rem; padding: .55rem .2rem; }
.km-404-search .btn { border-radius: .85rem; padding: .55rem 1.2rem; }
.km-404-actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.1rem; }
.km-404-actions .btn { display: inline-flex; align-items: center; gap: .4rem; }
.km-404-links { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-top: 1.6rem; padding-top: 1.2rem; border-top: 1px dashed var(--km-border); }
.km-404-links small { color: var(--km-muted); font-weight: 700; width: 100%; }
.km-404-links a { display: inline-flex; align-items: center; gap: .35rem; font-size: .82rem; font-weight: 700; color: var(--km-primary); background: var(--km-primary-50); border-radius: 999px; padding: .4rem .85rem; transition: transform .2s var(--km-ease), background .2s, color .2s; }
.km-404-links a:hover { transform: translateY(-2px); background: var(--km-primary); color: #fff; }
@media (max-width: 991px) { .km-404-card { grid-template-columns: 1fr; text-align: center; padding: 2rem 1.25rem; gap: 1rem; } .km-404-art svg { max-width: 300px; } .km-404-actions, .km-404-links { justify-content: center; } }
@media (max-width: 575px) { .km-404 { padding: 1rem 0 2rem; } .km-404-body h1 { font-size: 1.2rem; } .km-404-search .btn { padding: .55rem .9rem; } }