/* =====================================================================
   REUSELY / TRADE-IN (Odoo 17) — CSS PRO (Premium)
   - SPA /tradein
   - Stepper premium
   - Cards 3 por fila, más “largas”, estilo producto
   - Specs buttons consistentes
   - Didit embed sin scroll
   ===================================================================== */

/* ========================= Legacy widget grids (compat) ========================= */
.reusely-widget { margin: 2rem auto; }
.reusely-devices-grid, .reusely-models-grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 16px;
  margin-top: 1.5rem;
}
.reusely-device-card, .reusely-model-card{
  border: 1px solid #e5e5e5;
  border-radius: 10px;
  padding: 12px;
  cursor: pointer;
  text-align: center;
  background: #fff;
}
.reusely-device-card img, .reusely-model-card img{
  max-width: 100%;
  height: 90px;
  object-fit: contain;
}

/*  Hide chrome SOLO en Odoo, NO en Shopify embed */
body:has(#tradein_spa_root):not(:has(.ti-shopify-embed)) header,
body:has(#tradein_spa_root):not(:has(.ti-shopify-embed)) footer{
  display:none !important;
}

body:has(#tradein_spa_root):not(:has(.ti-shopify-embed)) #wrap{
  padding:0 !important;
}

/* ========================= Shell / header ========================= */
#tradein_spa_root.tradein-shell{
  max-width: 1180px;
  margin: 0 auto;
  padding: 22px 18px 70px 18px;
}

.tradein-header{
  text-align:center;
  margin-bottom: 12px;
}
.tradein-header h1{
  font-size: 34px;
  font-weight: 850;
  letter-spacing: -0.03em;
  margin: 0;
  color: rgba(0,0,0,.92);
}
.tradein-header .tradein-subtitle{
  font-size: 13.5px;
  color: rgba(0,0,0,.56);
  margin-top: 6px;
}

/* ========================= STEPper (premium) ========================= */
body:has(#tradein_spa_root) .tradein-stepper{
  display:flex;
  align-items:flex-start;
  justify-content:center;
  gap: 34px;
  margin: 16px 0 16px;
  padding: 0;
  border: 0;
  background: transparent;
  position: relative;
  flex-wrap: wrap;
  overflow: visible;
  margin-bottom: 10px;
}

body:has(#tradein_spa_root) .tradein-stepper:before{
  content:"";
  position:absolute;
  left: 6%;
  right: 6%;
  top: 14px;
  height:2px;
  background: rgba(99,102,241,.22);
  z-index:0;
  border-radius: 999px;
}

body:has(#tradein_spa_root) .tradein-stepper .ti-step{
  position: relative;
  z-index: 1;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap: 8px;
  user-select:none;
  cursor:pointer;
}

body:has(#tradein_spa_root) .tradein-stepper .ti-step.is-disabled{
  cursor: default;
  opacity: .52;
  filter: grayscale(.25);
}

body:has(#tradein_spa_root) .tradein-stepper .ti-step .dot{
  width:26px;
  height:26px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:800;
  font-size:12px;
  background:#fff;
  border:2px solid #1b86ee;
  color: rgba(0,0,0,.85);
  box-shadow: 0 6px 18px rgba(0,0,0,.06);
}

body:has(#tradein_spa_root) .tradein-stepper .ti-step.is-active .dot{
  background: #1b86ee;
  border-color: #1b86ee;
  color:#fff;
  box-shadow: 0 10px 24px rgba(99,102,241,.25);
}

body:has(#tradein_spa_root) .tradein-stepper .ti-step.is-done .dot{
  background: rgba(16,185,129,1);
  border-color: rgba(16,185,129,1);
  color:#fff;
  box-shadow: 0 10px 24px rgba(16,185,129,.18);
}

body:has(#tradein_spa_root) .tradein-stepper .ti-step .label{
  font-size:11.2px;
  line-height:1.15;
  color: rgba(0,0,0,.72);
  font-weight:600;
  max-width:170px;
}

body:has(#tradein_spa_root) .tradein-stepper .ti-step.is-active .label{
  color: rgba(0,0,0,.92);
}

@media (max-width: 640px){
  body:has(#tradein_spa_root) .tradein-stepper{
    justify-content:flex-start;
    overflow-x:auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type:x mandatory;
    gap: 14px;
  }
  body:has(#tradein_spa_root) .tradein-stepper .ti-step{
    flex: 0 0 auto;
    width: 150px;
    scroll-snap-align:start;
  }
  body:has(#tradein_spa_root) .tradein-stepper:before{
    left: 14px;
    right: 14px;
  }
}

/* ========================= Searchbar (pill pro) ========================= */
body:has(#tradein_spa_root) .tradein-searchbar{
  max-width: 720px;
  margin: 12px auto 20px auto;
  position: relative;
}

body:has(#tradein_spa_root) .tradein-searchbar input{
  width: 100%;
  border-radius: 999px;
  background: rgba(0,0,0,.035);
  border: 1px solid rgba(0,0,0,.07);
  box-shadow: 0 10px 30px rgba(0,0,0,.05);
  padding: 14px 18px 14px 48px;
  font-size: 14px;
}

body:has(#tradein_spa_root) .tradein-searchbar input:focus{
  outline: none;
  box-shadow: 0 14px 36px rgba(99,102,241,.14);
  border-color: rgba(99,102,241,.32);
}

body:has(#tradein_spa_root) .tradein-searchbar .icon{
  position:absolute;
  left:18px;
  top:50%;
  transform: translateY(-50%);
  opacity:.55;
  font-size:14px;
  z-index:3;
}

