/* ASD — practical, mobile-first customer and employee workspace. Original mark and yellow retained. */ html,body{background:#f2f3f0!important;color-scheme:light!important} #asd-v4{--a-bg:#f2f3f0;--a-card:#fff;--a-soft:#f4f5f1;--a-text:#18231f;--a-muted:#59635d;--a-line:#dde3db;color:#18231f;background:#f2f3f0;font-family:'Tahoma',sans-serif;max-width:1280px!important;border-radius:0!important;min-height:100dvh!important;overflow:visible} #asd-v4 *,#asd-v4 *:before,#asd-v4 *:after{box-sizing:border-box} #asd-v4 header{margin:20px 24px 0;padding:18px 24px;border:0;border-radius:24px;background:#fff;box-shadow:0 10px 45px #263c2010;display:flex;gap:20px;align-items:center} #asd-v4 .a-env{background:#17251f!important;color:#ffd200!important;letter-spacing:0;font-size:12px!important;padding:10px!important} #asd-v4 main{padding:32px 24px 56px} #asd-v4 h2{font-size:30px;line-height:1.55;letter-spacing:-.8px;margin:0 0 12px;color:#18231f} #asd-v4 h3{line-height:1.6} #asd-v4 p{line-height:1.9} #asd-v4 .a-workspace{display:grid;grid-template-columns:minmax(0,1fr) 290px;gap:24px;align-items:start} #asd-v4 .a-panel,#asd-v4 .g-card{background:#fff;border:6px solid #e9ede6;border-radius:28px;padding:26px;box-shadow:0 16px 60px #263c2009;min-width:0} #asd-v4 .a-panel .a-panel{border-width:2px;padding:16px;box-shadow:none} #asd-v4 .a-hero{background:#17251f;color:#fff;border-radius:28px;padding:28px;border:6px solid #dce3d8} #asd-v4 .a-hero h3{font-size:27px;color:#fff;max-width:none} #asd-v4 .a-hero .a-muted{color:#cbd5cb} #asd-v4 .a-kicker{font-size:11px;letter-spacing:1px;color:#657359;margin-bottom:12px} #asd-v4 .a-hero .a-kicker{color:#ffd200} #asd-v4 .a-subtlepanel{padding:20px;background:transparent;border:0} #asd-v4 button,#asd-v4 input,#asd-v4 select,#asd-v4 textarea{font:inherit;font-size:15px;max-width:100%} #asd-v4 button{min-height:46px;border-radius:999px;padding:11px 18px;transition:transform .2s cubic-bezier(.32,.72,0,1),background .2s cubic-bezier(.32,.72,0,1);cursor:pointer;line-height:1.5} #asd-v4 button:active{transform:scale(.98)} #asd-v4 button:disabled{opacity:.55;cursor:default} #asd-v4 button:focus-visible,#asd-v4 input:focus-visible,#asd-v4 select:focus-visible,#asd-v4 textarea:focus-visible{outline:3px solid #8c6d00;outline-offset:3px} #asd-v4 input:not([type=checkbox]):not([type=radio]),#asd-v4 select,#asd-v4 textarea{min-height:50px;border:2px solid #dbe2d5;background:#fcfdfa;color:#18231f;border-radius:14px;padding:12px;width:100%;margin-top:6px} #asd-v4 label{font-size:14px;font-weight:600;line-height:1.7;display:block;margin:16px 0} #asd-v4 input[type=checkbox]{width:21px;height:21px;accent-color:#806400;flex-shrink:0} #asd-v4 .a-primary{background:#ffd200;color:#17251f;border-color:#ffd200;font-weight:700;box-shadow:0 4px 0 #c9ac2530} #asd-v4 nav{flex-wrap:wrap;gap:4px} #asd-v4 nav button{font-size:13px;min-height:44px;border:0} #asd-v4 nav button[aria-current=page]{background:#17251f;color:#fff} #asd-v4 .a-topaction{font-size:12px} #asd-v4.a-signed-out nav,#asd-v4.a-signed-out #a-login-top{display:none} #asd-v4 .a-authwrap{max-width:590px;margin:35px auto;padding:42px} #asd-v4 .a-authwrap h2{font-size:40px;line-height:1.45;margin-bottom:16px} #asd-v4 .a-authwrap .a-primary{width:100%;margin-top:18px} #asd-v4 .a-segment{display:flex;gap:8px;padding:6px;background:#f2f4ed;border-radius:999px;margin:24px 0} #asd-v4 .a-segment button{flex:1;font-size:13px} #asd-v4 .a-segment [aria-pressed=true]{background:#17251f;color:#fff} #asd-v4 .a-steps{display:flex;gap:8px;margin-bottom:24px;border-bottom:2px solid #eef1e9;padding-bottom:18px} #asd-v4 .a-steps li{font-size:12px;flex:1;flex-direction:column;gap:6px;align-items:center;text-align:center} #asd-v4 .a-steps b{background:#eff2e9;color:#657359} #asd-v4 .a-steps .active b{background:#ffd200;color:#17251f} #asd-v4 .a-crumb{color:#5a6556;font-size:13px;margin-bottom:12px} #asd-v4 .a-stage{min-height:220px} #asd-v4 .a-brands{gap:12px} #asd-v4 .a-choice{border:2px solid #e3e8de;background:#fff;border-radius:20px;min-height:86px} #asd-v4 .a-choice:hover{background:#fff9da;border-color:#ddc248} #asd-v4 .a-pickerlist{max-height:none;overflow:visible} #asd-v4 .a-pickeroption{border-radius:14px;min-height:54px} #asd-v4 .a-packagegrid{gap:10px} #asd-v4 .a-package{border:2px solid #e3e8de;border-radius:20px;background:#fcfdf9;padding:16px} #asd-v4 .a-package[aria-pressed=true]{border-color:#b8a034;background:#fff9da} #asd-v4 .a-partrow{display:flex;align-items:center;gap:12px;border:0;border-bottom:1px solid #e8ece3;margin:0;padding:14px 4px;font-weight:400;min-height:54px} #asd-v4 #a-part-list{max-height:none;overflow:visible} #asd-v4 .a-missingbox{background:#f2f5eb;border-radius:20px;padding:18px;margin:20px 0} #asd-v4 .a-requestbasket{background:transparent;border:0;padding:12px 0} #asd-v4 .a-cartrow{display:flex;align-items:center;gap:12px;justify-content:space-between;flex-wrap:wrap;border-bottom:1px solid #e5eadf;padding:16px 0} #asd-v4 .a-cartrow>div{flex:1;min-width:120px} #asd-v4 .a-cartrow label{margin:0;width:76px;font-size:12px} #asd-v4 .a-cartrow input{min-height:44px!important} #asd-v4 .a-cartrow small{display:block;color:#64705c;line-height:1.7} #asd-v4 .a-actions{display:flex;flex-wrap:wrap;gap:10px;margin:24px 0 12px} #asd-v4 .a-actions .a-primary{flex:1} #asd-v4 .a-notice{border:0;border-inline-start:4px solid #c4a200;border-radius:12px;background:#fff9dd;color:#514824;padding:16px} #asd-v4 .a-feedback:not(:empty){padding:16px;border-radius:14px;background:#edf5e6;line-height:1.8;margin:12px 0} #asd-v4 .a-feedback.a-error{background:#fff0e9;color:#8e3217} #asd-v4 .a-filterrow{grid-template-columns:1fr 150px;align-items:center} #asd-v4 .a-help{margin-top:24px} #asd-v4 .a-selecthero{background:#eef2e6;display:flex;flex-wrap:wrap;border-radius:16px} #asd-v4 .g-wrap{padding:28px} #asd-v4 .g-card{margin-bottom:22px;padding:24px} #asd-v4 .g-card h3{font-size:19px;margin:0 0 18px} #asd-v4 .g-row{font-size:14px;padding:12px 0;flex-wrap:wrap;overflow-wrap:anywhere;border-color:#e5ebdf} #asd-v4 .g-card input{margin-bottom:12px} #asd-v4 .g-warn{background:#fff5ca;color:#66531c;padding:16px;font-size:14px} #asd-v4 .g-order-details{background:#f3f6ee;padding:18px;border-radius:18px;margin:10px 0 20px;white-space:pre-line;line-height:1.9} #asd-v4 .a-footer{border:0;padding:22px 28px;color:#657359} @media(max-width:800px){#asd-v4 .a-workspace{grid-template-columns:1fr}#asd-v4 .a-visual{display:none}#asd-v4 header{margin:12px 12px 0;padding:16px;gap:12px;flex-wrap:wrap}#asd-v4 nav{order:3;width:100%;justify-content:flex-start}#asd-v4 main,#asd-v4 .g-wrap{padding:18px 12px 40px}#asd-v4 .a-panel,#asd-v4 .g-card{padding:20px;border-width:4px;border-radius:24px}#asd-v4 .a-authwrap{margin:12px auto;padding:26px}#asd-v4 .a-authwrap h2{font-size:32px}#asd-v4 .a-filterrow{grid-template-columns:1fr}#asd-v4 .a-steps li{font-size:10px}#asd-v4 .a-steps{gap:3px}#asd-v4 h2{font-size:25px}#asd-v4 .a-packagegrid{grid-template-columns:1fr}#asd-v4 .a-brands{grid-template-columns:repeat(2,minmax(0,1fr))}#asd-v4 .a-actions{flex-direction:column}#asd-v4 .a-actions button{width:100%}#asd-v4 .a-logo{font-size:27px}#asd-v4 .a-topaction{margin-inline-start:auto;max-width:150px}#asd-v4 .a-selecthero .a-vinmask{font-size:12px;overflow-wrap:anywhere}} @media(prefers-reduced-motion:reduce){#asd-v4 *{transition:none!important}} #asd-v4 .a-brand-section{margin-bottom:14px;border-bottom:2px solid #e7ecdf;padding-bottom:14px} #asd-v4 .a-brand-section summary{cursor:pointer;font-size:16px;font-weight:700;padding:16px 4px;min-height:50px} #asd-v4 .a-brand-section summary small{color:#75816c;margin-inline-start:12px} #asd-v4 .a-brand-section .a-brands{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))} #asd-v4 .a-pickeroption{border:1px solid #e6ebdf;font-size:13px;flex-wrap:wrap;justify-content:flex-start} #asd-v4 .a-pickeroption small{font-size:11px} #asd-v4.a-onboarding nav{display:none} #asd-v4{--a-ink:#18231f;--a-primary:#6f5800;--a-onprimary:#fff;--a-warn:#983a24;color-scheme:light!important;font-family:Tajawal,Tahoma,sans-serif} #asd-v4 .a-ghost{color:#5f4d00} .a-brand-logo{width:160px;height:80px;object-fit:contain;display:block}.a-registration label{display:block}.a-registration input{width:100%} .a-registration{padding:20px 0;text-align:center;border-block-end:1px solid #dfe3d9;margin-block-end:20px}.a-registration-guide{width:min(100%,300px);height:auto;margin:auto;display:block}.a-upload-registration{background:#ffd600;border-radius:18px;padding:16px 24px;position:relative;cursor:pointer;font-weight:700;max-width:360px;margin:18px auto 8px}.a-upload-registration input{position:absolute;inset:0;opacity:0;cursor:pointer}.a-upload-registration:focus-within{outline:3px solid #1d3028;outline-offset:3px}.a-registration details{text-align:start;margin-top:20px}.a-registration summary,.a-manual-vehicle summary,.a-maintenance summary{cursor:pointer;padding:16px 0;font-weight:700}.a-caption{font-size:13px!important}.a-saved-cars{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px}.a-saved-cars button{display:flex;align-items:start;flex-direction:column;gap:8px;text-align:start;border:1px solid #dfe3d9;border-radius:18px;padding:18px;background:#f4f6ef}.a-maintenance{border-top:1px solid #dfe3d9;margin-top:16px}.a-maintenance-body form{padding-bottom:18px}.a-maintenance-body button{margin:8px 4px}.a-log-row{border-bottom:1px solid #dfe3d9;padding:12px 0}.a-quick-dates{display:flex;gap:8px}#asd-v4[dir=ltr]{text-align:left}#asd-v4[dir=ltr] input{text-align:start}.a-maintenance .a-check input{width:auto} /* resend cooldown ring */ #asd-v4 .a-resend-wrap{display:flex;align-items:center;gap:12px;margin-top:14px;padding:12px 14px;border:1px solid #e3e6dd;border-radius:14px;background:#fafbf7} #asd-v4 .a-ring{width:52px;height:52px;flex:0 0 52px;transform:rotate(-90deg)} #asd-v4 .a-ring-bg{fill:none;stroke:#e3e6dd;stroke-width:4} #asd-v4 .a-ring-fg{fill:none;stroke:#c4a200;stroke-width:4;stroke-linecap:round;stroke-dasharray:106.8;stroke-dashoffset:0;transition:stroke-dashoffset .9s linear} #asd-v4 .a-ring-n{fill:#17251f;font-size:13px;font-weight:700;text-anchor:middle;dominant-baseline:central;transform:rotate(90deg);transform-origin:20px 20px} #asd-v4 .a-resend-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;font-size:13px;color:#17251f} #asd-v4 .a-resend-text small{color:#6b6b60;font-size:12px;line-height:1.5} #asd-v4 .a-resend-wrap.ready .a-ring-fg{stroke:#2e8b57} #asd-v4 .a-resend-wrap.ready .a-ring-n{fill:#2e8b57} #asd-v4 .a-resend-wrap #a-resend{margin:0;white-space:nowrap} @media (max-width:480px){#asd-v4 .a-resend-wrap{flex-wrap:wrap}#asd-v4 .a-resend-wrap #a-resend{width:100%}} /* sign-in hero illustration */ #asd-v4 .a-signin-art{display:block;width:100%;max-width:520px;height:auto;margin:6px auto 14px} #asd-v4 .a-signin-art text{font-family:inherit} /* RTL: phone on the right, card on the left, arrow pointing left; text right-aligned beside the check */ [dir=rtl] #asd-v4 .a-signin-art .art-phone{transform:translate(400px,10px)} [dir=rtl] #asd-v4 .a-signin-art .art-card{transform:translate(24px,36px)} [dir=rtl] #asd-v4 .a-signin-art .art-arrow{transform:translate(176px,0) rotate(180deg);transform-origin:172px 88px;transform-box:view-box} [dir=rtl] #asd-v4 .a-signin-art .art-check{transform:translate(216px,0)} [dir=rtl] #asd-v4 .a-signin-art .art-txt{transform:translate(200px,0)} /* ---- purchases: product rows with pictures (2026-10-04) ---- */ .a-cartrow.a-product { align-items: center; gap: 12px; flex-wrap: nowrap; } @media (max-width: 480px) { .a-cartrow.a-product > .a-thumb { width: 44px; height: 44px; min-width: 44px; max-width: 44px; flex-basis: 44px; } .a-cartrow.a-product > strong { font-size: 13px; } } .a-cartrow.a-product > .a-thumb { width: 56px; height: 56px; min-width: 56px; max-width: 56px; border-radius: 12px; object-fit: contain; background: #fff; border: 1px solid #e6e8e3; flex: 0 0 56px; padding: 0; margin: 0; } .a-cartrow.a-product > .a-thumb-empty { background: #f3f4f0 url("data:image/svg+xml;utf8,") center/26px no-repeat; } .a-cartrow.a-product > .a-product-main { flex: 1 1 auto; min-width: 0; } .a-cartrow.a-product > strong { flex: 0 0 auto; white-space: nowrap; } .a-product .a-product-main small { display: block; color: #6b7280; font-size: 12px; } .a-products { margin-bottom: 8px; } /* ---- phones: the menu is one strip you swipe, not a four-row grid (2026-10-04) ---- */ @media (max-width: 580px) { #asd-v4 nav { display: flex !important; flex-wrap: nowrap !important; overflow-x: auto; gap: 6px; padding-bottom: 4px; scrollbar-width: none; -webkit-overflow-scrolling: touch; } #asd-v4 nav::-webkit-scrollbar { display: none; } #asd-v4 nav button { white-space: nowrap; flex: 0 0 auto; font-size: 13px !important; padding: 8px 12px !important; } } .a-receipt { cursor: pointer; } .a-receipt:hover { background: #fafbf8; } .a-receipt .a-chev { font-size: 20px; color: #9aa09a; margin-inline-start: 6px; } /* ---- "More" dropdown in the menu (2026-10-04) ---- */ #asd-v4 nav .a-more { position: relative; } #asd-v4 nav .a-more summary { list-style: none; cursor: pointer; font-size: 13px; min-height: 44px; display: inline-flex; align-items: center; padding: 8px 12px; border-radius: 11px; color: inherit; } #asd-v4 nav .a-more summary::-webkit-details-marker { display: none; } #asd-v4 nav .a-more[open] summary { background: #f1f2ee; } #asd-v4 nav .a-more-menu { position: absolute; top: calc(100% + 6px); inset-inline-start: 0; min-width: 190px; background: #fff; border: 1px solid #e3e5de; border-radius: 14px; box-shadow: 0 14px 34px rgba(0,0,0,.12); padding: 6px; display: flex; flex-direction: column; gap: 2px; z-index: 50; } #asd-v4 nav .a-more-menu button { width: 100%; text-align: start; } @media (max-width: 580px) { #asd-v4 nav .a-more-menu { position: fixed; inset-inline: 12px; top: auto; min-width: 0; } } .a-filelabel { display:block; font-size:13px; margin:6px 0 4px; } .a-filelabel input { margin-top:6px; } .a-help-kind { margin: 8px 0 6px !important; }