/* Magnetrix Operator — support layer.
   Elementor widget settings carry the layout and most styling. This file only
   covers what widget settings cannot express: webfont wiring, the two
   shortcode UIs (shipment tracking, freight calculator), and a small set of
   helpers referenced from widget CSS-class fields.
   Tokens mirror the active design system exactly. */

:root{
  --mx-bg:#FFFFFF; --mx-surface:#F7FCFC; --mx-surface-alt:#ECF6F6;
  --mx-ink:#04100F; --mx-body:#3F5C5A; --mx-muted:#6C8A88;
  --mx-accent:#20E6F2; --mx-accent-text:#016470;
  --mx-teal-600:#00636D; --mx-teal-800:#003B41;
  --mx-sage:#9FBFBD; --mx-slate:#5E817F; --mx-border:#DCEAEA; --mx-clay:#C7766B;
  --mx-font-display:'Space Grotesk',sans-serif;
  --mx-font-body:'Hanken Grotesk',sans-serif;
  --mx-font-mono:'Space Mono',monospace;
  --mx-font-quote:'Newsreader',Georgia,serif;
  --mx-r-sm:11px; --mx-r-md:14px; --mx-r-lg:20px; --mx-r-pill:999px;
  --mx-shadow-sm:0 1px 2px rgba(4,16,15,.04),0 2px 8px rgba(4,16,15,.05);
  --mx-shadow:0 2px 4px rgba(4,16,15,.04),0 10px 28px rgba(4,16,15,.07);
}

/* ---------- helpers used from Elementor CSS-class fields ---------- */
.mx-label{font-family:var(--mx-font-mono)!important;text-transform:uppercase;letter-spacing:.24em;font-weight:700}
.mx-quote{font-family:var(--mx-font-quote)!important;font-style:italic}
.mx-measure{max-width:66ch}

/* Dark bands: two soft radial glows, per the design's Elevation note. */
.mx-glow{position:relative;overflow:hidden}
.mx-glow>*{position:relative;z-index:1}
.mx-glow:before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(680px 420px at 78% 10%,rgba(32,230,242,.16),transparent 62%),
             radial-gradient(560px 400px at 4% 92%,rgba(0,99,109,.30),transparent 65%)}

/* Process rail: hairline + cyan node, not numbered cards. */
.mx-step{position:relative;padding-top:26px}
.mx-step:before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:var(--mx-border)}
.mx-step:after{content:"";position:absolute;top:-5px;left:0;width:11px;height:11px;border-radius:50%;
  background:var(--mx-bg);border:2px solid var(--mx-accent)}

/* ---------- shared form controls (shortcode UIs) ---------- */
.mx-field{display:block;margin-bottom:18px}
.mx-field>label{display:block;margin-bottom:7px;font-family:var(--mx-font-mono);font-size:.655rem;
  letter-spacing:.17em;text-transform:uppercase;color:var(--mx-muted);font-weight:700}
.mx-input,.mx-select{width:100%;padding:13px 15px;font-family:var(--mx-font-body);font-size:.96rem;
  color:var(--mx-ink);background:#fff;border:1px solid var(--mx-border);border-radius:var(--mx-r-sm);
  appearance:none;-webkit-appearance:none;transition:border-color .18s,box-shadow .18s}
.mx-select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6' fill='none' stroke='%235E817F' stroke-width='1.5' stroke-linecap='round'%3E%3Cpath d='M1 1l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 15px center;background-size:11px;padding-right:40px}
.mx-input:focus,.mx-select:focus{outline:none;border-color:var(--mx-teal-600);box-shadow:0 0 0 3px rgba(32,230,242,.2)}
.mx-input::placeholder{color:#9BB4B2}
.mx-btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:13px 26px;
  border:0;border-radius:var(--mx-r-pill);cursor:pointer;font-family:var(--mx-font-display);
  font-weight:600;font-size:.93rem;letter-spacing:-.01em;
  background:var(--mx-accent);color:var(--mx-ink);box-shadow:0 6px 18px rgba(32,230,242,.28);
  transition:background .18s,transform .18s,box-shadow .18s}