body:has(#tradein_spa_root) #tradein_spa_models_search{ display:none !important; }

/* ========================= Section title spacing ========================= */
body:has(#tradein_spa_root) #tradein_spa_step_models h4{
  font-weight: 850;
  letter-spacing: -0.02em;
}

/* ========================= MODELS GRID - cards premium ========================= */
body:has(#tradein_spa_root) #tradein_spa_models_grid{
  margin-top: 6px;
}

body:has(#tradein_spa_root) #tradein_spa_models_grid .col-12{
  /* deja bootstrap intacto; solo micro-ajustes si hiciera falta */
}

/* Target real: button.tradein-spa-model (tu JS) */
body:has(#tradein_spa_root) #tradein_spa_models_grid .tradein-spa-model{
  width:100%;
  padding: 22px 22px !important;
  min-height: 124px;
  border-radius: 16px !important;
  border: 1px solid rgba(0,0,0,.18) !important;
  background: linear-gradient(180deg, rgba(0,0,0,.02), rgba(0,0,0,.01)) !important;
  text-align: left !important;

  display:flex;
  align-items:center;
  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease, background .14s ease;
  position: relative;
  overflow: hidden;
}

body:has(#tradein_spa_root) #tradein_spa_models_grid .tradein-spa-model:before{
  content:"";
  position:absolute;
  inset:0;
  background: radial-gradient(1200px 220px at 30% -20%, rgba(99,102,241,.10), transparent 60%),
              radial-gradient(900px 200px at 90% 120%, rgba(16,185,129,.08), transparent 55%);
  opacity: .85;
  pointer-events:none;
}

body:has(#tradein_spa_root) #tradein_spa_models_grid .tradein-spa-model:hover{
  transform: translateY(-2px);
  border-color: rgba(0,0,0,.30) !important;
  box-shadow: 0 14px 38px rgba(0,0,0,.10) !important;
  background: linear-gradient(180deg, rgba(0,0,0,.018), rgba(0,0,0,.008)) !important;
}

body:has(#tradein_spa_root) #tradein_spa_models_grid .tradein-spa-model:active{
  transform: translateY(-1px) scale(.995);
  box-shadow: 0 10px 30px rgba(0,0,0,.08) !important;
}

body:has(#tradein_spa_root) #tradein_spa_models_grid .tradein-spa-model .d-flex{
  gap: 18px !important;
  align-items:center !important;
  width:100%;
  position: relative;
  z-index: 2;
}

body:has(#tradein_spa_root) #tradein_spa_models_grid .tradein-spa-model img{
  width: 74px !important;
  height: 74px !important;
  object-fit: contain !important;
  flex-shrink:0;
  border-radius: 14px;
  background: rgba(255,255,255,.65);
  border: 1px solid rgba(0,0,0,.06);
  padding: 8px;
  box-shadow: 0 10px 24px rgba(0,0,0,.08);
}

body:has(#tradein_spa_root) #tradein_spa_models_grid .tradein-spa-model .fw-semibold{
  font-size: 16px !important;
  line-height: 1.18;
  letter-spacing: -0.01em;
  color: rgba(0,0,0,.92);
  margin-bottom: 2px;
}

body:has(#tradein_spa_root) #tradein_spa_models_grid .tradein-spa-model small{
  font-size: 13px !important;
  color: rgba(0,0,0,.62);
}

body:has(#tradein_spa_root) #tradein_spa_models_grid .tradein-spa-model .flex-grow-1{
  padding-right: 34px;
}
body:has(#tradein_spa_root) #tradein_spa_models_grid .tradein-spa-model:after{
  content:"›";
  position:absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  width: 26px;
  height: 26px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius: 999px;
  background: rgba(0,0,0,.05);
  border: 1px solid rgba(0,0,0,.06);
  color: rgba(0,0,0,.55);
  font-size: 18px;
  font-weight: 900;
  z-index: 3;
}

/* ========================= Ver más (premium green pill) ========================= */
body:has(#tradein_spa_root) #tradein_spa_models_more{
  display:inline-flex !important;
  width:auto !important;
  margin: 14px auto 0 auto !important;
  border-radius: 999px !important;
  padding: 10px 20px !important;
  border: 1px solid rgba(238, 174, 51, 0.35) !important;
  background: rgba(227, 142, 52, 0.18) !important;
  color: rgba(0,0,0,.86) !important;
  font-weight: 850 !important;
  letter-spacing: -0.01em;
}
body:has(#tradein_spa_root) #tradein_spa_models_more:hover{
  filter: brightness(.98);
  box-shadow: 0 12px 26px rgba(34,197,94,.18);
}

body:has(#tradein_spa_root) #tradein_spa_models_prev,
body:has(#tradein_spa_root) #tradein_spa_models_next{
  border-radius: 999px !important;
  padding: 8px 14px !important;
}

/* ========================= Trade-in accordions ========================= */
.tradein-accordion{
  border-bottom: 1px solid rgba(0,0,0,.08);
  padding: 12px 0;
}
.tradein-accordion-summary{
  list-style:none;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.tradein-accordion-summary::-webkit-details-marker{ display:none; }
.tradein-accordion-left{ display:flex; align-items:baseline; gap:10px; }
.tradein-accordion-title{ font-weight: 850; letter-spacing:-0.01em; }
.tradein-accordion-value{ font-size:13px; color:#111827; }
.tradein-accordion-caret{
  color:#6b7280;
  font-size:16px;
  transform: rotate(0deg);
  transition: transform .15s ease;
}
details[open] .tradein-accordion-caret{ transform: rotate(180deg); }
.tradein-accordion-body{
  padding:12px 0 6px 0;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

/* ========================= Specs/condición: botones success pro ========================= */
.o_tradein_specs .btn.btn-outline-success{
  border-radius: 12px !important;
  padding: 10px 16px !important;
  min-height: 44px !important;
  font-weight: 800 !important;
  border-width: 1px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;

  background:#fff !important;
  color:#198754 !important;
  border-color: rgba(25,135,84,.45) !important;
  box-shadow: 0 10px 22px rgba(0,0,0,.05);
}
.o_tradein_specs .btn.btn-outline-success:hover{
  background: rgba(25,135,84,.06) !important;
  border-color: rgba(25,135,84,.70) !important;
}
.o_tradein_specs .btn.btn-outline-success.active,
.o_tradein_specs .btn.btn-outline-success[aria-pressed="true"]{
  background:#198754 !important;
  border-color:#198754 !important;
  color:#fff !important;
  box-shadow: 0 14px 28px rgba(25,135,84,.18);
}

#tradein_carrier_opts,
#tradein_capacity_opts,
#tradein_condition_opts{
  gap: 10px !important;
}

#tradein_selected_condition_label{
  font-weight: 850;
  color: #111827;
}

/* ========================= Terms + checklist ========================= */
#tradein_terms_box{
  border-top: 1px solid rgba(0,0,0,.08);
  padding-top: 14px;
}
#tradein_terms_title{
  font-weight: 850;
  color: #374151;
}
#tradein_terms_list li{ margin-bottom: 10px; }

.tradein-check{
  width: 18px;
  height: 18px;
  border-radius: 10px;
  border: 1.5px solid #9ca3af;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  margin-top:2px;
  position:relative;
  background:#ff9900;
}
.tradein-check::after{
  content: "✓";
  font-size: 12px;
  font-weight: 900;
  color: #ff9900;
}
.tradein-check.is-ok{ border-color:#ff9900; }
.tradein-check.is-ok::after{ color:#fff; }

/* =========================
   Trade-in terms — FINAL mobile fix
   ========================= */
   @media (max-width: 749px){

    /* neutraliza .small SOLO dentro del bloque */
    #tradein_terms_box,
    #tradein_terms_box .small,
    #tradein_terms_title{
      font-size: 16px !important;
      line-height: 1.55;
    }
  
    /* title más fuerte */
    #tradein_terms_title{
      font-size: 18px !important;
      font-weight: 800;
      line-height: 1.3;
      margin-bottom: 12px;
      color: #374151;
    }
  
    /* lista */
    #tradein_terms_list li{
      display: flex;
      align-items: flex-start;
      gap: 12px;
      margin-bottom: 14px;
    }
  
    /* check alineado al primer renglón */
    .tradein-check{
      width: 26px !important;
      height: 26px !important;
      min-width: 26px;
      border-radius: 50%;
      margin-top: 0.22em;
    }
  
    .tradein-check::after{
      font-size: 16px !important;
      line-height: 1;
    }
  
    /* texto del item */
    #tradein_terms_list li span:not(.tradein-check){
      font-size: 16px;
      line-height: 1.55;
    }
  }  

/* ========================= Loaders ========================= */
.tradein-loader{
  display:none;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border-radius:12px;
  background: rgba(0,0,0,.03);
  border: 1px solid rgba(0,0,0,.06);
  font-size:14px;
}
.tradein-loader.is-on{ display:inline-flex; }

.tradein-spinner{
  width:16px;
  height:16px;
  border-radius:999px;
  border:2px solid rgba(0,0,0,.15);
  border-top-color: rgba(25,135,84,.95);
  animation: tradeinSpin .7s linear infinite;
}

.tradein-fullscreen-loader{
  position:fixed;
  inset:0;
  z-index:9999;
  background: rgba(255,255,255,.94);
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:0;
  pointer-events:none;
  transition: opacity .18s ease;
}
.tradein-fullscreen-loader.is-on{ opacity:1; pointer-events:all; }
.tradein-fullscreen-loader.is-fading{ opacity:0; pointer-events:none; }

.tradein-fullscreen-box{
  text-align:center;
  padding:30px 44px;
  border-radius:18px;
  background:#fff;
  box-shadow: 0 22px 60px rgba(0,0,0,.16);
  min-width:280px;
}

.tradein-spinner-lg{
  width:64px;
  height:64px;
  border-radius:50%;
  border:6px solid rgba(0,0,0,.12);
  border-top-color:#198754;
  animation: tradeinSpin .8s linear infinite;
  margin: 0 auto 16px auto;
}
.tradein-loader-text{ font-size:16px; font-weight:900; margin-bottom:4px; letter-spacing:-0.01em; }
.tradein-loader-subtext{ font-size:13px; color:#6c757d; }

@keyframes tradeinSpin{ to { transform: rotate(360deg); } }

/* ========================= Checkout compact ========================= */
.tradein-checkout-card{
  border-radius: 16px;
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 16px 44px rgba(0,0,0,.08);
}
.tradein-checkout-card .form-label{ line-height:1.1; font-weight: 700; color: rgba(0,0,0,.72); }
.tradein-checkout-card .form-control,
.tradein-checkout-card .form-select{
  padding-top:.45rem;
  padding-bottom:.45rem;
  border-radius: 12px;
}
.tradein-checkout-card .btn.btn-success{
  border-radius: 12px;
  font-weight: 850;
}

/* ========================= DIDIT EMBED: sin scroll dentro del iframe ========================= */
.tradein-embed,
.tradein-embed body{ height:100%; }

.tradein-embed #wrapwrap,
.tradein-embed #wrap,
.tradein-embed main{
  height:100vh !important;
  min-height:100vh !important;
  margin:0 !important;
  padding:0 !important;
  overflow:hidden !important;
}

.tradein-embed .container,
.tradein-embed .container-fluid{
  max-width:none !important;
  width:100% !important;
  margin:0 !important;
  padding:0 !important;
}

.tradein-embed #tradein_didit_embed_root{
  height:100vh;
  width:100%;
  overflow:hidden;
  background:#fff;
}

.tradein-embed .tradein-embed-fallback{
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  padding:24px;
  text-align:center;
}

/* SPA DIDIT: altura dinámica real */
body:has(#tradein_spa_root) #tradein_spa_step_didit{
  display:flex;
  flex-direction:column;
  gap:10px;
  overflow:hidden;
  height: calc(100dvh - 40px);
}

body:has(#tradein_spa_root) .tradein-didit-frame{
  width: 100%;
  border: 1px solid rgba(0,0,0,.10);
  border-radius: 16px;
  overflow: hidden;

  flex: 1 1 auto;
  min-height: 520px;
  height: calc(100dvh - 240px);
}

@supports not (height: 100dvh){
  body:has(#tradein_spa_root) .tradein-didit-frame{
    height: calc(100vh - 240px);
  }
}

body:has(#tradein_spa_root) #tradein_didit_iframe{
  display:block;
  width:100%;
  height:100%;
  border:0;
  max-height:760px;
  overflow:hidden !important;
}

#tradein_didit_iframe{
  width: 100%;
  height: 720px;     /* o 75vh */
  max-height: 820px; /* opcional */
  border: 0;
}


/* ========================= Address suggestions dropdown (si lo usas) ========================= */
.tradein-addr-wrap{ position: relative; }

.tradein-addr-suggestions{
  position:absolute;
  top:100%;
  left:0;
  right:0;
  z-index:9999;
  background:#fff;
  border:1px solid rgba(0,0,0,.15);
  border-radius:12px;
  box-shadow:0 14px 40px rgba(0,0,0,.12);
  max-height:260px;
  overflow:auto;
  margin-top:6px;
}

.tradein-addr-suggestions .item{
  padding:10px 12px;
  font-size:13px;
  cursor:pointer;
  line-height:1.2;
}

.tradein-addr-suggestions .item:hover{
  background:#f5f5f5;
}

/* =====================================================
   MODELS – estilo tipo Apple Store
   ===================================================== */
