.vehicle-detail-step.active{position:fixed;inset:0;z-index:21;display:block;min-height:100dvh;overflow:hidden;background:#0879dd url("images/campaign/index_bg.jpg") center/100% 100% no-repeat}.vehicle-detail-step.active>*{position:absolute}.detail-corner-logo{top:0;left:0;z-index:3;width:16%;min-width:120px}.vehicle-detail-panel{inset:3%;z-index:1;overflow:hidden;border:7px solid #082c78;border-radius:clamp(32px,5vw,72px);background:rgba(255,255,255,.95);box-shadow:0 8px 0 rgba(3,29,99,.58)}.vehicle-detail-content{height:100%;padding:4% 9% 10%;overflow-y:auto}.detail-section{max-width:980px;margin:0 auto 16px;text-align:center}.detail-section h2{display:inline-block;min-width:min(100%,360px);margin:0 0 10px;padding:6px 34px;border-radius:10px;background:#072d7b;color:#fff;font:700 clamp(1.1rem,2.4vw,2rem) "Noto Sans Thai",sans-serif;line-height:1.2}.detail-context{margin:-5px 0 8px;color:#163d7d;font-weight:700}.detail-brand-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px}.vehicle-detail-step .choice-button{display:grid;min-height:58px;padding:6px;border:2px solid #aeb4bd;border-radius:12px;background:#fff;place-items:center;align-content:center;gap:4px;color:#122e69;text-align:center}.vehicle-detail-step .choice-button img{width:58px;height:38px;object-fit:contain}.vehicle-detail-step .choice-button span{font-size:.74rem;line-height:1.1}.vehicle-detail-step .choice-button.has-logo span{display:none}.vehicle-detail-step .choice-button.selected{border-color:#d9a900;background:#ffd200;color:#09245d;box-shadow:0 3px 0 #a97500}.detail-select-section{max-width:850px}.detail-select{display:grid;grid-template-columns:160px minmax(0,1fr);align-items:center;min-height:54px;border:2px solid #0c3b8b;border-radius:12px;background:#fff;color:#082c78;overflow:hidden;font-weight:700;text-align:left}.detail-select>span{padding:0 18px}.detail-select select{width:100%;height:54px;padding:0 42px 0 16px;border:0;border-left:2px solid #e4e8f1;outline:0;background:#fff;color:#092d77;font:700 1rem "Noto Sans Thai",sans-serif}.detail-select select:disabled{background:#edf1f7;color:#7f8a9a}.detail-payment-section{margin-top:22px}.detail-payment-section h2{background:#ffd200;color:#082c78;box-shadow:0 3px 0 #c28a00}.payment-status-choices{display:grid;max-width:620px;margin:auto;grid-template-columns:repeat(2,1fr);gap:20px}.payment-status-choices button{min-height:56px;border:3px solid #2769d6;border-radius:12px;background:#062b80;color:#fff;font:700 clamp(1rem,2vw,1.5rem) "Noto Sans Thai",sans-serif;box-shadow:0 4px 0 #041f63;cursor:pointer}.payment-status-choices button.selected{border-color:#ffec6e;background:#ffd200;color:#09245d;box-shadow:0 4px 0 #ac7600}.detail-next{bottom:2%;left:50%;z-index:3;width:20%;min-width:190px;padding:0;border:0;background:transparent;transform:translateX(-50%);cursor:pointer}.detail-next:disabled{opacity:.45;cursor:not-allowed;filter:grayscale(.15)}.detail-next img,.detail-back img{display:block;width:100%}.detail-back{right:4%;bottom:2%;z-index:3;width:13%;min-width:100px;padding:0;border:0;background:transparent;cursor:pointer}.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@media(max-width:600px){.detail-corner-logo{width:25%;min-width:0}.vehicle-detail-panel{inset:2%;border-width:4px;border-radius:30px}.vehicle-detail-content{padding:20% 6% 18%}.detail-section{margin-bottom:14px}.detail-section h2{min-width:0;margin-bottom:8px;padding:5px 18px;font-size:1rem}.detail-brand-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}.vehicle-detail-step .choice-button{min-height:52px;padding:4px;border-radius:9px}.vehicle-detail-step .choice-button img{width:44px;height:30px}.vehicle-detail-step .choice-button span{font-size:.62rem}.detail-select{grid-template-columns:105px minmax(0,1fr);min-height:44px;border-radius:9px}.detail-select>span{padding:0 9px;font-size:.75rem}.detail-select select{height:44px;padding-left:8px;font-size:.76rem}.detail-payment-section{margin-top:16px}.payment-status-choices{gap:10px}.payment-status-choices button{min-height:46px;border-radius:9px;font-size:.9rem}.detail-next{bottom:1%;width:35%;min-width:0}.detail-back{right:3%;bottom:1%;width:22%;min-width:0}}
/* Compact iPad composition: logo grid, fields and actions share one panel without overlap. */
@media(min-width:601px){
 .vehicle-detail-content{padding:3% 8% 3%;overflow:hidden}
 .detail-section{margin-bottom:10px}
 .detail-brand-grid{max-width:800px;margin:0 auto}
 .vehicle-detail-step #brand-choices .choice-button{aspect-ratio:auto;height:70px;min-height:0;padding:5px}
 .vehicle-detail-step #brand-choices .choice-button img{width:62px;height:44px}
 .detail-select-section{max-width:800px}
 .detail-payment-section{margin-top:12px}
 .detail-actions{display:flex;align-items:center;justify-content:center;gap:28px;margin:16px auto 0}
 .vehicle-detail-step .detail-next,.vehicle-detail-step .detail-back{position:static;z-index:auto;display:block;min-width:0;margin:0;padding:0;background:transparent;transform:none}
 .vehicle-detail-step .detail-next{width:190px}.vehicle-detail-step .detail-back{width:120px}
}
@media(max-width:600px){
 .vehicle-detail-step #brand-choices .choice-button{aspect-ratio:auto;height:54px;min-height:0}
 .detail-actions{display:flex;align-items:center;justify-content:center;gap:12px;margin:14px auto 0}
 .vehicle-detail-step .detail-next,.vehicle-detail-step .detail-back{position:static;z-index:auto;display:block;min-width:0;margin:0;padding:0;background:transparent;transform:none}
 .vehicle-detail-step .detail-next{width:34%}.vehicle-detail-step .detail-back{width:22%}
}
/* v4: horizontal field rows keep the full detail form within the iPad canvas. */
@media(min-width:601px){
 .vehicle-detail-content{padding:2.5% 8% 3%;overflow-y:auto}
 .detail-inline-row{display:grid;max-width:800px;grid-template-columns:235px minmax(0,1fr);align-items:center;gap:16px;margin-bottom:10px}
 .detail-inline-row h2{display:flex;min-width:0;min-height:54px;align-items:center;justify-content:center;margin:0;padding:6px 14px;font-size:1.25rem}
 .detail-inline-row .detail-select{width:100%}
 .detail-inline-row.detail-payment-section{margin-top:0}
 .detail-inline-row.detail-payment-section h2{background:#072d7b;color:#fff;box-shadow:none}
 .detail-inline-row .payment-status-choices{width:100%;max-width:none;gap:12px}
 .detail-inline-row .payment-status-choices button{min-height:52px;font-size:1.1rem}
 .detail-actions{margin-top:10px}
}
@media(max-width:600px){
 .detail-inline-row{display:grid;grid-template-columns:1fr;gap:7px;margin-bottom:12px}
 .detail-inline-row h2{margin:0}.detail-inline-row.detail-payment-section h2{background:#072d7b;color:#fff;box-shadow:none}
}
/* v5: use remaining iPad space for the logo cards and anchor actions independently. */
@media(min-width:601px){
 .vehicle-detail-step #brand-choices .choice-button{height:86px}
 .vehicle-detail-step #brand-choices .choice-button img{width:70px;height:52px}
 .detail-actions{position:relative;width:100%;height:82px;margin-top:12px}
 .vehicle-detail-step .detail-next{position:absolute;top:0;left:50%;width:190px;transform:translateX(-50%)}
 .vehicle-detail-step .detail-back{position:absolute;top:8px;right:0;width:120px}
}
/* v6: let brand artwork use the full compact card. */
@media(min-width:601px){.vehicle-detail-step #brand-choices .choice-button{padding:0}.vehicle-detail-step #brand-choices .choice-button img{width:84px;height:68px}}
@media(max-width:600px){.vehicle-detail-step #brand-choices .choice-button{padding:0}.vehicle-detail-step #brand-choices .choice-button img{width:58px;height:44px}}
/* Desktop iPad canvas: keep the vehicle detail panel inside the shared 1180 x 820 campaign canvas. */
@media(min-width:1181px){
 .vehicle-detail-step.active{position:absolute;inset:0;min-height:820px;background-size:1180px 820px}
}
/* Status dropdown matches the model and registration-year controls. */
.detail-payment-section{margin-top:0}.detail-payment-section .detail-select{width:100%}

/* Dropdowns carry their own prompt, so the redundant leading label column is removed. */
.detail-select{grid-template-columns:minmax(0,1fr)}
.detail-select select{border-left:0}

/* A selected brand card keeps its label readable on the yellow background. */
.vehicle-detail-step .choice-button.selected,.vehicle-detail-step .choice-button.selected span{color:#08286e;-webkit-text-stroke:1px #fff;paint-order:stroke fill;text-shadow:0 2px 0 #061b56,1px 3px 2px rgba(0,0,0,.35)}
/* Page 3 tablet canvas: reserve two brand rows and keep the remaining controls anchored. */
.detail-main-logo{display:none}.detail-disclaimer{margin:14px auto 0;color:#062b71;font:500 .72rem/1.35 "Noto Sans Thai",sans-serif;text-align:center}
@media(min-width:601px){
 .detail-corner-logo{width:11%;min-width:80px}
 .detail-main-logo{position:absolute;top:2%;left:50%;z-index:3;display:block;width:min(30vw,360px);transform:translateX(-50%)}
 .detail-main-logo img{display:block;width:100%;height:auto}
 .vehicle-detail-panel{inset:0;border:0;border-radius:0;background:transparent;box-shadow:none;overflow:visible}
 .vehicle-detail-content{position:relative;height:100%;padding:0;overflow:hidden}
 .vehicle-detail-content>.detail-section{position:absolute;left:50%;width:min(82%,980px);max-width:none;margin:0;transform:translateX(-50%)}
 .vehicle-detail-content>.detail-section:nth-of-type(1){top:24%}
 .vehicle-detail-content>.detail-section:nth-of-type(2){top:52%}
 .vehicle-detail-content>.detail-section:nth-of-type(3){top:61%}
 .vehicle-detail-content>.detail-section:nth-of-type(4){top:70%}
 .detail-section h2{margin:0 0 7px;padding:5px 28px;font-size:clamp(1rem,2vw,1.55rem)}
 .detail-brand-grid{grid-template-rows:repeat(2,62px);gap:8px;max-width:900px;overflow:hidden}
 .vehicle-detail-step #brand-choices .choice-button{height:62px;padding:0}
 .vehicle-detail-step #brand-choices .choice-button img{width:76px;height:52px}
 .detail-inline-row{grid-template-columns:235px minmax(0,1fr);gap:16px;width:min(100%,800px)}
 .detail-inline-row h2{min-height:50px;margin:0;padding:5px 12px;font-size:1.18rem}
 .detail-select,.detail-select select{min-height:50px;height:50px}
 .detail-disclaimer{position:absolute;top:79%;left:50%;z-index:3;width:82%;margin:0;font-size:clamp(.53rem,.78vw,.70rem);line-height:1.3;transform:translateX(-50%)}
 .detail-actions{position:static!important;width:auto!important;height:auto!important;margin:0!important}
 .vehicle-detail-step .detail-next{position:absolute;top:auto;bottom:1.5%;left:50%;z-index:4;width:190px;transform:translateX(-50%)}
 .vehicle-detail-step .detail-back{position:absolute;top:auto;right:3%;bottom:1.5%;z-index:4;width:120px}
}
@media(max-width:600px){.detail-corner-logo{width:18%;min-width:0}.detail-main-logo{display:none}}
/* Larger two-row brand cards improve recognition without allowing the following fields to reflow. */
@media(min-width:601px){
 .detail-brand-grid{grid-template-rows:repeat(2,70px)}
 .vehicle-detail-step #brand-choices .choice-button{height:70px}
 .vehicle-detail-step #brand-choices .choice-button img{width:86px;height:58px}
 .vehicle-detail-content>.detail-section:nth-of-type(2){top:54%}
 .vehicle-detail-content>.detail-section:nth-of-type(3){top:63%}
 .vehicle-detail-content>.detail-section:nth-of-type(4){top:72%}
 .detail-disclaimer{top:81%}
}