/* Wizard glue on top of the lifted original-style.css. Layout/flow only. */
.sq-wizard{width:100%;font-family:Kanit,Poppins,sans-serif;}
/* beat the Elementor theme's img cap on the landing hero */
#sq-wizard .sq-step[data-step="location"] #third img{max-width:112% !important;}
.sq-progress{height:8px;background:#e9edf3;border-radius:8px;overflow:hidden;margin-bottom:0;}
.sq-progress-bar{height:100%;width:0;background:#314566;transition:width .35s ease;}
.sq-step h2{color:#314566;margin-bottom:16px;}
.sq-choices{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px;margin:12px 0;}
.sq-choice{display:block;border:2px solid #dfe4ec;border-radius:12px;padding:16px;cursor:pointer;transition:.15s;}
.sq-choice:hover{border-color:#94a3bd;}
.sq-choice input{margin-right:8px;}
.sq-choice:has(input:checked){border-color:#314566;background:#eef2f8;}
.sq-size{display:flex;gap:16px;flex-wrap:wrap;}
.sq-size label{display:flex;flex-direction:column;font-weight:600;color:#3a4658;}
.sq-size input{width:160px;padding:8px 10px;border:1px solid #cfd6e2;border-radius:8px;}
.sq-nav{display:flex;justify-content:space-between;gap:12px;margin-top:24px;}
/* one shared controls bar for the whole wizard, pinned to the bottom of the viewport */
.sq-controls{position:sticky;bottom:0;z-index:9999;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 20px;background:#fff;border-top:1px solid #e0e4ea;box-shadow:0 -2px 10px rgba(20,30,50,.06);}
.sq-controls .sq-btn-next{margin-left:0;}
/* zone context label shown on each per-zone step (fixes the floating text) */
.sq-zone-label{text-align:center;font-weight:600;color:#5a6474;margin:0 0 8px;font-size:1rem;}
.sq-zone-label:empty{display:none;}
#sq-wizard .sq-step[data-step="size"] .sq-zone-label{display:none;} /* size shows the zone in its heading */
/* toast notification (replaces alert) */
.sq-toast{position:fixed;left:50%;bottom:88px;transform:translateX(-50%) translateY(20px);background:#314566;color:#fff;padding:12px 22px;border-radius:10px;font-weight:600;box-shadow:0 6px 24px rgba(20,30,50,.25);opacity:0;pointer-events:none;transition:.25s;z-index:99999;max-width:90%;text-align:center;}
.sq-toast.show{opacity:1;transform:translateX(-50%) translateY(0);}
.sq-btn-next,.sq-btn-back{border:0;border-radius:10px;padding:12px 28px;font-weight:700;cursor:pointer;}
.sq-btn-next{background:#314566;color:#fff;margin-left:auto;}
.sq-btn-next:disabled{background:#aeb7c7;cursor:not-allowed;}
.sq-btn-back{background:#eef2f8;color:#314566;}
.sq-error{color:#c0392b;font-weight:600;margin-top:12px;}
.sq-hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;opacity:0;}
.sq-loading{padding:40px;text-align:center;color:#5a6474;}
.sq-quote-table{width:100%;border-collapse:collapse;margin-bottom:20px;}
.sq-quote-table th,.sq-quote-table td{padding:8px 10px;border-bottom:1px solid #eef1f5;}
.sq-quote-table th{background:#f6f8fb;text-align:left;}
.sq-right{text-align:right;}
.sq-zone-row td{background:#f0f3f8;}
.sq-grand td{background:#dbe2ee;font-size:1.1rem;}
.sq-lead{background:#fff;border:1px solid #e6e9ef;border-radius:14px;padding:24px;margin:20px auto 0;max-width:560px;box-shadow:0 2px 14px rgba(20,30,50,.06);}
.sq-lead .form-control{display:block;width:100%;padding:12px 16px;border:1px solid #cfd6e2;border-radius:10px;font-size:1rem;font-family:inherit;margin-bottom:12px;background:#fff;color:#1f2733;box-sizing:border-box;}
.sq-lead .form-control::placeholder{color:#707a8a!important;opacity:1!important;}
.sq-lead .form-control:focus{outline:none;border-color:#314566;box-shadow:0 0 0 3px rgba(49,69,102,.12);}
.sq-lead label{font-size:.9rem;color:#5a6474;display:flex;align-items:center;gap:8px;}
.sq-lead label input[type=checkbox]{width:auto;}
.sq-thankyou{text-align:center;padding:60px 20px;}
.sq-thankyou h2{color:#2c7a4b;}
/* payment-schedule modal */
#myModal.modal{display:none;position:fixed;inset:0;z-index:99999;background:rgba(20,28,44,.6);backdrop-filter:blur(3px);}
#myModal .modal-content{background:#fff;max-width:600px;margin:7vh auto;padding:0 0 10px;border-radius:16px;position:relative;line-height:1.6;max-height:84vh;overflow:auto;box-shadow:0 24px 70px rgba(20,30,50,.4);font-family:Kanit,Poppins,sans-serif;color:#3a4658;}
#myModal .modal-content::before{content:"เงื่อนไขการชำระเงินและขั้นตอนการทำงาน";display:block;background:linear-gradient(135deg,#314566,#243450);color:#fff;font-weight:700;font-size:1.1rem;padding:20px 28px;border-radius:16px 16px 0 0;position:sticky;top:0;}
#myModal .modal-content>p:nth-of-type(-n+4){position:relative;margin:0;padding:16px 28px 16px 30px;border-bottom:1px solid #eef1f5;font-size:.95rem;}
#myModal .modal-content>p:nth-of-type(-n+4)::before{content:"";position:absolute;left:0;top:12px;bottom:12px;width:4px;border-radius:3px;background:#4a6da8;}
#myModal .modal-content>p b{white-space:nowrap;color:#1f2733;}
#myModal .sq-pay{color:#c0392b;font-size:1.25rem;font-weight:700;}
#myModal .modal-content>p:nth-of-type(5){margin:10px;padding:16px 20px;background:#f6f8fb;border-radius:10px;font-size:.8rem;color:#7a8494;line-height:1.55;border-bottom:0;}
#myModal .modal-content>p:nth-of-type(5) strong{color:#7a8494;font-weight:500;}
#myModal .close{position:absolute;right:18px;top:16px;font-size:26px;line-height:1;cursor:pointer;color:#fff;z-index:3;opacity:.85;}
#myModal .close:hover{opacity:1;}
#myModal .modal-content a[href^="tel"]{display:inline-flex;align-items:center;gap:8px;margin:6px 28px 18px;color:#314566!important;text-decoration:none;font-weight:600;}
#myBtn1{display:inline-block;margin:14px auto;color:#314566;text-decoration:underline;cursor:pointer;font-weight:600;text-align:center;}
/* lead form labels */
.sq-lead .sq-field-label{display:block;font-size:.9rem;font-weight:600;color:#3a4658;margin:12px 0 5px;}
.sq-lead .sq-field-label:first-child{margin-top:0;}
.sq-req{color:#c0392b;}
.sq-consent-label{display:flex;align-items:center;gap:8px;margin-top:16px;font-size:.9rem;color:#5a6474;}
.sq-consent-label input{width:auto;flex:0 0 auto;}

/* ===== redesigned quote step (data-step="quote") ===== */
#sq-wizard .sq-step[data-step="quote"] > .con{padding-bottom:48px!important;}
.sq-quote{display:grid;grid-template-columns:1fr;gap:24px;max-width:1040px;width:100%;margin:0 auto;}
@media(min-width:920px){.sq-quote{grid-template-columns:1.05fr .95fr;align-items:start;}}
.sq-quote-price,.sq-quote-lead{background:#fff;border-radius:18px;padding:28px;box-shadow:0 6px 28px rgba(20,30,50,.09);}
.sq-quote-price h2{margin:0 0 18px;color:#314566;font-size:1.5rem;text-align:center;}
.sq-quote-lead h3{margin:0 0 4px;color:#314566;font-size:1.35rem;}
.sq-lead-sub{margin:0 0 18px;color:#7a8494;font-size:.95rem;}
.sq-quote-lead .sq-lead{background:transparent;border:0;box-shadow:none;padding:0;margin:0;max-width:none;}
/* breakdown */
.sq-bd-table{width:100%;border-collapse:collapse;font-size:.92rem;}
.sq-bd-table td{padding:9px 6px;border-bottom:1px solid #f0f2f6;color:#3a4658;vertical-align:top;}
.sq-bd-zone td{background:#f6f8fb;font-weight:700;color:#314566;padding-top:12px;border-radius:6px;}
.sq-bd-item{padding-left:16px!important;}
.sq-bd-qty{white-space:nowrap;color:#7a8494;}
.sq-bd-table .sq-right{text-align:right;white-space:nowrap;}
.sq-bd-sub td{font-weight:600;color:#1f2733;border-top:1px solid #e0e4ea;}
/* grand total */
.sq-grand{display:flex;justify-content:space-between;align-items:center;background:linear-gradient(135deg,#314566,#243450);color:#fff;padding:18px 24px;border-radius:14px;margin-top:18px;gap:12px;}
.sq-grand span{font-size:1rem;opacity:.92;}
.sq-grand b{font-size:1rem;font-weight:600;white-space:nowrap;}
.sq-grand #sq-grand-total-amt{font-size:1.95rem;font-weight:800;}
#myBtn1{display:block;text-align:center;margin:16px auto 0;}
/* big submit CTA */
.sq-submit-big{width:100%;background:#314566;color:#fff;border:0;padding:16px 20px;border-radius:12px;font-size:1.15rem;font-weight:700;cursor:pointer;margin-top:20px;font-family:inherit;box-shadow:0 6px 18px rgba(49,69,102,.3);transition:.15s;}
.sq-submit-big:hover{filter:brightness(1.05);transform:translateY(-1px);}
.sq-submit-big:disabled{opacity:.7;cursor:default;transform:none;}
/* thank-you: green LINE button */
.sq-ty-line{text-align:center;margin-top:24px;}
.sq-line-btn{display:inline-flex;align-items:center;gap:10px;background:#06C755;color:#fff!important;text-decoration:none;font-weight:700;font-size:1.05rem;padding:14px 28px;border-radius:999px;box-shadow:0 6px 18px rgba(6,199,85,.35);transition:.15s;}
.sq-line-btn:hover{filter:brightness(1.05);transform:translateY(-1px);color:#fff!important;}
.sq-line-btn svg{flex:0 0 auto;}

/* ===== location (landing) tweaks ===== */
#sq-wizard .sq-step[data-step="location"] #first{padding-top:20px;}
#sq-wizard .sq-step[data-step="location"] #first .arrow h4{font-weight:300;}
#sq-wizard .sq-step[data-step="location"] #third h4{font-weight:300;}
#sq-wizard .sq-step[data-step="location"] #sec h3{font-weight:300;}
#sq-wizard .sq-step[data-step="location"] #four h4{font-weight:300;}
#sq-wizard .sq-step[data-step="location"] #five h4{font-weight:300;}
#sq-wizard .sq-step[data-step="location"] #quote h2{font-weight:300;}

/* ===== uniform preview-box height (no layout jump when choice changes) ===== */
:root{--sq-preview-h:380px;}
@media(max-width:600px){:root{--sq-preview-h:240px;}}
#sq-wizard .sq-step[data-step="type"] .picture,
#sq-wizard .sq-step[data-step="size"] .picture,
#sq-wizard .sq-step[data-step="roof"] .picture,
#sq-wizard .sq-step[data-step="batten"] .picture,
#sq-wizard .sq-step[data-step="polecount"] .picture,
#sq-wizard .sq-step[data-step="poletype"] .picture,
#sq-wizard .sq-step[data-step="design"] .picture,
#sq-wizard .sq-step[data-step="light"] .picture{
	height:var(--sq-preview-h)!important;width:100%;max-width:560px;margin:0 auto 8px;
	position:relative;overflow:hidden;border-radius:20px;background:#fff;
}
/* boxes + carousels fill the fixed-height picture */
#sq-wizard .sq-zone-step .picture .box,#sq-wizard .sq-zone-step .picture .box1,
#sq-wizard .sq-step[data-step="type"] .picture .box,#sq-wizard .sq-step[data-step="type"] .picture .box1{
	height:100%!important;width:100%!important;top:0;left:0;
}
#sq-wizard .picture .carousel,#sq-wizard .picture .carousel-inner,#sq-wizard .picture .carousel-item{height:100%!important;}
/* photos fill (cover); floorplans on the size step show whole (contain) */
#sq-wizard .sq-step[data-step="type"] .picture img,
#sq-wizard .sq-step[data-step="roof"] .picture img,
#sq-wizard .sq-step[data-step="batten"] .picture img,
#sq-wizard .sq-step[data-step="polecount"] .picture img,
#sq-wizard .sq-step[data-step="design"] .picture img,
#sq-wizard .sq-step[data-step="light"] .picture img{
	width:100%!important;height:100%!important;object-fit:cover!important;border-radius:20px;
}
/* diagrams shown whole (not cropped) */
#sq-wizard .sq-step[data-step="size"] .picture img,
#sq-wizard .sq-step[data-step="poletype"] .picture img{width:100%!important;height:100%!important;object-fit:contain!important;}
#sq-wizard .picture .carousel-item .tag{height:100%;overflow:auto;padding:16px;border-radius:20px;}

/* misc CSS tweaks */
.sq-grand #sq-grand-total-amt{font-size:1.5em;font-weight:600;}
.sq-submit-big{font-weight:500;}
.sq-type-variant,.sq-cards-variant,.sq-poleno-variant,.sq-design-variant,.sq-roof-variant{width:100%;}