/* Only custom parts; cg-ui provides main layout */

#cg-cubic-yard-calculator .cg-shape-row{ align-items: stretch; }

#cg-cubic-yard-calculator .cg-shape-preview{
  display:flex; gap:12px; align-items:center;
  padding:12px; border-radius:16px;
  border:1px solid rgba(15,23,42,0.10);
  background:#fff; height:100%;
}

#cg-cubic-yard-calculator .cg-shape-preview__svg{
  width:56px; height:56px;
  display:flex; align-items:center; justify-content:center;
  color:#0f172a; opacity:.92;
}
#cg-cubic-yard-calculator .cg-shape-preview__svg svg{ width:56px; height:56px; }

#cg-cubic-yard-calculator .cg-shape-preview__label{
  font-size:12px; font-weight:700; opacity:.7; margin-bottom:6px;
}

#cg-cubic-yard-calculator .cg-subunit-row{ margin-top:10px; display:none; }
#cg-cubic-yard-calculator .cg-input-unit--sub .cg-select--unit{ display:none; }

#cg-cubic-yard-calculator .cg-subunit-pill{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:44px; height:44px; padding:0 10px;
  border-radius:12px; border:1px solid rgba(15,23,42,0.12);
  font-weight:700; opacity:.8; background:#fff;
}
/* ✅ Wider Shape dropdown (responsive, no overflow) */
#cg-cubic-yard-calculator #cy-shape{
  width: 100%;
  max-width: 300px;            /* increase as needed */
}

/* On smaller screens keep it full width */
@media (max-width: 720px){
  #cg-cubic-yard-calculator #cy-shape{
    max-width: 100%;
  }
}

/* -----------------------------
   Price per unit row (triple)
   ----------------------------- */

#cg-cubic-yard-calculator .cg-input-unit--triple{
  display:flex;
  align-items:stretch;
  gap:10px;
  flex-wrap: wrap;              /* ✅ prevent overflow */
  max-width: 100%;
}

#cg-cubic-yard-calculator .cg-input-unit--triple .cg-input--unit{
  flex: 1 1 180px;
  min-width: 0;
}

/* ✅ Reasonable widths that never overflow container */
#cg-cubic-yard-calculator .cg-price-currency{
  width: clamp(160px, 32vw, 260px);
  min-width: 78px;
  flex: 0 1 auto;
}

#cg-cubic-yard-calculator .cg-price-unit{
  width: clamp(170px, 34vw, 280px);
  min-width: 78px;
  flex: 0 1 auto;
}

#cg-cubic-yard-calculator .cg-price-slash{
  display:flex;
  align-items:center;
  justify-content:center;
  min-width: 18px;
  font-weight: 800;
  opacity: .65;
}

/* If space is tight, slash can drop to next line without breaking layout */
@media (max-width: 520px){
  #cg-cubic-yard-calculator .cg-price-slash{ display:none; }
  #cg-cubic-yard-calculator .cg-price-currency,
  #cg-cubic-yard-calculator .cg-price-unit{
    width: 100%;
    min-width: 0;
  }
}

/* -----------------------------
   Total price alignment
   ----------------------------- */

#cg-cubic-yard-calculator .cg-total-row{
  display:flex;
  align-items:stretch;          /* ✅ same height */
  gap:10px;
  max-width:100%;
}

#cg-cubic-yard-calculator .cg-total-box{
  flex: 1 1 auto;
  min-width: 0;
  display:flex;
  align-items:center;           /* ✅ align text center vertically */
}
/* ✅ Make all primary result values prominent (Volume + Total price etc.) */
#cg-cubic-yard-calculator .cg-result-value{
  font-size: 32px;
  font-weight: 900;
  letter-spacing: 0.2px;
  line-height: 1.15;
}

/* Keep helper lines smaller but still readable */
#cg-cubic-yard-calculator .cg-help-text,
#cg-cubic-yard-calculator [data-cy-out="volume-sub"]{
  font-size: 13px;
  font-weight: 600;
  opacity: 0.75;
  line-height: 1.4;
  word-break: break-word;
}

/* Optional: make the result box feel more “headline” */
#cg-cubic-yard-calculator .cg-result-box{
  padding-top: 16px;
  padding-bottom: 16px;
}
/* ✅ Green color for primary results (Volume + Total price) */
#cg-cubic-yard-calculator .cg-result-value{
  color: #16a34a; /* green */
}

