/* ================================
   BLACK FRIDAY THEME
   ================================ */

:root {
  /* Background Colors */
  --bf-bg-primary: #000;
  --bf-bg-secondary: #16181d;
  --bf-bg-gradient-dark: rgba(11, 12, 15, 1);
  --bf-bg-gradient-blue: rgba(31, 75, 141, 1);
  --bf-bg-transparent: transparent;

  /* Text Colors */
  --bf-text-primary: #fff;
  --bf-text-secondary: #8a92a8;
  --bf-text-muted: #a7aebe;

  /* Border Colors */
  --bf-border-primary: #707070;
  --bf-border-secondary: #6c7793;
  --bf-border-input: #575f75;
  --bf-border-light: #414858;

  /* Accent Colors */
  --bf-accent-blue: #2564df;
  --bf-accent-blue-light: #7ea3ec;
  --bf-accent-blue-lighter: #edf2fc;
  --bf-accent-red: #e07076;
  --bf-accent-green: #239343;
  --bf-accent-yellow: #f5c740;

  /* Gradients */
  --bf-gradient-mobile: linear-gradient(
    180deg,
    var(--bf-bg-gradient-dark) 0px,
    var(--bf-bg-gradient-dark) 272px,
    var(--bf-bg-gradient-blue) 400px,
    var(--bf-bg-gradient-dark) calc(100% - 1200px)
  );

  --bf-gradient-desktop: linear-gradient(
    180deg,
    var(--bf-bg-gradient-dark) 0px,
    var(--bf-bg-gradient-dark) 272px,
    var(--bf-bg-gradient-blue) 700px,
    var(--bf-bg-gradient-dark) calc(100% - 1200px)
  );
}

/* ================================
   BASE LAYOUT & BACKGROUND
   ================================ */