body:has(#tradein_spa_root) #tradein_spa_models_grid .tradein-spa-model{
  padding: 18px 18px 16px !important;
  min-height: 150px;
  align-items: flex-start;
}

body:has(#tradein_spa_root) #tradein_spa_models_grid 
.tradein-spa-model .d-flex{
  align-items: flex-start !important;
  gap: 16px !important;
}

body:has(#tradein_spa_root) #tradein_spa_models_grid 
.tradein-spa-model img{
  width: 96px !important;
  height: 96px !important;
  padding: 6px !important;
  border-radius: 18px;
  box-shadow: 0 14px 30px rgba(0,0,0,.12);
}

body:has(#tradein_spa_root) #tradein_spa_models_grid 
.tradein-spa-model .fw-semibold{
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 1.25;
  letter-spacing: -0.005em;
  margin-top: 4px;
}

body:has(#tradein_spa_root) #tradein_spa_models_grid 
.tradein-spa-model small{
  font-size: 12px !important;
  color: rgba(0,0,0,.55);
}

body:has(#tradein_spa_root) #tradein_spa_models_grid 
.tradein-spa-model:after{
  opacity: .45;
  transform: translateY(-50%) scale(.9);
}

body:has(#tradein_spa_root) #tradein_spa_models_grid 
.tradein-spa-model:hover{
  transform: translateY(-1px);
  box-shadow: 0 12px 26px rgba(0,0,0,.08);
}

/* =====================================================
   MODELS – Forzar layout VERTICAL tipo Apple (solo CSS)
   ===================================================== */
body:has(#tradein_spa_root) #tradein_spa_models_grid .tradein-spa-model{
  padding: 0 !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  min-height: 240px;
  background: #fff !important;
  border: 1px solid rgba(0,0,0,.14) !important;
}

body:has(#tradein_spa_root) #tradein_spa_models_grid .tradein-spa-model .d-flex{
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 0 !important;
}

body:has(#tradein_spa_root) #tradein_spa_models_grid .tradein-spa-model img{
  width: 100% !important;
  height: 185px !important;
  object-fit: contain !important;
  background: rgba(0,0,0,.04) !important;
  padding: 18px !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  display: block !important;
}

body:has(#tradein_spa_root) #tradein_spa_models_grid .tradein-spa-model .flex-grow-1{
  padding: 12px 14px 14px 14px !important;
}

body:has(#tradein_spa_root) #tradein_spa_models_grid .tradein-spa-model .fw-semibold{
  font-size: 13px !important;
  font-weight: 650 !important;
  line-height: 1.2 !important;
  margin: 0 0 4px 0 !important;
  letter-spacing: -0.01em;
}

body:has(#tradein_spa_root) #tradein_spa_models_grid .tradein-spa-model small{
  font-size: 11.5px !important;
  color: rgba(0,0,0,.55) !important;
}

body:has(#tradein_spa_root) #tradein_spa_models_grid .tradein-spa-model:after{
  display: none !important;
}

body:has(#tradein_spa_root) #tradein_spa_models_grid .tradein-spa-model:hover{
  transform: translateY(-1px);
  box-shadow: 0 14px 34px rgba(0,0,0,.10) !important;
  border-color: rgba(0,0,0,.22) !important;
}

/* =====================================================
   MODELS – Apple-style vertical cards (ti-card)
   ===================================================== */
body:has(#tradein_spa_root) #tradein_spa_models_grid .ti-card{
  width: 100%;
  border: 1px solid rgba(0,0,0,.14);
  border-radius: 14px;
  background: #fff;
  overflow: hidden;
  text-align: left;
  padding: 0;
  cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
  min-height: 260px;
  display: flex;
  flex-direction: column;
}

body:has(#tradein_spa_root) #tradein_spa_models_grid .ti-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 18px 40px rgba(0,0,0,.12);
  border-color: rgba(0,0,0,.22);
}

body:has(#tradein_spa_root) #tradein_spa_models_grid .ti-card-img{
  height: 190px;
  background: rgba(0,0,0,.04);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
}

body:has(#tradein_spa_root) #tradein_spa_models_grid .ti-card-img img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

body:has(#tradein_spa_root) #tradein_spa_models_grid .ti-card-body{
  padding: 12px 14px 14px 14px;
}

body:has(#tradein_spa_root) #tradein_spa_models_grid .ti-card-title{
  font-size: 13px;
  font-weight: 650;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: rgba(0,0,0,.92);
  margin-bottom: 4px;
}

body:has(#tradein_spa_root) #tradein_spa_models_grid .ti-card-sub{
  font-size: 11.5px;
  color: rgba(0,0,0,.55);
}

/* =========================================
   TUNE DOWN – cards un poco más pequeñas
   ========================================= */
body:has(#tradein_spa_root) #tradein_spa_models_grid .ti-card{ min-height: 200px; }
body:has(#tradein_spa_root) #tradein_spa_models_grid .ti-card-img{ height: 150px; padding: 10px; }
body:has(#tradein_spa_root) #tradein_spa_models_grid .ti-card-body{ padding: 10px 12px 12px 12px; }
body:has(#tradein_spa_root) #tradein_spa_models_grid .ti-card-title{ font-size: 12.5px; }
body:has(#tradein_spa_root) #tradein_spa_models_grid .ti-card-sub{ font-size: 11px; }

/* =====================================================
   MODELS GRID — 4 x 3 (desktop)
   ===================================================== */
@media (min-width: 992px){
  body:has(#tradein_spa_root) #tradein_spa_models_grid{
    display: grid !important;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
  }

  body:has(#tradein_spa_root) #tradein_spa_models_grid > .col-lg-4,
  body:has(#tradein_spa_root) #tradein_spa_models_grid > .col-md-6,
  body:has(#tradein_spa_root) #tradein_spa_models_grid > .col-12{
    width: auto !important;
    max-width: none !important;
    flex: none !important;
  }
}

@media (min-width: 768px) and (max-width: 991px){
  body:has(#tradein_spa_root) #tradein_spa_models_grid{
    display: grid !important;
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 767px){
  body:has(#tradein_spa_root) #tradein_spa_models_grid{
    display: grid !important;
    grid-template-columns: repeat(2, 1fr);
  }
}

/* =====================================================
   COMPACTAR "Especificaciones y condición"
   ===================================================== */
body:has(#tradein_spa_root) .tradein-accordion{ padding: 8px 0 !important; }
body:has(#tradein_spa_root) .tradein-accordion-summary{ padding: 0 !important; }
body:has(#tradein_spa_root) .tradein-accordion-body{ padding: 8px 0 4px 0 !important; gap: 8px !important; }

body:has(#tradein_spa_root) .tradein-accordion-title{
  font-size: 13px !important;
  font-weight: 850 !important;
}
body:has(#tradein_spa_root) .tradein-accordion-value{ font-size: 12.5px !important; }

body:has(#tradein_spa_root) .o_tradein_specs .btn.btn-outline-success{
  padding: 8px 14px !important;
  min-height: 38px !important;
  border-radius: 10px !important;
  font-size: 13px !important;
  box-shadow: 0 8px 16px rgba(0,0,0,.04) !important;
}

@media (max-width: 768px){
  body:has(#tradein_spa_root) .o_tradein_specs .btn.btn-outline-success{
    padding: 8px 12px !important;
    min-height: 36px !important;
    font-size: 12.5px !important;
  }
}

/* =====================================================
   Accordion caret más discreto
   ===================================================== */
body:has(#tradein_spa_root) .tradein-accordion-caret{
  font-size: 14px !important;
  opacity: .55;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,.03);
  border: 1px solid rgba(0,0,0,.06);
}

body:has(#tradein_spa_root) .tradein-accordion-summary:hover .tradein-accordion-caret{
  opacity: .8;
}

/* =====================================================
   Payment select icon
   ===================================================== */
.tradein-payment-select{ position: relative; }
.tradein-payment-select .payment-icon{
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: #111;
  opacity: .85;
  pointer-events: none;
}
.tradein-payment-select select{
  padding-left: 48px;
  font-weight: 600;
}

/* =====================================================================
   HEADER + STEPPER — OVERRIDE FINAL
   (para que quede como tu referencia, sin afectar lo demás)
   ===================================================================== */

/* Header “movido” y centrado tipo referencia */
body:has(#tradein_spa_root) .tradein-header{
  text-align: center;
  margin: 0 auto;
  padding: 24px 16px 8px;
  max-width: 1100px;
}

/* Título: fuerza render consistente (sin bold sintético) */
body:has(#tradein_spa_root) .tradein-header h1{
  font-family: "EmberModernText", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif !important;
  font-weight: 900;              /* 1000 no es válido en la mayoría */
  font-synthesis: none;
  font-kerning: normal;

  font-size: 34px;               /* si lo quieres más grande dime y lo ajustamos */
  letter-spacing: -0.04em;
  line-height: 1.02;
  margin: 0 0 12px 0;
  color: rgba(0,0,0,.92);

  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body:has(#tradein_spa_root) .tradein-header .tradein-subtitle{
  font-family: "EmberModernText", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif !important;
  font-weight: 400;
  font-size: 13px;
  line-height: 1.55;
  color: #6b7280;
  margin: 0 auto;
  max-width: 78ch;
}

/* Stepper: grid “cuadrado” */
body:has(#tradein_spa_root) .tradein-stepper{
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  align-items: start !important;
  justify-content: stretch !important;
  gap: 0 !important;

  position: relative !important;
  margin: 16px auto 16px !important;
  padding: 14px 0 0 !important;

  flex-wrap: unset !important;
  overflow: visible !important;
}

/* Apaga la línea larga anterior */
body:has(#tradein_spa_root) .tradein-stepper:before{
  content: none !important;
}

/* Cada step centrado */
body:has(#tradein_spa_root) .tradein-stepper .ti-step{
  position: relative !important;
  z-index: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  gap: 8px !important;
  padding: 0 !important;
}

/* Línea por tramo: del centro del dot actual al centro del siguiente */
body:has(#tradein_spa_root) .tradein-stepper .ti-step:not(:last-child)::after{
  content: "" !important;
  position: absolute !important;
  top: 13px !important;         /* centro de dot (26px/2) */
  left: 50% !important;
  width: 100% !important;       /* llega al centro del siguiente step */
  height: 2px !important;
  background: rgba(99,102,241,.22) !important;
  border-radius: 999px !important;
  z-index: 0 !important;
}

/* Dot arriba de la línea (mantiene tu look premium) */
body:has(#tradein_spa_root) .tradein-stepper .ti-step .dot{
  position: relative !important;
  z-index: 1 !important;
  margin: 0 auto !important;    /* centra perfecto */
}

/* Labels más “cuadrados” (cortes parecidos a la referencia) */
body:has(#tradein_spa_root) .tradein-stepper .ti-step .label{
  max-width: 18ch !important;
  margin: 0 auto !important;
}

/* Responsive (móvil): mejor ocultar líneas en 2x2 */
@media (max-width: 768px){
  body:has(#tradein_spa_root) .tradein-stepper{
    grid-template-columns: repeat(2, 1fr) !important;
    row-gap: 18px !important;
  }
  body:has(#tradein_spa_root) .tradein-stepper .ti-step:not(:last-child)::after{
    display: none !important;
  }
}
/* pinta los tramos “hechos” */
body:has(#tradein_spa_root) .tradein-stepper .ti-step.is-done::after{
  background: rgba(99,102,241,1) !important;
}
/* pinta el tramo del activo hacia el siguiente (opcional) */
body:has(#tradein_spa_root) .tradein-stepper .ti-step.is-active::after{
  background: rgba(99,102,241,1) !important;
}
html, body { height: auto !important; min-height: 0 !important; }
#tradein_spa_root { min-height: 0 !important; }

/* =========================
   DIDIT: evitar loop de altura
   ========================= */
   #tradein_spa_step_didit,
   #tradein_spa_step_didit * {
     box-sizing: border-box;
   }
   
   /* contenedor estable */
   #tradein_spa_step_didit .ti-didit-wrap,
   #tradein_spa_step_didit .tradein-didit-wrap,
   #tradein_spa_step_didit .didit-wrap {
     width: 100%;
     max-width: 100%;
   }
   
   /* el iframe de Didit: NO 100vh */
   #tradein_didit_iframe {
     width: 100%;
     height: 720px;        /* estable */
     max-height: 80vh;     /* si quieres adaptarlo un poco */
     min-height: 540px;    /* evita demasiado chico */
     border: 0;
     display: block;
     background: #fff;
   }
   
   /* si tenías algo como 100vh en cualquier lado, lo mata */
   #tradein_spa_step_didit [style*="100vh"],
   #tradein_spa_step_didit [style*="min-height:100vh"],
   #tradein_spa_step_didit [style*="height:100vh"] {
     height: auto !important;
     min-height: auto !important;
   }
   .btn-custom-success {
    background-color: #ff9900;
    border-color: #ff9900;
    color: #0F141A; /* texto oscuro para buen contraste */
    font-weight: 600;
  }
  
  .btn-custom-success:hover,
  .btn-custom-success:focus {
    background-color: #f49200 ; /* un poquito más oscuro */
    border-color: #f49200;
    color: #0F141A;
  }

  .btn-success {
    background-color: #ff9900 !important;
    border-color: #ff9900 !important;
    color: #0F141A !important;
  }
  
  .btn-outline-success {
    color: #0F141A !important;
    border-color: #ff9900 !important;
  }
  
  .btn-outline-success:hover,
  .btn-outline-success:focus {
    background-color: #ff9900 !important;
    border-color: #ff9900 !important;
    color: #0F141A !important;
  }
  
  /* =========================
   Shopify theme reset (inputs)|
   ========================= */
  .tradein-shell .form-control,
  .tradein-shell .form-select,
  .tradein-shell input,
  .tradein-shell select,
  .tradein-shell textarea{
    -webkit-appearance: none !important;
    appearance: none !important;
    background-image: none !important;
    box-shadow: none !important;          /* <- mata el "borde" extra del theme */
    outline: none !important;
  }

  /* define UN solo estilo consistente */
  .tradein-shell .form-control,
  .tradein-shell .form-select{
    border: 1px solid rgba(15,20,26,.22) !important;
    border-radius: 999px !important;      /* o 12px si prefieres */
    background: #fff !important;
    padding: 10px 14px !important;
    line-height: 1.2 !important;
  }

  /* focus bonito (sin doble glow) */
  .tradein-shell .form-control:focus,
  .tradein-shell .form-select:focus{
    box-shadow: 0 0 0 3px rgba(22,163,74,.20) !important;
    border-color: rgba(22,163,74,.70) !important;
  }
  
  /* el dropdown se corta por overflow hidden de cards/wrappers */
  .tradein-shell .tradein-checkout-card,
  .tradein-shell .tradein-checkout-card .card-body{
    overflow: visible !important;
  }

  /* dropdown arriba de todo */
  .tradein-shell .tradein-addr-suggestions{
    z-index: 999999 !important;
  } 

  .tradein_spa_hr_specs{
    display: none;
  }

  /* ===========================
   Shopify form reset (scoped)
   =========================== */
  .tradein-shell *,
  .tradein-shell *::before,
  .tradein-shell *::after { box-sizing: border-box; }

  .tradein-shell input,
  .tradein-shell select,
  .tradein-shell textarea,
  .tradein-shell button {
    font: inherit;
    color: inherit;
    letter-spacing: inherit;
  }

  /* Mata estilos típicos de Dawn/apps (doble borde / sombras / appearance) */
  .tradein-shell input,
  .tradein-shell select,
  .tradein-shell textarea {
    -webkit-appearance: none !important;
    appearance: none !important;
    background-image: none !important;
    box-shadow: none !important;
    outline: none !important;
    border: 1px solid rgba(15,20,26,.18) !important;
    background: #fff !important;
    border-radius: 14px !important;
    padding: 12px 14px !important;
    line-height: 1.2 !important;
    min-height: 44px; /* mobile-friendly */
    width: 100% !important;
  }

  /* Si tu theme mete “pill”/borde adicional por wrappers */
  .tradein-shell .field,
  .tradein-shell .field__input,
  .tradein-shell .field__label,
  .tradein-shell .input,
  .tradein-shell .input__field {
    box-shadow: none !important;
    border: 0 !important;
    background: transparent !important;
  }

  .tradein-shell label.form-label{
    display:block;
    margin: 0 0 6px 0 !important;
    font-weight: 600;
    font-size: 13px;
    color: rgba(15,20,26,.85);
  }

  /* Select: flechita consistente */
  .tradein-shell select{
    padding-right: 36px !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
    background-size: 16px 16px !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpath fill='%2310141A' d='M5.7 7.3a1 1 0 0 1 1.4 0L10 10.2l2.9-2.9a1 1 0 1 1 1.4 1.4l-3.6 3.6a1 1 0 0 1-1.4 0L5.7 8.7a1 1 0 0 1 0-1.4z'/%3E%3C/svg%3E");
  }

  /* Botón submit consistente */
  .tradein-shell #tradein_spa_checkout_submit{
    min-height: 44px;
    border-radius: 14px;
    box-shadow: none !important;
  }

  /* Grid del form: evita “colapsos raros” por CSS del theme */
  .tradein-shell #tradein_spa_checkout_form .row{ margin-left: 0 !important; margin-right: 0 !important; }
  .tradein-shell #tradein_spa_checkout_form [class*="col-"]{ padding-left: 0 !important; padding-right: 0 !important; }
  .tradein-shell #tradein_spa_checkout_form .row.g-2{ gap: 12px; }

  .tradein-shell .tradein-addr-wrap { position: relative; width: 100%; }
  .tradein-shell .tradein-addr-suggestions{
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    z-index: 999999;              /* 🔥 importante en Shopify */
    background: #fff;
    border: 1px solid rgba(15,20,26,.15);
    border-radius: 14px;
    box-shadow: 0 12px 30px rgba(0,0,0,.12);
    overflow: auto;
    max-height: 260px;
  }

  .tradein-shell .tradein-addr-suggestions .item{
    padding: 10px 12px;
    cursor: pointer;
    font-size: 14px;
  }
  .tradein-shell .tradein-addr-suggestions .item:hover{
    background: rgba(15,20,26,.04);
  }

  /* Address autocomplete dropdown */
  .tradein-addr-wrap { position: relative; width: 100%; }

  .tradein-addr-suggestions{
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    z-index: 999999;           /* ✅ encima de todo */
    background: #fff;
    border: 1px solid rgba(0,0,0,.12);
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,.12);
    padding: 6px;
    max-height: 260px;
    overflow: auto;
  }

  .tradein-addr-suggestions .item{
    padding: 10px 12px;
    border-radius: 10px;
    cursor: pointer;
    user-select: none;
    font-size: 14px;
    line-height: 1.2;
  }

  .tradein-addr-suggestions .item:hover{
    background: rgba(0,0,0,.05);
  }

  /* ✅ Si algún contenedor recorta el dropdown */
  .tradein-checkout-card,
  .tradein-checkout-card .card-body,
  #tradein_spa_step_summary,
  #tradein_spa_checkout_form{
    overflow: visible !important;
  }

  #tradein_didit_block.d-none,
  #tradein_didit_iframe_div.d-none {
    display: none !important;
    height: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  .didit-review-card {
    border: 1px solid #e3e7ee;
    border-radius: 16px;
    padding: 18px;
    background: #f9fbff;
    text-align: center;
  }
  
  .didit-review-icon {
    font-size: 36px;
    margin-bottom: 6px;
  }
  
  .didit-review-card h4 {
    margin: 6px 0 8px;
    font-weight: 600;
  }
  
  .didit-review-text {
    font-size: 14px;
    line-height: 1.4;
  }
  
  .didit-review-meta {
    margin-top: 12px;
    font-size: 12px;
    color: #6c757d;
    word-break: break-all;
  }
  #tradein_spa_header {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
  #tradein_spa_step_didit {
    min-height: 0 !important;
  }
  
  #tradein_didit_iframe_div.d-none {
    margin: 0 !important;
    padding: 0 !important;
    height: 0 !important;
  }
  
  @media (max-width: 749px){
    /* reduce aire general */
    #tradein_spa_root .container{ padding-left:16px!important; padding-right:16px!important; }
    #tradein_spa_root .py-5{ padding-top:24px!important; padding-bottom:24px!important; }
    #tradein_spa_root .mb-4{ margin-bottom:16px!important; }
  
    /* didit: sin min-heights raros */
    #tradein_spa_step_didit,
    #tradein_didit_iframe_div,
    #tradein_didit_block{
      min-height: 0 !important;
    }
  }
  
  /* Wrapper */
.tradein-shell .tradein-payment-select{
  position: relative;
  width: 100%;
}

/* Icono */
.tradein-shell .tradein-payment-select .payment-icon{
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;          /* “reserva” real del icono */
  height: 20px;
  pointer-events: none;
  opacity: .9;
}

/* Select: deja espacio a la izquierda para el icono */
.tradein-shell .tradein-payment-select select.form-select{
  padding-left: 54px !important;  /* <- clave */
  padding-right: 40px !important; /* flecha del select */
  line-height: 1.2;
}

/* Si usas form-select-sm (más chaparrito) */
.tradein-shell .tradein-payment-select select.form-select-sm{
  padding-left: 54px !important;
  min-height: 44px; /* recomendado para mobile */
}
.tradein-shell .tradein-payment-select{
  position: relative;
  width: 100%;
}

.tradein-shell .tradein-payment-select .payment-icon{
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 28px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.tradein-shell .tradein-payment-select .payment-icon img{
  display: block;
  width: 28px;
  height: auto;
}

.tradein-shell .tradein-payment-select select.form-select{
  padding-left: 54px !important;   /* deja espacio al icono */
  padding-right: 40px !important;  /* flecha del select */
}

.tradein-shell .tradein-payment-select .payment-icon{
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;        /* 👈 más ancho */
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  overflow: visible; /* 👈 CLAVE */
}

.tradein-shell .tradein-payment-select .payment-icon img{
  max-width: 44px;
  max-height: 20px;
  width: auto;
  height: auto;
  display: block;
  object-fit: contain; /* 👈 CLAVE */
}
.tradein-shell .tradein-payment-select select.form-select{
  padding-left: 66px !important;  /* icono + aire */
  padding-right: 40px !important;
}

.tradein-shell .tradein-payment-select .payment-icon{
  width: 48px;
}

.tradein-shell .tradein-payment-select .payment-icon img{
  max-width: 100%;
  max-height: 18px;
}

/* Slot del icono (más grande) */
.tradein-shell .tradein-payment-select .payment-icon{
  width: 64px;        /* espacio para logo */
  height: 28px;
  left: 14px;
  overflow: visible;
}

/* El SVG dentro: crecer sin deformar */
.tradein-shell .tradein-payment-select .payment-icon img{
  max-width: 64px;
  max-height: 26px;  /* 👈 aquí está la “magia” */
  width: auto;
  height: auto;
  object-fit: contain;
}

/* Mueve el texto del select para que no se empalme */
.tradein-shell .tradein-payment-select select.form-select{
  padding-left: 86px !important; /* 64 + margen */
  padding-right: 40px !important;
}
.tradein-shell .tradein-payment-select .payment-icon img{
  transform: scale(1.12);
  transform-origin: left center;
}


/* Wrapper */
.tradein-shell .tradein-searchbar{
  position: relative;
  width: 100%;
  max-width: 720px;
  margin: 12px auto 20px auto;
}

/* Icono lupa */
.tradein-shell .tradein-searchbar .icon{
  position: absolute;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 16px;
  opacity: .55;
  pointer-events: none;
  line-height: 1;
}

/* Input */
.tradein-shell .tradein-searchbar input.form-control{
  width: 100%;
  border-radius: 999px;
  padding-left: 52px !important;   /* 👈 CLAVE */
  padding-right: 18px !important;
  min-height: 44px;
  font-size: 14px;
}

/* Botón buscar: oculto (sigues usándolo por JS si quieres) */
.tradein-shell #tradein_spa_models_search{
  display: none !important;
}

.ti-card {
  display: flex;
  gap: 16px;
  padding: 20px;
  border-radius: 14px;
  background: #F7F9FC;
  border: 1px solid #E4E7EC;
  max-width: 520px;
}

.ti-card--info {
  background: #F8FAFF;
}

.ti-card__icon {
  font-size: 28px;
  line-height: 1;
}

.ti-card__title {
  margin: 0 0 6px 0;
  font-size: 18px;
  font-weight: 600;
  color: #0F141A;
}

.ti-card__text {
  margin: 0 0 8px 0;
  font-size: 14px;
  color: #475467;
}

.ti-card__status {
  margin: 0;
  font-size: 13px;
  color: #667085;
}

/* ===============================
   TradeIn – FORCE input shape
   =============================== */

   #tradein_spa_checkout_form input.form-control,
   #tradein_spa_checkout_form select.form-select,
   #tradein_spa_checkout_form textarea.form-control {
     border-radius: 10px !important;   /* ⬅️ adiós pill */
     padding: 10px 12px !important;
     border: 1px solid #d1d5db !important;
     box-shadow: none !important;
   }
   
   /* Incluso para form-control-sm */
   #tradein_spa_checkout_form .form-control-sm,
   #tradein_spa_checkout_form .form-select-sm {
     border-radius: 10px !important;
   }
   
   /* File input */
   #tradein_spa_checkout_form input[type="file"] {
     border-radius: 10px !important;
   }
   
   /* Más espacio entre columnas (el “pegado” del centro) */
  #tradein_spa_checkout_form .row {
    --bs-gutter-x: 1rem !important;   /* separación izquierda/derecha entre col-6 */
    --bs-gutter-y: .9rem !important;  /* separación vertical entre filas */
  }

  /* Si todavía lo sientes pegado, sube a 1.25rem */
  @media (min-width: 768px) {
    #tradein_spa_checkout_form .row {
      --bs-gutter-x: 1.25rem !important;
    }
  }

  #tradein_spa_checkout_form .card-body {
    padding: 1rem 1.25rem !important;
  }

  /* =========================================
   FIX: separación real entre columnas col-6
   (sin cambiar la composición del grid)
   ========================================= */

  /* 1) Fuerza gutters aunque exista g-1 */
  #tradein_spa_checkout_form .row.g-1 {
    --bs-gutter-x: 1.5rem !important;
    --bs-gutter-y: 1rem !important;
  }

  /* 2) Si algún CSS mató el padding de las columnas, aquí lo recuperamos */
  #tradein_spa_checkout_form .row.g-1 > [class*="col-"] {
    padding-left: calc(var(--bs-gutter-x) * .5) !important;
    padding-right: calc(var(--bs-gutter-x) * .5) !important;
    margin-top: var(--bs-gutter-y) !important;
  }

  /* 3) Asegura que el row tenga el “negative margin” correcto para que no se desborde */
  #tradein_spa_checkout_form .row.g-1 {
    margin-left: calc(var(--bs-gutter-x) * -0.5) !important;
    margin-right: calc(var(--bs-gutter-x) * -0.5) !important;
    margin-top: calc(var(--bs-gutter-y) * -1) !important; /* compensa el margin-top de cols */
  }

  /* FIX: icono de método de pago alineado y sin moverse */
