/* Wizard Container */
.sr-wizard-container {
  max-width: 800px;
  margin: 2rem auto;
  font-family: Arial, sans-serif;
  color: #333;
}

/* Progress Bar */
.sr-progress-bar {
  display: flex;
  margin-bottom: 1.5rem;
}
.sr-step {
  flex: 1;
  text-align: center;
  padding: 0.5rem;
  background: #e0e0e0;
  position: relative;
  font-size: 0.9rem;
  cursor: default;
}
.sr-step.visited {
  background: #4a90e2;
  color: #fff;
}
.sr-step.active {
  background: #357ab8;
  color: #fff;
  font-weight: bold;
}
.sr-step + .sr-step::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 2px;
  height: 1rem;
  background: #aaa;
  transform: translateY(-50%);
}

/* Panels */
.sr-panel {
  display: none;
  padding: 1rem;
  border: 1px solid #ddd;
  border-radius: 6px;
  margin-bottom: 1rem;
  background: #fafafa;
}

/* Cargo Table */
.sr-cargo-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 1rem;
}
.sr-cargo-table th,
.sr-cargo-table td {
  border: 1px solid #ccc;
  padding: 0.4rem;
  text-align: center;
}
.sr-cargo-table input[type="text"],
.sr-cargo-table input[type="number"] {
  width: 4rem;
  padding: 0.2rem;
  box-sizing: border-box;
}
.remove-cargo {
  background: transparent;
  border: none;
  color: #c00;
  font-size: 1.2rem;
  cursor: pointer;
}

/* Add Buttons */
#add-cargo-box,
#add-cargo-cylinder,
#add-cargo-bag {
  padding: 0.5rem 1rem;
  background: #4a90e2;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
#add-cargo-box:hover,
#add-cargo-cylinder:hover,
#add-cargo-bag:hover {
  background: #357ab8;
}

/* Navigation Buttons */
.sr-wizard-nav{
  /* layout */
  display: flex;              /* keeps the row’s height */
  justify-content: flex-end;  /* buttons on the right   */
  gap: .75rem;                /* spacing between buttons */

  /* make sure it always drops below floated SVGs */
  clear: both;

  /* optional—keeps legacy right-align if flex is removed later */
  text-align: right;
}


.sr-btn {
  padding: 0.6rem 1.2rem;
  font-size: 1rem;
  border: none;
  border-radius: 4px;
  background: #4a90e2;
  color: #fff;
  cursor: pointer;
  margin-left: 0.5rem;
}
.sr-btn:disabled {
  background: #ccc;
  cursor: not-allowed;
}
.sr-btn:hover:not(:disabled) {
  background: #357ab8;
}

/* Tiles (Container & Cargo) */
.tile,
.cargo-tile {
  display: inline-block;
  border: 2px solid #ddd;
  border-radius: 6px;
  padding: 1rem;
  margin: 0.5rem;
  text-align: center;
  cursor: pointer;
}
.tile input[type="radio"],
.cargo-tile input[type="radio"] {
  display: none;
}
.tile .tile-label,
.cargo-tile span {
  display: block;
  margin-top: 0.5rem;
}
.tile input:checked + .tile-label,
.tile.selected,
.cargo-tile input:checked + span,
.cargo-tile.selected {
  border-color: #4a90e2;
  background: #eaf4fc;
}
.tile img,
.cargo-tile img {
  max-width: 60px;
  height: auto;
}

/* Tabs */
.sr-tab {
  list-style: none;
  padding: 0;
  display: flex;
  border-bottom: 2px solid #ccc;
  margin-bottom: 1rem;
}
.sr-tab li {
  margin-right: 1rem;
  padding: 0.5rem 1rem;
  cursor: pointer;
}
.sr-tab li.active {
  border-bottom: 3px solid #4a90e2;
  font-weight: bold;
}
.sr-tab-content {
  margin-bottom: 1rem;
}

/* Load Bar */
.load-bar {
  width: 100%;
  background: #eee;
  border-radius: 4px;
  overflow: hidden;
  margin: 1rem 0;
  height: 1rem;
}
.load-inner {
  height: 100%;
  background: #4a90e2;
  width: 0;
  transition: width 0.3s ease;
}
.warning {
  color: #c00;
  font-weight: bold;
  margin-top: 0.5rem;
}

