/* 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}}