.demo-search-drawer { position: fixed; inset: auto 0 0; width: min(820px, 100%); height: min(800px, 92dvh); max-height: 92dvh; max-width: 100%; margin: 0 auto; padding: 0; overflow: hidden; border: 1px solid #e5e2da; border-bottom: 0; border-radius: 28px 28px 0 0; color: #17344d; background: #f7f8fa; box-shadow: 0 -16px 64px #10283e26; }
.compact-stay-search { display: flex; align-items: center; gap: 12px; max-width: 880px; margin: 28px auto; padding: 12px; border: 1px solid #d5bf93; border-radius: 22px; background: #fff; box-shadow: 0 16px 40px #17344d20; }
.compact-stay-search:focus-within { border-color: #a07832; box-shadow: 0 0 0 4px #a078321a, 0 12px 32px #17344d14; }
.compact-stay-search { position: relative; }
.compact-stay-search:has(.stay-suggestions:not([hidden])) { z-index: 30; }
.stay-suggestions { position: absolute; top: calc(100% + 10px); inset-inline: 0; z-index: 50; padding: 14px; border: 1px solid #e5ddce; border-radius: 20px; background: #fff; color: #17344d; text-align: start; box-shadow: 0 18px 48px #10283e26; }
.stay-suggestions[hidden] { display: none; }
.stay-suggestions-heading { padding: 4px 8px 12px; font-size: 12px; font-weight: 700; color: #876329; }
.stay-suggestions [role="listbox"] { max-height: min(340px, 42dvh); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.stay-suggestion { display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 10px; border-radius: 12px; cursor: pointer; }
.stay-suggestion:hover, .stay-suggestion[aria-selected="true"] { background: #f7f3eb; }
.stay-suggestion > .material-symbols-rounded { display: grid; place-items: center; flex: 0 0 40px; height: 40px; border: 1px solid #ece4d5; border-radius: 12px; background: #faf8f3; color: #92713b; font-size: 22px; }
.stay-suggestion strong, .stay-suggestion small { display: block; line-height: 1.7; }
.stay-suggestion strong { font-size: 14px; font-weight: 600; }
.stay-suggestion small { font-size: 11px; color: #627180; }
.stay-suggestions-hint { margin: 10px 0 0; padding: 12px 8px 2px; border-top: 1px solid #edf0f2; color: #627180; font-size: 11px; line-height: 1.8; }
@media(max-width: 600px) {
    .stay-suggestions { padding: 10px; border-radius: 16px; }
    .stay-suggestion { min-height: 58px; gap: 9px; padding: 8px; }
    .stay-suggestion strong { font-size: 13px; }
}
.sakan-home .compact-stay-query input:focus,
.sakan-home .compact-stay-query input:focus-visible { outline: none; box-shadow: none; }
.compact-stay-query { display: flex; align-items: center; gap: 14px; flex: 1; min-width: 0; padding-inline: 12px; color: #17344d; }
.compact-stay-query:focus-within > svg { color: #a07832; }
@media (prefers-reduced-motion: no-preference) {
    .compact-stay-search { transition: border-color 160ms ease, box-shadow 160ms ease; }
}
@media (forced-colors: active) {
    .compact-stay-search:focus-within { outline: 2px solid Highlight; outline-offset: 3px; }
}
.compact-stay-query > span { flex: 1; min-width: 0; }
.compact-stay-caption { display: block; font-size: 12px; font-weight: 700; color: #876329; }
.compact-stay-query input { width: 100%; min-width: 0; height: 36px; border: 0; background: transparent; color: #17344d; font: inherit; font-size: 15px; }
.compact-stay-search svg { width: 23px; height: 23px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.compact-stay-search button { display: flex; align-items: center; justify-content: center; gap: 10px; height: 52px; border-radius: 14px; font: inherit; font-weight: 700; }
.compact-stay-filter { width: 52px; flex-shrink: 0; border: 1px solid #e5ddce; background: #f7f3eb; color: #17344d; }
.compact-stay-filter svg { fill: #f7f3eb; }
.compact-stay-submit { padding-inline: 26px; border: 1px solid #17344d; background: #17344d; color: #fff; }
@media(max-width: 600px) {
    .compact-stay-search { gap: 7px; padding: 8px; border-radius: 18px; }
    .compact-stay-query { padding-inline: 4px; gap: 6px; }
    .compact-stay-query > svg { display: none; }
    .compact-stay-query input { font-size: 12px; }
    .compact-stay-search button { height: 46px; border-radius: 12px; }
    .compact-stay-filter { width: 44px; }
    .compact-stay-submit { padding-inline: 14px; font-size: 13px; }
    .compact-stay-submit svg { display: none; }
}
.drawer-field-trigger { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; text-align: start; }
.demo-search-drawer .drawer-field-trigger { min-height: 48px; background: #fff; border-color: #ccd2d7; font-size: 13px; font-weight: 600; }
.drawer-field-trigger svg { width: 20px; height: 20px; flex-shrink: 0; fill: none; stroke: #a07832; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.drawer-field-picker { width: min(410px, calc(100% - 24px)); max-height: 82dvh; padding: 22px; border: 1px solid #d5bf93; border-top: 3px solid #a07832; border-radius: 22px; background: #faf9f6; color: #17344d; box-shadow: 0 20px 70px #10283e44; overflow-y: auto; }
.drawer-field-picker::backdrop { background: #10283e66; backdrop-filter: blur(3px); }
.drawer-field-picker header,.drawer-month { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 16px; }
.drawer-field-picker h2 { margin: 0; font-size: 19px; }
.drawer-field-picker button { min-height: 44px; border: 1px solid #e5e2da; border-radius: 11px; background: #fff; color: #17344d; font: inherit; }
.drawer-field-picker header button,.drawer-month button { width: 44px; font-size: 24px; }
.drawer-option-search { width: 100%; height: 46px; margin-bottom: 16px; padding: 12px; border: 1px solid #ccd2d7; border-radius: 12px; background: #fff; color: #17344d; font: inherit; }
.drawer-field-options { display: grid; gap: 8px; }
.drawer-field-options:not(.is-calendar) { max-height: 42dvh; margin-left: -22px; padding-left: 22px; overflow-y: auto; direction: rtl; }
.drawer-field-options:not(.is-calendar) button { text-align: start; padding: 12px; }
.drawer-field-options.is-calendar { grid-template-columns: repeat(7,minmax(0,1fr)); gap: 4px; text-align: center; }
.drawer-field-options small { padding-block: 8px; color: #627180; font-size: 10px; }
.drawer-field-options button[aria-current] { border-color: #a07832; }
.drawer-field-options button[aria-pressed="true"] { background: #17344d; color: #f4deac; border-color: #17344d; }
.drawer-field-options button:hover:not(:disabled) { border-color: #a07832; }
.drawer-field-picker button:disabled { opacity: .35; cursor: not-allowed; }
.drawer-field-picker :is(button,input):focus-visible { outline: 3px solid #a07832; outline-offset: 2px; }
.drawer-field-hint { margin-bottom: 0; color: #765d33; font-size: 12px; line-height: 1.8; }
.drawer-section-nav { position: sticky; top: -24px; z-index: 2; display: flex; gap: 6px; padding: 12px 0; margin-bottom: 20px; background: #f7f8faf5; backdrop-filter: blur(10px); }
.demo-search-drawer .drawer-section-nav button { flex: 1; padding: 10px 6px; border-color: #e2e6eb; background: #fff; color: #17344d; font-size: 12px; white-space: nowrap; }
.drawer-section-nav [data-selection-total] { display: inline-block; min-width: 20px; border-radius: 8px; background: #f4ecdc; }
.drawer-section-title { display: flex; align-items: center; gap: 14px; margin: 24px 0 16px; }
.drawer-section-title > span { display: grid; place-items: center; width: 46px; height: 46px; background: #17344d; color: #f4deac; border-radius: 14px; }
.drawer-section-title h3, .drawer-selection h3 { margin: 0 0 6px; font-size: 18px; }
.drawer-section-title p, .drawer-selection p { margin: 0; color: #627180; font-size: 12px; line-height: 1.9; }
.drawer-amenity-search { display: flex; align-items: center; gap: 10px; margin-top: 18px; padding: 6px 12px; border: 1px solid #d9dee3; border-radius: 14px; background: #fff; }
.drawer-amenity-search > span { color: #92713b; }
.drawer-amenity-search input { flex: 1; min-width: 0; height: 42px; border: 0; background: transparent; color: #17344d; font: inherit; font-size: 13px; }
.demo-search-drawer .drawer-amenity-search button { width: 36px; min-height: 36px; padding: 0; border: 0; background: #f7f8fa; font-size: 22px; }
.drawer-category-links { display: flex; flex-wrap: wrap; gap: 7px; margin: 14px 0 24px; }
.demo-search-drawer .drawer-category-links button { min-height: 36px; padding: 7px 12px; border-radius: 999px; background: #fff; border-color: #e2e6eb; font-size: 11px; }
.demo-search-drawer .amenity-group { margin-top: 26px; padding: 16px; border-color: #e7eaee; background: #fff; }
.amenity-group legend { display: flex; align-items: center; gap: 9px; padding-inline: 8px; }
.amenity-group legend > .material-symbols-rounded { color: #92713b; font-size: 22px; }
.amenity-group-count { color: #92713b; font-size: 11px; font-weight: 400; }
.demo-search-drawer .demo-amenities label { position: relative; min-height: 72px; border-color: #edf0f2; background: #f8f9fb; padding: 14px 12px; border-radius: 14px; }
.demo-search-drawer .demo-amenities label:has(:checked) { background: #faf4e8; border-color: #b5a17c; }
.demo-search-drawer .demo-amenities label .material-symbols-rounded { width: 34px; text-align: center; }
.drawer-selection { flex: 0 0 100%; min-width: 0; max-width: 100%; padding: 0; }
.drawer-selection h3 { font-size: 13px; }
[data-selection-chips] { display: flex; flex-wrap: nowrap; gap: 8px; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; padding: 4px; }
[data-selection-chips]::-webkit-scrollbar { display: none; }
[data-selection-chips]:empty { display: none; }
.demo-search-drawer [data-selection-chips] button { flex: 0 0 auto; padding: 8px 12px; min-height: 38px; height: auto; background: #fff; border-color: #d9dee3; border-radius: 999px; font-size: 12px; white-space: nowrap; }
@media(max-width: 760px) { .drawer-section-nav { top: -24px; } }
@media(max-width: 440px) {
    .demo-search-drawer .demo-amenities { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
    .demo-search-drawer .demo-amenities label { flex-direction: column; justify-content: center; text-align: center; gap: 7px; min-height: 106px; padding: 14px 6px 10px; font-size: 11px; }
    .demo-search-drawer .demo-amenities label input { position: absolute; top: 8px; inset-inline-end: 8px; width: 15px; height: 15px; margin: 0; }
    .drawer-section-nav { gap: 4px; }
    .demo-search-drawer .drawer-section-nav button { font-size: 10px; }
}
.demo-search-drawer .drawer-section-nav {
    gap: 6px;
    padding: 7px;
    border: 1px solid #e0d8c9;
    border-radius: 18px;
    background: #f0eee8f5;
    box-shadow: 0 4px 14px #17344d08;
}
.demo-search-drawer .drawer-section-nav button {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 9px;
    min-height: 54px;
    border: 1px solid transparent;
    border-radius: 12px;
    background: transparent;
    color: #627180;
    font-weight: 700;
}
.drawer-section-nav button > .material-symbols-rounded { font-size: 23px; color: #92713b; }
.demo-search-drawer .drawer-section-nav button[aria-current] {
    background: #17344d;
    color: #fff;
    border-color: #17344d;
    box-shadow: 0 3px 8px #17344d20;
}
.drawer-section-nav button[aria-current] > .material-symbols-rounded { color: #f0d39c; }
.drawer-section-nav [data-selection-total] { padding-inline: 4px; color: #765d33; }
.demo-search-drawer .drawer-category-links { gap: 8px; }
.demo-search-drawer .drawer-category-links button {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 44px;
    padding: 9px 12px;
    border-radius: 12px;
    border-color: #e3e5e7;
    background: #fff;
    color: #536577;
}
.drawer-category-links .material-symbols-rounded { font-size: 20px; color: #92713b; }
.demo-search-drawer .drawer-category-links button[aria-current] { border-color: #b5a17c; background: #f4ecdc; color: #17344d; box-shadow: inset 0 -2px 0 #b5a17c; }
@media(hover:hover) {
    .demo-search-drawer .drawer-section-nav button:not([aria-current]):hover,
    .demo-search-drawer .drawer-category-links button:hover { background: #faf4e8; border-color: #b5a17c; color: #17344d; }
}
@media(max-width: 600px) {
    .demo-search-drawer .drawer-section-nav { top: -24px; padding: 5px; gap: 4px; }
    .demo-search-drawer .drawer-section-nav button { flex-direction: column; gap: 4px; min-height: 64px; padding: 7px 3px; font-size: 10px; }
    .drawer-section-nav button > .material-symbols-rounded { font-size: 22px; }
    .demo-search-drawer .drawer-category-links { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); }
    .demo-search-drawer .drawer-category-links button { justify-content: flex-start; text-align: start; padding: 8px; font-size: 10px; }
}
.demo-search-drawer::backdrop { background: #10283e88; backdrop-filter: blur(5px); }
.demo-search-drawer form { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; height: 100%; min-height: 0; margin: 0; }
.demo-search-drawer header, .demo-search-drawer footer { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 22px; flex-shrink: 0; background: #fff; }
.demo-search-drawer header { position: relative; flex-wrap: wrap; gap: 12px; padding: 26px 28px 12px; border-bottom: 1px solid #e5e2da; }
.demo-search-drawer header > div { flex: 1; min-width: 0; }
.demo-search-drawer header .drawer-section-nav { position: static; flex: 0 0 100%; min-width: 0; margin: 0; padding: 4px; gap: 4px; border-radius: 13px; box-shadow: none; }
.demo-search-drawer header .drawer-section-nav button { flex-direction: row; min-width: 0; min-height: 40px; gap: 6px; padding: 6px; border-radius: 9px; font-size: 11px; }
.demo-search-drawer header .drawer-section-nav button > .material-symbols-rounded { font-size: 19px; }
@media(max-width: 380px) {
    .demo-search-drawer header .drawer-section-nav button { gap: 3px; padding-inline: 3px; font-size: 10px; }
    .demo-search-drawer header .drawer-section-nav button > .material-symbols-rounded { font-size: 16px; }
    .demo-search-drawer header .drawer-section-nav [data-selection-total] { min-width: 16px; padding-inline: 2px; }
}
.demo-search-drawer header::before { content: ""; position: absolute; top: 10px; left: calc(50% - 22px); width: 44px; height: 4px; border-radius: 8px; background: #d6dbe0; }
.demo-search-drawer h2 { margin: 6px 0 0; font-size: 22px; }
.demo-search-drawer small { color: #876329; }
.demo-search-drawer button, .demo-results button, .demo-launch { min-height: 44px; border: 1px solid #d5bf93; border-radius: 12px; padding: 10px 18px; background: #f4ecdc; color: #17344d; font: inherit; cursor: pointer; }
.demo-search-drawer footer { flex-wrap: wrap; min-width: 0; padding: 10px 24px calc(10px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid #e5e2da; box-shadow: 0 -4px 16px #17344d05; }
.demo-search-drawer footer button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px; padding: 8px 16px; border-radius: 11px; line-height: 1.4; white-space: nowrap; }
.demo-search-drawer footer .material-symbols-rounded { font-size: 19px; }
.demo-search-drawer footer [type="submit"] { min-width: 190px; min-height: 44px; font-size: 13px; font-weight: 700; border-color: #17344d; box-shadow: 0 3px 8px #17344d14; }
.demo-search-drawer footer [type="submit"]:hover { background: #264d6b; }
.demo-search-drawer footer [type="reset"] { background: #f5f6f8; border-color: #e7eaee; color: #627180; font-size: 12px; }
.demo-search-drawer footer [type="reset"]:hover { background: #eceff3; color: #17344d; }
.demo-search-drawer [data-demo-close] { display: grid; place-items: center; padding: 0; width: 42px; height: 42px; min-height: 42px; flex-shrink: 0; border-color: #e5e8ec; background: #f7f8fa; font-size: 26px; }
.demo-search-drawer [type="submit"], .demo-results-bar button { background: #17344d; color: #fff; }
.demo-search-content { min-height: 0; padding: 24px 28px 32px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #b5a17c #f7f8fa; scrollbar-gutter: stable; }
.demo-search-content > .demo-notice { margin: 0 0 22px; background: #eef1f4; color: #627180; font-size: 12px; }
.demo-field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 20px; padding: 22px; background: #fff; border: 1px solid #e5e8ec; border-radius: 18px; }
.demo-field-grid label { display: grid; gap: 8px; font-size: 13px; min-width: 0; }
.demo-field-grid :is(input, select) { width: 100%; min-width: 0; height: 48px; border: 1px solid #ccd2d7; border-radius: 12px; padding: 10px; background: #fff; color: #17344d; font: inherit; }
.demo-search-drawer fieldset { border: 1px solid #e5e8ec; padding: 18px 22px 22px; margin: 24px 0 0; background: #fff; border-radius: 18px; }
.demo-search-drawer :is(input, select, button):focus-visible { outline: 3px solid #a07832; outline-offset: 3px; }
.demo-amenities label:has(:checked) { border-color: #b5a17c; background: #f7f1e5; }
.demo-search-content { direction: rtl; }
html:has(.demo-search-drawer[open]) { overflow: hidden; }
.demo-search-drawer legend { margin-bottom: 12px; font-weight: 700; }
.amenity-section-heading { margin-top: 28px; }
.amenity-section-heading h3 { margin: 0 0 8px; font-size: 18px; }
.amenity-section-heading p { color: #627180; font-size: 13px; line-height: 1.8; }
.amenity-section-heading [data-amenity-count] { display: inline-block; padding: 6px 12px; border-radius: 999px; background: #f4ecdc; color: #765d33; font-size: 12px; }
.demo-amenities { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.demo-amenities .material-symbols-rounded { font-size: 24px; color: #92713b; flex-shrink: 0; }
.demo-amenities label { min-height: 60px; font-size: 13px; line-height: 1.6; }
.demo-amenities label input { flex-shrink: 0; }
.demo-amenities label:has(:focus-visible) { outline: 2px solid #a07832; outline-offset: 3px; }
@media (max-width: 440px) {
    .demo-amenities { grid-template-columns: 1fr; }
}
.demo-amenities label { display: flex; gap: 8px; align-items: center; background: #fff; padding: 12px; border: 1px solid #e5e2da; border-radius: 12px; }
.demo-amenities input { accent-color: #17344d; width: 18px; height: 18px; }
.demo-notice { padding: 14px; border-radius: 12px; background: #f4ecdc; color: #765d33; font-size: 13px; line-height: 1.8; }
.demo-results { padding-block: 240px 60px; }
.demo-results h1 { font-size: clamp(26px, 4vw, 42px); margin: 0 0 12px; }
.demo-results-bar { margin-block: 28px 18px; padding: 20px; background: #fff; border: 1px solid #e5e2da; border-radius: 18px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.demo-results-bar p { margin: 8px 0 0; color: #627180; font-size: 13px; }
.demo-results-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; margin-top: 24px; }
.demo-result { overflow: hidden; border: 1px solid #e5e2da; border-radius: 20px; background: #fff; }
.demo-result img { display: block; width: 100%; height: 190px; object-fit: cover; }
.demo-result div { padding: 20px; }
.demo-result h2 { font-size: 20px; margin: 0 0 12px; }
.demo-result p { color: #627180; font-size: 13px; line-height: 1.8; }
.demo-result strong { color: #876329; }
.demo-empty { padding: 40px; text-align: center; }
.demo-launch { display: inline-block; margin-bottom: 16px; }
@media(max-width: 760px) {
    .demo-search-drawer { position: fixed; inset: auto 0 0; width: 100%; max-width: none; margin: 0; border-radius: 24px 24px 0 0; }
    .demo-search-drawer footer { padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px)); gap: 10px; }
    .demo-search-drawer footer [type="submit"] { min-width: 0; flex: 1; padding-inline: 12px; font-size: 13px; }
    .demo-search-drawer footer [type="reset"] { padding-inline: 8px; font-size: 12px; }
    .demo-field-grid { padding: 16px; gap: 18px 12px; }
    .demo-search-drawer fieldset { padding: 16px; }
    .demo-search-drawer h2 { font-size: 18px; }
    .demo-search-drawer header, .demo-search-content, .demo-search-drawer footer { padding-inline: 16px; }
    .demo-results { padding-top: 110px; }
    .demo-results-grid { grid-template-columns: 1fr; }
    .demo-results-bar { align-items: stretch; flex-direction: column; }
}
@media(max-width: 360px) {
    .demo-field-grid { grid-template-columns: 1fr; }
}
@media(prefers-reduced-motion: no-preference) {
    .demo-search-drawer[open] { animation: demo-sheet-enter 220ms ease-out; }
    @keyframes demo-sheet-enter { from { transform: translateY(40px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
}