/* Booking pages (/book, /manage, after-hours /, /done) restyled to the zlmservices.com look.
   Loaded after appt.css and each page's own <style>; everything is scoped to body.skin. */
body.skin { --orange:#DC5F2B; --orange2:#c24f1f; --ink:#000; --muted:#6a6b6b; --line:#e3e3e3; --bg:#fff;
  --sh1:none; --sh2:0 18px 50px -24px rgba(0,0,0,.35); --sh3:0 18px 40px -18px rgba(0,0,0,.35);
  font:300 17px/1.5 "Jost","Helvetica Neue",Arial,sans-serif; letter-spacing:.016em; color:#2E2F2F; background:#fff; margin:0; }
body.skin b, body.skin strong { font-weight:600; }
/* undo appt.css element styles on the site header/footer */
body.skin header.site-header { background:none; box-shadow:none; border:0; padding:22px 0; color:inherit; }
body.skin header.site-header::after { display:none; }
body.skin header.site-header .wrap { max-width:none; }
body.skin footer.site-footer { text-align:left; color:#fff; font-size:14.7px; padding:110px 0 30px; }
body.skin .site-footer .wrap { max-width:1140px; }

/* page body sits on a white panel overlapping the hero, like the warranty claim form */
body.skin main.panel { max-width:760px; margin:-60px auto 0; position:relative; z-index:2; padding:0 16px; }
body.skin main.panel > .shell { background:#fff; padding:40px 44px 34px; box-shadow:0 18px 50px -20px rgba(0,0,0,.35); }
@media (max-width:640px) { body.skin main.panel > .shell { padding:26px 18px; } body.skin main.panel { margin-top:-40px; } }
body.skin .hero.dark { padding-bottom:130px; }
body.skin .hero p.lead-hero { max-width:640px; font-size:18px; color:#eef2f4; margin:0; }

body.skin h1, body.skin h2 { font-family:"Jost",Arial,sans-serif; }
body.skin .shell h1, body.skin .shell h2, body.skin .panel h2 { font:300 28px/1.15 "Jost",Arial,sans-serif; text-transform:uppercase; letter-spacing:2px; color:#000; margin:0 0 8px; }
body.skin .shell h1 b, body.skin .shell h2 b { font-weight:700; }
body.skin .lead { color:#2E2F2F; font-size:17px; }
body.skin .muted { color:var(--muted); font-size:15px; }
body.skin a { color:var(--orange); }

/* cards become flat sections inside the panel */
body.skin .card { background:#fff; border:0; border-radius:0; box-shadow:none; padding:0; margin:0 0 18px; }
body.skin .shell > .card + .card, body.skin .shell section.card { padding-top:4px; }
/* service picker */
body.skin .card.service { border:1px solid #d9d9d9; padding:20px 22px; margin-bottom:12px; background:#fff; border-radius:0; transform:none; }
body.skin .card.service:hover, body.skin .card.service:focus { border-color:var(--orange); box-shadow:inset 4px 0 0 var(--orange); transform:none; }
body.skin .service b { font:500 20px/1.25 "Jost",Arial,sans-serif; text-transform:uppercase; letter-spacing:1.5px; color:#000; }
body.skin .service .mode { color:var(--orange); font-weight:600; letter-spacing:1.5px; font-size:13px; }
body.skin .service::after { color:#bdbdbd; }
body.skin .service:hover::after { color:var(--orange); }

/* progress steps */
body.skin .steps { gap:4px; margin:0 0 26px; }
body.skin .steps div { height:4px; border-radius:0; background:#e3e3e3; box-shadow:none; }
body.skin .steps div.on { background:var(--orange); box-shadow:none; }

/* form controls */
body.skin label { font-weight:400; font-size:15px; color:#2E2F2F; letter-spacing:.3px; }
body.skin label.opt { border:1px solid #d9d9d9; border-radius:0; background:#fff; padding:8px 10px; }
body.skin input[type=text], body.skin input[type=email], body.skin input[type=tel], body.skin input[type=number], body.skin input[type=date], body.skin select, body.skin textarea {
  font:300 17px "Jost",Arial,sans-serif; color:#000; background:#fafafa; border:1px solid #cfd0d0; border-radius:0; box-shadow:none; padding:13px 14px; }
body.skin input:focus, body.skin select:focus, body.skin textarea:focus { border-color:var(--orange); background:#fff; box-shadow:inset 0 -2px 0 var(--orange); outline:none; }
body.skin .code { letter-spacing:10px; font-size:26px; text-align:center; }
body.skin .check input, body.skin label.opt input { accent-color:var(--orange); }

/* chips, days, time slots: square, orange when picked */
body.skin .chip, body.skin .day, body.skin .slot { border:1px solid #cfd0d0; border-radius:0; background:#fff; box-shadow:none; font:400 15px "Jost",Arial,sans-serif; color:#000; transform:none; }
body.skin .chip:hover, body.skin .day:hover:not([disabled]), body.skin .slot:hover:not([disabled]) { border-color:var(--orange); transform:none; box-shadow:none; }
body.skin .chip.sel, body.skin .day.sel, body.skin .slot.sel { background:var(--orange); border-color:var(--orange); color:#fff; box-shadow:none; }
body.skin .day b { font-weight:600; text-transform:uppercase; letter-spacing:1px; font-size:13px; }
body.skin .day small { color:var(--muted); }
body.skin .day.sel small { color:rgba(255,255,255,.85); }
body.skin .weeknav { font-weight:500; text-transform:uppercase; letter-spacing:1.5px; font-size:15px; }
body.skin .weeknav button { border-radius:0; background:#fff; box-shadow:none; border:1px solid #cfd0d0; }

/* summary callouts */
body.skin .summary { background:rgba(220,95,43,.07); border-radius:0; box-shadow:inset 4px 0 0 var(--orange); padding:14px 18px; }

/* buttons: square orange, uppercase light — like the site */
body.skin button.primary { background:var(--orange); border-radius:0; box-shadow:none; font:300 18px/1.2 "Jost",Arial,sans-serif; text-transform:uppercase; letter-spacing:1px; padding:16px; }
body.skin button.primary:hover { background:var(--orange2); box-shadow:none; }
body.skin button.secondary, body.skin .act { border-radius:0; background:#fff; box-shadow:none; border:1px solid #2E2F2F; font:400 15px "Jost",Arial,sans-serif; text-transform:uppercase; letter-spacing:1px; color:#2E2F2F; transform:none; }
body.skin button.secondary:hover, body.skin .act:hover { border-color:var(--orange); color:var(--orange); transform:none; box-shadow:none; }
body.skin .act.danger { color:#b42318; border-color:#b42318; }
body.skin .err { border-radius:0; border:0; border-left:4px solid #c0392b; background:#fdf1ef; color:#9f1d12; }
body.skin .ok { border-radius:0; }
body.skin .drop { border-radius:0; background:#fafafa; border:1px dashed #b9baba; text-transform:uppercase; letter-spacing:1.5px; font-weight:400; font-size:14px; }
body.skin .drop:hover { border-color:var(--orange); color:var(--orange); }
body.skin .thumbs img { border-radius:0; box-shadow:none; }
body.skin .note-out { margin-top:24px; text-align:center; }
body.skin .hidden { display:none !important; }
body.skin .hero .wrap { max-width:792px; padding:0 32px; }
@media (max-width:640px) { body.skin .hero .wrap { padding:0 22px; } }
body.skin a.call-tab { color:#fff; }
body.skin .site-footer a { color:#fff; }
body.skin .site-footer a:hover, body.skin .mnav a.cta { color:var(--orange); }
body.skin .mnav a { color:#fff; }