/* MobilityRepair.ie — Mobility Minder plan page (mobility-rescue-plan.php, served at mobility-minder/).
   Page-scoped classes (mrp-) for the components the house inline-style pattern can't express cleanly:
   the plan calculator, the inline request form, the how-it-works strip, the plan-detail cards and the FAQ
   disclosures. Colours, fonts and radii follow .ai/GUIDELINES.md §2 exactly; the hero and closing CTA
   reuse the existing inline patterns from stair-lift-repair-services.php. Loaded only by this page via
   $head_extra (same approach as instant-quote.php). */

/* ── Shared page rhythm ── */
.mrp-wrap{max-width:1380px; margin:0 auto; padding:0 24px}
.mrp-eyebrow{font-family:'JetBrains Mono',monospace; font-size:12.5px; letter-spacing:0.2em; text-transform:uppercase; color:#2F9E52}
.mrp-brand-mark{display:flex;align-items:center;gap:12px}
.mrp-shield{display:grid;place-items:center;width:46px;height:46px;flex:none;border-radius:14px;background:#0C1D36;color:#F4B942;box-shadow:0 10px 24px rgba(12,29,54,.18)}
.mrp-shield svg{width:27px;height:27px;display:block}
.mrp-h2{margin:0; font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:clamp(28px, 3.2vw, 42px); line-height:1.08; letter-spacing:-0.025em; color:#0C1D36; text-wrap:balance}
.mrp-lead{margin:0; font-size:16px; line-height:1.7; color:#4A5670; max-width:640px}
.mrp-section{padding-top:clamp(48px, 8vw, 80px)}
#mm-plans{scroll-margin-top:96px}
.mrp-section-head{display:flex; flex-direction:column; gap:14px; margin-bottom:34px; max-width:720px}
.mrp-btn{display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:46px; text-decoration:none; font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:15px; padding:12px 22px; border-radius:999px; white-space:nowrap; transition:background .2s, transform .2s, border-color .2s}
.mrp-btn--green{background:#2FA45C; color:#FFFFFF; box-shadow:0 3px 12px rgba(47,164,92,0.3)}
.mrp-btn--green:hover{background:#268C49; transform:translateY(-1px)}
.mrp-btn--white{background:#FFFFFF; color:#17406D; border:1.5px solid #17406D}
.mrp-btn--white:hover{background:#F5F7FA}
.mrp-btn--ghost{background:rgba(255,255,255,0.12); color:#FFFFFF; border:1px solid rgba(255,255,255,0.35)}
.mrp-btn--ghost:hover{background:rgba(255,255,255,0.2)}
.mrp-btn:focus-visible, .mrp-faq summary:focus-visible{outline:3px solid #17406D; outline-offset:3px}

/* ── Plan calculator ──
   Radio tiles (real <input type=radio>, so keyboard + screen readers work) on the left; one result panel
   per plan on the right. Without JS every panel stays visible (prices, conditions and enquiry links never
   depend on a script); with JS (.is-js) only the chosen plan's panel shows and a live region announces it. */
.mrp-calc{display:grid; grid-template-columns:minmax(0, 5fr) minmax(0, 7fr); gap:22px; align-items:start}
.mrp-calc-pick{background:#FFFFFF; border:1px solid rgba(10,18,40,0.09); border-radius:22px; padding:clamp(22px, 3vw, 30px); display:flex; flex-direction:column; gap:18px; box-shadow:0 10px 30px rgba(12,29,54,0.05)}
.mrp-calc-pick fieldset{border:none; margin:0; padding:0; min-width:0; display:flex; flex-direction:column; gap:10px}
.mrp-calc-pick legend{font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:16px; color:#0C1D36; letter-spacing:-0.01em; padding:0; margin-bottom:10px}
.mrp-calc-group{font-family:'JetBrains Mono',monospace; font-size:11.5px; letter-spacing:0.16em; text-transform:uppercase; color:#7A87A0; margin-top:6px}
.mrp-group{display:flex; flex-direction:column; gap:8px; margin-top:6px}
.mrp-group + .mrp-tile, .mrp-tile + .mrp-group{margin-top:10px}
.mrp-group-img{display:block; width:100%; height:128px; border-radius:14px; border:1px solid rgba(10,18,40,0.08); background:#FFFFFF}
.mrp-group-img--stairlift{object-fit:contain; object-position:50% 50%}
.mrp-group-img--scooter{object-fit:cover; object-position:52% 64%}
.mrp-group .mrp-calc-group{margin:0}
.mrp-tile{position:relative; display:flex; align-items:center; justify-content:space-between; gap:14px; background:#F5F7FA; border:1.5px solid rgba(10,18,40,0.1); border-radius:14px; padding:14px 16px; cursor:pointer; transition:border-color .2s, background .2s}
.mrp-tile:hover{border-color:rgba(23,64,109,0.45)}
.mrp-tile input{position:absolute; opacity:0; width:1px; height:1px; margin:0}
.mrp-tile-name{display:flex; flex-direction:column; gap:2px}
.mrp-tile-name strong{font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:15px; color:#0C1D36; letter-spacing:-0.01em}
.mrp-tile-name span{font-size:13px; color:#7A87A0; line-height:1.4}
.mrp-tile-price{font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:20px; color:#17406D; letter-spacing:-0.02em; white-space:nowrap}
.mrp-tile-price small{font-size:12.5px; font-weight:600; color:#4A5670; letter-spacing:0}
.mrp-tile:has(input:checked){background:#EDF3EE; border-color:#2FA45C; box-shadow:none}
.mrp-tile:has(input:focus-visible){outline:3px solid #17406D; outline-offset:2px}
.mrp-calc-note{margin:0; font-size:13.5px; line-height:1.6; color:#7A87A0}
.mrp-results{display:flex; flex-direction:column; gap:18px}
.mrp-panel{background:#FFFFFF; border:1px solid rgba(10,18,40,0.09); border-left:5px solid #2FA45C; border-radius:22px; padding:clamp(24px, 3vw, 34px); display:flex; flex-direction:column; gap:18px; box-shadow:0 10px 30px rgba(12,29,54,0.06)}
.mrp-panel[hidden]{display:flex}
.is-js .mrp-panel[hidden]{display:none}
.mrp-panel-head{display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:10px 24px}
.mrp-panel-head h3{margin:0; font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:clamp(22px, 2.4vw, 28px); letter-spacing:-0.02em; color:#0C1D36}
.mrp-panel-head .mrp-eyebrow{display:block; margin-bottom:6px}
.mrp-price{display:flex; align-items:baseline; gap:6px; font-family:'Space Grotesk',sans-serif; font-weight:700; color:#17406D; letter-spacing:-0.03em}
.mrp-price strong{font-size:40px; line-height:1}
.mrp-price span{font-size:14px; font-weight:600; color:#4A5670; letter-spacing:0}
.mrp-panel-cols{display:grid; grid-template-columns:repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap:16px 22px}
.mrp-panel h4{margin:0 0 8px; font-family:'JetBrains Mono',monospace; font-size:11.5px; letter-spacing:0.16em; text-transform:uppercase; color:#7A87A0; font-weight:600}
.mrp-list{margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:8px}
.mrp-list li{display:flex; gap:10px; font-size:14.5px; line-height:1.55; color:#25395A}
.mrp-list li::before{content:"✓"; color:#2F9E52; font-weight:700; flex:none}
.mrp-list li.is-no::before{content:"✕"; color:#B3261E}
.mrp-list li.is-no{color:#4A5670}
.mrp-list li.is-wait::before{content:"◷"; color:#17406D}
.mrp-list li.is-tbc::before{content:"○"; color:#17406D}
.mrp-panel-foot{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:14px 20px; border-top:1px solid rgba(10,18,40,0.08); padding-top:18px}
.mrp-panel-foot p{margin:0; font-size:13.5px; line-height:1.6; color:#4A5670; flex:1 1 260px}
.mrp-panel-actions{display:flex; flex-wrap:wrap; gap:10px}
.mrp-live{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}

/* ── Repair guides by make ──
   Links are drawn from the scooter/stairlift brand-page SSOT. The uneven desktop columns intentionally balance
   25 scooter makes over two link columns against 13 stairlift makes in one, keeping the section compact. */
#mm-makes{scroll-margin-top:96px}
.mrp-brands{background:#FFFFFF; border:1px solid rgba(10,18,40,0.09); border-radius:22px; padding:clamp(24px, 4vw, 42px); box-shadow:0 12px 36px rgba(12,29,54,0.06)}
.mrp-brands-head{display:grid; grid-template-columns:minmax(0, 1.1fr) minmax(280px, .8fr); gap:18px 42px; align-items:end; padding-bottom:26px; border-bottom:1px solid rgba(10,18,40,0.09)}
.mrp-brands-head > div{display:flex; flex-direction:column; gap:12px}
.mrp-brands-head > p{margin:0; font-size:14.5px; line-height:1.65; color:#4A5670}
.mrp-brand-groups{display:grid; grid-template-columns:minmax(0, 1.55fr) minmax(280px, .9fr); gap:22px; padding-top:24px}
.mrp-brand-group{background:#F5F7FA; border:1px solid rgba(10,18,40,0.08); border-radius:17px; padding:20px}
.mrp-brand-group-head{display:flex; flex-direction:column; gap:4px; margin-bottom:14px}
.mrp-brand-group-head h3{margin:0; font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:20px; letter-spacing:-0.02em; color:#0C1D36}
.mrp-brand-group-head p{margin:0; font-size:13.5px; line-height:1.5; color:#66738B}
.mrp-brand-list{margin:0; padding:0; list-style:none; display:grid; gap:8px}
.mrp-brand-group--scooters .mrp-brand-list{grid-template-columns:repeat(2, minmax(0, 1fr))}
.mrp-brand-list a{min-height:46px; box-sizing:border-box; display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 12px; border:1px solid rgba(23,64,109,0.13); border-radius:11px; background:#FFFFFF; color:#17406D; text-decoration:none; transition:border-color .2s, box-shadow .2s, transform .2s}
.mrp-brand-list a:hover{border-color:rgba(47,164,92,0.7); box-shadow:0 5px 14px rgba(12,29,54,0.07); transform:translateY(-1px)}
.mrp-brand-list a:focus-visible{outline:3px solid #17406D; outline-offset:2px}
.mrp-brand-list a > span{min-width:0; font-family:'Space Grotesk',sans-serif; font-weight:650; font-size:14px; line-height:1.25; overflow-wrap:anywhere}
.mrp-brand-list small{flex:none; font-size:11px; font-weight:600; color:#2F8D50; white-space:nowrap}
.mrp-brands-foot{margin:20px 0 0; font-size:14px; line-height:1.55; color:#4A5670}
.mrp-brands-foot a{color:#1F7A43; font-weight:700; text-underline-offset:2px}

/* ── Request a plan: the existing enquiry form, inline ──
   Same field contract as the contact page (inc/contact-form.php); fields are 16px so mobile browsers don't zoom. */
#mm-request{scroll-margin-top:96px}
.mrp-request{display:grid; grid-template-columns:minmax(0, 7fr) minmax(0, 4fr); gap:22px; align-items:start}
.mrp-request-side{background:#FFFFFF; border:1px solid rgba(10,18,40,0.09); border-radius:22px; padding:12px 12px 24px; display:flex; flex-direction:column; gap:18px; box-shadow:0 10px 30px rgba(12,29,54,0.05)}
.mrp-request-side img{display:block; width:100%; height:220px; object-fit:cover; object-position:30% 50%; border-radius:14px}
.mrp-request-side .mrp-list{padding:0 14px}
.mrp-form{position:relative; background:#FFFFFF; border:1px solid rgba(10,18,40,0.09); border-top:4px solid #2FA45C; border-radius:22px; padding:clamp(24px, 3.6vw, 44px); display:flex; flex-direction:column; gap:22px; box-shadow:0 18px 44px rgba(12,29,54,0.07)}
.mrp-hp{position:absolute; left:-9999px; width:1px; height:1px; opacity:0}
.mrp-form-row{display:grid; grid-template-columns:repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap:14px}
.mrp-field{display:flex; flex-direction:column; gap:8px; min-width:0}
.mrp-field label{font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:14.5px; color:#0C1D36}
.mrp-field label span{color:#7A87A0; font-weight:400}
.mrp-field input, .mrp-field select, .mrp-field textarea{width:100%; box-sizing:border-box; border:1.5px solid rgba(10,18,40,0.14); border-radius:13px; padding:13px 16px; font-family:'Instrument Sans',system-ui,sans-serif; font-size:16px; color:#0C1D36; background:#FFFFFF}
.mrp-field textarea{resize:vertical; min-height:96px}
.mrp-field :focus-visible, .mrp-consent input:focus-visible{outline:3px solid #17406D; outline-offset:2px}
.mrp-form-error{background:#FCEFEE; border:1px solid rgba(201,64,58,0.35); border-radius:12px; padding:13px 18px; font-size:14.5px; font-weight:600; color:#B3362F}
.mrp-req-summary{margin:0; background:#EDF3EE; border:1px solid rgba(47,164,92,0.4); border-radius:12px; padding:12px 16px; font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:16px; color:#17406D}
.mrp-form-hint{margin:-6px 0 0; font-size:13px; line-height:1.55; color:#7A87A0}
.mrp-consent{display:flex; gap:12px; align-items:flex-start; font-size:14px; line-height:1.55; color:#4A5670; cursor:pointer}
.mrp-consent input{width:20px; height:20px; margin:1px 0 0; flex:none; accent-color:#2FA45C}
.mrp-consent a, .mrp-form-foot a{color:#1F7A43; font-weight:600}
.mrp-form-foot{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:14px 20px; border-top:1px solid rgba(10,18,40,0.08); padding-top:20px}
.mrp-form-foot span{font-size:13.5px; line-height:1.6; color:#4A5670; flex:1 1 260px}
.mrp-form button.mrp-btn{border:none; cursor:pointer}
.mrp-form button.mrp-btn:disabled{opacity:.7; cursor:progress; transform:none}

/* ── First month free ── */
.mrp-offer{background:linear-gradient(135deg, #17406D, #0F3156); border-radius:20px; padding:clamp(26px, 3.5vw, 36px); display:grid; grid-template-columns:repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap:18px 32px; align-items:center; box-shadow:0 20px 50px rgba(23,64,109,0.3); color:#FFFFFF}
.mrp-offer h3{margin:0; font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:clamp(22px, 2.4vw, 30px); letter-spacing:-0.02em; line-height:1.15}
.mrp-offer p{margin:0; font-size:15px; line-height:1.65; color:rgba(255,255,255,0.88)}
.mrp-offer .mrp-eyebrow{color:#7ADE9B}
.mrp-offer .mrp-list li{color:rgba(255,255,255,0.9)}
.mrp-offer .mrp-list li::before{color:#7ADE9B}
.mrp-offer .mrp-list li.is-no::before{color:#FF9B8F}

/* ── How it works: four numbered steps in one strip ── */
.mrp-how{margin:0; padding:0; list-style:none; display:grid; grid-template-columns:repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap:18px; counter-reset:none}
.mrp-how-step{background:#FFFFFF; border:1px solid rgba(10,18,40,0.09); border-radius:20px; padding:24px; display:flex; flex-direction:column; gap:14px}
.mrp-step-dot{width:30px; height:30px; border-radius:50%; background:#17406D; color:#FFFFFF; display:grid; place-items:center; font-family:'JetBrains Mono',monospace; font-size:11px; font-weight:600; flex:none}
.mrp-step-body{display:flex; flex-direction:column; gap:4px}
.mrp-step-when{font-family:'JetBrains Mono',monospace; font-size:11.5px; letter-spacing:0.12em; text-transform:uppercase; color:#7A87A0}
.mrp-step-body strong{font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:15.5px; color:#0C1D36; letter-spacing:-0.01em}
.mrp-step-body p{margin:0; font-size:14.5px; line-height:1.6; color:#4A5670}

/* ── Plan-detail cards reuse the light-green aside look ── */
.mrp-details{display:grid; grid-template-columns:repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap:18px}
.mrp-detail{background:#EDF3EE; border:1px solid rgba(23,64,109,0.2); border-radius:16px; padding:26px; display:flex; flex-direction:column; gap:8px}
.mrp-detail .mrp-eyebrow{font-size:12.5px; letter-spacing:0.16em}
.mrp-detail p{margin:0; font-size:14.5px; line-height:1.6; color:#22335A}
.mrp-detail a{color:#1F7A43; font-weight:600; text-decoration:underline; text-underline-offset:2px}

/* ── FAQ: native <details>, readable without JS ── */
.mrp-faq{display:flex; flex-direction:column; gap:12px; max-width:860px}
.mrp-faq details{background:#FFFFFF; border:1px solid rgba(10,18,40,0.09); border-radius:16px; padding:0 25px; transition:border-color .25s}
.mrp-faq details[open]{border-color:rgba(47,158,85,0.5)}
.mrp-faq summary{cursor:pointer; list-style:none; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:20px 0; font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:17px; letter-spacing:-0.01em; color:#0C1D36}
.mrp-faq summary::-webkit-details-marker{display:none}
.mrp-faq summary::after{content:"+"; width:32px; height:32px; border-radius:50%; background:#F5F7FA; border:1px solid rgba(10,18,40,0.12); display:grid; place-items:center; font-size:15px; color:#2F9E52; flex:none; transition:transform .3s}
.mrp-faq details[open] summary::after{transform:rotate(45deg)}
.mrp-faq details p{margin:0; padding:0 0 22px; font-size:15.5px; line-height:1.7; color:#4A5670; max-width:760px}

/* ── Responsive ── */
@media (min-width:1101px){
  .mrp-results{position:sticky; top:102px; align-self:start}
}
@media (max-width:1100px){
  .mrp-calc, .mrp-request{grid-template-columns:1fr}
  .mrp-request-side img{height:200px}
}
@media (max-width:820px){
  .mrp-brands-head, .mrp-brand-groups{grid-template-columns:1fr}
  .mrp-brands-head{align-items:start}
  .mrp-brand-group--stairlifts .mrp-brand-list{grid-template-columns:repeat(2, minmax(0, 1fr))}
}
@media (max-width:520px){
  .mrp-panel-actions{flex-direction:column; align-items:stretch; width:100%}
  .mrp-panel-actions > a, .mrp-form-foot .mrp-btn{width:100%}
  .mrp-price strong{font-size:34px}
  .mrp-brand-group--scooters .mrp-brand-list, .mrp-brand-group--stairlifts .mrp-brand-list{grid-template-columns:1fr}
  .mrp-brand-list a{min-height:44px}
}