/* Global shared styles.
   Foundation work (per css-ada-modernization-plan-v2.md):
   - Defines cascade layers and tokens
   - Adds accessibility primitives (focus, reduced motion, visually-hidden)

   NOTE: Existing alert/button rules below are intentionally left unlayered for now
   to avoid unintended precedence changes during the controlled migration. */

@layer reset, base, components, utilities, legacy, pages, overrides;

/* Ask Scout CTA rotating border animation */
@property --ask-scout-aura-angle {
  syntax: "<angle>";
  inherits: true;
  initial-value: 0deg;
}

@keyframes ask-scout-aura-orbit {
  from {
    --ask-scout-aura-angle: 0deg;
  }
  to {
    --ask-scout-aura-angle: 360deg;
  }
}

@layer base {
  /* Prevent horizontal overflow on iOS Safari caused by 100vw elements */
  html,
  body {
    overflow-x: hidden;
  }

  :root {
    --focus-ring-color: #edad01;
    --focus-ring-offset: 3px;
    --header-green: #8c9500;
    --btn-yellow-bg: #edad01;
    --btn-yellow-bg-hover: #c18d00;
    --btn-yellow-text: #000;
    --btn-yellow-text-hover: #fff;
    --btn-yellow-padding: var(--btn-transparent-padding);
    --btn-yellow-font-size: var(--btn-transparent-font-size);
    --btn-yellow-radius: var(--btn-transparent-radius);
    --btn-yellow-min-width: var(--btn-transparent-min-width);
    --btn-transparent-border: #ffffff50;
    --btn-transparent-text: #fff;
    --btn-transparent-radius: 50px;
    --btn-transparent-padding: 10px 20px 11px;
    --btn-transparent-font-size: 15px;
    --btn-transparent-min-width: 140px;
    --alert-success-bg: #172213;
    --alert-success-border: #2f5522;
    --alert-neg-bg: #281716;
    --alert-neg-border: #7c3935;
    --alert-info-bg: #514500;
    --alert-info-border: #ceb83d;
    --action-danger: #e74c3c;
    --action-danger-hover: #ff6b5b;
    --text-headline: var(--white, #ffffff);
    --text-subhead: var(--lt-gray, #999999);
    --text-body: var(--muted, #bdbdbd);
    --text-eyebrow: var(--btn-yellow-bg);
    --input-bg: #333333;
    --input-border: #aaaaaa;
    --input-text: var(--text-headline);
    --surface-card: #1d1d1d;
    --surface-card-border: #444444;
    --font-barlow: 'Barlow Condensed', sans-serif;
    --font-jost: 'Jost', sans-serif;
  }

  /* Global pointer cursor for all interactive elements */
  a,
  button,
  [role="button"],
  input[type="submit"],
  input[type="button"],
  input[type="reset"],
  input[type="checkbox"],
  input[type="radio"],
  label[for],
  select,
  summary {
    cursor: pointer;
  }

  /* FontAwesome 6 override - fixes icons when legacy style.css is loaded */
  /* Legacy FA4 uses font-family: FontAwesome; font-weight: 400 which breaks FA6 */
  .fa-solid,
  .fas {
    font-family: 'Font Awesome 6 Free' !important;
    font-weight: 900 !important;
  }
  .fa-regular,
  .far {
    font-family: 'Font Awesome 6 Free' !important;
    font-weight: 400 !important;
  }
  .fa-brands,
  .fab {
    font-family: 'Font Awesome 6 Brands' !important;
    font-weight: 400 !important;
  }

  input[type="text"],
  input[type="password"],
  input[type="email"],
  input[type="search"],
  input[type="tel"],
  input[type="url"],
  textarea,
  select {
    border: 1px solid var(--input-border);
    background: var(--input-bg);
    color: var(--input-text);
    caret-color: white;
  }

  input:-webkit-autofill,
  input:-webkit-autofill:hover,
  input:-webkit-autofill:focus,
  textarea:-webkit-autofill,
  textarea:-webkit-autofill:hover,
  textarea:-webkit-autofill:focus,
  select:-webkit-autofill,
  select:-webkit-autofill:hover,
  select:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--input-text) !important;
    box-shadow: 0 0 0 1000px var(--input-bg) inset !important;
    transition: background-color 9999s ease-out 0s !important;
  }

}

@layer utilities {
  .visually-hidden,
  .sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
  }

  a:focus-visible,
  button:focus-visible,
  [role="button"]:focus-visible,
  [tabindex]:not([tabindex="-1"]):focus-visible {
    outline: 3px solid var(--focus-ring-color) !important;
    outline-offset: var(--focus-ring-offset) !important;
  }

  @media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }
  }

  .link-cue:hover,
  .link-cue:focus-visible {
    text-decoration: underline !important;
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
  }
}