/* Pallet View Canvas */
#container-view {
  text-align: center;
}
#ct-canvas {
  border: 1px solid #ccc;
  max-width: 100%;
}

/* Input Fields */
input[type="number"],
input[type="text"] {
  padding: 0.3rem;
  border: 1px solid #ccc;
  border-radius: 4px;
}

/* Utility */
.hidden {
  display: none !important;
}

/* ==========================================================
   Modern minimalist refresh  ───  add BELOW existing styles
   ========================================================== */

/* Base palette */
:root{
  --sr-primary: #0067dc;         /* royal-blue buttons, active pills  */
  --sr-accent : #6c4cff;         /* purple “Next”                     */
  --sr-bg     : #ffffff;
  --sr-border : #e2e8f0;
  --sr-text   : #1a1a1a;
  --sr-muted  : #6b7280;
}

/*──────── Top step pills ──────────────────────────────────*/
.sr-step{
  background:#f7f9fc;
  color:var(--sr-muted);
  border:1px solid var(--sr-border);
  border-radius:8px;
  font-weight:600;
  padding:.55rem 1.1rem;
  line-height:1;
  transition:background .2s,color .2s;
}
.sr-step.active{
  background:var(--sr-primary);
  color:#fff;
}
.sr-step.visited{
  background:#e9f0fc;
  color:var(--sr-primary);
}

/*──────── Card-like panel wrapper ─────────────────────────*/
.sr-panel{
  background:var(--sr-bg);
  border:1px solid var(--sr-border);
  border-radius:12px;
  box-shadow:0 1px 3px rgba(0,0,0,.04);
  padding:1.75rem;
}

/*──────── Section headings (📦  🛢️  🛍️) ───────────────────*/
.sr-panel h2{
  display:flex;
  align-items:center;
  gap:.5rem;
  font-size:1.15rem;
  font-weight:700;
  margin:0 0 1rem;
  color:var(--sr-text);
}

/*──────── Cargo tables ────────────────────────────────────*/
.sr-cargo-table{
  width:100%;
  border-collapse:separate;           /* keeps header borders crisp */
  border-spacing:0;
  font-size:.875rem;
}
.sr-cargo-table thead th{
  background:#1e293b;
  color:#fff;
  padding:.75rem .55rem;
  font-weight:600;
  border-right:1px solid #23344d;
}
.sr-cargo-table thead th:last-child{border-right:none;}

.sr-cargo-table tbody td{
  padding:.5rem .4rem;
  border-bottom:1px solid var(--sr-border);
  border-right:1px solid var(--sr-border);
}
.sr-cargo-table tbody tr:last-child td{border-bottom:none;}
.sr-cargo-table tbody td:last-child{border-right:none;}

/*──────── Horizontal progress bar under each table ───────*/
.sr-scroll-track{                   /* add this <div> in PHP if not there */
  height:6px;
  background:#d1d5db;
  border-radius:3px;
  margin:.6rem 0 1.1rem;
  position:relative;
}
.sr-scroll-track::after{            /* dynamic width via JS if desired */
  content:'';
  position:absolute;
  inset:0 100% 0 0;
  background:var(--sr-primary);
  border-radius:inherit;
  transition:width .3s;
}