.mx-btn:hover{background:#4CEDF6;transform:translateY(-1px);box-shadow:0 10px 26px rgba(32,230,242,.36)}
.mx-btn[aria-busy="true"]{pointer-events:none;opacity:.72}
.mx-msg{display:none;margin-top:16px;padding:13px 16px;border-radius:var(--mx-r-sm);font-size:.9rem}
.mx-msg[data-state="error"]{display:block;background:rgba(199,118,107,.1);border:1px solid rgba(199,118,107,.4);color:#8E4438}
.mx-msg[data-state="ok"]{display:block;background:rgba(0,99,109,.08);border:1px solid rgba(0,99,109,.28);color:var(--mx-teal-800)}

/* ---------- shipment tracking ---------- */
.mx-panel{background:#fff;border:1px solid var(--mx-border);border-radius:var(--mx-r-lg);
  box-shadow:var(--mx-shadow);padding:26px}
@media(min-width:768px){.mx-panel{padding:34px}}
.mx-track-form{display:grid;gap:11px}
@media(min-width:560px){.mx-track-form{grid-template-columns:1fr auto;align-items:end}}
.mx-track-form .mx-field{margin:0}
.mx-result[hidden]{display:none!important}
.mx-result{margin-top:32px}
.mx-sum{display:grid;gap:16px;margin:0 0 28px;padding:0}
@media(min-width:640px){.mx-sum{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.mx-sum{grid-template-columns:repeat(4,1fr)}}
.mx-sum>div{padding:17px 19px;background:var(--mx-surface);border:1px solid var(--mx-border);border-radius:var(--mx-r-md)}
.mx-sum dt{font-family:var(--mx-font-mono);font-size:.62rem;letter-spacing:.17em;text-transform:uppercase;color:var(--mx-muted);margin-bottom:7px}
.mx-sum dd{margin:0;font-family:var(--mx-font-display);font-weight:600;font-size:1rem;color:var(--mx-ink)}
.mx-status{display:inline-flex;align-items:center;gap:8px;padding:6px 14px;border-radius:var(--mx-r-pill);
  font-family:var(--mx-font-mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700;
  background:rgba(32,230,242,.14);border:1px solid rgba(0,99,109,.34);color:var(--mx-teal-800)}
.mx-status[data-tone="exception"]{background:rgba(199,118,107,.12);border-color:rgba(199,118,107,.42);color:#8E4438}
.mx-bar{height:7px;border-radius:7px;background:var(--mx-surface-alt);overflow:hidden}
.mx-bar>i{display:block;height:100%;width:0;border-radius:7px;background:linear-gradient(90deg,var(--mx-teal-600),var(--mx-accent));transition:width .5s cubic-bezier(.4,0,.2,1)}
.mx-bar-legend{display:flex;justify-content:space-between;margin-top:11px;font-family:var(--mx-font-mono);
  font-size:.63rem;letter-spacing:.13em;text-transform:uppercase;color:var(--mx-muted)}
.mx-timeline{list-style:none;margin:26px 0 0;padding:0;position:relative}
.mx-timeline:before{content:"";position:absolute;left:9px;top:10px;bottom:10px;width:2px;background:var(--mx-border)}
.mx-timeline li{position:relative;padding:0 0 26px 38px}
.mx-timeline li:last-child{padding-bottom:0}
.mx-timeline li:before{content:"";position:absolute;left:3px;top:5px;width:14px;height:14px;border-radius:50%;
  background:#fff;border:2px solid var(--mx-border)}
.mx-timeline li[data-done="1"]:before{background:var(--mx-teal-600);border-color:var(--mx-teal-600)}
.mx-timeline li[data-now="1"]:before{background:var(--mx-accent);border-color:var(--mx-accent);box-shadow:0 0 0 4px rgba(32,230,242,.22)}
.mx-timeline b{display:block;font-family:var(--mx-font-display);font-weight:600;font-size:.98rem;color:var(--mx-ink);margin:3px 0 2px}
.mx-timeline time{font-family:var(--mx-font-mono);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--mx-muted)}
.mx-timeline span{font-size:.88rem;color:var(--mx-muted)}

/* ---------- freight calculator ---------- */
.mx-calc-grid{display:grid;gap:0 18px}
@media(min-width:560px){.mx-calc-grid{grid-template-columns:1fr 1fr}}
.mx-calc-out{display:flex;align-items:baseline;justify-content:center;gap:10px;margin-top:20px}
.mx-calc-out output{font-family:var(--mx-font-display);font-weight:700;font-size:1.6rem;
  letter-spacing:-.02em;color:var(--mx-accent-text)}
.mx-calc-note{margin:10px 0 0;text-align:center;font-size:.8rem;color:var(--mx-muted)}

@media(prefers-reduced-motion:reduce){*{animation-duration:.001ms!important;transition-duration:.001ms!important}}