/*********************************************
 * 1) GLOBAL & BASE STYLES
 *********************************************/
.theme-toggle {
  position: fixed;
  bottom: 5px;
  left: 5px;
  z-index: 9999; /* stay on top */
  width: 50px;
  height: 50px;
  border: none;
  background: none;
  color: white;
  font-size: 24px;
  border: none;
  cursor: pointer;
  color: var(--primary);
}

.theme-toggle:hover {
  transform: scale(1.1);
}
/* Global Resets & Defaults */

body {
  font-family: 'Courier New', monospace;
  margin: 0;
  font-size: 1rem; /* base */
  background-color: #f8ebd639; /* light cream background */
}

body.modal-open {
  overflow: hidden;
}

a:active {
  color: rgb(0, 0, 255);
  text-decoration: none;
}
a:focus {
  text-decoration: none;
}
a:hover {
  color: gray;
  text-decoration: none;
}
/* A11y helper: hide visually but keep for screen readers */
.visually-hidden {
  position: absolute !important;
  height: 1px;
  width: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
}
:root {
  --primary: #ff69b4; /* main brand pink color */
  --secondary: #ffc0cb; /* main brand background / supporting color */
  --accent: rgba(251, 207, 207, 0.261); /*soft pink*/
  --hover: #ff85c2; /* hover or interaction color */
  --border: #ff69b4; /* main brand pink color */
  --border-start: #ff69b4; /* main brand pink color */
  --border-end: #ffd740; /* gold lucky reel modal */
  --surface: rgba(245, 245, 245, 0.712); /* light neutral - tags box background */
  --pulse-shadow-small: 0 0 10px rgba(255, 105, 180, 0.8);
  --pulse-shadow-big: 0 0 20px rgba(255, 105, 180, 1);
  --shadow-color: #ff69b47a; /* main brand - pink translucent */
  --search-hue: 30deg; /* default hue for search button */
}

:root.alt-theme {
  --primary: #82b77d; /* 2nd brand pistachio green color */
  --secondary: #f1f8f1; /* 2nd brand background / supporting color  */
  --accent: rgba(216, 251, 207, 0.479); /*soft green*/
  --hover: #a4d3a2; /* hover or interaction color */
  --border: #82b77d; /* 2nd brand pistachio green color */
  --border-start: #82b77d; /* 2nd brand pistachio green color */
  --border-end: #ffd740; /* gold - lucky reel modal*/
  --surface: #dde8d9c0; /* darker-light neutral - tags box background */
  --pulse-shadow-small: 0 0 10px rgba(130, 183, 125, 0.8);
  --pulse-shadow-big: 0 0 20px rgba(130, 183, 125, 1);
  --shadow-color: #82b77d7a; /*2nd brand - soft translucent */
  --search-hue: 8deg; /* slightly shift search button hue for alt-theme */
}
.alt-logo {
  display: none;
} /* only show light version by default */
/* When alt-theme is active, swap logos */
:root.alt-theme .main-logo {
  display: none;
}
:root.alt-theme .alt-logo {
  display: inline;
}

.rolling-banner,
.nav-button,
.notification-box-pulse .title-bar,
.styled-button,
.notification-box-large .title-bar-large,
.hamburger-menu span,
.nav-menu a:hover,
.newsletter button,
.plus-add-to-set,
.checkout-button,
.add-to-set,
.accordion-header,
.accordion-header-faq,
.read-more-btn,
.share-btn,
.dot,
form button,
.size-btn.active-size {
  background-color: var(--primary);
}

.nail-tips-title,
.carousel-btn,
#input-form h2,
#login-form a:hover,
.reviews-title,
.site-footer ul li a:hover,
.hashtag-toggle,
body.catalogue-page .hashtag-toggle,
.close-modal:hover,
.size-guide-link:hover a,
.catchphrase {
  color: var(--primary);
}

.header,
.sidebar,
.nav-menu,
body.catalogue-page .sidebar,
.hand-btn, #tag-indicator #mode-toggle,
.tag-indicator #mode-toggle {
  background-color: var(--secondary);
}

.accordion-header:hover,
.read-more-btn:hover,
.share-btn:hover,
form button:hover,
.hand-btn:hover {
  background-color: var(--hover);
}

.sidebar,
body.catalogue-page .sidebar,
.filter-dropdow,
.preview-container,
.review-img,
.size-btn.active-size,
#input-form input:focus,
#input-form select:focus,
#input-form textarea:focus,
body.catalogue-page .search-container .search-input,
.hand-btn,
.size-btn,
.modal-body img,
.accordion-item 
#tag-indicator,
.tag-indicator,
#tag-indicator #mode-toggle,
.tag-indicator #mode-toggle,
#tag-indicator .chip,
.tag-indicator .chip {
  border-color: var(--border) !important;
}

.product-card img {
  border-bottom: 2px solid var(--border);
}

.tagsbox, .preview-grid .slot  {
  background-color: var(--surface);
}
.preview-container,
#tag-indicator,
.tag-indicator {
  box-shadow: 0 2px 6px var(--shadow-color);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}