/**
 * LayosCamp — Inscription Form Styles (CLEAN OVERRIDE)
 *
 * Overrides the legacy SCSS-compiled styles in style.css
 * which have extremely high specificity (6-7 level nesting).
 * Uses !important on properties that need to win the cascade.
 *
 * Mobile-first. Brand colors. iOS compatible.
 */

:root {
  --lc-green: #8BA841;
  --lc-green-dark: #2D5016;
  --lc-green-light: #F0F4E8;
  --lc-green-border: #d4e0c8;
  --lc-radius: 10px;
  --lc-font: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* ============================
   FORM CONTAINER
   ============================ */
.checkout-form-seleccionar-camper .E-espacio-cabecera {
  padding-top: 80px !important;
}

.checkout-form-seleccionar-camper .G-max--720 {
  max-width: 680px !important;
  padding: 0 16px 100px !important;
}

/* ============================
   CAMP INFO BANNER
   ============================ */
.checkout-form-seleccionar-camper .G-fondo--primario.G-sombra-box--si-l {
  border-radius: var(--lc-radius) !important;
  padding: 14px 20px !important;
  max-width: 320px;
  margin: 0 auto 20px !important;
}

/* ============================
   ACCORDION STEPS
   ============================ */
.checkout-form-seleccionar-camper #accordionCheckout {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}

.checkout-form-seleccionar-camper #accordionCheckout .accordion-item {
  border: 1.5px solid #e8e8e8 !important;
  border-radius: var(--lc-radius) !important;
  overflow: hidden !important;
  background: #fff !important;
}

/* Active step highlight */
.checkout-form-seleccionar-camper #accordionCheckout .accordion-item:has(.container-step-form-enabled) {
  border-color: var(--lc-green) !important;
  box-shadow: 0 2px 12px rgba(139, 168, 65, 0.15) !important;
}

/* Step headers */
.checkout-form-seleccionar-camper .accordion-button {
  font-family: var(--lc-font) !important;
  font-weight: 600 !important;
  font-size: 0.95rem !important;
  color: var(--lc-green-dark) !important;
  padding: 14px 16px !important;
  background: #fff !important;
}

.checkout-form-seleccionar-camper .accordion-button:not(.collapsed) {
  background: var(--lc-green-light) !important;
  color: var(--lc-green-dark) !important;
  box-shadow: none !important;
}

.checkout-form-seleccionar-camper .accordion-body {
  padding: 16px !important;
}

/* Disabled steps */
.checkout-form-seleccionar-camper .container-step-form-disabled {
  opacity: 0.4 !important;
  pointer-events: none !important;
}

/* ============================
   ALL FORM INPUTS
   ============================ */
.checkout-form-seleccionar-camper input[type="text"],
.checkout-form-seleccionar-camper input[type="email"],
.checkout-form-seleccionar-camper input[type="tel"],
.checkout-form-seleccionar-camper input[type="password"],
.checkout-form-seleccionar-camper input[type="number"],
.checkout-form-seleccionar-camper select,
.checkout-form-seleccionar-camper textarea {
  font-family: var(--lc-font) !important;
  font-size: 16px !important;
  min-height: 44px !important;
  padding: 10px 12px !important;
  border: 1.5px solid #ddd !important;
  border-radius: 8px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  background: #fff !important;
  color: #333 !important;
  -webkit-appearance: none !important;
  transition: border-color 0.2s ease !important;
}

.checkout-form-seleccionar-camper input:focus,
.checkout-form-seleccionar-camper select:focus,
.checkout-form-seleccionar-camper textarea:focus {
  border-color: var(--lc-green) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(139, 168, 65, 0.15) !important;
}

/* Labels */
.checkout-form-seleccionar-camper .container-step-form-enabled label {
  font-family: var(--lc-font) !important;
  font-size: 0.85rem !important;
  font-weight: 500 !important;
  color: #555 !important;
  display: block !important;
  margin-bottom: 4px !important;
}

