/* The order block of the product pages: our heading, price card and delivery note, then Admin DZ's checkout
   (injected in place of <div data-shop-checkout>, with its own /__checkout/form.css loaded before this file).
   Only the look is changed here: never hide or reset Admin DZ's fields, hidden inputs, honeypot or states.
   Three designs, chosen per product in data/products.json ("form_variant") or with ?form=a|b|c in the link:
     .sd-order--a  "Leader Auto": blue title bar, white card, grey fields, green button
     .sd-order--b  "Brand card":  the whole block in royal blue, yellow price and yellow button
     .sd-order--c  "Bold yellow": yellow header, price in a blue badge, blue-bordered fields, green button */

/* ---------- shared: Cairo everywhere, bold, compact ---------- */
.sd-order{
  --sd-blue:#002d92;--sd-yellow:#fed007;--sd-green:#16a34a;--sd-green-dark:#15803d;--sd-ink:#142441;--sd-muted:#4b5568;
  --sd-icon-name:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23002d92' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='7.5' r='4'/%3E%3Cpath d='M4 21v-1.5a8 8 0 0 1 16 0V21'/%3E%3C/svg%3E");
  --sd-icon-phone:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23002d92' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.1 4.2 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1 1 .4 1.9.7 2.8a2 2 0 0 1-.5 2.1L8 9.9a16 16 0 0 0 6 6l1.3-1.3a2 2 0 0 1 2.1-.4c.9.3 1.8.6 2.8.7a2 2 0 0 1 1.7 2z'/%3E%3C/svg%3E");
  --sd-icon-pin:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23002d92' stroke-width='2.2'%3E%3Cpath d='M20 10c0 6-8 12-8 12S4 16 4 10a8 8 0 1 1 16 0Z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E");
  --sd-chevron:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='m1 1 5 5 5-5' fill='none' stroke='%23002d92' stroke-width='2'/%3E%3C/svg%3E");
  scroll-margin-top:16px;font-family:'Cairo',sans-serif;color:var(--sd-ink)
}
.sd-order,.sd-order *:not(svg):not(path):not(circle):not(rect){font-family:'Cairo',sans-serif !important}
.sd-order-heading{padding:12px 16px;text-align:center}
.sd-order-heading h1{margin:0;font-size:19px;line-height:1.4;font-weight:900;letter-spacing:0;text-transform:uppercase}
.sd-order-heading p{margin:2px 0 0;font-size:13px;line-height:1.5;font-weight:700}
.sd-order-body{padding:12px 14px 14px}
.sd-order-price{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px;padding:8px 12px;border-radius:14px}
.sd-order-promo{padding:3px 10px;border-radius:999px;font-size:12px;line-height:1.5;font-weight:800;unicode-bidi:isolate;white-space:nowrap}
.sd-order .price{font-size:34px;line-height:1.2;font-weight:900}
.sd-order .price small{font-size:17px;font-weight:800}
.sd-order-delivery{display:flex;align-items:center;gap:8px;margin:8px 0 10px;padding:7px 12px;border-radius:12px;font-size:13px;line-height:1.5;font-weight:700}
.sd-order-delivery .icon{flex:none;width:20px;height:20px}

