/* ==============================================
   WS Kit Flow - Single Page Styles
   For both Step 1 and Step 2
   ============================================== */

/* Import TypeKit Fonts */
@import url('https://use.typekit.net/fez1nmy.css');

/* ==============================================
   GLOBAL FLOW CONTAINER
   ============================================== */

.ws-kit-flow {
  all: initial !important;
  display: block !important;
  font-family: "mozaic-geo-variable", Montserrat, sans-serif !important;
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 0 1.25rem !important;
}

/* Hide step 2 by default */
.ws-step-2 {
  display: none !important;
}

/* Show step based on data attribute */
.ws-kit-flow[data-current-step="1"] .ws-step-1 {
  display: block !important;
}

.ws-kit-flow[data-current-step="1"] .ws-step-2 {
  display: none !important;
}

.ws-kit-flow[data-current-step="2"] .ws-step-1 {
  display: none !important;
}

.ws-kit-flow[data-current-step="2"] .ws-step-2 {
  display: block !important;
}

/* ==============================================
   SHARED STYLES (Both Steps)
   ============================================== */

.ws-step {
  all: initial !important;
  display: block !important;
  font-family: "mozaic-geo-variable", Montserrat, sans-serif !important;
}

/* Header Container */
.ws-header {
  text-align: center !important;
  margin: 0 0 2rem 0 !important;
  padding: 0 !important;
  display: block !important;
  position: relative !important;
}

/* Title */
.ws-header h2.ws-title {
  font-family: "mozaic-geo-variable", Montserrat, sans-serif !important;
  font-size: 2.25rem !important;
  font-weight: 600 !important;
  text-transform: none !important;
  line-height: 1.2 !important;
  letter-spacing: -0.01em !important;
  color: #414141 !important;
  margin: 0 0 1rem 0 !important;
  padding: 0 !important;
  text-align: center !important;
  display: block !important;
}

/* Progress Bar Container */
.ws-progress {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.75rem !important;
  margin: 0 0 0.5rem 0 !important;
  padding: 0 !important;
}

.ws-progress-bar {
  display: flex !important;
  gap: 4px !important;
  align-items: center !important;
  padding: 0 !important;
  margin: 0 !important;
}

.ws-progress-segment {
  width: 80px !important;
  height: 4px !important;
  border-radius: 2px !important;
  background: #9FA3BB !important;
  transition: background 0.3s ease !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
}

.ws-progress-segment.active {
  background: #AF2734 !important;
}

