/**
 * LayosCamp — Premium Form Redesign
 *
 * Fixes ALL known issues:
 *   1. Title truncation on mobile (extras, seguros, uniforms)
 *   2. Camper card overlap with Siguiente button
 *   3. Uniforms section redesigned as modern cards
 *   4. Chat widget overlap with Anterior button
 *   5. Premium, spacious, trustworthy feel
 *   6. Full text always visible — ZERO truncation
 *
 * Mobile-first (375px). No text-overflow:ellipsis. No white-space:nowrap on content.
 */

/* ===========================================================================
   0. RESET — Remove ALL truncation from previous CSS
   =========================================================================== */

.checkout-form-seleccionar-camper .checkout-card p.G-txt--xxm,
.checkout-form-seleccionar-camper .checkout-card p.G-txt--xxs,
.checkout-form-seleccionar-camper .title-item,
.checkout-form-seleccionar-camper .list-group-item,
.checkout-form-seleccionar-camper label.option,
.checkout-form-seleccionar-camper .accordion-button {
  white-space: normal !important;
  text-overflow: unset !important;
  overflow: visible !important;
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
}

/* ===========================================================================
   1. LIST-GROUP ITEMS — Force vertical layout on mobile
   The PHP generates <ul class="list-group list-group-horizontal-lg">
   with <li> items for title and price. On mobile this horizontal layout
   causes text truncation. Force them to stack vertically.
   =========================================================================== */

@media (max-width: 991px) {
  .checkout-form-seleccionar-camper .list-group.list-group-horizontal-lg {
    flex-direction: column !important;
    border: 1.5px solid #e8e8e8 !important;
    border-radius: 12px !important;
    padding: 0 !important;
    margin-bottom: 10px !important;
    background: #fff !important;
    overflow: hidden !important;
  }

  .checkout-form-seleccionar-camper .list-group.list-group-horizontal-lg > .list-group-item {
    border: none !important;
    border-radius: 0 !important;
    padding: 10px 16px !important;
    width: 100% !important;
    white-space: normal !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
  }

  .checkout-form-seleccionar-camper .list-group.list-group-horizontal-lg > .list-group-item.left {
    padding-bottom: 4px !important;
    font-size: 0.95rem !important;
    line-height: 1.5 !important;
    color: #2D5016 !important;
  }

  .checkout-form-seleccionar-camper .list-group.list-group-horizontal-lg > .list-group-item.left .title-item {
    display: block !important;
    font-size: 0.95rem !important;
    line-height: 1.5 !important;
    white-space: normal !important;
    word-break: normal !important;
  }

  .checkout-form-seleccionar-camper .list-group.list-group-horizontal-lg > .list-group-item.right {
    padding-top: 2px !important;
    padding-bottom: 12px !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    color: #8BA841 !important;
  }

  .checkout-form-seleccionar-camper .list-group.list-group-horizontal-lg .description {
    font-size: 0.82rem !important;
    color: #777 !important;
    margin-top: 4px !important;
    line-height: 1.45 !important;
  }
}

@media (min-width: 992px) {
  .checkout-form-seleccionar-camper .list-group.list-group-horizontal-lg {
    border: 1.5px solid #e8e8e8 !important;
    border-radius: 12px !important;
    margin-bottom: 10px !important;
    background: #fff !important;
    overflow: hidden !important;
    align-items: center !important;
  }

  .checkout-form-seleccionar-camper .list-group.list-group-horizontal-lg > .list-group-item {
    border: none !important;
    white-space: normal !important;
    overflow-wrap: break-word !important;
  }

  .checkout-form-seleccionar-camper .list-group.list-group-horizontal-lg > .list-group-item.left {
    flex: 1 !important;
    min-width: 0 !important;
  }

  .checkout-form-seleccionar-camper .list-group.list-group-horizontal-lg > .list-group-item.left .title-item {
    white-space: normal !important;
  }

  .checkout-form-seleccionar-camper .list-group.list-group-horizontal-lg > .list-group-item.right {
    flex-shrink: 0 !important;
    font-weight: 700 !important;
    color: #8BA841 !important;
    font-size: 1rem !important;
    text-align: right !important;
    min-width: 80px !important;
  }
}

/* ===========================================================================
   2. EXTRAS and PROGRAMAS — Modern card-like checkbox items
   =========================================================================== */

.checkout-form-seleccionar-camper .container-items-form-checkbox .form-type-checkbox {
  margin-bottom: 8px !important;
}