/*──────── “Add cargo” buttons ─────────────────────────────*/
.sr-add-btn, .sr-panel .sr-btn{     /* catches any existing add buttons */
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  background:var(--sr-primary);
  color:#fff;
  font-size:.8125rem;
  padding:.42rem 1.05rem;
  border:none;
  border-radius:6px;
  cursor:pointer;
  transition:background .2s;
}
.sr-add-btn:hover,
.sr-panel .sr-btn:hover{background:#005bc4;}

/*──────── Nav buttons (Back / Next) ───────────────────────*/
.sr-back{
  background:#f3f4f6;
  color:var(--sr-text);
  border:none;
  border-radius:8px;
  padding:.62rem 1.35rem;
  font-weight:600;
}
.sr-back:hover{background:#e5e7eb;}

.sr-next{
  background:var(--sr-accent);
  color:#fff;
  border:none;
  border-radius:8px;
  padding:.62rem 1.6rem;
  font-weight:600;
}
.sr-next:hover{background:#5b43ff;}

/*──────── Responsive widening for landscape / desktop ────*/
@media(min-width:992px){
  .sr-wizard-container{max-width:1240px;}
}

/* Flattened Step 3 – hide legacy tab bar & force panes visible */
.sr-tab{display:none;}
.sr-tab-content{display:block!important; margin-top:1.5rem;}
.sr-tab-content + .sr-scroll-track{margin-top:.75rem;}

/* ───── Image-tile selectors ──────────────────────────── */
.sr-selectable{
  position:relative;
  display:inline-block;
  border:2px solid transparent;
  border-radius:10px;
  padding:8px 10px 12px;
  margin:.35rem .45rem;
  text-align:center;
  cursor:pointer;
  transition:border .2s,box-shadow .2s;
}
.sr-selectable:hover{
  box-shadow:0 2px 4px rgba(0,0,0,.06);
}
.sr-selectable input{display:none;}           /* hide radio / checkbox */

/* Tidy icon size */
.sr-selectable img{
  width:60px;
  height:60px;
  object-fit:contain;
  display:block;
  margin:0 auto .4rem;
}

/* ── Orientation pill styles (Step 3) ──────────────────── */
.sr-orient-block{
  margin:.6rem 0 1rem;
  font-size:.95rem;
}
.sr-orient-pill{
  display:inline-block;
  margin-left:10px;
  padding:.25rem .55rem;
  border:1px solid var(--sr-border);
  border-radius:16px;
  cursor:pointer;
  user-select:none;
}
/* ── orientation pills — hide radio but keep it clickable ───────── */
.sr-orient-pill{
  position:relative;                       /* for absolute child */
  transition:background .2s,border .2s,color .2s;
}
.sr-orient-pill input{
  position:absolute;
  inset:0;                                 /* full pill area     */
  opacity:0;                               /* invisible but live */
  cursor:pointer;
}

/* colour the whole pill when that hidden radio is checked */
.sr-orient-pill:has(input:checked){
  background:#e9f0fc;
  border-color:var(--sr-primary);
  color:var(--sr-primary);
}


/* Make sure our blue outline wins every time */
.sr-selectable.sr-selectable-selected{
  border-color:var(--sr-primary);
  box-shadow:0 0 0 2px rgba(0,103,220,.25);
}

/*────────────────  BIG centred selector tiles  ───────────*/

/* 1 ▸ Row wrapper → centre children */
.sr-options,             /* Step-1 Container Type group   */
.container-options,
.cargo-mode-options,     /* Step-2 Carton / Pallet group  */
.pallet-type-options{    /* Step-4 Floor / Stack group    */
  display:flex;
  justify-content:center;     /* ← centre horizontally */
  flex-wrap:wrap;             /* wrap onto next line on small screens */
  gap:1rem 2rem;              /* vertical | horizontal spacing */
  margin-top:.75rem;
}

/* 2 ▸ Tile size & look */
.sr-tile.sr-selectable{
  width:150px;                /* ← make the card wider   */
  height:150px;               /* ← and taller            */
  padding:16px 10px;
  border:3px solid transparent;  /* thicker border for emphasis */
  border-radius:12px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:border .2s,box-shadow .2s,transform .15s;
}
.sr-tile.sr-selectable:hover{
  transform:translateY(-2px);      /* tiny lift on hover   */
  box-shadow:0 4px 8px rgba(0,0,0,.05);
}

/* 3 ▸ Bigger icon */
.sr-selectable img{
  width:90px;
  height:90px;
  object-fit:contain;
  margin-bottom:.6rem;
}

/* 4 ▸ Caption tweak */
.sr-tile.sr-selectable span{
  font-size:.9rem;
  font-weight:600;
  line-height:1.2;
}

/* 5 ▸ Active state */
.sr-selectable.sr-selectable-selected{
  border-color:var(--sr-primary);
  box-shadow:0 0 0 3px rgba(0,103,220,.25);
}

/* ───── Pallet dimension sketch (Step 5) ───────────────── */
.sr-pallet-wrap{
  max-width:420px;        /* matches the SVG viewBox */
  margin:0 auto 1.25rem;  /* centre + breathing-room */
}
@media(min-width:992px){          /* on desktops, float it left of the form  */
  .sr-pallet-wrap{
    float:left;
    margin:0 2rem 1.25rem 0;
  }
}

/* Step-5 illustration wrapper – widen & prevent squish */
.sr-pallet-wrap{
  max-width:500px;   /* was 420px */
}

/* Step-5 panel needs extra vertical room for the pallet arrows */
[data-step="5"].sr-panel{
  padding-bottom:2.5rem;   /* add ~40 px breathing-room */
  /* If you prefer an absolute height instead:
     min-height: 400px;
   */
}

/* Step-5 panel – taller box */
[data-step="5"].sr-panel{
  min-height:380px;    /* increase value until it looks right */
  padding-bottom:2.5rem;
}

/* Pallet size table */
.sr-pallet-table{
  width:100%;
  border-collapse:collapse;
  margin-bottom:1rem;
  font-size:.875rem;
}
.sr-pallet-table th,
.sr-pallet-table td{
  border:1px solid var(--sr-border);
  padding:.4rem;
  text-align:center;
}
.sr-pallet-table input{
  width:4rem;
}
.remove-pallet{
  background:none;
  border:none;
  color:#c00;
  font-size:1.2rem;
  cursor:pointer;
}

.sr-grand-table{
  width:100%; border-collapse:collapse; margin:1rem 0;
  font-weight:600; font-size:.9rem;
}
.sr-grand-table th,
.sr-grand-table td{
  border:1px solid var(--sr-border);
  text-align:center; padding:.4rem;
}
.sr-grand-head{ margin-top:1.5rem; }

/* colourful 10-segment bar */
.load-bar{width:100%;background:#eee;border-radius:4px;overflow:hidden;height:1rem;margin:1rem 0;}
.load-inner{
  height:100%;
  background-image:linear-gradient(90deg,
   #8dd0ff 0 10%, #c5f1d1 10% 20%, #ffe9a8 20% 30%, #ffd48a 30% 40%,
   #ffc173 40% 50%, #ffa45f 50% 60%, #ff8b52 60% 70%, #ff7048 70% 80%,
   #ff4e45 80% 90%, #ff2d2d 90% 100%);
  background-size:100% 100%;
  transition:width .3s;
}
.load-inner.over{filter:grayscale(45%);}

.sr-step9-images {
  margin-top: 2rem;
  text-align: center;
}
.sr-step9-images img {
  max-width: 100%;
  margin: 1rem auto;
  display: block;
}
.sr-step9-images h3 {
  margin-bottom: 1rem;
  font-size: 1.1rem;
}

/* Add after existing .sr-btn styles for custom toggle effect */
.sr-btn.bag-sleeping-on {
  background: #ff9800 !important;      /* orange for ON */
  color: #fff !important;
  border: 2px solid #ff9800;
  font-weight: bold;
}

.sr-btn.bag-sleeping-off {
  background: #fafafa !important;      /* light gray for OFF */
  color: #666 !important;
  border: 2px solid #ccc;
  font-weight: normal;
}

.cargo-row[data-type="bag"] input[readonly] {
  background: #f9f9f9;
  color: #aaa;
  pointer-events: none;
  border: 1px solid #eee;
}

#cargo3d-previews {
  display: flex;
  flex-wrap: wrap;
  gap: 32px 32px;
  justify-content: flex-start;
  margin: 0 auto;
}

.cargo3d-container {
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 3px 24px 0 rgba(0,0,0,0.10);
  padding: 18px 0 0 0;
  flex: 1 1 1000px;
  max-width: 100vw;
  min-width: 860px;
  margin: 0 auto 40px auto;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
}

.cargo3d-label {
  font-size: 1.5rem;
  font-weight: bold;
  margin-bottom: 12px;
  letter-spacing: 1px;
  color: #1663b0;
  text-align: center;
  width: 100%;
}

.cargo3d-render {
  width: 100%;
  height: 400px;
  background: #eaf4fc;
  border-radius: 14px;
  box-shadow: 0 1px 8px rgba(0,103,220,0.11);
  margin-bottom: 0;
  box-sizing: border-box;
  overflow: hidden;
}

.cargo3d-summary {
  width: 100%;
  background: #f8fafb;
  border-radius: 0 0 18px 18px;
  padding: 22px 34px 18px 34px;
  margin: 0;
  box-shadow: 0 1px 10px rgba(0,103,220,0.05);
  box-sizing: border-box;
  font-size: 1.1rem;
  display: block;
}

.summary-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px 30px;
}
.summary-row > div {
  padding: 6px 2px 6px 2px;
  font-size: 1.07em;
}
.summary-row b {
  display: block;
  font-size: 1.04em;
  margin-bottom: 2px;
  color: #1770c9;
}

@media (max-width: 1300px) {
  .cargo3d-container {
    min-width: 98vw;
    border-radius: 10px;
    padding-left: 1vw;
    padding-right: 1vw;
  }
  .cargo3d-render { height: 220px; }
  .cargo3d-summary { padding-left: 2vw; padding-right: 2vw; }
  .summary-row { grid-template-columns: repeat(2, 1fr); }
}

#open-3d-preview {
  /* Example custom styles for the View 3D button */
  background: linear-gradient(90deg, #4a90e2 0%, #6c4cff 100%);
  color: #fff;
  font-size: 1.15rem;
  font-weight: bold;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0,103,220,0.13);
}
#open-3d-preview:hover {
  background: linear-gradient(90deg, #357ab8 0%, #5b43ff 100%);
}

#length-preview3d canvas { image-rendering: pixelated; }

/* ──────────────────────────────────────────────
   Step-8  Calculation Results  (modern refresh)
   ────────────────────────────────────────────── */
#results-content{
  background:#ffffff;
  border:1px solid #e2e8f0;
  border-radius:12px;
  box-shadow:0 4px 10px rgba(0,0,0,.06);
  padding:28px 32px;
  margin-top:18px;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  color:#222;
}

#results-content h3{
  margin:24px 0 12px;
  font-size:1.4rem;
  color:#1e3a8a;            /* dark-indigo */
  border-bottom:2px solid #1e3a8a20;
  padding-bottom:4px;
}

