/* Common CSS bundle. Keep source order aligned with base.html to preserve the existing cascade. */

/* --- app.css --- */

/* Self-hosted Noto Sans Thai variable font (SIL OFL 1.1). */
@font-face{
  font-family:"Noto Sans Thai";font-style:normal;font-display:swap;font-weight:100 900;
  src:url("/static/fonts/noto-sans-thai-thai-wght-normal-v1.woff2") format("woff2-variations");
  unicode-range:U+02D7,U+0303,U+0331,U+0E01-0E5B,U+200C-200D,U+25CC;
}
@font-face{
  font-family:"Noto Sans Thai";font-style:normal;font-display:swap;font-weight:100 900;
  src:url("/static/fonts/noto-sans-thai-latin-wght-normal-v1.woff2") format("woff2-variations");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

:root{
  --navy:#083b76;--navy-2:#0b4e98;--blue:#0b63ce;--blue-2:#1677e8;--sky:#eaf4ff;--sky-2:#f4f9ff;
  --bg:#f4f7fb;--card:#fff;--text:#142033;--muted:#627086;--line:#dce5ef;--line-strong:#c6d4e3;
  --ok:#087a55;--ok-bg:#ecfbf4;--warn:#a65a08;--warn-bg:#fff7e9;--danger:#b42318;--danger-bg:#fff1f0;
  --shadow:0 12px 34px rgba(22,56,96,.08);--shadow-sm:0 6px 18px rgba(22,56,96,.06);--radius:14px;--radius-lg:20px;
  --font-sans:"Noto Sans Thai",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--font-sans);background:var(--bg);color:var(--text);line-height:1.65;font-size:15px;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:var(--blue);text-decoration:none}a:hover{color:var(--navy)}