.checkout-form-seleccionar-camper .container-items-form-checkbox-style label {
  white-space: normal !important;
  word-wrap: break-word !important;
  line-height: 1.5 !important;
}

.checkout-form-seleccionar-camper .list-group.list-group-horizontal-lg:hover {
  border-color: #8BA841 !important;
  box-shadow: 0 2px 8px rgba(139, 168, 65, 0.1) !important;
  transition: all 0.2s ease !important;
}

.checkout-form-seleccionar-camper .form-type-checkbox:has(input:checked) .list-group.list-group-horizontal-lg {
  border-color: #8BA841 !important;
  background: #F9FBF5 !important;
  box-shadow: 0 0 0 2px rgba(139, 168, 65, 0.15) !important;
}

/* ===========================================================================
   3. UNIFORMS — Modern card layout with image, name, selects
   =========================================================================== */

.checkout-form-seleccionar-camper .container-uniformes-product {
  flex-direction: row !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  border: 1.5px solid #e8e8e8 !important;
  border-radius: 14px !important;
  padding: 14px !important;
  margin-bottom: 12px !important;
  background: #fff !important;
  gap: 0 !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

.checkout-form-seleccionar-camper .container-uniformes-product:hover {
  border-color: #8BA841 !important;
  box-shadow: 0 4px 12px rgba(139, 168, 65, 0.1) !important;
}

.checkout-form-seleccionar-camper .container-uniformes-product > li:first-child {
  display: flex !important;
  flex-shrink: 0 !important;
  width: 72px !important;
  height: 72px !important;
  border-radius: 10px !important;
  overflow: hidden !important;
  background: #F5F7F0 !important;
  align-items: center !important;
  justify-content: center !important;
  border: none !important;
  padding: 4px !important;
}

.checkout-form-seleccionar-camper .container-uniformes-product > li:first-child img {
  width: 64px !important;
  height: 64px !important;
  object-fit: contain !important;
  border-radius: 6px !important;
}

.checkout-form-seleccionar-camper .container-uniformes-product > li.list-group-item.G-txt--negrita:not(.precio-variante-uniformes):not(.list-group-item-cantidad-uniforme):not(.cambiar-talla-uniforme-registro) {
  flex: 1 !important;
  min-width: 0 !important;
  padding: 4px 12px !important;
  border: none !important;
  font-size: 0.95rem !important;
  color: #2D5016 !important;
  font-weight: 600 !important;
  white-space: normal !important;
  word-wrap: break-word !important;
}

.checkout-form-seleccionar-camper .container-uniformes-product > li.list-group-item.G-txt--negrita p {
  font-weight: 400 !important;
  font-size: 0.82rem !important;
  color: #888 !important;
  margin: 4px 0 0 !important;
  white-space: normal !important;
}

.checkout-form-seleccionar-camper .container-uniformes-product .list-group-item-cantidad-uniforme {
  border: none !important;
  padding: 4px 6px !important;
  flex-shrink: 0 !important;
}

.checkout-form-seleccionar-camper .container-uniformes-product .list-group-item-cantidad-uniforme select {
  width: 64px !important;
  min-height: 40px !important;
  border: 1.5px solid #ddd !important;
  border-radius: 8px !important;
  font-size: 15px !important;
  text-align: center !important;
  color: #333 !important;
  background: #fff !important;
  padding: 4px !important;
  -webkit-appearance: none !important;
}

.checkout-form-seleccionar-camper .container-uniformes-product .list-group-item-cantidad-uniforme select:focus {
  border-color: #8BA841 !important;
  box-shadow: 0 0 0 3px rgba(139, 168, 65, 0.15) !important;
  outline: none !important;
}

.checkout-form-seleccionar-camper .container-uniformes-product .cambiar-talla-uniforme-registro {
  border: none !important;
  padding: 4px 6px !important;
  flex-shrink: 0 !important;
}

.checkout-form-seleccionar-camper .container-uniformes-product .cambiar-talla-uniforme-registro select {
  min-width: 80px !important;
  min-height: 40px !important;
  border: 1.5px solid #ddd !important;
  border-radius: 8px !important;
  font-size: 14px !important;
  color: #333 !important;
  background: #fff !important;
  padding: 4px 8px !important;
  -webkit-appearance: none !important;
}

.checkout-form-seleccionar-camper .container-uniformes-product .cambiar-talla-uniforme-registro select:focus {
  border-color: #8BA841 !important;
  box-shadow: 0 0 0 3px rgba(139, 168, 65, 0.15) !important;
  outline: none !important;
}

.checkout-form-seleccionar-camper .container-uniformes-product .precio-variante-uniformes {
  border: none !important;
  padding: 4px 8px !important;
  font-weight: 700 !important;
  color: #8BA841 !important;
  font-size: 1rem !important;
  flex-shrink: 0 !important;
  text-align: right !important;
  min-width: 60px !important;
}

@media (max-width: 570px) {
  .checkout-form-seleccionar-camper .container-uniformes-product {
    flex-wrap: wrap !important;
    padding: 12px !important;
  }

  .checkout-form-seleccionar-camper .container-uniformes-product > li:first-child {
    width: 56px !important;
    height: 56px !important;
  }

  .checkout-form-seleccionar-camper .container-uniformes-product > li:first-child img {
    width: 48px !important;
    height: 48px !important;
  }

  .checkout-form-seleccionar-camper .container-uniformes-product .list-group-item-cantidad-uniforme,
  .checkout-form-seleccionar-camper .container-uniformes-product .cambiar-talla-uniforme-registro,
  .checkout-form-seleccionar-camper .container-uniformes-product .precio-variante-uniformes {
    margin-top: 8px !important;
  }
}

/* ===========================================================================
   4. SEGUROS (Insurance) — Radio card layout
   =========================================================================== */

.checkout-form-seleccionar-camper .container-items-form-checkbox-seguros .form-type-radio {
  margin-bottom: 10px !important;
}

.checkout-form-seleccionar-camper .container-items-form-checkbox-seguros .list-group.list-group-horizontal-lg {
  cursor: pointer !important;
  border: 2px solid #e8e8e8 !important;
  border-radius: 12px !important;
  padding: 0 !important;
  transition: all 0.2s ease !important;
}

.checkout-form-seleccionar-camper .container-items-form-checkbox-seguros .form-type-radio:has(input:checked) .list-group.list-group-horizontal-lg {
  border-color: #8BA841 !important;
  background: linear-gradient(135deg, #F9FBF5 0%, #F0F4E8 100%) !important;
  box-shadow: 0 0 0 3px rgba(139, 168, 65, 0.15) !important;
}

/* ===========================================================================
   5. CAMPER CARD — Fix overlap with button
   =========================================================================== */

.checkout-form-seleccionar-camper .container-items-form-camper-select {
  margin-bottom: 20px !important;
  padding-bottom: 12px !important;
}

.checkout-form-seleccionar-camper #accordion-item-2 .container_actions {
  margin-top: 24px !important;
  padding-top: 16px !important;
  position: relative !important;
  z-index: 5 !important;
  clear: both !important;
}

.checkout-form-seleccionar-camper .checkout-card {
  min-height: 60px !important;
  height: auto !important;
  max-height: none !important;
}

.checkout-form-seleccionar-camper .checkout-card p {
  white-space: normal !important;
  text-overflow: unset !important;
  overflow: visible !important;
  word-wrap: break-word !important;
}

/* ===========================================================================
   6. ACCORDION HEADERS — Full text, premium numbered badges
   =========================================================================== */

.checkout-form-seleccionar-camper #accordionCheckout {
  counter-reset: step-counter !important;
}

