/* Elite Diesel & Auto Works: appointment request form + thank-you card (/appointments) in the same iOS /
   Tekmetric-mobile style as the office app (/admin/requests). Loaded only on /appointments, after the site +
   theme CSS, and everything is scoped to .ios-book so the rest of the site (and the contact form) keeps the
   industrial look. System font, grouped white cards on a light-gray panel, filled rounded controls, pill
   state picker, big tap targets. Light + dark (prefers-color-scheme). */
.ios-book{
  --ios-font:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --ios-bg:#f2f2f7; --ios-card:#fff; --ios-label:#1c1f23; --ios-label-2:#6b6f76; --ios-label-3:#9a9ea5;
  --ios-sep:rgba(60,60,67,.18); --ios-fill:rgba(118,118,128,.1); --ios-fill-2:rgba(118,118,128,.18);
  --ios-teal:#26b3b1; --ios-teal-fill:#0c7f7c; --ios-teal-text:#0b726f; --ios-teal-tint:rgba(38,179,177,.14);
  --ios-orange:#ea580c; --ios-orange-tint:rgba(234,88,12,.12);
  --ios-red:#d70015; --ios-red-tint:rgba(255,59,48,.1);
  --ios-shadow:0 1px 2px rgba(16,24,40,.05),0 6px 20px rgba(16,24,40,.06);
  --ios-chev:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 20'%3E%3Cpath d='M2 7l4-4 4 4M2 13l4 4 4-4' fill='none' stroke='%236b6f76' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --r-panel:22px; --r-card:18px; --r-ctl:13px;
  max-width:44rem;background:var(--ios-bg);color:var(--ios-label);border-radius:var(--r-panel);padding:18px 14px 20px;
  font-family:var(--ios-font);font-size:17px;line-height:1.35;letter-spacing:-.01em;-webkit-font-smoothing:antialiased;
  box-shadow:0 1px 0 rgba(0,0,0,.04),0 10px 30px rgba(16,24,40,.07);color-scheme:light
}
@media (prefers-color-scheme:dark){
  .ios-book{
    --ios-bg:#0b0b0c; --ios-card:#1c1c1e; --ios-label:#f5f5f7; --ios-label-2:#a1a1a8; --ios-label-3:#6e6e75;
    --ios-sep:rgba(84,84,88,.6); --ios-fill:rgba(118,118,128,.24); --ios-fill-2:rgba(118,118,128,.34);
    --ios-teal-text:#4fd6d3; --ios-teal-tint:rgba(38,179,177,.22); --ios-orange-tint:rgba(255,140,60,.18);
    --ios-red:#ff6961; --ios-red-tint:rgba(255,69,58,.18);
    --ios-shadow:0 0 0 .5px rgba(255,255,255,.05);
    --ios-chev:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 20'%3E%3Cpath d='M2 7l4-4 4 4M2 13l4 4 4-4' fill='none' stroke='%23a1a1a8' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    color-scheme:dark;box-shadow:0 10px 30px rgba(0,0,0,.25)
  }
}
.ios-book *,.ios-book *::before,.ios-book *::after{box-sizing:border-box}
.ios-book :where(button,input,select,textarea){font-family:inherit;letter-spacing:inherit}
.ios-book :focus-visible{outline:3px solid color-mix(in srgb,var(--ios-teal) 65%,transparent);outline-offset:2px}