#results-content ul{
  list-style:none;
  margin:0 0 16px 0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:12px;
}

#results-content li{
  background:#f8f9ff;
  border:1px solid #dce1ff;
  border-radius:8px;
  padding:10px 14px;
  font-size:0.95rem;
  line-height:1.4;
  display:flex;
  justify-content:space-between;
  align-items:center;
}

#results-content li b{
  display:block;
  font-weight:600;
  color:#0f172a;            /* near-black */
  margin-bottom:4px;
}

#results-content li div{
  font-weight:500;
  color:#1e293b;            /* slate-700 */
}

#results-content .warning{
  color:#b91c1c;
  font-weight:600;
  margin-top:6px;
}

#results-content p{
  font-size:0.85rem;
  color:#6b7280;            /* gray-500 */
  margin:4px 0 12px;
}

/* load bar */
.load-bar{
  width:100%;
  height:14px;
  background:#e5e7eb;
  border-radius:7px;
  overflow:hidden;
  margin-top:12px;
}
.load-inner{
  height:100%;
  background:#60a5fa;       /* sky-400 */
  transition:width .4s;
}
.load-inner.over{
  background:#f97316;       /* orange-500 */
}

/* one-liner grid for each container row */
.metric-container{
  display:grid;
  grid-template-columns:48px 1fr 1fr 1fr;
  gap:6px;
  align-items:center;
  border:1px solid #e2e8f0;
  border-radius:6px;
  padding:6px 8px;
  background:#f8f9ff;
}
.metric-container.warn{        /* >96 % */
  border-color:#fca5a5;
  background:#fef2f2;
}

