/*
 * Move Quote Calculator - checkout page
 * Loads after calculator.css and reuses its custom properties, so whatever you
 * set under Settings > Move Calculator > Colours applies here too.
 * Every selector is scoped to .hg-calc.
 */

.hg-calc.mvc-co{padding-top:26px}

/* ============================================================================
   HEADER
   ========================================================================= */
.hg-calc .mvc-co-head{text-align:center;margin:0 0 22px}
.hg-calc .mvc-co-head h1{font-size:38px;font-weight:700;letter-spacing:-.025em;color:#fff;margin:0 0 8px;line-height:1.12;
  text-shadow:0 1px 2px rgba(120,40,8,.18)}
.hg-calc .mvc-co-head p{display:inline-flex;align-items:center;gap:7px;margin:0;font-size:13.5px;font-weight:500;
  color:#fff;background:rgba(0,0,0,.14);border-radius:999px;padding:7px 16px}
.hg-calc .mvc-co-head p svg{flex:none}

/* ============================================================================
   LAYOUT - form on the left, order summary on the right
   ========================================================================= */
.hg-calc .mvc-co-grid{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:20px;align-items:start}
.hg-calc .mvc-co-main{min-width:0;display:grid;gap:16px}
.hg-calc .mvc-co-side{min-width:0;position:sticky;top:20px}

.hg-calc .mvc-co-sec{padding:24px 26px 22px;margin:0}
.hg-calc .mvc-co-sec h2{display:flex;align-items:center;gap:9px;margin:0 0 18px;font-size:15px;font-weight:600;
  letter-spacing:-.01em;color:var(--ink)}
.hg-calc .mvc-co-sec h2 svg{flex:none;color:var(--amber-deep)}
.hg-calc .mvc-co-hint{display:block;margin-top:6px;font-size:11px;color:var(--ink-50)}

/* ============================================================================
   ORDER SUMMARY
   ========================================================================= */
.hg-calc .mvc-co-card{background:var(--white);border-radius:var(--r-card);box-shadow:var(--shadow);padding:22px 22px 18px}
.hg-calc .mvc-co-card h3{margin:0 0 16px;font-size:14px;font-weight:600;letter-spacing:.01em;
  padding-bottom:12px;border-bottom:1px solid var(--line)}
.hg-calc .mvc-co-item{display:flex;gap:12px;align-items:flex-start;padding-bottom:16px;border-bottom:1px solid var(--line-soft)}
.hg-calc .mvc-co-item-ic{width:32px;height:32px;border-radius:8px;background:var(--peach-bg);color:var(--amber-deep);
  display:flex;align-items:center;justify-content:center;flex:none}
.hg-calc .mvc-co-item div{flex:1;min-width:0}
.hg-calc .mvc-co-item strong{display:block;font-size:12.5px;font-weight:600;line-height:1.45;margin-bottom:3px}
.hg-calc .mvc-co-item em{display:block;font-style:normal;font-size:11px;color:var(--ink-50);line-height:1.55}
.hg-calc .mvc-co-item b{font-size:13px;font-weight:700;white-space:nowrap}

.hg-calc .mvc-co-lines{padding:6px 0 0}
.hg-calc .mvc-co-lines .ln{display:flex;justify-content:space-between;gap:14px;font-size:12.5px;padding:9px 0;color:var(--ink-70)}
.hg-calc .mvc-co-lines .ln b{color:var(--ink);font-weight:600;white-space:nowrap}
.hg-calc .mvc-co-lines .ln.tot{margin-top:6px;padding-top:13px;border-top:1px solid var(--line);
  font-size:15px;font-weight:600;color:var(--ink)}
.hg-calc .mvc-co-lines .ln.tot b{font-size:20px;font-weight:700;color:var(--amber-deep)}

.hg-calc .mvc-co-route{margin-top:14px;padding-top:14px;border-top:1px solid var(--line-soft);display:grid;gap:9px}
.hg-calc .mvc-co-route em{display:block;font-style:normal;font-size:10px;color:var(--ink-35);
  text-transform:uppercase;letter-spacing:.06em;margin-bottom:2px}
.hg-calc .mvc-co-route span{font-size:11.5px;color:var(--ink-70);line-height:1.5}

.hg-calc .mvc-co-ref{margin:14px 0 0;padding-top:13px;border-top:1px solid var(--line-soft);
  font-size:11px;color:var(--ink-50);display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap}
.hg-calc .mvc-co-ref b{font-size:12px;color:var(--ink);letter-spacing:.02em}
.hg-calc .mvc-co-back{margin:12px 0 0;text-align:center}
.hg-calc .mvc-co-back a{font-size:11.5px;font-weight:600;color:#fff;text-decoration:none;
  border-bottom:1px solid rgba(255,255,255,.6);padding-bottom:1px}
.hg-calc .mvc-co-back a:hover{border-bottom-color:#fff}
.hg-calc.mvc-co .trust i svg{width:11px;height:11px;flex:none}

/* ============================================================================
   PAYMENT METHODS
   ========================================================================= */
.hg-calc .mvc-co-methods{display:block}
.hg-calc .mvc-co-opt{display:flex;gap:12px;align-items:center;border:1px solid var(--line);border-radius:10px;
  padding:14px 16px;margin-bottom:10px;cursor:pointer;transition:.15s;position:relative}
.hg-calc .mvc-co-opt:hover{border-color:var(--ink-35)}
.hg-calc .mvc-co-opt.on{border-color:var(--navy);background:#FAFAFA;box-shadow:0 0 0 1px var(--navy)}
.hg-calc .mvc-co-radio{position:absolute;opacity:0;width:1px;height:1px;margin:0;padding:0;pointer-events:none}
.hg-calc .mvc-co-opt .radio{width:18px;height:18px;border-radius:50%;border:1.5px solid var(--line);flex:none;position:relative}
.hg-calc .mvc-co-opt.on .radio{border-color:var(--navy)}
.hg-calc .mvc-co-opt.on .radio:after{content:'';position:absolute;inset:3px;border-radius:50%;background:var(--navy)}
.hg-calc .mvc-co-optbody{flex:1;min-width:0}
/* calculator.css colours every .opt span amber; the title needs to stay black
   so the title/description hierarchy reads the same as the review screen. */
.hg-calc .mvc-co-optbody strong{display:flex;align-items:center;gap:7px;font-size:13px;font-weight:600;
  margin-bottom:2px;color:var(--ink)}
.hg-calc .mvc-co-optbody strong svg{flex:none;color:var(--ink-70)}
.hg-calc .mvc-co-opt.on .mvc-co-optbody strong svg{color:var(--navy)}
.hg-calc .mvc-co-optbody > span{display:block;font-size:11.5px;color:var(--amber-deep);line-height:1.5}
.hg-calc .mvc-co-radio:focus-visible + .radio{outline:2px solid var(--amber);outline-offset:2px}

.hg-calc .mvc-co-marks{display:flex;gap:5px;flex:none}
.hg-calc .mvc-co-marks i{font-style:normal;font-size:8.5px;font-weight:700;letter-spacing:.03em;
  border:1px solid var(--line);border-radius:4px;padding:4px 5px;color:var(--ink-50);background:var(--white)}

.hg-calc .mvc-co-panel{display:none;margin:-2px 0 12px;padding:14px 16px;background:var(--peach-bg);
  border:1px solid var(--peach-bd);border-radius:10px}
.hg-calc .mvc-co-panel.on{display:block}
.hg-calc .mvc-co-panel p{margin:0;font-size:12px;line-height:1.65;color:var(--ink-70)}
.hg-calc .mvc-co-panel p + p{margin-top:8px}
.hg-calc .mvc-co-bank{margin-top:12px;background:var(--white);border:1px solid var(--peach-bd);border-radius:8px;padding:12px 14px}
.hg-calc .mvc-co-bank pre{margin:0;font:inherit;font-size:12px;line-height:1.85;color:var(--ink);
  white-space:pre-wrap;word-break:break-word}
.hg-calc .mvc-co-bank p{display:flex;justify-content:space-between;gap:10px;margin:10px 0 0;padding-top:10px;
  border-top:1px dashed var(--peach-bd);font-size:12px}
.hg-calc .mvc-co-bank p span{color:var(--ink-50)}
.hg-calc .mvc-co-bank p b{font-weight:700;letter-spacing:.02em}

/* ============================================================================
   TERMS + PLACE ORDER
   ========================================================================= */
.hg-calc .mvc-co-terms{display:flex;gap:11px;align-items:flex-start;background:var(--white);border-radius:var(--r-panel);
  box-shadow:var(--shadow);padding:16px 20px;font-size:12.5px;color:var(--ink-70);line-height:1.6;cursor:pointer}
.hg-calc .mvc-co-terms input{width:17px;height:17px;flex:none;margin:1px 0 0;padding:0;accent-color:var(--navy);cursor:pointer}
.hg-calc .mvc-co-terms a{color:var(--amber-deep);font-weight:600;text-decoration:none;border-bottom:1px solid currentColor}
.hg-calc .mvc-co-terms.bad{box-shadow:0 0 0 1.5px var(--red),var(--shadow)}

.hg-calc .mvc-co-submit{background:var(--white);border-radius:var(--r-card);box-shadow:var(--shadow);padding:22px 24px 18px;text-align:center}
.hg-calc .mvc-co-submit .btn-primary{width:100%;justify-content:center}
.hg-calc .mvc-co-submit .btn-primary[disabled]{opacity:.65;cursor:default;transform:none}
.hg-calc .mvc-co-submit .paynote{margin-top:12px;line-height:1.55}

.hg-calc .mvc-co-alert{display:flex;gap:10px;align-items:flex-start;background:#FFF6F5;border:1px solid #F5C9C4;
  border-radius:var(--r-panel);padding:14px 16px;font-size:12.5px;line-height:1.6;color:#8A2A20}
.hg-calc .mvc-co-alert svg{flex:none;margin-top:1px;color:var(--red)}

/* ============================================================================
   CONFIRMATION / ERROR SCREENS
   ========================================================================= */
.hg-calc .mvc-co-msg{text-align:center;padding:34px 34px 28px}
.hg-calc .mvc-co-badge{width:54px;height:54px;border-radius:50%;background:#E9F7EE;color:var(--green);
  display:inline-flex;align-items:center;justify-content:center;margin-bottom:14px}
.hg-calc .mvc-co-badge svg{width:26px;height:26px}
.hg-calc .mvc-co-badge.warn{background:var(--peach-bg);color:var(--amber-deep)}
.hg-calc .mvc-co-msg .bankbox{text-align:left}
.hg-calc .mvc-co-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin:18px 0 0}
.hg-calc .mvc-co-msg .mvc-co-ref{justify-content:center;margin-top:18px}

/* ============================================================================
   RESPONSIVE
   ========================================================================= */
@media (max-width:900px){
  .hg-calc .mvc-co-grid{grid-template-columns:1fr}
  .hg-calc .mvc-co-side{position:static;order:-1}
  .hg-calc .mvc-co-head h1{font-size:30px}
}
@media (max-width:820px){
  /* Same reason as the calculator: under 16px, iOS zooms the page on focus. */
  .hg-calc.mvc-co input,.hg-calc.mvc-co select,.hg-calc.mvc-co textarea{font-size:16px;min-height:48px}
  .hg-calc .mvc-co-terms input{min-height:0;width:22px;height:22px}
  .hg-calc .mvc-co-submit .btn{min-height:52px}
}
@media (max-width:600px){
  .hg-calc.mvc-co{padding-left:12px;padding-right:12px}
  .hg-calc .mvc-co-sec{padding:20px 18px 18px}
  .hg-calc .mvc-co-card{padding:18px 16px 15px}
  .hg-calc .mvc-co-submit{padding:18px 16px 15px}
  .hg-calc .mvc-co-head h1{font-size:26px}
  .hg-calc .det-grid{grid-template-columns:1fr}
  .hg-calc .mvc-co-marks{display:none}
  .hg-calc .mvc-co-opt{padding:13px 14px}
}
@media (prefers-reduced-motion:reduce){
  .hg-calc .mvc-co-opt,.hg-calc .btn{transition:none}
  .hg-calc .btn-primary:hover{transform:none}
}