#tradein_spa_checkout_form .tradein-payment-select{
  display: flex !important;
  align-items: center !important;
  gap: .5rem !important;
}

#tradein_spa_checkout_form .tradein-payment-select .payment-icon{
  flex: 0 0 40px;               /* ancho fijo para que no empuje raro */
  width: 40px;
  height: 32px;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;        /* evita que “crezca” el icono */
  overflow: hidden;
}

#tradein_spa_checkout_form .tradein-payment-select .payment-icon svg{
  width: 28px !important;
  height: 20px !important;
  display: block;
}

#tradein_spa_checkout_form .tradein-payment-select select.form-select{
  flex: 1 1 auto !important;
  min-width: 0;
}
/* ===========================
   FIX definitivo: payment icon
   (sin mover HTML)
   =========================== */

   #tradein_spa_checkout_form .tradein-payment-select{
    position: relative !important;
    display: block !important;
  }
  
  /* Icono fijo a la izquierda */
  #tradein_spa_checkout_form .tradein-payment-select .payment-icon{
    position: absolute !important;
    left: 10px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 36px !important;
    height: 24px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    margin: 0 !important;
    z-index: 2 !important;
    pointer-events: none; /* para que el click vaya al select */
    background: transparent !important;
    border: 0 !important;
  }
  
  #tradein_spa_checkout_form .tradein-payment-select .payment-icon svg{
    width: 28px !important;
    height: 20px !important;
    display: block !important;
  }
  
  /* Reserva espacio para que el texto NO se meta debajo del icono */
  #tradein_spa_checkout_form .tradein-payment-select select.form-select{
    width: 100% !important;
    padding-left: 52px !important; /* espacio para el icono */
    position: relative !important;
    z-index: 1 !important;
  }
  
  /* ===== Ember Modern Text (OTF) - Trade-in only ===== */