@layer components {
  /* Global typography classes for modernized pages. */
  .site-eyebrow {
    display: inline-flex;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    color: var(--text-eyebrow);
    font-weight: 600;
  }

  .site-h1 {
    font-family: var(--font-barlow);
    font-size: clamp(32px, 5vw, 48px);
    font-weight: 600;
    line-height: 1.1;
    color: var(--text-headline);
    margin: 0 0 16px;
  }

  .site-h2 {
    font-family: var(--font-barlow);
    font-size: clamp(26px, 4vw, 36px);
    font-weight: 600;
    line-height: 1.15;
    color: var(--text-headline);
    margin: 0 0 14px;
  }

  .site-h3 {
    font-family: var(--font-barlow);
    font-size: clamp(20px, 3vw, 26px);
    font-weight: 600;
    line-height: 1.2;
    color: var(--text-headline);
    margin: 0 0 12px;
  }

  .site-subhead {
    font-family: var(--font-jost);
    font-size: 18px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--text-subhead);
    margin: 0 0 12px;
  }

  .site-body {
    font-family: var(--font-jost);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.7;
    color: var(--text-body);
    margin: 0;
  }

  .site-body strong {
    color: var(--text-headline);
    font-weight: 600;
  }

  .site-content-width {
    /* min() replaced for minifier compatibility */
    width: 92%;
    max-width: 1080px;
    margin-left: auto;
    margin-right: auto;
  }

  .site-loader {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .site-loader--block {
    width: 100%;
    min-height: 60px;
  }

  .site-loader--overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 15, 15, 0.6);
    z-index: 2000;
  }

  .site-loader__spinner {
    width: clamp(48px, 10vw, 72px);
    height: clamp(48px, 10vw, 72px);
    background-image: url('/images/abs-icon.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    animation: site-loader-spin 1.2s linear infinite;
  }

  /* Page preloader - shown while page loads */
  .page-preloader {
    position: fixed;
    inset: 0;
    background: #0f0f0f;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.3s ease, visibility 0.3s ease;
  }

  .page-preloader.loaded {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }

  .page-preloader__spinner {
    width: clamp(48px, 10vw, 72px);
    height: clamp(48px, 10vw, 72px);
    background-image: url('/images/abs-icon.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    animation: site-loader-spin 1.2s linear infinite;
  }

  @keyframes site-loader-spin {
    to {
      transform: rotate(360deg);
    }
  }

  .back-to-top {
    position: fixed;
    right: 24px;
    bottom: 24px;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid var(--surface-card-border);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff !important;
    font-size: 16px;
    z-index: 1500;
    text-decoration: none;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.3s ease, visibility 0.3s ease, background 0.2s ease, border-color 0.2s ease;
  }

  .back-to-top.is-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  .back-to-top:hover,
  .back-to-top:focus {
    background: rgba(255, 255, 255, 0.16);
    border-color: var(--btn-yellow-bg);
    color: #fff !important;
  }

  @media (max-width: 767px) {
    .back-to-top {
      right: 16px;
      bottom: calc(16px + env(safe-area-inset-bottom, 0px));
      width: 44px;
      height: 44px;
      font-size: 16px;
    }
  }

  .scout-placeholder-text {
    position: absolute;
    left: var(--scout-placeholder-left, 16px);
    top: 0;
    transform: none;
    width: calc(100% - var(--scout-placeholder-right, 80px));
    height: 100%;
    color: #fff;
    font-family: 'Jost', sans-serif;
    font-size: 16px;
    line-height: 1.3;
    display: flex;
    align-items: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: clip;
    text-align: left;
    pointer-events: none;
    opacity: 1;
    transition: opacity 1s ease;
    z-index: 2;
    /* Fade mask moved to parent wrapper (.home-scout-input-wrap, .scout-search-input-wrap, .scout-search-box) */
  }
  .scout-placeholder-text .scout-placeholder-text-inner {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    transform: translateX(0);
    transition: transform 0.12s linear;
  }
  /* Blinking cursor after placeholder text */
  .scout-placeholder-text .scout-placeholder-text-inner::after {
    content: "";
    display: inline-block;
    width: 2px;
    height: 20px;
    background: var(--scout-yellow, #ffd314);
    margin-left: 1px;
    animation: scout-cursor-blink 1s step-end infinite;
  }
  @keyframes scout-cursor-blink {
    0%, 50% { opacity: 1; }
    51%, 100% { opacity: 0; }
  }
  /* Hide blinking cursor when any input in the same container is focused */
  .scout-search-wrap:has(:focus) .scout-placeholder-text-inner::after,
  .home-scout-input-wrap:has(:focus) .scout-placeholder-text-inner::after,
  .scout-search-input-wrap:has(:focus) .scout-placeholder-text-inner::after,
  .scout-search-box:has(:focus) .scout-placeholder-text-inner::after {
    display: none !important;
  }
  @media (max-width: 767px) {
    .scout-placeholder-text {
      font-size: 14px;
    }
    .scout-placeholder-text .scout-placeholder-text-inner::after {
      height: 16px;
    }
  }
  .scout-placeholder-text.is-fading {
    opacity: 0;
  }

  /* Ask Scout CTA Component - reusable call-to-action for Scout */
  .ask-scout-cta-wrap {
    /* min() replaced for minifier compatibility */
    width: 92%;
    max-width: 1080px;
    margin: 0 auto;
  }

  .ask-scout-cta {
    position: relative;
    border-radius: 16px;
    margin: 24px 0;
    padding: 2px;
    background: transparent;
  }

  .ask-scout-cta:hover .ask-scout-cta-inner {
    border-color: rgba(255, 211, 20, 0.4);
  }

  .ask-scout-cta:hover .ask-scout-cta-btn {
    filter: brightness(1.1);
  }

  .ask-scout-cta-inner {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 16px 19px 16px;
    border-radius: 14px;
    border: 1px solid rgba(255, 211, 20, 0.25);
    overflow: hidden;
    background: linear-gradient(135deg, #121215 0%, #0d0d10 50%, #121215 100%);
    transition: border-color 0.3s ease;
  }

  /* Northern Lights animated background - base layer */
  .ask-scout-cta-inner::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
      radial-gradient(ellipse 120% 100% at 10% 30%, rgba(52, 168, 83, 0.35) 0%, transparent 50%),
      radial-gradient(ellipse 100% 90% at 90% 60%, rgba(49, 134, 255, 0.3) 0%, transparent 50%),
      radial-gradient(ellipse 110% 80% at 50% 10%, rgba(255, 211, 20, 0.25) 0%, transparent 45%),
      radial-gradient(ellipse 90% 100% at 0% 80%, rgba(138, 43, 226, 0.2) 0%, transparent 50%);
    animation: ask-scout-aurora-pulse 5s ease-in-out infinite;
    pointer-events: none;
    z-index: 0;
  }

  /* Shimmer overlay layer - faster, more dynamic */
  .ask-scout-cta-inner::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
      radial-gradient(ellipse 80% 60% at 30% 40%, rgba(255, 255, 255, 0.08) 0%, transparent 40%),
      radial-gradient(ellipse 60% 50% at 70% 70%, rgba(255, 255, 255, 0.06) 0%, transparent 35%),
      radial-gradient(ellipse 50% 40% at 80% 20%, rgba(255, 211, 20, 0.15) 0%, transparent 40%);
    animation: ask-scout-shimmer 2.5s ease-in-out infinite alternate;
    pointer-events: none;
    z-index: 0;
  }

  @keyframes ask-scout-aurora-pulse {
    0%, 100% {
      opacity: 0.7;
      filter: blur(0px);
    }
    33% {
      opacity: 1;
      filter: blur(2px);
    }
    66% {
      opacity: 0.85;
      filter: blur(1px);
    }
  }

  @keyframes ask-scout-shimmer {
    0% {
      opacity: 0.4;
      transform: scale(1) rotate(0deg);
    }
    50% {
      opacity: 0.9;
      transform: scale(1.1) rotate(1deg);
    }
    100% {
      opacity: 0.6;
      transform: scale(0.95) rotate(-1deg);
    }
  }

  .ask-scout-cta-copy {
    display: flex;
    flex-direction: column;
    gap: 6px;
    position: relative;
    z-index: 2;
    flex: 1;
  }

  .ask-scout-cta-title {
    color: var(--btn-yellow-bg, #edad01);
    font-family: var(--font-jost, 'Jost', sans-serif);
    font-size: 24px;
    font-weight: 600;
  }

  .ask-scout-cta-text {
    color: #c5c5c5;
    font-family: var(--font-jost, 'Jost', sans-serif);
    font-size: 16px;
    line-height: 1.5;
    position: relative;
    z-index: 2;
  }

  .ask-scout-cta-btn-wrap {
    position: relative;
    z-index: 2;
    flex-shrink: 0;
    border-radius: 999px;
    overflow: visible;
    padding-left: 22px;
  }

  .ask-scout-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px 13px 33px;
    border-radius: 999px;
    border: 2px solid transparent;
    background:
      linear-gradient(#111, #111) padding-box,
      conic-gradient(
        from var(--ask-scout-aura-angle, 0deg),
        transparent 0deg,
        transparent 25deg,
        rgba(52, 168, 83, 0.9) 60deg,
        rgba(255, 211, 20, 0.9) 100deg,
        rgba(255, 70, 65, 0.9) 140deg,
        rgba(49, 134, 255, 0.9) 180deg,
        rgba(49, 134, 255, 0.6) 240deg,
        rgba(49, 134, 255, 0.3) 300deg,
        transparent 360deg
      ) border-box;
    color: #fdf1b0;
    font-family: var(--font-barlow, 'Barlow Condensed', sans-serif);
    font-size: 16px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.4);
    position: relative;
    z-index: 1;
    overflow: hidden;
    animation: ask-scout-aura-orbit 4s linear infinite;
    transition: filter 0.3s ease;
  }

  .ask-scout-cta-btn > * {
    position: relative;
    z-index: 1;
  }

  .ask-scout-cta-icon {
    width: auto;
    height: 24px;
  }

  .ask-scout-cta-icon--floating {
    position: absolute;
    left: -25px;
    top: 64%;
    transform: translateY(-50%);
    width: 84px;
    height: auto;
    filter: drop-shadow(-3px -3px 8px rgb(0, 0, 0));
    z-index: 3;
    pointer-events: none;
  }

  /* Mobile responsive styles for Ask Scout CTA */
  /* At 767px: Keep button/dog in lower-right corner, don't let headline reflow */
  @media (max-width: 767px) {
    .ask-scout-cta-inner {
      flex-wrap: wrap;
      padding: 16px 20px;
      gap: 12px;
    }

    .ask-scout-cta-copy {
      flex: 1 1 60%;
      min-width: 180px;
      gap: 8px;
      padding-right: 150px; /* Clearance for absolutely positioned dog/button */
    }

    .ask-scout-cta-title {
      font-size: 20px;
    }

    .ask-scout-cta-text {
      font-size: 14px;
    }

    .ask-scout-cta-btn-wrap {
      position: absolute;
      right: 16px;
      bottom: auto;
      padding-left: 22px;
      width: auto;
    }

    .ask-scout-cta-btn {
      padding: 10px 18px 11px 26px;
      font-size: 14px;
      white-space: nowrap;
    }

    .ask-scout-cta-icon--floating {
      left: -19px;
      width: 70px;
      height: auto;
      top: 24px;
    }
  }

  /* At 600px: Keep proportions, button/dog stay lower-right */
  @media (max-width: 600px) {
    .ask-scout-cta-inner {
      padding: 14px 16px;
      min-height: auto;
    }

    .ask-scout-cta-copy {
      flex: 1 1 100%;
      padding-right: 155px; /* Clearance for absolutely positioned dog/button + 10px gap */
    }

    .ask-scout-cta-title {
      font-size: 18px;
      line-height: 1.3;
    }

    .ask-scout-cta-text {
      font-size: 13px;
    }

    .ask-scout-cta-btn-wrap {
      position: absolute;
      right: 18px;
      bottom: auto;
      padding-left: 18px;
    }

    .ask-scout-cta-icon--floating {
      left: -18px;
      width: 66px;
      height: auto;
      top: 56%;
      transform: translateY(-50%);
    }
  }
}

/* Non-color-only interaction cue for links (scoped to main content). */
#content-holder a:hover,
main a:hover,
#content-holder a:focus-visible,
main a:focus-visible {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

/* Standard yellow button (migrated templates only).
   NOTE: Detail page "Add to Cart" (addToCartClick) is intentionally excluded. */
.yellow-btn {
  color: var(--btn-yellow-text);
  background: var(--btn-yellow-bg);
  font-family: var(--font-barlow, 'Barlow Condensed', sans-serif);
  border-radius: var(--btn-yellow-radius);
  cursor: pointer;
  padding: var(--btn-yellow-padding);
  font-size: var(--btn-yellow-font-size);
  border: 0;
  text-transform: uppercase;
  display: inline-block;
  text-align: center;
  font-weight: 600;
  transition: background .3s, color .3s;
  text-decoration: none;
  margin-bottom: 5px;
  white-space: nowrap;
  -webkit-appearance: none;
  appearance: none;
}
.yellow-btn:hover,
.yellow-btn:focus,
.more-btn.yellow-btn:hover,
.more-btn.yellow-btn:focus {
  color: var(--btn-yellow-text-hover);
  background: var(--btn-yellow-bg-hover);
  text-decoration: none;
  opacity: 1;
}
.yellow-btn::after,
.yellow-btn::before {
  content: none;
  background: none;
}

/* FontAwesome icons inside yellow buttons should inherit the parent size. */
.yellow-btn i.fa,
.yellow-btn i.fas,
.yellow-btn i.far,
.yellow-btn i.fal,
.yellow-btn i.fab {
  font-size: 1em !important;
  line-height: 1 !important;
}

/* Arrow icon spacing in buttons - right arrows get left margin, left arrows get right margin */
.yellow-btn .fa-angle-right,
.yellow-btn .fa-chevron-right,
.yellow-btn .fa-arrow-right,
.transparent-btn .fa-angle-right,
.transparent-btn .fa-chevron-right,
.transparent-btn .fa-arrow-right {
  margin-left: 6px;
  top: 0.04em;
  position: relative;
}
.yellow-btn .fa-angle-left,
.yellow-btn .fa-chevron-left,
.yellow-btn .fa-arrow-left,
.transparent-btn .fa-angle-left,
.transparent-btn .fa-chevron-left,
.transparent-btn .fa-arrow-left {
  margin-right: 6px;
  top: 0.04em;
  position: relative;
}

/* Scout search submit button (used on home, category, scout landing pages). */
.scout-search-submit {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: var(--btn-yellow-bg);
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
  padding: 0;
  flex-shrink: 0;
  color: #000;
  font-size: 14px;
}
.scout-search-submit:hover {
  background: var(--btn-yellow-bg-hover);
}
.scout-search-submit:active {
  transform: translateY(-50%) scale(0.96);
}

/* ============================================================
   SCOUT SEARCH FIELD COMPONENT
   Shared styles for Scout search inputs (home, category, scout landing)
   ============================================================ */

/* Animated aura angle property - home page uses --home-aura-angle */
@property --scout-aura-angle {
  syntax: "<angle>";
  inherits: true;
  initial-value: 0deg;
}

@property --home-aura-angle {
  syntax: "<angle>";
  inherits: true;
  initial-value: 0deg;
}

@keyframes scout-aura-orbit {
  from { --scout-aura-angle: 0deg; }
  to { --scout-aura-angle: 360deg; }
}

@keyframes home-aura-orbit {
  from { --home-aura-angle: 0deg; }
  to { --home-aura-angle: 360deg; }
}

/* Scout search wrapper tokens */
.home-scout-input-wrap,
.scout-search-input-wrap,
.scout-search-box {
  --scout-placeholder-left: 16px;
  /* Input stops 5px before button: button right (8px) + button width (36px) + 5px gap = 49px */
  --scout-input-right-stop: 49px;
  --scout-input-height: 50px;
  --scout-aura-radius: 10px;
  --scout-input-radius: 9px;
}

/* Base wrapper styles - provides positioning context for aura and absolutely positioned input */
.home-scout-input-wrap,
.scout-search-input-wrap,
.scout-search-box {
  position: relative;
  width: 100%;
  height: var(--scout-input-height);
  background: transparent;
  border: none;
  padding: 0;
  box-sizing: border-box;
  overflow: visible;
}

/* Animated rainbow aura border - using ::before on wrapper (NOT masked) */
.home-scout-input-wrap::before,
.scout-search-input-wrap::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: var(--scout-aura-radius);
  background: conic-gradient(
    from var(--scout-aura-angle, 0deg),
    transparent 0deg,
    transparent 20deg,
    rgba(52, 168, 83, 1) 50deg,
    rgba(255, 211, 20, 1) 90deg,
    rgba(255, 70, 65, 1) 130deg,
    rgba(49, 134, 255, 1) 170deg,
    rgba(49, 134, 255, 0.7) 220deg,
    rgba(49, 134, 255, 0.3) 270deg,
    transparent 310deg,
    transparent 360deg
  ) border-box;
  border: 2px solid transparent;
  z-index: 0;
  pointer-events: none;
  animation: scout-aura-orbit 4s linear infinite;
}

/* Home page uses separate angle variable */
.home-scout-input-wrap::before {
  background: conic-gradient(
    from var(--home-aura-angle, 0deg),
    transparent 0deg,
    transparent 20deg,
    rgba(52, 168, 83, 1) 50deg,
    rgba(255, 211, 20, 1) 90deg,
    rgba(255, 70, 65, 1) 130deg,
    rgba(49, 134, 255, 1) 170deg,
    rgba(49, 134, 255, 0.7) 220deg,
    rgba(49, 134, 255, 0.3) 270deg,
    transparent 310deg,
    transparent 360deg
  ) border-box;
  animation: home-aura-orbit 4s linear infinite;
}

/* Background layer using ::after - this gets the fade mask applied via clip-path workaround */
.home-scout-input-wrap::after,
.scout-search-input-wrap::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--scout-input-radius);
  background: #000000;
  border: 1px solid #ffffff50;
  z-index: 1;
  pointer-events: none;
}

