/* ===================================
   AGRI-GIGAS x ADAMO CHECKOUT STYLES
   Mobile-first, conversion-optimized
   ================================== */

:root {
  --color-primary: #0E6E73;
  --color-primary-dark: #0A575B;
  --color-accent: #E2573F;
}

.checkout-page {
  background-color: #f8f9fa;
  min-height: 100vh;
  font-family: 'Inter', sans-serif;
}

.checkout-main {
  min-height: calc(100vh - 200px);
}

/* Progress Indicator */
.checkout-progress {
  background: white;
  border-radius: 12px;
  padding: 1.5rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.progress-steps {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  flex-wrap: wrap;
  gap: .4rem;
  margin: 0 auto;
}

.progress-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  z-index: 2;
  flex: 0 0 auto;
}

.step-number {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #e0e0e0;
  color: #666;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: .9rem;
  transition: all 0.3s ease;
}

.step-label {
  margin-top: 0.4rem;
  font-size: 0.75rem;
  color: #666;
  font-weight: 500;
  text-align: center;
}

.progress-step.active .step-number {
  background: var(--color-primary);
  color: white;
  box-shadow: 0 2px 8px rgba(0, 100, 0, 0.3);
}

.progress-step.active .step-label {
  color: var(--color-primary);
  font-weight: 700;
}

.progress-step.completed .step-number {
  background: var(--color-accent);
  color: var(--color-primary-dark);
}

.progress-line {
  flex: 1;
  height: 2px;
  background: #e0e0e0;
  margin: 0 .25rem;
  min-width: 12px;
}

.progress-bar-container {
  margin: .75rem auto 0;
}

/* Keep the 4 steps on one line on small phones (iPhone SE/X etc.) */
@media (max-width: 480px) {
  .checkout-progress { padding: 1rem 0.75rem; }
  .progress-steps { flex-wrap: nowrap; gap: 0.25rem; }
  .step-number { width: 28px; height: 28px; font-size: 0.8rem; }
  .step-label { font-size: 0.65rem; margin-top: 0.3rem; }
  .progress-line { min-width: 8px; margin: 0 0.1rem; }
}