@font-face{
  font-family: "EmberModernText";
  src: url("/reusely_connect/static/src/fonts/EmberModernDisplayV1.1-Regular.woff2") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face{
  font-family: "EmberModernText";
  src: url("/reusely_connect/static/src/fonts/EmberModernTextV1.1-Italic.woff2") format("opentype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face{
  font-family: "EmberModernText";
  src: url("/reusely_connect/static/src/fonts/EmberModernDisplayV1.1-Bold.woff2") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face{
  font-family: "EmberModernText";
  src: url("/reusely_connect/static/src/fonts/EmberModernTextV1.1-BoldItalic.woff2") format("opentype");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

/* Scope: SOLO trade-in shell */
#tradein_spa_root,
#tradein_spa_root *{
  font-family: "EmberModernText", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}
/* =========================
   DIDIT iframe: evita “cortado”
   ========================= */
   #tradein_spa_root #tradein_spa_step_didit,
   #tradein_spa_root #tradein_didit_iframe_div,
   #tradein_spa_root .ti-didit {
     overflow: visible !important; /* por si algún card/step trae overflow:hidden */
     height: auto !important;
   }
   
   /* el wrapper del iframe */
   #tradein_spa_root #tradein_didit_iframe_div {
     width: 100%;
     min-height: 820px;  /* desktop base */
   }
   
   /* el iframe */
   #tradein_spa_root #tradein_didit_iframe {
     width: 100% !important;
     display: block !important;
     border: 0 !important;
     min-height: 820px;  /* desktop */
     height: 820px;      /* fallback */
   }
   
   /* mobile: usa viewport height para que no se corte */
   @media (max-width: 575.98px) {
     #tradein_spa_root #tradein_didit_iframe_div {
       min-height: 78vh;
     }
     #tradein_spa_root #tradein_didit_iframe {
       min-height: 78vh;
       height: 78vh;
     }
   }
   
   /* =========================
      DIDIT INFO CARD – desktop ancho
      ========================= */
   
   #tradein_spa_root #tradein_didit_status_msg {
     margin-left: auto;
     margin-right: auto;
   }
   
   /* Desktop / tablet grande */
   @media (min-width: 992px) {
     #tradein_spa_root #tradein_didit_status_msg {
       max-width: 1400px;   /* ajusta a 1040 / 1100 si lo quieres aún más ancho */
       width: 100%;
     }
   }
   
   /* =========================
      DIDIT STATUS CARD: más ancho en desktop
      SOLO #tradein_didit_status_msg
      ========================= */
   
   /* base: que use todo el ancho disponible */
   #tradein_spa_step_didit #tradein_didit_status_msg{
     display:block !important;
     width:100% !important;
     max-width:none !important;
     margin-left:auto !important;
     margin-right:auto !important;
   }
   
   /* si el recorte viene por la card interna, también la liberamos */
   #tradein_spa_step_didit #tradein_didit_status_msg > .ti-card{
     width:100% !important;
     max-width:none !important;
   }
   
   /* desktop: lo hacemos “hero” (ajusta el número a gusto) */
   @media (min-width: 992px){
     #tradein_spa_step_didit #tradein_didit_status_msg{
       max-width: 1100px !important;  /* prueba 980 / 1100 / 1200 */
     }
   }
   /* =========================
      TradeIn terms: un poco más grande en desktop
      ========================= */
   
   /* base (mobile y general) – se queda como ya está */
   #tradein_spa_root .tradein_terms_title {
     font-size: 12.5px !important;
     line-height: 1.35;
   }
   
   /* desktop: +1–2px */
   @media (min-width: 992px) {
     #tradein_spa_root .tradein_terms_title {
       font-size: 12.5px!important;
       line-height: 1.4;
     }
   }
   #tradein_spa_root .tradein_terms_title a {
     font-weight: 500 !important;
     text-decoration-thickness: 1.5px !important;
     text-underline-offset: 2px !important;
   }
    
   .tradein-didit-frame {
    width: 100%;
    min-height: 760px;     /* fallback visual */
  }
  
  #tradein_didit_iframe {
    width: 100%;
    min-height: 760px;     /* clave */
    border: 0;
    display: block;
  }
  
  #tradein_didit_status_msg{
    position: relative;
    z-index: 20;
  }
  
  #tradein_didit_iframe_div{
    position: relative;
    z-index: 10;
    margin-top: 12px; /* para que no se peguen */
  }
  
  /* por si el iframe trae estilos raros */
  #tradein_didit_iframe{
    position: relative;
    z-index: 10;
    display: block;
    width: 100%;
    border: 0;
  }
  
  #tradein_didit_status_msg{
    position: relative !important;
    z-index: 9999 !important;
  }
  
  #tradein_didit_iframe_div{
    position: relative !important;
    z-index: 1 !important;
    margin-top: 12px !important;
  }
  
  #tradein_didit_iframe{
    position: relative !important;
    z-index: 1 !important;
  }
  
  #tradein_didit_status_msg{ position:relative; z-index:9999 !important; }
  #tradein_didit_iframe_div{ position:relative; z-index:1 !important; margin-top:12px; }
  /* Mensaje siempre arriba, y nunca tapado */