/* Scout search input field - shared base styles */
/* Input width stops 5px before the button so text cannot flow behind it */
.home-scout-input,
.scout-search-input {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2;
  /* Width stops before the button - text cannot flow behind */
  width: calc(100% - var(--scout-input-right-stop)) !important;
  height: var(--scout-input-height) !important;
  /* Use text-indent instead of padding-left so text can scroll to absolute left edge */
  padding: 0 !important;
  text-indent: var(--scout-placeholder-left);
  margin: 0 !important;
  font-size: 16px !important;
  font-family: var(--font-jost), sans-serif !important;
  border: none !important;
  border-radius: var(--scout-input-radius) 0 0 var(--scout-input-radius);
  background-color: transparent !important;
  color: var(--input-text) !important;
  outline: none !important;
  box-sizing: border-box !important;
  cursor: text;
  /* Enable horizontal scrolling for long queries */
  white-space: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
  /* Fade mask for left overflow */
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 10px, black 100%);
  mask-image: linear-gradient(to right, transparent 0%, black 10px, black 100%);
}

/* Hide scrollbar for webkit browsers */
.home-scout-input::-webkit-scrollbar,
.scout-search-input::-webkit-scrollbar {
  display: none;
}

/* Native placeholder hidden - we use custom typewriter placeholder */
.home-scout-input::placeholder,
.scout-search-input::placeholder {
  color: transparent;
}