.c-label{
  font-weight:600;
  background:#e0e7ff;
  color:#1e40af;
  border-radius:4px;
  padding:3px 0;
  text-align:center;
}

.c-vol,.c-util,.c-gap{
  font-weight:600;
  text-align:right;
  color:#0f172a;
}
.c-util{color:#0369a1;}         /* blue accent */
.c-gap{color:#475569;}         /* slate */
.metric-container.warn .c-util,
.metric-container.warn .c-gap{
  color:#b91c1c;               /* red when warning */
}

.unit{
  font-size:.8em;
  font-weight:500;
  margin-left:2px;
  color:#64748b;
}

#step8-pallet-summary {
  background: #eaf3fc;
  color: #195cab;
  border: 1.5px solid #b4d7fa;
  border-radius: 7px;
  padding: 12px 18px;
  margin: 14px 0 20px 0;
  font-size: 1.08em;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 24px;
  box-shadow: 0 2px 8px rgba(30,80,180,0.05);
}

#step8-pallet-summary b {
  color: #0d3f73;
  font-weight: 700;
  margin-right: 4px;
}

#step8-pallet-summary span {
  white-space: nowrap;
  margin-right: 8px;
}

/* ——— Cargo 3-D tabbed view ——— */
.cargo3d-tabs                 { width:100%; margin-top:20px; }
.cargo3d-tab-headers          { display:flex; gap:8px; margin-bottom:8px; }
.cargo3d-tab-btn              { padding:6px 14px; border:1px solid #1976d2;
                                 background:#e9f2ff; color:#1976d2;
                                 border-radius:4px; cursor:pointer; }
