:root {
    --cream: #f4efe4;
    --paper: #fbf8f1;
    --ink: #2e2b24;
    --muted: #7b776d;
    --line: #ded7c9;
    --terracotta: #bd6549;
    --terracotta-dark: #914735;
    --sage: #dfe2d3;
    --sage-dark: #7f9272;
    --sun: #edbd5d;
    --white: #fffdf8;
    --shadow: 0 18px 45px rgba(56, 48, 37, .08);
    --radius: 22px;
    --serif: 'Fraunces', 'Noto Serif Thai', Georgia, serif;
    --sans: 'DM Sans', 'IBM Plex Sans Thai', Arial, sans-serif;
}

@media (max-width: 640px) {
    .mockup-map-canvas { min-height: 0 !important; }
}

/* Keep the full mural extent visible so outer landmarks stay aligned with projected pins. */
.map-canvas, .mockup-map-canvas { background-size: 100% 100% !important; }

.featured-place-photo img, .place-card-image-wrap img { display: block; width: 100%; height: 100%; object-fit: cover; }
.featured-place-photo img { position: absolute; inset: 0; }
.place-card-image-wrap { height: 104px; margin: -23px -23px 17px; overflow: hidden; border-radius: 15px 15px 0 0; background: linear-gradient(135deg, #795037, #c98248 52%, #3d3026); }
.place-card-image-wrap > span { display: grid; height: 100%; place-items: center; color: rgba(255,253,248,.9); font-family: var(--serif); font-size: 22px; }
.featured-location, .place-card-hours, .place-card-location { display: block; margin-top: 8px; color: var(--muted); font-size: 10px; }
.featured-location, .place-card-location { overflow-wrap: anywhere; }

* { box-sizing: border-box; }
/* Published Suneta room photography; the CMS can replace these URLs later. */
.mockup-room-photo { background-size: cover !important; background-position: center !important; }
.mockup-room-photo:before { background: linear-gradient(180deg, rgba(26,18,12,.04), rgba(26,18,12,.28)) !important; opacity: 1 !important; }
.mockup-hero-photo { background-size: cover !important; background-position: center !important; }
.mockup-hero-photo:before { opacity: .22; }
.mockup-hero-photo:after { display: none; }
.bottom-story-photo { background-image: linear-gradient(135deg, rgba(34,22,14,.2), rgba(34,22,14,.55)), url('https://h-img2.cloudbeds.com/uploads/9445/line_album_6232023_230818_20~~65a340251466d.jpg') !important; background-size: cover !important; background-position: center !important; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--cream); color: var(--ink); font-family: var(--sans); font-size: 15px; line-height: 1.55; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
.page-wrap { width: min(1180px, calc(100% - 36px)); margin-inline: auto; }
.section-pad { padding-block: 86px; }
.eyebrow { display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.section-number { display: inline-block; margin-right: 12px; color: var(--terracotta); font-size: 12px; font-weight: 700; letter-spacing: .1em; }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { font-family: var(--serif); font-weight: 500; line-height: 1.02; }
h1 { font-size: clamp(52px, 8vw, 105px); letter-spacing: -.055em; }
h2 { font-size: clamp(38px, 5vw, 68px); letter-spacing: -.045em; }
h3 { font-size: 26px; letter-spacing: -.03em; }
.site-header { position: relative; z-index: 10; display: flex; align-items: center; justify-content: space-between; width: min(1180px, calc(100% - 36px)); margin-inline: auto; padding: 22px 0; }
.brand-lockup { display: inline-flex; align-items: center; gap: 10px; }
.brand-lockup strong { display: block; font-family: var(--serif); font-size: 21px; line-height: .9; letter-spacing: -.04em; }
.brand-lockup small { display: block; margin-top: 3px; font-size: 8px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.brand-mark { display: grid; place-items: center; width: 33px; height: 33px; border-radius: 50%; background: var(--terracotta); color: var(--cream); font-family: var(--serif); font-size: 19px; font-style: italic; }
.site-nav { display: flex; align-items: center; gap: 26px; font-size: 12px; font-weight: 600; }
.site-nav a:not(.nav-cta) { color: var(--muted); }
.site-nav a:hover, .text-link:hover, .arrow-link:hover { color: var(--terracotta); }
.nav-cta { padding: 11px 16px; border: 1px solid var(--ink); border-radius: 999px; }
.nav-cta span, .button span, .arrow-link span { display: inline-block; margin-left: 8px; }
.menu-toggle { display: none; border: 0; background: transparent; color: var(--ink); font-weight: 600; }
.menu-toggle span { font-size: 18px; margin-left: 5px; }
.hero-section { display: grid; grid-template-columns: .87fr 1.13fr; align-items: center; gap: 64px; padding: 54px 0 92px; }
.hero-copy { padding-left: 5%; }
.hero-copy h1 { max-width: 660px; margin: 22px 0; }
.hero-lede { max-width: 420px; color: var(--muted); font-size: 17px; }
.hero-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 25px; margin-top: 32px; }
.button { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 13px 19px; border: 1px solid transparent; border-radius: 999px; font-size: 12px; font-weight: 700; }
.button-dark { background: var(--ink); color: var(--paper); }
.button-dark:hover { background: var(--terracotta-dark); }
.button-quiet { border-color: var(--line); color: var(--muted); }
.button-full { width: 100%; }
.text-link, .arrow-link { color: var(--ink); font-size: 12px; font-weight: 700; }
.hero-meta { display: flex; justify-content: space-between; max-width: 380px; margin-top: 55px; padding-top: 13px; border-top: 1px solid var(--line); color: var(--muted); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }
.hero-visual { position: relative; min-height: 510px; }
.hero-photo-slot { position: absolute; inset: 0 8% 0 4%; overflow: hidden; border-radius: 47% 47% 10px 10px; background: linear-gradient(145deg, #ddc7ad 0%, #c88663 42%, #8b5947 100%); box-shadow: var(--shadow); }
.hero-photo-slot:before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255, 244, 210, .1), rgba(54, 39, 31, .37)), radial-gradient(ellipse at 65% 22%, rgba(255, 229, 164, .75) 0 6%, transparent 6.5%), linear-gradient(15deg, transparent 41%, rgba(74, 72, 52, .55) 42% 47%, transparent 48%); }
.hero-photo-slot:after { content: ''; position: absolute; right: 0; bottom: 0; width: 60%; height: 60%; background: linear-gradient(120deg, transparent 20%, rgba(66, 64, 49, .36) 21% 45%, transparent 46%), linear-gradient(180deg, transparent, rgba(62, 42, 30, .4)); clip-path: polygon(12% 100%, 50% 10%, 100% 0, 100% 100%); }
.photo-note { position: absolute; z-index: 2; left: 26px; bottom: 26px; color: rgba(255, 250, 237, .85); font-family: var(--serif); font-size: 18px; line-height: 1.1; }
.photo-note small { font-family: var(--sans); font-size: 9px; letter-spacing: .08em; text-transform: uppercase; }
.hero-sun { position: absolute; top: 19%; right: 18%; width: 85px; height: 85px; border-radius: 50%; background: var(--sun); opacity: .9; }
.hero-plant { position: absolute; bottom: -3%; width: 48%; height: 51%; background: linear-gradient(115deg, transparent 46%, rgba(45, 64, 44, .7) 47% 50%, transparent 51%); transform-origin: bottom; }
.plant-one { left: -7%; transform: rotate(-19deg); }
.plant-two { right: -4%; transform: scaleX(-1) rotate(-9deg); }
.photo-stamp { position: absolute; z-index: 2; top: 47%; right: 9%; display: grid; place-items: center; width: 80px; height: 80px; border: 1px solid rgba(255,255,255,.7); border-radius: 50%; color: var(--paper); font-size: 11px; line-height: 1.05; letter-spacing: .08em; text-align: center; text-transform: uppercase; transform: rotate(12deg); }
.hero-scribble { position: absolute; right: -1%; bottom: -17px; color: var(--terracotta); font-family: var(--serif); font-size: 21px; font-style: italic; transform: rotate(-6deg); }
.ticker-strip { overflow: hidden; padding: 16px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); color: var(--terracotta); text-transform: uppercase; }
.ticker-track { display: flex; justify-content: space-around; min-width: 900px; gap: 30px; font-size: 10px; font-weight: 700; letter-spacing: .15em; }
.ticker-track i { font-size: 17px; font-style: normal; line-height: 1; }
.section-kicker { margin-bottom: 42px; }
.split-story { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 12%; }
.story-art { position: relative; display: grid; place-items: center; min-height: 430px; border-radius: 44% 44% 13px 13px; background: var(--sage); color: var(--terracotta-dark); font-family: var(--serif); font-size: 46px; line-height: .94; text-align: center; transform: rotate(-2deg); }
.story-art:before { content: ''; position: absolute; inset: 11%; border: 1px solid rgba(86, 107, 80, .3); border-radius: 50%; }
.story-art i { position: absolute; top: 18%; right: 18%; color: var(--terracotta); font-family: var(--sans); font-size: 28px; font-style: normal; transform: rotate(15deg); }
.story-art b { position: absolute; bottom: 9%; left: 12%; font-family: var(--sans); font-size: 10px; letter-spacing: .14em; }
.story-copy { max-width: 440px; }
.story-copy h2 { margin-bottom: 25px; }
.story-copy p { color: var(--muted); font-size: 17px; }
.arrow-link { display: inline-block; margin-top: 16px; padding-bottom: 5px; border-bottom: 1px solid var(--ink); }
.rooms-section { border-top: 1px solid var(--line); }
.section-heading { display: grid; grid-template-columns: 1fr 1.7fr auto; align-items: end; gap: 24px; margin-bottom: 34px; }
.section-heading h2 { max-width: 570px; margin: 0; }
.section-heading .text-link { text-align: right; }
.room-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 19px; }
.room-card { overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); }
.room-art { position: relative; min-height: 310px; overflow: hidden; padding: 21px; }
.room-art:after { content: ''; position: absolute; inset: 30% 15% 0; border-radius: 50% 50% 0 0; background: rgba(255, 255, 255, .4); }
.room-art-terracotta { background: #d58663; color: var(--paper); }
.room-art-sage { background: #b9c5aa; color: #52654c; }
.room-art span { position: relative; z-index: 2; font-size: 11px; font-weight: 700; }
.room-art b { position: absolute; z-index: 2; right: 23px; bottom: 20px; font-family: var(--serif); font-size: 37px; font-weight: 500; line-height: .92; text-align: right; }
.room-content { padding: 21px 24px 25px; }
.room-content h3 { margin-bottom: 8px; }
.room-content p { min-height: 48px; margin-bottom: 20px; color: var(--muted); }
.room-note { color: var(--terracotta-dark); font-size: 10px; font-weight: 600; letter-spacing: .03em; }
.explore-preview { overflow: hidden; background: var(--terracotta-dark); color: var(--paper); }
.light-heading .eyebrow, .text-link-light { color: rgba(255, 253, 248, .65); }
.light-heading .section-number { color: var(--sun); }
.light-heading h2 { color: var(--paper); }
.map-shell { position: relative; }
.map-shell-home { margin-top: 50px; }
.map-shell-large { margin-top: 28px; }
.map-canvas { position: relative; min-height: 470px; overflow: hidden; border-radius: var(--radius); background-color: var(--sage); background-image: url('../images/chiang-mai-mural-base.svg'); background-position: center; background-size: cover; box-shadow: var(--shadow); }
.map-shell-home .map-canvas { min-height: 430px; }
.map-watermark { position: absolute; top: 8%; left: 7%; color: rgba(74, 91, 68, .2); font-family: var(--serif); font-size: clamp(64px, 13vw, 160px); line-height: .8; letter-spacing: -.09em; }
.map-district { position: absolute; color: rgba(74, 91, 68, .62); font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.district-old-city { top: 45%; left: 40%; }
.district-river { top: 26%; right: 13%; writing-mode: vertical-rl; }
.map-route { position: absolute; display: block; border: 2px dashed rgba(74, 91, 68, .43); border-radius: 50%; transform: rotate(-21deg); }
.route-one { top: 25%; left: 23%; width: 53%; height: 33%; }
.route-two { top: 33%; left: 39%; width: 18%; height: 55%; transform: rotate(54deg); }
.route-three { top: 57%; left: 9%; width: 67%; height: 25%; transform: rotate(14deg); }
.map-pin { position: absolute; z-index: 2; display: flex; align-items: center; gap: 5px; padding: 0; border: 0; background: transparent; color: var(--ink); transform: translate(-50%, -50%); }
.pin-dot { display: block; width: 15px; height: 15px; border: 3px solid var(--paper); border-radius: 50%; background: var(--terracotta); box-shadow: 0 2px 0 rgba(41, 45, 32, .16); }
.map-pin:hover .pin-dot, .map-pin:focus .pin-dot { background: var(--ink); transform: scale(1.2); }
.pin-label { padding: 4px 7px; border-radius: 6px; background: rgba(255, 253, 248, .85); font-size: 10px; font-weight: 700; white-space: nowrap; box-shadow: 0 3px 9px rgba(40, 38, 30, .08); }
.map-legend { position: absolute; right: 18px; bottom: 17px; display: flex; align-items: center; gap: 7px; color: rgba(46, 43, 36, .65); font-size: 10px; font-weight: 600; }
.map-legend i { display: block; width: 9px; height: 9px; border: 2px solid var(--paper); border-radius: 50%; background: var(--terracotta); }
.place-card { position: absolute; z-index: 5; right: 18px; bottom: 18px; width: min(310px, calc(100% - 36px)); padding: 23px; border-radius: 15px; background: var(--paper); box-shadow: 0 12px 35px rgba(39, 32, 23, .18); }
.place-card[hidden] { display: none; }
.place-card h3 { margin: 8px 0 10px; }
.place-card p { margin-bottom: 10px; color: var(--muted); font-size: 13px; }
.place-menu-label { display: block; margin-top: 10px; color: var(--ink); font-size: 10px; font-weight: 700; }
.place-menu-label[hidden], .place-menu[hidden] { display: none !important; }
.featured-travel, .place-card-travel { display: block; margin-top: 9px; color: var(--muted); font-size: 10px; line-height: 1.45; }
.featured-travel[hidden], .place-card-travel[hidden] { display: none !important; }
.place-menu { display: block; color: var(--terracotta-dark); font-size: 11px; font-weight: 700; }
.place-close { position: absolute; top: 10px; right: 12px; border: 0; background: transparent; color: var(--muted); font-size: 23px; line-height: 1; }
.pick-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; }
.pick-card { display: grid; grid-template-columns: auto 1fr auto; gap: 18px; padding: 24px 20px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.pick-index { color: var(--terracotta); font-size: 11px; font-weight: 700; }
.pick-card h3 { margin: 5px 0 9px; font-size: 26px; }
.pick-card p { min-height: 63px; margin-bottom: 0; color: var(--muted); font-size: 13px; }
.pick-card > a { align-self: end; font-size: 22px; }
.final-cta { display: flex; align-items: center; justify-content: space-between; padding-block: 80px; }
.final-cta h2 { margin: 11px 0 0; }
.site-footer { display: grid; grid-template-columns: 1.2fr 1fr 1fr auto; gap: 30px; padding: 42px max(18px, calc((100vw - 1180px) / 2)); background: var(--ink); color: var(--paper); }
.footer-brand { display: flex; gap: 12px; align-items: flex-start; }
.footer-brand .brand-mark { background: var(--sun); color: var(--ink); }
.footer-brand p { margin: 0; font-family: var(--serif); font-size: 21px; line-height: .98; }
.footer-links .eyebrow { color: rgba(255, 253, 248, .45); }
.footer-links p { margin: 9px 0 0; color: rgba(255, 253, 248, .8); font-size: 13px; }
.footer-links a:hover { color: var(--sun); }
.footer-note { align-self: end; margin: 0; color: rgba(255, 253, 248, .4); font-size: 10px; white-space: nowrap; }
.toast { position: fixed; z-index: 20; top: 17px; right: 17px; max-width: 360px; padding: 13px 17px; border-radius: 10px; color: var(--paper); font-size: 12px; box-shadow: var(--shadow); }
.toast-success { background: var(--sage-dark); }.toast-error { background: var(--terracotta-dark); }.inline-toast { position: static; margin-bottom: 20px; }

/* Explore */
.explore-page { background: var(--paper); }
.explore-hero { padding: 70px 0 50px; }.explore-hero h1 { max-width: 760px; margin: 16px 0; }.explore-hero h1 em { color: var(--terracotta); font-style: normal; }.explore-hero p { max-width: 450px; color: var(--muted); font-size: 17px; }.explore-map-section { padding-bottom: 0; }.filter-row, .admin-filter-row { display: flex; gap: 9px; flex-wrap: wrap; margin-bottom: 19px; }.filter-chip { display: inline-flex; gap: 5px; align-items: center; padding: 9px 14px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); font-size: 11px; font-weight: 700; }.filter-chip.is-active, .filter-chip:hover { border-color: var(--ink); background: var(--ink); color: var(--paper); }.map-footnote { display: flex; gap: 16px; align-items: flex-start; max-width: 610px; margin: 19px 0 0 auto; color: var(--muted); font-size: 11px; }.map-footnote span { color: var(--terracotta); font-weight: 700; }.map-footnote p { margin: 0; }.place-list-section { border-top: 1px solid var(--line); }.place-list-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; }.place-list-card { display: flex; flex-direction: column; min-height: 245px; padding: 24px; border: 1px solid var(--line); border-radius: var(--radius); }.place-list-card h3 { margin: 9px 0 10px; }.place-list-card p { flex: 1; color: var(--muted); font-size: 13px; }.place-list-meta { color: var(--terracotta-dark); font-size: 11px; font-weight: 700; }

/* Admin */
/* User management */
.user-table { border-top: 1px solid var(--line); }
.user-table-head, .user-row { display: grid; grid-template-columns: minmax(220px, 1.5fr) 120px 100px 130px 20px; gap: 14px; align-items: center; }
.user-table-head { padding: 10px 0; color: var(--muted); font-size: 9px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.user-row { padding: 13px 0; border-top: 1px solid var(--line); font-size: 11px; }
.user-row:hover strong { color: var(--terracotta); }
.user-person { display: flex; gap: 10px; align-items: center; min-width: 0; }
.user-person > span:last-child { min-width: 0; }
.user-avatar { display: grid; place-items: center; flex: 0 0 32px; width: 32px; height: 32px; border-radius: 50%; background: var(--sage); color: var(--sage-dark); font-weight: 700; }
.user-person strong, .user-person small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-person small, .user-last-login { color: var(--muted); font-size: 10px; }
.role-badge { padding: 5px 8px; border-radius: 999px; background: #eee9df; color: var(--ink); font-size: 9px; font-weight: 700; white-space: nowrap; }
.role-owner { background: #f2dfaa; color: #8b6826; }
.role-manager { background: #e4eadc; color: var(--sage-dark); }
.role-developer { background: #e7d8d0; color: var(--terracotta-dark); }
.empty-state { padding: 35px 0 15px; border-top: 1px solid var(--line); color: var(--muted); }
.empty-state strong { display: block; color: var(--ink); font-family: var(--serif); font-size: 24px; font-weight: 500; }
.empty-state p { margin: 6px 0 12px; }
.user-permission-note { display: flex; gap: 9px; margin-top: 13px; color: var(--muted); font-size: 11px; }
.user-permission-note > span { display: grid; flex: 0 0 18px; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--sage); color: var(--sage-dark); font-weight: 700; }
.user-permission-note p { margin: 0; }
.user-permission-note strong { color: var(--ink); }
.user-form .publish-panel { position: sticky; top: 20px; }
.login-card .inline-toast ul, .toast ul { margin: 0; padding-left: 18px; }

.admin-shell { background: #ebe8df; }
.admin-shell { background: #ebe8df; }.admin-layout { display: flex; min-height: 100vh; }.admin-sidebar { position: sticky; top: 0; display: flex; flex: 0 0 235px; flex-direction: column; min-height: 100vh; padding: 26px 18px 18px; background: var(--ink); color: var(--paper); }.admin-brand { padding: 0 9px 38px; }.admin-brand small { color: rgba(255,255,255,.45); }.admin-brand .brand-mark { background: var(--sun); color: var(--ink); }.admin-nav-label { margin: 18px 11px 9px; color: rgba(255,255,255,.35); font-size: 9px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }.admin-nav { display: grid; gap: 3px; }.admin-nav a { display: flex; align-items: center; gap: 11px; padding: 10px 11px; border-radius: 7px; color: rgba(255,255,255,.62); font-size: 12px; }.admin-nav a span { width: 16px; color: rgba(255,255,255,.42); font-size: 15px; text-align: center; }.admin-nav a:hover, .admin-nav a.is-active { background: rgba(255,255,255,.1); color: var(--paper); }.admin-nav a.is-active span { color: var(--sun); }.admin-sidebar-footer { display: flex; gap: 9px; align-items: center; margin-top: auto; padding: 16px 11px 0; border-top: 1px solid rgba(255,255,255,.1); }.admin-sidebar-footer .status-dot { width: 8px; height: 8px; border-radius: 50%; background: #91b67e; box-shadow: 0 0 0 4px rgba(145,182,126,.13); }.admin-sidebar-footer strong, .admin-sidebar-footer small { display: block; }.admin-sidebar-footer strong { font-size: 11px; }.admin-sidebar-footer small { color: rgba(255,255,255,.43); font-size: 10px; }.admin-main { width: min(100%, 1280px); padding: 0 39px 70px; }.admin-topbar { display: flex; align-items: center; justify-content: space-between; padding: 44px 0 35px; }.admin-topbar h1 { margin: 6px 0 0; font-family: var(--serif); font-size: 45px; letter-spacing: -.05em; }.admin-topbar-actions { display: flex; align-items: center; gap: 20px; }.demo-pill { display: flex; align-items: center; gap: 6px; padding: 8px 10px; border: 1px solid #d5d0c3; border-radius: 999px; color: var(--muted); font-size: 10px; font-weight: 700; }.demo-pill span { width: 6px; height: 6px; border-radius: 50%; background: var(--sun); }.admin-mobile-bar { display: none; }.admin-content { max-width: 1130px; }.admin-alert { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; padding: 14px 17px; border: 1px solid #e4c98d; border-radius: 11px; background: #fbf1d5; color: #73572b; font-size: 11px; }.admin-alert > span { font-size: 22px; }.admin-alert div { flex: 1; }.admin-alert strong { color: var(--ink); }.admin-alert a { color: var(--terracotta-dark); font-weight: 700; white-space: nowrap; }.stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 13px; }.stat-card { min-height: 170px; padding: 19px; border-radius: 12px; background: var(--paper); }.stat-card strong { display: block; margin-top: 27px; font-family: var(--serif); font-size: 48px; line-height: .9; }.stat-card small { display: block; margin-top: 10px; color: var(--muted); font-size: 10px; }.stat-card-sage { background: #d9e0d0; }.stat-card-orange { background: #e8c39f; }.stat-card-dark { background: var(--terracotta-dark); color: var(--paper); }.stat-card-dark .eyebrow, .stat-card-dark small { color: rgba(255,255,255,.6); }.dashboard-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 13px; margin-top: 13px; }.admin-panel { padding: 23px; border-radius: 12px; background: var(--paper); }.panel-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 23px; }.panel-heading h2 { margin: 6px 0 0; font-size: 31px; }.panel-date { color: var(--muted); font-size: 10px; }.mini-map { position: relative; min-height: 250px; overflow: hidden; border-radius: 9px; background: var(--sage); background-image: url('../images/chiang-mai-mural-base.svg'); background-size: cover; }.mini-map-note { position: absolute; z-index: 1; top: 18px; left: 18px; color: rgba(69, 86, 63, .7); font-family: var(--serif); font-size: 22px; line-height: 1; }.mini-map-note small { font-family: var(--sans); font-size: 9px; letter-spacing: .1em; text-transform: uppercase; }.mini-pin, .form-preview-pin { position: absolute; z-index: 2; width: 13px; height: 13px; border: 3px solid var(--paper); border-radius: 50%; background: var(--terracotta); box-shadow: 0 2px 0 rgba(43,42,36,.15); }.mini-pin-one { top: 46%; left: 47%; }.mini-pin-two { top: 55%; left: 38%; }.mini-pin-three { top: 35%; left: 60%; }.mini-route { position: absolute; border: 2px dashed rgba(74, 91, 68, .48); border-radius: 50%; }.mini-route-one { top: 25%; left: 18%; width: 65%; height: 37%; transform: rotate(-18deg); }.mini-route-two { top: 39%; left: 37%; width: 22%; height: 50%; transform: rotate(45deg); }.activity-list { display: grid; gap: 2px; }.activity-list > div { display: grid; grid-template-columns: 28px 1fr auto; gap: 9px; align-items: start; padding: 12px 0; border-top: 1px solid var(--line); }.activity-icon { color: var(--terracotta); }.activity-list p { margin: 0; font-size: 12px; line-height: 1.4; }.activity-list small, .activity-list time { color: var(--muted); font-size: 10px; }.roadmap-panel { margin-top: 13px; }.roadmap { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; }.roadmap-step { position: relative; padding: 13px 17px 0 0; border-top: 1px solid var(--line); }.roadmap-step:not(:last-child):after { content: ''; position: absolute; top: -1px; right: 0; width: 35px; border-top: 1px dashed var(--line); }.roadmap-step span { display: block; margin-bottom: 20px; color: var(--muted); font-size: 10px; font-weight: 700; }.roadmap-step strong, .roadmap-step small { display: block; }.roadmap-step strong { font-size: 12px; }.roadmap-step small { margin-top: 4px; color: var(--muted); font-size: 10px; line-height: 1.3; }.roadmap-step.is-done span { color: var(--sage-dark); }.roadmap-step.is-current span { color: var(--terracotta); }.roadmap-step.is-current { border-color: var(--terracotta); }.places-toolbar { display: flex; justify-content: space-between; align-items: end; gap: 20px; margin-bottom: 25px; }.admin-lede { max-width: 580px; margin: 0; color: var(--muted); font-size: 15px; }.admin-filter-row { margin-bottom: 13px; }.admin-filter-row .filter-chip span { color: inherit; opacity: .6; }.places-manager-grid { display: grid; grid-template-columns: 1.2fr .8fr; gap: 13px; }.place-table-panel, .location-preview-panel { min-width: 0; }.place-table { border-top: 1px solid var(--line); }.place-row { display: grid; grid-template-columns: 30px 1fr auto auto 20px; gap: 10px; align-items: center; padding: 13px 0; border-bottom: 1px solid var(--line); }.place-row:hover strong { color: var(--terracotta); }.place-row-pin { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--sage); }.place-row-pin .pin-dot { width: 9px; height: 9px; border-width: 2px; }.place-row-main strong, .place-row-main small { display: block; }.place-row-main strong { font-family: var(--serif); font-size: 17px; font-weight: 500; }.place-row-main small { color: var(--muted); font-size: 10px; }.pick-badge, .status-badge { padding: 5px 7px; border-radius: 999px; font-size: 9px; font-weight: 700; white-space: nowrap; }.pick-badge { background: #f2dfaa; color: #8b6826; }.status-badge { border: 1px solid var(--line); color: var(--muted); }.status-badge.is-live { border-color: #b8c9ac; background: #e7eddf; color: var(--sage-dark); }.row-arrow { color: var(--muted); }.large-mini-map { min-height: 345px; }.preview-note { display: flex; gap: 9px; margin-top: 14px; color: var(--muted); font-size: 11px; }.preview-note span { display: grid; flex: 0 0 18px; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--sage); color: var(--sage-dark); font-weight: 700; }.preview-note p { margin: 0; }.form-breadcrumb { display: flex; gap: 10px; align-items: center; margin-bottom: 22px; color: var(--muted); font-size: 11px; }.form-breadcrumb strong { color: var(--ink); }.place-form { display: grid; grid-template-columns: 1fr 320px; gap: 13px; align-items: start; }.form-main-column { display: grid; gap: 13px; }.form-panel { padding: 27px; }.field-grid, .coordinate-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 13px; }.field { display: block; }.field-wide { grid-column: 1 / -1; }.field > span { display: block; margin-bottom: 6px; color: var(--ink); font-size: 11px; font-weight: 700; }.field > span b { color: var(--terracotta); }.field input, .field select, .field textarea { width: 100%; padding: 11px 12px; border: 1px solid var(--line); border-radius: 7px; outline: none; background: var(--white); color: var(--ink); }.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--terracotta); box-shadow: 0 0 0 3px rgba(189,101,73,.1); }.field textarea { resize: vertical; }.field small { display: block; margin-top: 6px; color: var(--muted); font-size: 10px; }.location-search-row { display: flex; align-items: end; gap: 13px; margin-bottom: 22px; }.location-search-row .field { flex: 1; }.or-divider { padding-bottom: 12px; color: var(--muted); font-size: 11px; }.location-trust { color: var(--sage-dark); font-size: 10px; font-weight: 700; }.location-preview-inline { display: grid; grid-template-columns: 1.05fr .95fr; gap: 17px; align-items: center; margin-top: 23px; padding-top: 20px; border-top: 1px solid var(--line); }.location-preview-inline p { color: var(--muted); font-size: 12px; }.form-preview-pin { left: 48%; top: 47%; transition: left .2s, top .2s; }.upload-drop { position: relative; display: grid; place-items: center; min-height: 160px; padding: 20px; border: 1px dashed #c7beaf; border-radius: 10px; background: rgba(244,239,228,.55); text-align: center; }.upload-drop input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }.upload-icon { display: grid; place-items: center; width: 31px; height: 31px; margin-bottom: 8px; border-radius: 50%; background: var(--sage); color: var(--sage-dark); font-size: 21px; }.upload-drop strong, .upload-drop small { display: block; }.upload-drop strong { font-size: 12px; }.upload-drop small { color: var(--muted); font-size: 10px; }.form-side-column { display: grid; gap: 13px; }.publish-panel { position: sticky; top: 20px; }.switch-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 15px 0; border-top: 1px solid var(--line); }.switch-row span, .switch-row strong, .switch-row small { display: block; }.switch-row strong { font-size: 12px; }.switch-row small { color: var(--muted); font-size: 10px; }.switch-row input { position: absolute; opacity: 0; }.switch-row i { position: relative; display: block; width: 37px; height: 21px; border-radius: 999px; background: #d8d3c7; }.switch-row i:after { content: ''; position: absolute; top: 3px; left: 3px; width: 15px; height: 15px; border-radius: 50%; background: var(--paper); transition: .2s; }.switch-row input:checked + i { background: var(--sage-dark); }.switch-row input:checked + i:after { left: 19px; }.publish-panel .button { margin-top: 18px; }.publish-panel .button + .button { margin-top: 8px; }.tip-panel p { margin: 10px 0 0; color: var(--muted); font-size: 12px; }
.error-page { width: min(700px, calc(100% - 36px)); margin: 120px auto; }.error-page h1 { margin: 18px 0; }.error-page p { color: var(--muted); }
.login-shell { display: grid; min-height: 100vh; place-items: center; padding: 25px; background: radial-gradient(circle at 80% 10%, rgba(189,101,73,.18), transparent 35%), var(--ink); }.login-card { width: min(420px, 100%); padding: 38px; border-radius: 16px; background: var(--paper); box-shadow: var(--shadow); }.login-card .brand-lockup { margin-bottom: 70px; }.login-card h1 { margin: 15px 0 11px; font-size: 57px; }.login-card > p { margin-bottom: 28px; color: var(--muted); }.login-form { display: grid; gap: 16px; }.login-back { display: block; margin-top: 23px; text-align: center; }

@media (max-width: 640px) {
    .user-table-head { display: none; }
    .user-row { grid-template-columns: 1fr auto 16px; gap: 7px; }
    .user-row .role-badge { grid-column: 2; grid-row: 1; }
    .user-row .status-badge { grid-column: 1; grid-row: 2; justify-self: start; }
    .user-row .user-last-login { grid-column: 2; grid-row: 2; text-align: right; }
    .user-row .row-arrow { grid-column: 3; grid-row: 1 / span 2; }
    .user-form .publish-panel { position: static; }
}

@media (max-width: 900px) {
    .hero-section { grid-template-columns: 1fr; gap: 35px; padding-top: 28px; }.hero-copy { padding-left: 0; }.hero-visual { min-height: 430px; }.hero-photo-slot { inset: 0 5% 0 0; }.split-story, .room-grid, .dashboard-grid, .places-manager-grid, .place-form { grid-template-columns: 1fr; }.story-art { min-height: 360px; }.section-heading { grid-template-columns: 1fr auto; }.section-heading h2 { grid-column: 1 / -1; grid-row: 2; }.section-heading .text-link { grid-column: 2; grid-row: 1; }.pick-grid, .place-list-grid { grid-template-columns: 1fr 1fr; }.site-footer { grid-template-columns: 1fr 1fr; }.footer-note { grid-column: 1 / -1; }.stat-grid { grid-template-columns: 1fr 1fr; }.roadmap { grid-template-columns: 1fr 1fr; gap: 20px; }.publish-panel { position: static; }
}
@media (max-width: 640px) {
    .page-wrap, .site-header { width: min(100% - 28px, 1180px); }.site-header { padding: 18px 0; }.menu-toggle { display: block; }.site-nav { position: absolute; top: 67px; right: 0; left: 0; display: none; padding: 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--paper); box-shadow: var(--shadow); }.site-nav.is-open { display: grid; gap: 14px; }.site-nav .nav-cta { text-align: center; }.hero-section { padding-bottom: 55px; }.hero-copy h1 { font-size: clamp(50px, 16vw, 80px); }.hero-lede { font-size: 15px; }.hero-visual { min-height: 360px; }.hero-scribble { right: 0; font-size: 16px; }.photo-note { left: 18px; bottom: 20px; font-size: 15px; }.section-pad { padding-block: 60px; }.split-story { gap: 35px; }.story-art { min-height: 300px; font-size: 38px; }.section-heading { display: block; }.section-heading .text-link { display: inline-block; margin-top: 16px; }.map-canvas { min-height: 420px; }.map-shell-home .map-canvas { min-height: 400px; }.pin-label { display: none; }.map-legend { right: 11px; bottom: 11px; font-size: 8px; }.place-card { right: 11px; bottom: 11px; width: calc(100% - 22px); }.pick-grid, .place-list-grid, .site-footer, .stat-grid, .roadmap { grid-template-columns: 1fr; }.pick-card p { min-height: auto; }.final-cta { display: block; padding-block: 60px; }.final-cta .button { margin-top: 24px; }.footer-links { margin-top: 11px; }.admin-sidebar { position: fixed; z-index: 30; left: -260px; width: 235px; transition: left .2s; }.admin-sidebar.is-open { left: 0; }.admin-main { padding: 0 14px 50px; }.admin-mobile-bar { display: flex; align-items: center; justify-content: space-between; padding: 14px 0; }.admin-mobile-title { font-family: var(--serif); font-size: 18px; }.icon-button { border: 0; background: transparent; color: var(--ink); font-size: 18px; }.admin-topbar { padding: 20px 0 25px; }.admin-topbar h1 { font-size: 38px; }.admin-topbar-actions { display: none; }.admin-alert { align-items: flex-start; flex-wrap: wrap; }.admin-alert a { margin-left: 34px; }.places-toolbar { display: block; }.places-toolbar .button { margin-top: 17px; }.place-row { grid-template-columns: 30px 1fr auto 16px; }.place-row .pick-badge { display: none; }.location-search-row { display: block; }.or-divider { display: inline-block; padding: 10px 0; }.location-preview-inline { grid-template-columns: 1fr; }.field-grid, .coordinate-grid { grid-template-columns: 1fr; }.field-wide { grid-column: auto; }.form-panel { padding: 20px 17px; }.admin-panel { padding: 18px; }.large-mini-map { min-height: 280px; }.panel-heading h2 { font-size: 27px; }.roadmap-step:not(:last-child):after { display: none; }.roadmap-step { padding-right: 0; }.explore-hero { padding-top: 44px; }.explore-hero h1 { font-size: 64px; }.filter-row { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 5px; }.filter-chip { white-space: nowrap; }
}

/* Mockup direction: editorial Suneta home */
.mockup-home { background: #fffdfa; color: #241e19; }
.mockup-header { position: relative; z-index: 10; width: 100%; min-height: 57px; padding: 0 4%; border-bottom: 1px solid #e9e4de; background: #fffdfa; }
.mockup-logo { display: grid; width: 119px; height: 57px; place-content: center; border-radius: 0; background: transparent; color: #4b2c1c; text-align: center; line-height: .9; box-shadow: none; }
.mockup-logo strong { font-family: var(--serif); font-size: 24px; letter-spacing: -.09em; }
.mockup-logo span { margin-top: 4px; font-size: 10px; font-weight: 700; letter-spacing: .24em; }
.mockup-logo small { margin-top: 2px; font-size: 7px; letter-spacing: .21em; }
.site-logo-image { display: block; width: 100%; height: 100%; object-fit: contain; }
.mockup-header .site-nav { gap: 25px; margin-left: auto; font-size: 11px; }
.mockup-header .site-nav a { color: #29231e; font-weight: 500; }
.mockup-header .site-nav .is-current { padding-bottom: 7px; border-bottom: 1px solid #5c3b28; }
.mockup-header .site-nav select { padding: 8px 28px 8px 12px; border: 1px solid #e4ded7; border-radius: 8px; background: #fffdfa; color: #312a24; font-size: 11px; }
.mockup-header .nav-cta { padding: 11px 21px; border: 0; border-radius: 7px; background: #6c4228; color: #fff !important; font-size: 10px; letter-spacing: .03em; }
.mockup-hero-photo { position: relative; min-height: 308px; overflow: hidden; background-color: #765034; background-image: linear-gradient(90deg, rgba(25, 16, 10, .66) 0%, rgba(36, 24, 15, .14) 45%, rgba(18, 14, 12, .52) 100%), radial-gradient(ellipse at 56% 48%, rgba(218, 157, 84, .7) 0 7%, transparent 7.5%), linear-gradient(109deg, transparent 0 24%, rgba(21, 34, 25, .62) 25% 34%, transparent 35%), linear-gradient(180deg, #55402c 0%, #a26c3d 53%, #3d2d23 54% 100%); }
.mockup-hero-photo:before { content: ''; position: absolute; inset: 0; opacity: .7; background: repeating-linear-gradient(90deg, transparent 0 8%, rgba(241, 192, 113, .17) 8.2% 8.5%, transparent 8.7% 17%), linear-gradient(170deg, transparent 50%, rgba(26, 33, 21, .45) 51% 53%, transparent 54%); }
.mockup-hero-photo:after { content: ''; position: absolute; right: 21%; bottom: -2%; width: 32%; height: 74%; border-radius: 47% 47% 0 0; background: linear-gradient(90deg, rgba(35, 27, 20, .55), rgba(185, 124, 63, .3), rgba(37, 29, 22, .56)); box-shadow: -90px 37px 0 -33px rgba(212, 166, 100, .55), 70px 55px 0 -17px rgba(39, 29, 23, .55); }
.mockup-hero-shade { position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(29, 19, 11, .25), transparent 48%, rgba(30, 21, 17, .35)); }
.hero-script, .hero-wall-copy, .cta-script { font-family: 'Caveat', 'Mali', var(--serif); font-weight: 600; }
.hero-script { position: absolute; z-index: 3; top: 47px; left: 7.3%; color: #fffdfa; font-size: clamp(39px, 4.3vw, 67px); line-height: .88; transform: rotate(-4deg); }
.hero-copy-small { position: absolute; z-index: 3; top: 166px; left: 7.4%; color: #fffdfa; font-size: 15px; line-height: 1.3; }
.mockup-light-button, .mockup-dark-button { position: absolute; z-index: 3; display: inline-flex; align-items: center; justify-content: space-between; gap: 17px; padding: 10px 15px; border-radius: 5px; font-size: 10px; font-weight: 700; letter-spacing: .02em; }
.mockup-light-button { top: 227px; left: 7.4%; min-width: 156px; background: #fffdfa; color: #2c231d; }
.mockup-dark-button { position: relative; min-width: 177px; background: #6c4228; color: #fffdfa; }
.hero-wall-copy { position: absolute; z-index: 3; top: 52px; right: 15%; color: #2d1f18; font-size: 29px; line-height: .9; transform: rotate(-8deg); }
.hero-wall-copy i { display: block; width: 85px; margin: 8px 0 0 42px; border-top: 4px solid #c85929; border-radius: 50%; transform: rotate(-8deg); }
.hero-side-copy { position: absolute; z-index: 3; top: 28px; right: 2.5%; color: rgba(255,255,255,.85); font-family: var(--serif); font-size: 21px; line-height: 1.42; letter-spacing: .06em; text-align: center; }
.hero-side-copy span { display: inline-grid; place-items: center; width: 25px; height: 25px; margin-top: 10px; border: 1px solid rgba(255,255,255,.8); border-radius: 50%; font-family: var(--sans); font-size: 14px; }
.photo-placeholder-note { position: absolute; z-index: 4; right: 14px; bottom: 10px; color: rgba(255,255,255,.72); font-size: 8px; letter-spacing: .07em; text-transform: uppercase; }
.photo-placeholder-note small { font-size: 7px; letter-spacing: .02em; text-transform: none; }
.benefit-bar { display: grid; grid-template-columns: repeat(4, 1fr); padding: 15px 7.3%; border-bottom: 1px solid #eee8e2; background: #faf8f5; }
.benefit-bar > div { display: flex; align-items: center; gap: 12px; min-height: 41px; border-right: 1px solid #e5dfd8; padding-left: 25px; }
.benefit-bar > div:first-child { padding-left: 0; }.benefit-bar > div:last-child { border-right: 0; }
.benefit-icon { color: #704a2e; font-size: 24px; }
.benefit-bar strong, .benefit-bar small { display: block; }.benefit-bar strong { font-size: 11px; }.benefit-bar small { margin-top: 2px; color: #6e6862; font-size: 9px; }
.stay-policies { display: flex; align-items: center; justify-content: space-between; gap: 28px; padding: 24px 7.3%; border-bottom: 1px solid #eee8e2; background: #fffdfa; }
.stay-policies-heading .eyebrow { color: #a15b35; font-size: 10px; font-weight: 700; letter-spacing: .16em; }
.stay-policies-heading h2 { margin: 5px 0 0; color: var(--ink); font-family: var(--serif); font-size: 25px; font-weight: 500; }
.stay-policy-list { display: flex; align-items: stretch; gap: 0; }
.stay-policy { min-width: 170px; padding: 0 27px; border-left: 1px solid #e5dfd8; }
.stay-policy span, .stay-policy strong { display: block; }
.stay-policy span { color: #746c64; font-size: 11px; }
.stay-policy strong { margin-top: 3px; color: var(--ink); font-family: var(--serif); font-size: 24px; font-weight: 500; }
.mockup-section { width: min(100% - 7.5%, 1200px); margin-inline: auto; padding: 27px 0 33px; }
.mockup-section-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 14px; }.mockup-section-heading > div { display: flex; align-items: baseline; gap: 20px; }.mockup-section-heading h2 { margin: 0; font-family: 'Caveat', 'Mali', var(--serif); font-size: 34px; letter-spacing: -.02em; }.mockup-section-heading p { margin: 0; color: #514c48; font-size: 13px; }.mockup-section-heading > a { font-size: 10px; font-weight: 700; text-decoration: underline; }.mockup-section-heading > a span { margin-left: 7px; font-size: 16px; text-decoration: none; }
.room-card-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }.mockup-room-card, .mockup-pick-card { overflow: hidden; border: 1px solid #e9e4de; border-radius: 5px; background: #fff; }.mockup-room-photo { position: relative; min-height: 113px; overflow: hidden; }.mockup-room-photo:before, .mockup-pick-photo:before, .bottom-story-photo:before { content: ''; position: absolute; inset: 0; opacity: .84; }.room-photo-dorm-a, .room-photo-dorm-b { background: linear-gradient(105deg, #a67142, #e6c287 45%, #a56d3d); }.room-photo-dorm-a:before, .room-photo-dorm-b:before { background: repeating-linear-gradient(90deg, transparent 0 16%, rgba(76,46,25,.6) 17% 19%, transparent 20% 31%), linear-gradient(180deg, rgba(39,31,23,.15), rgba(255,255,255,.2)); }.room-photo-private-a, .room-photo-private-b { background: linear-gradient(135deg, #b78b67, #f0d4ae 46%, #9a6f50); }.room-photo-private-a:before, .room-photo-private-b:before { background: linear-gradient(90deg, rgba(255,255,255,.35) 0 27%, transparent 28% 62%, rgba(73,47,32,.32) 63%); }.mockup-room-content { position: relative; padding: 8px 11px 10px; }.mockup-room-content h3 { margin: 0 0 7px; font-family: var(--sans); font-size: 13px; font-weight: 700; letter-spacing: -.02em; }.mockup-room-content p { margin: 3px 0; color: #6b6660; font-size: 9px; }.mockup-room-content p span { color: #5e554e; }.mockup-room-content > a { position: absolute; right: 11px; bottom: 15px; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: #f0efed; font-size: 18px; }
.mockup-map-section { padding: 27px 0 29px; background: #f5eee3; }.map-heading { width: min(100% - 7.5%, 1200px); padding: 0; }.map-heading > div:first-child { display: block; }.map-heading h2 { font-size: 45px; }.map-filter-row { display: flex; gap: 8px; align-items: center; }.mockup-filter { padding: 8px 11px; border: 1px solid #e5ded3; border-radius: 999px; background: #fffdfa; color: #3d352e; font-size: 10px; font-weight: 700; }.mockup-filter.is-active { background: #70462b; color: #fff; }
.mockup-map-wrap { position: relative; width: 100%; margin-top: 16px; }.mockup-map-canvas { position: relative; min-height: 500px; overflow: hidden; background-color: #e5e4cc; background-image: url('../images/chiang-mai-mural-base.svg'); background-size: cover; background-position: center; }.map-old-city-label { position: absolute; top: 42%; left: 30%; color: rgba(90,82,57,.82); font-family: var(--serif); font-size: 21px; letter-spacing: .1em; }.map-river-label { position: absolute; top: 25%; right: 17%; color: #517ca0; font-family: var(--serif); font-size: 19px; font-style: italic; writing-mode: vertical-rl; transform: rotate(15deg); }.mockup-map-north { position: absolute; top: 46%; left: 2.5%; color: #2e3b32; font-family: var(--serif); font-size: 22px; text-align: center; }.mockup-map-north span { font-size: 27px; }.map-road-label { position: absolute; color: #514d38; font-size: 9px; font-weight: 700; transform: rotate(-6deg); }.map-road-one { top: 28%; left: 28%; }.map-road-two { right: 35%; bottom: 13%; transform: rotate(9deg); }.map-road-three { top: 63%; left: 8%; transform: rotate(-82deg); }.map-route-shape { position: absolute; border: 3px solid rgba(247,242,226,.82); border-radius: 11%; transform: rotate(-5deg); }.map-route-a { top: 21%; left: 17%; width: 41%; height: 65%; }.map-route-b { top: 33%; left: 17%; width: 69%; height: 39%; border-color: rgba(116,151,164,.6); }.mockup-map-pin { position: absolute; z-index: 2; display: grid; place-items: center; min-width: 29px; min-height: 29px; padding: 0; border: 2px solid #fff; border-radius: 50% 50% 50% 0; background: #bf5b2d; color: #fff; font-size: 15px; box-shadow: 0 2px 3px rgba(71,45,24,.22); transform: translate(-50%, -50%) rotate(-45deg); }.mockup-map-pin span, .mockup-map-pin small { transform: rotate(45deg); }.mockup-map-pin small { position: absolute; top: 34px; left: -26px; width: 85px; color: #3c352c; font-size: 9px; font-weight: 700; white-space: nowrap; text-align: center; }.mockup-map-pin:nth-of-type(3n) { background: #9d6a4a; }.mockup-map-pin:nth-of-type(4n) { background: #a04f91; }.mockup-map-landmark { position: absolute; color: #3a332b; font-size: 10px; font-weight: 700; text-align: center; }.landmark-suneta { top: 49%; left: 43%; padding: 11px 8px; border-radius: 50%; background: #70462b; color: #fff; font-family: var(--serif); font-size: 15px; line-height: .8; transform: rotate(-5deg); }.landmark-suneta small { font-family: var(--sans); font-size: 6px; letter-spacing: .1em; }.landmark-gate { top: 45%; left: 53%; }.landmark-temple { bottom: 18%; left: 33%; }.landmark-river { top: 33%; right: 19%; }.map-controls { position: absolute; bottom: 21px; left: 27px; display: grid; width: 31px; border-radius: 4px; background: #fffdfa; box-shadow: 0 2px 8px rgba(62,48,34,.18); }.map-controls button { width: 31px; height: 31px; border: 0; border-bottom: 1px solid #e6e1d7; background: transparent; color: #4a4035; font-size: 17px; }.map-data-note { position: absolute; right: 23px; bottom: 18px; color: rgba(63,66,44,.63); font-size: 8px; }
.featured-place-card { position: absolute; z-index: 5; top: 17px; right: 2.8%; width: 207px; padding: 10px 12px 13px; border-radius: 9px; background: #fffdfa; box-shadow: 0 8px 20px rgba(65,45,26,.18); }.featured-place-photo { position: relative; height: 82px; margin-bottom: 9px; overflow: hidden; border-radius: 5px; background: radial-gradient(circle at 53% 55%, #d98a39 0 15%, transparent 16%), linear-gradient(140deg, #6f4b2c, #c77835 49%, #262019); }.featured-place-photo span { position: absolute; top: 6px; right: 6px; padding: 4px 6px; border-radius: 999px; background: #fffdfa; color: #6b462c; font-size: 8px; font-weight: 700; }.featured-place-photo small { position: absolute; bottom: 8px; left: 8px; color: #fff; font-family: var(--serif); font-size: 18px; }.featured-close { position: absolute; top: 5px; right: 7px; border: 0; background: transparent; font-size: 20px; }.place-kicker { color: #69615a; font-size: 8px; }.featured-place-card h3 { margin: 4px 0 7px; font-family: var(--sans); font-size: 13px; font-weight: 700; }.featured-place-card p { margin: 0 0 9px; color: #635b54; font-size: 9px; line-height: 1.35; }.featured-place-card strong, .featured-place-card > small { display: block; font-size: 9px; }.featured-place-card > small { margin-top: 3px; color: #625c56; }.featured-hours { margin: 10px 0; padding-top: 7px; border-top: 1px solid #eee7dd; color: #5c554d; font-size: 9px; }.featured-hours em { color: #8d837b; font-size: 8px; }.featured-direction, .save-place { display: block; width: 100%; padding: 8px; border: 0; border-radius: 4px; text-align: center; font-size: 9px; font-weight: 700; }.featured-direction { background: #70462b; color: #fffdfa; }.save-place { margin-top: 5px; background: #f1efeb; color: #624a38; }
.picks-mockup { padding-bottom: 30px; }.pick-card-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 7px; }.mockup-pick-photo { position: relative; min-height: 87px; overflow: hidden; background: #bd9a68; }.mockup-pick-photo:before { opacity: .8; background: linear-gradient(135deg, #654632, #d18a47 50%, #263b2c); }.mockup-pick-photo.has-photo:before { display: none; }.pick-photo-cafe:before { background: linear-gradient(135deg, #1e3d2e, #bb7246); }.pick-photo-khaosoi:before { background: radial-gradient(circle at 50% 54%, #d88631 0 23%, #704124 24% 38%, transparent 39%), linear-gradient(135deg, #8e542a, #eac47b); }.pick-photo-gate:before { background: linear-gradient(180deg, #cf8a48 0 35%, #79482f 36% 69%, #4e361e 70%); }.pick-photo-market:before { background: repeating-linear-gradient(90deg, #874b37 0 12%, #e0a56a 13% 24%, #5f3e31 25% 36%); }.pick-photo-temple:before { background: linear-gradient(160deg, #7d6a43, #b37a35 50%, #483526); }.pick-photo-food:before { background: radial-gradient(circle at 50% 50%, #d5782f 0 26%, #61432c 27% 40%, transparent 41%), linear-gradient(135deg, #e5b576, #5e3828); }.pick-star { position: absolute; z-index: 2; top: 5px; right: 5px; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: #fffdfa; color: #e3942c; font-size: 11px; }.mockup-pick-card h3 { margin: 6px 8px 2px; font-family: var(--sans); font-size: 10px; font-weight: 700; }.mockup-pick-card p { margin: 0 8px 9px; color: #736c65; font-size: 8px; white-space: nowrap; }.mockup-pick-card p span { color: #705032; }.pick-card-details { display: block; margin: 0 8px 9px; color: var(--terracotta-dark); font-size: 8px; font-weight: 700; }.pick-social-link { display: inline-block; margin: 0 8px 9px; color: #705032; font-size: 8px; text-decoration: none; }
.mockup-bottom-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr; min-height: 190px; background: #f6f0e7; }.bottom-story-photo { position: relative; overflow: hidden; min-height: 190px; background: linear-gradient(135deg, #4c2e22, #c27a3b 48%, #352820); }.bottom-story-photo:before { background: repeating-linear-gradient(90deg, transparent 0 15%, rgba(255,213,135,.34) 16% 18%, transparent 19% 32%), linear-gradient(160deg, rgba(20,25,18,.38), transparent 42%, rgba(24,17,12,.5)); }.bottom-story-photo .hero-wall-copy { top: 58px; right: 15%; color: #fff; }.guest-quote, .bottom-cta { position: relative; padding: 28px 26px; border-left: 1px solid #e6ded4; }.guest-quote h3 { margin: 0 0 18px; font-family: var(--sans); font-size: 16px; }.guest-quote p { max-width: 255px; margin-bottom: 6px; font-size: 11px; }.guest-quote > strong { color: #e6942f; letter-spacing: .17em; font-size: 12px; }.guest-quote small { display: block; margin-top: 3px; color: #706861; font-size: 9px; }.quote-dots { margin-top: 22px; color: #8c8278; text-align: center; font-size: 11px; }.bottom-cta { background: #faf7f0; }.cta-script { font-size: 28px; line-height: .95; }.bottom-cta p { font-size: 10px; }.bottom-cta .mockup-dark-button { margin-top: 9px; }.cta-doodle { position: absolute; right: 8%; bottom: 10px; color: #7b8760; font-size: 52px; transform: rotate(20deg); }
.mockup-footer { display: flex; align-items: center; gap: 33px; min-height: 82px; padding: 15px 4%; background: #fffdfa; color: #4a4039; }.mockup-footer .footer-brand { display: flex; align-items: center; gap: 16px; }.mockup-footer .mockup-logo { width: 81px; height: auto; padding: 7px 0; background: transparent; box-shadow: none; }.mockup-footer .mockup-logo strong { font-size: 17px; }.mockup-footer .mockup-logo span { font-size: 7px; }.mockup-footer .mockup-logo small { font-size: 5px; }.mockup-footer .footer-brand p { margin: 0; padding-left: 16px; border-left: 1px solid #d9d1c9; font-family: 'Caveat', 'Mali', var(--serif); font-size: 14px; }.mockup-footer .footer-links { margin-left: auto; font-size: 10px; }.mockup-footer .footer-links a { margin: 0 5px; }.mockup-footer .footer-links i { color: #c7bfb7; font-style: normal; }.footer-social { display: flex; gap: 12px; font-size: 18px; }.mockup-footer .footer-note { align-self: auto; margin-left: auto; color: #857e76; font-size: 9px; text-align: right; white-space: nowrap; }
.mockup-map-pin[hidden] { display: none; }

.suneta-picks-page { background: var(--paper); }.suneta-picks-hero { display: grid; grid-template-columns: 1.15fr .85fr; gap: 60px; align-items: end; padding-top: 64px; padding-bottom: 48px; }.suneta-picks-hero h1 { max-width: 760px; margin: 13px 0 0; font-family: var(--serif); font-size: clamp(58px, 8vw, 104px); font-weight: 500; letter-spacing: -.07em; line-height: .9; }.suneta-picks-hero-side { max-width: 430px; padding-bottom: 4px; }.suneta-picks-hero-side p { margin: 0; color: var(--muted); font-size: 16px; line-height: 1.5; }.suneta-picks-hero-count { display: flex; align-items: baseline; gap: 12px; margin-top: 24px; padding-top: 14px; border-top: 1px solid var(--line); }.suneta-picks-hero-count strong { color: var(--terracotta-dark); font-family: var(--serif); font-size: 42px; font-weight: 500; line-height: 1; }.suneta-picks-hero-count span { color: var(--muted); font-size: 10px; line-height: 1.3; text-transform: uppercase; letter-spacing: .1em; }.suneta-picks-library { padding-top: 0; }.suneta-picks-library-heading { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 22px; padding-top: 24px; border-top: 1px solid var(--line); }.suneta-picks-library-heading h2 { margin: 7px 0 0; font-family: var(--serif); font-size: 35px; font-weight: 500; letter-spacing: -.05em; }.suneta-picks-library-note { color: var(--muted); font-size: 11px; }.suneta-picks-filter { margin-bottom: 27px; }.suneta-picks-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; }.suneta-pick-page-card { display: block; min-width: 0; transition: transform .2s ease, box-shadow .2s ease; }.suneta-pick-page-card:hover { transform: translateY(-4px); box-shadow: 0 14px 28px rgba(58,43,30,.1); }.suneta-pick-page-card .mockup-pick-photo { min-height: 230px; background-size: cover; background-position: center; }.suneta-pick-page-card-copy { padding: 19px 20px 21px; }.suneta-pick-page-card-copy .eyebrow { color: var(--terracotta-dark); }.suneta-pick-page-card-copy h2 { margin: 9px 0 9px; font-family: var(--serif); font-size: 31px; font-weight: 500; letter-spacing: -.05em; line-height: .98; }.suneta-pick-page-card-copy p { min-height: 54px; margin: 0 0 17px; color: var(--muted); font-size: 13px; line-height: 1.45; }.suneta-pick-page-meta { display: block; color: var(--muted); font-size: 11px; }.suneta-pick-page-link { display: inline-block; margin-top: 16px; color: var(--terracotta-dark); font-size: 11px; font-weight: 700; }.suneta-picks-page .empty-state { padding: 35px 0; border-top: 1px solid var(--line); color: var(--muted); }.suneta-picks-page .empty-state strong { color: var(--ink); }
@media (max-width: 900px) { .suneta-picks-hero { grid-template-columns: 1fr 1fr; gap: 28px; }.suneta-picks-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .suneta-picks-hero { display: block; padding-top: 48px; padding-bottom: 32px; }.suneta-picks-hero h1 { font-size: 64px; }.suneta-picks-hero-side { margin-top: 25px; }.suneta-picks-hero-side p { font-size: 15px; }.suneta-picks-library-heading { display: block; }.suneta-picks-library-note { display: block; margin-top: 9px; }.suneta-picks-grid { grid-template-columns: 1fr; }.suneta-pick-page-card .mockup-pick-photo { min-height: 205px; } }

/* Use the clean illustrated mural artwork; the supplied wall photo is the visual reference only. */
.map-canvas, .mockup-map-canvas, .mini-map {
    aspect-ratio: 1 / 1;
    background-image: url('../images/suneta-chiangmai-map-v4.png?v=20260925-map-v4') !important;
    background-size: 100% 100% !important;
    background-repeat: no-repeat;
    background-position: center;
}
.map-canvas, .mockup-map-canvas, .mini-map { min-height: 0 !important; }

/* Small interactive pins sit above the artwork; place photos stay in the popup. */
.map-pin, .mockup-map-pin {
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    min-width: 22px;
    min-height: 22px;
    padding: 0;
    border: 2px solid #fff !important;
    border-radius: 50% 50% 50% 0;
    background: #70462b !important;
    color: #fff !important;
    box-shadow: 0 2px 6px rgba(43, 32, 22, .28) !important;
    opacity: 1;
    cursor: pointer;
    transform: translate(-50%, -100%) rotate(-45deg) !important;
}
.map-pin .pin-dot, .mockup-map-pin span { display: block; width: 6px; height: 6px; border-radius: 50%; background: #fff; transform: rotate(45deg); }
.map-pin .pin-label, .mockup-map-pin small { display: none; }
.map-pins-disabled .map-pin, .map-pins-disabled .mockup-map-pin { display: grid !important; width: 44px; height: 44px; min-width: 44px; min-height: 44px; padding: 0; border: 0 !important; border-radius: 50%; background: transparent !important; box-shadow: none !important; opacity: 0; pointer-events: auto; transform: translate(-50%, -50%) !important; }
.map-pins-disabled .map-pin .pin-dot, .map-pins-disabled .map-pin .pin-label, .map-pins-disabled .mockup-map-pin span, .map-pins-disabled .mockup-map-pin small { display: none; }
.map-pin:nth-of-type(3n), .mockup-map-pin:nth-of-type(3n) { background: #9d6a4a !important; }
.map-pin:nth-of-type(4n), .mockup-map-pin:nth-of-type(4n) { background: #a04f91 !important; }
.map-pin:focus-visible, .mockup-map-pin:focus-visible { outline: 2px solid var(--paper); outline-offset: 3px; }

@media (max-width: 900px) {
    .mockup-header { padding-inline: 20px; }.mockup-header .site-nav { gap: 11px; }.benefit-bar { padding-inline: 4%; }.mockup-section, .map-heading { width: min(100% - 28px, 1200px); }.room-card-grid { grid-template-columns: repeat(2, 1fr); }.pick-card-grid { grid-template-columns: repeat(3, 1fr); }.featured-place-card { right: 15px; }.mockup-bottom-grid { grid-template-columns: 1fr 1fr; }.bottom-story-photo { display: none; }.bottom-cta { grid-column: 1 / -1; }.mockup-footer { flex-wrap: wrap; }.mockup-footer .footer-note { margin-left: auto; }
}
@media (max-width: 640px) {
    .mockup-header { min-height: 62px; }.mockup-logo { height: 62px; }.mockup-header .site-nav { top: 62px; gap: 13px; }.mockup-header .site-nav select { width: 100%; }.mockup-header .nav-cta { text-align: center; }.mockup-hero-photo { min-height: 420px; }.hero-script { top: 55px; left: 7%; font-size: 53px; }.hero-copy-small { top: 186px; left: 7%; }.mockup-light-button { top: 252px; left: 7%; }.hero-wall-copy { top: 72px; right: 10%; font-size: 24px; }.hero-side-copy { display: none; }.benefit-bar { grid-template-columns: 1fr 1fr; gap: 12px 0; padding: 15px 5%; }.benefit-bar > div { padding-left: 9px; border-right: 0; }.benefit-bar > div:first-child { padding-left: 9px; }.stay-policies { display: block; padding: 22px 5%; }.stay-policies-heading h2 { font-size: 24px; }.stay-policy-list { margin-top: 18px; }.stay-policy { flex: 1; min-width: 0; padding: 0 15px; }.stay-policy:first-child { padding-left: 0; border-left: 0; }.stay-policy strong { font-size: 21px; }.mockup-section-heading { display: block; }.mockup-section-heading > div { display: block; }.mockup-section-heading h2 { font-size: 39px; }.mockup-section-heading p { margin-top: 4px; }.mockup-section-heading > a { display: inline-block; margin-top: 9px; }.room-card-grid { grid-template-columns: 1fr 1fr; gap: 7px; }.mockup-room-photo { min-height: 88px; }.mockup-room-content { padding: 7px 7px 9px; }.mockup-room-content h3 { font-size: 10px; }.mockup-room-content p { font-size: 8px; }.mockup-room-content > a { display: none; }.map-heading h2 { font-size: 40px; }.map-filter-row { margin-top: 15px; overflow-x: auto; padding-bottom: 5px; }.mockup-filter { white-space: nowrap; }.mockup-map-canvas { min-height: 535px; }.featured-place-card { position: absolute; right: 12px; bottom: 12px; top: auto; width: calc(100% - 24px); }.map-old-city-label { left: 25%; }.map-data-note { display: none; }.pick-card-grid { grid-template-columns: repeat(2, 1fr); }.mockup-pick-photo { min-height: 105px; }.mockup-bottom-grid { grid-template-columns: 1fr; }.guest-quote, .bottom-cta { border-left: 0; border-top: 1px solid #e6ded4; }.mockup-footer { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; }.mockup-footer .footer-brand { grid-column: 1 / -1; }.mockup-footer .footer-links { margin-left: 0; }.mockup-footer .footer-note { margin-left: 0; text-align: left; }
}
/* Artwork Preview: draggable hotspot position is separate from real GPS. */
.location-preview-inline .large-mini-map {
    background-image: url('../images/suneta-chiangmai-map-v4.png?v=20260925-map-v4');
    background-size: cover;
    background-position: center;
}
.form-preview-pin {
    display: block;
    width: 24px;
    height: 24px;
    padding: 0;
    border: 3px solid var(--paper);
    border-radius: 50% 50% 50% 0;
    background: var(--terracotta);
    box-shadow: 0 2px 0 rgba(43,42,36,.2), 0 0 0 5px rgba(189,101,73,.18);
    cursor: grab;
    transform: translate(-50%, -50%) rotate(-45deg);
    touch-action: none;
    transition: box-shadow .15s, transform .15s;
}
.form-preview-pin:hover,
.form-preview-pin:focus-visible,
.form-preview-pin.is-dragging {
    outline: none;
    box-shadow: 0 2px 0 rgba(43,42,36,.2), 0 0 0 8px rgba(189,101,73,.22);
}

.artwork-preview-popup { position: absolute; z-index: 5; right: 12px; bottom: 12px; width: min(225px, calc(100% - 24px)); padding: 13px 34px 12px 14px; border: 1px solid rgba(112,70,43,.18); border-radius: 10px; background: rgba(255,253,248,.97); box-shadow: 0 10px 25px rgba(43,32,22,.2); }
.artwork-preview-popup strong, .artwork-preview-popup small { display: block; }
.artwork-preview-popup strong { color: var(--ink); font-size: 12px; }
.artwork-preview-popup small { margin-top: 3px; color: var(--muted); font-size: 10px; }
.artwork-preview-popup a { display: inline-block; margin-top: 8px; color: var(--terracotta-dark); font-size: 10px; font-weight: 700; }
.artwork-preview-popup-close { position: absolute; top: 5px; right: 7px; border: 0; background: transparent; color: var(--muted); font-size: 18px; line-height: 1; }

.artwork-preview-column { min-width: 0; }
.artwork-preview-hint { display: block; margin-top: 8px; color: var(--muted); font-size: 10px; }
.artwork-preview-expand { position: absolute; z-index: 6; top: 12px; right: 12px; padding: 7px 10px; border: 1px solid rgba(112,70,43,.16); border-radius: 999px; background: rgba(255,253,248,.94); color: var(--terracotta-dark); font-size: 10px; font-weight: 700; box-shadow: 0 3px 10px rgba(43,32,22,.12); }
.artwork-preview-expand:hover, .artwork-preview-expand:focus-visible { background: var(--terracotta-dark); color: var(--paper); }
.large-mini-map.is-expanded { position: fixed; z-index: 100; inset: clamp(12px, 4vw, 48px); width: auto; height: auto; min-height: 0; aspect-ratio: auto; border-radius: 18px; background-size: 100% 100% !important; box-shadow: 0 0 0 999vmax rgba(31,24,18,.68), 0 24px 70px rgba(31,24,18,.35); }
.large-mini-map.is-expanded .mini-map-note { opacity: .55; }
.large-mini-map.is-expanded .artwork-preview-expand { top: 16px; right: 16px; }
body.artwork-preview-open { overflow: hidden; }

@media (max-width: 640px) {
    .map-pins-disabled .map-pin, .map-pins-disabled .mockup-map-pin { width: 64px; height: 64px; min-width: 64px; min-height: 64px; }
    .place-card, .featured-place-card { position: fixed; z-index: 50; right: 10px; bottom: 10px; left: 10px; width: auto; max-height: min(86dvh, 720px); overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; scroll-behavior: smooth; }
    .place-card-image-wrap { height: 110px; margin: 0 -23px 17px; }
    .map-canvas, .mockup-map-canvas { aspect-ratio: 4 / 3; }
    .mobile-sheet-handle { display: block; width: 38px; height: 4px; margin: -7px auto 11px; border-radius: 99px; background: #d6cec3; }
    .place-card.is-open, .featured-place-card.is-open { animation: mobile-sheet-in .2s ease-out both; }
}

.mobile-sheet-handle { display: none; }
@keyframes mobile-sheet-in { from { opacity: .4; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }

/* Content cards use a consistent square crop so room and pick photos stay
   balanced on desktop, tablet, and mobile. */
.mockup-room-photo,
.mockup-pick-photo {
    aspect-ratio: 1 / 1;
    height: auto;
    min-height: 0 !important;
    background-size: cover !important;
    background-position: center !important;
}
.mockup-room-photo:before,
.mockup-pick-photo:before { pointer-events: none; }

/* Rooms CMS */
.room-order-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: -7px 0 18px; padding: 11px 13px; border: 1px solid var(--line); border-radius: 9px; background: rgba(244,239,228,.55); color: var(--muted); font-size: 11px; }
.room-order-toolbar .button { min-height: 34px; padding: 8px 12px; font-size: 10px; white-space: nowrap; }
.room-admin-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.room-admin-card { position: relative; display: grid; grid-template-columns: 17px 92px 1fr auto; gap: 10px; align-items: center; min-width: 0; padding: 10px; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.room-admin-card:hover { border-color: var(--terracotta); }
.room-admin-card.is-dragging { opacity: .55; border-color: var(--terracotta); box-shadow: 0 8px 22px rgba(43,42,36,.12); }
.room-admin-drag-handle { color: var(--muted); cursor: grab; font-size: 18px; line-height: 1; user-select: none; }
.room-admin-card.is-dragging .room-admin-drag-handle { cursor: grabbing; }
.room-admin-photo { position: relative; aspect-ratio: 1 / 1; overflow: hidden; border-radius: 7px; background: linear-gradient(135deg, #80634b, #d2a576); background-position: center; background-size: cover; }
.room-admin-photo span { position: absolute; left: 6px; bottom: 6px; padding: 4px 6px; border-radius: 999px; background: rgba(255,253,248,.92); color: var(--sage-dark); font-size: 8px; font-weight: 700; }
.room-admin-card strong, .room-admin-card small { display: block; }
.room-admin-card strong { font-family: var(--serif); font-size: 17px; font-weight: 500; line-height: 1.05; }
.room-admin-card small { margin-top: 5px; color: var(--muted); font-size: 10px; line-height: 1.35; }
.room-admin-edit { z-index: 1; color: var(--muted); font-size: 10px; font-weight: 700; }
.room-form .publish-panel { position: sticky; top: 20px; }

/* Native booking request pages */
.booking-page { width: min(100% - 7.5%, 1120px); margin: 0 auto; padding: 70px 0 100px; }
.booking-intro { max-width: 720px; margin-bottom: 35px; }
.booking-intro h1 { margin: 10px 0 12px; font-family: var(--serif); font-size: clamp(54px, 8vw, 94px); letter-spacing: -.06em; line-height: .9; }
.booking-intro p { max-width: 570px; color: var(--muted); font-size: 17px; line-height: 1.55; }
.booking-layout { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(260px, .75fr); gap: 14px; align-items: start; }
.booking-form { padding: 30px; }
.booking-form-heading { margin-top: 35px; padding-top: 28px; border-top: 1px solid var(--line); }
.booking-form .button { margin-top: 26px; }
.booking-privacy { display: block; margin-top: 11px; color: var(--muted); font-size: 10px; text-align: center; }
.booking-side { display: grid; gap: 13px; }
.booking-side-card { padding: 28px; border-radius: 12px; background: var(--terracotta-dark); color: var(--paper); }
.booking-side-card h2 { margin: 10px 0; font-family: var(--serif); font-size: 36px; line-height: .95; }
.booking-side-card p { color: rgba(255,253,248,.73); font-size: 12px; line-height: 1.55; }
.booking-side-card .text-link { color: var(--paper); }
.booking-side-note { background: var(--sage); color: var(--ink); }
.booking-side-note p { color: rgba(43,42,36,.68); }
.booking-success { display: flex; gap: 12px; margin-bottom: 25px; padding: 15px; border: 1px solid #b9caae; border-radius: 9px; background: #eaf0e4; color: var(--sage-dark); }
.booking-success > span { display: grid; flex: 0 0 24px; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--sage-dark); color: #fff; }
.booking-success p { margin: 4px 0 0; color: var(--muted); font-size: 12px; }
.booking-status-links { display: flex; flex-wrap: wrap; gap: 5px; justify-content: flex-end; }
.booking-table { border-top: 1px solid var(--line); }
.booking-row { display: grid; grid-template-columns: 1fr auto minmax(260px, .9fr); gap: 18px; align-items: center; padding: 17px 0; border-bottom: 1px solid var(--line); }
.booking-row-main strong, .booking-row-main small, .booking-row-meta small { display: block; }
.booking-row-main strong { font-family: var(--serif); font-size: 19px; font-weight: 500; }
.booking-row-main small, .booking-row-meta small { margin-top: 5px; color: var(--muted); font-size: 10px; }
.booking-row-meta { text-align: right; }
.booking-update-form { display: grid; grid-template-columns: 105px 130px 1fr auto; gap: 6px; }
.booking-update-form input, .booking-update-form select { min-width: 0; padding: 9px 10px; border: 1px solid var(--line); border-radius: 7px; background: var(--white); color: var(--ink); font-size: 10px; }
.booking-update-form .button { min-height: 37px; padding: 8px 12px; font-size: 10px; }

@media (max-width: 900px) {
    .booking-layout { grid-template-columns: 1fr; }
    .booking-side { grid-template-columns: 1fr 1fr; }
    .room-admin-grid { grid-template-columns: 1fr; }
    .booking-row { grid-template-columns: 1fr auto; }
    .booking-update-form { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
    .booking-page { width: min(100% - 28px, 620px); padding: 45px 0 70px; }
    .booking-form { padding: 19px 16px; }
    .booking-intro h1 { font-size: 58px; }
    .booking-intro p { font-size: 14px; }
    .booking-side { grid-template-columns: 1fr; }
    .room-order-toolbar { align-items: flex-start; flex-direction: column; }
    .booking-row { grid-template-columns: 1fr; gap: 10px; }
    .booking-row-meta { text-align: left; }
    .booking-update-form { grid-template-columns: 1fr 1fr; }
    .booking-update-form input, .booking-update-form .button { grid-column: 1 / -1; }
}

/* The artwork stays square; the public map viewport is shorter so it does not
   take over the page on desktop or mobile. */
.map-canvas,
.mockup-map-canvas {
    aspect-ratio: 4 / 3;
    min-height: 0 !important;
    background-size: cover !important;
    background-position: center center;
}
.map-canvas, .mockup-map-canvas { cursor: default; touch-action: pan-y; }
.map-canvas.is-map-zoomed, .mockup-map-canvas.is-map-zoomed { cursor: grab; }
.map-canvas.is-panning, .mockup-map-canvas.is-panning { cursor: grabbing; }
.form-preview-pin.is-dragging {
    cursor: grabbing;
    transform: translate(-50%, -50%) rotate(-45deg) scale(1.12);
}

/* Keep the artwork square so saved percentage positions and public pins stay aligned. */
.mockup-map-wrap, .map-shell-large { width: min(100%, 980px); margin-right: auto; margin-left: auto; }
.map-canvas, .mockup-map-canvas { aspect-ratio: 1 / 1; background-size: 100% 100% !important; background-position: center center; }
.map-canvas, .mockup-map-canvas { min-height: 0 !important; }
@media (max-width: 640px) {
    .mockup-map-wrap, .map-shell-large { width: 100%; }
    .large-mini-map.is-expanded { inset: 8px; border-radius: 12px; }
    .mobile-sheet-handle { display: block; width: 38px; height: 4px; margin: -7px auto 11px; border-radius: 99px; background: #d6cec3; }
}

/* Backward-compatible: older templates may still carry map-pins-disabled. */
.map-pins-disabled .map-pin, .map-pins-disabled .mockup-map-pin { display: grid !important; width: 22px; height: 22px; min-width: 22px; min-height: 22px; border: 2px solid #fff !important; border-radius: 50% 50% 50% 0; background: #70462b !important; box-shadow: 0 2px 6px rgba(43,32,22,.28) !important; opacity: 1 !important; pointer-events: auto; transform: translate(-50%, -100%) rotate(-45deg) !important; }
.map-pins-disabled .map-pin .pin-dot, .map-pins-disabled .mockup-map-pin span { display: block; width: 6px; height: 6px; border-radius: 50%; background: #fff; transform: rotate(45deg); }
.map-pins-disabled .map-pin .pin-label, .map-pins-disabled .mockup-map-pin small { display: none; }

/* Tap empty artwork to open a larger map view; pin taps remain place popups. */
.map-expand-button, .map-collapse-button { position: absolute; z-index: 8; border: 1px solid rgba(112,70,43,.16); background: rgba(255,253,248,.94); color: var(--terracotta-dark); box-shadow: 0 3px 10px rgba(43,32,22,.12); cursor: pointer; }
.map-expand-button { top: 17px; right: 17px; padding: 8px 11px; border-radius: 999px; font-size: 10px; font-weight: 700; }
.map-collapse-button { top: 14px; right: 14px; display: none; width: 37px; height: 37px; border-radius: 50%; font-size: 25px; line-height: 1; }
.map-expand-button:hover, .map-expand-button:focus-visible, .map-collapse-button:hover, .map-collapse-button:focus-visible { background: var(--terracotta-dark); color: var(--paper); }
.map-canvas.is-map-expanded, .mockup-map-canvas.is-map-expanded { position: fixed; z-index: 120; inset: clamp(12px, 4vw, 48px); width: auto; height: auto; min-height: 0; aspect-ratio: auto; border-radius: 18px; background-size: 100% 100% !important; box-shadow: 0 0 0 999vmax rgba(31,24,18,.68), 0 24px 70px rgba(31,24,18,.35); }
.map-canvas.is-map-expanded .map-expand-button, .mockup-map-canvas.is-map-expanded .map-expand-button { display: none; }
.map-canvas.is-map-expanded .map-collapse-button, .mockup-map-canvas.is-map-expanded .map-collapse-button { display: block; }
.map-is-expanded .place-card, .map-is-expanded .featured-place-card { z-index: 130; }
body.public-map-expanded { overflow: hidden; }
.featured-place-card[hidden], .place-card[hidden], .artwork-preview-popup[hidden] { display: none !important; }
.featured-close, .place-close, .artwork-preview-popup-close { z-index: 7; pointer-events: auto; cursor: pointer; }
.map-canvas.is-map-expanded .map-collapse-button, .mockup-map-canvas.is-map-expanded .map-collapse-button { position: fixed; z-index: 150; top: clamp(20px, 5vw, 58px); right: clamp(20px, 5vw, 58px); }
@media (max-width: 640px) {
    .map-canvas.is-map-expanded, .mockup-map-canvas.is-map-expanded { inset: 8px; border-radius: 12px; }
    .map-expand-button { top: 10px; right: 10px; }
    .map-canvas.is-map-expanded .map-collapse-button, .mockup-map-canvas.is-map-expanded .map-collapse-button { top: 16px; right: 16px; }
}

/* Places & Map and Suneta Picks are separate CMS collections. */
.travel-distance-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 13px; margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line); }
.pick-order-form { display: flex; align-items: center; gap: 14px; margin: -7px 0 20px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 9px; background: rgba(244,239,228,.55); color: var(--muted); font-size: 11px; }
.pick-order-label { margin-right: auto; color: var(--ink); font-weight: 700; }
.pick-order-form label { display: inline-flex; gap: 5px; align-items: center; }
.pick-order-form input { accent-color: var(--terracotta-dark); }
.pick-order-form .button { margin: 0; padding: 7px 10px; font-size: 10px; }
.suneta-pick-admin-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.suneta-pick-admin-card { display: grid; grid-template-columns: 82px minmax(0, 1fr); gap: 12px; align-items: center; min-width: 0; padding: 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--white); }
.suneta-pick-admin-card:hover { border-color: var(--terracotta); }
.suneta-pick-admin-photo { position: relative; aspect-ratio: 1 / 1; overflow: hidden; border-radius: 7px; background: linear-gradient(135deg, #80634b, #d2a576); background-position: center; background-size: cover; }
.suneta-pick-admin-photo span { position: absolute; right: 5px; bottom: 5px; left: 5px; padding: 4px; border-radius: 999px; background: rgba(255,253,248,.92); color: var(--sage-dark); font-size: 8px; font-weight: 700; text-align: center; }
.suneta-pick-admin-card strong, .suneta-pick-admin-card small { display: block; }
.suneta-pick-admin-copy { min-width: 0; }
.suneta-pick-admin-card strong { font-family: var(--serif); font-size: 17px; font-weight: 500; }
.suneta-pick-admin-card small { margin-top: 5px; overflow: hidden; color: var(--muted); font-size: 10px; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.suneta-pick-admin-actions { grid-column: 2; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; min-width: 0; margin-top: 1px; }
.pick-admin-edit, .pick-admin-delete { display: inline-flex; align-items: center; justify-content: center; min-height: 30px; padding: 5px 8px; border: 1px solid var(--line); border-radius: 7px; background: transparent; color: var(--muted); font: inherit; font-size: 10px; font-weight: 700; text-decoration: none; cursor: pointer; }
.pick-admin-edit:hover, .pick-admin-edit:focus-visible { border-color: var(--ink); color: var(--ink); }
.pick-admin-delete { border-color: rgba(166, 95, 56, .3); color: var(--terracotta-dark); }
.pick-admin-delete:hover, .pick-admin-delete:focus-visible { border-color: var(--terracotta-dark); background: rgba(166, 95, 56, .08); }
.pick-admin-delete:disabled { opacity: .45; cursor: not-allowed; }
.suneta-pick-admin-actions form { margin: 0; }
@media (max-width: 760px) {
    .travel-distance-grid, .suneta-pick-admin-grid { grid-template-columns: 1fr; }
    .pick-order-form { flex-wrap: wrap; }
    .pick-order-label { width: 100%; margin-right: 0; }
}

/* Keep the artwork square inside a scrollable viewport; never stretch it to the viewport ratio. */
.map-canvas, .mockup-map-canvas { background-image: none !important; }
.map-artwork-layer { position: relative; flex: 0 0 auto; width: 100%; aspect-ratio: 1 / 1; background-color: #e5e4cc; background-image: url('../images/suneta-chiangmai-map-v4.png?v=20260925-map-v4') !important; background-repeat: no-repeat; background-position: center; background-size: 100% 100% !important; }
.map-artwork-layer.is-night { background-image: url('../images/suneta-chiangmai-map-v4-night.png?v=20260926-map-night1') !important; }
.map-atmosphere-layer { position: absolute; z-index: 1; inset: 0; overflow: hidden; pointer-events: none; }
.map-atmosphere-clouds, .map-atmosphere-river, .map-atmosphere-trees { position: absolute; display: block; background-repeat: no-repeat; pointer-events: none; }
.map-atmosphere-clouds { inset: -10%; width: auto; height: auto; background-image: url('../images/suneta-map-clouds-v1.png?v=20260926-map-life1'); background-position: 0 0; background-size: 58% 28%; background-repeat: repeat; opacity: .04; filter: saturate(.78); animation: map-asset-cloud-drift 34s ease-in-out infinite; }
.map-atmosphere-clouds-one { background-position: 0 0; }
.map-atmosphere-clouds-two { inset: -7%; background-position: 32% 18%; background-size: 66% 34%; opacity: .025; animation-duration: 43s; animation-delay: -19s; }
.map-atmosphere-river { top: 0; right: -13%; width: 39%; height: 100%; background-image: url('../images/suneta-map-river-glints-v1.png?v=20260926-map-life1'); background-position: 50% 51%; background-size: auto 112%; opacity: .15; mix-blend-mode: multiply; animation: map-asset-river-glimmer 8s ease-in-out infinite; }
.map-atmosphere-trees { bottom: -10%; left: -9%; width: 53%; height: 48%; background-image: url('../images/suneta-map-trees-v1.png?v=20260926-map-life1'); background-position: center; background-size: auto 100%; opacity: .10; filter: saturate(.72); transform-origin: center bottom; animation: map-asset-tree-sway 6.5s ease-in-out infinite; }
.map-atmosphere-trees-two { top: 37%; right: -13%; bottom: auto; left: auto; width: 43%; height: 36%; opacity: .08; animation-duration: 7.8s; animation-delay: -2.4s; }
@keyframes map-asset-cloud-drift { 0%, 100% { transform: translate3d(-2%, 0, 0); } 50% { transform: translate3d(5%, 1.5%, 0); } }
@keyframes map-asset-river-glimmer { 0%, 100% { transform: translateX(-1%); opacity: .09; } 50% { transform: translateX(2%); opacity: .22; } }
@keyframes map-asset-tree-sway { 0%, 100% { transform: rotate(-.7deg); } 50% { transform: rotate(.7deg); } }
.map-weather-bar { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 12px; padding: 12px 15px; border: 1px solid #e2d9cd; border-radius: 12px; background: rgba(255,253,248,.9); box-shadow: 0 6px 20px rgba(62,48,34,.06); }
.map-weather-copy { min-width: 0; }
.map-weather-copy .eyebrow { display: block; margin-bottom: 4px; color: #a15b35; font-size: 9px; }
.map-weather-copy strong, .map-weather-copy small { display: block; }
.map-weather-copy strong { color: var(--ink); font-size: 14px; }
.map-weather-copy small { margin-top: 3px; color: var(--muted); font-size: 10px; }
.map-weather-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.map-weather-mode { display: inline-flex; padding: 3px; border-radius: 999px; background: #eee7dc; }
.map-weather-mode button { min-height: 29px; padding: 6px 11px; border: 0; border-radius: 999px; background: transparent; color: var(--muted); font-size: 10px; font-weight: 700; cursor: pointer; }
.map-weather-mode button.is-active { background: var(--terracotta-dark); color: #fffdfa; }
.map-weather-select { display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px 4px 10px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); font-size: 10px; font-weight: 700; }
.map-weather-select select { border: 0; outline: 0; background: transparent; color: var(--ink); font: inherit; cursor: pointer; }
.map-weather-effects { position: absolute; z-index: 1; inset: 0; overflow: hidden; pointer-events: none; }
.map-night-overlay, .map-night-lights, .map-night-moon { position: absolute; pointer-events: none; opacity: 0; transition: opacity 1.2s ease; }
.map-night-overlay { inset: 0; background: linear-gradient(180deg, rgba(18,29,59,.45), rgba(25,35,65,.2) 54%, rgba(13,22,48,.38)); mix-blend-mode: multiply; }
.map-night-lights { inset: 0; background: radial-gradient(circle at 14% 30%, rgba(255,198,112,.8) 0 1.1%, rgba(255,179,93,.22) 1.6%, transparent 3.8%), radial-gradient(circle at 28% 48%, rgba(255,205,126,.72) 0 .9%, rgba(255,185,99,.18) 1.5%, transparent 3.4%), radial-gradient(circle at 44% 24%, rgba(255,217,147,.72) 0 .8%, rgba(255,180,94,.16) 1.4%, transparent 3.2%), radial-gradient(circle at 62% 61%, rgba(255,194,112,.78) 0 1%, rgba(255,169,87,.18) 1.6%, transparent 3.8%), radial-gradient(circle at 78% 39%, rgba(255,216,143,.74) 0 .9%, rgba(255,180,94,.18) 1.6%, transparent 3.5%), radial-gradient(circle at 87% 73%, rgba(255,194,111,.68) 0 .8%, rgba(255,174,91,.15) 1.4%, transparent 3.2%); filter: blur(.15px); animation: map-night-light-flicker 5.8s ease-in-out infinite; }
.map-night-moon { top: 7%; right: 10%; width: 9%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 36% 34%, #fff8d6 0 20%, #f4e4a7 48%, rgba(245,223,153,.2) 72%, transparent 73%); box-shadow: 0 0 28px rgba(255,232,164,.34); }
.map-weather-overcast { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(78,92,96,.2), rgba(92,101,96,.05) 52%, rgba(255,255,255,.04)); opacity: 0; transition: opacity .8s ease; }
.map-weather-sun { position: absolute; top: -16%; right: -9%; width: 48%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(255,241,177,.62) 0, rgba(255,241,177,.2) 32%, transparent 70%); opacity: 0; transition: opacity .8s ease; }
.map-weather-rain-image { position: absolute; inset: -12%; background-image: url('../images/suneta-map-rain-v1.png?v=20260926-map-rain1'); background-position: center; background-size: cover; opacity: 0; mix-blend-mode: multiply; transform: rotate(1deg) scale(1.08); animation: map-weather-rain-image-fall 1.35s linear infinite; transition: opacity .5s ease; }
.map-weather-rain { position: absolute; inset: -25%; background-image: repeating-linear-gradient(105deg, transparent 0 13px, rgba(255,255,255,.5) 14px, transparent 15px 27px); background-size: 30px 30px; opacity: 0; transform: rotate(4deg); animation: map-weather-rain-fall .7s linear infinite; transition: opacity .5s ease; }
.map-weather-fog { position: absolute; inset: -12%; background: linear-gradient(105deg, rgba(238,241,232,.26), rgba(255,255,255,.08) 36%, rgba(222,229,222,.24) 67%, rgba(255,255,255,.1)), radial-gradient(ellipse at 18% 28%, rgba(255,255,255,.38), transparent 42%), radial-gradient(ellipse at 76% 65%, rgba(255,255,255,.34), transparent 48%); opacity: 0; filter: blur(10px); animation: map-weather-fog-drift 18s ease-in-out infinite; transition: opacity .8s ease; }
.map-artwork-layer.weather-clear .map-weather-sun { opacity: .55; }
.map-artwork-layer.weather-partly-cloudy .map-weather-sun { opacity: .3; }
.map-artwork-layer.weather-cloudy .map-weather-sun { opacity: .12; }
.map-artwork-layer.weather-partly-cloudy .map-atmosphere-clouds { opacity: .12; }
.map-artwork-layer.weather-cloudy .map-atmosphere-clouds { opacity: .25; }
.map-artwork-layer.weather-rain .map-atmosphere-clouds, .map-artwork-layer.weather-storm .map-atmosphere-clouds { opacity: .34; }
.map-artwork-layer.weather-fog .map-atmosphere-clouds { opacity: .16; }
.map-artwork-layer.weather-cloudy .map-weather-overcast { opacity: .12; }
.map-artwork-layer.weather-rain .map-weather-overcast { opacity: .24; }
.map-artwork-layer.weather-storm .map-weather-overcast { opacity: .34; }
.map-artwork-layer.weather-fog .map-weather-overcast { opacity: .2; }
.map-artwork-layer.weather-rain .map-weather-rain, .map-artwork-layer.weather-storm .map-weather-rain { opacity: .42; }
.map-artwork-layer.weather-rain .map-weather-rain-image { opacity: .2; }
.map-artwork-layer.weather-storm .map-weather-rain-image { opacity: .3; }
.map-artwork-layer.weather-fog .map-weather-fog { opacity: .38; }
.map-artwork-layer.weather-rain .map-weather-fog { opacity: .18; }
.map-artwork-layer.weather-storm .map-weather-fog { opacity: .3; }
.map-artwork-layer.is-night .map-night-overlay { opacity: .22; }
.map-artwork-layer.is-night .map-night-lights { opacity: .18; }
.map-artwork-layer.is-night .map-night-moon { opacity: .9; }
.map-artwork-layer.is-night .map-weather-sun { opacity: 0; }
@keyframes map-weather-rain-fall { from { background-position: 0 0; } to { background-position: -30px 30px; } }
@keyframes map-weather-rain-image-fall { from { background-position: 0 0; } to { background-position: -4% 7%; } }
@keyframes map-weather-fog-drift { 0%, 100% { transform: translateX(-2%) scale(1); } 50% { transform: translateX(2%) scale(1.04); } }
@keyframes map-night-light-flicker { 0%, 100% { transform: translateX(0); opacity: .84; } 48% { transform: translateX(.25%); opacity: .7; } 52% { transform: translateX(-.2%); opacity: .9; } }
@media (max-width: 640px) {
    .map-weather-bar { align-items: flex-start; flex-direction: column; gap: 10px; }
    .map-weather-actions { width: 100%; justify-content: space-between; }
    .map-weather-mode button { padding-inline: 9px; }
}
@media (prefers-reduced-motion: reduce) {
    .map-atmosphere-layer *, .map-night-lights, .map-weather-rain-image, .map-weather-rain, .map-weather-fog { animation: none !important; }
}
.map-canvas.is-map-expanded, .mockup-map-canvas.is-map-expanded { display: block; overflow: auto; overscroll-behavior: contain; touch-action: none; }
.map-canvas.is-map-expanded .map-artwork-layer, .mockup-map-canvas.is-map-expanded .map-artwork-layer { min-width: 720px; min-height: 720px; }

/* Current Cloudbeds room cards: keep the nearby Isara Place building clear without showing rates. */
.mockup-room-content { min-height: 132px; padding-bottom: 32px; }
.mockup-room-content p { line-height: 1.35; }
.room-building-label { display: inline-block; margin-bottom: 5px; color: #8b5b3b; font-size: 8px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.room-price { display: block; margin: 0 0 6px; color: var(--terracotta-dark); font-size: 11px; font-weight: 700; letter-spacing: .02em; }
.room-note { display: block; max-width: 88%; margin-top: 6px; color: #8a8178; font-size: 8px; line-height: 1.35; }
@media (max-width: 640px) {
    .mockup-room-content { min-height: 124px; padding: 7px 7px 28px; }
    .room-building-label { font-size: 7px; }
    .room-note { font-size: 7px; }
}

/* Room cards open a detail page first; every room image uses a true square crop. */
.mockup-room-card { position: relative; }
.room-card-detail-link { display: block; color: inherit; text-decoration: none; }
.room-card-detail-link:hover h3 { color: var(--terracotta-dark); }
.mockup-room-photo { width: 100%; height: auto !important; min-height: 0 !important; aspect-ratio: 1 / 1 !important; background-size: cover; background-position: center; }
.room-card-book-link { position: absolute; right: 11px; bottom: 15px; z-index: 2; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: #f0efed; color: var(--ink); font-size: 18px; text-decoration: none; }
.room-card-book-link:hover { background: var(--terracotta-dark); color: var(--paper); }

/* Public room detail */
.room-detail-page { width: min(100% - 7.5%, 1120px); margin: 0 auto; padding: 52px 0 100px; }
.room-detail-breadcrumb { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 24px; color: var(--muted); font-size: 11px; }
.room-detail-breadcrumb a { color: var(--terracotta-dark); text-decoration: none; }
.room-detail-layout { display: grid; grid-template-columns: minmax(0, 1.03fr) minmax(320px, .97fr); gap: clamp(28px, 6vw, 78px); align-items: start; }
.room-detail-media { width: 100%; }
.room-gallery-panel .form-intro { max-width: 620px; margin: -4px 0 18px; color: var(--muted); font-size: 12px; line-height: 1.5; }
.room-gallery-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 11px; }
.room-gallery-item { position: relative; min-width: 0; padding: 7px; border: 1px solid var(--line); border-radius: 10px; background: var(--white); cursor: grab; transition: border-color .15s, box-shadow .15s, opacity .15s; }
.room-gallery-item:hover, .room-gallery-item.is-primary { border-color: var(--terracotta); box-shadow: 0 5px 15px rgba(43,32,22,.08); }
.room-gallery-item.is-dragging { opacity: .48; }
.room-gallery-item img { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 7px; background: #eee8dc; }
.room-gallery-drag-handle { position: absolute; z-index: 1; top: 11px; left: 11px; display: grid; place-items: center; width: 25px; height: 25px; border-radius: 50%; background: rgba(255,253,248,.93); color: var(--terracotta-dark); font-size: 17px; line-height: 1; }
.room-gallery-item-footer { display: flex; gap: 7px; align-items: center; justify-content: space-between; padding: 8px 2px 1px; color: var(--muted); font-size: 9px; }
.room-gallery-item.is-primary .room-gallery-item-footer span { color: var(--terracotta-dark); font-weight: 700; }
.room-gallery-remove { padding: 0; border: 0; background: transparent; color: var(--terracotta-dark); font-size: 9px; cursor: pointer; }
.room-gallery-remove:hover { text-decoration: underline; }
.room-gallery-empty { grid-column: 1 / -1; padding: 22px; border: 1px dashed var(--line); border-radius: 9px; color: var(--muted); font-size: 11px; text-align: center; }
.room-gallery-add { margin-top: 17px; padding-top: 17px; border-top: 1px solid var(--line); }
.room-detail-stage { position: relative; }
.room-gallery-nav { position: absolute; z-index: 2; top: 50%; display: grid; place-items: center; width: 39px; height: 39px; border: 1px solid rgba(255,253,248,.8); border-radius: 50%; background: rgba(43,42,36,.62); color: var(--paper); font-size: 27px; line-height: 1; cursor: pointer; opacity: 0; transform: translateY(-50%); transition: opacity .15s, background .15s; }
.room-detail-stage:hover .room-gallery-nav, .room-gallery-nav:focus-visible { opacity: 1; }
.room-gallery-nav:hover { background: var(--terracotta-dark); }
.room-gallery-prev { left: 14px; }
.room-gallery-next { right: 14px; }
.room-gallery-thumbs { display: flex; gap: 8px; overflow-x: auto; margin-top: 10px; padding: 2px 1px 4px; }
.room-gallery-thumb { flex: 0 0 72px; padding: 0; border: 2px solid transparent; border-radius: 8px; background: transparent; cursor: pointer; opacity: .7; }
.room-gallery-thumb.is-active, .room-gallery-thumb:hover, .room-gallery-thumb:focus-visible { border-color: var(--terracotta-dark); opacity: 1; }
.room-gallery-thumb img { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 6px; }
.room-detail-photo { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 12px; background: #d6c2a8; }
.room-detail-photo-placeholder { display: grid; place-items: center; color: rgba(43,42,36,.6); font-family: var(--serif); font-size: 30px; }
.room-detail-copy { padding-top: 18px; }
.room-detail-copy h1 { max-width: 620px; margin: 10px 0 16px; font-family: var(--serif); font-size: clamp(48px, 6vw, 82px); font-weight: 500; letter-spacing: -.06em; line-height: .92; }
.room-detail-lede { max-width: 560px; margin: 0 0 20px; color: var(--muted); font-size: 17px; line-height: 1.5; }
.room-detail-facts { display: flex; flex-wrap: wrap; gap: 9px; margin: 0 0 25px; }
.room-detail-facts span { padding: 9px 12px; border: 1px solid var(--line); border-radius: 999px; color: var(--ink); font-size: 11px; }
.room-detail-price { margin: 7px 0 12px; color: var(--terracotta-dark); font-size: 17px; font-weight: 700; }
.room-detail-note { margin: 0 0 22px; padding: 16px 18px; border-radius: 10px; background: #e9eee3; color: var(--sage-dark); }
.room-detail-note p { margin: 5px 0 0; color: rgba(43,42,36,.7); font-size: 12px; line-height: 1.5; }
.room-detail-description { max-width: 570px; color: var(--muted); font-size: 14px; line-height: 1.7; }
.room-detail-amenities { margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--line); }
.room-detail-amenities h2 { margin: 0 0 13px; font-family: var(--serif); font-size: 29px; font-weight: 500; }
.room-detail-amenities ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px 20px; margin: 0; padding: 0; list-style: none; color: var(--muted); font-size: 12px; }
.room-detail-amenities li::before { content: '✦'; margin-right: 8px; color: var(--terracotta-dark); }
.room-detail-actions { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 32px; }
.room-detail-actions .button { min-height: 48px; }
.room-detail-disclaimer { display: block; max-width: 440px; margin-top: 15px; color: var(--muted); font-size: 10px; line-height: 1.5; }

/* Booking payment choice and post-request instructions. */
.payment-options { display: grid; gap: 9px; margin-top: 3px; }
.payment-option { display: flex; gap: 12px; align-items: flex-start; padding: 14px; border: 1px solid var(--line); border-radius: 9px; background: var(--white); cursor: pointer; }
.payment-option.is-selected { border-color: var(--terracotta-dark); box-shadow: inset 0 0 0 1px var(--terracotta-dark); }
.payment-option.is-disabled { opacity: .62; cursor: not-allowed; }
.payment-option input { flex: 0 0 auto; margin-top: 3px; accent-color: var(--terracotta-dark); }
.payment-option strong, .payment-option small { display: block; }
.payment-option strong { font-size: 12px; }
.payment-option small { margin-top: 4px; color: var(--muted); font-size: 10px; line-height: 1.45; }
.payment-instructions { margin-top: 12px; padding: 13px 14px; border: 1px solid #b9caae; border-radius: 8px; background: rgba(255,255,255,.56); color: var(--sage-dark); }
.payment-instructions strong, .payment-instructions p { display: block; }
.payment-instructions p { margin: 4px 0 0; color: var(--muted); font-size: 11px; line-height: 1.45; }
.payment-instructions img { display: block; width: 150px; height: 150px; margin: 12px 0 3px; object-fit: contain; border-radius: 5px; background: #fff; }

/* Site content manager */
.admin-page-heading { margin: 5px 0 7px; font-family: var(--serif); font-size: 42px; font-weight: 500; letter-spacing: -.05em; }
.site-settings-form { display: grid; gap: 13px; max-width: 930px; }
.site-settings-form .admin-lede { margin: -8px 0 20px; }
.settings-cover-preview { display: grid; place-items: center; min-height: 220px; margin-bottom: 20px; overflow: hidden; border: 1px dashed #c7beaf; border-radius: 10px; background: linear-gradient(135deg, #77654d, #bd7950 55%, #3f4939); color: rgba(255,253,248,.8); font-size: 11px; }
.settings-cover-preview.has-image { display: block; }
.settings-cover-preview img { display: block; width: 100%; height: 220px; object-fit: cover; }
.check-field { display: flex; gap: 8px; align-items: center; color: var(--muted); font-size: 11px; }
.check-field input { width: auto; accent-color: var(--terracotta-dark); }
.settings-actions { display: flex; justify-content: flex-end; }
.settings-actions .button { min-width: 220px; }
.website-translations-page { max-width: 1050px; }
.website-translations-form { display: grid; gap: 14px; }
.translation-editor-toolbar { display: grid; grid-template-columns: minmax(220px, 1fr) auto; gap: 16px; align-items: end; margin: 10px 0 0; }
.translation-editor-toolbar .field { max-width: 520px; }
.translation-editor-count { padding: 11px 0; color: var(--muted); font-size: 12px; white-space: nowrap; }
.translation-editor-note { margin: -4px 0 2px; color: var(--muted); font-size: 12px; line-height: 1.5; }
.website-translation-list { border-top: 1px solid var(--line); }
.website-translation-row { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 22px; align-items: start; padding: 17px 0; border-bottom: 1px solid var(--line); }
.website-translation-row[hidden] { display: none; }
.website-translation-source > span { display: block; margin-bottom: 6px; color: var(--muted); font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.website-translation-source strong { display: block; color: var(--ink); font-size: 13px; font-weight: 600; line-height: 1.5; overflow-wrap: anywhere; }
.website-translation-row .field > span { color: var(--muted); font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.website-translation-row textarea { min-height: 54px; font-family: var(--sans); font-size: 14px; line-height: 1.55; }
.translation-editor-empty { padding: 22px 0; color: var(--muted); text-align: center; }
.translation-editor-actions { position: sticky; bottom: 10px; display: flex; justify-content: flex-end; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: rgba(250, 247, 240, .95); box-shadow: 0 8px 24px rgba(43, 42, 36, .1); backdrop-filter: blur(8px); }
.translation-editor-actions .button:disabled { opacity: .55; cursor: not-allowed; }
.page-table { border-top: 1px solid var(--line); }
.page-row { display: grid; grid-template-columns: 1fr auto auto; gap: 17px; align-items: center; padding: 17px 0; border-bottom: 1px solid var(--line); }
.page-row-main strong, .page-row-main small { display: block; }
.page-row-main strong { margin-top: 5px; font-family: var(--serif); font-size: 22px; font-weight: 500; }
.page-row-main small { max-width: 600px; margin-top: 5px; color: var(--muted); font-size: 10px; line-height: 1.45; }
.page-row-action { min-height: 36px; padding: 9px 13px; font-size: 10px; }
.content-page { width: min(100% - 7.5%, 1050px); margin: 0 auto; padding: 75px 0 110px; }
.content-page-intro { max-width: 820px; padding-bottom: 35px; border-bottom: 1px solid var(--line); }
.content-page-intro h1 { margin: 12px 0 0; font-family: var(--serif); font-size: clamp(56px, 8vw, 104px); font-weight: 500; letter-spacing: -.07em; line-height: .9; }
.content-page-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 60px; align-items: start; padding-top: 40px; }
.content-page-body { max-width: 680px; color: var(--muted); font-size: 17px; line-height: 1.8; white-space: normal; }
.content-contact-card { display: grid; gap: 9px; padding: 25px; border-radius: 12px; background: var(--sage); color: var(--ink); }
.content-contact-card h2 { margin: 7px 0 2px; font-family: var(--serif); font-size: 30px; font-weight: 500; line-height: .98; }
.content-contact-card p { margin: 0 0 5px; color: rgba(43,42,36,.7); font-size: 12px; line-height: 1.55; }
.content-contact-card a:not(.button) { color: var(--terracotta-dark); font-size: 12px; font-weight: 700; text-decoration: none; }
.content-contact-card .button { margin-top: 12px; }
.footer-contact { display: grid; gap: 3px; align-content: start; color: var(--muted); font-size: 10px; line-height: 1.4; }
.footer-contact strong { color: var(--ink); font-size: 11px; }
.footer-contact a { color: var(--terracotta-dark); text-decoration: none; }
.footer-social a { color: inherit; text-decoration: none; }

@media (max-width: 760px) {
    .translation-editor-toolbar { grid-template-columns: 1fr; gap: 6px; }
    .translation-editor-count { padding: 0 0 5px; }
    .website-translation-row { grid-template-columns: 1fr; gap: 11px; padding: 14px 0; }
    .translation-editor-actions { bottom: 6px; }
    .page-row { grid-template-columns: 1fr auto; gap: 10px; }
    .page-row .status-badge { grid-column: 2; grid-row: 1; }
    .page-row-action { grid-column: 1 / -1; justify-self: start; }
    .content-page { width: min(100% - 28px, 620px); padding: 50px 0 75px; }
    .content-page-grid { grid-template-columns: 1fr; gap: 28px; padding-top: 27px; }
    .content-page-body { font-size: 15px; }
    .settings-actions .button { width: 100%; }
}

@media (max-width: 760px) {
    .room-gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .room-detail-page { width: min(100% - 28px, 620px); padding: 38px 0 70px; }
    .room-detail-layout { grid-template-columns: 1fr; gap: 25px; }
    .room-detail-copy { padding-top: 0; }
    .room-detail-copy h1 { font-size: 57px; }
    .room-detail-lede { font-size: 15px; }
    .room-gallery-nav { opacity: 1; }
}

/* Stay policy layout: centered, simple policy copy. */
.stay-policies { padding: clamp(42px, 6vw, 74px) 20px; border-bottom: 1px solid #e9e2d9; background: #fffdfa; box-sizing: border-box; text-align: center; }
.stay-policies-inner { width: min(100%, 760px); margin: 0 auto; }
.stay-policies-inner h2 { margin: 0; color: #252b3a; font-family: var(--sans); font-size: clamp(24px, 2.6vw, 36px); font-weight: 700; letter-spacing: -.035em; line-height: 1.15; }
.stay-policy-list { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 0 42px; margin: 28px auto 0; padding: 0; list-style: none !important; }
.stay-policy { display: flex; align-items: baseline; justify-content: center; gap: 12px; min-width: 0; color: #252b3a; font-size: clamp(20px, 2.3vw, 29px); line-height: 1.35; }
.stay-policy::before { content: none !important; display: none !important; }
.stay-policy span { display: inline; font-weight: 600; }
.stay-policy strong { display: inline; font-weight: 400; white-space: nowrap; }

@media (max-width: 420px) {
    .stay-policies { padding-inline: 18px; }
    .stay-policy { gap: 9px; font-size: 20px; }
}

/* Suneta Picks details popup. */
.mockup-pick-card { cursor: pointer; outline: none; }
.mockup-pick-card:focus-visible { border-color: var(--terracotta); box-shadow: 0 0 0 3px rgba(189,101,73,.18); }
.mockup-pick-photo { position: relative; }
.mockup-pick-card .pick-social-link { position: relative; z-index: 2; }
.pick-photo-credit, .pick-modal-photo-credit { position: absolute; z-index: 3; max-width: calc(100% - 16px); padding: 5px 8px; border: 1px solid rgba(255,255,255,.65); border-radius: 999px; background: rgba(255,253,248,.93); color: #51483f; font-size: 8px; line-height: 1.25; text-decoration: none; box-shadow: 0 2px 8px rgba(20,15,10,.12); }
.pick-photo-credit { right: 8px; bottom: 8px; }
.pick-photo-credit:hover, .pick-modal-photo-credit:hover { background: #fff; color: #8b4c32; }
.suneta-pick-modal[hidden], .suneta-pick-modal [hidden] { display: none !important; }
.suneta-pick-modal { position: fixed; z-index: 140; inset: 0; display: grid; place-items: center; padding: 24px; background: rgba(42,35,29,.58); backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px); }
.suneta-pick-modal-panel { position: relative; display: grid; grid-template-columns: minmax(300px, .95fr) minmax(380px, 1.05fr); width: min(100%, 1040px); max-height: min(86vh, 720px); overflow: hidden; border: 1px solid rgba(255,255,255,.7); border-radius: 25px; background: #fffdfa; box-shadow: 0 24px 70px rgba(22,17,12,.34); }
.suneta-pick-modal-visual { position: relative; min-height: 480px; overflow: hidden; background: linear-gradient(135deg, #4b5749, #9b5c39 50%, #d18448); }
.suneta-pick-modal-visual:after { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(25,38,30,.18), rgba(104,51,29,.1)); pointer-events: none; }
.suneta-pick-modal-visual img { display: block; width: 100%; height: 100%; object-fit: cover; }
.suneta-pick-modal-visual span { position: absolute; z-index: 1; inset: 0; display: grid; place-items: center; color: rgba(255,253,248,.92); font-size: 23px; letter-spacing: .08em; }
.pick-modal-photo-credit { right: 13px; bottom: 13px; max-width: calc(100% - 26px); font-size: 10px; }
.suneta-pick-modal-copy { position: relative; overflow-y: auto; padding: clamp(48px, 7vw, 82px) clamp(28px, 6vw, 72px) 50px; color: var(--ink); }
.suneta-pick-modal-close { position: absolute; top: 23px; right: 24px; display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid #ded8ce; border-radius: 50%; background: #fffdfa; color: #4d4035; font-size: 27px; line-height: 1; cursor: pointer; }
.suneta-pick-modal-kicker { color: #a15b35; font-size: 13px; font-weight: 700; letter-spacing: .16em; }
.suneta-pick-modal-copy h3 { max-width: 560px; margin: 28px 0 18px; font-family: var(--serif); font-size: clamp(42px, 5vw, 72px); font-weight: 500; letter-spacing: -.06em; line-height: .94; }
.suneta-pick-modal-meta { color: #746c64; font-size: clamp(17px, 2vw, 24px); line-height: 1.35; }
.suneta-pick-modal-copy p { max-width: 540px; margin: 43px 0 0; color: #574e47; font-size: clamp(17px, 1.8vw, 23px); line-height: 1.45; }
.suneta-pick-modal-copy strong, .suneta-pick-modal-copy small { display: block; max-width: 540px; }
.suneta-pick-modal-copy strong { margin-top: 28px; font-size: 15px; }
.suneta-pick-modal-copy small { margin-top: 8px; color: #746c64; font-size: 16px; line-height: 1.45; }
.suneta-pick-modal-hours { margin-top: 22px; padding-top: 18px; border-top: 1px solid #e6ded4; color: #746c64; font-size: 15px; }
.suneta-pick-modal-link { display: inline-flex; align-items: center; justify-content: center; min-width: 245px; margin-top: 38px; padding: 17px 25px; border-radius: 10px; background: #70462b; color: #fffdfa; font-size: 16px; font-weight: 700; text-decoration: none; transition: background .18s ease, transform .18s ease; }
.suneta-pick-modal-link:hover { background: #5e3923; transform: translateY(-1px); }
.suneta-pick-modal-open { overflow: hidden; }

@media (max-width: 700px) {
    .suneta-pick-modal { padding: 12px; }
    .suneta-pick-modal-panel { display: block; width: 100%; max-height: 92vh; overflow-y: auto; border-radius: 20px; }
    .suneta-pick-modal-visual { min-height: 230px; height: 34vh; }
    .suneta-pick-modal-copy { overflow: visible; padding: 38px 25px 30px; }
    .suneta-pick-modal-close { top: 14px; right: 14px; width: 38px; height: 38px; font-size: 23px; }
    .suneta-pick-modal-kicker { font-size: 11px; }
    .suneta-pick-modal-copy h3 { margin-top: 18px; font-size: 46px; }
    .suneta-pick-modal-copy p { margin-top: 25px; font-size: 17px; }
}

/* Suneta cat companion: a real sprite animation that can move around the viewport. */
.suneta-cat {
    --cat-x: 20px;
    --cat-y: 120px;
    position: fixed;
    z-index: 80;
    left: 0;
    top: 0;
    width: 130px;
    height: 160px;
    transform: translate3d(var(--cat-x), var(--cat-y), 0);
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
    outline: none;
}

.suneta-cat-visual {
    display: block;
    width: 130px;
    height: 160px;
    background-image: url('../images/suneta-cat-sprite-v2-fixed.png');
    background-repeat: no-repeat;
    background-size: 1560px 160px;
    background-position: 0 0;
    filter: drop-shadow(0 7px 5px rgba(43, 42, 36, .16));
    transition: filter .18s ease;
}

.suneta-cat[data-direction="left"] .suneta-cat-visual {
    transform: scaleX(-1);
}

.suneta-cat[data-direction="up"] .suneta-cat-visual,
.suneta-cat[data-direction="down"] .suneta-cat-visual {
    background-position-y: 0;
}

.suneta-cat.is-reacting {
    width: 140px;
    height: 210px;
}

.suneta-cat.is-reacting .suneta-cat-visual {
    width: 140px;
    height: 210px;
    background-image: url('../images/suneta-cat-reactions-fixed.png');
    background-size: 1120px 240px;
    background-position: calc(var(--reaction-frame, 0) * -140px) 0;
}

.suneta-cat:focus-visible .suneta-cat-visual,
.suneta-cat:hover .suneta-cat-visual {
    filter: drop-shadow(0 8px 7px rgba(43, 42, 36, .23));
}

@media (max-width: 600px) {
    .suneta-cat { width: 102px; height: 126px; }
    .suneta-cat-visual { width: 102px; height: 126px; background-size: 1228.5px 126px; }
    .suneta-cat.is-reacting { width: 110px; height: 165px; }
    .suneta-cat.is-reacting .suneta-cat-visual { width: 110px; height: 165px; background-size: 880px 188.57px; background-position: calc(var(--reaction-frame, 0) * -110px) 0; }
}

/* Places & Map popup: match the large, readable Suneta Picks modal. */
.place-modal-card[hidden] { display: none !important; }
.place-modal-open { overflow: hidden; }
@media (min-width: 641px) {
    .place-modal-card { position: fixed; z-index: 145; top: 50%; right: auto; bottom: auto; left: 50%; display: grid; grid-template-columns: minmax(300px, .95fr) minmax(380px, 1.05fr); width: min(1040px, calc(100vw - 48px)); max-height: min(86vh, 720px); padding: 0; overflow: hidden; border: 1px solid rgba(255,255,255,.7); border-radius: 25px; background: #fffdfa; box-shadow: 0 0 0 100vmax rgba(42,35,29,.58), 0 24px 70px rgba(22,17,12,.34); transform: translate(-50%, -50%); }
    .place-modal-card.is-open { animation: place-modal-in .2s ease-out both; }
    .place-modal-visual { position: relative; min-height: 480px; overflow: hidden; background: linear-gradient(135deg, #4b5749, #9b5c39 50%, #d18448); }
    .place-modal-visual .featured-place-photo, .place-modal-visual .place-card-image-wrap { height: 100%; min-height: 480px; margin: 0; border-radius: 0; background: transparent; }
    .place-modal-visual .featured-place-photo img, .place-modal-visual .place-card-image-wrap img { display: block; width: 100%; height: 100%; object-fit: cover; }
    .place-modal-visual img[hidden] { display: none !important; }
    .place-modal-visual .featured-place-photo > span, .place-modal-visual .place-card-image-wrap > span { position: absolute; z-index: 2; top: 18px; right: 18px; display: block; height: auto; padding: 8px 12px; border-radius: 999px; background: rgba(255,253,248,.94); color: #70462b; font-size: 12px; font-weight: 700; }
    .place-modal-visual .featured-place-photo > small { position: absolute; z-index: 2; right: 22px; bottom: 22px; left: 22px; color: #fff; font-family: var(--serif); font-size: 26px; }
    .place-modal-copy { position: relative; overflow-y: auto; padding: clamp(48px, 7vw, 82px) clamp(28px, 6vw, 72px) 50px; color: var(--ink); }
    .place-modal-copy .mobile-sheet-handle { display: none; }
    .place-modal-copy .featured-close, .place-modal-copy .place-close { position: absolute; z-index: 7; top: 23px; right: 24px; display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid #ded8ce; border-radius: 50%; background: #fffdfa; color: #4d4035; font-size: 27px; line-height: 1; cursor: pointer; }
    .place-modal-copy .place-kicker, .place-modal-copy .eyebrow { color: #a15b35; font-size: 13px; font-weight: 700; letter-spacing: .16em; }
    .place-modal-copy h3 { max-width: 560px; margin: 28px 0 18px; font-family: var(--serif); font-size: clamp(42px, 5vw, 72px); font-weight: 500; letter-spacing: -.06em; line-height: .94; }
    .place-modal-copy p { max-width: 540px; margin: 43px 0 0; color: #574e47; font-size: clamp(17px, 1.8vw, 23px); line-height: 1.45; }
    .place-modal-copy strong, .place-modal-copy > small, .place-modal-copy .place-menu-label, .place-modal-copy .place-menu { display: block; max-width: 540px; }
    .place-modal-copy strong, .place-modal-copy .place-menu-label { margin-top: 28px; font-size: 15px; }
    .place-modal-copy > small, .place-modal-copy .place-menu { margin-top: 8px; color: #746c64; font-size: 16px; line-height: 1.45; }
    .place-modal-copy .featured-hours, .place-modal-copy .place-card-hours { margin: 22px 0 0; padding-top: 18px; border-top: 1px solid #e6ded4; color: #746c64; font-size: 15px; }
    .place-modal-copy .featured-location, .place-modal-copy .place-card-location, .place-modal-copy .featured-travel, .place-modal-copy .place-card-travel { margin-top: 14px; color: #746c64; font-size: 14px; line-height: 1.45; }
    .place-modal-copy .featured-direction, .place-modal-copy .arrow-link { display: inline-flex; align-items: center; justify-content: space-between; min-width: 245px; margin-top: 38px; padding: 17px 25px; border-radius: 10px; background: #70462b; color: #fffdfa; font-size: 16px; font-weight: 700; text-decoration: none; }
    .place-modal-copy .save-place { display: block; width: 100%; max-width: 325px; margin-top: 9px; padding: 15px 20px; border: 0; border-radius: 10px; background: #f1efeb; color: #624a38; font-size: 15px; font-weight: 700; cursor: pointer; }
}
@keyframes place-modal-in { from { opacity: .3; transform: translate(-50%, -47%) scale(.98); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }

@media (max-width: 640px) {
    .place-modal-card { position: fixed; z-index: 145; top: 50%; right: auto; bottom: auto; left: 50%; display: block; width: calc(100vw - 24px); max-height: 92dvh; padding: 0; overflow-y: auto; border-radius: 20px; box-shadow: 0 0 0 100vmax rgba(42,35,29,.58), 0 20px 55px rgba(22,17,12,.3); transform: translate(-50%, -50%); }
    .place-modal-card.is-open { animation: place-modal-mobile-in .2s ease-out both; }
    .place-modal-visual { height: 34vh; min-height: 220px; overflow: hidden; }
    .place-modal-visual .featured-place-photo, .place-modal-visual .place-card-image-wrap { height: 100%; min-height: 0; margin: 0; border-radius: 0; }
    .place-modal-visual .featured-place-photo > span, .place-modal-visual .place-card-image-wrap > span { top: 14px; right: 14px; padding: 7px 10px; font-size: 10px; }
    .place-modal-visual .featured-place-photo > small { right: 16px; bottom: 16px; left: 16px; font-size: 21px; }
    .place-modal-copy { overflow: visible; padding: 28px 22px 25px; }
    .place-modal-copy .mobile-sheet-handle { display: block; width: 38px; height: 4px; margin: -19px auto 19px; border-radius: 99px; background: #d6cec3; }
    .place-modal-copy .featured-close, .place-modal-copy .place-close { top: 14px; right: 14px; width: 38px; height: 38px; font-size: 23px; }
    .place-modal-copy .place-kicker, .place-modal-copy .eyebrow { font-size: 11px; }
    .place-modal-copy h3 { margin: 18px 0 14px; font-size: 46px; }
    .place-modal-copy p { margin-top: 25px; font-size: 17px; }
    .place-modal-copy .featured-direction, .place-modal-copy .arrow-link { width: 100%; min-width: 0; margin-top: 28px; padding: 15px 18px; font-size: 14px; }
    .place-modal-copy .save-place { max-width: none; font-size: 14px; }
}
@keyframes place-modal-mobile-in { from { opacity: .3; transform: translate(-50%, -46%); } to { opacity: 1; transform: translate(-50%, -50%); } }

/* About Suneta block on the homepage. */
.bottom-story-about { position: relative; min-height: 300px; overflow: hidden; padding: clamp(30px, 4vw, 58px) clamp(24px, 3.5vw, 58px); background: linear-gradient(135deg, #445244 0%, #755039 57%, #c47b43 100%); color: #fffdfa; }
.bottom-story-about:before { content: ''; position: absolute; inset: 0; opacity: .32; background: repeating-linear-gradient(90deg, transparent 0 15%, rgba(255,213,135,.32) 16% 18%, transparent 19% 32%), linear-gradient(160deg, rgba(20,25,18,.38), transparent 42%, rgba(24,17,12,.5)); }
.bottom-story-about > * { position: relative; z-index: 1; }
.about-story-kicker { display: block; color: rgba(255,253,248,.72); font-size: 11px; font-weight: 700; letter-spacing: .16em; }
.bottom-story-about h2 { max-width: 480px; margin: 20px 0 15px; font-family: var(--serif); font-size: clamp(34px, 3.2vw, 50px); font-weight: 500; letter-spacing: -.06em; line-height: .94; }
.bottom-story-about p { max-width: 480px; margin: 0; color: rgba(255,253,248,.88); font-size: clamp(13px, 1.35vw, 17px); line-height: 1.45; }
.about-story-link { display: inline-flex; align-items: center; justify-content: space-between; gap: 30px; min-width: 190px; margin-top: 27px; padding: 14px 17px; border-radius: 5px; background: #fffdfa; color: #60432f; font-size: 11px; font-weight: 700; text-decoration: none; }
.about-story-link span { font-size: 18px; }
.mockup-bottom-grid { min-height: 340px; }
.bottom-contact { position: relative; min-width: 0; padding: clamp(29px, 3.5vw, 52px) clamp(22px, 2.7vw, 42px); border-left: 1px solid #e6ded4; background: #f6f0e7; color: var(--ink); }
.bottom-contact-kicker { display: block; color: #81776d; font-size: 11px; font-weight: 700; letter-spacing: .16em; }
.bottom-contact h3 { margin: 9px 0 27px; font-family: var(--sans); font-size: clamp(25px, 2.3vw, 36px); font-weight: 600; letter-spacing: -.04em; line-height: 1; }
.bottom-contact-name, .bottom-contact-address { display: block; }
.bottom-contact-name { color: #e78e27; font-size: clamp(13px, 1.25vw, 17px); letter-spacing: .14em; }
.bottom-contact-address { margin-top: 8px; color: #40372f; font-size: 13px; }
.bottom-contact-details { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.bottom-contact-details a { display: inline-flex; align-items: center; gap: 8px; padding: 9px 12px; border: 1px solid #ded5c8; border-radius: 999px; background: rgba(255,253,248,.72); color: #8f4c36; font-size: 11px; font-weight: 700; text-decoration: none; }
.bottom-contact-icon { display: inline-grid; place-items: center; width: 18px; height: 18px; }
.bottom-contact-icon svg { display: block; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
.bottom-contact-social { display: flex; align-items: center; gap: 10px; margin-top: 17px; }
.bottom-contact-social-link { display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid #ded5c8; border-radius: 50%; color: #8f4c36; text-decoration: none; transition: background .2s ease, color .2s ease, transform .2s ease; }
.bottom-contact-social-link svg { display: block; width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
.bottom-contact-social-link svg path:last-child { fill: currentColor; stroke: none; }
.bottom-contact-social-link:hover, .bottom-contact-social-link:focus-visible { background: #8f4c36; color: #fffdfa; transform: translateY(-2px); }
.bottom-contact-button { display: inline-flex; align-items: center; justify-content: space-between; gap: 44px; min-width: 205px; margin-top: 24px; padding: 13px 16px; border-radius: 6px; background: #70462b; color: #fffdfa; font-size: 11px; font-weight: 700; text-decoration: none; }
.bottom-contact-button span { font-size: 18px; }
@media (max-width: 760px) {
    .bottom-story-about { min-height: 300px; padding: 34px 25px 38px; }
    .bottom-story-about h2 { margin-top: 18px; font-size: 40px; }
    .bottom-story-about p { max-width: 560px; font-size: 14px; }
    .bottom-contact { border-top: 1px solid #e6ded4; border-left: 0; }
}

/* Page body editor: keep formatting and uploaded images inside the page content field. */
.rich-editor { min-width: 0; }
.rich-editor-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin-bottom: 8px; padding: 7px; border: 1px solid var(--line); border-bottom: 0; border-radius: 7px 7px 0 0; background: #f4efe6; }
.rich-editor-toolbar button { display: inline-grid; place-items: center; min-width: 30px; height: 29px; padding: 0 8px; border: 1px solid transparent; border-radius: 5px; background: transparent; color: var(--ink); font-size: 12px; }
.rich-editor-toolbar button:hover, .rich-editor-toolbar button:focus-visible { border-color: var(--line); background: var(--paper); outline: none; }
.rich-editor-surface { min-height: 320px; overflow: auto; padding: 16px; border: 1px solid var(--line); border-radius: 0 0 7px 7px; outline: none; background: var(--white); color: var(--ink); font-size: 15px; line-height: 1.65; }
.rich-editor-surface:focus { border-color: var(--terracotta); box-shadow: 0 0 0 3px rgba(189,101,73,.1); }
.rich-editor-surface p { margin: 0 0 15px; }
.rich-editor-surface p:last-child { margin-bottom: 0; }
.rich-editor-surface h2, .rich-editor-surface h3 { margin: 18px 0 9px; font-family: var(--serif); line-height: 1.05; }
.rich-editor-surface h2 { font-size: 30px; }
.rich-editor-surface h3 { font-size: 23px; }
.rich-editor-surface ul, .rich-editor-surface ol { margin: 0 0 15px; padding-left: 24px; }
.rich-editor-surface a { color: var(--terracotta-dark); }
.rich-editor-surface img { display: block; max-width: 100%; height: auto; margin: 12px 0; border-radius: 7px; }
.rich-editor-status.is-error { color: #a44937; }

/* Rich page content on the public page. */
.content-page-body p { margin: 0 0 20px; }
.content-page-body h2, .content-page-body h3 { margin: 32px 0 12px; color: var(--ink); font-family: var(--serif); line-height: 1.08; }
.content-page-body h2 { font-size: clamp(30px, 3vw, 46px); }
.content-page-body h3 { font-size: clamp(23px, 2.3vw, 34px); }
.content-page-body ul, .content-page-body ol { margin: 0 0 20px; padding-left: 24px; }
.content-page-body a { color: var(--terracotta-dark); font-weight: 600; }
.content-page-body img { display: block; max-width: 100%; height: auto; margin: 24px 0; border-radius: 10px; }
.content-page-body blockquote { margin: 25px 0; padding: 5px 0 5px 18px; border-left: 3px solid var(--terracotta); color: var(--ink); font-family: var(--serif); font-size: 22px; }

/* Live CNX section, placed below Suneta Picks. */
.live-cnx-section { padding: clamp(58px, 7vw, 94px) 20px clamp(62px, 8vw, 106px); border-top: 1px solid #e9e2d9; background: #fffdfa; text-align: center; }
.live-cnx-wrap { width: min(100%, 1100px); margin: 0 auto; }
.live-cnx-kicker { color: #a15b35; font-size: 13px; font-weight: 700; letter-spacing: .16em; }
.live-cnx-section h2 { margin: 22px 0 12px; color: var(--ink); font-family: var(--serif); font-size: clamp(38px, 5vw, 68px); font-weight: 500; letter-spacing: -.06em; line-height: .96; }
.live-cnx-section p { margin: 0; color: var(--muted); font-size: clamp(15px, 1.7vw, 21px); }
.live-cnx-preview { position: relative; display: block; width: min(100%, 920px); aspect-ratio: 16 / 9; margin: 38px auto 0; overflow: hidden; border: 1px solid #d9d0c5; border-radius: 22px; background: #171310; box-shadow: 0 18px 50px rgba(43,32,22,.16); color: #fffdfa; text-decoration: none; }
.live-cnx-preview img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.live-cnx-preview-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(18,16,13,.5), transparent 32%, rgba(18,16,13,.72)); }
.live-cnx-badge { position: absolute; top: 20px; left: 22px; display: inline-flex; align-items: center; gap: 8px; padding: 8px 11px; border-radius: 999px; background: rgba(255,253,248,.94); color: #70462b; font-size: 11px; font-weight: 700; letter-spacing: .08em; }
.live-cnx-badge i { width: 8px; height: 8px; border-radius: 50%; background: #d7462e; box-shadow: 0 0 0 4px rgba(215,70,46,.14); }
.live-cnx-play { position: absolute; top: 50%; left: 50%; display: grid; place-items: center; width: 76px; height: 76px; padding-left: 4px; border-radius: 50%; background: #fffdfa; color: #70462b; font-size: 27px; transform: translate(-50%, -50%); box-shadow: 0 9px 24px rgba(28,20,14,.28); transition: transform .2s ease, background .2s ease; }
.live-cnx-link { position: absolute; right: 22px; bottom: 20px; display: inline-flex; align-items: center; gap: 17px; padding: 13px 17px; border-radius: 9px; background: #70462b; color: #fffdfa; font-size: 13px; font-weight: 700; }
.live-cnx-link b { font-size: 18px; font-weight: 400; }
.live-cnx-preview:hover img, .live-cnx-preview:focus-visible img { transform: scale(1.035); }
.live-cnx-preview:hover .live-cnx-play, .live-cnx-preview:focus-visible .live-cnx-play { background: #e3942c; transform: translate(-50%, -50%) scale(1.08); }
.live-cnx-preview:focus-visible { outline: 3px solid #e3942c; outline-offset: 4px; }
@media (max-width: 640px) {
    .live-cnx-section { padding-inline: 14px; }
    .live-cnx-section h2 { margin-top: 17px; font-size: 42px; }
    .live-cnx-preview { margin-top: 27px; border-radius: 14px; }
    .live-cnx-badge { top: 12px; left: 13px; padding: 7px 9px; font-size: 9px; }
    .live-cnx-play { width: 58px; height: 58px; font-size: 21px; }
    .live-cnx-link { right: 13px; bottom: 12px; gap: 12px; padding: 11px 12px; font-size: 11px; }
}

/* Page editor: keep publishing controls below the content workflow. */
.page-form { display: block; }
.page-form .form-main-column { display: grid; gap: 13px; }
.page-form .form-side-column { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 320px); gap: 13px; margin-top: 13px; align-items: start; }
.page-form .publish-panel { position: static; }
@media (max-width: 900px) {
    .page-form .form-side-column { grid-template-columns: 1fr; }
}

/* Mobile readability: keep compact cards readable without changing desktop sizing. */
@media (max-width: 640px) {
    .benefit-bar strong { font-size: 12px; }
    .benefit-bar small { font-size: 10px; }
    .mockup-room-content h3 { font-size: 13px; line-height: 1.15; }
    .mockup-room-content p { font-size: 10px; }
    .room-building-label { font-size: 9px; }
    .room-price { font-size: 12px; }
    .room-note { font-size: 10px; }
    .mockup-pick-card h3 { font-size: 12px; line-height: 1.2; }
    .mockup-pick-card p, .pick-social-link { font-size: 10px; }
    .map-weather-copy .eyebrow { font-size: 10px; }
    .map-weather-copy small { font-size: 11px; }
    .map-weather-mode button, .map-weather-select { font-size: 11px; }
}

/* Desktop room cards: improve readability while keeping the compact grid. */
@media (min-width: 641px) {
    .mockup-room-content h3 { font-size: 18px; line-height: 1.15; }
    .mockup-room-content p { font-size: 13px; }
    .room-building-label { font-size: 10px; }
    .room-price { font-size: 15px; }
    .room-note { font-size: 12px; }
}


/* ---- Language switch + Thai typography (added for EN/TH) ---- */
.lang-switch { display: inline-flex; align-items: center; padding: 3px; border: 1px solid #e4ded7; border-radius: 8px; background: #fffdfa; }
.lang-switch a { padding: 5px 9px; border-radius: 6px; color: #7b746b !important; font-size: 11px; font-weight: 600; letter-spacing: .04em; line-height: 1; }
.lang-switch a.is-active { background: #2e2b24; color: #fffdf8 !important; }
.lang-switch a:not(.is-active):hover { color: var(--terracotta) !important; }
@media (max-width: 640px) { .mockup-header .site-nav .lang-switch { justify-self: start; } }
.booking-hp { position: absolute !important; left: -10000px !important; width: 1px; height: 1px; overflow: hidden; }
.translation-panel { border: 1px dashed #d8c7a4; }
.settings-hint { display: block; margin-top: 12px; color: var(--muted); font-size: 11px; }
/* Thai has tall vowels and tone marks: give lines more room and avoid negative tracking. */
html[lang="th"] body { line-height: 1.7; }
html[lang="th"] h1, html[lang="th"] h2, html[lang="th"] h3 { line-height: 1.3; letter-spacing: 0 !important; }
html[lang="th"] .hero-script { font-size: clamp(32px, 3.5vw, 52px); line-height: 1.12; letter-spacing: 0; }
html[lang="th"] .cta-script { line-height: 1.25; letter-spacing: 0; }
@media (max-width: 640px) { html[lang="th"] .hero-script { font-size: 32px; } }
html[lang="th"] .eyebrow, html[lang="th"] .about-story-kicker, html[lang="th"] .bottom-contact-kicker, html[lang="th"] .live-cnx-kicker { letter-spacing: .02em; }
html[lang="th"] .hero-side-copy, html[lang="th"] .hero-wall-copy { line-height: 1.35; }

/* Cloudbeds availability import and date-by-room snapshot. */
.availability-page { display: grid; gap: 14px; }
.availability-toolbar { margin-bottom: 0; }
.availability-tools-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; }
.availability-upload-panel, .availability-note-panel, .availability-calendar-panel, .availability-preview-panel { min-width: 0; }
.availability-upload-panel > p, .availability-note-panel > p { color: var(--muted); font-size: 12px; }
.availability-upload-panel > p strong { color: var(--ink); }
.availability-step { padding: 6px 9px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); font-size: 10px; font-weight: 700; }
.availability-upload-form { display: grid; gap: 12px; }
.availability-file-drop { position: relative; display: grid; justify-items: center; gap: 5px; min-height: 130px; padding: 19px; border: 1px dashed #c7beaf; border-radius: 10px; background: rgba(244,239,228,.55); text-align: center; cursor: pointer; }
.availability-file-drop input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.availability-file-drop:focus-within, .availability-file-drop:hover { border-color: var(--terracotta); background: #f8f0e5; }
.availability-file-drop strong { font-size: 12px; }
.availability-file-drop small { color: var(--muted); font-size: 10px; }
.availability-file-icon { display: grid; place-items: center; width: 32px; height: 32px; margin-bottom: 3px; border-radius: 50%; background: var(--sage); color: var(--sage-dark); font-size: 21px; }
.availability-last-import { display: grid; gap: 3px; margin-top: 19px; padding-top: 15px; border-top: 1px solid var(--line); }
.availability-last-import strong { font-size: 12px; }
.availability-last-import small { color: var(--muted); font-size: 10px; overflow-wrap: anywhere; }
.availability-note-panel { background: #f1eadc; }
.availability-note-panel h2 { max-width: 420px; margin: 12px 0; font-size: 30px; }
.availability-note-panel .availability-mapping-count { margin: 19px 0 0; padding-top: 13px; border-top: 1px solid var(--line); font-size: 10px; }
.availability-calendar-panel { padding: 0; overflow: hidden; }
.availability-calendar-heading { align-items: center; padding: 23px 23px 0; }
.availability-calendar-heading .panel-heading { margin-bottom: 0; }
.availability-range-form { display: flex; align-items: end; gap: 8px; }
.availability-range-form label { display: grid; gap: 4px; color: var(--muted); font-size: 9px; font-weight: 700; }
.availability-range-form input { width: 135px; min-height: 37px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 7px; background: var(--white); color: var(--ink); font: inherit; }
.availability-range-form .button { min-height: 37px; padding: 8px 12px; }
.availability-calendar-scroll, .availability-map-table-wrap { width: 100%; overflow: auto; }
.availability-calendar { width: 100%; min-width: 820px; border-collapse: collapse; font-size: 10px; }
.availability-calendar th, .availability-calendar td { min-width: 58px; padding: 11px 7px; border-top: 1px solid var(--line); text-align: center; }
.availability-calendar thead th { background: #f3eee4; color: var(--muted); font-weight: 500; }
.availability-calendar thead th span, .availability-calendar thead th strong { display: block; }
.availability-calendar thead th span { font-size: 9px; }
.availability-calendar thead th strong { margin-top: 3px; color: var(--ink); font-size: 10px; }
.availability-calendar .availability-room-head { position: sticky; left: 0; z-index: 1; width: 205px; min-width: 205px; background: var(--paper); text-align: left; }
.availability-calendar thead .availability-room-head { z-index: 2; background: #f3eee4; }
.availability-room-head strong, .availability-room-head small { display: block; }
.availability-room-head strong { font-size: 11px; }
.availability-room-head small { margin-top: 3px; color: var(--muted); font-size: 9px; font-weight: 400; }
.availability-number { display: inline-block; min-width: 41px; padding: 5px 4px; border-radius: 6px; background: #e4ebdc; color: #536b47; font-size: 11px; font-weight: 700; white-space: nowrap; }
.availability-number small { color: inherit; opacity: .65; font-size: 9px; font-weight: 500; }
.availability-number.is-zero { background: #f3e2d8; color: #9a4935; }
.availability-number.is-overbooked { background: #9a4935; color: #fffdfa; }
.availability-no-data { color: #b7b0a3; font-size: 16px; }
.availability-calendar-footnote { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 9px 16px; margin: 0; padding: 13px 20px; border-top: 1px solid var(--line); color: var(--muted); font-size: 9px; }
.availability-calendar-footnote > span:first-child { display: inline-flex; align-items: center; gap: 6px; }
.availability-legend-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--sage-dark); }
.availability-empty { display: grid; justify-items: center; gap: 5px; min-height: 200px; padding: 25px; color: var(--muted); text-align: center; }
.availability-empty > span { display: grid; place-items: center; width: 35px; height: 35px; margin-bottom: 5px; border-radius: 50%; background: #e4ebdc; color: var(--sage-dark); font-size: 17px; }
.availability-empty strong { color: var(--ink); font-size: 12px; }
.availability-empty small { font-size: 10px; }
.availability-preview-panel .panel-heading { align-items: end; }
.availability-import-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; margin-bottom: 14px; }
.availability-import-stats > div { display: grid; gap: 4px; padding: 12px; border-radius: 8px; background: #f3eee4; }
.availability-import-stats strong { font-family: var(--serif); font-size: 25px; line-height: 1; }
.availability-import-stats small { color: var(--muted); font-size: 9px; }
.availability-warning { margin: 0 0 15px; align-items: flex-start; }
.availability-map-table { width: 100%; border-collapse: collapse; font-size: 11px; }
.availability-map-table th, .availability-map-table td { padding: 11px 9px; border-bottom: 1px solid var(--line); text-align: left; }
.availability-map-table th { color: var(--muted); font-size: 9px; letter-spacing: .04em; text-transform: uppercase; }
.availability-map-table td:nth-child(2) { width: 90px; color: var(--muted); text-align: center; }
.availability-map-table td strong { font-weight: 600; }
.availability-map-table select { width: min(100%, 340px); min-height: 38px; padding: 7px 9px; border: 1px solid var(--line); border-radius: 7px; background: var(--white); color: var(--ink); font: inherit; }
.availability-import-matrix { margin-top: 18px; padding-top: 15px; border-top: 1px solid var(--line); }
.availability-import-matrix > .eyebrow { margin-bottom: 10px; }
.availability-import-matrix .availability-calendar { min-width: 820px; }
.availability-preview-footer { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-top: 16px; }
.availability-preview-footer p { max-width: 570px; margin: 0; color: var(--muted); font-size: 10px; }
.availability-preview-footer .button:disabled { cursor: not-allowed; opacity: .5; }
@media (max-width: 900px) {
    .availability-tools-grid { grid-template-columns: 1fr; }
    .availability-calendar-heading { display: grid; align-items: start; }
}
@media (max-width: 640px) {
    .availability-calendar-heading { padding: 18px 17px 0; }
    .availability-range-form { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
    .availability-range-form input { width: 100%; }
    .availability-range-form .button { grid-column: 1 / -1; }
    .availability-preview-panel .panel-heading { display: grid; }
    .availability-import-stats { gap: 6px; }
    .availability-import-stats > div { padding: 9px 7px; }
    .availability-import-stats strong { font-size: 21px; }
    .availability-import-stats small { font-size: 8px; }
    .availability-preview-footer { align-items: stretch; flex-direction: column; }
    .availability-preview-footer .button { width: 100%; }
    .availability-map-table { min-width: 560px; }
    .availability-calendar-footnote { display: grid; }
}