/* form shell */
.ios-book .ios-form{display:block;max-width:none;margin:0}
.ios-form-head{display:flex;align-items:center;gap:12px;padding:2px 4px 16px}
.ios-form-icon{flex:none;display:grid;place-items:center;width:48px;height:48px;border-radius:14px;color:#fff;
  background:linear-gradient(160deg,#2fc4c1,var(--ios-teal-fill));box-shadow:0 4px 12px rgba(12,127,124,.28)}
.ios-book .ios-form-title{margin:0;font-size:22px;font-weight:700;letter-spacing:-.02em;line-height:1.15}
.ios-book .ios-form-sub{margin:2px 0 0;font-size:14px;color:var(--ios-label-2)}

/* sections: small gray header, white rounded card, optional gray footer */
.ios-book .ios-sec{border:0;padding:0;margin:0 0 22px;background:none;border-radius:0;min-width:0}
.ios-book .ios-sec legend{float:left;width:100%;padding:0 16px 7px;margin:0;font-family:var(--ios-font);font-size:13px;font-weight:600;
  text-transform:uppercase;letter-spacing:.02em;color:var(--ios-label-2)}
.ios-book .ios-sec legend + *{clear:both}
.ios-card{background:var(--ios-card);border-radius:var(--r-card);padding:6px 16px;box-shadow:var(--ios-shadow)}
.ios-book .ios-foot{margin:8px 16px 0;font-size:13px;line-height:1.4;color:var(--ios-label-2)}
.ios-book .ios-foot a{color:var(--ios-teal-text)}

/* fields: label on top, filled rounded control, hairline between rows */
.ios-book .field{display:flex;flex-direction:column;gap:6px;margin:0;padding:12px 0;position:relative;min-width:0}
.ios-book .ios-card > .field + .field,.ios-book .ios-card > .field + .grid-2,.ios-book .ios-card > .grid-2 + .grid-2,
.ios-book .ios-card > .grid-2 + .field{border-top:.5px solid var(--ios-sep)}
.ios-book .field label{font-size:13px;font-weight:600;color:var(--ios-label-2);letter-spacing:0}
.ios-book .field input,.ios-book .field select,.ios-book .field textarea{
  display:block;width:100%;min-height:48px;margin:0;padding:12px 14px;border:0;border-radius:var(--r-ctl);
  background:var(--ios-fill);color:var(--ios-label);font-size:17px;line-height:1.25;outline:none;box-shadow:inset 0 0 0 1px transparent;
  -webkit-appearance:none;appearance:none;transition:background-color .18s,box-shadow .18s}
.ios-book .field input::placeholder,.ios-book .field textarea::placeholder{color:var(--ios-label-3);opacity:1}
.ios-book .field select{padding-right:40px;background-image:var(--ios-chev);background-repeat:no-repeat;background-position:right 14px center;background-size:10px 17px;cursor:pointer;text-overflow:ellipsis}
.ios-book .field textarea{min-height:120px;resize:vertical}
.ios-book .field input:focus,.ios-book .field select:focus,.ios-book .field textarea:focus{
  outline:none;background-color:var(--ios-card);box-shadow:inset 0 0 0 2px var(--ios-teal),0 0 0 4px var(--ios-teal-tint)}
.ios-book .field select:disabled{opacity:.55;cursor:not-allowed;background-color:var(--ios-fill)}
.ios-book .field select option.closed,.ios-book .field select option:disabled{color:#9aa0a6}
.ios-book .field .hint{font-size:13px;line-height:1.35;color:var(--ios-label-2)}
.ios-book .field [aria-invalid="true"]{background-color:var(--ios-red-tint);box-shadow:inset 0 0 0 1.5px var(--ios-red)}
.ios-book .field [aria-invalid="true"]:focus{background-color:var(--ios-card);box-shadow:inset 0 0 0 2px var(--ios-red),0 0 0 4px var(--ios-red-tint)}
.ios-book .field-error{display:flex;align-items:center;gap:6px;color:var(--ios-red);font-weight:600;font-size:13.5px}
.ios-book .field-error::before{content:"!";flex:none;display:grid;place-items:center;width:17px;height:17px;border-radius:50%;background:var(--ios-red);color:#fff;font-size:12px;font-weight:800}
.ios-book .field-error:empty{display:none}
.ios-book .grid-2{display:grid;gap:0 14px}
.ios-book .grid-2 > .field + .field{border-top:.5px solid var(--ios-sep)}

/* plate: one rounded control = [MO ⌄ | AB1C2D] */
.plate-combo{display:flex;align-items:stretch;min-height:48px;border-radius:var(--r-ctl);background:var(--ios-fill);transition:background-color .18s,box-shadow .18s}
.plate-combo:focus-within{background:var(--ios-card);box-shadow:inset 0 0 0 2px var(--ios-teal),0 0 0 4px var(--ios-teal-tint)}
.plate-state{flex:none;display:flex;align-items:center;padding:6px 0 6px 6px}
.ios-book .plate-combo select{width:auto;min-width:78px;min-height:36px;padding:6px 30px 6px 14px;border-radius:999px;background-color:var(--ios-card);
  background-position:right 11px center;font-weight:700;font-size:16px;box-shadow:0 1px 2px rgba(0,0,0,.08),0 0 0 .5px var(--ios-sep)}
.ios-book .plate-combo select:focus{box-shadow:inset 0 0 0 2px var(--ios-teal)}
.ios-book .plate-combo input{flex:1;min-width:0;background:transparent;box-shadow:none!important;padding-left:12px}
.ios-book .plate-combo input:focus{background:transparent}
.ios-book .plate-combo:has([aria-invalid="true"]){background:var(--ios-red-tint);box-shadow:inset 0 0 0 1.5px var(--ios-red)}
.ios-book .plate-combo [aria-invalid="true"]{background:transparent}
.ios-book #plate{text-transform:uppercase;letter-spacing:.1em;font-weight:700;font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace}
.ios-book #plate::placeholder{text-transform:none;letter-spacing:0;font-weight:400;font-family:var(--ios-font)}

/* drop-off slots: "1 First choice" header, then day + time side by side */
.ios-book .slot-head{display:flex;align-items:center;gap:9px;margin:0;padding:14px 0 0;font-size:16px;font-weight:600}
.ios-book .slot-head ~ .slot-head{border-top:.5px solid var(--ios-sep);margin-top:4px}
.slot-num{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--ios-teal-fill);color:#fff;font-size:13px;font-weight:700}
.slot-num.alt{background:var(--ios-orange)}
.ios-book .slot-head .opt{margin-left:auto;padding:2px 10px;border-radius:999px;background:var(--ios-fill);color:var(--ios-label-2);font-size:12px;font-weight:600}
.ios-book .grid-slot{display:grid;gap:0 10px}
.ios-book .grid-slot .field{padding-top:8px;padding-bottom:6px}
.ios-book .grid-slot .field:last-child{padding-bottom:14px}

/* status banner + submit */
.ios-book .form-status{display:none;margin:0 0 16px;padding:13px 16px;border:0;border-radius:var(--r-ctl);background:var(--ios-teal-tint);color:var(--ios-label);font-size:15px;font-weight:500}
.ios-book .form-status.show{display:block}
.ios-book .form-status.bad{background:var(--ios-red-tint);color:var(--ios-red);font-weight:600}
.ios-book .form-status:focus{outline:none}
.ios-book .ios-submit{margin:4px 0 0}
.ios-book .ios-submit .btn{display:flex;width:100%;min-height:54px;margin:0;padding:14px 20px;border:0;border-radius:14px;
  background:var(--ios-teal-fill);color:#fff;font-family:var(--ios-font);font-size:17px;font-weight:600;letter-spacing:-.01em;text-transform:none;
  box-shadow:0 1px 2px rgba(12,127,124,.25),0 8px 20px rgba(12,127,124,.25);transition:transform .12s,filter .15s,box-shadow .2s}
.ios-book .ios-submit .btn:hover{background:var(--ios-teal-fill);color:#fff;filter:brightness(1.07)}
.ios-book .ios-submit .btn:active{transform:scale(.98);filter:brightness(.94)}
.ios-book .ios-form button[disabled]{opacity:.7;cursor:progress;transform:none}

/* thank-you card */
.ios-book .ios-thanks{max-width:none;margin:0;padding:28px 18px 18px;border:0;border-radius:var(--r-card);background:var(--ios-card);box-shadow:var(--ios-shadow);text-align:center;
  animation:ios-pop .45s cubic-bezier(.32,.72,0,1)}
.thanks-check{display:inline-grid;place-items:center;width:64px;height:64px;border-radius:50%;background:var(--ios-teal-fill);color:#fff;box-shadow:0 8px 20px rgba(12,127,124,.3)}
.ios-book .ios-thanks h2{margin:14px 0 6px;font-family:var(--ios-font);font-size:24px;font-weight:700;letter-spacing:-.02em;text-transform:none;color:var(--ios-label);line-height:1.2}
.ios-book .ios-thanks p{margin:0 0 14px;color:var(--ios-label-2);font-size:16px}
.ios-book .ios-thanks .thanks-summary{margin:18px 0;padding:2px 16px;border-radius:14px;background:var(--ios-bg);text-align:left;color:var(--ios-label)}
.ios-book .thanks-summary span{display:flex;justify-content:space-between;gap:14px;padding:12px 0;font-size:15px}
.ios-book .thanks-summary span + span{border-top:.5px solid var(--ios-sep)}
.ios-book .thanks-summary b{flex:none;font-weight:500;color:var(--ios-label-2)}
.ios-book .thanks-summary b + *,.ios-book .thanks-summary span{text-align:right}
.ios-book .thanks-summary:empty{display:none}
.ios-book .thanks-call a{color:var(--ios-teal-text);font-weight:600}
.ios-book .thanks-btns{margin:6px 0 0}
.ios-book .thanks-btns .btn{display:flex;width:100%;min-height:50px;margin:0;border:0;border-radius:14px;background:var(--ios-fill);color:var(--ios-teal-text);
  font-family:var(--ios-font);font-size:17px;font-weight:600;letter-spacing:-.01em;text-transform:none}
.ios-book .thanks-btns .btn:hover{background:var(--ios-fill-2);color:var(--ios-teal-text)}
.ios-book .ios-thanks:focus{outline:none}
@keyframes ios-pop{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:none}}

@media (min-width:480px){
  .ios-book .grid-slot{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr)}
  .ios-book .grid-slot .field{padding-bottom:14px}
}
@media (min-width:640px){
  .ios-book{padding:22px 20px 22px}
  .ios-book .grid-2{grid-template-columns:1fr 1fr}
  .ios-book .grid-2 > .field + .field{border-top:0}
}
@media (max-width:420px){
  .ios-book{margin-inline:-6px;padding:16px 12px 18px}
}
@media (prefers-reduced-motion:reduce){.ios-book *{transition:none!important;animation:none!important}}