.checkout-form-seleccionar-camper #accordionCheckout .accordion-item {
  counter-increment: step-counter !important;
}

.checkout-form-seleccionar-camper #accordionCheckout .accordion-item .accordion-button::before {
  content: counter(step-counter) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  border-radius: 50% !important;
  background: #e8edd8 !important;
  color: #2D5016 !important;
  font-size: 0.82rem !important;
  font-weight: 700 !important;
  flex-shrink: 0 !important;
  line-height: 1 !important;
}

.checkout-form-seleccionar-camper #accordionCheckout .accordion-item:has(.container-step-form-enabled) .accordion-button::before,
.checkout-form-seleccionar-camper #accordionCheckout .accordion-item.accordion-step-form-enabled .accordion-button::before {
  background: #8BA841 !important;
  color: #fff !important;
}

.checkout-form-seleccionar-camper #accordionCheckout .accordion-item.closed .accordion-button::before,
.checkout-form-seleccionar-camper #accordionCheckout .accordion-item.accordion-step-form-prev .accordion-button::before {
  content: '\2713' !important;
  background: #8BA841 !important;
  color: #fff !important;
}

.checkout-form-seleccionar-camper #accordionCheckout .accordion-item.closed,
.checkout-form-seleccionar-camper #accordionCheckout .accordion-item.accordion-step-form-prev {
  background-image: none !important;
  padding-left: 0 !important;
  background-color: #fff !important;
}