/* Admin DZ's form: same fields, compact and bold */
.sd-order .sc:not(.sc-sheet):not(.sc-thanks){--sc-focus:var(--sd-blue);max-width:none;margin:0;padding:0;border:0;border-radius:0;background:none;font-size:16px;line-height:1.4;color:inherit}
.sd-order .sc h2.sc-title,.sd-order .sc p.sc-sub{display:none}
.sd-order .sc .sc-group:has(>[data-field=name]){display:grid;grid-template-columns:minmax(0,1fr);gap:9px;margin:0;background:none;box-shadow:none;overflow:visible}
.sd-order .sc .sc-group:has(>[data-field=name])>.sc-row{min-height:0;margin:0;padding:0;border-radius:0;background:none;box-shadow:none}
.sd-order .sc .sc-group:has(>[data-field=name])>.sc-row::before{display:none}
.sd-order .sc .sc-group:has(>[data-field=name])>.sc-row:focus-within,.sd-order .sc .sc-group:has(>[data-field=name])>.sc-row.sc-bad{background:none;box-shadow:none}
.sd-order .sc .sc-group .sc-label,.sd-order .sc .sc-total>span:first-child{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.sd-order .sc [data-field=name]{--sd-field-icon:var(--sd-icon-name)}
.sd-order .sc [data-field=phone]{--sd-field-icon:var(--sd-icon-phone)}
.sd-order .sc [data-field=wilaya]{--sd-field-icon:var(--sd-icon-pin)}
.sd-order .sc .sc-group:has(>[data-field=name]) .sc-input{display:block;width:100%;height:50px;min-height:50px;padding:0 14px 0 46px;border:1px solid #d8dee8;border-radius:12px;background-color:#f3f5f8;background-image:var(--sd-field-icon);background-repeat:no-repeat;background-position:left 14px center;background-size:21px;font-size:16px;font-weight:700;line-height:normal;color:var(--sd-ink);text-align:left}
.sd-order .sc[dir=rtl] .sc-group:has(>[data-field=name]) .sc-input{padding:0 46px 0 14px;background-position:right 14px center;text-align:right}
.sd-order .sc .sc-group:has(>[data-field=name]) select.sc-input{padding-right:38px;line-height:48px;background-image:var(--sd-field-icon),var(--sd-chevron);background-position:left 14px center,right 15px center;background-size:21px,12px}
.sd-order .sc[dir=rtl] .sc-group:has(>[data-field=name]) select.sc-input{padding-left:38px;padding-right:46px;background-position:right 14px center,left 15px center}
.sd-order .sc .sc-group:has(>[data-field=name]) input.sc-input::placeholder{color:var(--sd-muted);font-weight:700;opacity:1}
.sd-order .sc .sc-group:has(>[data-field=name]) select.sc-input:has(option[value=""]:checked){color:var(--sd-muted)}
.sd-order .sc .sc-group:has(>[data-field=name]) .sc-input:focus{outline:0;border-color:var(--sd-blue);box-shadow:0 0 0 3px #002d9226;background-color:#fff}
.sd-order .sc .sc-group:has(>[data-field=name]) .sc-bad .sc-input{border-color:#dc2626;box-shadow:0 0 0 3px #dc26261a}
.sd-order .sc .sc-group:has(>[data-field=name]) p.sc-err{margin:4px 2px 0;font-size:12.5px;line-height:1.5;font-weight:700}
.sd-order .sc:not(.sc-thanks) .sc-summary{display:flex;align-items:baseline;gap:8px;margin:9px 2px 0;padding:0;background:none;border-radius:0}
.sd-order .sc .sc-summary>.sc-line{flex:1;min-width:0;padding:0;font-size:12.5px;line-height:1.6;font-weight:700}
.sd-order .sc .sc-summary>.sc-line>span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sd-order .sc .sc-summary>.sc-line:not(.sc-total):not(.sc-disc)>.sc-amt{display:none}
.sd-order .sc .sc-summary>.sc-total{flex:none;margin:0;padding:0;border:0}
.sd-order .sc .sc-summary .sc-total .sc-amt{font-size:14px;font-weight:900}
.sd-order .sc .sc-summary:has(.sc-disc:not([hidden])){flex-wrap:wrap}
.sd-order .sc .sc-summary>.sc-disc:not([hidden]){flex-basis:100%;order:1}
.sd-order .sc details.sc-promo{margin:6px 0 0}
.sd-order .sc details.sc-promo>summary{min-height:44px;display:flex;align-items:center;font-size:13px;font-weight:700}
.sd-order .sc .sc-alert{font-weight:700}
.sd-order .sc:not(.sc-thanks) button.sc-submit{min-height:56px;width:100%;margin:10px 0 0;padding:8px 16px;border:0;border-radius:14px;justify-content:center;gap:10px;font-size:20px;font-weight:900;line-height:1.4;cursor:pointer}
.sd-order .sc:not(.sc-thanks) button.sc-submit:focus-visible{outline:3px solid var(--sd-blue);outline-offset:3px}
.sd-order .sc .sc-submit-label{white-space:normal}
.sd-order .sc:not(.sc-thanks) ul.sc-trust{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin:10px 0 0;padding:0}
.sd-order .sc:not(.sc-thanks) ul.sc-trust li{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;text-align:center;line-height:1.35}
.sd-order .sc:not(.sc-thanks) ul.sc-trust b{font-size:11.5px;line-height:1.35;font-weight:800}
.sd-order .sc:not(.sc-thanks) ul.sc-trust svg{width:19px;height:19px;padding:0}

/* ---------- A: Leader Auto ---------- */
.sd-order--a{border:1px solid #e1e6ee;border-radius:14px;overflow:hidden;background:#fff}
.sd-order--a .sd-order-heading{background:var(--sd-blue);color:#fff}
.sd-order--a .sd-order-heading h1,.sd-order--a .sd-order-heading p{color:#fff}
.sd-order--a .sd-order-price{border:2px solid var(--sd-yellow);background:#fff}
.sd-order--a .sd-order-promo{background:#dc2626;color:#fff}
.sd-order--a .price{color:var(--sd-blue)}
.sd-order--a .sd-order-delivery{background:#e9f8ee;color:#166534}
.sd-order--a .sc:not(.sc-thanks) button.sc-submit{background:linear-gradient(135deg,var(--sd-green),var(--sd-green-dark));color:#fff;box-shadow:0 8px 18px #15803d38}
.sd-order--a .sc:not(.sc-thanks) button.sc-submit:hover{background:linear-gradient(135deg,var(--sd-green-dark),#166534)}
.sd-order--a .sc:not(.sc-thanks) ul.sc-trust b{color:var(--sd-muted)}
.sd-order--a .sc:not(.sc-thanks) ul.sc-trust svg{color:var(--sd-blue)}

/* ---------- B: brand card ---------- */
.sd-order--b{border-radius:18px;overflow:hidden;background:linear-gradient(165deg,#002d92 0%,#0a3cb8 100%);color:#fff;box-shadow:0 12px 30px #002d9233}
.sd-order--b .sd-order-heading{padding-top:16px;color:#fff}
.sd-order--b .sd-order-heading h1,.sd-order--b .sd-order-heading p{color:#fff}
.sd-order--b .sd-order-heading p{opacity:.92}
.sd-order--b .sd-order-body{padding-top:4px}
.sd-order--b .sd-order-price{border:2px solid var(--sd-yellow);background:#ffffff14}
.sd-order--b .sd-order-promo{background:var(--sd-yellow);color:var(--sd-blue)}
.sd-order--b .price,.sd-order--b .price small{color:var(--sd-yellow)}
.sd-order--b .sd-order-delivery{background:#ffffff1f;color:#fff}
.sd-order--b .sd-order-delivery .icon{color:var(--sd-yellow)}
.sd-order--b .sc .sc-group:has(>[data-field=name]) .sc-input{border-color:transparent;background-color:#fff}
.sd-order--b .sc .sc-group:has(>[data-field=name]) .sc-input:focus{border-color:var(--sd-yellow);box-shadow:0 0 0 3px #fed00759}
.sd-order--b .sc .sc-group:has(>[data-field=name]) p.sc-err{color:#ffd6d6}
.sd-order--b .sc .sc-summary>.sc-line,.sd-order--b .sc .sc-summary .sc-total .sc-amt{color:#fff}
.sd-order--b .sc details.sc-promo>summary{color:#fff}
.sd-order--b .sc:not(.sc-thanks) button.sc-submit{background:var(--sd-yellow);color:var(--sd-blue);box-shadow:0 8px 18px #00000040}
.sd-order--b .sc:not(.sc-thanks) button.sc-submit:hover{background:#ffdc3d}
.sd-order--b .sc:not(.sc-thanks) button.sc-submit:focus-visible{outline-color:#fff}
.sd-order--b .sc:not(.sc-thanks) ul.sc-trust b{color:#fff}
.sd-order--b .sc:not(.sc-thanks) ul.sc-trust svg{color:var(--sd-yellow)}

/* ---------- C: bold yellow ---------- */
.sd-order--c{border:2px solid var(--sd-yellow);border-radius:16px;overflow:hidden;background:#fff}
.sd-order--c .sd-order-heading{background:var(--sd-yellow);color:var(--sd-blue)}
.sd-order--c .sd-order-heading h1,.sd-order--c .sd-order-heading p{color:var(--sd-blue)}
.sd-order--c .sd-order-price{padding:0;border-radius:0;background:none}
.sd-order--c .sd-order-promo{background:#dc2626;color:#fff}
.sd-order--c .price{padding:4px 16px;border-radius:14px;background:var(--sd-blue);color:#fff}
.sd-order--c .price small{color:var(--sd-yellow)}
.sd-order--c .sd-order-delivery{background:#e9f8ee;color:#166534}
.sd-order--c .sc .sc-group:has(>[data-field=name]) .sc-input{border:2px solid var(--sd-blue);background-color:#fff}
.sd-order--c .sc .sc-group:has(>[data-field=name]) .sc-input:focus{box-shadow:0 0 0 3px #fed007a6}
.sd-order--c .sc:not(.sc-thanks) button.sc-submit{position:relative;background:linear-gradient(135deg,var(--sd-green),var(--sd-green-dark));color:#fff;box-shadow:0 8px 18px #15803d38;animation:sd-pulse 2.4s ease-in-out infinite}
.sd-order--c .sc:not(.sc-thanks) button.sc-submit::after{content:"←";font-size:22px;font-weight:900;line-height:1}
.sd-order--c .sc[dir=ltr]:not(.sc-thanks) button.sc-submit::after{content:"→"}
.sd-order--c .sc:not(.sc-thanks) button.sc-submit:hover{background:linear-gradient(135deg,var(--sd-green-dark),#166534);animation:none}
.sd-order--c .sc:not(.sc-thanks) ul.sc-trust li{padding:6px 4px;border:1.5px solid #dce2ea;border-radius:10px}
.sd-order--c .sc:not(.sc-thanks) ul.sc-trust b{color:var(--sd-blue)}
.sd-order--c .sc:not(.sc-thanks) ul.sc-trust svg{color:var(--sd-blue)}
@keyframes sd-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.025)}}
@media (prefers-reduced-motion:reduce){.sd-order--c .sc:not(.sc-thanks) button.sc-submit{animation:none}}

@media(min-width:768px){.sd-order-heading{padding:16px 24px}.sd-order-heading h1{font-size:24px}.sd-order-body{padding:16px 24px 20px}}