/* Field spacing */
.checkout-form-seleccionar-camper .container-step-form-enabled .form-item {
  margin-bottom: 14px !important;
}

/* Columns: full width on mobile */
.checkout-form-seleccionar-camper .container-step-form-enabled .col-md-6,
.checkout-form-seleccionar-camper .container-step-form-enabled .col-md-4,
.checkout-form-seleccionar-camper .container-step-form-enabled .col-md-12 {
  width: 100% !important;
  max-width: 100% !important;
  flex: 0 0 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
/* Row containers inside steps: force column on mobile */
.checkout-form-seleccionar-camper .container-step-form-enabled > .row,
.checkout-form-seleccionar-camper .container-step-form-enabled .row {
  flex-direction: column !important;
}

/* ============================
   STEP 2: CAMPER SELECTOR — Redesigned as camp-badge horizontal cards
   ============================ */

/* Reset fieldset */
.container-items-form-camper-select fieldset {
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
.container-items-form-camper-select fieldset legend {
  display: none !important;
}

/* Cards container: vertical stack on mobile */
.container-items-form-camper-select fieldset .form-radios,
.container-items-form-camper-select fieldset .form-radios .form-item-camper-seleccionado .form-type-radio {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  padding: 4px 0 !important;
}

/* Each card: full width horizontal layout */
.container-items-form-camper-select .form-type-radio {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}
.container-items-form-camper-select .form-type-radio > label {
  display: block !important;
  width: 100% !important;
}
.container-items-form-camper-select .container-form-camper-select {
  width: 100% !important;
}

/* Hide native radio input */
.container-items-form-camper-select .form-type-radio input[type="radio"] {
  display: none !important;
}

/* Card base: horizontal camp badge */
.checkout-card {
  border-radius: 12px !important;
  padding: 10px 12px !important;
  min-height: auto !important;
  max-height: none !important;
  cursor: pointer !important;
  border: 2px solid #e8e8e8 !important;
  transition: all 0.25s ease !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 10px !important;
  background: #fff !important;
  box-shadow: 0 1px 4px rgba(0,0,0,0.04) !important;
  width: 100% !important;
  box-sizing: border-box !important;
  max-width: 100% !important;
  overflow: hidden !important;
}
.checkout-card:hover {
  border-color: var(--lc-green) !important;
  box-shadow: 0 2px 12px rgba(139,168,65,0.12) !important;
}

/* Selected card */
.container-items-form-camper-select .form-type-radio:has(input:checked) .checkout-card {
  border-color: var(--lc-green) !important;
  background: var(--lc-green-light) !important;
  box-shadow: 0 0 0 3px rgba(139,168,65,0.2) !important;
}
.container-items-form-camper-select .form-type-radio:has(input:checked) .camper-item-seleccionar {
  background: var(--lc-green) !important;
}
.container-items-form-camper-select .form-type-radio:has(input:checked) .camper-item-seleccionar::after {
  content: ' ✓';
}

/* Avatar + name container */
.checkout-card .G-pos--relativo {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 2px !important;
  flex: 1 !important;
  min-width: 0 !important;
  position: relative !important;
  padding-left: 0 !important;
}
.checkout-card-plus1 {
  display: none !important;
}
.checkout-card-plus2 {
  display: none !important;
}

/* Name and camp info */
.checkout-card p.G-txt--xxm {
  font-size: 0.88rem !important;
  margin: 0 !important;
  text-align: left !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
.checkout-card p.G-txt--xxs {
  font-size: 0.72rem !important;
  text-align: left !important;
  color: #888 !important;
  margin: 0 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* Select button badge */
.camper-item-seleccionar {
  background: var(--lc-green-dark) !important;
  color: #fff !important;
  padding: 6px 12px !important;
  border-radius: 20px !important;
  font-size: 0.7rem !important;
  font-weight: 600 !important;
  text-transform: none !important;
  border: none !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  max-width: 100px !important;
  text-align: center !important;
  display: inline-block !important;
  line-height: 1.3 !important;
}
.camper-item-seleccionar.active {
  background: var(--lc-green) !important;
}

/* "Añadir camper" card — special dashed style */
.form-type-radio:last-child .checkout-card {
  background: var(--lc-green-light) !important;
  border: 2px dashed var(--lc-green-border) !important;
  justify-content: center !important;
  min-height: 56px !important;
  padding: 12px 16px !important;
}
.form-type-radio:last-child .checkout-card .G-pos--relativo > *:not(.add-new-camper-form) {
  display: none !important;
}
.add-new-camper-form {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  background: var(--lc-green) !important;
  color: #fff !important;
  padding: 10px 20px !important;
  border-radius: 8px !important;
  font-family: var(--lc-font) !important;
  font-size: 0.9rem !important;
  font-weight: 600 !important;
  text-transform: none !important;
  border: none !important;
  cursor: pointer !important;
  white-space: nowrap !important;
}
.add-new-camper-form::before {
  content: '+' !important;
  font-size: 1.2rem !important;
  font-weight: 700 !important;
}

/* ============================
   DATE SELECTOR (Día/Mes/Año)
   ============================ */
.checkout-form-seleccionar-camper .form-type-datelist > .fieldset-wrapper {
  display: flex !important;
  gap: 8px !important;
  flex-wrap: nowrap !important;
}

.checkout-form-seleccionar-camper .form-type-datelist .form-item {
  flex: 1 !important;
  min-width: 0 !important;
  margin-bottom: 8px !important;
}

.checkout-form-seleccionar-camper .form-type-datelist select {
  padding: 8px 4px !important;
  font-size: 16px !important; /* iOS zoom prevention: must be >= 16px */
}

/* ============================
   BUTTONS
   ============================ */
.checkout-form-seleccionar-camper input.form-submit[value="Siguiente"],
.checkout-form-seleccionar-camper input.form-submit[name="next"],
.checkout-form-seleccionar-camper input.form-submit[name="submit"],
.checkout-form-seleccionar-camper input.form-submit[value="Iniciar Sesión"],
.checkout-form-seleccionar-camper input.form-submit[value="Guardar y continuar"] {
  display: block !important;
  width: 100% !important;
  background: var(--lc-green) !important;
  color: #fff !important;
  border: none !important;
  border-radius: var(--lc-radius) !important;
  padding: 14px 20px !important;
  font-family: var(--lc-font) !important;
  font-size: 1rem !important;
  font-weight: 600 !important;
  min-height: 48px !important;
  cursor: pointer !important;
  margin: 8px 0 !important;
  -webkit-appearance: none !important;
  box-shadow: 0 2px 8px rgba(139, 168, 65, 0.2) !important;
  position: static !important;
  z-index: auto !important;
}

.checkout-form-seleccionar-camper input.form-submit[value="Anterior"] {
  display: block !important;
  width: 100% !important;
  background: transparent !important;
  color: var(--lc-green) !important;
  border: 2px solid var(--lc-green) !important;
  border-radius: var(--lc-radius) !important;
  padding: 12px 20px !important;
  font-family: var(--lc-font) !important;
  font-size: 0.9rem !important;
  font-weight: 600 !important;
  min-height: 44px !important;
  cursor: pointer !important;
  margin: 4px 0 !important;
  -webkit-appearance: none !important;
  box-shadow: none !important;
  position: static !important;
}

/* Button containers: force vertical stacking on mobile.
   PHP wraps buttons in .container_actions and/or inline div[style] wrappers.
   Each button may be wrapped in .col-md-6.d-flex — override all to full width column. */
.checkout-form-seleccionar-camper .container_actions,
.checkout-form-seleccionar-camper .container-step-form-enabled div[style*="clear:both"] {
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  gap: 4px !important;
  clear: both !important;
  margin-top: 16px !important;
  padding-top: 12px !important;
  border-top: 1px solid #e5ecd4 !important;
}
/* All children in button container: full width */
.checkout-form-seleccionar-camper .container_actions > *,
.checkout-form-seleccionar-camper .container_actions > * > *,
.checkout-form-seleccionar-camper .container-step-form-enabled div[style*="clear:both"] > * {
  width: 100% !important;
  max-width: 100% !important;
  flex: 0 0 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
/* Override Bootstrap col-md-6 and d-flex inside button areas */
.checkout-form-seleccionar-camper .container_actions .col-md-6 {
  display: block !important;
  max-width: 100% !important;
  flex: 0 0 100% !important;
}
.checkout-form-seleccionar-camper .container_actions .d-flex {
  display: block !important;
}
/* Ensure container-form-submit wrapper is full width */
.checkout-form-seleccionar-camper .container-form-submit {
  width: 100% !important;
  max-width: 100% !important;
}

/* ============================
   OBSERVATIONS (SAFETY FIELDS)
   ============================ */
.checkout-form-seleccionar-camper .container-step-form-enabled fieldset {
  border: 1px solid var(--lc-green-border) !important;
  border-radius: 8px !important;
  padding: 12px !important;
  margin-bottom: 12px !important;
  background: #fafdf5 !important;
}

.checkout-form-seleccionar-camper .container-step-form-enabled fieldset legend {
  font-family: var(--lc-font) !important;
  font-weight: 600 !important;
  font-size: 0.85rem !important;
  color: var(--lc-green-dark) !important;
  padding: 0 8px !important;
}

/* ============================
   RGPD / DATA PROTECTION
   ============================ */
.container-items-form-radios-condiciones,
.container-items-form-radios-redessociales {
  border: 1px solid var(--lc-green-border) !important;
  border-radius: 8px !important;
  padding: 12px !important;
  margin-bottom: 12px !important;
}

.container-items-form-radios-condiciones label,
.container-items-form-radios-redessociales label {
  font-size: 0.75rem !important;
  line-height: 1.5 !important;
}

/* BUG 5 FIX: Make redes_sociales / galeria_privada radio buttons clickable.
   The legacy style.css sets .form-radio to position:absolute which hides
   radio inputs behind label content. Override to use normal flow. */
.container-items-form-radios-redessociales fieldset .fieldset-wrapper .form-radios {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
}
.container-items-form-radios-redessociales fieldset .fieldset-wrapper .form-type-radio {
  position: relative !important;
  display: flex !important;
  align-items: flex-start !important;
  cursor: pointer !important;
  padding: 8px !important;
  flex: 1 1 100px !important;
  min-width: 0 !important;
}
.container-items-form-radios-redessociales fieldset .fieldset-wrapper .form-radio {
  position: relative !important;
  margin-top: 0 !important;
  margin-right: 6px !important;
  flex-shrink: 0 !important;
  width: 18px !important;
  height: 18px !important;
  cursor: pointer !important;
  z-index: 2 !important;
  opacity: 1 !important;
}
.container-items-form-radios-redessociales fieldset .fieldset-wrapper label.option {
  cursor: pointer !important;
  padding-left: 0 !important;
  flex: 1 !important;
}

/* ============================
   ERROR / SUCCESS MESSAGES
   ============================ */
.checkout-form-seleccionar-camper .messages--error {
  background: #FEF2F2 !important;
  border: 1px solid #FECACA !important;
  border-radius: 8px !important;
  color: #991B1B !important;
  padding: 12px 16px !important;
  font-size: 0.85rem !important;
}

.checkout-form-seleccionar-camper .messages--status {
  background: var(--lc-green-light) !important;
  border: 1px solid var(--lc-green-border) !important;
  border-radius: 8px !important;
  color: var(--lc-green-dark) !important;
  padding: 12px 16px !important;
}

/* ============================
   BUG 1 FIX: Prevent "Añadir camper" button text from going vertical
   ============================ */
.add-new-camper-form {
  white-space: nowrap !important;
  display: inline-block !important;
  min-width: 130px !important;
  padding: 6px 12px !important;
  font-size: 11px !important;
  text-align: center !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
.container-items-form-camper-select .form-type-radio .container-form-camper-select {
  min-width: 130px !important;
}

/* ============================
   BUG 7 FIX: Ensure Siguiente/Anterior buttons are fully visible
   and not covered by fixed elements or clipped by containers.
   ============================ */
.checkout-form-seleccionar-camper .container_actions,
.checkout-form-seleccionar-camper .form-actions {
  padding-bottom: 24px !important;
  margin-bottom: 16px !important;
  position: relative !important;
  z-index: 10 !important;
  clear: both !important;
}
/* Ensure the accordion body has room for buttons at the bottom */
.checkout-form-seleccionar-camper .accordion-body {
  padding-bottom: 20px !important;
  overflow: visible !important;
}
/* Prevent any container from clipping the submit buttons */
.checkout-form-seleccionar-camper .container-step-form-enabled {
  overflow: visible !important;
  padding-bottom: 16px !important;
}
/* Add space at form bottom to avoid iOS/Android toolbar overlap */
.checkout-form-seleccionar-camper {
  padding-bottom: 80px !important;
}

/* ============================
   SMALL MOBILE (< 480px)
   ============================ */
@media (max-width: 480px) {
  .checkout-form-seleccionar-camper .accordion-body {
    padding: 12px 8px !important;
  }

  /* Camper cards: full width on mobile (not 110px) */
  .container-items-form-camper-select .form-type-radio {
    width: 100% !important;
    max-width: 100% !important;
  }

  .checkout-card-plus1 {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
  }

  /* Smaller text on very small screens */
  .checkout-card p.G-txt--xxm {
    font-size: 0.88rem !important;
  }
}

/* ============================
   iOS FIXES
   ============================ */
.checkout-form-seleccionar-camper select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23555' d='M6 8L1 3h10z'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 10px center !important;
  padding-right: 30px !important;
}

.checkout-form-seleccionar-camper button,
.checkout-form-seleccionar-camper input[type="submit"] {
  touch-action: manipulation !important;
  -webkit-tap-highlight-color: transparent !important;
}

/* ============================
   HIDE CHAT BUBBLE IN FORM
   ============================ */
.path-panel .lc-chat-bubble {
  bottom: 16px !important;
  left: 16px !important;
}

/* ============================
   FIXES — Session 2026-04-03
   ============================ */

/* BUG 1: Añadir camper button too narrow */
.checkout-card-plus1 {
  width: auto !important;
  height: auto !important;
  min-width: 100px !important;
  white-space: nowrap !important;
}
.form-type-radio:last-child .checkout-card {
  min-width: 120px !important;
  justify-content: center !important;
  align-items: center !important;
  padding: 16px 12px !important;
}

/* BUG 2: Selected camper visual feedback */
.container-items-form-camper-select .form-type-radio input[type="radio"]:checked + label .checkout-card,
.container-items-form-camper-select .form-type-radio input[type="radio"]:checked ~ .checkout-card {
  border-color: var(--lc-green) !important;
  background: var(--lc-green-light) !important;
  box-shadow: 0 0 0 2px var(--lc-green) !important;
}
.container-items-form-camper-select .form-type-radio input[type="radio"]:checked + label .camper-item-seleccionar,
.container-items-form-camper-select .form-type-radio input[type="radio"]:checked ~ label .camper-item-seleccionar {
  background: var(--lc-green) !important;
}

/* BUG 4: Checkmarks more visible */
.checkout-form-seleccionar-camper .form-radios .form-type-radio input[type="radio"]:checked + label::before,
.checkout-form-seleccionar-camper input[type="checkbox"]:checked + label::before {
  background: var(--lc-green) !important;
  border-color: var(--lc-green) !important;
}

/* BUG 7: Buttons not visible — ensure enough padding at bottom */
.checkout-form-seleccionar-camper .accordion-body {
  padding-bottom: 24px !important;
}
.checkout-form-seleccionar-camper .E-checkout-btns {
  display: flex !important;
  gap: 12px !important;
  padding: 16px 0 8px !important;
  position: relative !important;
  z-index: 10 !important;
}
.checkout-form-seleccionar-camper .E-checkout-btns .G-boton--primario,
.checkout-form-seleccionar-camper .E-checkout-btns button[type="submit"] {
  min-width: 140px !important;
  min-height: 48px !important;
  font-size: 1rem !important;
}

/* Radio buttons for redes sociales: ensure all options clickable */
.container-items-form-radios-redessociales .form-radios {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
}
.container-items-form-radios-redessociales .form-type-radio {
  cursor: pointer !important;
  flex: 1 1 auto !important;
  min-width: 100px !important;
}
.container-items-form-radios-redessociales .form-type-radio label {
  cursor: pointer !important;
  display: block !important;
  padding: 8px !important;
}

/* Medication: ensure conditional fields show */
.checkout-form-seleccionar-camper .container-medicacion-campos {
  display: block !important;
}

/* ============================
   FIXES — Session 2026-04-03 Round 2
   ============================ */

/* FIX: Radio/checkbox tick inside circle — global fix */
.checkout-form-seleccionar-camper input[type="radio"],
.checkout-form-seleccionar-camper input[type="checkbox"] {
  position: relative !important;
  width: 20px !important;
  height: 20px !important;
  min-width: 20px !important;
  margin: 0 8px 0 0 !important;
  vertical-align: middle !important;
  flex-shrink: 0 !important;
  -webkit-appearance: auto !important;
  appearance: auto !important;
  accent-color: var(--lc-green) !important;
}

/* Fix radio/checkbox in redes sociales section */
.container-items-form-radios-redessociales input[type="radio"] {
  position: relative !important;
  opacity: 1 !important;
  width: 20px !important;
  height: 20px !important;
  margin: 4px 8px 4px 0 !important;
  z-index: 5 !important;
}

/* Fix condiciones/politicas radios */
.checkout-form-seleccionar-camper .form-radios .form-type-radio {
  display: flex !important;
  align-items: flex-start !important;
  gap: 8px !important;
  padding: 8px 0 !important;
}
.checkout-form-seleccionar-camper .form-radios .form-type-radio label {
  flex: 1 !important;
  cursor: pointer !important;
}

/* FIX: Protección de datos — not squished */
.container-items-form-radios-redessociales {
  padding: 12px !important;
  flex-direction: column !important;
}
.container-items-form-radios-redessociales > p {
  margin-bottom: 12px !important;
}
.container-items-form-radios-redessociales .form-radios {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}
.container-items-form-radios-redessociales .form-type-radio {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 12px !important;
  border: 1.5px solid #e0e0e0 !important;
  border-radius: 10px !important;
  background: #fff !important;
  cursor: pointer !important;
}
.container-items-form-radios-redessociales .form-type-radio:has(input:checked) {
  border-color: var(--lc-green) !important;
  background: var(--lc-green-light) !important;
}

/* FIX: Last step button visible — extra padding */
.checkout-form-seleccionar-camper .G-max--720 {
  padding-bottom: 150px !important;
}
.checkout-form-seleccionar-camper .accordion-item:last-child .accordion-body {
  padding-bottom: 40px !important;
}

/* FIX: Auto-scroll to active step after submit */
/* This is handled via JS below, but ensure the active step is visible */
.checkout-form-seleccionar-camper .accordion-item:has(.container-step-form-enabled) {
  scroll-margin-top: 80px;
}

/* JS injection via CSS — scroll to active step on load */