#tradein_didit_status_msg{
  position: relative !important;
  z-index: 9999 !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  margin-bottom: 12px !important;
}

/* El contenedor del iframe NO debe superponerse */
#tradein_didit_iframe_div{
  position: static !important;   /* <- clave contra overlaps */
  z-index: 1 !important;
  display: block !important;
  margin-top: 10px !important;
  overflow: visible !important;
  transform: none !important;    /* <- corta stacking contexts raros */
}

#tradein_didit_iframe{
  position: static !important;   /* <- evita que el iframe “flote” */
  z-index: 1 !important;
  display: block !important;
  width: 100% !important;
}
/* Fuerza al mensaje a estar en su propia “capa” y encima */
#tradein_didit_status_msg{
  position: relative !important;
  z-index: 2147483647 !important;  /* máximo práctico */
  isolation: isolate !important;   /* crea stacking context propio */
  background: transparent;
}

/* Asegura que el iframe NO use overlay accidental */
#tradein_didit_iframe_div{
  position: relative !important;
  z-index: 1 !important;
  clear: both !important;
  margin-top: 12px !important;
}

/* Evita que el iframe se posicione raro */
#tradein_didit_iframe{
  position: relative !important;
  z-index: 1 !important;
  display: block !important;
}

.tradein-action-card .card {
  transition: transform .15s ease, box-shadow .15s ease;
  cursor: pointer;
}

.tradein-action-card:hover .card {
  transform: translateY(-2px);
  box-shadow: 0 .5rem 1.25rem rgba(0,0,0,.12);
}

/* ===== Condition cards: estilo tipo modelos ===== */
.tradein-cond-grid{
  display:grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
}

@media (max-width: 980px){
  .tradein-cond-grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 640px){
  .tradein-cond-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.tradein-cond-card{
  appearance:none;
  border:1px solid rgba(0,0,0,.10);
  background:#fff;
  border-radius:16px;
  padding:0;
  cursor:pointer;
  overflow:hidden;
  text-align:left;
  box-shadow: 0 8px 18px rgba(0,0,0,.06);
  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease;
  min-height: 150px;
}

.tradein-cond-card:hover{
  transform: translateY(-1px);
  box-shadow: 0 12px 26px rgba(0,0,0,.10);
  border-color: rgba(0,0,0,.16);
}

.tradein-cond-card:focus{
  outline:none;
  box-shadow: 0 0 0 3px rgba(25,135,84,.18), 0 12px 26px rgba(0,0,0,.10);
}

/* texto abajo */
.tradein-cond-body{
  padding: 10px 12px 12px;
}

.tradein-cond-title{
  font-weight: 800;
  font-size: 12px;
  margin: 0 0 4px;
  color: #111;
  letter-spacing: -0.01em;
}

.tradein-cond-desc{
  margin: 0;
  font-size: 11px;
  color: #6c757d;
}

/* seleccionado */
.tradein-cond-card.active{
  border-color: rgba(25,135,84,.55);
  box-shadow: 0 14px 34px rgba(25,135,84,.14);
}

.tradein-cond-card.active .tradein-cond-hero{
  background: rgba(25,135,84,.08);
}
.tradein-cond-card * {
  pointer-events: none;
}
.tradein-cond-grid{
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr)); /* antes 5 */
  gap: 16px;
}

