/* ===== GLOBAL STYLES ===== */
/* Base styles for all pages: variables, resets, typography, utilities */

/* ===== 0. FOUC PREVENTION ===== */
/* Prevent flash of unstyled content during initial page load */

/* Default: hide body on all browsers */
body {
  opacity: 0;
  visibility: hidden;
}

/* Hide body until page is ready */
html.page-loading body {
  opacity: 0 !important;
  visibility: hidden !important;
}

/* Show body when ready */
html.page-ready body {
  opacity: 1 !important;
  visibility: visible !important;
  transition: opacity 0.15s ease-in;
}

/* Extra aggressive FOUC prevention for Firefox */
@-moz-document url-prefix() {
  body {
    opacity: 0 !important;
    visibility: hidden !important;
  }

  html.page-ready body {
    opacity: 1 !important;
    visibility: visible !important;
    transition: opacity 0.15s ease-in;
  }
}

/* ===== 1. CSS VARIABLES ===== */
:root {
  --font-size-mobile: 18px;
  --font-size-desktop: 16px;
  --heading-mobile: 24px;
  --heading-desktop: 32px;
  --icon-color: #ff9500;
  --icon-scale: 1;
}

/* ===== 2. FOCUS & TAP RESETS ===== */
/* No default selection outline */
button:focus,
input:focus,
select:focus,
textarea:focus,
a:focus,
*:focus {
    outline: none !important;
}

/* Prevent tap highlight globally on all elements */
* {
    -webkit-tap-highlight-color: transparent !important;
    -webkit-touch-callout: none;
}

/* Prevent text selection on interactive elements on touch devices */
button,
a:not([contenteditable]),
.btn,
.nav-button,
.product-card,
.carousel-slide,
.format-option,
.counter-button,
[role="button"],
[onclick] {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
}

/* Allow selection in text input fields and content areas */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="url"],
textarea,
[contenteditable="true"],
.product-description,
.review-text,
.comment-text {
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    user-select: text;
}

/* ===== 3. GLOBAL RESETS ===== */
html, body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

body {
  display: flex;
  flex-direction: column;
  font-family: Montserrat, sans-serif;
  font-size: var(--font-size-mobile);
  background-color: #121212;
  color: #E0E0E0;
  width: 100%;
  box-sizing: border-box;
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
}

body.popup-open {
  overflow: hidden;
}

main { flex: 1 0 auto; }

*, *::before, *::after {
  font-family: inherit;
  box-sizing: border-box;
}

button, input, select, textarea { font-family: inherit; }

/* ===== 4. Z-INDEX ORGANIZATION ===== */
.header { z-index: 999; }
.bottom-nav { z-index: 1001; }
.products-header { z-index: 998; }
.gallery-popup-overlay,
.favorites-popup-overlay,
.picker-popup-overlay,
.cart-popup-overlay,
.product-popup-overlay,
.suggestions-popup-overlay { z-index: 10000; }
.faq-popup-overlay { z-index: 20000; }
.gallery-zoom-overlay { z-index: 20000; }
.confirmation-modal-overlay { z-index: 10001; }
.toast-notification { z-index: 10003; }

/* ===== 5. SVG ICONS - GLOBAL STYLES ===== */
svg {
  color: var(--icon-color);
}

svg path,
svg circle,
svg rect {
  fill: var(--icon-color);
  stroke: var(--icon-color);
}

.header-logo,
.header-logo-compact,
.header-logo-compact-small {
  color: var(--icon-color);
  fill: var(--icon-color);
}

/* ===== 6. BUTTON UTILITY CLASSES ===== */
.btn-icon {
  background: transparent;
  border: none;
  cursor: pointer;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: all 0.2s;
}

@media (hover: hover) {
  .btn-icon:hover svg {
    color: #fff;
    transform: scale(1.1);
  }

  .btn-icon:hover svg path,
  .btn-icon:hover svg circle,
  .btn-icon:hover svg rect {
    fill: #fff;
    stroke: #fff;
  }
}

.btn-icon svg {
  color: #818181;
  transition: color 0.2s;
}

.btn-icon svg path,
.btn-icon svg circle,
.btn-icon svg rect {
  fill: #818181;
  stroke: #818181;
  transition: fill 0.2s, stroke 0.2s;
}

.btn-carousel {
  background: rgba(0, 0, 0, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: white;
  font-size: 24px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s;
  user-select: none;
  padding: 0;
}

@media (hover: hover) {
  .btn-carousel:hover {
    background: rgba(0, 0, 0, 0.8);
  }
}

.btn-filter {
  background-color: #1e1e1e;
  border: 1px solid #414141;
  border-radius: 40px;
  padding: 7px;
  cursor: pointer;
  transition: background-color 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
}

@media (hover: hover) {
  .btn-filter:hover {
    background-color: #2b2b2b;
    border: 1px solid #8f8f8f;
  }
}

.btn-favorite {
  background: transparent;
  border: 1px solid #414141;
  border-radius: 50%;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s;
  flex-shrink: 0;
  padding: 0;
  position: relative;
}

@media (hover: hover) {
  .btn-favorite:hover {
    background-color: rgba(0, 0, 0, 0.3);
    border: 1px solid #8f8f8f;
  }

  .btn-favorite:hover svg:not(.favorite-hover) {
    display: none;
  }

  .btn-favorite:hover svg.favorite-hover {
    display: block;
  }
}

.btn-favorite svg {
  width: 16px;
  height: 16px;
  color: #818181;
  fill: #818181;
}

.btn-favorite.is-favorite svg {
  color: #e91e63;
  fill: #e91e63;
}

.btn-favorite.is-favorite svg.favorite-hover {
  display: none;
}

/* ===== 7. RESPONSIVE TYPOGRAPHY ===== */
@media (min-width: 768px) {
  body { font-size: var(--font-size-desktop); }
  h1 { font-size: var(--heading-desktop); }
}

/* ===== 8. UTILITY CLASSES ===== */
.desktop-only { display: flex; }
.mobile-only { display: none; }

@media (max-width: 1024px) {
  .desktop-only { display: none !important; }
  .mobile-only { display: flex !important; }
}