.checkout-form-seleccionar-camper .accordion-button {
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: unset !important;
  line-height: 1.4 !important;
  min-height: 48px !important;
}

.checkout-form-seleccionar-camper .accordion-button::after {
  display: none !important;
}

/* ===========================================================================
   7. BUTTONS — Never overlapped, mobile-friendly
   =========================================================================== */

.checkout-form-seleccionar-camper .container_actions {
  display: flex !important;
  flex-direction: column-reverse !important;
  gap: 8px !important;
  margin-top: 24px !important;
  padding-top: 16px !important;
  padding-bottom: 16px !important;
  border-top: 1px solid #e5ecd4 !important;
  clear: both !important;
  position: relative !important;
  z-index: 10 !important;
}

.checkout-form-seleccionar-camper input.form-submit[value="Siguiente"],
.checkout-form-seleccionar-camper input.form-submit[value="Guardar y continuar"] {
  background: linear-gradient(135deg, #8BA841 0%, #7a9639 100%) !important;
  box-shadow: 0 4px 12px rgba(139, 168, 65, 0.3) !important;
  font-size: 1.05rem !important;
  letter-spacing: 0.02em !important;
  transition: all 0.2s ease !important;
}

.checkout-form-seleccionar-camper input.form-submit[value="Siguiente"]:active,
.checkout-form-seleccionar-camper input.form-submit[value="Guardar y continuar"]:active {
  transform: scale(0.98) !important;
  box-shadow: 0 2px 6px rgba(139, 168, 65, 0.2) !important;
}

.checkout-form-seleccionar-camper input.form-submit[value="Anterior"] {
  background: #fff !important;
  border: 1.5px solid #ddd !important;
  color: #666 !important;
  box-shadow: none !important;
}

.checkout-form-seleccionar-camper input.form-submit[value="Anterior"]:hover {
  border-color: #8BA841 !important;
  color: #8BA841 !important;
}

.checkout-form-seleccionar-camper {
  padding-bottom: 100px !important;
}

/* ===========================================================================
   8. CHAT WIDGET — Move out of the way of form buttons
   =========================================================================== */

.lc-chat-bubble,
#crisp-chatbox,
.tawk-min-container,
[class*="chat-bubble"],
[class*="chat-widget"],
.whatsapp-button,
.whatsapp-btn,
a[href*="wa.me"],
div[class*="whatsapp"],
#whatsapp-btn,
.btn-whatsapp {
  z-index: 999 !important;
}

.checkout-form-seleccionar-camper ~ .lc-chat-bubble,
.checkout-form-seleccionar-camper ~ [class*="chat"],
.checkout-form-seleccionar-camper ~ [class*="whatsapp"],
body.shopping-camper-form .lc-chat-bubble,
body.shopping-camper-form [class*="chat-bubble"],
body.shopping-camper-form [class*="whatsapp"],
body.shopping-camper-form a[href*="wa.me"] {
  bottom: 90px !important;
}

body.shopping-camper-form #lc-whatsapp-float,
body.shopping-camper-form .lc-chat-bubble {
  bottom: 90px !important;
  left: 16px !important;
  z-index: 9999 !important;
}

/* ===========================================================================
   9. PROGRESS — Visual disabled steps
   =========================================================================== */

.checkout-form-seleccionar-camper #accordionCheckout .accordion-item {
  transition: border-color 0.3s ease, box-shadow 0.3s ease !important;
}

.checkout-form-seleccionar-camper #accordionCheckout .accordion-item:has(.container-step-form-disabled) {
  opacity: 0.55 !important;
}

.checkout-form-seleccionar-camper #accordionCheckout .accordion-item:has(.container-step-form-disabled) .accordion-button {
  cursor: default !important;
}

/* ===========================================================================
   10. OBSERVACIONES — Better checkbox spacing
   =========================================================================== */

.checkout-form-seleccionar-camper .container-step-form-enabled fieldset .form-checkboxes .form-type-checkbox,
.checkout-form-seleccionar-camper .container-step-form-enabled .form-checkboxes .form-type-checkbox {
  padding: 10px 0 !important;
  border-bottom: 1px solid #f0f0f0 !important;
  display: flex !important;
  align-items: flex-start !important;
  gap: 10px !important;
}