.cargo3d-tab-btn.active       { background:#1976d2; color:#fff; }
.cargo3d-tab-content          { border:1px solid #ddd; border-radius:6px; padding:12px; }
.cargo3d-tab-panel            { display:none; flex-direction:column; align-items:center; }
.cargo3d-tab-panel.active     { display:flex; }
.cargo3d-render               { width:100%; min-height:340px; }
.cargo3d-summary .summary-row { display:grid; grid-template-columns:repeat(auto-fill,minmax(120px,1fr));
                                gap:14px; margin-top:16px; font-size:0.92rem; }
.cargo3d-summary .summary-row b{ font-weight:600; display:block; margin-bottom:2px; }


/*───────────────────────────────────────────────
  Step‑8 ▸ Static 3‑D length‑preview (inline box)
  Makes the canvas fluid so it never juts out of
  the white column.  No other files need editing.
────────────────────────────────────────────────*/
#length-preview3d{
  width:100%  !important;   /* follow parent column */
  max-width:100%;
  height:auto;              /* let child set height */
  box-sizing:border-box;
  overflow:hidden;
}

/* the WebGL wrapper we inject from JS */
#length-preview3d .cargo3d-render{
  width:100%  !important;   /* scales with container */
  height:340px !important;  /* same as modal thumbnail */
  padding:6px;              /* small inner gutter */
}

/*─ Step‑8 static preview ▸ tidy summary & auto width/height ─*/
#length-preview3d{
  width:100%  !important;
  height:auto !important;   /* grow with content */
  overflow:hidden;
}

#length-preview3d .cargo3d-render{
  width:100%  !important;
  height:340px !important;  /* thumbnail height */
  padding:6px;
}

#length-preview3d .summary-row{
  display:flex;
  flex-wrap:wrap;
  gap:32px;
  padding:12px 0 6px;
  font-size:14px;
}

#length-preview3d .summary-row > div{
  min-width:120px;
  white-space:nowrap;
}


