/* ==========================================================================
   Live 20' GP load view — Shipping & Order Enquiry (assets/js/container3d.js)
   Loaded only by calculator.html.
   ========================================================================== */
.cz{margin:-.2rem 0 2rem;padding-bottom:1.9rem;border-bottom:1px solid rgba(255,255,255,.14)}
.cz__head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:.3rem 1rem}
.cz__kicker{font-size:.66rem;letter-spacing:.28em;text-transform:uppercase;color:var(--gold);font-weight:500}
.calc-result .cz__title{font-family:var(--font-display);font-size:1.3rem;font-weight:500;letter-spacing:.02em;text-transform:none;margin:0;color:var(--white)}
.cz__tabs{display:flex;gap:.4rem;margin-top:1rem;overflow-x:auto;scrollbar-width:none}
.cz__tabs[hidden]{display:none}
.cz__tabs button{flex:none;padding:.42rem .75rem;border:1px solid rgba(255,255,255,.2);font:400 .7rem/1.2 var(--font-sans);
  letter-spacing:.04em;color:rgba(255,255,255,.75);cursor:pointer;transition:border-color .25s,color .25s}
.cz__tabs button[aria-selected="true"]{border-color:var(--gold);color:var(--gold)}

/* the drawing */
.cz__stage{position:relative;margin:.9rem -.5rem 0;
  background:radial-gradient(ellipse 70% 55% at 50% 62%,rgba(179,148,95,.18),transparent 72%)}
.cz__svg{display:block;width:100%;height:auto;overflow:visible}
.cz__empty{display:none;position:absolute;inset-inline:12%;top:44%;text-align:center;font-size:.82rem;line-height:1.5;color:rgba(255,255,255,.78)}
.cz.is-empty .cz__empty{display:block}
.cz-u{transition:opacity .25s}
.cz-u.is-new{animation:czDrop .62s cubic-bezier(.2,.85,.3,1.12) both;animation-delay:var(--d)}
@keyframes czDrop{0%{opacity:0;transform:translateY(-80px)}55%{opacity:1}100%{opacity:1;transform:none}}
.cz.is-focus .cz-u:not(.is-hi){opacity:.2}

/* tonnes readout */
.cz__meter{margin-top:.5rem}
.calc-result .cz__num{display:flex;align-items:baseline;gap:.25rem;margin:0;font-family:var(--font-display);color:var(--white)}
.cz__num strong{font-size:2.5rem;font-weight:500;line-height:1;font-variant-numeric:lining-nums}
.cz__unit{font-size:1.1rem}
.cz__of{margin-inline-start:.5rem;font-family:var(--font-sans);font-size:.78rem;letter-spacing:.08em;color:rgba(255,255,255,.62)}
.cz__bar{height:6px;margin-top:.65rem;background:rgba(255,255,255,.12);overflow:hidden}
.cz__bar span{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--gold-deep),var(--gold));transition:width .9s var(--ease-lux)}
.calc-result .cz__status{margin:.5rem 0 0;font-size:.78rem;color:rgba(255,255,255,.78)}
.cz.is-full .cz__status::before{content:"✓ ";color:var(--gold)}
.cz__fill{display:block;width:100%;margin-top:.95rem;padding:.75rem 1rem;border:1px dashed rgba(179,148,95,.75);background:transparent;
  font:500 .74rem/1.2 var(--font-sans);letter-spacing:.18em;text-transform:uppercase;color:var(--gold);cursor:pointer;transition:background .25s}
.cz__fill:hover{background:rgba(179,148,95,.12)}
.cz__fill[hidden]{display:none}

