/* PATCH v87 — final mobile readability + routing polish
   Visual/UX only. Keeps booking/pricing/API/reward logic untouched. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
input, select, textarea, button { font-size: 16px !important; }

html body.page-weekly-spin,
html body[data-page="weekly-spin"] {
  background: radial-gradient(circle at top, rgba(232,194,118,.18), transparent 34%), #f7f0e3 !important;
  color: #10251b !important;
}
html body.page-weekly-spin .site-header,
html body[data-page="weekly-spin"] .site-header { background: #0b2b1d !important; color: #fffaf0 !important; }
html body.page-weekly-spin .weekly-spin-main,
html body[data-page="weekly-spin"] .weekly-spin-main { padding: 18px 14px calc(120px + env(safe-area-inset-bottom)) !important; }
html body.page-weekly-spin .spin-game-card,
html body[data-page="weekly-spin"] .spin-game-card {
  background: linear-gradient(180deg, #fffaf0 0%, #f3e8d2 100%) !important;
  color: #10251b !important;
  border: 1px solid rgba(197,157,83,.65) !important;
  border-radius: 28px !important;
  box-shadow: 0 18px 44px rgba(15,47,31,.18) !important;
  padding: clamp(18px, 5vw, 30px) !important;
  opacity: 1 !important; filter: none !important;
}
html body.page-weekly-spin .spin-game-card *,
html body[data-page="weekly-spin"] .spin-game-card * { opacity: 1 !important; text-shadow: none !important; }
html body.page-weekly-spin .spin-kicker,
html body[data-page="weekly-spin"] .spin-kicker { color: #856524 !important; background: rgba(197,157,83,.14) !important; border-color: rgba(197,157,83,.45) !important; }
html body.page-weekly-spin .spin-title,
html body.page-weekly-spin .spin-game-card h1,
html body.page-weekly-spin .spin-game-card h2,
html body[data-page="weekly-spin"] .spin-title,
html body[data-page="weekly-spin"] .spin-game-card h1,
html body[data-page="weekly-spin"] .spin-game-card h2 { color: #0f2f1f !important; }
html body.page-weekly-spin .spin-helper,
html body.page-weekly-spin .spin-footnote,
html body.page-weekly-spin .spin-game-card p,
html body[data-page="weekly-spin"] .spin-helper,
html body[data-page="weekly-spin"] .spin-footnote,
html body[data-page="weekly-spin"] .spin-game-card p { color: #244735 !important; font-weight: 650 !important; line-height: 1.48 !important; }
html body.page-weekly-spin .spin-wheel-wrap,
html body[data-page="weekly-spin"] .spin-wheel-wrap {
  background: #fffaf0 !important; border: 1px solid rgba(15,47,31,.12) !important; border-radius: 26px !important;
  padding: 14px !important; margin: 18px auto 20px !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.8) !important;
}
html body.page-weekly-spin .spin-main-button,
html body.page-weekly-spin #spinButton,
html body[data-page="weekly-spin"] .spin-main-button,
html body[data-page="weekly-spin"] #spinButton {
  width: min(100%, 380px) !important; min-height: 58px !important;
  background: linear-gradient(135deg, #0f2f1f, #154d33) !important; color: #fffaf0 !important;
  border: 1px solid rgba(232,194,118,.95) !important; border-radius: 999px !important;
  font-weight: 900 !important; letter-spacing: .03em !important; box-shadow: 0 12px 28px rgba(15,47,31,.26) !important;
}
html body.page-weekly-spin .spin-book-button,
html body[data-page="weekly-spin"] .spin-book-button { color: #0f2f1f !important; background: rgba(255,250,240,.94) !important; border: 1px solid rgba(15,47,31,.18) !important; }

html body.page-weekly-spin #popupOverlay,
html body.page-weekly-spin #phone-login-backdrop,
html body[data-page="weekly-spin"] #popupOverlay,
html body[data-page="weekly-spin"] #phone-login-backdrop { background: rgba(6,21,14,.72) !important; backdrop-filter: blur(5px) !important; }
html body.page-weekly-spin #popupOverlay .popup-card,
html body.page-weekly-spin #phone-login-backdrop .popup-card,
html body[data-page="weekly-spin"] #popupOverlay .popup-card,
html body[data-page="weekly-spin"] #phone-login-backdrop .popup-card {
  background: linear-gradient(180deg, #fffaf0 0%, #f3e8d2 100%) !important; color: #10251b !important;
  border: 1px solid rgba(197,157,83,.72) !important; border-radius: 24px !important;
  box-shadow: 0 22px 56px rgba(0,0,0,.32) !important; width: min(440px, calc(100vw - 30px)) !important;
  padding: 22px !important; opacity: 1 !important;
}
html body.page-weekly-spin #popupOverlay .popup-card *,
html body.page-weekly-spin #phone-login-backdrop .popup-card *,
html body[data-page="weekly-spin"] #popupOverlay .popup-card *,
html body[data-page="weekly-spin"] #phone-login-backdrop .popup-card * { opacity: 1 !important; text-shadow: none !important; }
html body.page-weekly-spin #phone-login-backdrop h3,
html body.page-weekly-spin #phone-login-backdrop p,
html body.page-weekly-spin #phone-login-backdrop label,
html body.page-weekly-spin .popup-message,
html body.page-weekly-spin .popup-amount,
html body[data-page="weekly-spin"] #phone-login-backdrop h3,
html body[data-page="weekly-spin"] #phone-login-backdrop p,
html body[data-page="weekly-spin"] #phone-login-backdrop label,
html body[data-page="weekly-spin"] .popup-message,
html body[data-page="weekly-spin"] .popup-amount { color: #10251b !important; }
html body.page-weekly-spin #phone-login-backdrop h3,
html body[data-page="weekly-spin"] #phone-login-backdrop h3 { font-size: 1.35rem !important; font-weight: 900 !important; }
html body.page-weekly-spin #phone-login-backdrop p,
html body[data-page="weekly-spin"] #phone-login-backdrop p { color: #365544 !important; font-size: 1rem !important; line-height: 1.45 !important; }
html body.page-weekly-spin #phone-login-input,
html body[data-page="weekly-spin"] #phone-login-input {
  background: #fff !important; color: #10251b !important; -webkit-text-fill-color: #10251b !important;
  border: 1px solid rgba(15,47,31,.24) !important; border-radius: 16px !important; min-height: 54px !important;
  padding: 12px 14px !important; box-shadow: 0 4px 16px rgba(15,47,31,.08) !important;
}
html body.page-weekly-spin #phone-login-input::placeholder,
html body[data-page="weekly-spin"] #phone-login-input::placeholder { color: rgba(16,37,27,.55) !important; -webkit-text-fill-color: rgba(16,37,27,.55) !important; }
html body.page-weekly-spin #phone-login-confirm,
html body.page-weekly-spin #applyPromoButton,
html body[data-page="weekly-spin"] #phone-login-confirm,
html body[data-page="weekly-spin"] #applyPromoButton {
  background: linear-gradient(135deg, #0f2f1f, #154d33) !important; color: #fffaf0 !important;
  border: 1px solid rgba(232,194,118,.95) !important; border-radius: 18px !important; min-height: 52px !important; font-weight: 900 !important;
}
html body.page-weekly-spin #phone-login-cancel,
html body.page-weekly-spin #closePopupButton,
html body[data-page="weekly-spin"] #phone-login-cancel,
html body[data-page="weekly-spin"] #closePopupButton {
  background: #fffaf0 !important; color: #0f2f1f !important; border: 1px solid rgba(15,47,31,.18) !important;
  border-radius: 18px !important; min-height: 52px !important; font-weight: 850 !important;
}

html body.page-login.member-login-open,
html body[data-page="login"].member-login-open { background: #f7f0e3 !important; color: #10251b !important; }
html body.page-login.member-login-open .member-login-panel,
html body[data-page="login"].member-login-open .member-login-panel {
  background: #f7f0e3 !important; color: #10251b !important; padding-bottom: calc(126px + env(safe-area-inset-bottom)) !important;
}
html body.page-login.member-login-open .member-login-panel .backLink,
html body[data-page="login"].member-login-open .member-login-panel .backLink {
  background: #fffaf0 !important; color: #0f2f1f !important; border: 1px solid rgba(15,47,31,.18) !important;
  border-radius: 999px !important; padding: 12px 16px !important;
}
html body.page-login.member-login-open .member-login-panel h1,
html body.page-login.member-login-open .member-login-panel h2,
html body.page-login.member-login-open .member-login-panel p,
html body[data-page="login"].member-login-open .member-login-panel h1,
html body[data-page="login"].member-login-open .member-login-panel h2,
html body[data-page="login"].member-login-open .member-login-panel p { color: #10251b !important; opacity: 1 !important; text-shadow: none !important; }
html body.page-login.member-login-open .member-login-panel .card,
html body[data-page="login"].member-login-open .member-login-panel .card {
  background: linear-gradient(180deg, #fffaf0, #f3e8d2) !important; color: #10251b !important;
  border: 1px solid rgba(197,157,83,.55) !important; box-shadow: 0 16px 42px rgba(15,47,31,.18) !important;
}
html body.page-login.member-login-open #customerLoginForm input,
html body[data-page="login"].member-login-open #customerLoginForm input {
  background: #fff !important; color: #10251b !important; -webkit-text-fill-color: #10251b !important;
  border: 1px solid rgba(15,47,31,.24) !important; min-height: 52px !important;
}
@media (max-width: 520px) {
  html body.page-weekly-spin #phone-login-backdrop .popup-card,
  html body[data-page="weekly-spin"] #phone-login-backdrop .popup-card { padding: 20px !important; }
  html body.page-weekly-spin #phone-login-backdrop div[style*="display:flex"],
  html body[data-page="weekly-spin"] #phone-login-backdrop div[style*="display:flex"] { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
  html body.page-weekly-spin #phone-login-backdrop div[style*="display:flex"] button,
  html body[data-page="weekly-spin"] #phone-login-backdrop div[style*="display:flex"] button { width: 100% !important; padding-left: 8px !important; padding-right: 8px !important; }
}
html body.page-pacvan .pacvan-panel,
html body[data-page="pacvan"] .pacvan-panel,
html body.page-pacvan .pacvan-grid,
html body[data-page="pacvan"] .pacvan-grid,
html body.page-pacvan .pacvan-controls,
html body[data-page="pacvan"] .pacvan-controls {
  touch-action: none !important; overscroll-behavior: contain !important; -webkit-user-select: none !important; user-select: none !important;
}

/* PATCH v88 — Weekly Spin win modal readability
   Forces the global modal used by spinner.js to use the same cream-card styling as the rest of the spin page. */