/* Placeholder text positioning - aligns with input field width */
/* No fade mask on placeholder - it types forward, doesn't scroll left like user input */
.home-scout-input-wrap .scout-placeholder-text,
.scout-search-input-wrap .scout-placeholder-text,
.scout-search-box .scout-placeholder-text {
  position: absolute;
  left: var(--scout-placeholder-left);
  top: 0;
  /* Same boundary as input - stops before button */
  width: calc(100% - var(--scout-input-right-stop) - var(--scout-placeholder-left));
  height: 100%;
  display: flex;
  align-items: center;
  z-index: 2;
  pointer-events: none;
}

/* Scout search submit button positioning */
.home-scout-input-wrap .scout-search-submit,
.scout-search-input-wrap .scout-search-submit,
.scout-search-box .scout-search-submit {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
}

/* Height variants */
.scout-search-input-wrap {
  --scout-input-height: 54px;
  --scout-aura-radius: 10px;
  --scout-input-radius: 9px;
}

/* Scout search box (ScoutSearch landing page) - uses textarea */
.scout-search-box {
  --scout-input-height: 56px;
  --scout-aura-radius: 10px;
  --scout-input-radius: 9px;
  --scout-placeholder-left: 20px;
  /* Input stops 5px before button: button right (8px) + button width (40px) + 5px gap = 53px */
  --scout-input-right-stop: 53px;
  display: flex;
  align-items: center;
}