/* Keep helper text neutral */
#cg-cubic-yard-calculator .cg-help-text,
#cg-cubic-yard-calculator [data-cy-out="volume-sub"]{
  color: inherit;
}

/* ✅ Make dropdown same height and aligned */
#cg-cubic-yard-calculator .cg-total-currency{
  width: clamp(160px, 32vw, 260px);
  min-width: 160px;
  flex: 0 1 auto;
  height: 48px;                 /* ✅ match cg input height */
  align-self: stretch;          /* ✅ no vertical drop */
}

/* In case cg-ui sets different select height in theme */
#cg-cubic-yard-calculator .cg-total-row .cg-select{
  margin-top: 0 !important;
}

@media (max-width: 720px){
  #cg-cubic-yard-calculator .cg-total-row{ flex-wrap: wrap; }
  #cg-cubic-yard-calculator .cg-total-currency{
    width: 100%;
    min-width: 0;
  }
}
/* ✅ Mobile: keep Price per unit (value + USD + unit) side-by-side */
@media (max-width: 520px){
  #cg-cubic-yard-calculator .cg-input-unit--triple{
    flex-wrap: nowrap !important;     /* no wrap */
    gap: 8px;
  }

  /* value input takes the remaining space */
  #cg-cubic-yard-calculator .cg-input-unit--triple .cg-input--unit{
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }

  /* currency + unit stay compact and aligned */
  #cg-cubic-yard-calculator .cg-price-currency{
    width: 70px !important;          /* enough for "USD" */
    min-width: 92px !important;
    flex: 0 0 auto !important;
  }

  #cg-cubic-yard-calculator .cg-price-unit{
    width: 70px !important;         /* enough for "cubic meter (m³)" */
    min-width: 140px !important;
    flex: 0 0 auto !important;
  }

  /* slash hidden on mobile (cleaner + saves space) */
  #cg-cubic-yard-calculator .cg-price-slash{
    display: none !important;
  }
}
/* =========================
   FIX: Price row widths + abbrev overlay visibility
   ========================= */

/* Smaller, reasonable widths (desktop/tablet) */
#cg-cubic-yard-calculator .cg-price-currency{
  width: clamp(110px, 22vw, 170px) !important;
  min-width: 110px !important;
}

#cg-cubic-yard-calculator .cg-price-unit{
  width: clamp(140px, 28vw, 210px) !important;
  min-width: 140px !important;
}

#cg-cubic-yard-calculator .cg-price-slash{
  min-width: 14px !important;
  font-weight: 900;
  opacity: 0.65;
}

/* Keep them side-by-side and prevent overflow */
#cg-cubic-yard-calculator .cg-input-unit--triple{
  flex-wrap: nowrap !important;
  align-items: stretch !important;
  max-width: 100% !important;
}

/* Make input take remaining space */
#cg-cubic-yard-calculator .cg-input-unit--triple .cg-input--unit{
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

/* ✅ CRITICAL: Hide native selected text so overlay abbreviation shows (Safari/iOS fix) */
#cg-cubic-yard-calculator select.cg-abbrev-active{
  color: transparent !important;
  -webkit-text-fill-color: transparent !important; /* iOS Safari */
  text-shadow: none !important;
}

/* Ensure overlay text is visible */
#cg-cubic-yard-calculator .cg-abbrev-wrap{ position: relative; }
#cg-cubic-yard-calculator .cg-abbrev-overlay{
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  font-weight: 800;
  color: #0f172a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: calc(100% - 56px);
}

/* Mobile tighter widths */
@media (max-width: 520px){
  #cg-cubic-yard-calculator .cg-price-currency{
    width: 78px !important;
    min-width: 78px !important;
  }
  #cg-cubic-yard-calculator .cg-price-unit{
    width: 78px !important;
    min-width: 78px !important;
  }
  #cg-cubic-yard-calculator .cg-price-slash{
    display: none !important;
  }
}
/* ✅ Undo broken abbrev overlay approach (prevents placeholder corruption) */
#cg-cubic-yard-calculator .cg-abbrev-overlay{ display:none !important; }
#cg-cubic-yard-calculator .cg-abbrev-wrap{ position: static !important; }

/* Make sure selects are readable again */
#cg-cubic-yard-calculator select.cg-abbrev-active{
  color: inherit !important;
  -webkit-text-fill-color: inherit !important;
}