/* Cypress River Oasis customer booking visual theme.
   VISUAL ONLY: no booking logic, pricing, totals, API calls, links, or form behavior changed. */
:root{
  --cro-navy:#0b2d45;
  --cro-teal:#159b9e;
  --cro-aqua:#45d3d1;
  --cro-pink:#f45f93;
  --cro-coral:#ff6f78;
  --cro-yellow:#ffd662;
  --cro-purple:#835fd1;
  --cro-sand:#fff4df;
  --cro-mint:#e8fbf8;
  --cro-lav:#f0eaff;
  --cro-shadow:0 18px 44px rgba(11,45,69,.12);
}
html,body{max-width:100%;overflow-x:clip}
body{
  color:var(--cro-navy)!important;
  background:
    radial-gradient(circle at 8% 4%,rgba(69,211,209,.21),transparent 24rem),
    radial-gradient(circle at 94% 18%,rgba(244,95,147,.11),transparent 22rem),
    linear-gradient(180deg,#fbffff 0%,#eefbfa 56%,#fffaf2 100%)!important;
}
body:before{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.34;
  background:
    radial-gradient(ellipse at 16% 9%,transparent 0 34%,rgba(255,255,255,.8) 35% 37%,transparent 38% 100%),
    radial-gradient(ellipse at 80% 4%,transparent 0 34%,rgba(69,211,209,.18) 35% 37%,transparent 38% 100%);
  background-size:250px 145px,310px 175px;
}

/* Header + progress */
body .topbar{background:linear-gradient(105deg,rgba(255,255,255,.97),rgba(232,251,248,.96) 64%,rgba(255,240,244,.94))!important;border-bottom:1px solid rgba(21,155,158,.18)!important;box-shadow:0 7px 22px rgba(11,45,69,.07)!important}
body .brand-mark{background:linear-gradient(145deg,var(--cro-navy),var(--cro-teal) 56%,var(--cro-aqua))!important;box-shadow:0 6px 18px rgba(21,155,158,.24)!important}
body .brand strong{color:var(--cro-navy)!important}
body .progress{background:rgba(244,252,251,.92)!important}
body .progress-step{border-color:rgba(11,45,69,.10)!important;border-radius:18px!important;background:rgba(255,255,255,.88)!important;color:#71808a!important}
body .progress-step:nth-child(1).active{background:linear-gradient(135deg,#e8fbf8,#d9f8fa)!important;color:#087f87!important}
body .progress-step:nth-child(2).active{background:linear-gradient(135deg,#fff4df,#fff0c7)!important;color:#7b5a09!important}
body .progress-step:nth-child(3).active{background:linear-gradient(135deg,#fff0f4,#ffe0eb)!important;color:#9b315d!important}
body .progress-step:nth-child(4).active{background:linear-gradient(135deg,#f0eaff,#e8e2ff)!important;color:#5e3da4!important}
body .progress-step.active b{background:var(--cro-navy)!important;color:#fff!important}

/* Main cards */
body .flow-card,body .summary-card{border:1px solid rgba(11,45,69,.09)!important;box-shadow:var(--cro-shadow)!important;background:rgba(255,255,255,.95)!important}
body .flow-card{border-radius:30px!important}
body .step>.eyebrow{color:var(--cro-teal)!important;font-weight:1000!important}
body .step>h1,body .summary-card h2{color:var(--cro-navy)!important}
body .step>.lead{color:#647582!important}

/* Step 1 */
body .step[data-step="1"] .form-grid{border-color:rgba(21,155,158,.17)!important;background:linear-gradient(145deg,rgba(232,251,248,.92),rgba(255,255,255,.96) 55%,rgba(255,244,223,.66))!important;box-shadow:0 10px 26px rgba(11,45,69,.05)!important}
body .step[data-step="1"] input[type="date"],body .step[data-step="1"] select{border-color:rgba(21,155,158,.25)!important;background:#fff!important;color:var(--cro-navy)!important}
body .datetime-tip{border-color:rgba(255,190,70,.38)!important;background:linear-gradient(135deg,#fff9e9,#fff1d1)!important;color:#68501b!important}

/* Step 2 */
body .guest-control{border-color:rgba(21,155,158,.18)!important;background:linear-gradient(145deg,#fff,#ecfbf9)!important;box-shadow:0 10px 25px rgba(11,45,69,.05)!important}
body .guest-control button{background:#e9faf8!important;color:var(--cro-teal)!important;border-color:rgba(21,155,158,.22)!important}
body .rate-card{background:linear-gradient(135deg,var(--cro-navy) 0%,#0c6370 56%,var(--cro-teal) 100%)!important;box-shadow:0 16px 32px rgba(11,45,69,.20)!important}
body .guest-rate-note{border-color:rgba(255,190,70,.32)!important;background:#fff8e8!important}
body .guest-tier-chip{border:0!important;border-radius:14px!important;box-shadow:0 6px 15px rgba(11,45,69,.06)!important}
body .guest-tier-chip:nth-child(4n+1){background:linear-gradient(145deg,#e9fbf9,#dff8fa)!important}
body .guest-tier-chip:nth-child(4n+2){background:linear-gradient(145deg,#fff0f4,#ffe3eb)!important}
body .guest-tier-chip:nth-child(4n+3){background:linear-gradient(145deg,#fff7df,#ffedb7)!important}
body .guest-tier-chip:nth-child(4n){background:linear-gradient(145deg,#f2edff,#e9e2ff)!important}

/* Step 3 heading */
body .step[data-step="3"]{overflow:visible!important}
body .step[data-step="3"]>h1{font-size:0!important;line-height:1.03!important}
body .step[data-step="3"]>h1:after{content:"Cypress River Oasis Add Ons";font-size:clamp(2rem,5vw,3.2rem);font-family:Georgia,"Times New Roman",serif;letter-spacing:-.03em;color:var(--cro-navy)}
html[lang="es"] body .step[data-step="3"]>h1:after{content:"Complementos de Cypress River Oasis"}
body .step[data-step="3"] #addonGrid:before{content:"POPULAR UPGRADES"!important;color:var(--cro-pink)!important;letter-spacing:.16em!important;font-weight:1000!important}

/* Remove all amenity photography / edit imagery */
body .step[data-step="3"] .addon-photo{display:none!important;background-image:none!important}
body .step[data-step="3"] .addon [aria-label*="edit" i],body .step[data-step="3"] .addon .edit,body .step[data-step="3"] .addon .edit-button,body .step[data-step="3"] .addon .pencil{display:none!important}

/* Colorful add-on cards */
body .step[data-step="3"] #addonGrid,body .step[data-step="3"] #moreAddonGrid{gap:12px!important}
body .step[data-step="3"] .addon{position:relative!important;border:1px solid rgba(11,45,69,.08)!important;border-radius:22px!important;overflow:visible!important;box-shadow:0 9px 24px rgba(11,45,69,.08)!important;background:#fff!important;transition:transform .18s ease,box-shadow .18s ease!important}
body .step[data-step="3"] .addon:nth-of-type(4n+1){background:linear-gradient(120deg,#e7fbf8,#dff7fb)!important}
body .step[data-step="3"] .addon:nth-of-type(4n+2){background:linear-gradient(120deg,#fff0f4,#ffe5ee)!important}
body .step[data-step="3"] .addon:nth-of-type(4n+3){background:linear-gradient(120deg,#fff6df,#ffebbd)!important}
body .step[data-step="3"] .addon:nth-of-type(4n){background:linear-gradient(120deg,#f1ecff,#e8e1ff)!important}
body .step[data-step="3"] #addonGrid .addon-pick,body .step[data-step="3"] #moreAddonGrid .addon-pick{position:relative!important;display:grid!important;grid-template-columns:42px minmax(0,1fr) auto!important;grid-template-areas:"check copy price"!important;align-items:center!important;gap:12px!important;padding:16px!important;margin:0!important}
body .step[data-step="3"] .addon-copy{grid-area:copy!important;min-width:0!important;padding:0!important}
body .step[data-step="3"] .addon-copy strong{color:var(--cro-navy)!important;font-size:1rem!important;line-height:1.24!important}
body .step[data-step="3"] .addon-copy small{color:#647582!important;font-size:.79rem!important;margin-top:4px!important}
body .step[data-step="3"] .addon-pick>b{grid-area:price!important;justify-self:end!important;align-self:center!important;padding:8px 12px!important;border-radius:999px!important;background:rgba(255,255,255,.78)!important;color:var(--cro-navy)!important;white-space:nowrap!important;box-shadow:inset 0 0 0 1px rgba(11,45,69,.06)!important}
body .step[data-step="3"] .addon-details{margin:0 14px 12px!important;border-top:1px solid rgba(11,45,69,.08)!important;padding:0!important}
body .step[data-step="3"] .addon-details summary{color:#087f87!important;font-weight:950!important}
body .step[data-step="3"] .more-extras{border-color:rgba(21,155,158,.16)!important;background:linear-gradient(145deg,#f9ffff,#edfafa)!important;border-radius:22px!important}

/* Simple themed amenity glyphs instead of photos */
body .step[data-step="3"] .addon-pick:before{grid-area:check;display:grid;place-items:center;width:36px;height:36px;border-radius:12px;font-size:20px;pointer-events:none;z-index:0}
body .step[data-step="3"] .addon:has(input[value*="birthday" i]) .addon-pick:before{content:"🎉";background:#ffe1ed}
body .step[data-step="3"] .addon:has(input[value*="30-minute" i]) .addon-pick:before{content:"🕒";background:#dff8fb}
body .step[data-step="3"] .addon:has(input[value*="1-hour" i]) .addon-pick:before{content:"☀️";background:#fff1c9}
body .step[data-step="3"] .addon:has(input[value*="tiki" i]) .addon-pick:before{content:"🔥";background:#efe5ff}
body .step[data-step="3"] .addon:has(input[value*="towel" i]) .addon-pick:before{content:"🧺";background:#ffe5ef}
body .step[data-step="3"] .addon:has(input[value*="warming" i]) .addon-pick:before{content:"🍽️";background:#e0f9fb}
body .step[data-step="3"] .addon:has(input[value*="congrats" i]) .addon-pick:before{content:"✨";background:#e7fbf5}

/* Checkbox layered over glyph */
body .step[data-step="3"] #addonGrid .addon-pick>input[type="checkbox"],body .step[data-step="3"] #moreAddonGrid .addon-pick>input[type="checkbox"]{grid-area:check!important;position:relative!important;z-index:3!important;appearance:none!important;-webkit-appearance:none!important;width:32px!important;height:32px!important;margin:0!important;border:2px solid rgba(11,45,69,.24)!important;border-radius:10px!important;background:rgba(255,255,255,.92)!important;box-shadow:0 2px 7px rgba(11,45,69,.08)!important;cursor:pointer!important}

/* Selection magic */
@keyframes croMagicFlow{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
@keyframes croMagicGlow{0%,100%{box-shadow:0 0 0 2px rgba(69,211,209,.32),0 0 16px rgba(69,211,209,.40),0 0 28px rgba(244,95,147,.20),0 15px 32px rgba(11,45,69,.13)}50%{box-shadow:0 0 0 3px rgba(244,95,147,.34),0 0 24px rgba(244,95,147,.44),0 0 40px rgba(131,95,209,.30),0 17px 35px rgba(11,45,69,.15)}}
@keyframes croTwinkle{0%,100%{opacity:.28;transform:translateY(0) scale(.78) rotate(-4deg)}40%{opacity:1;transform:translateY(-3px) scale(1.18) rotate(5deg)}70%{opacity:.55;transform:translateY(1px) scale(.96) rotate(-2deg)}}
@keyframes croCheckPop{0%{transform:scale(.5) rotate(-9deg)}70%{transform:scale(1.15) rotate(4deg)}100%{transform:scale(1)}}
body .step[data-step="3"] .addon-pick>input[type="checkbox"]:checked{border:2px solid #fff!important;background-color:var(--cro-pink)!important;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round' d='M5 12.5l4.2 4.2L19 7.5'/%3E%3C/svg%3E")!important;background-repeat:no-repeat!important;background-position:center!important;background-size:19px 19px!important;box-shadow:0 0 0 4px rgba(244,95,147,.18),0 0 18px rgba(244,95,147,.38)!important;animation:croCheckPop .28s cubic-bezier(.2,.8,.2,1) both!important}
body .step[data-step="3"] .addon-pick>input[type="checkbox"]:checked:after{display:none!important;content:none!important}
body .step[data-step="3"] .addon:has(input[type="checkbox"]:checked){transform:translateY(-2px) scale(1.012)!important;border:2px solid transparent!important;background:linear-gradient(var(--card-bg,#fff),var(--card-bg,#fff)) padding-box,linear-gradient(100deg,var(--cro-aqua),var(--cro-pink),var(--cro-yellow),var(--cro-purple),var(--cro-aqua)) border-box!important;background-size:100% 100%,320% 100%!important;animation:croMagicFlow 2.1s linear infinite,croMagicGlow 2.1s ease-in-out infinite!important;z-index:4!important}
body .step[data-step="3"] .addon:nth-of-type(4n+1):has(input:checked){--card-bg:#e7fbf8}
body .step[data-step="3"] .addon:nth-of-type(4n+2):has(input:checked){--card-bg:#fff0f4}
body .step[data-step="3"] .addon:nth-of-type(4n+3):has(input:checked){--card-bg:#fff6df}
body .step[data-step="3"] .addon:nth-of-type(4n):has(input:checked){--card-bg:#f1ecff}
body .step[data-step="3"] .addon:has(input:checked) .addon-pick>b{background:linear-gradient(135deg,var(--cro-navy),#0b6373)!important;color:#fff!important;box-shadow:0 6px 18px rgba(11,45,69,.20)!important}
body .step[data-step="3"] .addon:has(input:checked):after{content:"ADDED ✓"!important;position:absolute!important;top:10px!important;right:10px!important;z-index:8!important;padding:7px 11px!important;border-radius:999px!important;background:linear-gradient(135deg,var(--cro-pink),var(--cro-purple))!important;color:#fff!important;font-size:.64rem!important;font-weight:1000!important;letter-spacing:.09em!important;border:1px solid rgba(255,255,255,.78)!important;box-shadow:0 5px 16px rgba(244,95,147,.30)!important}
html[lang="es"] body .step[data-step="3"] .addon:has(input:checked):after{content:"AGREGADO ✓"!important}
body .step[data-step="3"] .addon:has(input:checked)>.addon-pick:after{content:"✦   ✨   ✧   ✦"!important;position:absolute!important;inset:auto 8px 5px auto!important;z-index:7!important;color:#fff!important;font-size:17px!important;font-weight:1000!important;letter-spacing:3px!important;pointer-events:none!important;filter:drop-shadow(0 0 5px var(--cro-yellow)) drop-shadow(0 0 10px var(--cro-pink))!important;animation:croTwinkle 1.2s ease-in-out infinite!important}
body .step[data-step="3"] .addon:has(input:checked)>.addon-details:before{content:"✦";position:absolute;left:-4px;top:50%;z-index:7;color:#fff;font-size:22px;filter:drop-shadow(0 0 5px var(--cro-aqua)) drop-shadow(0 0 10px var(--cro-purple));animation:croTwinkle 1.4s ease-in-out infinite .3s;pointer-events:none}

/* Birthday feature card */
body .step[data-step="3"] #addonGrid .addon:has(input[value*="birthday" i]){border-color:rgba(244,95,147,.24)!important;background:linear-gradient(120deg,#ffeaf1,#f0e9ff)!important}
body .step[data-step="3"] #addonGrid .addon:has(input[value*="birthday" i]):before{content:"BEST VALUE FOR BIRTHDAYS"!important;display:inline-block!important;margin:12px 16px -5px!important;padding:6px 10px!important;border-radius:999px!important;background:var(--cro-navy)!important;color:#fff!important;font-size:.58rem!important;font-weight:1000!important;letter-spacing:.08em!important}

/* Review / checkout */
body .checkout-reassurance .trust-item:nth-child(1){background:linear-gradient(145deg,#e9fbf9,#fff)!important}
body .checkout-reassurance .trust-item:nth-child(2){background:linear-gradient(145deg,#fff3dd,#fff)!important}
body .checkout-reassurance .trust-item:nth-child(3){background:linear-gradient(145deg,#fff0f4,#fff)!important}
body .checkout-reassurance .trust-icon{background:var(--cro-navy)!important;color:#fff!important}
body .checkout-section-label{color:var(--cro-teal)!important}
body .field input,body .field select,body .field textarea{border-color:rgba(11,45,69,.15)!important;background:rgba(255,255,255,.94)!important;color:var(--cro-navy)!important}
body .field input:focus,body .field select:focus,body .field textarea:focus{border-color:var(--cro-aqua)!important;box-shadow:0 0 0 4px rgba(69,211,209,.14)!important}
body .promo-row button{background:var(--cro-navy)!important;color:#fff!important}
body .agreement-card{background:linear-gradient(145deg,#f5ffff,#fff6e7)!important;border-color:rgba(21,155,158,.16)!important}
body .id-upload-card{background:linear-gradient(145deg,#eefbfa,#fff7e8)!important;border-color:rgba(21,155,158,.17)!important}
body .checkout-payment-note{background:linear-gradient(135deg,#e9fbf8,#fff)!important;border-color:rgba(21,155,158,.22)!important}
body .checkout-payment-note .pay-icon{background:linear-gradient(135deg,var(--cro-teal),var(--cro-aqua))!important}
body .summary-card:before{background:linear-gradient(135deg,var(--cro-navy),#0b6470 58%,var(--cro-teal))!important}
body .deposit{background:linear-gradient(135deg,#e6fbf7,#fff3dd)!important;border-color:rgba(21,155,158,.20)!important;color:#126d72!important}
body .flow-actions{background:rgba(255,255,255,.95)!important;border-top-color:rgba(11,45,69,.09)!important}
body .flow-actions .primary{background:linear-gradient(135deg,var(--cro-coral),var(--cro-pink))!important;color:#fff!important;box-shadow:0 11px 25px rgba(244,95,147,.23)!important}
body .flow-actions .secondary{background:#fff!important;color:var(--cro-navy)!important;border-color:rgba(11,45,69,.13)!important}

@media(max-width:620px){
  body .flow-card{border-radius:24px!important}
  body .step{padding:22px 16px!important}
  body .step[data-step="3"]>h1:after{font-size:2rem!important}
  body .step[data-step="3"] #addonGrid,body .step[data-step="3"] #moreAddonGrid{grid-template-columns:1fr!important;gap:11px!important}
  body .step[data-step="3"] #addonGrid .addon-pick,body .step[data-step="3"] #moreAddonGrid .addon-pick{grid-template-columns:40px minmax(0,1fr)!important;grid-template-areas:"check copy" "check price"!important;padding:15px!important;gap:8px 11px!important}
  body .step[data-step="3"] .addon-pick>b{grid-column:2!important;justify-self:start!important;font-size:.8rem!important}
  body .step[data-step="3"] .addon:has(input:checked):after{top:8px!important;right:8px!important;padding:6px 9px!important;font-size:.58rem!important}
  body .step[data-step="3"] .addon:has(input:checked)>.addon-pick:after{font-size:14px!important;right:5px!important;bottom:4px!important}
  body .step[data-step="3"] .addon:has(input:checked){transform:translateY(-1px) scale(1.008)!important}
  body .flow-actions{box-shadow:0 -8px 24px rgba(11,45,69,.08)!important}
}

@media(prefers-reduced-motion:reduce){
  body .step[data-step="3"] .addon:has(input:checked),body .step[data-step="3"] .addon:has(input:checked)>.addon-pick:after,body .step[data-step="3"] .addon:has(input:checked)>.addon-details:before{animation:none!important}
}