/* Scout search box aura */
.scout-search-box::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: var(--scout-aura-radius);
  background: conic-gradient(
    from var(--scout-aura-angle, 0deg),
    transparent 0deg,
    transparent 20deg,
    rgba(52, 168, 83, 1) 50deg,
    rgba(255, 211, 20, 1) 90deg,
    rgba(255, 70, 65, 1) 130deg,
    rgba(49, 134, 255, 1) 170deg,
    rgba(49, 134, 255, 0.7) 220deg,
    rgba(49, 134, 255, 0.3) 270deg,
    transparent 310deg,
    transparent 360deg
  ) border-box;
  border: 2px solid transparent;
  z-index: 0;
  pointer-events: none;
  animation: scout-aura-orbit 4s linear infinite;
}

/* Scout search box background layer */
.scout-search-box::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--scout-input-radius);
  background: #222;
  z-index: 1;
  pointer-events: none;
}

/* Scout search box textarea input - width stops before button */
.scout-search-box .scout-search-input {
  position: absolute;
  left: 0;
  top: 0;
  background: transparent !important;
  border: none !important;
  outline: none !important;
  font: 400 16px/1.4 var(--font-jost), sans-serif !important;
  color: var(--white) !important;
  padding: 16px var(--scout-placeholder-left) !important;
  padding-right: 0 !important;
  resize: none;
  height: var(--scout-input-height) !important;
  /* Width stops before the button - text cannot flow behind */
  width: calc(100% - var(--scout-input-right-stop)) !important;
  border-radius: var(--scout-input-radius) 0 0 var(--scout-input-radius);
  white-space: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
  z-index: 2;
  /* Fade mask for left text overflow */
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 10px, black 100%);
  mask-image: linear-gradient(to right, transparent 0%, black 10px, black 100%);
}

.scout-search-box .scout-search-input::-webkit-scrollbar {
  display: none;
}

.scout-search-box .scout-search-input::placeholder {
  color: transparent;
}

/* Scout search box placeholder positioning - aligns with input width */
/* No fade mask on placeholder - it types forward, doesn't scroll left like user input */
.scout-search-box .scout-placeholder-text {
  position: absolute;
  left: var(--scout-placeholder-left);
  top: 50%;
  transform: translateY(-50%);
  /* Same boundary as input - stops before button */
  width: calc(100% - var(--scout-input-right-stop) - var(--scout-placeholder-left));
  color: var(--white);
  font: 400 16px/1.4 var(--font-jost), sans-serif;
  white-space: nowrap;
  overflow: hidden;
  pointer-events: none;
  z-index: 3;
  transition: opacity 0.5s ease;
}

/* Mobile adjustments */
@media (max-width: 767px) {
  .home-scout-input,
  .scout-search-input {
    font-size: 14px !important;
  }
}

