:root{
  --c9-bg: #f6f8fb;
  --c9-card: #ffffff;
  --c9-border: rgba(0,0,0,.08);
  --c9-muted: #6c757d;
  --c9-radius: 18px;
  /* Accent color for wizard elements (pastel blue). */
  --c9-accent: #4c8bed;
  --c9-accent-rgb: 76, 139, 237;
}
body{background:var(--c9-bg);}
.c9-hero{background:linear-gradient(180deg,#ffffff 0%, #f6f8fb 100%);}

.c9-progress{
  width: 180px;
  height: 10px;
  background: rgba(0,0,0,.06);
  border-radius: 999px;
  overflow: hidden;
}
.c9-progress-bar{
  height: 100%;
  background: var(--c9-accent);
  border-radius: 999px;
  transition: width .25s ease;
}

.c9-field{
  background: var(--c9-card);
  border: 1px solid var(--c9-border);
  border-radius: 14px;
  padding: 12px;
}

/* Step 1: buscador */
.c9-search-wrap{position:relative;}
.c9-suggest{
  position:absolute;
  left:0; right:0;
  top:calc(100% + 8px);
  z-index: 20;
  background: #fff;
  border:1px solid var(--c9-border);
  border-radius: 14px;
  box-shadow: 0 12px 30px rgba(0,0,0,.08);
  max-height: 260px;
  overflow:auto;
  display:none;
}
.c9-suggest .item{
  padding: 10px 12px;
  cursor:pointer;
  border-bottom:1px solid rgba(0,0,0,.05);
}
.c9-suggest .item:last-child{border-bottom:0;}
/* Hover state uses accent color */
.c9-suggest .item:hover{
  background: rgba(var(--c9-accent-rgb), .08);
}
.c9-suggest .item .small{color:var(--c9-muted)}

/* Step 2/3 cards */
.c9-choice{
  border:1px solid var(--c9-border);
  border-radius: 16px;
  padding: 12px;
  cursor:pointer;
  background:#fff;
  transition: transform .08s ease, box-shadow .08s ease, border-color .08s ease;
}
.c9-choice:hover{transform: translateY(-1px); box-shadow: 0 10px 22px rgba(0,0,0,.06);}
.c9-choice.active{
  border-color: rgba(var(--c9-accent-rgb), .55);
  box-shadow: 0 0 0 3px rgba(var(--c9-accent-rgb), .18);
}

.c9-summary-item{
  background:#fff;
  border:1px solid var(--c9-border);
  border-radius: 16px;
  padding: 12px;
}

/* Swipe */
.c9-swipe{
  position: relative;
  height: 56px;
  border-radius: 999px;
  border:1px solid var(--c9-border);
  background:#fff;
  overflow:hidden;
  user-select:none;
}
.c9-swipe-fill{
  position:absolute;
  left:0; top:0; bottom:0;
  width:0%;
  background: rgba(var(--c9-accent-rgb), .14);
  transition: width .05s linear;
}
.c9-swipe-handle{
  position:absolute;
  left:6px;
  top:6px;
  width:44px;
  height:44px;
  border-radius: 999px;
  background: var(--c9-accent);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow: 0 10px 22px rgba(var(--c9-accent-rgb), .25);
  cursor: grab;
  touch-action: none;
}
.c9-swipe-text{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight: 600;
  color:#0b234f;
}

@media (max-width: 420px){
  .c9-progress{width: 140px;}
}

/* Spacing adjustments for choice cards to improve readability */
.c9-choice {
  margin-bottom: 0.75rem;
}

/* Scrollable wrapper for the wizard (in the embedded modal).
   It provides a max height and shows a fade indicator at the bottom when there is more content to scroll. */
/* Make the wizard container expand naturally instead of scrolling internally.
   Removing max-height and overflow ensures each step occupies space on the page.
   We'll keep position:relative to retain the fade indicator if needed. */
.c9-wizard-scrollable {
  max-height: none;
  overflow-y: visible;
  position: relative;
}

/* The fade indicator appears when the wrapper has the class `.c9-has-overflow` (set via JS). */
/* Hide the fade indicator entirely since the wizard now expands without an internal scroll. */
.c9-wizard-scrollable::after {
  display: none;
}

/* =========================
   Desktop checkout refinements (CotizadorV-10)
========================= */
@media (min-width: 992px){
  .container{ max-width: 1200px; }
  .c9-card{ border-radius: 1.25rem; }
  .c9-wizard{ padding: 1.75rem; }
  .c9-aside{ position: sticky; top: 16px; }
  .c9-step-title{ font-size: 1.15rem; }
  .c9-opt{ padding: 14px 14px; border-radius: 16px; }
}