/* CSPLUS.ID v10.6.1 — standalone estimator layout + mobile overflow hotfix.
 * Base reusable widget visuals remain sourced from v10.6.0 to avoid rule drift.
 */
@import url('/public/assets/css/buyback-estimator-widget-v1060.css?v=10.6.0');

/* Desktop hero returns to a balanced copy + mascot layout. The estimator is no longer a hero-column child. */
.cs-buyback-hero-v1060 .cs-buyback-hero-grid-v1060{
  grid-template-columns:minmax(0,.92fr) minmax(320px,1.08fr);
  align-items:center;
  gap:clamp(40px,5vw,72px);
}
.cs-buyback-hero-v1060 .cs-home-visual-v9924{
  position:relative;
  top:auto;
  align-self:center;
}

/* Dedicated full-width estimator section below the hero. */
.cs-buyback-estimator-section-v1061{
  width:100%;
  max-width:100%;
  min-width:0;
  padding:clamp(28px,4vw,52px) 16px clamp(44px,6vw,76px);
  background:linear-gradient(180deg,#f8fafc 0%,#ffffff 100%);
  box-sizing:border-box;
}
.cs-buyback-estimator-shell-v1061{
  width:min(900px,100%);
  max-width:900px;
  min-width:0;
  margin-inline:auto;
  box-sizing:border-box;
}
.cs-buyback-estimator-shell-v1061 .cs-estimator-card{
  box-shadow:0 26px 72px rgba(15,23,42,.12);
}

/* Defensive sizing chain: no child is allowed to enlarge the widget's intrinsic width. */
.cs-estimator-embed,
.cs-estimator-embed .cs-estimator-card,
.cs-estimator-embed #steps,
.cs-estimator-embed #steps > section,
.cs-estimator-embed .cs-device-search,
.cs-estimator-embed .cs-search-wrap,
.cs-estimator-embed .cs-selected-device,
.cs-estimator-embed .cs-result,
.cs-estimator-embed .cs-result-summary-wrap,
.cs-estimator-embed .cs-fulfillment-wrap{
  width:100%;
  max-width:100%;
  min-width:0;
  box-sizing:border-box;
}
.cs-estimator-embed .cs-step-head,
.cs-estimator-embed .cs-step-head > div,
.cs-estimator-embed .cs-card-head,
.cs-estimator-embed .cs-estimator-card-head > div,
.cs-estimator-embed .cs-suggestion,
.cs-estimator-embed .cs-suggestion-main{
  max-width:100%;
  min-width:0;
  box-sizing:border-box;
}
.cs-estimator-embed .cs-search-input{
  display:block;
  width:100%;
  max-width:100%;
  min-width:0;
  box-sizing:border-box;
}
.cs-estimator-embed .cs-autocomplete{
  left:0;
  right:0;
  width:auto;
  max-width:100%;
  min-width:0;
  box-sizing:border-box;
}
.cs-estimator-embed .cs-suggestion-model,
.cs-estimator-embed .cs-suggestion-brand,
.cs-estimator-embed .cs-step-copy,
.cs-estimator-embed .cs-estimator-subheading{
  max-width:100%;
  overflow-wrap:anywhere;
}

/* Restore the canonical one-column hero at laptop/tablet widths instead of squeezing two columns to 860px. */
@media(max-width:1200px){
  .cs-buyback-hero-v1060 .cs-buyback-hero-grid-v1060{
    grid-template-columns:1fr!important;
    gap:30px;
  }
  .cs-buyback-hero-v1060 .cs-home-visual-v9924{
    position:static;
    max-height:340px;
    overflow:hidden;
  }
}

@media(max-width:768px){
  .cs-buyback-estimator-section-v1061{
    padding:18px 12px 38px;
  }
  .cs-buyback-estimator-shell-v1061{
    width:100%;
    max-width:100%;
    min-width:0;
  }
  .cs-estimator-embed .cs-estimator-card{
    width:100%;
    max-width:100%;
    min-width:0;
    padding:16px;
  }
  .cs-estimator-embed .cs-options{
    min-width:0;
  }
  .cs-estimator-embed .cs-suggestion-storage{
    white-space:normal;
    overflow-wrap:anywhere;
  }

  /* /jual-hp already exposes the estimator itself; its fixed CTA only obscures the active wizard. */
  body.cs-v9958-buyback .cs-cro-sticky{
    display:none!important;
  }
}

@media(max-width:640px){
  .cs-buyback-hero-v1060.buyback-hero{
    padding-left:0;
    padding-right:0;
  }
  .cs-buyback-estimator-section-v1061{
    padding-left:12px;
    padding-right:12px;
  }
}

@media(max-width:460px){
  /* v10.6.0 forced three 138px benefit items into one row, creating intrinsic horizontal overflow. */
  .cs-buyback-hero-v1060 .cs-home-benefits-v9924{
    width:100%;
    max-width:100%;
    grid-template-columns:1fr;
    gap:8px;
  }
  .cs-buyback-hero-v1060 .cs-home-benefit-v9924{
    width:100%;
    max-width:100%;
    min-width:0;
  }
  .cs-estimator-embed .cs-estimator-card{
    padding:15px;
    border-radius:18px;
  }
  .cs-estimator-embed .cs-search-input{
    min-height:56px;
    padding-left:44px;
    padding-right:42px;
    font-size:16px;
  }
}