/* Bootbox modal fallback (pages without bs.css). */
.bootbox.modal,
.modal.bootbox {
  position: fixed;
  inset: 0;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: 0;
  z-index: 1050;
  display: none;
  overflow: hidden auto;
  background: transparent;
}
.bootbox.modal.show,
.bootbox.modal.in {
  display: block;
}
.bootbox.modal .modal-dialog {
  position: relative;
  margin: 6vh auto;
  /* min() replaced for minifier compatibility */
  width: calc(100% - 32px);
  max-width: 560px;
  pointer-events: none;
}
.bootbox.modal .modal-content {
  pointer-events: auto;
  position: relative;
  background-color: #514500;
  color: #f3f0cf;
  border: 1px solid #ceb83d;
  border-radius: 14px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
}
.bootbox.modal .modal-header {
  padding: 12px 16px;
  border-bottom: 1px solid #434704;
}
.bootbox.modal.bootbox-no-title .modal-header.border-0 {
  display: none;
}
.bootbox.modal .bootbox-close-button {
  position: absolute;
  right: 12px;
  bottom: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  background-image: none;
  color: #fff;
  padding: 0;
  z-index: 2;
}
.bootbox.modal .bootbox-close-button:hover,
.bootbox.modal .bootbox-close-button:focus {
  color: #fff8d8;
}
.bootbox.modal .bootbox-close-button .fa {
  font-size: 18px;
  line-height: 1;
}
.bootbox.modal h3 {
  color: #fff;
}
.bootbox.modal .modal-header .close,
.bootbox.modal .modal-content > .close,
.bootbox.modal .modal-content > .btn-close,
.bootbox.modal .modal-content > button[data-dismiss="modal"],
.bootbox.modal .modal-content > button[data-bs-dismiss="modal"] {
  position: absolute;
  bottom: 12px;
  right: 12px;
  top: auto;
  color: #888;
  opacity: 1;
  text-shadow: none;
  font-size: 24px;
  font-weight: normal;
  line-height: 1;
  z-index: 10;
  background: transparent;
  border: none;
  padding: 0;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.bootbox.modal .modal-header .close:hover,
.bootbox.modal .modal-header .close:focus,
.bootbox.modal .modal-content > .close:hover,
.bootbox.modal .modal-content > .btn-close:hover {
  color: #fff;
  opacity: 1;
}
.bootbox.modal .modal-body {
  padding: 16px;
  padding-bottom: 45px;
}
.bootbox.modal .modal-body h3 {
  margin-top: 0;
}
.bootbox.modal .modal-body p {
  padding-right: 0;
}
.bootbox.modal .modal-footer {
  padding: 12px 16px 14px;
  background-color: transparent;
  border-top: 1px solid #434704;
  border-radius: 0 0 14px 14px;
  text-align: right;
}
.bootbox.modal.cart-merge-modal .modal-body {
  padding-bottom: 16px;
}
.bootbox.modal.cart-merge-modal .modal-body a {
  text-decoration: underline;
}
.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1040;
  background-color: rgba(0, 0, 0, 0.65);
}
.modal-backdrop.show,
.modal-backdrop.in {
  opacity: 1;
}

/* WebUI popovers: global padding and text color. */
.webui-popover {
  width: 320px;
  max-width: calc(100vw - 40px);
  background-color: #dddddd90 !important;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(199, 80, 0, 0.5);
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.35);
}
.webui-popover .webui-popover-content {
  padding: 0px 24px 15px 24px !important;
  color: #1a1a1a;
}
.webui-popover .webui-popover-title {
  background: #ede8df;
  color: #1a1a1a;
  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
}
/* WebUI popover buttons - match yellow-btn and transparent-btn mandate */
.webui-popover input[type="button"],
.webui-popover .more-btn.yellow-btn {
  color: var(--btn-yellow-text);
  background-color: var(--btn-yellow-bg);
  font-family: var(--font-barlow, 'Barlow Condensed', sans-serif);
  border-radius: var(--btn-yellow-radius);
  cursor: pointer;
  padding: var(--btn-yellow-padding);
  font-size: var(--btn-yellow-font-size);
  min-width: var(--btn-yellow-min-width);
  border: 0;
  text-transform: uppercase;
  display: inline-block;
  text-align: center;
  font-weight: 600;
  transition: background .3s, color .3s;
  text-decoration: none;
  background-image: none;
}
.webui-popover input[type="button"]:hover,
.webui-popover .more-btn.yellow-btn:hover {
  color: var(--btn-yellow-text-hover);
  background-color: var(--btn-yellow-bg-hover);
  text-decoration: none;
}
/* Cancel button in popovers - transparent-btn style adapted for light background
   Higher specificity to override .more-btn.yellow-btn when both classes present */