.ws-progress-label {
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  color: #414141 !important;
  letter-spacing: 0.02em !important;
  display: inline-block !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Cards Container */
.ws-options {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 1rem !important;
  max-width: 640px !important;
  margin: 0 auto !important;
  padding: 0 !important;
  list-style: none !important;
}

/* Individual Card */
.ws-card {
  display: grid !important;
  grid-template-columns: 40px 1fr !important;
  gap: 1.25rem !important;
  align-items: start !important;
  padding: 1.5rem !important;
  border: 2px solid #9FA3BB !important;
  border-radius: 16px !important;
  background: transparent !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  width: 100% !important;
  -webkit-tap-highlight-color: transparent !important;
  touch-action: manipulation !important;
}

.ws-card:hover {
  box-shadow: none !important;
  border-color: #232936 !important;
}

/* Card Content Container */
.ws-card__content {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.5rem !important;
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
}

/* Card Title */
.ws-card__title {
  font-family: "mozaic-geo-variable", Montserrat, sans-serif !important;
  font-weight: 700 !important;
  font-size: 1.625rem !important;
  line-height: 1.3 !important;
  color: #414141 !important;
  margin: 0 !important;
  padding: 0 !important;
  letter-spacing: -0.01em !important;
  display: block !important;
}

/* Card Price */
.ws-card__price {
  font-family: "mozaic-geo-variable", Montserrat, sans-serif !important;
  font-weight: 600 !important;
  font-size: 1.625rem !important;
  color: #414141 !important;
  margin: 0 0 0.25rem 0 !important;
  padding: 0 !important;
  line-height: 1.3 !important;
  display: block !important;
}

.ws-card__price * {
  font-weight: inherit !important;
  font-size: inherit !important;
  color: inherit !important;
}

/* Card Description */
.ws-card__desc {
  font-family: "mozaic-geo-variable", Montserrat, sans-serif !important;
  color: #414141 !important;
  font-size: 1.0625rem !important;
  line-height: 1.6 !important;
  margin: 0 !important;
  padding: 0 !important;
  display: block !important;
}

/* Actions / Button Container */
.ws-actions {
  display: flex !important;
  justify-content: center !important;
  margin: 2.5rem 0 0 0 !important;
  padding: 0 !important;
  position: relative !important;
  z-index: 100 !important;
  min-height: 60px !important;
  isolation: isolate !important;
}

/* ==============================================
   STEP 1 - RADIO BUTTON (Kit Selection)
   ============================================== */

/* Custom Radio Circle */
.ws-step-1 .ws-card__radio,
.ws-kit-flow--secondary .ws-step-2 .ws-card__radio {
  position: relative !important;
  display: block !important;
  width: 24px !important;
  height: 24px !important;
  min-width: 24px !important;
  min-height: 24px !important;
  border: 2px solid #9FA3BB !important;
  border-radius: 50% !important;
  margin: 0 !important;
  padding: 0 !important;
  background: #fff !important;
  transition: all 0.2s ease !important;
  flex-shrink: 0 !important;
  box-sizing: border-box !important;
  align-self: center !important;
}

/* Selected Card State */
.ws-step-1 .ws-card.is-selected,
.ws-kit-flow--secondary .ws-step-2 .ws-card.is-selected {
  border-width: 3px !important;
  border-color: #232936 !important;
  background: transparent !important;
}

.ws-step-1 .ws-card.is-selected .ws-card__radio,
.ws-kit-flow--secondary .ws-step-2 .ws-card.is-selected .ws-card__radio {
  background: #D52632 !important;
  border-color: #D52632 !important;
  border-width: 2px !important;
}

/* Next Button */
.ws-next {
  background: #AF2734 !important;
  background-color: #AF2734 !important;
  color: #fff !important;
  border: solid !important;
  border-width: 0px !important;
  border-color: transparent !important;
  border-radius: 30px !important;
  padding: 10px 50px !important;
  min-height: auto !important;
  min-width: 200px !important;
  height: auto !important;
  font-family: "mozaic-geo", "mozaic-geo-variable", Montserrat, sans-serif !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  transition: background-color 0.3s ease !important;
  opacity: 0.5 !important;
  cursor: not-allowed !important;
  display: inline-block !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  -webkit-appearance: none !important;
  -webkit-tap-highlight-color: transparent !important;
  touch-action: manipulation !important;
  user-select: none !important;
  -webkit-user-select: none !important;
  pointer-events: none !important;
  position: relative !important;
  overflow: visible !important;
}

.ws-next:hover {
  background: #232936 !important;
  background-color: #232936 !important;
}

.ws-next:disabled {
  opacity: 0.5 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

.ws-next.is-enabled {
  opacity: 1 !important;
  cursor: pointer !important;
  pointer-events: auto !important;
  position: relative !important;
  z-index: 9999 !important;
  isolation: isolate !important;
}

.ws-next.is-enabled::before {
  content: '' !important;
  position: absolute !important;
  top: -10px !important;
  left: -10px !important;
  right: -10px !important;
  bottom: -10px !important;
  z-index: 1 !important;
  cursor: pointer !important;
}

.ws-next.is-enabled:active {
  background: #232936 !important;
  background-color: #232936 !important;
  transform: scale(0.98) !important;
}

.ws-next.is-enabled:hover {
  background: #232936 !important;
  background-color: #232936 !important;
}

/* ==============================================
   STEP 2 - CHECKBOX (Product Selection)
   ============================================== */

/* CRITICAL: Hide all product groups by default, show only active one */
.ws-step-2 .ws-options {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
  position: absolute !important;
  pointer-events: none !important;
}

/* Show active product group (JavaScript adds inline style) */
.ws-step-2 .ws-options[style*="display: grid"],
.ws-step-2 .ws-options[style*="display:grid"] {
  display: grid !important;
  visibility: visible !important;
  opacity: 1 !important;
  height: auto !important;
  overflow: visible !important;
  position: relative !important;
  pointer-events: auto !important;
}

/* Back Button - Font Awesome Arrow */
.ws-back-button {
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  background: none !important;
  border: none !important;
  cursor: pointer !important;
  padding: 8px !important;
  display: flex !important;
  align-items: center !important;
  color: #D52632 !important;
  font-size: 1.5rem !important;
  transition: color 0.2s ease !important;
  z-index: 10 !important;
  -webkit-appearance: none !important;
  -webkit-tap-highlight-color: transparent !important;
  touch-action: manipulation !important;
}

.ws-back-button:hover {
  color: #232936 !important;
}

.ws-back-button i {
  display: block !important;
}

/* Custom Checkbox Square */
.ws-step-2 .ws-card__checkbox {
  position: relative !important;
  display: block !important;
  width: 24px !important; 
  height: 24px !important; 
  min-width: 24px !important;
  min-height: 24px !important;
  border: 2px solid #9FA3BB !important;
  border-radius: 4px !important;
  margin: 0 !important;
  padding: 0 !important;
  background: #fff !important;
  transition: all 0.2s ease !important;
  flex-shrink: 0 !important;
  box-sizing: border-box !important;
  align-self: center !important;
}

/* Checked State - Card */
.ws-step-2 .ws-card.is-checked { 
  border-width: 3px !important;
  border-color: #232936 !important;
  background: transparent !important;
}

/* Checked State - Checkbox becomes solid red */
.ws-step-2 .ws-card.is-checked .ws-card__checkbox { 
  background: #D52632 !important;
  border-color: #D52632 !important;
  border-width: 2px !important;
}

/* Card Header (Title + Price on same line) */
.ws-step-2 .ws-card__header {
  display: flex !important;
  justify-content: space-between !important;
  align-items: baseline !important;
  gap: 1rem !important;
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
}

.ws-step-2 .ws-card__title {
  flex: 0 1 auto !important;
}

.ws-step-2 .ws-card__price {
  font-weight: 700 !important;
  font-size: 1.625rem !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  margin: 0 !important;
}

/* Checkout Button */
.ws-checkout {
  background: #AF2734 !important;
  background-color: #AF2734 !important;
  color: #fff !important;
  border: solid !important;
  border-width: 0px !important;
  border-color: transparent !important;
  border-radius: 30px !important;
  padding: 10px 50px !important;
  min-height: auto !important;
  min-width: 200px !important;
  height: auto !important;
  font-family: "mozaic-geo", "mozaic-geo-variable", Montserrat, sans-serif !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  transition: background-color 0.3s ease !important;
  opacity: 0.5 !important;
  cursor: not-allowed !important;
  display: inline-block !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  -webkit-appearance: none !important;
  -webkit-tap-highlight-color: transparent !important;
  touch-action: manipulation !important;
  pointer-events: none !important;
}

.ws-checkout.is-enabled {
  opacity: 1 !important;
  cursor: pointer !important;
  pointer-events: auto !important;
}

.ws-checkout.is-enabled:hover {
  background: #232936 !important;
  background-color: #232936 !important;
}

.ws-checkout:disabled {
  opacity: 0.5 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

/* ==============================================
   RESPONSIVE - TABLET PORTRAIT
   ============================================== */

@media (max-width: 1024px) {
  .ws-header h2.ws-title {
    font-size: 2rem !important;
  }

  .ws-card__title {
    font-size: 1.5rem !important;
  }

  .ws-card__price {
    font-size: 1.5rem !important;
  }

  .ws-card__desc {
    font-size: 1rem !important;
  }

  /* Step 1 specific */
  .ws-step-1 .ws-card__title {
    font-size: 1.5rem !important;
  }

  .ws-step-1 .ws-card__price {
    font-size: 1.5rem !important;
  }

  .ws-step-1 .ws-card__desc {
    font-size: 1rem !important;
  }

  /* Step 2 specific */
  .ws-step-2 .ws-card__title {
    font-size: 1.5rem !important;
  }

  .ws-step-2 .ws-card__price {
    font-size: 1.5rem !important;
  }

  .ws-step-2 .ws-card__desc {
    font-size: 1rem !important;
  }

  .ws-step-2 .ws-card__header {
    gap: 0.75rem !important;
  }

  /* Badge */
  .ws-card__badge {
    font-size: 1rem !important;
    line-height: 1.2rem !important;
  }

  /* Buttons */
  .ws-next,
  .ws-checkout {
    font-size: 0.9375rem !important;
  }

  .ws-back-button {
    font-size: 1.375rem !important;
  }
}

/* ==============================================
   RESPONSIVE - MOBILE
   ============================================== */

@media (max-width: 480px) {
  .ws-kit-flow {
    padding: 0 1rem !important;
  }

  .ws-header h2.ws-title {
    font-size: 1.5rem !important;
  }

  .ws-back-button {
    font-size: 1.125rem !important;
    padding: 6px !important;
  }

  .ws-progress-segment {
    width: 50px !important;
  }

  .ws-progress-label {
    font-size: 0.75rem !important;
  }

  .ws-card {
    padding: 1rem !important;
    grid-template-columns: 28px 1fr !important;
    gap: 0.875rem !important;
  }

  .ws-card__radio,
  .ws-card__checkbox {
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    min-height: 20px !important;
  }

  .ws-card__title {
    font-size: 1.125rem !important;
  }

  .ws-card__price {
    font-size: 1.125rem !important;
  }

  .ws-card__desc {
    font-size: 0.875rem !important;
  }

  /* Step 1 specific */
  .ws-step-1 .ws-card__title {
    font-size: 1.125rem !important;
  }

  .ws-step-1 .ws-card__price {
    font-size: 1.125rem !important;
  }

  .ws-step-1 .ws-card__desc {
    font-size: 0.875rem !important;
  }

  /* Step 2 specific */
  .ws-step-2 .ws-card__title {
    font-size: 1.125rem !important;
  }

  .ws-step-2 .ws-card__price {
    font-size: 1.125rem !important;
  }

  .ws-step-2 .ws-card__desc {
    font-size: 0.875rem !important;
  }

  .ws-step-2 .ws-card__header {
    gap: 0.5rem !important;
  }

  /* Badge */
  .ws-card__badge {
    font-size: 0.75rem !important;
    line-height: 1rem !important;
    margin: 0 0 0.5rem 0 !important;
  }

  /* Buttons */
  .ws-next,
  .ws-checkout {
    padding: 12px 32px !important;
    font-size: 0.875rem !important;
    min-width: 160px !important;
  }

  .ws-actions {
    margin: 2rem 0 0 0 !important;
  }

  #kit-image {
    margin: 0 auto 2rem !important;
  }
}

/* ==============================================
   KIT IMAGE (if using Elementor image)
   ============================================== */

#kit-image {
  transition: opacity 0.3s ease !important;
  width: 100% !important;
  max-width: 800px !important;
  height: auto !important;
  object-fit: contain !important;
  display: block !important;
  margin: 0 auto 2.5rem !important;
}

@media (max-width: 1024px) {
  #kit-image {
    max-width: 600px !important;
  }
}