/* Main content background image - Applied to both Home and BlackFriday pages */
.black-friday-theme :is(main[data-page-type='Home'], main[data-page-type='BlackFriday']) {
  background-image: url('/black-friday-bubble.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: top;
  max-width: 1400px;
  margin: auto;
}

/* Adjust background position for BlackFriday page only */
.black-friday-theme main[data-page-type='BlackFriday'] {
  background-position: center 90px;
}

/* Body gradient background - Mobile first */
body.black-friday-theme:has(:is([data-page-type='Home'], [data-page-type='BlackFriday'])) {
  background: var(--bf-bg-primary) !important;
  background: var(--bf-gradient-mobile) !important;
}

/* Body gradient background - Desktop */
@media (min-width: 1000px) {
  body.black-friday-theme:has(:is([data-page-type='Home'], [data-page-type='BlackFriday'])) {
    background: var(--bf-bg-primary) !important;
    background: var(--bf-gradient-desktop) !important;
  }
}

/* ================================
   CAMPAIGN BAR
   ================================ */
.black-friday-theme [data-testid='campaign-bar'] {
  background-color: var(--bf-accent-blue) !important;
}

/* ================================
   HEADER
   ================================ */

/* Header background - Transparent on BF pages, black elsewhere */
.black-friday-theme header {
  background-color: var(--bf-bg-primary) !important;
}

.black-friday-theme:has(:is([data-page-type='Home'], [data-page-type='BlackFriday'])) header {
  background-color: transparent !important;
}

.black-friday-theme header [data-testid='checkout-header'] {
  color: var(--bf-text-secondary) !important;
}

/* Header - Logo border */
.black-friday-theme header [data-testid='logo'] {
  border: 1px solid var(--bf-text-primary) !important;
}
.black-friday-theme header [data-testid='logo'] figcaption {
  color: #fff !important;
}

/* Header - Navigation and search elements */
.black-friday-theme
  header
  :is(
    [data-testid='secondary-navigation'] a,
    [data-testid='store-drawer-selector'],
    [data-testid='mega-menu-button'],
    [data-testid='top-navigation'],
    [data-testid='search-input']
  ) {
  color: var(--bf-text-secondary) !important;
}

/* Header - Search input styling */
.black-friday-theme header [data-testid='search-input'] {
  border-color: var(--bf-border-input) !important;
  border-width: 1px !important;
}

.black-friday-theme header :is([data-testid='search-input'], [data-testid='search-input'] input) {
  background-color: var(--bf-bg-primary) !important;
}

.black-friday-theme header [data-testid='search-wrap'] {
  background-color: transparent !important;
}

/* Header - Search wrap container */
.black-friday-theme header [data-testid='search-wrap'].relative.flex.gap-4.p-4 {
  background-color: var(--bf-text-primary) !important;
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
}

/* Header - Quick search input */
.black-friday-theme header [data-testid='quick-search-input'].text-gray-900 {
  color: var(--bf-text-primary) !important;
}

/* Header - Secondary navigation border */
.black-friday-theme header [data-testid='secondary-navigation-wrap'] {
  border-bottom: none !important;
  border-top: 1px solid var(--bf-border-light) !important;
}

/* Header - Cart count badge */
.black-friday-theme header [data-testid='count-badge'] {
  background-color: var(--bf-accent-blue) !important;
  color: var(--bf-accent-blue-lighter) !important;
}

/* ================================
   FOOTER (Only on Home and BlackFriday pages)
   ================================ */
body.black-friday-theme:has(:is([data-page-type='Home'], [data-page-type='BlackFriday'])) footer {
  background-color: var(--bf-bg-primary) !important;
  color: var(--bf-text-primary) !important;
}

body.black-friday-theme:has(:is([data-page-type='Home'], [data-page-type='BlackFriday'])) footer a {
  color: var(--bf-text-primary) !important;
}

/* ================================
   ACCORDIONS (Disclosure components)
   ================================ */

/* Accordion - Remove margins from button and panel content */
.black-friday-theme
  :is([data-page-type='Home'], [data-page-type='BlackFriday'])
  :is(button[id^='headlessui-disclosure-button-'] > div > p, div[id^='headlessui-disclosure-panel-']) {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* Accordion - Panel text color */
.black-friday-theme
  :is([data-page-type='Home'], [data-page-type='BlackFriday'])
  div[id^='headlessui-disclosure-panel-']
  > div
  > p {
  color: var(--bf-text-primary) !important;
}

/* Accordion - Remove borders from container elements */
.black-friday-theme
  :is([data-page-type='Home'], [data-page-type='BlackFriday'])
  :is(div[class*='@container/terms-conditions'], div[data-headlessui-state] > div) {
  border: 0 !important;
}

/* Accordion - Group spacing */
.black-friday-theme
  :is([data-page-type='Home'], [data-page-type='BlackFriday'])
  div.max-w-\[1400px\]
  div[data-headlessui-state] {
  margin-bottom: 16px !important;
}

/* Accordion - Remove bottom margin from open panels */
.black-friday-theme
  :is([data-page-type='Home'], [data-page-type='BlackFriday'])
  div[id^='headlessui-disclosure-panel-'][data-headlessui-state='open'] {
  margin-bottom: 0 !important;
}

/* Accordion - Button and panel styling */
.black-friday-theme
  :is([data-page-type='Home'], [data-page-type='BlackFriday'])
  :is(button[id^='headlessui-disclosure-button-'], div[id^='headlessui-disclosure-panel-']) {
  border: 1px solid var(--bf-border-primary);
  background: rgba(0, 0, 0, 0.8);
  padding: 16px !important;
  color: var(--bf-text-primary);
}

/* Accordion - Remove top border from panel (attached to button) */
.black-friday-theme
  :is([data-page-type='Home'], [data-page-type='BlackFriday'])
  div[id^='headlessui-disclosure-panel-'] {
  border-top: none !important;
}

/* ================================
   BREADCRUMBS
   ================================ */
.black-friday-theme :is([data-page-type='Home'], [data-page-type='BlackFriday']) div[data-testid='breadcrumb'] {
  color: var(--bf-text-secondary) !important;
}

/* ================================
   PRODUCT CARDS & LISTINGS
   ================================ */

/* Recently viewed section */
body.black-friday-theme:has(:is([data-page-type='Home'], [data-page-type='BlackFriday']))
  [data-testid='recently-viewed'] {
  background: var(--bf-bg-transparent) !important;
  color: var(--bf-text-primary) !important;
}

/* Favorite button */
.black-friday-theme
  :is([data-page-type='Home'], [data-page-type='BlackFriday'])
  button[data-testid='favourite-button'] {
  color: var(--bf-bg-primary) !important;
}

/* Product card - Text elements (white color) */
.black-friday-theme
  :is([data-page-type='Home'], [data-page-type='BlackFriday'])
  :is(
    [data-testid='product-card-info'],
    [data-testid='rating'] > span,
    [data-testid='rating'] > span > span,
    [data-testid='product-card-strike-price'],
    button[data-testid='delivery-terms'],
    [data-testid='product-price'] span,
    [data-testid='status-indicator']
  ),
body.black-friday-theme:has(:is([data-page-type='Home'], [data-page-type='BlackFriday']))
  :is(
    [data-testid='product-card-info'],
    [data-testid='rating'] > span,
    [data-testid='rating'] > span > span,
    [data-testid='product-card-strike-price'],
    button[data-testid='delivery-terms'],
    [data-testid='product-price'] span,
    [data-testid='status-indicator'],
    [data-testid='product-card-b2b-price']
  ) {
  color: var(--bf-text-primary) !important;
}

/* Product card - Discount price accent */
.black-friday-theme
  :is([data-page-type='Home'], [data-page-type='BlackFriday'])
  [data-testid='product-price']
  span.text-red-500,
body.black-friday-theme:has(:is([data-page-type='Home'], [data-page-type='BlackFriday']))
  [data-testid='product-price']
  span.text-red-500 {
  color: var(--bf-accent-red) !important;
}

/* ================================
   PRODUCT LISTING FILTERS
   ================================ */

/* Filter bar background and text */
.black-friday-theme
  :is([data-page-type='Home'], [data-page-type='BlackFriday'])
  [data-testid='product-list-filter-bar'] {
  background-color: var(--bf-bg-primary) !important;
  color: var(--bf-text-primary) !important;
  padding: 15px !important;
}

/* Selected filters styling */
.black-friday-theme :is([data-page-type='Home'], [data-page-type='BlackFriday']) #selected-filters button {
  background-color: var(--bf-bg-primary) !important;
  color: var(--bf-text-primary) !important;
}

/* Toggle switch color */
.black-friday-theme
  :is([data-page-type='Home'], [data-page-type='BlackFriday'])
  [data-testid='product-list-filter-bar']
  label[data-testid='switch']
  div.bg-blue-500 {
  background-color: var(--bf-accent-blue-light) !important;
}

.black-friday-theme
  :is([data-page-type='Home'], [data-page-type='BlackFriday'])
  [data-testid='product-list-filter-bar']
  label[data-testid='switch']
  div.bg-gray-200 {
  background-color: var(--bf-border-primary) !important;
}

/* Load more button */
.black-friday-theme :is([data-page-type='Home'], [data-page-type='BlackFriday']) [data-testid='plp-load-more'] {
  border: 1px solid var(--bf-text-primary) !important;
  color: var(--bf-text-primary) !important;
}

.black-friday-theme :is([data-page-type='Home'], [data-page-type='BlackFriday']) [data-testid='plp-load-more-text'] {
  color: var(--bf-text-primary) !important;
}

/* ================================
   NEWSLETTER
   ================================ */

/* Newsletter wrapper styling */
body.black-friday-theme:has(:is([data-page-type='Home'], [data-page-type='BlackFriday']))
  div[data-testid='newsletter-wrapper'] {
  background-color: var(--bf-bg-secondary) !important;
  color: var(--bf-text-primary) !important;
  border: 1px solid var(--bf-border-secondary);
}

/* Newsletter form inputs */
body.black-friday-theme:has(:is([data-page-type='Home'], [data-page-type='BlackFriday']))
  form[data-testid='newsletter-form']
  :is([data-testid='checkbox'], input[inputmode='text']) {
  border: 1px solid var(--bf-text-muted) !important;
  background: var(--bf-bg-transparent) !important;
  color: var(--bf-text-primary) !important;
}

/* Newsletter form labels */
body.black-friday-theme:has(:is([data-page-type='Home'], [data-page-type='BlackFriday']))
  form[data-testid='newsletter-form']
  label {
  color: var(--bf-text-muted) !important;
}

/* Newsletter submit button */
body.black-friday-theme:has(:is([data-page-type='Home'], [data-page-type='BlackFriday']))
  [data-testid='newsletter-form-button'] {
  background-color: var(--bf-accent-blue) !important;
}

/* Newsletter form text and links */
body.black-friday-theme:has(:is([data-page-type='Home'], [data-page-type='BlackFriday']))
  :is([data-testid='newsletter-form'], [data-testid='newsletter-form-link']) {
  color: var(--bf-text-primary) !important;
}

/* Newsletter alert messages */
body.black-friday-theme:has(:is([data-page-type='Home'], [data-page-type='BlackFriday']))
  [data-testid='newsletter-wrapper']
  [data-testid='alert'].bg-green-100 {
  background-color: var(--bf-accent-green) !important;
}

body.black-friday-theme:has(:is([data-page-type='Home'], [data-page-type='BlackFriday']))
  [data-testid='newsletter-wrapper']
  [data-testid='alert'].bg-yellow-100 {
  background-color: var(--bf-accent-yellow) !important;
}

/* ================================
   BUTTONS & INTERACTIONS
   ================================ */

/* Button list styling */
.black-friday-theme :is([data-page-type='Home'], [data-page-type='BlackFriday']) [data-testid='button-list'] {
  border: 1px solid var(--bf-border-primary) !important;
  background: var(--bf-bg-transparent) !important;
  color: var(--bf-text-primary) !important;
}

/* Carousel navigation buttons */
.black-friday-theme :is([data-page-type='Home'], [data-page-type='BlackFriday']) [data-testid='carousel-button'],
body.black-friday-theme:has(:is([data-page-type='Home'], [data-page-type='BlackFriday']))
  [data-testid='carousel-button'] {
  background-color: var(--bf-bg-primary) !important;
  color: var(--bf-text-primary) !important;
}

/* ================================
   TYPOGRAPHY & TEXT ELEMENTS
   ================================ */

/* Text paragraph elements and headings */
.black-friday-theme
  :is([data-page-type='Home'], [data-page-type='BlackFriday'])
  :is(
    [data-testid='text'],
    [data-testid='text'] h1,
    [data-testid='text'] h2,
    [data-testid='text'] h3,
    [data-testid='text'] a
  ) {
  color: var(--bf-text-primary) !important;
}

/* Standalone headings on frontpage */
.black-friday-theme :is([data-page-type='Home'], [data-page-type='BlackFriday']) h3[data-testid='heading'] {
  color: var(--bf-text-primary) !important;
}

/* USP paragraph items */
body.black-friday-theme:has(:is([data-page-type='Home'], [data-page-type='BlackFriday'])) a[data-testid='usp'] {
  color: var(--bf-text-primary) !important;
}

/* Dynamic Yield recommendations heading */
.black-friday-theme
  :is([data-page-type='Home'], [data-page-type='BlackFriday'])
  [data-testid='recommendations-dynamic-yield']
  > h3 {
  color: var(--bf-text-primary) !important;
}

/* ================================
   RESPONSIVE - MOBILE
   ================================ */

/* Categories paragraph mobile styling */
@media (max-width: 767px) {
  .black-friday-theme
    :is([data-page-type='Home'], [data-page-type='BlackFriday'])
    [data-testid='categories-paragraph']
    li {
    color: var(--bf-text-primary) !important;
    background-color: var(--bf-bg-primary) !important;
    border-color: var(--bf-border-secondary);
  }
}