.webui-popover .library-review-cancelbtn.more-btn.yellow-btn,
.webui-popover .library-review-cancelbtn.more-btn,
.webui-popover .library-review-cancelbtn,
.webui-popover .transparent-btn {
  color: #1a1a1a;
  background: transparent;
  border: 1px solid rgba(0, 0, 0, 0.35);
  font-family: var(--font-barlow, 'Barlow Condensed', sans-serif);
  border-radius: var(--btn-transparent-radius);
  cursor: pointer;
  padding: var(--btn-transparent-padding);
  font-size: var(--btn-transparent-font-size);
  min-width: var(--btn-transparent-min-width);
  text-transform: uppercase;
  display: inline-block;
  text-align: center;
  font-weight: 600;
  transition: background .3s, border-color .3s, color .3s;
  background-image: none;
}
.webui-popover .library-review-cancelbtn.more-btn.yellow-btn:hover,
.webui-popover .library-review-cancelbtn.more-btn:hover,
.webui-popover .library-review-cancelbtn:hover,
.webui-popover .transparent-btn:hover,
.webui-popover .transparent-btn:focus {
  color: #1a1a1a;
  text-decoration: none;
  border-color: #c75000;
  background: rgba(199, 80, 0, 0.12);
}
.webui-popover .webui-popover-content p {
  color: #1a1a1a;
}
.webui-popover .webui-popover-content strong {
  color: #1a1a1a;
}
.webui-popover.top > .webui-arrow,
.webui-popover.top-left > .webui-arrow,
.webui-popover.top-right > .webui-arrow,
.webui-popover.top > .arrow,
.webui-popover.top-left > .arrow,
.webui-popover.top-right > .arrow {
  border-top-color: rgba(199, 80, 0, 0.6);
  border-right-color: transparent;
  border-left-color: transparent;
  border-bottom-color: transparent;
}
.webui-popover.bottom > .webui-arrow,
.webui-popover.bottom-left > .webui-arrow,
.webui-popover.bottom-right > .webui-arrow,
.webui-popover.bottom > .arrow,
.webui-popover.bottom-left > .arrow,
.webui-popover.bottom-right > .arrow {
  border-bottom-color: rgba(199, 80, 0, 0.6);
  border-right-color: transparent;
  border-left-color: transparent;
  border-top-color: transparent;
}
.webui-popover.left > .webui-arrow,
.webui-popover.left-top > .webui-arrow,
.webui-popover.left-bottom > .webui-arrow,
.webui-popover.left > .arrow,
.webui-popover.left-top > .arrow,
.webui-popover.left-bottom > .arrow {
  border-left-color: rgba(199, 80, 0, 0.6);
  border-right-color: transparent;
  border-top-color: transparent;
  border-bottom-color: transparent;
}
.webui-popover.right > .webui-arrow,
.webui-popover.right-top > .webui-arrow,
.webui-popover.right-bottom > .webui-arrow,
.webui-popover.right > .arrow,
.webui-popover.right-top > .arrow,
.webui-popover.right-bottom > .arrow {
  border-right-color: rgba(199, 80, 0, 0.6);
  border-left-color: transparent;
  border-top-color: transparent;
  border-bottom-color: transparent;
}
.webui-popover.top > .webui-arrow:after,
.webui-popover.top-left > .webui-arrow:after,
.webui-popover.top-right > .webui-arrow:after,
.webui-popover.top > .arrow:after,
.webui-popover.top-left > .arrow:after,
.webui-popover.top-right > .arrow:after {
  border-top-color: #dddddd90 !important;
  border-right-color: transparent;
  border-left-color: transparent;
  border-bottom-color: transparent;
}
.webui-popover.bottom > .webui-arrow:after,
.webui-popover.bottom-left > .webui-arrow:after,
.webui-popover.bottom-right > .webui-arrow:after,
.webui-popover.bottom > .arrow:after,
.webui-popover.bottom-left > .arrow:after,
.webui-popover.bottom-right > .arrow:after {
  border-bottom-color: #dddddd90 !important;
  border-right-color: transparent;
  border-left-color: transparent;
  border-top-color: transparent;
}
.webui-popover.left > .webui-arrow:after,
.webui-popover.left-top > .webui-arrow:after,
.webui-popover.left-bottom > .webui-arrow:after,
.webui-popover.left > .arrow:after,
.webui-popover.left-top > .arrow:after,
.webui-popover.left-bottom > .arrow:after {
  border-left-color: #dddddd90 !important;
  border-right-color: transparent;
  border-top-color: transparent;
  border-bottom-color: transparent;
}
.webui-popover.right > .webui-arrow:after,
.webui-popover.right-top > .webui-arrow:after,
.webui-popover.right-bottom > .webui-arrow:after,
.webui-popover.right > .arrow:after,
.webui-popover.right-top > .arrow:after,
.webui-popover.right-bottom > .arrow:after {
  border-right-color: #dddddd90 !important;
  border-left-color: transparent;
  border-top-color: transparent;
  border-bottom-color: transparent;
}

.success-alert {
  background-color: var(--alert-success-bg);
  border: 2px solid var(--alert-success-border);
  border-radius: 10px;
  padding: 12px 20px;
  margin-bottom: 15px !important;
  position: relative;
}
.success-alert p,
.success-alert .alert-title {
  color: #d7f7d7;
  font-size: 14px;
  line-height: 22px;
}

.wishlist-alert,
.neg-alert {
  background-color: var(--alert-neg-bg);
  border-radius: 10px;
  padding: 12px 20px;
  overflow: hidden;
  margin-bottom: 15px !important;
  max-width: 100% !important;
  border: 2px solid var(--alert-neg-border) !important;
  margin-top: 10px;
  position: relative;
  font-family: var(--font-jost, 'Jost', sans-serif);
}
.wishlist-alert p,
.wishlist-alert .alert-title,
.neg-alert p,
.neg-alert .alert-title {
  color: #f0b3b3;
  font-size: 14px;
  font-weight: 400;
  display: block;
  line-height: 22px;
  font-family: var(--font-jost, 'Jost', sans-serif);
}
.wishlist-alert a,
.neg-alert a {
  color: #fff;
  text-decoration: underline;
}
.wishlist-alert .more-btn,
.neg-alert .more-btn {
  color: #000;
  text-decoration: none;
  background-color: #edad01;
}
.wishlist-alert .more-btn::after,
.wishlist-alert .more-btn::before,
.neg-alert .more-btn::after,
.neg-alert .more-btn::before {
  content: none;
  background: none;
}

.info-alert {
  background-color: var(--alert-info-bg);
  border: 1px solid var(--alert-info-border);
  border-radius: 14px;
  margin-bottom: 20px;
  position: relative;
}

.success-alert .close-es,
.wishlist-alert .close-es,
.neg-alert .close-es,
.info-alert .close-es {
  position: absolute;
  right: 12px;
  bottom: 12px;
}

.wishlist-alert-sm {
  display: block;
  margin-top: 10px;
  font-size: 12px;
  font-style: italic;
}

.transparent-btn,
.wishlist-alert .transparent-btn {
  color: var(--btn-transparent-text);
  background: #ffffff10;
  border: 1px solid var(--btn-transparent-border);
  font-family: 'Barlow Condensed', sans-serif;
  border-radius: var(--btn-transparent-radius);
  cursor: pointer;
  padding: var(--btn-transparent-padding);
  font-size: var(--btn-transparent-font-size);
  text-transform: uppercase;
  display: inline-block;
  text-align: center;
  font-weight: 600;
  transition: background .3s, border-color .3s, color .3s;
  margin-bottom: 5px;
  white-space: nowrap;
}
.transparent-btn:hover,
.wishlist-alert .transparent-btn:hover {
  color: #fff;
  text-decoration: none;
  border-color: #c75000;
  background: rgba(199, 80, 0, 0.15);
}

