/* Challenge Details Page - Unique CSS with cd- prefix - All properties with !important */
body{
  font-family: 'Poppins', sans-serif !important;
   background:white !important;
  color:#1f2937 !important;
}

/* ================= HERO SECTION ================= */

.cd-hero-section{
  position:relative !important;
  background:
    var(--cd-hero-overlay, linear-gradient(105deg, rgba(7,10,16,0.66) 0%, rgba(15,23,42,0.36) 45%, rgba(15,23,42,0.15) 100%)),
    var(--cd-hero-image, none),
    radial-gradient(1200px 500px at 12% -8%, color-mix(in srgb, var(--cd-primary, #007bff) 38%, transparent), transparent 62%),
    radial-gradient(900px 420px at 92% 0%, color-mix(in srgb, var(--cd-secondary, #040404) 36%, white), transparent 64%),
    linear-gradient(120deg, #090b12 0%, color-mix(in srgb, var(--cd-secondary, #040404) 78%, #101828) 46%, color-mix(in srgb, var(--cd-primary, #007bff) 72%, #1f2937) 100%) !important;
  background-size: cover, cover, auto, auto, auto !important;
  background-position: center center, center center, center, center, center !important;
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat !important;
  padding:50px 0 !important;
  overflow:hidden !important;
  color: white !important;
}

.cd-hero-section::after{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  background:url('noise.png') !important;
  opacity:.12 !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

.cd-hero-section::before{
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background: transparent !important;
  z-index: 0 !important;
  pointer-events: none !important;
}

.cd-hero-section .cd-container{
  position: relative !important;
  z-index: 2 !important;
}

.cd-hero-title{
  font-size: clamp(2.4rem, 6vw, 4.5rem) !important;
  font-weight: 600 !important;
  margin-bottom: 24px !important;
  letter-spacing: -1px !important;
  line-height: 1.1 !important;
  color: white !important;
}

.cd-hero-subtitle{
  font-size: 1.1rem !important;
  opacity: 0.95 !important;
  margin-bottom: 20px !important;
  max-width: 570px !important;
  color: white !important;
}

.cd-btn-group{
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 16px !important;
  margin-top: 40px !important;
  position: relative !important;
  z-index: 10 !important;
}
.cd-col-md-6 p {
  line-height: 30px !important;
  font-size: 17px !important;
  letter-spacing: 1.2px !important;
  font-family: 'Poppins', sans-serif !important;
  color: black !important;
  font-weight: 400 !important;
}
.cd-btn{
  border: none !important;
  border-radius: 16px !important;
  padding: 18px 40px !important;
  font-weight: 600 !important;
  font-size: 1.1rem !important;
  color: white !important;
  transition: all 0.3s cubic-bezier(0.4,0,0.2,1) !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  cursor: pointer !important;
  position: relative !important;
  z-index: 10 !important;
  pointer-events: auto !important;
}

/* Primary CTA: solid brand color (use gradient on titles / single CTAs like pricing — not beside a second button) */
.cd-btn-primary{
  background: var(--cd-primary, #007bff) !important;
  box-shadow: 0 10px 28px color-mix(in srgb, var(--cd-primary, #007bff) 28%, transparent) !important;
}

.cd-btn-primary:hover{
  transform: translateY(-4px) !important;
  background: color-mix(in srgb, var(--cd-primary, #007bff) 88%, black) !important;
  box-shadow: 0 16px 36px color-mix(in srgb, var(--cd-primary, #007bff) 32%, transparent) !important;
  color: white !important;
}

.cd-btn-secondary{
  background: transparent !important;
  border: 2px solid rgba(255,255,255,0.9) !important;
  color: white !important;
  padding: 16px 36px !important;
}

.cd-btn-secondary:hover{
  background: rgba(255,255,255,0.95) !important;
  color: var(--cd-primary, #007bff) !important;
  transform: translateY(-3px) !important;
}

/* Hero: paired actions — primary solid + secondary solid */
.cd-hero-section .cd-btn-secondary{
  background: var(--cd-secondary, #040404) !important;
  border: 2px solid rgba(255,255,255,0.35) !important;
  color: #fff !important;
}

.cd-hero-section .cd-btn-secondary:hover{
  background: color-mix(in srgb, var(--cd-secondary, #040404) 82%, white) !important;
  border-color: rgba(255,255,255,0.55) !important;
  color: #fff !important;
}

/* Hero: third CTA when 3 actions — white fill so green/orange are not repeated on a third “brand” surface */
.cd-hero-section .cd-btn-white-solid{
  background: #fff !important;
  color: #111827 !important;
  border: 2px solid rgba(255, 255, 255, 0.95) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18) !important;
}

.cd-hero-section .cd-btn-white-solid:hover{
  background: #f8fafc !important;
  color: #0f172a !important;
  transform: translateY(-3px) !important;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.22) !important;
}

/* Hero: fourth CTA when 4+ actions — ghost strokes only (primary / secondary), no extra fill hue */
.cd-hero-section .cd-btn-ghost-primary{
  background: transparent !important;
  border: 2px solid var(--cd-primary, #007bff) !important;
  color: #fff !important;
  box-shadow: none !important;
}

.cd-hero-section .cd-btn-ghost-primary:hover{
  background: color-mix(in srgb, var(--cd-primary, #007bff) 28%, transparent) !important;
  color: #fff !important;
  transform: translateY(-3px) !important;
}

.cd-hero-section .cd-btn-ghost-secondary{
  background: transparent !important;
  border: 2px solid var(--cd-secondary, #040404) !important;
  color: #fff !important;
  box-shadow: none !important;
}

.cd-hero-section .cd-btn-ghost-secondary:hover{
  background: color-mix(in srgb, var(--cd-secondary, #040404) 35%, transparent) !important;
  color: #fff !important;
  transform: translateY(-3px) !important;
}

.cd-info-box{
  background: rgba(255,255,255,0.15) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border-radius: 16px !important;
  border: 1px solid rgba(255,255,255,0.25) !important;
  padding: 30px !important;
  height: fit-content !important;
  box-shadow: 0 25px 60px rgba(0,0,0,0.2) !important;
}

.cd-info-item{
  display: flex !important;
  align-items: center !important;
  margin-bottom: 28px !important;
  padding: 20px !important;
  background: rgba(255,255,255,0.1) !important;
  border-radius: 12px !important;
  transition: all 0.3s ease !important;
  border: 1px solid rgba(255,255,255,0.15) !important;
}

.cd-info-item:hover{
  background: rgba(255,255,255,0.2) !important;
  transform: translateY(-4px) !important;
}

.cd-info-item:last-child{
  margin-bottom: 0 !important;
}

.cd-info-icon{
  width: 60px !important;
  height: 60px !important;
  background: var(--cd-primary, #007bff) !important;
  border-radius: 14px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 1.4rem !important;
  color: white !important;
  margin-right: 20px !important;
  flex-shrink: 0 !important;
  box-shadow: 0 6px 20px color-mix(in srgb, var(--cd-primary, #007bff) 35%, transparent) !important;
}

.cd-info-content h6{
  font-weight: 600 !important;
  margin-bottom: 4px !important;
  font-size: 0.95rem !important;
  opacity: 0.9 !important;
  color: white !important;
}

.cd-info-number{
  font-size: 1.4rem !important;
  font-weight: 600 !important;
  color: white !important;
  line-height: 1.2 !important;
}

/* ================= CONTENT SECTIONS ================= */

.cd-content-section{
  padding: 32px 0 !important;
  background: #fff !important;
}

.cd-content-section:nth-child(even){
  background: #F8F9FA !important;
}

.cd-section-light{
  background: #F8F9FA !important;
}

/* Section headings: gradient pill (primary → secondary); includes .cd-text-center */
.cd-section-title{
  font-size: 20px !important;
  font-weight: 500 !important;
  letter-spacing: -.5px !important;
  position: relative !important;
  background: linear-gradient(90deg, var(--cd-primary, #007bff), var(--cd-secondary, #040404)) !important;
  padding: 10px 20px !important;
  left: auto !important;
  width: fit-content !important;
  max-width: calc(100% - 24px) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  color: white !important;
  text-align: center !important;
  border-radius: 20px !important;
  margin-bottom: 1.25rem !important;
}

.cd-section-title.cd-text-center{
  display: block !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Centered intro under gradient titles — subtle gradient accent bar */
.cd-section-lead.cd-text-center{
  color: #64748b !important;
  max-width: 640px !important;
  position: relative !important;
  padding-bottom: 14px !important;
}

.cd-section-lead.cd-text-center::after{
  content: '' !important;
  display: block !important;
  width: min(220px, 55%) !important;
  height: 3px !important;
  margin: 12px auto 0 !important;
  border-radius: 999px !important;
  background: linear-gradient(90deg, var(--cd-primary, #007bff), var(--cd-secondary, #040404)) !important;
}


/* ================= LEVEL/CATEGORY CARDS ================= */

.cd-level-card{
  background: #fff !important;
    border-radius: 20px !important;
    padding: 26px !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, .08) !important;
    border-top: 4px solid var(--cd-primary, #007bff) !important;
    transition: .3s !important;
    text-align: center !important;
}

.cd-level-card:hover{
  transform: translateY(-8px) !important;
  box-shadow: 0 12px 40px rgba(0,0,0,0.15) !important;
  border-color: var(--cd-primary, #007bff) !important;
}

.cd-level-icon{
  width: 96px !important;
  height: 96px !important;
  background: var(--cd-primary, #007bff) !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 auto 20px !important;
  font-size: 2rem !important;
  color: white !important;
}

.cd-level-card h4{
  font-size: 1.5rem !important;
  font-weight: 600 !important;
  color: #1A1A1A !important;
  margin-bottom: 10px !important;
}

.cd-level-distance{
  font-size: 1.8rem !important;
  font-weight: 700 !important;
  color: var(--cd-primary, #007bff) !important;
  margin-bottom: 10px !important;
}

.cd-level-description{
  color: #4A4A4A !important;
  font-size: 0.95rem !important;
  margin-bottom: 15px !important;
}

.cd-badge{
  display: inline-block !important;
  padding: 6px 12px !important;
  border-radius: 12px !important;
  font-size: 0.875rem !important;
  font-weight: 600 !important;
}

.cd-badge-primary{
  background: var(--cd-primary, #007bff) !important;
  color: white !important;
}

/* ================= RULES ================= */

.cd-rule-box{
  background: #fff !important;
  
  padding: 22px 24px !important;
  box-shadow: 0 8px 20px rgba(0,0,0,0.08) !important;
  border-left: 5px solid var(--cd-primary, #007bff) !important;
  font-weight: 500 !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}

.cd-rule-box i{
  color: var(--cd-primary, #007bff) !important;
  font-size: 1.2rem !important;
  flex-shrink: 0 !important;
}

.cd-rule-box h5{
  font-size: 1.5rem !important;
  font-weight: 600 !important;
  color: var(--cd-primary, #007bff) !important;
  margin-bottom: 20px !important;
  padding-bottom: 15px !important;
  border-bottom: 2px solid #F8F9FA !important;
}

.cd-rule-box h5 i{
  color: var(--cd-primary, #007bff) !important;
  margin-right: 8px !important;
}

.cd-rule-content{
  color: #1A1A1A !important;
  line-height: 1.8 !important;
  font-size: 1rem !important;
}

.cd-rule-content p,
.cd-rule-content dl,
.cd-rule-content ol,
.cd-rule-content ul{
  line-height: 30px !important;
  font-size: 17px !important;
  letter-spacing: 1.2px !important;
}

.cd-general-rules-list{
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
.cd-general-rules-item{
  display: flex !important;
  gap: 14px !important;
  align-items: flex-start !important;
  margin-bottom: 16px !important;
  padding: 14px 16px !important;
  background: #f8f9fa !important;
  border-radius: 12px !important;
  border: 1px solid #ececec !important;
}
.cd-general-rules-icon{
  flex-shrink: 0 !important;
  font-size: 1.25rem !important;
  color: var(--cd-primary, #007bff) !important;
  line-height: 1.4 !important;
  margin-top: 2px !important;
}
.cd-general-rules-text{
  flex: 1 !important;
  min-width: 0 !important;
}

.cd-rule-box--multiline{
  align-items: flex-start !important;
}

.cd-rule-box-text{
  flex: 1 !important;
  min-width: 0 !important;
  text-align: left !important;
  font-weight: 400 !important;
}
.cd-rule-box-text p
{
  margin-bottom: 05px !important;
}

.cd-rule-box-text p:last-child,
.cd-rule-box-text ul:last-child,
.cd-rule-box-text ol:last-child{
  margin-bottom: 0 !important;
}

.cd-section-lead{
  max-width: 640px !important;
  margin: -4px auto 18px !important;
  color: #64748b !important;
  font-size: 0.95rem !important;
  line-height: 1.55 !important;
}

/* ================= RESPONSIVE MOSAIC (2–6 tiles per row) ================= */

.cd-mosaic{
  --cd-mosaic-gap: 12px !important;
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: flex-start !important;
  align-items: stretch !important;
  align-content: flex-start !important;
  gap: var(--cd-mosaic-gap) !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

.cd-mosaic__item{
  box-sizing: border-box !important;
  flex: 1 1 calc((100% - 5 * var(--cd-mosaic-gap)) / 6) !important;
  min-width: 0 !important;
  max-width: none !important;
  display: flex !important;
  flex-direction: column !important;
}

.cd-mosaic__item > *{
  flex: 1 1 auto !important;
  width: 100% !important;
  min-height: 100% !important;
}

.cd-mosaic--dense .cd-mosaic__item{
  flex: 1 1 calc((100% - 5 * var(--cd-mosaic-gap)) / 6) !important;
}

@media (max-width: 399px){
  .cd-mosaic--max6 .cd-mosaic__item{
    flex: 1 1 100% !important;
    max-width: none !important;
  }
}

@media (min-width: 400px) and (max-width: 639px){
  .cd-mosaic--max6 .cd-mosaic__item{
    flex: 1 1 calc((100% - 1 * var(--cd-mosaic-gap)) / 2) !important;
  }
}

/* Rules & regulations / challenge rules: at most 2 columns on desktop */
.cd-mosaic--rules2col .cd-mosaic__item{
  flex: 1 1 calc((100% - var(--cd-mosaic-gap)) / 2) !important;
  min-width: 0 !important;
  max-width: none !important;
}

@media (max-width: 639px){
  .cd-mosaic--rules2col .cd-mosaic__item{
    flex: 1 1 100% !important;
  }
}

/* Centered rows; 1–3 tiles use calmer widths — 4+ keeps flexible grid */
.cd-mosaic.cd-mosaic--balanced{
  justify-content: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.cd-mosaic.cd-mosaic--balanced.cd-mosaic--max6[data-mosaic-count="1"]{
  max-width: 92% !important;
}
.cd-mosaic.cd-mosaic--balanced.cd-mosaic--max6[data-mosaic-count="1"] .cd-mosaic__item{
  flex: 0 1 min(76%, 620px) !important;
  max-width: min(76%, 620px) !important;
}

.cd-mosaic.cd-mosaic--balanced.cd-mosaic--max6[data-mosaic-count="2"]{
  max-width: 94% !important;
}
.cd-mosaic.cd-mosaic--balanced.cd-mosaic--max6[data-mosaic-count="2"] .cd-mosaic__item{
  flex: 0 1 calc((100% - var(--cd-mosaic-gap)) * 0.465) !important;
  max-width: calc((100% - var(--cd-mosaic-gap)) * 0.465) !important;
}

.cd-mosaic.cd-mosaic--balanced.cd-mosaic--max6[data-mosaic-count="3"]{
  max-width: 96% !important;
}
.cd-mosaic.cd-mosaic--balanced.cd-mosaic--max6[data-mosaic-count="3"] .cd-mosaic__item{
  flex: 0 1 calc((100% - 2 * var(--cd-mosaic-gap)) / 3) !important;
  max-width: 31.5% !important;
}

.cd-mosaic.cd-mosaic--balanced.cd-mosaic--rules2col[data-mosaic-count="1"]{
  max-width: 92% !important;
}
.cd-mosaic.cd-mosaic--balanced.cd-mosaic--rules2col[data-mosaic-count="1"] .cd-mosaic__item{
  flex: 0 1 min(84%, 680px) !important;
  max-width: min(84%, 680px) !important;
}

.cd-mosaic.cd-mosaic--balanced.cd-mosaic--rules2col[data-mosaic-count="2"]{
  max-width: 94% !important;
}
.cd-mosaic.cd-mosaic--balanced.cd-mosaic--rules2col[data-mosaic-count="2"] .cd-mosaic__item{
  flex: 0 1 calc((100% - var(--cd-mosaic-gap)) * 0.48) !important;
  max-width: calc((100% - var(--cd-mosaic-gap)) * 0.48) !important;
}

.cd-mosaic.cd-mosaic--balanced.cd-mosaic--rules2col[data-mosaic-count="4"] .cd-mosaic__item,
.cd-mosaic.cd-mosaic--balanced.cd-mosaic--rules2col:not([data-mosaic-count="1"]):not([data-mosaic-count="2"]) .cd-mosaic__item{
  flex: 1 1 calc((100% - var(--cd-mosaic-gap)) / 2) !important;
  max-width: none !important;
}

@media (max-width: 399px){
  .cd-mosaic.cd-mosaic--balanced .cd-mosaic__item{
    flex: 1 1 100% !important;
    max-width: 100% !important;
  }
}

.cd-level-cards-row[data-level-card-count="1"]{
  justify-content: center !important;
}
.cd-level-cards-row[data-level-card-count="1"] > [class*="cd-col-"]{
  flex: 0 1 min(78%, 560px) !important;
  max-width: min(78%, 560px) !important;
  min-width: 0 !important;
}
.cd-level-cards-row[data-level-card-count="2"] > [class*="cd-col-"]{
  flex: 0 1 calc(50% - 18px) !important;
  max-width: calc(50% - 18px) !important;
  min-width: 0 !important;
}
.cd-level-cards-row[data-level-card-count="3"] > [class*="cd-col-"]{
  flex: 0 1 calc(33.333% - 16px) !important;
  max-width: 31% !important;
  min-width: 0 !important;
}

.cd-steps-row.cd-steps-row--balanced{
  justify-content: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
  max-width: 96% !important;
}
.cd-steps-row.cd-steps-row--balanced[data-step-count="1"] .cd-step-item{
  flex: 0 1 min(80%, 460px) !important;
  max-width: min(80%, 460px) !important;
}
.cd-steps-row.cd-steps-row--balanced[data-step-count="2"] .cd-step-item{
  flex: 0 1 calc(50% - 14px) !important;
  max-width: calc(50% - 14px) !important;
}
.cd-steps-row.cd-steps-row--balanced[data-step-count="3"] .cd-step-item{
  flex: 0 1 calc(33.333% - 12px) !important;
  max-width: 31% !important;
}

.cd-detail-rich-panel{
  background: #fff !important;
  border-radius: 16px !important;
  padding: 28px 32px !important;
  box-shadow: 0 8px 28px rgba(0,0,0,0.06) !important;
  border: 1px solid rgba(0,0,0,0.06) !important;
}

.cd-mosaic--dense .cd-rule-box{
  padding: 11px 13px !important;
  gap: 9px !important;
  font-size: 0.875rem !important;
}

.cd-mosaic--dense .cd-rule-box i{
  font-size: 1.05rem !important;
}

.cd-mosaic--dense .cd-rule-box-text,
.cd-mosaic--dense .cd-rule-box-text p,
.cd-mosaic--dense .cd-rule-box-text li{
  font-size: 0.875rem !important;
  line-height: 1.45 !important;
  letter-spacing: 0 !important;
}

.cd-mosaic--max6:not(.cd-mosaic--dense) .cd-perk-card-inner{
  padding: 16px 12px 20px !important;
  border-radius: 14px !important;
}

.cd-mosaic--max6:not(.cd-mosaic--dense) .cd-perk-card-icon-wrap{
  width: 52px !important;
  height: 52px !important;
  margin-bottom: 10px !important;
}

.cd-mosaic--max6:not(.cd-mosaic--dense) .cd-perk-card-icon-wrap i{
  font-size: 1.35rem !important;
}

.cd-mosaic--max6:not(.cd-mosaic--dense) .cd-perk-card-media{
  max-height: 96px !important;
  margin-bottom: 10px !important;
}

.cd-mosaic--max6:not(.cd-mosaic--dense) .cd-perk-card-media img{
  max-height: 96px !important;
}

.cd-mosaic--max6:not(.cd-mosaic--dense) .cd-perk-card-title{
  font-size: 0.98rem !important;
  margin-bottom: 6px !important;
}

.cd-mosaic--max6:not(.cd-mosaic--dense) .cd-perk-card-desc{
  font-size: 0.82rem !important;
  line-height: 1.5 !important;
}

.cd-mosaic--max6 .cd-pricing-card-inner{
  padding: 16px 12px 18px !important;
  border-radius: 14px !important;
}

.cd-mosaic--max6 .cd-pricing-card--featured .cd-pricing-card-inner{
  padding-top: 34px !important;
}

.cd-mosaic--max6 .cd-pricing-card-name{
  font-size: 1.12rem !important;
  font-weight: 800 !important;
  margin: 4px 0 8px 0 !important;
}

.cd-mosaic--max6 .cd-pricing-card-price{
  font-size: 1.5rem !important;
  font-weight: 900 !important;
  color: #319F1F !important;
  margin-bottom: 6px !important;
}

.cd-mosaic--max6 .cd-pricing-card-subtitle{
  font-size: 0.82rem !important;
  margin-bottom: 10px !important;
}

.cd-mosaic--max6 .cd-pricing-card-desc{
  font-size: 0.82rem !important;
  padding-top: 10px !important;
}

.cd-mosaic--max6 .cd-pricing-card-badge{
  font-size: 0.65rem !important;
  padding: 5px 10px !important;
}

.cd-mosaic--max6 .cd-reward-box{
  padding: 16px 12px 18px !important;
  border-radius: 14px !important;
}

.cd-mosaic--max6 .cd-reward-box h5{
  font-size: 1rem !important;
  margin-bottom: 6px !important;
}

.cd-mosaic--max6 .cd-reward-box p{
  font-size: 0.85rem !important;
  line-height: 1.5 !important;
}

.cd-mosaic--max6 .cd-reward-box i{
  font-size: 26px !important;
  margin-bottom: 10px !important;
}

.cd-mosaic--max6 .cd-reward-box--highlight{
  padding-top: 22px !important;
}

.cd-reward-box--highlight{
  position: relative !important;
  overflow: hidden !important;
  border-top: none !important;
  padding-top: 38px !important;
}

.cd-reward-box--highlight::before{
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 4px !important;
  background: var(--cd-primary, #007bff) !important;
  border-radius: 22px 22px 0 0 !important;
}

.cd-reward-box-icon{
  display: block !important;
}

.cd-reward-box-icon i{
  display: inline-block !important;
}

.cd-section-perks{
  background: #f8fafc !important;
}

.cd-perk-card{
  height: 100% !important;
  text-align: center !important;
}

.cd-perk-card-inner{
  background: #fff !important;
  border-radius: 20px !important;
  padding: 28px 24px 32px !important;
  height: 100% !important;
  box-shadow: 0 12px 32px rgba(0,0,0,0.1) !important;
  border: 1px solid color-mix(in srgb, var(--cd-primary, #007bff) 12%, transparent) !important;
  border-top: 4px solid var(--cd-primary, #007bff) !important;
  transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}

.cd-perk-card-inner:hover{
  transform: translateY(-6px) !important;
  box-shadow: 0 20px 44px rgba(0,0,0,0.12) !important;
}

.cd-perk-card-media{
  margin: 0 auto 16px !important;
  max-height: 140px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.cd-perk-card-media img{
  max-height: 140px !important;
  max-width: 100% !important;
  object-fit: contain !important;
  border-radius: 12px !important;
}

.cd-perk-card-icon-wrap{
  width: 72px !important;
  height: 72px !important;
  margin: 0 auto 16px !important;
  border-radius: 50% !important;
  background: color-mix(in srgb, var(--cd-primary, #007bff) 11%, #ffffff) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.cd-perk-card-icon-wrap i{
  font-size: 2rem !important;
  color: var(--cd-primary, #007bff) !important;
  margin: 0 !important;
  display: block !important;
}

.cd-perk-card-title{
  font-size: 1.25rem !important;
  font-weight: 700 !important;
  color: #1A1A1A !important;
  margin: 0 0 10px 0 !important;
  line-height: 1.35 !important;
}

.cd-perk-card-desc{
  color: #4A4A4A !important;
  font-size: 0.95rem !important;
  line-height: 1.65 !important;
  margin: 0 !important;
}

.cd-pricing-card{
  position: relative !important;
  height: 100% !important;
}

.cd-pricing-card-inner{
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%) !important;
  border-radius: 20px !important;
  padding: 32px 28px !important;
  height: 100% !important;
  border: 2px solid #dbe5ef !important;
  box-shadow: 0 12px 34px rgba(2, 6, 23, 0.10) !important;
  transition: border-color 0.25s ease, box-shadow 0.25s ease !important;
  display: flex !important;
  flex-direction: column !important;
  text-align: center !important;
  position: relative !important;
  overflow: hidden !important;
}

.cd-pricing-card--featured .cd-pricing-card-inner{
  border-color: var(--cd-primary, var(--user-primary, #007bff)) !important;
  box-shadow: 0 16px 40px color-mix(in srgb, var(--cd-primary, #007bff) 15%, transparent) !important;
  padding-top: 44px !important;
}

.cd-pricing-card-badge{
  position: absolute !important;
  top: -12px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  background: var(--cd-primary, #007bff) !important;
  color: #fff !important;
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  padding: 6px 14px !important;
  border-radius: 999px !important;
  z-index: 2 !important;
  white-space: nowrap !important;
}

.cd-pricing-card-name{
  font-size: 1.55rem !important;
  font-weight: 800 !important;
  color: #0f172a !important;
  margin: 8px 0 12px 0 !important;
  letter-spacing: 0.01em !important;
}

.cd-pricing-card-price{
  font-size: 2.05rem !important;
  font-weight: 900 !important;
  color: #319F1F !important;
  line-height: 1.2 !important;
  margin-bottom: 8px !important;
  text-shadow: 0 8px 18px rgba(15, 157, 143, 0.24) !important;
}

/* Explicit old/new price coloring */
.cd-pricing-card-price .cd-pricing-card-price-original{
  color: #a8b2bf !important;
  font-weight: 700 !important;
  font-size: 1.05rem !important;
}

.cd-pricing-card-price span:not(.cd-pricing-card-price-original){
  color: #0b8f83 !important;
  font-weight: 900 !important;
  font-size: 2.1rem !important;
}

.cd-pricing-card-price span{
  color: #319F1F !important;
  font-weight: 900 !important;
}

.cd-pricing-card-price-original + span{
  color: #319F1F !important;
  font-size: 2.1rem !important;
}

.cd-pricing-card-inner::before{
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 6px !important;
  border-radius: 18px 18px 0 0 !important;
  background: linear-gradient(90deg, var(--cd-primary, #007bff), #319F1F) !important;
}

.cd-pricing-card-price-original{
  display: inline-block !important;
  margin-right: 8px !important;
  color: #64748b !important;
  text-decoration: line-through !important;
  font-weight: 600 !important;
  font-size: 0.95rem !important;
}

.cd-booking-plan-price-original{
  display: inline-block !important;
  margin-right: 8px !important;
  color: #64748b !important;
  text-decoration: line-through !important;
  font-weight: 500 !important;
  font-size: 0.9rem !important;
}

.cd-pricing-card-subtitle{
  font-size: 0.95rem !important;
  color: #64748b !important;
  margin: 0 0 16px 0 !important;
}

.cd-pricing-card-desc{
  text-align: left !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  padding-top: 12px !important;
  border-top: 1px solid #f1f5f9 !important;
  font-size: 0.95rem !important;
  color: #334155 !important;
}

.cd-pricing-card-footer{
  margin-top: auto !important;
  padding-top: 16px !important;
  width: 100% !important;
}

.cd-pricing-card-cta{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  padding: 12px 16px !important;
  border-radius: 12px !important;
  font-size: 0.9rem !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  background: linear-gradient(135deg, var(--cd-primary, #007bff), var(--cd-secondary, #040404)) !important;
  color: #fff !important;
  border: none !important;
  cursor: pointer !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease !important;
  box-shadow: 0 6px 18px color-mix(in srgb, var(--cd-primary, #007bff) 28%, transparent) !important;
}

.cd-pricing-card-cta:hover{
  color: #fff !important;
  filter: brightness(1.07) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 10px 24px color-mix(in srgb, var(--cd-primary, #007bff) 35%, transparent) !important;
}

.cd-pricing-card-cta--btn{
  font-family: inherit !important;
}

.cd-mosaic--max6 .cd-pricing-card-footer{
  padding-top: 12px !important;
}

.cd-mosaic--max6 .cd-pricing-card-cta{
  padding: 10px 12px !important;
  font-size: 0.82rem !important;
  border-radius: 10px !important;
}

.cd-faq-accordion{
  max-width: min(920px, 100%) !important;
  margin: 0 auto !important;
}

.cd-faq-item{
  border: 1px solid #e8e8e8 !important;
  border-radius: 14px !important;
  background: #fff !important;
  margin-bottom: 12px !important;
  overflow: hidden !important;
  box-shadow: 0 4px 14px rgba(0,0,0,0.04) !important;
  transition: box-shadow 0.2s ease !important;
}

.cd-faq-item:hover{
  box-shadow: 0 8px 22px rgba(0,0,0,0.07) !important;
}

.cd-faq-item[open]{
  border-color: color-mix(in srgb, var(--cd-primary, #007bff) 35%, transparent) !important;
  box-shadow: 0 8px 24px color-mix(in srgb, var(--cd-primary, #007bff) 8%, transparent) !important;
}

.cd-faq-summary{
  cursor: pointer !important;
  list-style: none !important;
  padding: 18px 22px !important;
  font-weight: 600 !important;
  font-size: 1.05rem !important;
  color: #1A1A1A !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  user-select: none !important;
}

.cd-faq-summary::-webkit-details-marker{
  display: none !important;
}

.cd-faq-summary::after{
  content: '' !important;
  width: 10px !important;
  height: 10px !important;
  border-right: 2px solid var(--cd-primary, #007bff) !important;
  border-bottom: 2px solid var(--cd-primary, #007bff) !important;
  transform: rotate(45deg) !important;
  flex-shrink: 0 !important;
  margin-top: -4px !important;
  transition: transform 0.25s ease !important;
}

.cd-faq-item[open] .cd-faq-summary::after{
  transform: rotate(-135deg) !important;
  margin-top: 4px !important;
}

.cd-faq-summary-text{
  flex: 1 !important;
  text-align: left !important;
  line-height: 1.45 !important;
}

.cd-faq-panel{
  padding: 0 22px 20px 22px !important;
  color: #475569 !important;
  font-size: 0.98rem !important;
  border-top: 1px solid #f1f5f9 !important;
  margin-top: 0 !important;
  padding-top: 16px !important;
}

.cd-faq-doc-banner{
  max-width: 720px !important;
  margin: 0 auto !important;
  padding: 22px 26px !important;
  border-radius: 16px !important;
  background: #f0f9ff !important;
  border: 1px solid #bae6fd !important;
  color: #0c4a6e !important;
}

.cd-faq-doc-banner-title{
  font-weight: 700 !important;
  font-size: 1.05rem !important;
  margin-bottom: 8px !important;
  color: #075985 !important;
}

.cd-faq-doc-banner-body{
  font-size: 0.95rem !important;
  line-height: 1.6 !important;
  margin-bottom: 14px !important;
  color: #0c4a6e !important;
}

.cd-faq-doc-banner-link{
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-weight: 600 !important;
  color: var(--cd-primary, var(--user-primary, #007bff)) !important;
  text-decoration: none !important;
  font-size: 0.95rem !important;
}

.cd-faq-doc-banner-link:hover{
  text-decoration: underline !important;
}

/* ================= CONCEPT IMAGE ================= */

.cd-concept-img{
  border-radius: 16px !important;
  box-shadow: 0 8px 30px rgba(0,0,0,0.15) !important;
  max-width: 100% !important;
  height: auto !important;
}

.cd-logo-img{
  width: 160px !important;
  height: auto !important;
  margin-bottom: 32px !important;
  filter: drop-shadow(0 6px 20px rgba(0,0,0,0.4)) !important;
}

/* ================= FOOTER CTA ================= */

.cd-footer-cta{
  background: linear-gradient(135deg, var(--cd-primary, #007bff) 0%, var(--cd-secondary, #040404) 55%, #0a0a0a 100%) !important;
  color: white !important;
  padding: 80px 0 !important;
  text-align: center !important;
}

.cd-footer-cta h2{
  font-size: 2.5rem !important;
  font-weight: 600 !important;
  margin-bottom: 15px !important;
  color: white !important;
}

.cd-footer-cta p{
  font-size: 1.2rem !important;
  opacity: 0.9 !important;
  margin-bottom: 30px !important;
  color: white !important;
}

.cd-cta-buttons{
  margin-top: 20px !important;
  display: flex !important;
  gap: 16px !important;
  justify-content: center !important;
  flex-wrap: wrap !important;
}

/* Footer CTA row: two buttons = solid primary + solid secondary (no gradient on buttons) */
.cd-btn-cta{
  background: var(--cd-primary, #007bff) !important;
  color: #fff !important;
  padding: 18px 40px !important;
  font-weight: 600 !important;
  font-size: 1.1rem !important;
  border-radius: 16px !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.3s ease !important;
  border: 2px solid transparent !important;
}

.cd-btn-cta:hover{
  background: color-mix(in srgb, var(--cd-primary, #007bff) 88%, black) !important;
  color: #fff !important;
  box-shadow: 0 10px 28px rgba(0,0,0,0.25) !important;
  transform: translateY(-3px) !important;
}

.cd-btn-cta-outline{
  background: var(--cd-secondary, #040404) !important;
  border: 2px solid rgba(255,255,255,0.45) !important;
  color: #fff !important;
  padding: 16px 36px !important;
  border-radius: 16px !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.3s ease !important;
}

.cd-btn-cta-outline:hover{
  background: color-mix(in srgb, var(--cd-secondary, #040404) 88%, white) !important;
  border-color: rgba(255,255,255,0.65) !important;
  color: #fff !important;
  transform: translateY(-3px) !important;
}

/* Footer CTA: 3 buttons — white tile so primary + secondary are not repeated on a third filled chip */
.cd-btn-cta-white{
  background: #fff !important;
  color: #111827 !important;
  padding: 18px 40px !important;
  font-weight: 600 !important;
  font-size: 1.1rem !important;
  border-radius: 16px !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.3s ease !important;
  border: 2px solid rgba(255, 255, 255, 0.95) !important;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.12) !important;
}

.cd-btn-cta-white:hover{
  background: #f8fafc !important;
  color: #0f172a !important;
  transform: translateY(-3px) !important;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.16) !important;
}

/* Footer CTA: 4+ buttons — only primary/secondary hues (outlined), no white */
.cd-btn-cta-ghost-primary{
  background: transparent !important;
  border: 2px solid var(--cd-primary, #007bff) !important;
  color: #fff !important;
  padding: 16px 36px !important;
  font-weight: 600 !important;
  font-size: 1.1rem !important;
  border-radius: 16px !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.3s ease !important;
}

.cd-btn-cta-ghost-primary:hover{
  background: color-mix(in srgb, var(--cd-primary, #007bff) 26%, transparent) !important;
  color: #fff !important;
  transform: translateY(-3px) !important;
}

.cd-btn-cta-ghost-secondary{
  background: transparent !important;
  border: 2px solid var(--cd-secondary, #040404) !important;
  color: #fff !important;
  padding: 16px 36px !important;
  font-weight: 600 !important;
  font-size: 1.1rem !important;
  border-radius: 16px !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.3s ease !important;
}

.cd-btn-cta-ghost-secondary:hover{
  background: color-mix(in srgb, var(--cd-secondary, #040404) 32%, transparent) !important;
  color: #fff !important;
  transform: translateY(-3px) !important;
}

/* ================= FADE IN ANIMATION ================= */

.cd-fade-in-up{
  opacity: 0 !important;
  transform: translateY(50px) !important;
  transition: all 0.8s ease !important;
}

.cd-fade-in-up.visible{
  opacity: 1 !important;
  transform: translateY(0) !important;
}

/* ================= GRID SYSTEM ================= */

.cd-page-wrapper {
  min-height: 100vh !important;
  --cd-primary: #007bff;
  --cd-secondary: #040404;
}

/* Level / category strip: few cards expand to full row width */
.cd-level-cards-row{
  margin: 0 -15px !important;
}
.cd-level-cards-row > [class*="cd-col-"]{
  flex: 1 1 calc(25% - 30px) !important;
  max-width: none !important;
  min-width: min(100%, 220px) !important;
}
@media (max-width: 992px){
  .cd-level-cards-row:not([data-level-card-count="1"]) > [class*="cd-col-"]{
    flex: 0 0 50% !important;
    max-width: 50% !important;
    min-width: 0 !important;
  }
}
@media (max-width: 768px){
  .cd-level-cards-row > [class*="cd-col-"]{
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }
}

.cd-container{
  width: 100% !important;
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 0 20px !important;
}

.cd-row{
  display: flex !important;
  flex-wrap: wrap !important;
  margin: 0 -15px !important;
}

.cd-align-center{
  align-items: center !important;
}

.cd-col-lg-7{
  flex: 0 0 58.333333% !important;
  max-width: 58.333333% !important;
  padding: 0 15px !important;
}
.cd-col-lg-8{
  flex: 0 0 60.333333% !important;
  max-width: 70.333333% !important;
  padding: 0 15px !important;
}

.cd-col-lg-5{
  flex: 0 0 41.666667% !important;
  max-width: 41.666667% !important;
  padding: 0 15px !important;
}

.cd-col-md-6{
  flex: 0 0 50% !important;
  max-width: 50% !important;
  padding: 0 15px !important;
}

.cd-col-md-4{
  flex: 0 0 33.333333% !important;
  max-width: 33.333333% !important;
  padding: 0 15px !important;
}

.cd-col-md-12{
  flex: 0 0 100% !important;
  max-width: 100% !important;
  padding: 0 15px !important;
}

.cd-col-lg-3{
  flex: 0 0 25% !important;
  max-width: 25% !important;
  padding: 0 15px !important;
}


.mandatory-rides-description,.stages-subtitle
{
  font-size: 16px !important;
color: var(--user-text-light) !important;
margin-bottom: 10px !important;
}
.cd-text-end{
  text-align: right !important;
}

.cd-text-center{
  text-align: center !important;
}

.cd-gap-4{
  gap: 1.5rem !important;
}

.mt-4{
  margin-top: 1.5rem !important;
}

/* ================= MANDATORY LONG RIDES ================= */

.cd-long-ride-box{
  background: #fff !important;
  border-radius: 22px !important;
  padding: 34px !important;
  border: 2px solid var(--cd-primary, #007bff) !important;
  box-shadow: 0 12px 30px rgba(0,0,0,0.1) !important;
  text-align: center !important;
}

.cd-long-ride-box h4{
  font-size: 1.5rem !important;
  font-weight: 600 !important;
  color: #1A1A1A !important;
  margin: 20px 0 10px 0 !important;
}

.cd-long-ride-box span{
  font-size: 32px !important;
  font-weight: 800 !important;
  color: var(--cd-primary, #007bff) !important;
  display: block !important;
}

.cd-long-ride-icon{
  font-size: 42px !important;
  color: var(--cd-primary, #007bff) !important;
  margin-bottom: 10px !important;
}

/* ================= EXCLUSIVE REWARDS ================= */

.cd-reward-box{
  background: #fff !important;
  border-radius: 22px !important;
  padding: 34px !important;
  border-top: 5px solid var(--cd-primary, #007bff) !important;
  box-shadow: 0 12px 28px rgba(0,0,0,0.12) !important;
  text-align: center !important;
  transition: all 0.3s ease !important;
}

.cd-reward-box:hover{
  transform: translateY(-8px) !important;
  box-shadow: 0 16px 40px rgba(0,0,0,0.15) !important;
}

.cd-reward-box i{
  font-size: 42px !important;
  color: var(--cd-primary, #007bff) !important;
  margin-bottom: 20px !important;
  display: block !important;
}

.cd-reward-box h5{
  font-size: 1.5rem !important;
  font-weight: 600 !important;
  color: #1A1A1A !important;
  margin-bottom: 10px !important;
}

.cd-reward-box p{
  color: #4A4A4A !important;
  font-size: 1rem !important;
  margin: 0 !important;
  line-height: 1.6 !important;
}

/* ================= HOW TO PARTICIPATE STEPS ================= */

.cd-steps-row{
  display: flex !important;
  gap: 28px !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
}

.cd-step-item{
  flex: 1 !important;
  min-width: 180px !important;
  background: #fff !important;
  border-radius: 20px !important;
  padding: 26px !important;
  box-shadow: 0 10px 25px rgba(0,0,0,0.1) !important;
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 12px !important;
  transition: all 0.3s ease !important;
}

.cd-step-item:hover{
  transform: translateY(-6px) !important;
  box-shadow: 0 16px 35px rgba(0,0,0,0.15) !important;
}
.cd-step-arrow{
  font-size: 20px !important ;
}
.cd-step-item i{
  font-size: 28px ;
  color: var(--cd-primary, #007bff) !important;
  margin-top: 20px;
  margin-bottom: -20px;
}


.cd-step-item p{
  font-size: 1rem !important;
  font-weight: 500 !important;
  color: #1A1A1A !important;
  margin: 0 !important;
}

.cd-step-number{
  position: absolute !important;
  top: 12px !important;
 
  background: var(--cd-primary, #007bff) !important;
  color: #fff !important;
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-weight: 700 !important;
  font-size: 16px !important;
  box-shadow: 0 4px 12px color-mix(in srgb, var(--cd-primary, #007bff) 30%, transparent) !important;
}

.cd-step-arrow{
  position: absolute !important;
  left: calc(100% + 14px) !important;
  top: 33% !important;
  transform: translateX(-50%) translateY(-50%) !important;
  color: var(--cd-primary, #007bff) !important;
  font-size: 22px !important;
  z-index: 10 !important;
  pointer-events: none !important;
}

.cd-step-item:last-child .cd-step-arrow{
  display: none !important;
}

@media (min-width: 993px){
  .cd-steps-row{
    justify-content: flex-start !important;
    flex-wrap: nowrap !important;
    gap: 22px !important;
  }

  .cd-step-item{
    flex: 1 1 0 !important;
    min-width: 0 !important;
    max-width: none !important;
    padding: 20px 14px !important;
  }

  .cd-step-arrow{
    left: calc(100% + 11px) !important;
  }

  .cd-step-item p{
    font-size: 0.88rem !important;
  }
  .cd-step-arrow{
    font-size: 18px !important ;
  }
  .cd-step-item i{
    font-size: 24px !important;
  }

}

/* ================= RESPONSIVE ================= */

@media (max-width: 992px) {
  .cd-info-box{
    margin-top: 40px !important;
  }
  
  .cd-info-item{
    flex-direction: column !important;
    text-align: center !important;
  }
  
  .cd-info-icon{
    margin-right: 0 !important;
    margin-bottom: 16px !important;
  }
  
  .cd-col-lg-7,
  .cd-col-lg-5{
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }
  
  .cd-col-lg-3{
    flex: 0 0 50% !important;
    max-width: 50% !important;
  }
  
  .cd-steps-row{
    gap: 20px !important;
  }
  
  .cd-step-item{
    min-width: calc(50% - 12px) !important;
  }

  .cd-step-arrow{
    left: calc(100% + 10px) !important;
  }
}

@media (max-width: 768px) {
  .cd-hero-section{
    padding: 30px 0 80px !important;
  }
  
  .cd-content-section{
    padding: 30px 0 !important;
  }
  
  .cd-section-title{
    font-size: 1rem !important;
    left: auto !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  
  .cd-col-md-6,
  .cd-col-md-4,
  .cd-col-lg-3{
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }
  
  .cd-text-end{
    text-align: center !important;
  }
  
  .cd-cta-buttons{
    flex-direction: column !important;
  }
  
  .cd-btn{
    width: 100% !important;
    justify-content: center !important;
  }
  
  .cd-hero-title{
    font-size: 2.5rem !important;
  }
  
  .cd-hero-subtitle{
    font-size: 1.1rem !important;
  }
  
  .cd-steps-row{
    flex-direction: column !important;
  }
  
  .cd-step-item{
    min-width: 100% !important;
  }
  
  .cd-step-arrow{
    display: none !important;
  }
  
  .cd-long-ride-box span{
    font-size: 24px !important;
  }
  
  .cd-reward-box{
    margin-bottom: 20px !important;
  }
}

/* ================= BOOKING / CATEGORY MODAL (challenge colors via inline --cd-* on modal root) ================= */

.cd-booking-modal.cd-modal{
  position: fixed !important;
  inset: 0 !important;
  z-index: 10000 !important;
  align-items: center !important;
  justify-content: center !important;
  padding: max(16px, env(safe-area-inset-top)) 16px 16px !important;
  background: rgba(0, 0, 0, 0.52) !important;
  box-sizing: border-box !important;
}

.cd-booking-modal .cd-modal-content,
.cd-booking-modal__content{
  width: 100% !important;
  max-width: min(720px, 100%) !important;
  background: #fff !important;
  border-radius: 16px !important;
  box-shadow: 0 24px 56px rgba(0, 0, 0, 0.28) !important;
  max-height: min(92vh, 880px) !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
}

.cd-booking-modal__header{
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  padding: 20px 24px !important;
  border-bottom: 1px solid #e8e8e8 !important;
  flex-shrink: 0 !important;
}

.cd-booking-modal__title{
  flex: 1 !important;
  min-width: 0 !important;
  margin: 0 !important;
  font-size: 1.125rem !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
  padding: 11px 18px !important;
  border-radius: 14px !important;
  text-align: center !important;
  color: #fff !important;
  background: linear-gradient(90deg, var(--cd-primary, #007bff), var(--cd-secondary, #040404)) !important;
}

.cd-booking-modal .cd-modal-close{
  flex-shrink: 0 !important;
  background: none !important;
  border: none !important;
  font-size: 26px !important;
  line-height: 1 !important;
  cursor: pointer !important;
  color: #94a3b8 !important;
  padding: 4px !important;
  width: 36px !important;
  height: 36px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 10px !important;
  transition: color 0.2s, background 0.2s !important;
}

.cd-booking-modal .cd-modal-close:hover{
  color: #1e293b !important;
  background: #f1f5f9 !important;
}

.cd-booking-modal .cd-modal-body{
  padding: 18px 22px 22px !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}

.cd-booking-modal .cd-booking-wizard-steps{
  display: flex !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
  margin-bottom: 16px !important;
  padding-bottom: 6px !important;
  border-bottom: 1px solid #edf2f7 !important;
}

.cd-booking-modal .cd-booking-step-pill{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 30px !important;
  font-size: 0.76rem !important;
  font-weight: 700 !important;
  border-radius: 999px !important;
  border: 1px solid #d1d5db !important;
  padding: 6px 12px !important;
  color: #6b7280 !important;
  background: #fff !important;
}

.cd-booking-modal .cd-booking-step-pill.active{
  color: #fff !important;
  border-color: var(--cd-primary, #007bff) !important;
  background: var(--cd-primary, #007bff) !important;
}

.cd-booking-modal .cd-booking-step-pill.done{
  color: var(--cd-primary, #007bff) !important;
  border-color: color-mix(in srgb, var(--cd-primary, #007bff) 35%, #d1d5db) !important;
  background: color-mix(in srgb, var(--cd-primary, #007bff) 9%, #fff) !important;
}

.cd-booking-modal .cd-booking-step-panel{
  display: block !important;
}

.cd-booking-modal .cd-booking-step-panel[hidden],
.cd-booking-modal .cd-booking-step-pill[hidden],
.cd-booking-modal .cd-modal-footer button[hidden]{
  display: none !important;
}

.cd-booking-modal .cd-booking-no-step-info{
  margin: 6px 0 0 0 !important;
  border: 1px dashed #cbd5e1 !important;
  border-radius: 10px !important;
  padding: 10px 12px !important;
  font-size: 0.85rem !important;
  color: #475569 !important;
  background: #f8fafc !important;
}

.cd-booking-modal .cd-booking-ready-panel{
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  padding: 28px 20px 18px !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 14px !important;
  background: linear-gradient(180deg, #f8fafc 0%, #fff 100%) !important;
}

.cd-booking-modal .cd-booking-ready-panel__free-badge{
  display: inline-flex !important;
  align-items: center !important;
  margin-bottom: 10px !important;
  padding: 0.35rem 0.8rem !important;
  border-radius: 999px !important;
  font-size: 0.68rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: #fff !important;
  background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.45) !important;
  box-shadow: 0 4px 14px rgba(5, 150, 105, 0.3) !important;
}

.cd-booking-modal .cd-booking-ready-panel__free-badge[hidden]{
  display: none !important;
}

.cd-booking-modal .cd-booking-ready-panel[hidden]{
  display: none !important;
}

.cd-booking-modal .cd-booking-ready-panel__icon{
  width: 56px !important;
  height: 56px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 50% !important;
  margin-bottom: 14px !important;
  color: var(--cd-secondary, #44c002) !important;
  background: color-mix(in srgb, var(--cd-secondary, #44c002) 12%, #fff) !important;
  font-size: 1.75rem !important;
}

.cd-booking-modal .cd-booking-ready-panel__title{
  margin: 0 0 8px 0 !important;
  font-size: 1.125rem !important;
  font-weight: 700 !important;
  color: #0f172a !important;
}

.cd-booking-modal .cd-booking-ready-panel__text{
  margin: 0 !important;
  max-width: 360px !important;
  font-size: 0.9375rem !important;
  line-height: 1.5 !important;
  color: #64748b !important;
}

.cd-booking-modal .cd-booking-ready-panel__user{
  margin: 14px 0 0 0 !important;
  padding: 8px 14px !important;
  border-radius: 999px !important;
  font-size: 0.8125rem !important;
  font-weight: 600 !important;
  color: #334155 !important;
  background: #fff !important;
  border: 1px solid #e2e8f0 !important;
}

.cd-booking-modal #booking-wizard-steps[hidden]{
  display: none !important;
}

.cd-booking-modal #booking-plan-group,
.cd-booking-modal #booking-config-option-group{
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 10px !important;
  margin-bottom: 16px !important;
}

.cd-booking-modal .cd-booking-plans-row{
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  align-items: stretch !important;
  gap: 4px !important;
}

.cd-booking-modal .cd-booking-section-label{
  margin: 0 0 8px 0 !important;
  font-size: 0.6875rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: #475569 !important;
  padding-left: 10px !important;
  border-left: 3px solid var(--cd-primary, #007bff) !important;
}

.cd-booking-modal .cd-booking-plans-row > .cd-booking-plan-card,
.cd-booking-modal .cd-booking-plans-row > .cd-booking-config-card{
  flex: 0 1 165px !important;
  min-width: 145px !important;
  max-width: 180px !important;
}

.cd-booking-modal .cd-booking-plan-card,
.cd-booking-modal .cd-booking-config-card{
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  gap: 4px !important;
  padding: 8px 6px !important;
  border: 2px solid #e5e7eb !important;
  border-radius: 10px !important;
  cursor: pointer !important;
  transition: border-color 0.2s, box-shadow 0.2s, background 0.2s !important;
  margin: 0 !important;
}

.cd-booking-modal .cd-booking-plan-card:hover,
.cd-booking-modal .cd-booking-config-card:hover{
  border-color: #cbd5e1 !important;
  background: #fafafa !important;
}

.cd-booking-modal .cd-booking-plan-card:has(.booking-plan-radio:checked),
.cd-booking-modal .cd-booking-config-card:has(.booking-option-radio:checked){
  border-color: var(--cd-primary, #007bff) !important;
  background: color-mix(in srgb, var(--cd-primary, #007bff) 6%, white) !important;
  box-shadow: 0 2px 10px color-mix(in srgb, var(--cd-primary, #007bff) 12%, transparent) !important;
}

.cd-booking-modal .cd-booking-plan-card-body{
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  align-items: center !important;
  width: 100% !important;
}

.cd-booking-modal .cd-booking-plan-name{
  font-weight: 700 !important;
  font-size: 0.76rem !important;
  color: #111827 !important;
  line-height: 1.25 !important;
}

.cd-booking-modal .cd-booking-plan-price{
  font-size: 0.875rem !important;
  font-weight: 800 !important;
  color: var(--cd-primary, #007bff) !important;
  line-height: 1.2 !important;
}

.cd-booking-modal .cd-booking-plan-price-original{
  font-size: 0.75rem !important;
  margin-right: 4px !important;
}

.cd-booking-modal .cd-booking-plan-sub{
  font-size: 0.6875rem !important;
  color: #64748b !important;
  line-height: 1.35 !important;
}

.cd-booking-modal .cd-booking-gst-note{
  margin: 4px 0 0 0 !important;
  font-size: 0.6875rem !important;
  color: #64748b !important;
  line-height: 1.35 !important;
}

.cd-booking-modal .booking-plan-radio,
.cd-booking-modal .booking-option-radio{
  margin: 0 !important;
  cursor: pointer !important;
  flex-shrink: 0 !important;
  order: -1 !important;
}

.cd-booking-modal .cd-booking-category-grid{
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  gap: 8px !important;
  overflow-x: visible !important;
  padding-bottom: 4px !important;
  -webkit-overflow-scrolling: touch !important;
  scrollbar-width: thin !important;
}

.cd-booking-modal .cd-booking-category-grid .cd-category-option{
  flex: 0 1 165px !important;
  min-width: 145px !important;
  max-width: 180px !important;
}

.cd-booking-modal .cd-category-option{
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  padding: 8px 6px !important;
  border: 2px solid #e5e7eb !important;
  border-radius: 10px !important;
  cursor: pointer !important;
  transition: border-color 0.2s, box-shadow 0.2s, background 0.2s !important;
  margin: 0 !important;
  min-width: 0 !important;
}

.cd-booking-modal .cd-category-option .category-radio{
  margin: 0 0 4px 0 !important;
  cursor: pointer !important;
  flex-shrink: 0 !important;
}

.cd-booking-modal .cd-category-option__body{
  flex: 1 1 auto !important;
  min-width: 0 !important;
  width: 100% !important;
}

.cd-booking-modal .cd-category-option__title{
  font-weight: 600 !important;
  font-size: 0.76rem !important;
  margin-bottom: 2px !important;
  color: #111827 !important;
  line-height: 1.25 !important;
}

.cd-booking-modal .cd-category-option__meta{
  font-size: 0.66rem !important;
  color: #64748b !important;
  line-height: 1.3 !important;
}

.cd-booking-modal .cd-category-option__desc{
  font-size: 0.60rem !important;
  color: #94a3b8 !important;
  margin-top: 4px !important;
  line-height: 1.35 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

.cd-booking-modal .cd-booking-terms-label{
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-size: 13px !important;
  color: #444 !important;
  cursor: pointer !important;
  margin-top: 2px !important;
}

.cd-booking-modal .cd-booking-terms-checkbox{
  margin: 0 !important;
  width: 14px !important;
  height: 14px !important;
  flex-shrink: 0 !important;
}

.cd-booking-modal #booking-guest-fields{
  margin-top: 10px !important;
}

.cd-booking-modal #booking-guest-fields .cd-booking-guest-grid,
.cd-booking-modal #booking-auth-fields .cd-booking-guest-grid,
.cd-booking-modal #booking-free-info-block .cd-booking-guest-grid{
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 10px !important;
  margin-bottom: 10px !important;
}

@media (max-width: 520px){
  .cd-booking-modal #booking-guest-fields .cd-booking-guest-grid,
  .cd-booking-modal #booking-auth-fields .cd-booking-guest-grid,
  .cd-booking-modal #booking-free-info-block .cd-booking-guest-grid{
    grid-template-columns: 1fr !important;
  }
}

.cd-booking-modal #booking-auth-fields{
  background: linear-gradient(180deg, #fffdf5 0%, #fff9ea 100%) !important;
  border: 1px solid #fde68a !important;
  border-radius: 14px !important;
  padding: 16px !important;
  margin-top: 14px !important;
  box-shadow: 0 1px 2px rgba(17, 24, 39, 0.04) !important;
}

.cd-booking-modal #booking-auth-fields .cd-booking-section-label{
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin: 0 0 4px 0 !important;
  padding-left: 10px !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: #92400e !important;
  border-left: 3px solid #f59e0b !important;
}

.cd-booking-modal #booking-auth-fields .cd-booking-auth-helper{
  font-size: 12px !important;
  color: #78350f !important;
  margin: 0 0 12px 0 !important;
  line-height: 1.45 !important;
}

.cd-booking-modal #booking-auth-fields > [data-auth-field-cell],
.cd-booking-modal #booking-auth-fields > [data-auth-field-row]{
  margin-bottom: 10px !important;
}

.cd-booking-modal #booking-auth-fields > [data-auth-field-cell]:last-child,
.cd-booking-modal #booking-auth-fields > [data-auth-field-row]:last-child{
  margin-bottom: 0 !important;
}

.cd-booking-modal #booking-auth-fields .cd-booking-field-label{
  font-size: 12px !important;
  font-weight: 600 !important;
  color: #1f2937 !important;
  margin-bottom: 6px !important;
}

.cd-booking-modal #booking-auth-fields .cd-booking-field-input{
  background: #ffffff !important;
  border: 1px solid #f3d58a !important;
  border-radius: 10px !important;
}

.cd-booking-modal #booking-auth-fields .cd-booking-field-input:focus{
  border-color: #f59e0b !important;
  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.18) !important;
}

.cd-booking-modal .cd-booking-field-label{
  display: block !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  margin-bottom: 6px !important;
  color: #374151 !important;
}

.cd-booking-modal .cd-booking-field-input{
  width: 100% !important;
  min-height: 42px !important;
  padding: 10px 12px !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 10px !important;
  font-size: 13px !important;
  box-sizing: border-box !important;
}

.cd-booking-modal textarea.cd-booking-field-input{
  min-height: 90px !important;
}

.cd-booking-modal .cd-booking-card-block{
  background: #f8fafc !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 12px !important;
  padding: 12px !important;
  margin-top: 10px !important;
}

.cd-booking-modal #booking-guest-fields label span{
  line-height: 1.35 !important;
}

.cd-booking-modal .cd-booking-field-input:focus{
  outline: none !important;
  border-color: var(--cd-primary, #007bff) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--cd-primary, #007bff) 18%, transparent) !important;
}

.cd-booking-modal .cd-booking-phone-block{
  margin-top: 14px !important;
}

.cd-booking-modal .cd-booking-phone-block.cd-booking-phone-block--in-profile{
  background: linear-gradient(180deg, #fffdf5 0%, #fff9ea 100%) !important;
  border: 1px solid #fde68a !important;
  border-bottom: none !important;
  border-radius: 14px 14px 0 0 !important;
  margin-bottom: 0 !important;
  padding-bottom: 14px !important;
}

.cd-booking-modal .cd-booking-phone-block.cd-booking-phone-block--in-profile + #booking-auth-fields{
  border-top: 1px dashed #f3d58a !important;
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
  margin-top: 0 !important;
  padding-top: 14px !important;
}

.cd-booking-modal .cd-booking-phone-block.cd-booking-phone-block--in-profile .cd-booking-field-input{
  background: #ffffff !important;
  border: 1px solid #f3d58a !important;
  border-radius: 10px !important;
}

.cd-booking-modal .cd-booking-phone-block.cd-booking-phone-block--in-profile .cd-booking-field-input:focus{
  border-color: #f59e0b !important;
  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.18) !important;
}

.cd-booking-modal .cd-category-option:hover{
  border-color: var(--cd-primary, #007bff) !important;
  background: color-mix(in srgb, var(--cd-primary, #007bff) 5%, white) !important;
}

.cd-booking-modal .cd-category-option:has(input[type="radio"]:checked){
  border-color: var(--cd-primary, #007bff) !important;
  background: color-mix(in srgb, var(--cd-primary, #007bff) 6%, white) !important;
  box-shadow: 0 2px 10px color-mix(in srgb, var(--cd-primary, #007bff) 10%, transparent) !important;
}

.cd-booking-modal .cd-category-option input[type="radio"]:checked + div{
  color: var(--cd-primary, #007bff) !important;
}

.cd-booking-modal .cd-modal-footer{
  padding: 14px 20px !important;
  border-top: 1px solid #e8e8e8 !important;
  display: flex !important;
  justify-content: flex-end !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  flex-shrink: 0 !important;
  background: #f8fafc !important;
  position: static !important;
  z-index: 1 !important;
}

/* Modal: Cancel = neutral solid, Submit = solid primary (no gradient beside second button) */
.cd-booking-modal .cd-btn-secondary{
  background: #fff !important;
  border: 1px solid #cbd5e1 !important;
  color: #374151 !important;
  padding: 8px 12px !important;
  border-radius: 10px !important;
  font-size: 0.82rem !important;
  font-weight: 600 !important;
  min-height: 36px !important;
  min-width: 76px !important;
}

.cd-booking-modal .cd-btn-secondary:hover{
  background: #f9fafb !important;
  border-color: var(--cd-secondary, #64748b) !important;
  color: var(--cd-secondary, #64748b) !important;
  transform: translateY(-1px) !important;
}

.cd-booking-modal .cd-btn-primary{
  padding: 8px 12px !important;
  border-radius: 10px !important;
  font-size: 0.82rem !important;
  font-weight: 700 !important;
  min-height: 36px !important;
  min-width: 78px !important;
}

.cd-booking-modal #booking-prev-btn{
  min-width: 84px !important;
}

.cd-booking-modal #booking-next-btn{
  min-width: 84px !important;
}

.cd-booking-modal #join-challenge-btn{
  min-width: 126px !important;
}

@media (max-width: 520px){
  .cd-booking-modal .cd-booking-plans-row > .cd-booking-plan-card,
  .cd-booking-modal .cd-booking-plans-row > .cd-booking-config-card{
    flex: 1 1 calc(50% - 6px) !important;
    min-width: 132px !important;
    max-width: none !important;
  }

  .cd-booking-modal .cd-booking-category-grid .cd-category-option{
    flex: 1 1 calc(50% - 6px) !important;
    min-width: 132px !important;
    max-width: none !important;
  }
}

@media (max-width: 380px){
  .cd-booking-modal .cd-booking-plans-row > .cd-booking-plan-card,
  .cd-booking-modal .cd-booking-plans-row > .cd-booking-config-card{
    flex: 1 1 100% !important;
  }

  .cd-booking-modal .cd-booking-category-grid .cd-category-option{
    flex: 1 1 100% !important;
  }
}

@media (max-width: 540px){
  .cd-booking-modal__title{
    font-size: 1rem !important;
    padding: 10px 14px !important;
  }
}

.cd-hero-subtitle p, .cd-hero-subtitle span{
  font-size: 1.1rem !important;
  opacity: 0.95 !important;
  margin-bottom: 05px !important;
  max-width: 570px !important;
  color: white !important;
}