/* what is in this container */
.cz__legend{list-style:none;margin:1.1rem 0 0;padding:0;display:grid;gap:.6rem}
.cz__legend li{display:grid;grid-template-columns:30px minmax(0,1fr);column-gap:.75rem;align-items:center}
.cz__sw{grid-row:1/3;width:30px;height:30px;border-radius:50%;background:#555 center/cover;border:1px solid rgba(255,255,255,.3)}
.cz__nm{font-family:var(--font-display);font-size:1.02rem;line-height:1.2;color:var(--white)}
.cz__mt{font-size:.7rem;letter-spacing:.04em;color:rgba(255,255,255,.62)}
.calc-result .cz__key{display:flex;align-items:center;gap:.5rem;margin:1.1rem 0 0;font-size:.72rem;color:rgba(255,255,255,.68)}
.cz__key-i{flex:none;width:24px;height:18px;background:center/contain no-repeat}
.cz__key-i--crate{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 18'%3E%3Crect x='1' y='2' width='22' height='15' fill='%232a2a2a'/%3E%3Cpath d='M1 2h22v3H1zM1 8.5h22v3H1zM1 14h22v3H1z' fill='%23c99f66'/%3E%3Cpath d='M1 2h3v15H1zM20 2h3v15h-3z' fill='%23b98e57'/%3E%3Cpath d='M4 16L20 3' stroke='%23d4ab72' stroke-width='2.4'/%3E%3C/svg%3E")}
.cz__key-i--bag{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 18'%3E%3Cpath d='M5 5q1-4 3 0M16 5q1-4 3 0' fill='none' stroke='%23b8b2a6' stroke-width='1.6'/%3E%3Crect x='3' y='5' width='18' height='12' rx='1.5' fill='%23e3dfd6'/%3E%3Cpath d='M12 6v10' stroke='%23c5c0b4'/%3E%3C/svg%3E")}
.calc-result .cz__note{margin:.5rem 0 0;font-size:.68rem;line-height:1.6;color:rgba(255,255,255,.48)}
.has-cz #fill-gauge{display:none!important}

/* hint under the tonnes field, and the flash when "Fill the rest" sets it */
.cz-hint{margin-top:.45rem;font-size:.72rem;line-height:1.5;color:var(--gold-deep)}
.cz-flash{animation:czFlash 1.3s ease}
@keyframes czFlash{20%{box-shadow:0 0 0 4px rgba(179,148,95,.5)}100%{box-shadow:0 0 0 0 rgba(179,148,95,0)}}

/* phones and tablets: a container badge in the top-right corner */
.cz-chip{position:fixed;top:82px;right:12px;z-index:60;display:none;align-items:center;gap:.6rem;padding:.55rem .8rem .55rem .65rem;
  background:#101010;color:var(--white);border:1px solid rgba(179,148,95,.65);box-shadow:0 10px 28px rgba(0,0,0,.28);
  font:500 .78rem/1 var(--font-sans);letter-spacing:.05em;cursor:pointer}
html[dir="rtl"] .cz-chip{right:auto;left:12px}
@media (max-width:900px){.cz-chip:not([hidden]){display:inline-flex}}
.cz-chip__box{position:relative;width:36px;height:16px;border:1.5px solid #b44a37;background:#3b1a14;overflow:hidden}
.cz-chip__box::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0 4px,rgba(0,0,0,.25) 4px 5px)}
.cz-chip__fill{position:absolute;inset-block:0;inset-inline-start:0;width:0;background:var(--gold);transition:width .7s var(--ease-lux)}
.cz-chip__t{direction:ltr;unicode-bidi:isolate}
.cz-chip__pop{position:absolute;inset-inline-end:.6rem;top:-1.5rem;font-size:.8rem;color:var(--gold);opacity:0;pointer-events:none}
.cz-chip.is-pop .cz-chip__pop{animation:czPop 1.4s ease both}
.cz-chip.is-pop{animation:czNudge .6s ease}
@keyframes czPop{0%{opacity:0;transform:translateY(8px)}20%{opacity:1}75%{opacity:1;transform:translateY(-4px)}100%{opacity:0;transform:translateY(-10px)}}
@keyframes czNudge{30%{transform:scale(1.06)}100%{transform:none}}

@media (prefers-reduced-motion:reduce){
  .cz-u.is-new,.cz-chip.is-pop,.cz-chip.is-pop .cz-chip__pop,.cz-flash{animation:none}
  .cz__bar span,.cz-chip__fill{transition:none}
}
.cz-lbl{font:500 9px var(--font-sans);letter-spacing:.2em;text-transform:uppercase;fill:rgba(255,255,255,.55)}
.cz{scroll-margin-top:96px}