/* Checkout Steps */
.checkout-step {
  animation: fadeIn 0.3s ease-in-out;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.checkout-step-title {
  font-family: 'Sora', sans-serif;
  text-transform: uppercase;
  font-size: 1.6rem;
  color: #222;
  margin-bottom: 1.5rem;
}

/* Plan recap card */
.plan-recap {
  border: 2px solid var(--color-primary);
  border-radius: 12px;
  padding: 1.25rem 1.5rem;
  background: #EAF2EF;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: .75rem;
}

.plan-recap-price {
  font-family: 'Sora', sans-serif;
  font-size: 2rem;
  color: var(--color-primary);
}

.plan-recap-badge {
  display: inline-block;
  background: var(--color-accent);
  color: var(--color-primary-dark);
  font-weight: 700;
  font-size: .75rem;
  padding: .25rem .75rem;
  border-radius: 2rem;
  text-transform: uppercase;
}

/* Choice cards (Person/Company, Yes/No, etc) */
.choice-options {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.choice-option { position: relative; }
.choice-radio { position: absolute; opacity: 0; pointer-events: none; }

.choice-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.25rem 1.5rem;
  border: 3px solid #e0e0e0;
  border-radius: 12px;
  background: white;
  cursor: pointer;
  transition: all 0.3s ease;
  margin: 0;
}

.choice-card:hover {
  border-color: var(--color-primary);
  box-shadow: 0 4px 12px rgba(0, 100, 0, 0.12);
}

.choice-radio:checked + .choice-card {
  border-color: var(--color-primary);
  background: #EAF2EF;
  box-shadow: 0 4px 12px rgba(0, 100, 0, 0.15);
}

.choice-icon { flex: 0 0 auto; font-size: 1.75rem; color: var(--color-primary); }
.choice-details { flex: 1; }
.choice-name { font-weight: 700; font-size: 1.05rem; color: #222; }
.choice-sub { color: #666; font-size: .85rem; }
.choice-check { font-size: 1.5rem; color: #e0e0e0; }
.choice-radio:checked + .choice-card .choice-check { color: var(--color-primary); }

/* Cooperative search */
.coop-search-wrap { position: relative; }
.coop-results {
  position: absolute;
  top: 100%; left: 0; right: 0;
  background: white;
  border: 1px solid #dee2e6;
  border-radius: 8px;
  box-shadow: 0 4px 14px rgba(0,0,0,.12);
  z-index: 20;
  max-height: 220px;
  overflow-y: auto;
}
.coop-result-item {
  padding: .65rem 1rem;
  cursor: pointer;
  border-bottom: 1px solid #f0f0f0;
}
.coop-result-item:last-child { border-bottom: none; }
.coop-result-item:hover, .coop-result-item.active { background: #EAF2EF; }
.coop-no-results { padding: .65rem 1rem; color: #888; font-size: .9rem; }
.coop-selected-pill {
  display: inline-flex; align-items: center; gap: .4rem;
  background: var(--color-primary); color: white;
  padding: .35rem .85rem; border-radius: 2rem; font-size: .85rem; font-weight: 600;
  margin-top: .5rem;
}
.coop-selected-pill button {
  background: none; border: none; color: white; cursor: pointer; font-size: 1rem; line-height: 1;
}

/* Portability per-line blocks */
.line-block {
  border: 1px solid #dee2e6;
  border-radius: 10px;
  padding: 1.25rem;
  margin-bottom: 1rem;
  background: #fafafa;
}
.line-block h6 {
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: .75rem;
  text-transform: uppercase;
  font-size: .85rem;
  letter-spacing: .02em;
}
.line-block .portability-fields {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px dashed #dee2e6;
}

/* Form Fields */
.form-label { font-weight: 600; color: #333; margin-bottom: 0.5rem; }

.form-control, .form-select {
  border: 2px solid #e0e0e0;
  border-radius: 8px;
  padding: 0.75rem 1rem;
  font-size: 1rem;
  transition: all 0.3s ease;
  min-height: 48px;
}

/* Placeholders were rendering at full text weight, so "12", "3r", "2a" and a postcode read as
   values already filled in. Hints should look like hints. */
.form-control::placeholder, .form-select::placeholder { color: #9AA7AB; opacity: 1; font-style: italic; }
.form-control:focus::placeholder { color: #BCC6C9; }

.form-control:focus, .form-select:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 0.2rem rgba(0, 100, 0, 0.15);
}

.form-control.is-valid, .form-select.is-valid { border-color: #4CAF50; padding-right: calc(1.5em + 0.75rem); }
.form-control.is-invalid, .form-select.is-invalid { border-color: #dc3545; padding-right: calc(1.5em + 0.75rem); }

.valid-feedback { display: none; color: #4CAF50; font-size: 0.875rem; margin-top: 0.25rem; }
.form-control.is-valid ~ .valid-feedback, .form-select.is-valid ~ .valid-feedback { display: block; }

.invalid-feedback { display: none; color: #dc3545; font-size: 0.875rem; margin-top: 0.25rem; }
.form-control.is-invalid ~ .invalid-feedback,
.form-select.is-invalid ~ .invalid-feedback,
.form-check-input.is-invalid ~ .invalid-feedback { display: block; }

.form-text { font-size: 0.875rem; color: #6c757d; margin-top: 0.25rem; }

@media (max-width: 767px) {
  .form-control, .form-select { font-size: 16px; min-height: 48px; }
}

/* Checkboxes */
.form-check { padding-left: 2rem; }
.form-check-input { margin-left: -2rem; width: 1.25rem; height: 1.25rem; margin-top: 0.125rem; cursor: pointer; }
.form-check-input:checked { background-color: var(--color-primary); border-color: var(--color-primary); }
.form-check-input:focus { border-color: var(--color-primary); box-shadow: 0 0 0 0.2rem rgba(0, 100, 0, 0.15); }
.form-check-label { cursor: pointer; user-select: none; }

/* Navigation Buttons */
.checkout-navigation { margin-top: 2rem; }
.checkout-navigation .btn { min-height: 56px; font-weight: 700; font-size: 1.05rem; border-radius: 8px; transition: all 0.3s ease; }

.btn-primary { background-color: var(--color-primary); border-color: var(--color-primary); }
.btn-primary:hover { background-color: var(--color-primary-dark); border-color: var(--color-primary-dark); transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,100,0,0.3); }

.btn-outline-secondary { border-color: #6c757d; color: #6c757d; border-width: 2px; }
.btn-outline-secondary:hover { background-color: #6c757d; border-color: #6c757d; color: white; }

.btn-add-line {
  border: 2px dashed var(--color-primary);
  color: var(--color-primary);
  background: transparent;
  border-radius: 8px;
  padding: .6rem 1rem;
  font-weight: 600;
  width: 100%;
}
.btn-add-line:hover { background: #EAF2EF; }

@media (max-width: 767px) {
  .checkout-navigation .btn { min-height: 48px; font-size: 1rem; }
}

/* Review step */
.review-section { margin-bottom: 1.5rem; }
.review-section h6 { font-weight: 700; color: var(--color-primary); text-transform: uppercase; font-size: .8rem; letter-spacing: .03em; margin-bottom: .5rem; }
.review-row { display: flex; justify-content: space-between; padding: .35rem 0; border-bottom: 1px solid #f0f0f0; font-size: .92rem; }
.review-row span:first-child { color: #666; }
.review-total {
  display: flex; justify-content: space-between; align-items: center;
  background: #EAF2EF; border-radius: 8px; padding: 1rem 1.25rem; margin-top: 1rem;
}
.review-total .price { font-family: 'Sora', sans-serif; font-size: 1.6rem; color: var(--color-primary); }

/* Loading State */
.btn.loading { position: relative; color: transparent; pointer-events: none; }
.btn.loading::after {
  content: ""; position: absolute; width: 20px; height: 20px;
  top: 50%; left: 50%; margin-left: -10px; margin-top: -10px;
  border: 3px solid rgba(255, 255, 255, 0.3); border-top-color: white;
  border-radius: 50%; animation: spinner 0.6s linear infinite;
}
@keyframes spinner { to { transform: rotate(360deg); } }

/* Cards */
.card { border: none; border-radius: 12px; }
.card-body { padding: 2rem; }
@media (max-width: 767px) { .card-body { padding: 1.5rem; } }

*:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }

@media print {
  .checkout-progress, .checkout-navigation, .navbar, .footer { display: none; }
}

/* ── XatXat brand skin (aligns the Bootstrap checkout with site.css) ─────── */
:root{--petroli:#0E6E73;--petroli-fosc:#0A575B;--teula:#E2573F;--teula-fosc:#C74731;--sorra:#F4EBDD;--paper:#FBF7F0;--nit:#12313B;--tinta2:#4A5F66;--regla:#DCCFBC}
body.checkout-page{background:var(--sorra);color:var(--nit);font-family:'Inter','Helvetica Neue',Arial,sans-serif}
.checkout-page .navbar{background:var(--sorra)!important;border-bottom:1px solid var(--regla);box-shadow:none!important}
.checkout-page .navbar .small,.checkout-page .navbar a.small{color:var(--tinta2)!important}
.checkout-page .navbar .bi-lock-fill{color:var(--petroli)!important}
.logo{display:inline-flex;align-items:center;font-family:'Sora','Trebuchet MS',sans-serif;font-weight:800;font-size:22px;color:var(--nit);text-decoration:none;letter-spacing:-0.01em}
.logo:hover{color:var(--nit)} .logo .cat{color:var(--petroli)} .logo svg{margin:0 3px}
.checkout-page h1,.checkout-page h2,.checkout-page h5,.checkout-page .checkout-step-title{font-family:'Sora','Trebuchet MS',sans-serif;font-weight:800;letter-spacing:-0.01em;color:var(--nit)}
.checkout-page .card{background:var(--paper);border:1px solid var(--regla)!important;border-radius:14px;box-shadow:0 18px 40px rgba(18,49,59,.08)!important}
.checkout-page .text-muted{color:var(--tinta2)!important}
.checkout-page a{color:var(--petroli)} .checkout-page a:hover{color:var(--teula)}
.checkout-page .btn{border-radius:6px;font-weight:600;font-family:'Inter',sans-serif}
.checkout-page .btn-primary{background:var(--petroli)!important;border-color:var(--petroli)!important;color:var(--sorra)!important}
.checkout-page .btn-primary:hover{background:var(--petroli-fosc)!important;border-color:var(--petroli-fosc)!important;transform:none}
.checkout-page #step8-submit{background:var(--teula)!important;border-color:var(--teula)!important;color:#fff!important}
.checkout-page #step8-submit:hover{background:var(--teula-fosc)!important;border-color:var(--teula-fosc)!important}
.checkout-page .btn-outline-secondary{border:2px solid var(--petroli)!important;color:var(--petroli)!important;background:transparent!important}
.checkout-page .btn-outline-secondary:hover{background:var(--petroli)!important;color:var(--sorra)!important}
.checkout-page .progress{background:var(--regla);height:6px;border-radius:6px}
.checkout-page .progress-bar{background:var(--petroli)!important}
.checkout-page .progress-step .step-number{background:var(--paper);border:2px solid var(--regla);color:var(--tinta2)}
.checkout-page .progress-step.active .step-number{background:var(--teula);border-color:var(--teula);color:#fff}
.checkout-page .progress-step.completed .step-number{background:var(--petroli);border-color:var(--petroli);color:var(--sorra)}
.checkout-page .progress-step.active .step-label{color:var(--nit);font-weight:700}
.checkout-page .progress-line{background:var(--regla)}
.checkout-page .form-control,.checkout-page .form-select{background:#fff;border:1.5px solid var(--regla);border-radius:6px;color:var(--nit)}
.checkout-page .form-control:focus,.checkout-page .form-select:focus{border-color:var(--petroli);box-shadow:0 0 0 3px rgba(14,110,115,.18)}
.checkout-page .form-check-input:checked{background-color:var(--petroli);border-color:var(--petroli)}
.checkout-page .choice-card{background:#fff;border:1.5px solid var(--regla);border-radius:10px}
.checkout-page .choice-card:hover{border-color:var(--petroli)}
.checkout-page .choice-radio:checked+.choice-card{border-color:var(--petroli);background:#EAF2EF}
.checkout-page .plan-recap-badge{background:var(--petroli);color:var(--sorra);border-radius:999px;padding:4px 12px;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;display:inline-block}
.checkout-page .plan-recap-price{font-family:'Sora',sans-serif;font-weight:800;color:var(--petroli)}
.checkout-page .review-section h6{font-family:'Sora',sans-serif;color:var(--petroli)}
.checkout-page .review-total{border-top:2px solid var(--nit);color:var(--nit)}
.checkout-page .review-total .price{color:var(--petroli)}
.checkout-page .footer{background:var(--sorra)!important;border-top:1px solid var(--regla)}
.checkout-page .footer .text-success{color:var(--petroli)!important}
.checkout-page .alert-danger{background:#FDF3EF;border-color:var(--teula);color:#A63A26}
.checkout-page .line-block{background:#fff;border:1px solid var(--regla);border-radius:10px}

.checkout-page a.logo,.checkout-page a.logo:hover{color:var(--nit)}

/* "Només vull la fibra": the answer to the question a fibre-only buyer is actually asking. */
/* Portability step: take a line out again, add another, and the total as it stands. */
.line-block h6{display:flex;align-items:center;gap:.4rem}
.line-remove{margin-left:auto;background:none;border:0;padding:0;font-size:.8rem;font-weight:600;text-transform:none;letter-spacing:0;color:#A63A26;text-decoration:underline;cursor:pointer}
#add-line-btn{margin-top:.25rem}
.sim-optout-note{margin-top:.75rem;background:#FBF7F0;border-left:4px solid #0E6E73;border-radius:0 8px 8px 0;padding:.7rem .9rem;font-size:.9rem;line-height:1.55;color:#12313B}

/* Off-ramp for autònoms and companies: present, findable, and quiet enough not to divert a resident. */
.biz-offramp{font-size:.9rem}
.biz-offramp a{color:#0E6E73;text-decoration:none;border-bottom:1px solid rgba(14,110,115,.35);padding-bottom:1px}
.biz-offramp a:hover{border-bottom-color:#0E6E73}

/* Step 1's pack card doubles as the continue button. */
.plan-recap-go{cursor:pointer;transition:box-shadow .2s ease,transform .2s ease}
.plan-recap-go:hover{box-shadow:0 6px 18px rgba(18,49,59,.10);transform:translateY(-1px)}
.plan-recap-go:focus-visible{outline:3px solid rgba(14,110,115,.45);outline-offset:3px}