@media (max-width: 1100px){
  .tradein-cond-grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 760px){
  .tradein-cond-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.tradein-cond-card{
  min-height: 190px; /* antes 150 aprox */
  display:flex;
  flex-direction:column;
}
.tradein-cond-hero{
  height: 150px;    
  background: #f3f3f3;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 10px 8px 0;
}

.tradein-cond-hero svg{
  width: 100%;
  max-width: 120px;   /* controla que no explote */
  height: auto;
  max-height: 140px;
}

.tradein-cond-body{
  padding: 10px 12px 14px;
  text-align:center;
}

.tradein-cond-title{
  font-size: 13px;
  font-weight: 800;
  margin: 4px 0 2px;
}

.tradein-cond-desc{
  font-size: 11px;
  margin: 0;
  opacity: .75;
}
.tradein-edit-toast{
  position: fixed;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  opacity: 0;
  transition: opacity .2s ease, transform .2s ease;
  z-index: 9999;
}

.tradein-edit-toast.is-visible{
  opacity: 1;
  transform: translateX(-50%) translateY(-4px);
}

.tradein-edit-toast-inner{
  background: #111;
  color: #fff;
  padding: 12px 16px;
  border-radius: 10px;
  font-size: 13px;
  box-shadow: 0 10px 26px rgba(0,0,0,.25);
}
.ti-label-checklist{
  border:1px solid rgba(0,0,0,.08);
  border-radius:16px;
  padding:18px;
  background:#fff;
  margin: 12px 0 16px 0;
}
.ti-label-checklist__title{
  font-size:18px;
  font-weight:800;
  margin:0 0 6px 0;
  letter-spacing:-0.01em;
}
.ti-label-checklist__sub{
  margin:0 0 12px 0;
  font-size:13px;
  color: rgba(0,0,0,.65);
}

.ti-label-checklist__item{
  display:flex;
  gap:10px;
  padding:12px 12px;
  border:1px solid rgba(0,0,0,.10);
  border-radius:14px;
  margin:10px 0;
  cursor:pointer;
  user-select:none;
}
.ti-label-checklist__checkbox{
  position:absolute;
  opacity:0;
  pointer-events:none;
}
.ti-label-checklist__box{
  width:18px;
  height:18px;
  border-radius:5px;
  border:2px solid rgba(0,0,0,.22);
  margin-top:2px;
  flex:0 0 auto;
  display:inline-block;
  position:relative;
}
.ti-label-checklist__checkbox:checked + .ti-label-checklist__box{
  border-color: rgba(0,0,0,.75);
}
.ti-label-checklist__checkbox:checked + .ti-label-checklist__box::after{
  content:"";
  position:absolute;
  left:4px;
  top:1px;
  width:6px;
  height:10px;
  border-right:2px solid rgba(0,0,0,.85);
  border-bottom:2px solid rgba(0,0,0,.85);
  transform: rotate(45deg);
}

.ti-label-checklist__text strong{
  display:block;
  font-size:13px;
  font-weight:800;
  color:#000;
}
.ti-label-checklist__hint{
  display:block;
  font-size:12px;
  color: rgba(0,0,0,.62);
  margin-top:2px;
}

.ti-label-checklist__details{
  margin-top:10px;
  border-top:1px solid rgba(0,0,0,.08);
  padding-top:10px;
}
.ti-label-checklist__summary{
  font-size:13px;
  font-weight:800;
  cursor:pointer;
}
.ti-label-checklist__detail-body{ padding-top:10px; }
.ti-label-checklist__ol{
  margin:0;
  padding-left:18px;
  font-size:12px;
  color: rgba(0,0,0,.70);
}

.ti-label-checklist__gate{
  margin-top:12px;
  font-size:12px;
  color: rgba(0,0,0,.65);
}

/* Gate para acciones */
#ti_label_actions.ti-is-locked{
  opacity:.45;
}
#ti_label_actions.ti-is-locked a{
  pointer-events:none;
  cursor:not-allowed;
}
/* ---- Specs: Fotos de referencia dentro de términos ---- */
.ti-specs-ref{
  border:1px solid rgba(0,0,0,.10);
  border-radius:14px;
  background:#fff;
  padding:12px;
  margin: 12px 0 10px 0;
  display:flex;
  gap:12px;
  align-items:center;
}

.ti-specs-ref__img{
  width:110px;
  height:150px;
  object-fit:contain;
  flex:0 0 auto;
  display:block;
}

.ti-specs-ref__meta{ min-width:0; }

.ti-specs-ref__title{
  font-weight:900;
  font-size:13px;
  margin:0 0 6px 0;
  color:#000;
}

.ti-specs-ref__tabs{
  display:inline-flex;
  gap:6px;
  padding:4px;
  border:1px solid rgba(0,0,0,.12);
  border-radius:999px;
  background:#fff;
  margin-bottom:6px;
}

.ti-specs-ref__tab{
  border:0;
  background:transparent;
  padding:6px 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:800;
  color:#000;
  opacity:.65;
}
.ti-specs-ref__tab.is-active{
  opacity:1;
  background:rgba(0,0,0,.06);
}

.ti-specs-ref__hint{
  font-size:12px;
  color: rgba(0,0,0,.62);
  margin:0;
}