/* Slick slider shared styles (migrated templates). */
.slider-section .slick-arrow {
  width: 40px;
  height: 40px;
  background: transparent;
  border: none;
  cursor: pointer;
  z-index: 10;
  transition: background 0.3s ease;
  font-size: 0;
  line-height: 0;
  color: transparent;
}
.slider-section .slick-prev:before,
.slider-section .slick-next:before {
  content: '';
  display: block;
  width: 20px;
  height: 20px;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  position: absolute;
  top: 70%;
  left: 50%;
}
.slider-section .slick-prev:before {
  transform: translate(-30%, -50%) rotate(-135deg);
}
.slider-section .slick-next:before {
  transform: translate(-70%, -50%) rotate(45deg);
}
.slider-section .slick-prev {
  left: -40px;
}
.slider-section .slick-next {
  right: -40px;
}
.slick-prev:hover,
.slick-prev:focus,
.slick-next:hover,
.slick-next:focus {
  color: transparent;
  outline: none;
  background: transparent !important;
  background-color: transparent !important;
}
.slider-section .slick-dots {
  bottom: -40px;
}
.slider-section .slick-dots li {
  margin: 0 3px;
}
.slider-section .slick-dots li button::before {
  font-size: 10px;
  color: #666;
  opacity: 1;
}
.slider-section .slick-dots li.slick-active button::before {
  opacity: 1;
  color: #fff;
}
.slider-section .slick-dotted.slick-slider {
  margin-bottom: 35px;
}
.slider-section .slick-slide {
  padding: 4px 8px 0;
}
.slider-section .slick-slide img {
  border: 1px solid #444;
  max-height: unset;
  width: 100%;
  box-sizing: border-box;
}

.close-es .close_search {
  background: none !important;
  text-indent: 0;
  width: auto;
  height: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.close-es .close_search i {
  font-size: 18px;
  color: #fff;
  font-family: "Font Awesome 5 Free", FontAwesome;
  font-weight: 900;
}

input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="number"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="time"]:focus,
input[type="week"]:focus,
textarea:focus,
select:focus,
input[type="text"]:active,
input[type="password"]:active,
input[type="email"]:active,
input[type="search"]:active,
input[type="tel"]:active,
input[type="url"]:active,
input[type="number"]:active,
input[type="date"]:active,
input[type="month"]:active,
input[type="time"]:active,
input[type="week"]:active,
textarea:active,
select:active,
input[type="text"]:focus-visible,
input[type="password"]:focus-visible,
input[type="email"]:focus-visible,
input[type="search"]:focus-visible,
input[type="tel"]:focus-visible,
input[type="url"]:focus-visible,
input[type="number"]:focus-visible,
input[type="date"]:focus-visible,
input[type="month"]:focus-visible,
input[type="time"]:focus-visible,
input[type="week"]:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: none !important;
  box-shadow: none !important;
  border-color: #aaa !important;
}

/* =====================================================
   FENGYUAN DATEPICKER - DARK THEME
   Global styles for datepicker on pages with legacy CSS disabled
   ===================================================== */
.datepicker-container {
  background-color: #1a1a1a !important;
  border: 1px solid #444 !important;
  border-radius: 8px !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5) !important;
  font-family: "Jost", sans-serif !important;
  font-size: 14px !important;
  line-height: 32px !important;
}

.datepicker-dropdown {
  border: 1px solid #444 !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5) !important;
}

/* Arrow colors for dropdown */
.datepicker-top-left:before,
.datepicker-top-right:before {
  border-bottom-color: #444 !important;
}

.datepicker-top-left:after,
.datepicker-top-right:after {
  border-bottom-color: #1a1a1a !important;
}

.datepicker-bottom-left:before,
.datepicker-bottom-right:before {
  border-top-color: #444 !important;
}

.datepicker-bottom-left:after,
.datepicker-bottom-right:after {
  border-top-color: #1a1a1a !important;
}

/* Panel items (days, months, years) */
.datepicker-panel > ul > li {
  background-color: #1a1a1a !important;
  color: #ccc !important;
  border-radius: 4px !important;
}

.datepicker-panel > ul > li:hover {
  background-color: #333 !important;
  color: #fff !important;
}

/* Muted items (other month days) */
.datepicker-panel > ul > li.muted,
.datepicker-panel > ul > li.muted:hover {
  color: #555 !important;
}

/* Highlighted (today) */
.datepicker-panel > ul > li.highlighted {
  background-color: rgba(237, 173, 1, 0.2) !important;
  color: #edad01 !important;
}

.datepicker-panel > ul > li.highlighted:hover {
  background-color: rgba(237, 173, 1, 0.3) !important;
  color: #edad01 !important;
}

/* Picked/selected date */
.datepicker-panel > ul > li.picked,
.datepicker-panel > ul > li.picked:hover {
  background-color: #edad01 !important;
  color: #000 !important;
  font-weight: 600 !important;
}

/* Disabled items */
.datepicker-panel > ul > li.disabled,
.datepicker-panel > ul > li.disabled:hover {
  background-color: #1a1a1a !important;
  color: #444 !important;
}

/* Navigation and header items (prev, next, month/year display) */
.datepicker-panel > ul > li[data-view="month prev"],
.datepicker-panel > ul > li[data-view="month next"],
.datepicker-panel > ul > li[data-view="year prev"],
.datepicker-panel > ul > li[data-view="year next"],
.datepicker-panel > ul > li[data-view="years prev"],
.datepicker-panel > ul > li[data-view="years next"] {
  color: #999 !important;
  font-weight: bold !important;
}

.datepicker-panel > ul > li[data-view="month prev"]:hover,
.datepicker-panel > ul > li[data-view="month next"]:hover,
.datepicker-panel > ul > li[data-view="year prev"]:hover,
.datepicker-panel > ul > li[data-view="year next"]:hover,
.datepicker-panel > ul > li[data-view="years prev"]:hover,
.datepicker-panel > ul > li[data-view="years next"]:hover {
  color: #fff !important;
  background-color: #333 !important;
}

/* Current month/year display */
.datepicker-panel > ul > li[data-view="month current"],
.datepicker-panel > ul > li[data-view="year current"],
.datepicker-panel > ul > li[data-view="years current"] {
  color: #fff !important;
  font-weight: 600 !important;
}

/* Week header row */
.datepicker-panel > ul[data-view="week"] > li,
.datepicker-panel > ul[data-view="week"] > li:hover {
  background-color: #1a1a1a !important;
  color: #888 !important;
  font-weight: 500 !important;
  text-transform: uppercase !important;
  font-size: 11px !important;
}