button,input,select,textarea{font:inherit}.container{width:min(1180px,calc(100% - 36px));margin:auto}.content{max-width:860px}.content-wide{max-width:1040px}
h1,h2,h3,h4{font-family:var(--font-sans);color:#10233f;letter-spacing:-.015em}h1{font-size:clamp(34px,5vw,58px);line-height:1.16;margin:0 0 16px}h2{font-size:clamp(26px,3.4vw,38px);line-height:1.26;margin:0 0 12px}h3{font-size:20px;line-height:1.4;margin:0 0 9px}.muted{color:var(--muted)}

.topbar{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.97);border-bottom:1px solid var(--line);backdrop-filter:blur(12px)}
.nav{min-height:72px;display:flex;align-items:center;gap:24px}.brand{display:flex;align-items:center;gap:10px;color:var(--navy);text-decoration:none;min-width:max-content}.brand:hover{color:var(--navy)}
.brand-mark{width:38px;height:38px;border-radius:10px;background:linear-gradient(145deg,var(--navy),var(--blue-2));color:#fff;display:grid;place-items:center;font-family:var(--font-sans);font-weight:800;font-size:22px;box-shadow:0 5px 14px rgba(11,99,206,.24)}
.brand-copy{display:grid;line-height:1.06}.brand-copy strong{font-family:var(--font-sans);font-size:19px;font-weight:800;letter-spacing:-.01em}.brand-copy small{font-size:10px;color:#728197;letter-spacing:.08em;margin-top:5px;text-transform:uppercase}
.navlinks{display:flex;align-items:center;gap:4px;margin-left:auto}.navlinks a,.nav-login,.nav-admin{color:#33445c;text-decoration:none;font-weight:700;font-size:14px;padding:10px 10px;border-radius:9px}.navlinks a:hover,.nav-login:hover{background:var(--sky-2);color:var(--blue)}
.nav-actions{display:flex;align-items:center;gap:9px}.nav-admin{color:#8a4b00;background:#fff6e5}.nav-form{margin:0}.nav-logout{border:0;background:transparent;color:#738095;cursor:pointer;font-weight:700;padding:8px}
.trustbar{background:#083b76;color:#dcecff;font-size:12px}.trustbar-inner{min-height:34px;display:flex;align-items:center;justify-content:center;gap:34px}.trustbar i{font-style:normal;color:#73d6b4;font-weight:900;margin-right:5px}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;border:1px solid var(--blue);background:linear-gradient(180deg,var(--blue-2),var(--blue));color:#fff;padding:10px 17px;border-radius:10px;text-decoration:none;font-weight:800;cursor:pointer;box-shadow:0 5px 14px rgba(11,99,206,.16);transition:.16s ease}.btn:hover{transform:translateY(-1px);box-shadow:0 8px 20px rgba(11,99,206,.2);color:#fff}.btn.secondary{background:#fff;color:var(--navy);border-color:#b9cadb;box-shadow:none}.btn.secondary:hover{background:var(--sky-2);border-color:#8fb2d7;color:var(--navy)}.btn.danger{background:#fff;color:var(--danger);border-color:#efb8b4;box-shadow:none}.btn.small{min-height:36px;padding:7px 11px;font-size:13px;border-radius:8px}.btn.white-btn{background:#fff;color:var(--navy);border-color:#fff;box-shadow:none}.full-btn{width:100%}
.actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:24px}.text-action,.section-link,.panel-link,.card-action{font-weight:800;color:var(--blue);text-decoration:none}.text-action span,.section-link span,.panel-link span,.card-action span{display:inline-block;transition:transform .16s}.text-action:hover span,.section-link:hover span,.panel-link:hover span,.card-action:hover span{transform:translateX(3px)}

.hero{position:relative;overflow:hidden;padding:72px 0 64px;background:linear-gradient(130deg,#f8fbff 0%,#eef6ff 54%,#e2f1ff 100%);border-bottom:1px solid #d8e7f5}.hero:before{content:"";position:absolute;width:500px;height:500px;border-radius:50%;right:-180px;top:-230px;background:radial-gradient(circle,rgba(42,135,231,.16),rgba(42,135,231,0) 68%)}
.hero-grid{position:relative;display:grid;grid-template-columns:1.18fr .82fr;gap:58px;align-items:center}.hero-copy h1{font-size:clamp(42px,6.2vw,72px);max-width:780px;color:#0b2e59}.hero-copy h1 span{color:var(--blue)}.hero-copy>p{font-size:18px;color:#4d6078;max-width:760px;margin:0;line-height:1.8}.hero-kicker{display:inline-flex;align-items:center;gap:8px;color:#315b88;background:#fff;border:1px solid #cfe0ef;padding:7px 11px;border-radius:999px;font-size:12px;font-weight:800;margin-bottom:18px;box-shadow:var(--shadow-sm)}.status-dot{width:8px;height:8px;border-radius:50%;background:#16a36f;box-shadow:0 0 0 4px #dcf7ec}.hero-primary{min-width:150px}.hero-trust{display:flex;gap:20px;flex-wrap:wrap;margin-top:26px;color:#556b85;font-size:13px}.hero-trust b{color:var(--ok);margin-right:4px}
.hero-panel{background:linear-gradient(145deg,#07396f,#0b5bb4);color:#fff;border-radius:22px;padding:28px;box-shadow:0 24px 56px rgba(4,50,99,.2)}.hero-panel h2{color:#fff;font-size:26px}.hero-panel .eyebrow.light,.eyebrow.light{color:#a9d4ff}.hero-panel-head{display:flex;justify-content:space-between;gap:20px;align-items:start}.shield-mark{width:48px;height:48px;border-radius:14px;background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.2);display:grid;place-items:center;font-size:22px;font-weight:900}.process-list{margin-top:24px;display:grid;gap:0}.process-item{display:grid;grid-template-columns:52px 1fr;gap:12px;padding:17px 0;border-top:1px solid rgba(255,255,255,.14)}.process-item strong{font-size:15px}.process-item p{margin:4px 0 0;color:#cfe4fb;font-size:13px;line-height:1.65}.process-no{font-family:Georgia,serif;color:#8dccff;font-size:18px}.panel-link{display:inline-flex;margin-top:18px;color:#fff}.panel-link:hover{color:#fff}

.section{padding:56px 0}.soft{background:#fff}.section-heading{display:flex;justify-content:space-between;align-items:end;gap:24px;margin-bottom:24px}.section-heading.compact{align-items:center;margin-bottom:15px}.section-heading h1,.section-heading h2{margin-bottom:5px}.section-heading p{margin:0}.eyebrow{display:block;font-size:11px;font-weight:900;letter-spacing:.12em;text-transform:uppercase;color:var(--blue);margin-bottom:7px}.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:20px;box-shadow:var(--shadow-sm)}.card:hover{border-color:#c8d8e7}.plate{font-family:var(--font-sans);font-size:27px;font-weight:900;letter-spacing:.01em;color:#0d2d52}.price{font-family:var(--font-sans);font-size:25px;font-weight:800;color:#0c4f9c;margin-top:10px;font-variant-numeric:tabular-nums}.badge{display:inline-flex;align-items:center;width:max-content;padding:5px 9px;border-radius:999px;background:#eef4fb;color:#34506f;font-size:11px;font-weight:800;border:1px solid #dce7f2}.badge.ok,.badge.verified{background:var(--ok-bg);color:var(--ok);border-color:#b9ebd7}.badge.warn{background:var(--warn-bg);color:var(--warn);border-color:#f2d5a9}.badge.hot,.badge.sold{background:#fff0f0;color:#b12720;border-color:#ffc9c6}.badge.featured{background:#eaf3ff;color:#0b5fc6;border-color:#bdd8f8}
.listing-grid{align-items:stretch}.listing-card{position:relative;padding:0;overflow:hidden;display:flex;flex-direction:column;min-height:100%;transition:.18s ease}.listing-card:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:#bed3e8}.listing-card-top{padding:15px 16px 0;min-height:42px}.listing-img{width:calc(100% - 32px);height:190px;object-fit:cover;border-radius:10px;background:#eef2f6;margin:12px 16px 0}.listing-body{padding:16px;display:flex;flex-direction:column;flex:1}.listing-meta{color:var(--muted);font-size:13px;min-height:24px}.card-action{margin-top:auto;padding-top:16px;border-top:1px solid #edf2f7}.promoted-card{border-color:#a8c9ed;box-shadow:0 10px 28px rgba(26,98,171,.11)}.sold-ribbon{position:absolute;z-index:2;top:20px;right:-39px;width:142px;padding:6px 0;background:#b42318;color:#fff;text-align:center;font-size:11px;font-weight:900;letter-spacing:.12em;transform:rotate(45deg);box-shadow:0 3px 10px rgba(94,20,16,.2);pointer-events:none}.empty-card{grid-column:1/-1;text-align:center;padding:38px}.empty-icon{width:48px;height:48px;margin:0 auto 14px;border-radius:14px;background:var(--sky);display:grid;place-items:center;color:var(--blue);font-size:24px}

.trust-section{background:#fff;border-top:1px solid #e4edf6;border-bottom:1px solid #e4edf6}.trust-layout{display:grid;grid-template-columns:.85fr 1.15fr;gap:52px;align-items:center}.trust-copy>p{color:var(--muted);font-size:16px}.trust-cards{display:grid;gap:12px}.trust-card{display:grid;grid-template-columns:46px 1fr;gap:14px;background:var(--sky-2);border:1px solid #d7e7f6;border-radius:14px;padding:17px}.trust-card p{margin:4px 0 0;color:var(--muted);font-size:13px}.trust-icon{width:42px;height:42px;border-radius:11px;background:#fff;border:1px solid #bcd8f3;color:var(--blue);display:grid;place-items:center;font-weight:900}
.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.feature-card{position:relative;background:#fff;border:1px solid var(--line);border-radius:16px;padding:24px}.feature-card p{color:var(--muted)}.feature-card a{font-weight:800}.feature-no{font-family:Georgia,serif;color:#9fb3c9;font-size:21px}.feature-highlight{background:linear-gradient(145deg,#0a417f,#0b64c9);border-color:#0b64c9;color:#fff;box-shadow:0 18px 40px rgba(4,67,133,.16)}.feature-highlight h3,.feature-highlight a{color:#fff}.feature-highlight p{color:#d3e7fb}.feature-highlight .feature-no{color:#84c0f8}.feature-badge{position:absolute;right:18px;top:18px;background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.2);border-radius:999px;padding:4px 8px;font-size:10px;font-weight:800}.reservation-section{padding-top:20px}.reservation-banner{display:flex;align-items:center;justify-content:space-between;gap:32px;background:linear-gradient(135deg,#073b75,#0b66cd);color:#fff;border-radius:20px;padding:34px 38px;box-shadow:0 18px 45px rgba(6,58,113,.16)}.reservation-banner h2{color:#fff}.reservation-banner p{max-width:760px;color:#d2e7fb;margin-bottom:0}

.page-hero{background:linear-gradient(135deg,#f8fbff,#eaf4ff);border-bottom:1px solid #d8e7f5}.compact-hero{padding:46px 0}.compact-hero h1{font-size:clamp(34px,4vw,48px)}.compact-hero p{max-width:800px;color:var(--muted);font-size:16px;margin-bottom:0}.search-section{padding-top:28px}.search-panel{background:#fff;border:1px solid #cdddeb;border-radius:16px;padding:18px;box-shadow:var(--shadow);display:grid;grid-template-columns:1.35fr 1.05fr 1fr .75fr .9fr auto;gap:11px;align-items:end}.search-panel>div{display:flex;flex-direction:column;gap:5px}.search-panel label{font-size:12px}.optional{font-size:10px;color:#8593a4;font-weight:500;margin-left:4px}.search-btn{height:44px}.market-head{display:flex;justify-content:space-between;align-items:end;gap:20px;margin:34px 0 18px}.market-head h2{font-size:28px;margin-bottom:2px}.market-head p{margin:0}

.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px}.field{display:flex;flex-direction:column;gap:7px}.field.full{grid-column:1/-1}label{font-weight:800;font-size:13px;color:#253951}input,select,textarea{width:100%;min-height:44px;padding:10px 12px;border:1px solid #c9d5e2;border-radius:9px;background:#fff;color:var(--text);outline:none;transition:.14s ease}input:focus,select:focus,textarea:focus{border-color:#5c9fe3;box-shadow:0 0 0 3px rgba(11,99,206,.09)}textarea{min-height:116px;resize:vertical}.required-marker{color:var(--danger);font-weight:900}.required-hint{color:#6a788b}.notice{padding:13px 15px;border-radius:10px;background:var(--warn-bg);color:#7c4a0c;border:1px solid #efd3a7;margin-bottom:14px}.notice.success,.success{background:var(--ok-bg);color:#086344;border-color:#b8e6d4}.notice.error,.error,.notice.danger{background:var(--danger-bg);color:#8e1b14;border-color:#efc4c1}.stack{display:flex;flex-direction:column;gap:12px}.inline{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.auth{max-width:540px;margin:46px auto;padding:28px}.auth h1{font-size:34px}.auth-intro{padding-bottom:16px;margin-bottom:16px;border-bottom:1px solid var(--line)}.auth-trust{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0 20px}.auth-trust span{font-size:11px;color:#48617d;background:var(--sky-2);border:1px solid #d9e7f4;border-radius:999px;padding:5px 8px}
.choice-stack{display:grid;gap:10px;margin-top:8px}.choice-card{display:flex;gap:12px;align-items:flex-start;border:1px solid #cfdae6;border-radius:11px;padding:14px;cursor:pointer;background:#fff}.choice-card input{width:auto;min-height:auto;margin-top:4px}.choice-card span{display:grid;gap:3px}.choice-card small{color:#66778c;font-weight:400}.choice-card:has(input:checked){border-color:var(--blue);box-shadow:0 0 0 1px var(--blue) inset;background:#f7fbff}
.detail{display:grid;grid-template-columns:1.35fr .75fr;gap:22px}.proof{max-width:320px;border-radius:10px;border:1px solid var(--line)}
.table-wrap{overflow:auto}.table{width:100%;border-collapse:collapse;background:#fff}.table th,.table td{text-align:left;border-bottom:1px solid var(--line);padding:11px;vertical-align:top}.table th{background:#f6f9fc;color:#3c5068}.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.stat{background:#fff;border:1px solid var(--line);border-radius:13px;padding:16px}.stat strong{display:block;font-family:var(--font-sans);font-size:28px;font-weight:800;color:var(--navy);font-variant-numeric:tabular-nums}
.tabs-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.account-plan-strip{display:flex;justify-content:space-between;align-items:center;gap:18px;background:linear-gradient(135deg,#f8fbff,#edf6ff);border:1px solid #cfe0ef;border-radius:14px;padding:17px;margin:18px 0}.account-plan-strip strong{display:block;margin-top:5px}.listing-row{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:14px 0;border-bottom:1px solid var(--line)}.listing-row:last-child{border-bottom:0}.divider{border:0;border-top:1px solid var(--line);margin:20px 0}.plan-nudge{display:flex;justify-content:space-between;gap:18px;align-items:center;background:var(--sky);border:1px solid #c5ddf5;border-radius:12px;padding:14px;margin-bottom:14px}.plan-nudge span{display:block;color:#526982;margin-top:4px}

.plans-hero{padding:58px 0 46px;background:linear-gradient(135deg,#f7fbff 0%,#eaf4ff 62%,#dcefff 100%);border-bottom:1px solid #d4e5f4}.plans-hero h1{font-size:clamp(38px,5.5vw,60px);max-width:900px}.plans-hero p{font-size:17px;color:var(--muted);max-width:820px}.plan-switch{display:flex;gap:10px;margin-top:24px}.plans-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.buyer-plans{grid-template-columns:repeat(3,1fr)}.plan-card{position:relative;background:#fff;border:1px solid var(--line);border-radius:16px;padding:22px;display:flex;flex-direction:column;min-height:100%;box-shadow:var(--shadow-sm)}.plan-card.recommended{border:2px solid var(--blue);box-shadow:0 15px 36px rgba(11,99,206,.12)}.plan-card.recommended-subtle{border-color:#9ec6ed}.ribbon{position:absolute;right:14px;top:14px;background:var(--blue);color:#fff;font-size:10px;font-weight:800;padding:5px 8px;border-radius:999px}.plan-name{font-weight:900;font-size:17px;color:#243a55}.plan-price{font-family:var(--font-sans);font-size:34px;font-weight:800;color:var(--navy);margin-top:8px;font-variant-numeric:tabular-nums}.plan-card h3{font-size:17px;margin:17px 0 8px}.benefit-list{list-style:none;margin:14px 0 18px;padding:0;display:flex;flex-direction:column;gap:9px}.benefit-list li{position:relative;padding-left:21px;color:#42566e}.benefit-list li:before{content:'✓';position:absolute;left:0;color:var(--ok);font-weight:900}.plan-limit{background:#fff8ed;border:1px solid #f3d6a5;border-radius:10px;padding:11px;margin:0 0 14px;color:#6d4a12;font-size:12px}.plan-limit ul{margin:6px 0 0;padding-left:18px}.best-for{background:#f6f9fc;border:1px solid #e5edf5;border-radius:10px;padding:11px;font-size:12px;margin-top:auto;margin-bottom:14px;color:#51647a}.add-on-card{display:grid;grid-template-columns:1.3fr .7fr;gap:26px;background:linear-gradient(145deg,#073a71,#0b5fc3);color:#fff;border-radius:18px;padding:30px}.add-on-card h2{color:#fff}.add-on-card .muted{color:#cbdff3}.decision-list{display:flex;flex-direction:column;gap:10px}.decision-list>div{display:grid;grid-template-columns:260px 1fr;gap:20px;background:#fff;border:1px solid var(--line);border-radius:11px;padding:14px}.decision-list span{color:var(--muted)}

.footer{margin-top:42px;background:#082f5b;color:#c4d6e8;padding:48px 0 18px}.footer a{display:block;color:#d8e8f7;margin:8px 0;font-size:13px}.footer a:hover{color:#fff}.footer-grid{display:grid;grid-template-columns:1.8fr 1fr 1.2fr 1fr;gap:36px}.footer h4{color:#fff;font-size:14px;margin:0 0 12px}.footer .brand{display:flex;margin-bottom:16px}.footer .brand-copy strong{color:#fff}.footer .brand-copy small{color:#9db9d3}.footer-brand p{max-width:470px;font-size:13px}.footer-trust{border-left:3px solid #51a9ff;padding-left:11px;font-size:12px;color:#a9c5df}.footer-contact{font-size:12px;color:#9fb8d1}.footer-bottom{border-top:1px solid rgba(255,255,255,.12);margin-top:34px;padding-top:16px;display:flex;justify-content:space-between;gap:20px;font-size:11px;color:#8eabc6}

.pagination{display:flex;justify-content:center;align-items:center;gap:7px;flex-wrap:wrap;margin-top:28px}.pagination-link{min-width:40px;min-height:40px;padding:8px 12px;border:1px solid #c9d7e5;border-radius:9px;background:#fff;color:var(--navy);display:inline-flex;align-items:center;justify-content:center;font-weight:800}.pagination-link:hover{background:var(--sky-2);border-color:#8fb2d7}.pagination-link.active{background:var(--blue);border-color:var(--blue);color:#fff}.pagination-link.disabled{opacity:.45;pointer-events:none}.review-note{white-space:pre-line}.additional-info-form{display:grid;gap:8px;margin:14px 0;padding:14px;border:1px solid #efcf9d;border-radius:11px;background:#fffbf4}.additional-info-form textarea{min-height:92px}.disabled-metric{opacity:.58;background:#eef1f5!important;border-style:dashed!important;cursor:not-allowed}.disabled-metric strong{font-size:14px!important;color:#67778c!important}.disabled-metric small{display:block;color:#7a8797;margin-top:3px}

@media(max-width:1060px){.hero-grid{grid-template-columns:1fr;gap:32px}.hero-panel{max-width:760px}.search-panel{grid-template-columns:repeat(3,1fr)}.search-btn{width:100%}.plans-grid{grid-template-columns:repeat(2,1fr)}.footer-grid{grid-template-columns:1.5fr 1fr 1fr}.footer-grid>div:last-child{grid-column:2/4}.hide-tablet{display:none!important}}
@media(max-width:850px){.navlinks{display:none}.nav{gap:12px}.nav-actions{margin-left:auto}.grid,.feature-grid,.trust-layout,.tabs-grid,.detail,.stat-grid{grid-template-columns:1fr}.search-panel,.form-grid{grid-template-columns:1fr 1fr}.field.full{grid-column:1/-1}.section{padding:42px 0}.section-heading,.market-head{align-items:flex-start;flex-direction:column}.reservation-banner{align-items:flex-start;flex-direction:column}.footer-grid{grid-template-columns:1fr 1fr}.footer-grid>div:last-child{grid-column:auto}.hero{padding-top:50px}}
@media(max-width:600px){.container{width:min(100% - 24px,1180px)}.hide-mobile{display:none!important}.brand-copy small{display:none}.brand-mark{width:34px;height:34px}.brand-copy strong{font-size:16px}.nav{min-height:62px}.nav-login{display:none}.trustbar-inner{justify-content:flex-start}.hero{padding:38px 0}.hero-copy h1{font-size:40px}.hero-copy>p{font-size:16px}.hero-trust{display:grid;gap:8px}.hero-panel{padding:22px}.search-panel,.form-grid,.plans-grid,.buyer-plans,.add-on-card{grid-template-columns:1fr}.field.full{grid-column:auto}.listing-img{height:170px}.footer-grid{grid-template-columns:1fr}.footer-bottom{flex-direction:column}.decision-list>div{grid-template-columns:1fr;gap:4px}.account-plan-strip,.listing-row,.plan-nudge{align-items:stretch;flex-direction:column}.ribbon{position:static;display:inline-flex;margin-bottom:8px}.auth{margin:26px auto;padding:20px}}


/* Account/Admin dropdown navigation */
.nav-dropdown{position:relative}
.nav-dropdown summary{list-style:none;cursor:pointer;border:1px solid var(--line);border-radius:999px;padding:8px 13px;background:#fff;color:var(--navy);font-weight:800;box-shadow:var(--shadow-sm)}
.nav-dropdown summary::-webkit-details-marker{display:none}
.nav-dropdown[open] summary{background:var(--navy);color:#fff}
.nav-dropdown-panel{position:absolute;right:0;top:calc(100% + 10px);min-width:220px;padding:8px;background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);z-index:20}
.nav-dropdown-panel a,.nav-dropdown-panel button{display:block;width:100%;padding:10px 12px;border:0;background:transparent;color:var(--ink);text-align:left;border-radius:10px;font:inherit;font-weight:700;text-decoration:none}
.nav-dropdown-panel a:hover,.nav-dropdown-panel button:hover{background:var(--sky)}
.dropdown-form{margin:4px 0 0;padding-top:4px;border-top:1px solid var(--line)}
.mobile-menu-label{display:block;padding:8px 12px 4px;color:var(--muted);font-size:.82rem;font-weight:800;text-transform:uppercase}
.mobile-logout-form{padding:4px 8px}
.mobile-logout-form button{width:100%;border:0;border-radius:12px;background:#fee2e2;color:#991b1b;padding:10px 12px;font:inherit;font-weight:800;text-align:left}
@media (max-width:850px){.nav-admin-dropdown{display:none}}
@media (max-width:600px){.nav-account-dropdown{display:none}}


/* Google sign-in */
.google-auth-button {
  align-items: center;
  background: #fff;
  border: 1px solid #c7d2e0;
  border-radius: 12px;
  color: #172033;
  display: flex;
  font-weight: 700;
  gap: 12px;
  justify-content: center;
  min-height: 48px;
  padding: 10px 16px;
  text-decoration: none;
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.google-auth-button:hover {
  border-color: #8ea4bd;
  box-shadow: 0 6px 18px rgba(24, 56, 91, .1);
  transform: translateY(-1px);
}
.google-auth-button:focus-visible {
  outline: 3px solid rgba(37, 99, 235, .28);
  outline-offset: 2px;
}
.google-auth-button svg {
  flex: 0 0 22px;
  height: 22px;
  width: 22px;
}
.auth-divider {
  align-items: center;
  color: #667085;
  display: flex;
  font-size: .86rem;
  gap: 12px;
  margin: 18px 0;
}
.auth-divider::before,
.auth-divider::after {
  background: #dce3ec;
  content: "";
  flex: 1;
  height: 1px;
}
.auth-consent {
  font-size: .78rem;
  line-height: 1.55;
  margin: 10px 0 0;
  text-align: center;
}


/* --- ui-polish.css --- */

/* Cross-page polish for wanted, seller account, listing detail and admin. */

/* Admin action column */
.table th:last-child,.table td:last-child{min-width:220px}
.table td:last-child{vertical-align:top}
.table td:last-child form.inline{display:inline-flex;align-items:center;gap:7px;flex-wrap:wrap;margin:0 7px 7px 0;vertical-align:top}
.table td:last-child .btn{white-space:nowrap}

/* Wanted board */
.wanted-filter{display:grid;grid-template-columns:1.35fr 1fr 1fr .8fr .9fr auto;gap:12px;align-items:end;margin-bottom:24px;padding:18px;background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow-sm)}
.wanted-filter .field{min-width:0}.wanted-filter .btn{height:44px}
.wanted-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;align-items:stretch}
.wanted-card{display:flex;flex-direction:column;gap:13px;padding:17px;overflow:hidden}
.wanted-card[hidden]{display:none!important}
.wanted-card .price{margin-top:0}
.wanted-plate-wrap{background:#f5f8fc;border:1px solid #e1e9f2;border-radius:12px;padding:12px;overflow:hidden}
.wanted-plate-canvas{display:block;width:100%;height:auto;aspect-ratio:2.55/1;border-radius:8px}
.wanted-card-copy{flex:1}.wanted-card-copy h3{margin:2px 0 6px}
.wanted-card-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:auto;padding-top:12px;border-top:1px solid #edf2f7}
.wanted-auto-track{display:flex;gap:9px;align-items:flex-start;background:#eef9f5;border:1px solid #bfe8d9;border-radius:10px;padding:10px 12px;color:#17684f;font-size:12px}
.wanted-auto-track b{font-size:15px;line-height:1.2}
.wanted-empty-filter{display:none;text-align:center;padding:32px;background:#fff;border:1px dashed #bfd0e0;border-radius:14px;color:var(--muted);margin-top:12px}

.wanted-detail{margin-bottom:26px;scroll-margin-top:110px}
.wanted-detail-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(310px,.85fr);gap:20px;align-items:start}
.wanted-detail-main,.wanted-detail-side{background:#fff;border:1px solid var(--line);border-radius:18px;padding:22px;box-shadow:var(--shadow-sm)}
.wanted-detail-main .wanted-plate-wrap{max-width:620px;margin-bottom:20px}
.wanted-detail-meta{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0 18px}
.wanted-detail-side{position:sticky;top:118px}
.wanted-detail-side .btn{width:100%}

/* Listing detail interest journey */
.interest-journey{display:grid;gap:10px;margin:18px 0}
.interest-step{display:grid;grid-template-columns:34px 1fr;gap:10px;align-items:start;padding:11px 0;border-top:1px solid #e8eef5}
.interest-step:first-child{border-top:0;padding-top:0}
.interest-step-no{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:#eaf4ff;color:#0b63ce;font-weight:900}
.interest-step strong{display:block;margin-bottom:2px}.interest-step p{margin:0;color:var(--muted);font-size:13px}
.contact-coming{background:#f7f9fc;border:1px solid #dbe5ef;border-radius:11px;padding:12px 13px;margin-top:12px;font-size:13px;color:#465a72}

/* Seller account */
.account-listings{display:grid;gap:16px}
.account-listing-card{display:grid;grid-template-columns:210px minmax(0,1fr) auto;gap:18px;align-items:start;border:1px solid #dce6f0;border-radius:16px;padding:16px;background:#fff}
.account-listing-media{background:#f4f7fa;border-radius:12px;overflow:hidden;border:1px solid #e4ebf2;min-height:120px}
.account-listing-media img{display:block;width:100%;height:130px;object-fit:contain;background:#f4f7fa}
.account-listing-media .plate-placeholder{height:130px;display:grid;place-items:center;font-size:22px;font-weight:900;color:#173b64}
.account-listing-content{min-width:0}.account-listing-title{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:5px}.account-listing-title strong{font-size:21px;color:#12355f}
.account-listing-price{font-family:var(--font-sans);color:#0b58ae;font-weight:700;font-size:22px;margin:4px 0 10px}
.account-listing-controls{display:flex;flex-direction:column;gap:8px;min-width:132px}.account-listing-controls form{display:grid;gap:7px}.account-listing-controls .btn{width:100%}
.account-section-note{display:flex;align-items:flex-start;gap:9px;padding:12px 14px;border-radius:11px;background:#eef9f5;border:1px solid #c4e9dc;color:#17684f;margin-bottom:15px}

@media(max-width:1000px){
  .wanted-filter{grid-template-columns:repeat(2,minmax(0,1fr))}.wanted-filter .filter-submit{grid-column:1/-1}.wanted-filter .filter-submit .btn{width:100%}
  .wanted-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .account-listing-card{grid-template-columns:180px minmax(0,1fr)}.account-listing-controls{grid-column:1/-1;display:flex;flex-direction:row;flex-wrap:wrap}.account-listing-controls form{display:flex;flex-wrap:wrap}.account-listing-controls .btn{width:auto}
}
@media(max-width:760px){
  .wanted-filter{grid-template-columns:1fr}.wanted-filter .filter-submit{grid-column:auto}
  .wanted-grid{grid-template-columns:1fr}.wanted-detail-grid{grid-template-columns:1fr}.wanted-detail-side{position:static}
  .account-listing-card{grid-template-columns:1fr}.account-listing-media img,.account-listing-media .plate-placeholder{height:auto;min-height:150px}
  .table th:last-child,.table td:last-child{min-width:190px}
}
@media(max-width:480px){.wanted-detail-main,.wanted-detail-side{padding:16px}}

.page-switch{display:flex;align-items:center;gap:8px;min-width:220px}
.page-switch label{font-weight:800;color:var(--muted)}
.page-switch select{min-width:190px;border:1px solid var(--line);border-radius:12px;padding:10px 12px;background:#fff;color:var(--ink);font:inherit;font-weight:700}
.account-overview-grid,.admin-shortcuts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:20px 0}
.admin-shortcuts{grid-template-columns:repeat(3,minmax(0,1fr));margin-top:28px}
.stat-grid + .admin-shortcuts{clear:both}
.stat small{display:block;margin-top:4px;color:var(--muted);font-size:.78rem}
.admin-member-overview{display:grid;grid-template-columns:minmax(280px,.8fr) minmax(0,1.2fr);gap:16px;margin:20px 0 28px}
.admin-customer-age{display:grid;grid-template-columns:1fr 1fr;gap:0;padding:0;overflow:hidden}
.admin-customer-age>div{display:flex;flex-direction:column;padding:20px}
.admin-customer-age>div+div{border-left:1px solid var(--line)}
.admin-customer-age strong,.admin-plan-counts strong{color:var(--navy);font-size:2rem;font-variant-numeric:tabular-nums}
.admin-customer-age small,.admin-plan-counts small{color:var(--muted)}
.admin-plan-summary{display:flex;align-items:center;justify-content:space-between;gap:20px}
.admin-plan-summary h2{margin:0 0 4px;font-size:1.15rem}
.admin-plan-summary p{margin:0}
.admin-plan-counts{display:flex;align-items:stretch;gap:10px;flex-wrap:wrap;justify-content:flex-end}
.admin-plan-counts>div{min-width:118px;padding:12px 14px;background:var(--sky);border:1px solid #cfe4ff;border-radius:12px;display:grid}
.account-overview-card,.admin-shortcuts .card{text-decoration:none;color:var(--ink);display:flex;flex-direction:column;gap:6px}
.account-overview-card{padding:18px;background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow-sm)}
.account-overview-card strong{font-size:2rem;color:var(--navy)}
.account-overview-card small,.admin-shortcuts span{color:var(--muted)}
.listing-facts{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}
.listing-facts span{background:var(--sky);border:1px solid #cfe4ff;border-radius:999px;padding:7px 10px;color:var(--navy)}
@media (max-width:900px){.account-overview-grid,.admin-shortcuts{grid-template-columns:1fr 1fr}.admin-member-overview{grid-template-columns:1fr}.page-switch{width:100%;justify-content:flex-start}}
@media (max-width:620px){.account-overview-grid,.admin-shortcuts{grid-template-columns:1fr}.admin-customer-age{grid-template-columns:1fr}.admin-customer-age>div+div{border-left:0;border-top:1px solid var(--line)}.admin-plan-summary{align-items:flex-start;flex-direction:column}.admin-plan-counts{justify-content:flex-start}.page-switch,.page-switch select{width:100%}.section-heading{align-items:flex-start}}


/* --- mobile-menu.css --- */

.mobile-menu{display:none;position:relative}.mobile-menu summary{list-style:none;cursor:pointer;border:1px solid #c9d8e7;background:#fff;color:#173451;border-radius:9px;padding:8px 11px;font-weight:800;font-size:13px;user-select:none}.mobile-menu summary::-webkit-details-marker{display:none}.mobile-menu[open] summary{background:#f4f9ff;border-color:#9dbfe1}.mobile-menu-panel{position:absolute;right:0;top:calc(100% + 10px);width:min(280px,calc(100vw - 28px));background:#fff;border:1px solid #d6e1ec;border-radius:13px;padding:8px;box-shadow:0 18px 45px rgba(18,53,89,.18);z-index:80}.mobile-menu-panel a{display:block;padding:11px 12px;border-radius:8px;color:#273c56;font-weight:700}.mobile-menu-panel a:hover{background:#f4f9ff;color:#0b63ce}.mobile-menu-divider{height:1px;background:#e5edf5;margin:6px 4px}

/* Checkbox/radio controls are normalized in experience.css. Keep this file menu-specific. */
label:has(input[type="checkbox"]){display:flex!important;align-items:flex-start!important;justify-content:flex-start!important;gap:10px!important;flex-wrap:nowrap!important;width:100%;text-align:left;cursor:pointer}
label:has(input[type="checkbox"])>input[type="checkbox"]{order:-1}
label:has(input[type="checkbox"])>span,label:has(input[type="checkbox"])>strong{min-width:0}
.inline:has(input[type="checkbox"]){align-items:flex-start!important;justify-content:flex-start!important;flex-wrap:nowrap!important}

@media(max-width:850px){.mobile-menu{display:block}.nav-actions{margin-left:auto}.nav-admin{display:none!important}}@media(max-width:600px){.mobile-menu summary{padding:7px 9px}.mobile-menu-panel{right:-4px}}


/* --- support.css --- */

.support-launcher{position:fixed;right:22px;bottom:22px;z-index:1200;border:0;border-radius:999px;padding:13px 18px;box-shadow:0 12px 32px rgba(15,55,95,.24);cursor:pointer;font:inherit;font-weight:800;background:#0b5fc6;color:#fff}
.support-panel{position:fixed;right:22px;bottom:82px;z-index:1200;width:min(380px,calc(100vw - 28px));max-height:min(650px,calc(100vh - 120px));display:none;overflow:hidden;border:1px solid #d9e5f2;border-radius:20px;background:#fff;box-shadow:0 18px 54px rgba(15,55,95,.22)}
.support-panel.open{display:flex;flex-direction:column}
.support-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 18px;background:#f5f9fe;border-bottom:1px solid #e3edf7}
.support-head strong{display:block}.support-head small{display:block;margin-top:2px;color:#60758b}.support-close{border:0;background:transparent;font-size:22px;line-height:1;cursor:pointer;color:#496176}
.support-body{padding:16px;overflow:auto}.support-msg{max-width:92%;margin:0 0 10px;padding:11px 13px;border-radius:14px;line-height:1.5;font-size:14px}.support-msg.bot{background:#f1f6fb;color:#223f5d}.support-msg.user{margin-left:auto;background:#0b5fc6;color:#fff}.support-actions{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 4px}.support-chip{border:1px solid #c9dbee;border-radius:999px;background:#fff;padding:8px 11px;cursor:pointer;font:inherit;font-size:13px;font-weight:700;color:#24517d}.support-chip:hover{background:#f4f9ff}.support-form{display:none;margin-top:14px;padding-top:14px;border-top:1px solid #e5edf5}.support-form.show{display:block}.support-field{margin-bottom:10px}.support-field label{display:block;margin-bottom:5px;font-size:13px;font-weight:700}.support-field select,.support-field textarea,.support-field input{width:100%;box-sizing:border-box;border:1px solid #cfdbe7;border-radius:10px;padding:10px 11px;font:inherit;background:#fff}.support-field textarea{min-height:92px;resize:vertical}.support-submit{width:100%;border:0;border-radius:10px;padding:11px 14px;background:#0b5fc6;color:#fff;font:inherit;font-weight:800;cursor:pointer}.support-submit[disabled]{opacity:.6;cursor:wait}.support-status{margin-top:9px;font-size:13px;line-height:1.45;color:#536b82}.support-status.error{color:#a52b2b}.support-privacy{margin-top:10px;font-size:12px;line-height:1.45;color:#718397}
@media(max-width:600px){.support-launcher{right:14px;bottom:14px}.support-panel{right:14px;bottom:70px;max-height:calc(100vh - 92px)}}


/* --- experience.css --- */

/* Miracletabien experience layer: shared design tokens, responsive behavior and accessibility. */
:root{
  --primary:#0b5fc6;
  --primary-dark:#083b76;
  --primary-surface:#eff6ff;
  --surface:#f6f8fb;
  --text:#142033;
  --muted:#64748b;
  --border:#dce5ef;
  --success:#087a55;
  --warning:#a65a08;
  --danger:#b42318;
  --ink:var(--text);
  --shadow-xs:0 2px 8px rgba(22,56,96,.05);
  --shadow-sm:0 6px 18px rgba(22,56,96,.07);
  --shadow-md:0 12px 30px rgba(22,56,96,.10);
  --control-height:46px;
  --radius-control:11px;
  --radius-card:16px;
}
body{font-size:16px;background:var(--surface);color:var(--text)}
small,.optional{font-size:12px}.optional{color:var(--muted)}
label{font-size:14px}
h1{font-size:clamp(34px,4.8vw,56px)}
h2{font-size:clamp(28px,3vw,36px)}
.hero-copy h1{font-size:clamp(42px,5.2vw,60px)}

/* Form primitives: text-like controls and choice controls intentionally differ. */
input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),select,textarea{min-height:var(--control-height);border-radius:var(--radius-control);border-color:var(--border)}
input[type="checkbox"],input[type="radio"]{width:18px!important;min-width:18px!important;max-width:18px!important;height:18px!important;min-height:18px!important;max-height:18px!important;padding:0!important;box-shadow:none!important}
.password-control{position:relative}.password-control input{padding-right:70px}.password-toggle{position:absolute;right:6px;top:50%;transform:translateY(-50%);min-height:34px;border:0;border-radius:8px;background:transparent;color:var(--primary);padding:5px 9px;font:inherit;font-size:13px;font-weight:800;cursor:pointer}.password-toggle:hover{background:var(--primary-surface)}

.btn,.pagination-link,.mobile-menu-panel a,.nav-dropdown summary{min-height:44px}
.btn{border-radius:var(--radius-control);box-shadow:var(--shadow-xs);background:var(--primary)}
.btn:hover{box-shadow:var(--shadow-sm)}
.btn.secondary{box-shadow:none}
.btn.small{min-height:44px;padding:9px 12px}
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{outline:3px solid rgba(11,95,198,.28);outline-offset:2px}
.card,.feature-card,.plan-card,.stat,.account-overview-card{border-color:var(--border);border-radius:var(--radius-card);box-shadow:var(--shadow-xs)}
.card:hover,.listing-card:hover{box-shadow:var(--shadow-sm)}

/* Navigation */
.nav{gap:16px}.navlinks{gap:2px}.navlinks a{font-size:14px}.nav-sell{white-space:nowrap}.mobile-menu-panel{max-height:min(72vh,620px);overflow:auto}

/* Listing primitives */
.listing-img,.account-listing-media img{clip-path:none!important;aspect-ratio:2.55/1;height:auto!important;object-fit:contain!important;background:#f5f7fa}
.listing-card[data-card-link]{cursor:pointer}.listing-card[data-card-link]:focus-visible{outline:3px solid rgba(11,95,198,.28);outline-offset:3px}.listing-card-top{min-height:auto}.sold-ribbon{display:none}

/* Homepage */
.hero{padding:64px 0 58px;background:#eef6ff}.hero:before{opacity:.45}
.hero-panel{background:#fff;color:var(--text);border:1px solid #cfe0ef;box-shadow:var(--shadow-md)}.hero-panel h2{color:var(--primary-dark)}.hero-panel .eyebrow.light,.hero-panel .panel-link{color:var(--primary)}.hero-panel .process-item{border-color:#e6eef7}.hero-panel .process-item p{color:var(--muted)}.hero-panel .process-no{color:#6c9ed1}.hero-panel .shield-mark{background:var(--primary-surface);border-color:#cfe0ef;color:var(--primary)}
.hero-search-card>p{margin:0 0 18px}.hero-search-form{display:grid;grid-template-columns:1fr 1fr;gap:12px}.hero-search-form .full-btn{grid-column:1/-1;margin-top:2px}.hero-search-card .panel-link{margin-top:16px}
.feature-highlight{background:#f7fbff;color:var(--text);border-color:#a8c9ed;box-shadow:var(--shadow-sm)}.feature-highlight h3,.feature-highlight a{color:var(--primary-dark)}.feature-highlight p{color:var(--muted)}.feature-highlight .feature-no{color:#6c9ed1}.feature-highlight .feature-badge{background:#fff;border-color:#cfe0ef;color:var(--primary)}.reservation-banner{background:var(--primary-dark);box-shadow:var(--shadow-sm)}

/* Marketplace search */
.search-panel{grid-template-columns:minmax(180px,1fr) minmax(180px,1fr) auto;gap:12px;box-shadow:var(--shadow-sm)}
.search-panel .search-advanced{grid-column:1/-1;border-top:1px solid var(--border);padding-top:12px;margin-top:2px}.search-advanced summary{cursor:pointer;font-weight:800;color:var(--primary-dark);width:max-content;padding:4px 0}.search-advanced-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:2px}.search-actions{display:flex;gap:8px;align-items:end}.search-actions .btn{white-space:nowrap}.active-filters{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:14px}.filter-chip{display:inline-flex;align-items:center;min-height:32px;padding:5px 9px;border-radius:999px;background:var(--primary-surface);border:1px solid #cfe0ef;color:var(--primary-dark);font-size:12px;font-weight:700}.market-result-summary{display:flex;gap:12px;align-items:center;flex-wrap:wrap}.market-result-count{font-weight:900;color:var(--primary-dark)}.market-disclaimer{margin:8px 0 0;max-width:850px;font-size:13px;color:var(--muted)}.client-no-results{display:none}.client-no-results.show{display:block}

/* Detail page */
.detail>aside{position:sticky;top:122px;align-self:start}.detail .price{font-size:30px}

/* Sell flow */
[data-plate-generator-form]{display:block;padding:0;overflow:visible}.form-step{padding:24px;border-bottom:1px solid var(--border)}.form-step:last-child{border-bottom:0}.form-step-head{display:grid;grid-template-columns:38px minmax(0,1fr);gap:12px;align-items:start;margin-bottom:18px}.form-step-no{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--primary-surface);color:var(--primary);font-weight:900}.form-step-head h2{font-size:22px;margin:0 0 4px}.form-step-head p{margin:0;color:var(--muted);font-size:14px}.form-step-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px}.form-step-grid .full{grid-column:1/-1}.upload-help{display:flex;gap:8px;align-items:flex-start;margin-top:7px;color:var(--muted);font-size:12px}

/* Account/Admin navigation is progressively enhanced from the existing select. */
.page-switch{display:grid;gap:8px;min-width:220px}.workspace-nav{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 24px;padding:6px;background:#eef3f8;border:1px solid var(--border);border-radius:14px}.workspace-nav a{display:inline-flex;align-items:center;min-height:42px;padding:8px 12px;border-radius:10px;color:#40556e;font-weight:800;text-decoration:none}.workspace-nav a:hover{background:#fff;color:var(--primary)}.workspace-nav a.active{background:#fff;color:var(--primary-dark);box-shadow:var(--shadow-xs)}.js .page-switch{display:none}

/* Plans */
.buyer-plans{grid-template-columns:repeat(2,minmax(0,1fr));max-width:860px}.plan-card .btn[disabled]{opacity:.72}.plan-card .btn[disabled]::after{content:" · เร็ว ๆ นี้"}

/* Empty, error and loading feedback */
.empty-card{border-style:dashed;background:#fbfdff}.notice[role="alert"]{box-shadow:var(--shadow-xs)}.btn.is-loading{cursor:wait;opacity:.76;pointer-events:none}.btn.is-loading::after{content:"";width:14px;height:14px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:ux-spin .7s linear infinite}@keyframes ux-spin{to{transform:rotate(360deg)}}.field-error{margin-top:5px;color:var(--danger);font-size:12px;font-weight:700}

/* Shared confirmation dialog */
.confirm-dialog{width:min(440px,calc(100% - 28px));border:0;border-radius:18px;padding:0;box-shadow:0 24px 70px rgba(15,45,80,.22)}.confirm-dialog::backdrop{background:rgba(10,30,55,.42)}.confirm-dialog form{padding:24px}.confirm-dialog h2{font-size:22px;margin-bottom:8px}.confirm-dialog p{margin:0;color:var(--muted)}.confirm-dialog-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:22px}

@media(min-width:601px){.search-advanced summary{display:none}.search-advanced>.search-advanced-grid{display:grid!important}}
@media(max-width:1060px){.search-advanced-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.buyer-plans{max-width:none}}
@media(min-width:641px) and (max-width:900px){.listing-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}.stat-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}}
@media(max-width:850px){.detail>aside{position:static}.workspace-nav{overflow:auto;flex-wrap:nowrap}.workspace-nav a{white-space:nowrap}}
@media(max-width:700px){.nav-sell{display:none}}
@media(max-width:600px){
  body{font-size:16px}.hero-copy h1{font-size:34px}.compact-hero h1{font-size:32px}.section{padding:36px 0}.nav-register{display:none}.nav-login{display:none}.hero-search-form{grid-template-columns:1fr}
  .search-panel{grid-template-columns:1fr}.search-panel .search-advanced{grid-column:auto}.search-actions{grid-column:auto}.search-actions .btn{flex:1}.search-advanced-grid{grid-template-columns:1fr;margin-top:12px}.search-panel{padding:14px}
  .form-step{padding:18px}.form-step-grid{grid-template-columns:1fr}.form-step-grid .full{grid-column:auto}.buyer-plans{grid-template-columns:1fr}.confirm-dialog-actions{flex-direction:column-reverse}.confirm-dialog-actions .btn{width:100%}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}


/* Preserve readable content and controls in narrow grid/flex tracks. */
main .card,main .stack,main .field,.section-heading>*,.admin-user-grid>*,fieldset{min-width:0}
main .card,.notice,.privacy-request,.footer-contact{overflow-wrap:anywhere}
fieldset{max-width:100%}
.support-close{min-width:44px;min-height:44px}
.mobile-card-table td[colspan]{grid-template-columns:1fr!important}
.mobile-card-table td[colspan]::before{display:none}
@media(max-width:760px){
  input:not([type="checkbox"]):not([type="radio"]),select,textarea{font-size:16px}
  .has-mobile-primary-bar .mobile-primary-bar .btn{white-space:normal;overflow:visible;line-height:1.45}
}
@media(min-width:761px){body.has-mobile-primary-bar{padding-bottom:0}}


/* --- mobile-first.css --- */

/* Mobile-first UX layer. Keep desktop layout untouched; all changes are scoped to mobile/tablet widths. */
.mobile-primary-bar,.mobile-form-progress,.mobile-filter-toggle,.mobile-toc{display:none}

@media(max-width:850px){
  html.mobile-menu-open,html.mobile-menu-open body{overflow:hidden}
  .trustbar{display:none}
  .topbar{backdrop-filter:blur(16px)}
  .nav{min-height:64px}
  .mobile-menu[open]::before{content:"";position:fixed;inset:0;background:rgba(7,27,49,.48);z-index:68}
  .mobile-menu summary{position:relative;z-index:90;min-width:48px;text-align:center}
  .mobile-menu-panel{position:fixed;top:0;right:0;bottom:0;width:min(360px,92vw);max-height:none!important;padding:78px 12px max(20px,env(safe-area-inset-bottom));border:0;border-left:1px solid #d6e1ec;border-radius:20px 0 0 20px;box-shadow:-18px 0 50px rgba(15,45,75,.22);overflow:auto;overscroll-behavior:contain;z-index:80}
  .mobile-menu-panel a{display:flex;align-items:center;min-height:48px;padding:10px 12px}
  .mobile-menu-label{padding-top:14px}
  .mobile-logout-form button{min-height:48px}
  .compact-hero{padding:32px 0}
  .compact-hero h1{max-width:680px}
  .section-heading,.market-head{gap:12px}
  .workspace-nav{scrollbar-width:none}
  .workspace-nav::-webkit-scrollbar{display:none}
  .detail>aside,.wanted-detail-side{position:static!important}
}

@media(max-width:760px){
  .container{width:min(100% - 24px,1180px)}
  .section{padding:34px 0}
  .page-hero.compact-hero{padding:26px 0}
  .page-hero.compact-hero h1{font-size:clamp(30px,8.4vw,38px);line-height:1.2;margin-bottom:10px}
  .page-hero.compact-hero p{font-size:15px;line-height:1.7}

  /* Homepage: reduce vertical density and keep the first mobile screen action-oriented. */
  .hero{padding:32px 0 36px}
  .hero-grid{gap:22px}
  .hero-copy h1{font-size:clamp(31px,9vw,38px);line-height:1.18;margin-bottom:12px}
  .hero-copy>p{font-size:15px;line-height:1.7}
  .hero-kicker{margin-bottom:12px}
  .hero-copy .actions{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:18px}
  .hero-copy .actions .btn{width:100%;min-width:0;padding-inline:10px}
  .hero-trust{display:flex;flex-wrap:nowrap;gap:9px;overflow-x:auto;margin-top:18px;padding-bottom:3px;scrollbar-width:none}
  .hero-trust::-webkit-scrollbar{display:none}
  .hero-trust span{flex:0 0 auto;white-space:nowrap;background:#fff;border:1px solid #d8e6f3;border-radius:999px;padding:6px 9px;font-size:11px}
  .hero-panel{padding:18px;border-radius:16px}
  .hero-panel h2{font-size:23px}
  .listing-section .listing-card:nth-of-type(n+5){display:none}
  .listing-card .listing-img{width:calc(100% - 24px);margin:8px 12px 0}
  .listing-card-top{padding:12px 13px 0}
  .listing-body{padding:13px}
  .listing-card .plate{font-size:25px}
  .listing-card .price{font-size:23px;margin-top:7px}
  .listing-card .card-action{padding-top:12px}
  .trust-card,.feature-card{padding:16px}
  .reservation-banner{padding:24px 18px;border-radius:16px;gap:18px}
  .reservation-banner .btn{width:100%}

  /* Marketplace: search first, advanced choices secondary, chips swipe instead of wrapping. */
  .search-section{padding-top:16px}
  .search-panel{padding:13px;border-radius:14px;gap:10px}
  .search-actions{display:grid;grid-template-columns:1fr auto;width:100%}
  .search-actions .btn{width:100%}
  .search-advanced summary{min-height:42px;display:flex;align-items:center}
  .active-filters{flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;padding-bottom:6px;scrollbar-width:none}
  .active-filters::-webkit-scrollbar{display:none}
  .active-filters>*{flex:0 0 auto}
  .market-head .btn{width:100%}
  .market-disclaimer{font-size:12px;line-height:1.6}
  .pagination{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:8px}
  .pagination .pagination-link:not(:first-child):not(:last-child):not(.active){display:none}
  .pagination .pagination-link:first-child{justify-self:stretch}
  .pagination .pagination-link:last-child{justify-self:stretch}
  .pagination .pagination-link.active{justify-self:center}

  /* Wanted: show the two most useful fields first; JS reveals the rest on demand. */
  .wanted-filter{grid-template-columns:1fr 1fr!important;gap:10px;padding:13px;margin-bottom:18px}
  .wanted-filter.mobile-filter-collapsed>.field:nth-child(n+3):nth-child(-n+6){display:none}
  .mobile-filter-toggle{display:flex;grid-column:1/-1;width:100%;min-height:44px;align-items:center;justify-content:space-between;border:1px solid #c9d8e7;border-radius:11px;background:#f8fbff;color:#173b64;padding:9px 12px;font:inherit;font-weight:800;cursor:pointer}
  .wanted-filter .filter-submit{grid-column:1/-1!important}
  .wanted-filter .filter-submit .btn{width:100%}
  .wanted-grid{gap:13px}
  .wanted-card{padding:14px;gap:10px}
  .wanted-card-copy>p:not(.muted){display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
  .wanted-card-actions .btn{width:100%}
  .wanted-detail-main,.wanted-detail-side{padding:16px}

  /* Account: use the existing select on mobile instead of long horizontally-scrolling tabs. */
  .js .page-switch{display:grid!important;width:100%}
  .workspace-nav{display:none!important}
  .section-heading .page-switch,.page-switch select{width:100%;min-width:0}
  .account-overview-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px}
  .account-overview-card{padding:14px;border-radius:14px}
  .account-overview-card strong{font-size:1.65rem}
  .account-plan-strip{padding:14px}
  .account-plan-strip .btn{width:100%}
  .account-listing-card{padding:13px;gap:13px}
  .account-listing-controls,.account-listing-controls form{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));width:100%}
  .account-listing-controls form{grid-column:1/-1}
  .account-listing-controls .btn{width:100%!important;white-space:normal}
  .listing-facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
  .listing-facts span{border-radius:10px;padding:8px;font-size:12px}

  /* Plans: keep available plans detailed; future plans compact on phones. */
  .plans-hero{padding:34px 0 28px}
  .plans-hero h1{font-size:clamp(31px,8.5vw,39px)}
  .plans-hero p{font-size:15px}
  .plan-switch{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .plan-switch .btn{width:100%;padding-inline:8px}
  .plan-card{padding:17px;border-radius:14px}
  .plan-card:not(.recommended) .benefit-list{font-size:14px}
  .plan-card:not(.recommended) h3{margin-bottom:6px}

  /* Auth: reduce dead space and make the primary action thumb-friendly. */
  .auth{margin:10px auto 0!important;padding:18px!important;border-radius:16px}
  .auth h1{font-size:31px}
  .auth-intro{padding-bottom:12px;margin-bottom:14px}
  .auth form>.btn,.google-auth-button{width:100%;min-height:48px}
  .auth .field{gap:5px}

  /* Long forms: persistent progress without turning the form into multiple routes. */
  .mobile-form-progress{display:flex;position:sticky;top:64px;z-index:38;align-items:center;gap:10px;margin:0;padding:10px 14px;background:rgba(255,255,255,.97);border-bottom:1px solid #dce5ef;box-shadow:0 4px 12px rgba(22,56,96,.06)}
  .mobile-form-progress-copy{min-width:0;flex:1;font-size:12px;font-weight:800;color:#25486f;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .mobile-form-progress-track{width:72px;height:6px;border-radius:999px;background:#e5edf5;overflow:hidden;flex:0 0 72px}
  .mobile-form-progress-fill{height:100%;width:33.333%;background:#0b5fc6;border-radius:inherit;transition:width .18s ease}
  .sell-form .form-step{padding:17px}
  .sell-form .form-step-head{margin-bottom:14px}
  .sell-form .form-step-head h2{font-size:20px}
  .sell-form .choice-card{padding:12px}
  .sell-form .plate-preview-card{padding:11px}
  .sell-form input[type=file]{min-height:48px;padding:8px}

  /* Sticky primary action for listing/wanted detail. JS mirrors the real action safely. */
  .mobile-primary-bar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:1100;align-items:center;gap:10px;padding:9px 12px max(9px,env(safe-area-inset-bottom));background:rgba(255,255,255,.98);border-top:1px solid #d5e1ed;box-shadow:0 -8px 28px rgba(15,45,75,.13)}
  .mobile-primary-bar-copy{min-width:0;flex:1;display:grid;line-height:1.2}
  .mobile-primary-bar-copy strong{font-size:16px;color:#0b3d73;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .mobile-primary-bar-copy small{font-size:10px;color:#6b7d90;margin-top:3px}
  .mobile-primary-bar .btn{flex:0 0 auto;min-height:46px;max-width:58%;padding-inline:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  body.has-mobile-primary-bar{padding-bottom:76px}
  body.has-mobile-primary-bar .support-launcher{bottom:88px}
  body.has-mobile-primary-bar .cookie-settings{bottom:max(88px,calc(76px + env(safe-area-inset-bottom)))}

  /* Footer becomes compact accordion sections on phones. */
  .footer{padding:34px 0 16px}
  .footer-grid{gap:14px}
  .footer-brand p{margin-bottom:12px}
  .mobile-footer-section{border-top:1px solid rgba(255,255,255,.12)}
  .mobile-footer-section summary{display:flex;align-items:center;justify-content:space-between;min-height:48px;list-style:none;color:#fff;font-weight:800;cursor:pointer}
  .mobile-footer-section summary::-webkit-details-marker{display:none}
  .mobile-footer-section summary::after{content:"+";font-size:20px;color:#9fb8d1}
  .mobile-footer-section[open] summary::after{content:"−"}
  .mobile-footer-section a{min-height:42px;display:flex;align-items:center;margin:0;padding:5px 0}
  .footer-bottom{margin-top:20px;gap:6px}

  /* Support works as a bottom sheet when screen and keyboard space are limited. */
  .support-panel{left:0!important;right:0!important;bottom:0!important;width:100%!important;max-height:min(82dvh,680px)!important;border-radius:20px 20px 0 0!important;border-left:0!important;border-right:0!important;border-bottom:0!important}
  .support-head{padding:14px 16px}
  .support-body{padding:14px 16px max(18px,env(safe-area-inset-bottom))}

  /* Informational/legal pages get a compact jump menu generated by JS. */
  .mobile-toc{margin:0 0 20px;border:1px solid #d7e3ef;border-radius:13px;background:#fff;overflow:hidden}
  .mobile-toc summary{min-height:46px;display:flex;align-items:center;padding:9px 12px;font-weight:800;color:#173b64;cursor:pointer}
  .mobile-toc-links{display:grid;padding:0 12px 10px}
  .mobile-toc-links a{min-height:40px;display:flex;align-items:center;border-top:1px solid #edf2f7;font-size:13px}

  /* Admin: convert data tables to stacked cards and keep dashboard metrics compact. */
  [data-admin-section] .stat-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px}
  [data-admin-section] .stat{padding:13px}
  .mobile-card-table{display:block;background:transparent}
  .mobile-card-table tbody{display:grid;gap:12px}
  .mobile-card-table tr{display:block;background:#fff;border:1px solid #dce5ef;border-radius:14px;padding:8px 12px;box-shadow:0 2px 8px rgba(22,56,96,.05)}
  .mobile-card-table .mobile-table-heading{display:none}
  .mobile-card-table td{display:grid!important;grid-template-columns:minmax(105px,.42fr) minmax(0,.58fr);gap:10px;min-width:0!important;padding:9px 0!important;border:0!important;border-bottom:1px solid #edf2f7!important;overflow-wrap:anywhere}
  .mobile-card-table td:last-child{border-bottom:0!important}
  .mobile-card-table td::before{content:attr(data-label);font-size:12px;font-weight:800;color:#66798d}
  .mobile-card-table td form.inline{margin:0!important}
  .beta-report-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .daily-row{grid-template-columns:68px minmax(90px,1fr) 38px 38px!important;gap:6px!important;overflow:hidden}
}

@media(max-width:420px){
  .hero-copy .actions,.plan-switch{grid-template-columns:1fr}
  .wanted-filter{grid-template-columns:1fr!important}
  .mobile-filter-toggle,.wanted-filter .filter-submit{grid-column:auto!important}
  .account-overview-grid{grid-template-columns:1fr 1fr!important}
  .account-overview-card span,.account-overview-card small{font-size:11px}
  .mobile-primary-bar-copy small{display:none}
  .mobile-primary-bar .btn{max-width:62%;font-size:13px}
  [data-admin-section] .stat-grid,.beta-report-grid{grid-template-columns:1fr 1fr!important}
}

@media(min-width:761px){
  .mobile-footer-section{display:contents}
  .mobile-footer-section>summary{display:none}
  .mobile-footer-section:not([open])>:not(summary){display:block!important}
}



/* --- mobile-overflow.css --- */

/* Mobile overflow containment for the homepage hero and mobile navigation fixes.
   Keep intentional chip scrolling inside its own row instead of widening the page. */
@media(max-width:850px){
  /* backdrop-filter creates a containing block for fixed descendants in some browsers,
     which can trap the drawer inside the sticky header. Keep the mobile header opaque
     enough without blur so the menu panel remains viewport-fixed. */
  .topbar{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
  html.mobile-menu-open .topbar,.topbar:has(.mobile-menu[open]){z-index:6200}
  .mobile-menu-panel{height:100dvh;max-height:100dvh!important}
}
@media(max-width:760px){
  html,body{max-width:100%;overflow-x:clip}
  main,.hero,.hero .container,.hero-grid,.hero-grid>*,.hero-copy,.hero-panel,.hero-search-form,.hero-search-form>*{min-width:0;max-width:100%}
  .hero-copy h1,.hero-copy>p{max-width:100%;overflow-wrap:anywhere;word-break:normal}
  .hero-copy h1 br{display:none}
  .hero-copy .actions{width:100%;max-width:100%;min-width:0;grid-template-columns:repeat(2,minmax(0,1fr))}
  .hero-copy .actions>*{min-width:0;max-width:100%}
  .hero-copy .actions .btn{width:100%;min-width:0;max-width:100%;white-space:normal;text-align:center}
  .hero-trust{width:100%;max-width:100%;min-width:0;overscroll-behavior-x:contain}
  .hero-panel input,.hero-panel select,.hero-panel textarea,.hero-panel button{min-width:0;max-width:100%}
}
@media(max-width:420px){
  .hero-copy .actions{grid-template-columns:1fr}
}


/* --- brand.css --- */

/* Responsive layers are included in site-core.css in this file order to preserve the existing cascade. */
.brand-logo-image{display:block;width:54px;height:54px;flex:0 0 54px;border-radius:12px;object-fit:contain;box-shadow:0 4px 12px rgba(7,45,88,.14)}.topbar .brand{gap:10px}.footer-logo{align-items:center;gap:12px}.footer-logo .brand-logo-image{width:76px;height:76px;flex-basis:76px;border-radius:16px;box-shadow:none}@media(max-width:980px){.brand-logo-image{width:50px;height:50px;flex-basis:50px}.topbar .brand-copy small{display:none}}@media(max-width:640px){.brand-logo-image{width:46px;height:46px;flex-basis:46px;border-radius:10px}.topbar .brand-copy{display:grid;min-width:0}.topbar .brand-copy strong{font-size:16px;white-space:nowrap}.nav{gap:10px}.footer-logo .brand-logo-image{width:68px;height:68px;flex-basis:68px}.footer-logo .brand-copy{display:grid}}

/* Keep all four trust points visible and readable on tablet/mobile. */
@media(max-width:850px){
  .trustbar{display:block}
  .trustbar-inner{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 14px;min-height:0;padding:10px 0;justify-content:stretch;font-size:12px}
  .trustbar-inner>span,.trustbar .hide-mobile{display:flex;align-items:flex-start;gap:6px;min-width:0;max-width:100%;white-space:normal;line-height:1.45}
  .trustbar-inner i{flex:0 0 auto;margin:1px 0 0}
}
@media(max-width:420px){
  .trustbar-inner{grid-template-columns:1fr;gap:7px;padding:9px 0}
}