@media (max-width: 480px) {
  #kit-image {
    max-width: 100% !important;
    max-height: 250px !important;
  }
}

/* ==============================================
   SECONDARY FLOW - BADGE STYLES
   ============================================== */

.ws-card__badge {
  font-family: "mozaic-geo-variable", Montserrat, sans-serif !important;
  font-size: 1.2rem !important;
  font-weight: 500 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08rem !important;
  padding: 0 !important;
  display: inline-block !important;
  margin: 0 0 0.75rem 0 !important;
  line-height: 1.5rem !important;
  color: #D52632 !important;
}

.ws-card__badge--tpms-bundle {
  background-color: transparent !important;
  color: #D52632 !important;
}

.ws-card__badge--wheel-sensei {
  background-color: transparent !important;
  color: #D52632 !important;
}

/* Card Header - For secondary flow title/price layout */
.ws-card__header {
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Secondary flow: Adjust card header to display title and price in a row */
.ws-kit-flow--secondary .ws-card__header {
  display: flex !important;
  justify-content: space-between !important;
  align-items: baseline !important;
  gap: 1rem !important;
  margin: 0 0 0.5rem 0 !important;
  padding: 0 !important;
}

.ws-kit-flow--secondary .ws-card__header .ws-card__title {
  display: inline-block !important;
  margin: 0 !important;
  padding: 0 !important;
  flex: 1 !important;
}

.ws-kit-flow--secondary .ws-card__header .ws-card__price {
  display: inline-block !important;
  margin: 0 !important;
  padding: 0 !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
}


/* Responsive adjustments for secondary flow */
@media (max-width: 1024px) {
  .ws-kit-flow--secondary .ws-card__header {
    gap: 0.75rem !important;
  }

  /* iPad-specific button fixes */
  .ws-next,
  .ws-checkout {
    min-height: 50px !important;
  }

  .ws-next.is-enabled,
  .ws-checkout.is-enabled {
    position: relative !important;
    z-index: 9999 !important;
    isolation: isolate !important;
  }
}

@media (max-width: 480px) {
  .ws-kit-flow--secondary .ws-card__header {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0.25rem !important;
  }

  .ws-kit-flow--secondary .ws-card__header .ws-card__price {
    white-space: normal !important;
  }
}