@media (max-width: 576px){
  .ti-specs-ref{ align-items:flex-start; }
  .ti-specs-ref__img{ width:96px; height:132px; }
}
.ti-ref-lightbox{ position:fixed; inset:0; z-index:9999; }
.ti-ref-lightbox.d-none{ display:none; }
.ti-ref-lightbox__backdrop{
  position:absolute; inset:0;
  background:rgba(0,0,0,.55);
}
.ti-ref-lightbox__panel{
  position:relative;
  width:min(920px, calc(100% - 24px));
  margin: 12px auto;
  background:#fff;
  border-radius:16px;
  box-shadow:0 18px 60px rgba(0,0,0,.25);
  padding:12px;
  max-height: calc(100% - 24px);
  overflow:hidden;
}
.ti-ref-lightbox__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:4px 6px 8px 6px;
}
.ti-ref-lightbox__title{ font-weight:900; font-size:14px; color:#000; }
.ti-ref-lightbox__close{
  border:0; background:transparent;
  font-size:26px; line-height:1;
  padding:4px 10px; cursor:pointer;
}
.ti-ref-lightbox__tabs{
  display:inline-flex;
  gap:6px;
  padding:4px;
  border:1px solid rgba(0,0,0,.12);
  border-radius:999px;
  background:#fff;
  margin: 0 6px 10px 6px;
}
.ti-ref-lightbox__tab{
  border:0; background:transparent;
  padding:6px 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:900;
  color:#000;
  opacity:.65;
}
.ti-ref-lightbox__tab.is-active{ opacity:1; background:rgba(0,0,0,.06); }

.ti-ref-lightbox__imgwrap{
  background:#f8f8f8;
  border-radius:14px;
  height: calc(100vh - 210px);
  min-height: 320px;
  overflow:auto;              /* permite zoom/pan natural en mobile */
  -webkit-overflow-scrolling: touch;
  padding:10px;
}
.ti-ref-lightbox__img{
  width:100%;
  height:auto;
  display:block;
  object-fit:contain;
  user-select:none;
  -webkit-user-drag:none;
}
.ti-ref-lightbox__hint{
  font-size:12px;
  color: rgba(0,0,0,.60);
  padding:10px 6px 2px 6px;
}
.ti-ref-lightbox{ position:fixed; inset:0; z-index:9999; }
.ti-ref-lightbox.d-none{ display:none; }
.ti-ref-lightbox__backdrop{
  position:absolute; inset:0;
  background:rgba(0,0,0,.55);
}
.ti-ref-lightbox__panel{
  position:relative;
  width:min(920px, calc(100% - 24px));
  margin: 12px auto;
  background:#fff;
  border-radius:16px;
  box-shadow:0 18px 60px rgba(0,0,0,.25);
  padding:12px;
  max-height: calc(100% - 24px);
  overflow:hidden;
}
.ti-ref-lightbox__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:4px 6px 8px 6px;
}
.ti-ref-lightbox__title{ font-weight:900; font-size:14px; color:#000; }
.ti-ref-lightbox__close{
  border:0; background:transparent;
  font-size:26px; line-height:1;
  padding:4px 10px; cursor:pointer;
}
.ti-ref-lightbox__tabs{
  display:inline-flex;
  gap:6px;
  padding:4px;
  border:1px solid rgba(0,0,0,.12);
  border-radius:999px;
  background:#fff;
  margin: 0 6px 10px 6px;
}
.ti-ref-lightbox__tab{
  border:0; background:transparent;
  padding:6px 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:900;
  color:#000;
  opacity:.65;
}
.ti-ref-lightbox__tab.is-active{ opacity:1; background:rgba(0,0,0,.06); }

.ti-ref-lightbox__imgwrap{
  background:#f8f8f8;
  border-radius:14px;
  height: calc(100vh - 210px);
  min-height: 320px;
  overflow:auto;              /* permite zoom/pan natural en mobile */
  -webkit-overflow-scrolling: touch;
  padding:10px;
}
.ti-ref-lightbox__img{
  width:100%;
  height:auto;
  display:block;
  object-fit:contain;
  user-select:none;
  -webkit-user-drag:none;
}
.ti-ref-lightbox__hint{
  font-size:12px;
  color: rgba(0,0,0,.60);
  padding:10px 6px 2px 6px;
}
.ti-brandbar{ width:100%; margin: 0 0 14px; }

@media (max-width: 980px){
  .ti-brandbar__grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px){
  .ti-brandbar__grid{ grid-template-columns: 1fr; }
}

.ti-brandcard{
  border:1px solid rgba(0,0,0,.10);
  background:#fff;
  border-radius:14px;
  padding:12px 14px;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  user-select:none;
}
.ti-brandcard:hover{ border-color: rgba(0,0,0,.18); }
.ti-brandcard.is-active{
  border-color:#1D1D1B;
  box-shadow: 0 10px 22px rgba(0,0,0,.08);
}

.ti-brandcard__name{ font-weight:700; }
.ti-brandcard__hint{ opacity:.65; font-size:12px; }

.ti-empty{
  border:1px solid rgba(0,0,0,.10);
  border-radius:14px;
  background:#fff;
  padding:16px;
}
.ti-empty__title{ font-weight:800; margin:0 0 6px; }
.ti-empty__msg{ opacity:.75; }
/* =========================
   TradeIn Empty Alert
   ========================= */
   .ti-alert-warning{
    background: #F5F5F7;
    border: 1px solid #E5E5EA;
    
    border-radius: 14px;
    padding: 16px 18px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    box-shadow: 0 8px 18px rgba(0,0,0,.05);
  }
  
  .ti-alert-warning__icon{
    font-size: 20px;
    line-height: 1;
    flex: 0 0 auto;
  }
  
  .ti-alert-warning__content{
    flex: 1 1 auto;
  }
  
  .ti-alert-warning__title{
    font-weight: 700;
    margin: 0 0 4px;
    color: #7A4F01;
  }
  
  .ti-alert-warning__msg{
    font-size: 14px;
    color: #8A6D3B;
    opacity: .9;
  }
  
  .ti-alert-warning .btn{
    margin-top: 10px;
  }

  .ti-alert-warning__title { color:#1D1D1F; }
  .ti-alert-warning__msg { color:#6E6E73; }

  /* Más largo en desktop */
  @media (min-width: 992px){
    .ti-alert-warning{
      max-width: 1000px;
      margin: 20px auto;
      padding: 24px 28px;
    }
  }
  
  .ti-brandbar{
    max-width: 1200px;
    margin: 20px auto 24px;
  }
  .ti-brandbar__grid{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;   /*  centra horizontalmente */
    gap: 16px;
  }
  .ti-brandcard{
    width: 260px;       /* tamaño uniforme */
    max-width: 100%;
  }

  /* CSS V2.0.0.0.1*/
  .ti-offer__contact {
    margin: 18px 0;
  }
  
  .ti-offer__contact-title {
    font-weight: 600;
    margin-bottom: 8px;
  }
  
  .ti-offer__contact-row {
    margin-bottom: 8px;
  }
  
  .ti-offer__input {
    border-radius: 8px;
  }

  /* ---- Ocultar / revelar total según contacto ---- */
.ti-offer__footer-amount{
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
}

.ti-offer__footer-amount--hidden .ti-price-value{
  filter: blur(8px);
  user-select: none;
  pointer-events: none;
}

.ti-price-lock{
  font-size: 16px;
  line-height: 1;
  opacity: .85;
}
/* Ocultar monto (price y total) hasta contacto válido */
.ti-offer__amount--hidden .ti-price-value{
  filter: blur(8px);
  user-select: none;
  pointer-events: none;
}

.ti-price-lock{
  font-size: 16px;
  line-height: 1;
  opacity: .85;
}
/* Cuando está oculto, se ve el candado */
.ti-offer__amount--hidden .ti-price-lock{
  display: inline-block;
}

/* Cuando ya NO está oculto, esconder el candado */
.ti-offer__price:not(.ti-offer__amount--hidden) .ti-price-lock,
.ti-offer__footer-amount:not(.ti-offer__amount--hidden) .ti-price-lock{
  display: none;
}

/* Fila en dos columnas */
.ti-offer__contact-row--inline{
  display: flex;
  gap: 12px;
  margin-bottom: 10px;
}

.ti-offer__col{
  flex: 1;
}

/* Responsive */
@media (max-width: 768px){
  .ti-offer__contact-row--inline{
    flex-direction: column;
  }
}
/* Contenedor relativo para posicionar el helper */
.ti-offer__col {
  position: relative;
}

/* Globo helper */
.ti-input-helper {
  position: absolute;
  left: 0;
  top: 100%;
  margin-top: 6px;
  background: #1f2937;
  color: #fff;
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 8px;
  white-space: nowrap;
  box-shadow: 0 6px 18px rgba(0,0,0,.15);
  opacity: 0;
  transform: translateY(-4px);
  transition: all .2s ease;
  pointer-events: none;
  z-index: 5;
}

/* Flechita */
.ti-input-helper::before{
  content: "";
  position: absolute;
  top: -5px;
  left: 14px;
  width: 10px;
  height: 10px;
  background: #1f2937;
  transform: rotate(45deg);
}

/* Visible */
.ti-input-helper--visible{
  opacity: 1;
  transform: translateY(0);
}

.tradein-action-card .card {
  transition: transform .15s ease, box-shadow .15s ease;
  cursor: pointer;
}

.tradein-action-card:hover .card {
  transform: translateY(-2px);
  box-shadow: 0 .5rem 1.25rem rgba(0,0,0,.12);
}
/* ===== Action cards (final screen) ===== */
.tradein-actions-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-top: 18px;
}

@media (max-width: 820px){
  .tradein-actions-grid{ grid-template-columns: 1fr; }
}

.tradein-action-card{
  display:block;
  text-decoration:none;
  color: inherit;
}

.tradein-action-card__inner{
  background:#fff;
  border:1px solid rgba(0,0,0,.08);
  border-radius:16px;
  padding: 18px 16px 16px;
  box-shadow: 0 8px 22px rgba(0,0,0,.06);
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
  text-align:center;
  position: relative;
  overflow:hidden;
}

.tradein-action-card__inner::before{
  content:"";
  position:absolute;
  inset:0 0 auto 0;
  height:4px;
  background: var(--ti-accent, #0d6efd);
  opacity:.9;
}

.tradein-action-card:hover .tradein-action-card__inner{
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(0,0,0,.10);
  border-color: rgba(0,0,0,.14);
}

.tradein-action-icon{
  width:56px;
  height:56px;
  margin: 4px auto 10px;
  border-radius: 16px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: var(--ti-accent-soft, rgba(13,110,253,.10));
  color: var(--ti-accent, #0d6efd);
}

.tradein-action-icon svg{
  width: 26px;
  height: 26px;
}

.tradein-action-title{
  font-weight: 800;
  font-size: 15px;
  margin: 0 0 6px;
  letter-spacing: -0.01em;
  color:#111;
  text-decoration: underline;
}

.tradein-action-desc{
  font-size: 12px;
  margin: 0;
  color: #6c757d;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Accents por tipo */
.tradein-action-card--pdf{
  --ti-accent:#198754;
  --ti-accent-soft: rgba(25,135,84,.12);
}

.tradein-action-card--track{
  --ti-accent:#0d6efd;
  --ti-accent-soft: rgba(13,110,253,.12);
}

.tradein-action-card--restart{
  --ti-accent:#6c757d;
  --ti-accent-soft: rgba(108,117,125,.14);
}

/* ===== Action cards (final screen) ===== */
.tradein-actions-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-top: 18px;
}

@media (max-width: 820px){
  .tradein-actions-grid{ grid-template-columns: 1fr; }
}

.tradein-action-card{
  display:block;
  text-decoration:none;
  color: inherit;
}

.tradein-action-card__inner{
  background:#fff;
  border:1px solid rgba(0,0,0,.08);
  border-radius:16px;
  padding: 18px 16px 16px;
  box-shadow: 0 8px 22px rgba(0,0,0,.06);
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
  text-align:center;
  position: relative;
  overflow:hidden;
}

.tradein-action-card__inner::before{
  content:"";
  position:absolute;
  inset:0 0 auto 0;
  height:4px;
  background: var(--ti-accent, #0d6efd);
  opacity:.9;
}

.tradein-action-card:hover .tradein-action-card__inner{
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(0,0,0,.10);
  border-color: rgba(0,0,0,.14);
}

.tradein-action-icon{
  width:56px;
  height:56px;
  margin: 4px auto 10px;
  border-radius: 16px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: var(--ti-accent-soft, rgba(13,110,253,.10));
  color: var(--ti-accent, #0d6efd);
}

.tradein-action-icon svg{
  width: 26px;
  height: 26px;
}

.tradein-action-title{
  font-weight: 800;
  font-size: 15px;
  margin: 0 0 6px;
  letter-spacing: -0.01em;
  color:#111;
  text-decoration: underline;
}

.tradein-action-desc{
  font-size: 12px;
  margin: 0;
  color: #6c757d;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Accents por tipo */
/* ===== Accents por tipo (colores finales) ===== */
.tradein-action-card--pdf{
  --ti-accent:rgb(252, 185, 86);
  --ti-accent-soft: rgba(255,193,102,.22);
}

.tradein-action-card--track{
  --ti-accent:rgb(100, 159, 247);
  --ti-accent-soft: rgba(114,170,253,.22);
}

.tradein-action-card--restart{
  --ti-accent:rgb(235, 197, 205);
  --ti-accent-soft: rgba(229,220,222,.35);
}
/* ===== Condition cards: estilo tipo modelos ===== */
.tradein-cond-grid{
  display:grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
}

@media (max-width: 980px){
  .tradein-cond-grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 640px){
  .tradein-cond-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.tradein-cond-card{
  appearance:none;
  border:1px solid rgba(0,0,0,.10);
  background:#fff;
  border-radius:16px;
  padding:0;
  cursor:pointer;
  overflow:hidden;
  text-align:left;
  box-shadow: 0 8px 18px rgba(0,0,0,.06);
  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease;
  min-height: 150px;
}

.tradein-cond-card:hover{
  transform: translateY(-1px);
  box-shadow: 0 12px 26px rgba(0,0,0,.10);
  border-color: rgba(0,0,0,.16);
}

.tradein-cond-card:focus{
  outline:none;
  box-shadow: 0 0 0 3px rgba(25,135,84,.18), 0 12px 26px rgba(0,0,0,.10);
}