html body.page-weekly-spin #global-modal,
html body[data-page="weekly-spin"] #global-modal {
  color: #10251b !important;
}
html body.page-weekly-spin #global-modal .modal-backdrop,
html body[data-page="weekly-spin"] #global-modal .modal-backdrop {
  background: rgba(6,21,14,.68) !important;
  backdrop-filter: blur(5px) !important;
}
html body.page-weekly-spin #global-modal .modal-dialog,
html body[data-page="weekly-spin"] #global-modal .modal-dialog {
  width: min(430px, calc(100vw - 32px)) !important;
  max-width: 430px !important;
  background: linear-gradient(180deg, #fffaf0 0%, #f3e8d2 100%) !important;
  color: #10251b !important;
  border: 1px solid rgba(197,157,83,.75) !important;
  border-radius: 26px !important;
  box-shadow: 0 24px 58px rgba(0,0,0,.34) !important;
  padding: 24px 22px !important;
  opacity: 1 !important;
  text-align: left !important;
}
html body.page-weekly-spin #global-modal .modal-dialog *,
html body[data-page="weekly-spin"] #global-modal .modal-dialog * {
  opacity: 1 !important;
  text-shadow: none !important;
}
html body.page-weekly-spin #global-modal #modal-title,
html body[data-page="weekly-spin"] #global-modal #modal-title {
  color: #0f2f1f !important;
  font-size: clamp(1.55rem, 7vw, 2rem) !important;
  line-height: 1.08 !important;
  font-weight: 950 !important;
  letter-spacing: -0.02em !important;
  margin: 0 0 12px !important;
}
html body.page-weekly-spin #global-modal #modal-message,
html body[data-page="weekly-spin"] #global-modal #modal-message {
  display: block !important;
  background: #fffaf0 !important;
  color: #244735 !important;
  border: 1px solid rgba(15,47,31,.12) !important;
  border-radius: 18px !important;
  padding: 14px 13px !important;
  font-size: 1.03rem !important;
  line-height: 1.48 !important;
  font-weight: 700 !important;
  margin: 0 0 16px !important;
}
html body.page-weekly-spin #global-modal .modal-actions,
html body[data-page="weekly-spin"] #global-modal .modal-actions {
  display: grid !important;
  grid-template-columns: 1fr 0.72fr !important;
  gap: 10px !important;
  justify-content: stretch !important;
  align-items: stretch !important;
}
html body.page-weekly-spin #global-modal .modal-actions .btn,
html body.page-weekly-spin #global-modal .modal-actions .btn-primary,
html body.page-weekly-spin #global-modal .modal-actions .btn-ghost,
html body[data-page="weekly-spin"] #global-modal .modal-actions .btn,
html body[data-page="weekly-spin"] #global-modal .modal-actions .btn-primary,
html body[data-page="weekly-spin"] #global-modal .modal-actions .btn-ghost {
  min-height: 56px !important;
  width: 100% !important;
  border-radius: 18px !important;
  font-size: 1rem !important;
  font-weight: 950 !important;
  letter-spacing: .01em !important;
  padding: 13px 14px !important;
  text-transform: none !important;
}
html body.page-weekly-spin #global-modal .modal-actions .btn-primary,
html body[data-page="weekly-spin"] #global-modal .modal-actions .btn-primary {
  background: linear-gradient(135deg, #0f2f1f, #164d33) !important;
  color: #fffaf0 !important;
  -webkit-text-fill-color: #fffaf0 !important;
  border: 1px solid rgba(232,194,118,.95) !important;
}
html body.page-weekly-spin #global-modal .modal-actions .btn-ghost,
html body[data-page="weekly-spin"] #global-modal .modal-actions .btn-ghost {
  background: #fffaf0 !important;
  color: #0f2f1f !important;
  -webkit-text-fill-color: #0f2f1f !important;
  border: 1px solid rgba(15,47,31,.2) !important;
}
@media (max-width: 420px) {
  html body.page-weekly-spin #global-modal .modal-dialog,
  html body[data-page="weekly-spin"] #global-modal .modal-dialog { padding: 22px 18px !important; }
  html body.page-weekly-spin #global-modal .modal-actions,
  html body[data-page="weekly-spin"] #global-modal .modal-actions { grid-template-columns: 1fr !important; }
}