.checkout-form-seleccionar-camper .container-step-form-enabled fieldset .form-checkboxes .form-type-checkbox:last-child {
  border-bottom: none !important;
}

.checkout-form-seleccionar-camper .container-step-form-enabled fieldset .form-checkboxes label {
  flex: 1 !important;
  line-height: 1.5 !important;
  white-space: normal !important;
}

/* ===========================================================================
   11. GENERAL PREMIUM FEEL
   =========================================================================== */

.checkout-form-seleccionar-camper .E-espacio-cabecera {
  background: linear-gradient(180deg, #FAFDF7 0%, #fff 300px) !important;
}

.checkout-form-seleccionar-camper .G-fondo--primario.G-sombra-box--si-l {
  background: linear-gradient(135deg, #8BA841 0%, #6d8a33 100%) !important;
  border-radius: 14px !important;
  box-shadow: 0 4px 16px rgba(139, 168, 65, 0.25) !important;
}

.checkout-form-seleccionar-camper .G-txt-head--title.G-txt--xl {
  font-family: 'Playfair Display', serif !important;
  font-size: 1.6rem !important;
  font-weight: 700 !important;
  color: #2D5016 !important;
  margin-bottom: 8px !important;
}

.checkout-form-seleccionar-camper .G-txt--cen.G-color--gris-secundario {
  font-size: 0.9rem !important;
  color: #888 !important;
  line-height: 1.5 !important;
}

.checkout-form-seleccionar-camper #accordionCheckout .accordion-item {
  border: 1.5px solid #e8e8e8 !important;
  border-radius: 14px !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
  overflow: visible !important;
}

.checkout-form-seleccionar-camper #accordionCheckout .accordion-item:has(.container-step-form-enabled),
.checkout-form-seleccionar-camper #accordionCheckout .accordion-item.accordion-step-form-enabled {
  border-color: #8BA841 !important;
  box-shadow: 0 4px 20px rgba(139, 168, 65, 0.12) !important;
}

.checkout-form-seleccionar-camper .accordion-collapse {
  transition: height 0.3s ease !important;
}

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

@media (max-width: 480px) {
  .checkout-form-seleccionar-camper .accordion-body {
    padding: 14px 12px !important;
  }
}

/* ===========================================================================
   12. HIDDEN FIRST <li> IN LIST GROUPS
   =========================================================================== */

.checkout-form-seleccionar-camper .list-group.list-group-horizontal-lg > li:first-child:empty {
  display: none !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  width: 0 !important;
  height: 0 !important;
}

/* ===========================================================================
   13. TOUCH TARGETS — All interactive elements at least 44px
   =========================================================================== */

.checkout-form-seleccionar-camper input[type="radio"],
.checkout-form-seleccionar-camper input[type="checkbox"] {
  min-width: 22px !important;
  min-height: 22px !important;
  cursor: pointer !important;
}

.checkout-form-seleccionar-camper label {
  cursor: pointer !important;
}

.checkout-form-seleccionar-camper .form-type-radio,
.checkout-form-seleccionar-camper .form-type-checkbox {
  min-height: 44px !important;
}

/* ===========================================================================
   14. HIDE empty li structural spacers
   =========================================================================== */

.checkout-form-seleccionar-camper #edit-actividades-opcionales--wrapper .list-group > li:first-child,
.checkout-form-seleccionar-camper #edit-container-seguros .list-group > li:first-child,
.checkout-form-seleccionar-camper #edit-opciones-extras .list-group > li:first-child {
  display: none !important;
}

/* ===========================================================================
   15. GLOBAL OVERRIDES for premium spacing
   =========================================================================== */

.checkout-form-seleccionar-camper #accordionCheckout {
  gap: 14px !important;
}

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

@media (max-width: 480px) {
  .checkout-form-seleccionar-camper .G-max--720 {
    padding: 0 12px 120px !important;
  }
}

.checkout-form-seleccionar-camper ::-webkit-scrollbar {
  width: 6px;
}

.checkout-form-seleccionar-camper ::-webkit-scrollbar-thumb {
  background: #d4e0c8;
  border-radius: 3px;
}

/* ===========================================================================
   16. FACTURACION STEP
   =========================================================================== */

.checkout-form-seleccionar-camper #accordion-item-10 .view-empty,
.checkout-form-seleccionar-camper #accordion-item-10 .views-empty {
  display: none !important;
}

.checkout-form-seleccionar-camper #accordion-item-10 .accordion-body {
  padding-bottom: 40px !important;
}