/* Frozen Reborn: Comprehensive Button & UI Fixes */

/* ========================================
   PRIMARY BUTTON FIXES
   ======================================== */

/* Ensure all buttons have proper display and layout */
[class*="__goTo"],
[class*="__writeBtn"],
[class*="__pageBtn"],
[class*="__primaryBtn"],
[class*="__submitBtn"],
[class*="__buyBtn"],
[class*="__supportBtn"],
[class*="__catalogBtn"],
[class*="__popularBtn"],
[class*="__nextBtn"],
[class*="__retry"] {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  cursor: pointer !important;
  border: none !important;
  outline: none !important;
  font-family: var(--font-mont, "Mont", sans-serif) !important;
  text-decoration: none !important;
  position: relative !important;
  overflow: hidden !important;
  -webkit-user-select: none !important;
  user-select: none !important;
  transition: all 0.15s ease !important;
}

/* Primary button background */
[class*="__writeBtn"],
[class*="__pageBtn"],
[class*="__primaryBtn"],
[class*="__submitBtn"],
[class*="__buyBtn"] {
  background: linear-gradient(163deg, #ffffff80 0.12%, #7eb8ff80 99.94%), #4a89ff !important;
  color: #fff !important;
  border-radius: 15px !important;
  padding: 0 25px !important;
  height: 55px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
}

/* Hero "Go to catalog" - keep original sizing & dark label (no generic overrides) */
.hero-module-scss-module__uXESQa__goTo {
  width: 225px !important;
  height: 60px !important;
  min-height: 60px !important;
  padding: 0 20px !important;
  border-radius: 15px !important;
  gap: 10px !important;
  background: linear-gradient(163deg, #ffffff80 0.12%, #7eb8ff80 99.94%), #4a89ff !important;
  color: #0f1016 !important;
  overflow: hidden !important;
}

.hero-module-scss-module__uXESQa__goToText {
  color: #0f1016 !important;
  z-index: 6 !important;
  position: relative !important;
}

.hero-module-scss-module__uXESQa__goTo span[aria-hidden="true"] {
  z-index: 6 !important;
  position: relative !important;
}

/* Mask border on hero button renders as a broken inner box in some browsers */
.hero-module-scss-module__uXESQa__goTo::before {
  display: none !important;
  content: none !important;
}

.hero-module-scss-module__uXESQa__goTo {
  box-shadow: 0 0 0 1px #ffffff40, 0 8px 24px #4a89ff40 !important;
}

/* Secondary/support buttons */
[class*="__supportBtn"],
[class*="__catalogBtn"],
[class*="__popularBtn"] {
  background: radial-gradient(885.95% 274.23% at 49.37%, #12141800 0%, #4a89ff40 100%), #1f1f2b66 !important;
  color: #8a89a7 !important;
  border-radius: 15px !important;
  padding: 0 25px !important;
  height: 55px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
}

/* Button hover effects */
.hero-module-scss-module__uXESQa__goTo:hover {
  opacity: 0.92 !important;
  transform: translateY(-2px) !important;
}

[class*="__writeBtn"]:hover,
[class*="__pageBtn"]:hover,
[class*="__primaryBtn"]:hover,
[class*="__submitBtn"]:hover,
[class*="__buyBtn"]:hover {
  opacity: 0.9 !important;
  transform: translateY(-1px) !important;
}

[class*="__supportBtn"]:hover,
[class*="__catalogBtn"]:hover,
[class*="__popularBtn"]:hover {
  color: #fff !important;
  background: radial-gradient(885.95% 274.23% at 49.37%, #12141800 0%, #4a89ff60 100%), #1f1f2b80 !important;
}

/* Button active/pressed state - NO scaling to prevent zoom issues */
.hero-module-scss-module__uXESQa__goTo:active {
  opacity: 0.88 !important;
  transform: translateY(0) !important;
}

[class*="__writeBtn"]:active,
[class*="__pageBtn"]:active,
[class*="__primaryBtn"]:active,
[class*="__submitBtn"]:active,
[class*="__buyBtn"]:active,
[class*="__supportBtn"]:active,
[class*="__catalogBtn"]:active,
[class*="__popularBtn"]:active {
  opacity: 0.85 !important;
  transform: translateY(1px) !important;
}

/* Button disabled state */
[class*="__"]:disabled,
[class*="__"][aria-disabled="true"] {
  opacity: 0.45 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

/* ========================================
   BUTTON BORDER/GLOW EFFECTS
   ======================================== */

/* Add gradient border to primary buttons (hero goTo uses its own ::before from page CSS) */
[class*="__writeBtn"]::before,
[class*="__pageBtn"]::before,
[class*="__primaryBtn"]::before,
[class*="__submitBtn"]::before,
[class*="__buyBtn"]::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  border-radius: inherit !important;
  padding: 1px !important;
  background: linear-gradient(111deg, #ffffff80 0%, #ffffff00 40.38% 60.12%, #ffffff80 100%) !important;
  -webkit-mask-image: linear-gradient(#fff 0 0), linear-gradient(#fff 0 0) !important;
  mask-image: linear-gradient(#fff 0 0), linear-gradient(#fff 0 0) !important;
  -webkit-mask-composite: xor !important;
  mask-composite: exclude !important;
  -webkit-mask-clip: content-box, border-box !important;
  mask-clip: content-box, border-box !important;
  -webkit-mask-origin: content-box, border-box !important;
  mask-origin: content-box, border-box !important;
  -webkit-mask-position: 0 0, 0 0 !important;
  mask-position: 0 0, 0 0 !important;
  -webkit-mask-size: auto, auto !important;
  mask-size: auto, auto !important;
  -webkit-mask-repeat: repeat, repeat !important;
  mask-repeat: repeat, repeat !important;
  pointer-events: none !important;
  z-index: 1 !important;
}

/* Gradient border for secondary buttons */
[class*="__supportBtn"]::before,
[class*="__catalogBtn"]::before,
[class*="__popularBtn"]::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  border-radius: inherit !important;
  padding: 1px !important;
  background: linear-gradient(111deg, #4a89ff80 0%, #4a89ff33 40.38% 60.12%, #4a89ff80 100%) !important;
  -webkit-mask-image: linear-gradient(#fff 0 0), linear-gradient(#fff 0 0) !important;
  mask-image: linear-gradient(#fff 0 0), linear-gradient(#fff 0 0) !important;
  -webkit-mask-composite: xor !important;
  mask-composite: exclude !important;
  -webkit-mask-clip: content-box, border-box !important;
  mask-clip: content-box, border-box !important;
  -webkit-mask-origin: content-box, border-box !important;
  mask-origin: content-box, border-box !important;
  -webkit-mask-position: 0 0, 0 0 !important;
  mask-position: 0 0, 0 0 !important;
  -webkit-mask-size: auto, auto !important;
  mask-size: auto, auto !important;
  -webkit-mask-repeat: repeat, repeat !important;
  mask-repeat: repeat, repeat !important;
  pointer-events: none !important;
  z-index: 1 !important;
}

/* ========================================
   CARD & PANEL FIXES
   ======================================== */

/* Ensure cards have proper styling */
[class*="__card"] {
  background: radial-gradient(54.54% 70.76% at 0 100.07%, #4a89ff14 0%, #13141b00 100%), 
              radial-gradient(54.49% 70.71% at 100% 0, #4a89ff14 0%, #13141b00 100%), 
              #1f1f2b33 !important;
  border-radius: 20px !important;
  position: relative !important;
  overflow: hidden !important;
  transition: all 0.15s ease !important;
}

/* Card hover effect */
[class*="__card"]:hover {
  background: radial-gradient(54.54% 70.76% at 0 100.07%, #4a89ff20 0%, #13141b00 100%), 
              radial-gradient(54.49% 70.71% at 100% 0, #4a89ff20 0%, #13141b00 100%), 
              #1f1f2b50 !important;
  transform: translate(4px) !important;
}

/* Card border */
[class*="__card"]::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  border-radius: inherit !important;
  padding: 1px !important;
  background: linear-gradient(111deg, #4a89ff80 0%, #4a89ff33 40.38% 60.12%, #4a89ff80 100%) !important;
  -webkit-mask-image: linear-gradient(#fff 0 0), linear-gradient(#fff 0 0) !important;
  mask-image: linear-gradient(#fff 0 0), linear-gradient(#fff 0 0) !important;
  -webkit-mask-composite: xor !important;
  mask-composite: exclude !important;
  -webkit-mask-clip: content-box, border-box !important;
  mask-clip: content-box, border-box !important;
  -webkit-mask-origin: content-box, border-box !important;
  mask-origin: content-box, border-box !important;
  -webkit-mask-position: 0 0, 0 0 !important;
  mask-position: 0 0, 0 0 !important;
  -webkit-mask-size: auto, auto !important;
  mask-size: auto, auto !important;
  -webkit-mask-repeat: repeat, repeat !important;
  mask-repeat: repeat, repeat !important;
  pointer-events: none !important;
  z-index: 1 !important;
}

/* ========================================
   DROPDOWN & TRIGGER FIXES
   ======================================== */

/* Fix dropdown triggers */
[class*="__trigger"],
[class*="__dropdown"] {
  background: radial-gradient(885.95% 274.23% at 49.37%, #12141800 0%, #4a89ff40 100%), #1f1f2b66 !important;
  border-radius: 15px !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
}

[class*="__trigger"]:hover,
[class*="__dropdown"]:hover {
  background: radial-gradient(885.95% 274.23% at 49.37%, #12141800 0%, #4a89ff60 100%), #1f1f2b80 !important;
}

/* ========================================
   TEXT & HIGHLIGHT FIXES
   ======================================== */

/* Accent text color */
[class*="__titleAccent"],
[class*="__titleHighlight"],
[class*="__highlight"] {
  color: #4a89ff !important;
}

/* Ensure text is readable */
[class*="__title"],
[class*="__heading"],
[class*="__label"] {
  color: #fff !important;
  font-family: var(--font-mont), "Mont", sans-serif !important;
}

[class*="__text"],
[class*="__description"],
[class*="__subtitle"] {
  color: #b2b1d2 !important;
  font-family: var(--font-mont, "Mont", sans-serif) !important;
}

/* Prevent unwanted zoom/scroll on double-tap for mobile */
html {
  touch-action: manipulation !important;
  -webkit-text-size-adjust: 100% !important;
  text-size-adjust: 100% !important;
}

body {
  touch-action: manipulation !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch !important;
}

/* Prevent double-tap zoom on interactive elements */
button,
a,
input,
select,
textarea {
  touch-action: manipulation !important;
  -webkit-tap-highlight-color: transparent !important;
}

/* Ensure proper viewport behavior */
button, a {
  -webkit-touch-callout: none !important;
}

/* ========================================
   MOBILE RESPONSIVE FIXES
   ======================================== */

@media (max-width: 768px) {
  .hero-module-scss-module__uXESQa__goTo {
    width: 220px !important;
    height: 55px !important;
    min-height: 55px !important;
  }

  [class*="__writeBtn"],
  [class*="__pageBtn"],
  [class*="__primaryBtn"],
  [class*="__submitBtn"],
  [class*="__buyBtn"],
  [class*="__supportBtn"],
  [class*="__catalogBtn"],
  [class*="__popularBtn"] {
    height: 50px !important;
    font-size: 13px !important;
    padding: 0 20px !important;
  }
}

@media (max-width: 480px) {
  .hero-module-scss-module__uXESQa__goTo {
    width: min(280px, 100%) !important;
    height: 50px !important;
    min-height: 50px !important;
  }

  [class*="__writeBtn"],
  [class*="__pageBtn"],
  [class*="__primaryBtn"],
  [class*="__submitBtn"],
  [class*="__buyBtn"],
  [class*="__supportBtn"],
  [class*="__catalogBtn"],
  [class*="__popularBtn"] {
    height: 48px !important;
    font-size: 12px !important;
    padding: 0 15px !important;
    border-radius: 12px !important;
  }
  
  [class*="__card"] {
    border-radius: 15px !important;
  }
}

/* ========================================
   ACCESSIBILITY & FOCUS STATES
   ======================================== */

/* Skip to main content - hide by default, show on focus */
[class*="__skipToContent"],
a[href="#main-content"],
a[href="#main"] {
  position: absolute !important;
  top: -100px !important;
  left: 0 !important;
  z-index: 9999 !important;
  transition: top 0.3s ease !important;
}

[class*="__skipToContent"]:focus,
a[href="#main-content"]:focus,
a[href="#main"]:focus {
  top: 0 !important;
}

/* Focus visible for keyboard navigation */
[class*="__"]:focus-visible {
  outline: 2px solid #4a89ff !important;
  outline-offset: 2px !important;
}

/* ========================================
   LOADING & SPINNER FIXES
   ======================================== */

/* Ensure loading states are visible */
[class*="__loading"],
[class*="__spinner"] {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* ========================================
   FORM INPUT FIXES
   ======================================== */

/* Fix input fields */
input[class*="__"],
textarea[class*="__"],
select[class*="__"] {
  background: #232a3880 !important;
  border: 1px solid #343d52 !important;
  border-radius: 10px !important;
  color: #fff !important;
  font-family: var(--font-mont, "Mont", sans-serif) !important;
  padding: 12px 15px !important;
  transition: all 0.15s ease !important;
}

input[class*="__"]:focus,
textarea[class*="__"]:focus,
select[class*="__"]:focus {
  border-color: #4a89ff !important;
  outline: none !important;
  background: #232a3899 !important;
}

input[class*="__"]::placeholder,
textarea[class*="__"]::placeholder {
  color: #8a89a7 !important;
}

/* ========================================
   ANIMATION & REVEAL FIXES
   ======================================== */

/* Ensure reveal elements are hidden before visible */
.reveal-module-scss-module__G4qw1G__reveal:not([data-eager="true"]):not([data-visible="true"]) {
  opacity: 0 !important;
}

/* Smooth reveal transition */
.reveal-module-scss-module__G4qw1G__reveal {
  transition: opacity 0.5s ease, transform 0.5s ease, filter 0.5s ease !important;
}

/* Mask text: hidden before visible */
.mask-text-module-scss-module__ps7D3G__maskText:not([data-eager="true"]):not([data-visible="true"])
  .mask-text-module-scss-module__ps7D3G__inner {
  transform: translateY(105%) !important;
}
.mask-text-module-scss-module__ps7D3G__inner {
  transition: transform 0.6s cubic-bezier(0.33, 1, 0.68, 1) !important;
}

/* ========================================
   PRODUCT PAGE: PERIOD/PLAN TABS
   ======================================== */

/* Active period/plan tab */
[class*="__period"][data-active="true"],
[class*="__planTab"][data-active="true"],
[class*="__periodBtn"][data-active="true"] {
  background: linear-gradient(163deg, #ffffff80 0.12%, #7eb8ff80 99.94%), #4a89ff !important;
  color: #fff !important;
}

[class*="__period"],
[class*="__planTab"],
[class*="__periodBtn"] {
  transition: background 0.2s ease, color 0.2s ease !important;
  cursor: pointer !important;
}

/* ========================================
   WISHLIST BUTTON
   ======================================== */

.wishlist-active [class*="__wishlistIcon"],
.wishlist-active svg {
  color: #ff5858 !important;
  fill: #ff5858 !important;
}

/* ========================================
   GO-TO-CATALOG HERO BUTTON ALIGNMENT
   ======================================== */

/* Hero button row: button + arrow should sit inline */
[class*="__hero"] [class*="__goTo"],
[class*="__cta"] [class*="__goTo"] {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
}

[class*="__hero"] [class*="__arrow"],
[class*="__hero"] [class*="__arrowIcon"],
[class*="__cta"] [class*="__arrow"] {
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 55px !important;
  height: 55px !important;
  background: rgba(255,255,255,0.08) !important;
  border-radius: 15px !important;
  transition: background 0.15s ease !important;
}

[class*="__hero"] [class*="__arrow"]:hover,
[class*="__cta"] [class*="__arrow"]:hover {
  background: rgba(255,255,255,0.15) !important;
}

/* ========================================
   PRODUCT CARD GO-BUTTON
   ======================================== */

[class*="__goBtn"] {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  background: #232a38 !important;
  border-radius: 10px !important;
  padding: 0 14px !important;
  height: 38px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: #fff !important;
  transition: background 0.15s ease !important;
  white-space: nowrap !important;
  text-decoration: none !important;
}

[class*="__goBtn"]:hover {
  background: #2e3748 !important;
}

/* Preserve intentionally hidden export/hydration elements.
   Generic button fixes above use display: inline-flex !important, which can
   otherwise revive hidden controls after Cloudflare serves the static export. */
[hidden],
button[aria-hidden="true"],
a[aria-hidden="true"],
[role="button"][aria-hidden="true"],
.fr-hidden-social,
.fr-slide-hidden,
[style*="display:none" i],
[style*="display: none" i] {
  display: none !important;
}

/* Cloudflare/static export fallback: critical layout must not depend on
   reveal hydration to become visible. Keep these selectors separate so
   older browsers do not drop the header rule because of :has(). */
.header-module-scss-module__JsbOiq__wrapper {
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
}

body > .reveal-module-scss-module__G4qw1G__reveal {
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
}

.reveal-module-scss-module__G4qw1G__reveal:has(> .footer-module-scss-module__WbsKBG__footer) {
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
}

/* Catalog device tabs are not used on this static version. */
.navigation-module-scss-module__Qc--Ga__section {
  display: none !important;
}

/* Catalog sort dropdown is not available in the static export. Keeping the
   button visible makes it overlap the search input on Cloudflare. */
.catalog-preview-module-scss-module__7gR3NW__searchRight,
.catalog-preview-module-scss-module__7gR3NW__sortBtn {
  display: none !important;
}

.catalog-preview-module-scss-module__7gR3NW__searchBar {
  justify-content: flex-start !important;
  max-width: 520px !important;
}

.catalog-preview-module-scss-module__7gR3NW__searchLeft {
  flex: 1 1 auto !important;
  width: 100% !important;
}

/* Login page: social auth buttons are dead links in the static/Cloudflare build. */
.social-buttons-module-scss-module__JWujwG__grid,
.fr-hidden-social {
  display: none !important;
}