/* v1.6.3 Real 3-D modal containment + clearer summary */
#cargo3d-modal{
  box-sizing:border-box !important;
  padding:18px !important;
  overflow:auto !important;
  align-items:flex-start !important;
  justify-content:center !important;
}
#cargo3d-modal > div{
  width:min(1380px,96vw) !important;
  max-width:96vw !important;
  min-width:0 !important;
  min-height:0 !important;
  max-height:94vh !important;
  overflow:auto !important;
  box-sizing:border-box !important;
  padding:28px 24px !important;
}
#cargo3d{
  width:100% !important;
  max-width:none !important;
  height:auto !important;
  min-height:0 !important;
  margin:0 auto !important;
  display:block !important;
  align-items:stretch !important;
  justify-content:flex-start !important;
  box-sizing:border-box !important;
}
#cargo3d .cargo3d-tabs{
  width:100% !important;
  max-width:100% !important;
  margin:0 !important;
  box-sizing:border-box !important;
}
#cargo3d .cargo3d-tab-headers{
  display:flex !important;
  flex-wrap:wrap !important;
  gap:10px !important;
  margin:0 0 12px !important;
  max-width:100% !important;
  box-sizing:border-box !important;
}
#cargo3d .cargo3d-tab-btn{
  font-size:16px !important;
  padding:10px 18px !important;
  border-radius:8px !important;
  white-space:nowrap !important;
}
#cargo3d .cargo3d-tab-content{
  width:100% !important;
  max-width:100% !important;
  box-sizing:border-box !important;
  overflow:hidden !important;
  padding:14px !important;
}
#cargo3d .cargo3d-tab-panel{
  width:100% !important;
  box-sizing:border-box !important;
}
#cargo3d .cargo3d-render{
  width:100% !important;
  height:min(58vh,560px) !important;
  min-height:420px !important;
  border-radius:14px !important;
  overflow:hidden !important;
  box-sizing:border-box !important;
}
#cargo3d .cargo3d-summary .summary-row{
  display:grid !important;
  grid-template-columns:repeat(auto-fit,minmax(160px,1fr)) !important;
  gap:12px !important;
  margin-top:14px !important;
  align-items:stretch !important;
}
#cargo3d .cargo3d-stat{
  background:#eef6ff !important;
  border:1px solid #bfdbfe !important;
  border-radius:10px !important;
  padding:10px 12px !important;
  color:#0f172a !important;
  box-sizing:border-box !important;
}
#cargo3d .cargo3d-stat b{
  display:block !important;
  color:#1d4ed8 !important;
  font-size:13px !important;
  margin:0 0 4px !important;
}
#cargo3d .cargo3d-stat span{
  display:block !important;
  color:#111827 !important;
  font-size:18px !important;
  font-weight:800 !important;
  line-height:1.2 !important;
}
#cargo3d .cargo3d-stat small{
  display:block !important;
  color:#475569 !important;
  margin-top:4px !important;
  line-height:1.25 !important;
}
#cargo3d .cargo3d-stat.wide{
  grid-column:span 2;
}
@media(max-width:720px){
  #cargo3d-modal{ padding:8px !important; }
  #cargo3d-modal > div{ width:98vw !important; max-width:98vw !important; padding:18px 12px !important; }
  #cargo3d .cargo3d-render{ min-height:340px !important; height:48vh !important; }
  #cargo3d .cargo3d-tab-btn{ font-size:14px !important; padding:8px 10px !important; }
  #cargo3d .cargo3d-stat.wide{ grid-column:span 1; }
}
#cargo3d .cargo3d-render{ position:relative !important; }
#cargo3d .cargo3d-clearance-badge{
  position:absolute !important;
  top:14px !important;
  right:14px !important;
  z-index:5 !important;
  background:rgba(255,255,255,0.92) !important;
  border:1px solid #93c5fd !important;
  box-shadow:0 8px 24px rgba(15,23,42,0.12) !important;
  border-radius:12px !important;
  padding:10px 12px !important;
  min-width:130px !important;
  color:#0f172a !important;
  pointer-events:none !important;
}
#cargo3d .cargo3d-clearance-badge b{
  display:block !important;
  color:#1d4ed8 !important;
  font-size:12px !important;
  line-height:1 !important;
  margin-bottom:4px !important;
}
#cargo3d .cargo3d-clearance-badge span{
  display:block !important;
  font-size:22px !important;
  font-weight:900 !important;
  line-height:1.05 !important;
}
#cargo3d .cargo3d-clearance-badge small{
  display:block !important;
  color:#475569 !important;
  font-size:11px !important;
  margin-top:3px !important;
}