/* =========================================================
   Oxinex — ocean theme (blue shades)
   Activated by data-theme="ocean" on <html>.

   Built on the same footing as the herbal theme: a light theme, so the
   two double-duty variables (--tg-color-white-default for text on
   coloured fills, --tg-heading-color for dark button fills) keep their
   original roles and need no correction. The brand hue moves from warm
   terracotta to a deep marine blue, with a bright cyan accent.

   1. palette
   2. page + surfaces
   3. themed backgrounds + artwork
   4. small corrections
   5. toggle icon
   ========================================================= */

/* ---------- 1. palette ---------- */
[data-theme="ocean"] {
  --tg-theme-primary: #1f5fa8;
  --tg-color-yellow-light: #4fb3e8;
  --tg-color-brown-light: #4a86c4;
  --tg-color-dark-blue: #10203a;
  /* accent for link hovers, rating stars and the product price —
     terracotta #FF3D00 by default, which clashes with blue */
  --tg-color-orange-light: #4fb3e8;

  --tg-heading-color: #10203a;
  --tg-body-color: #5b6a80;

  --tg-color-gray-1: #eaf1f9;
  --tg-color-gray-2: #dfe9f6;
  --tg-border-1: #d1dfef;

  --ox-page: #f6f9fd;
  --ox-surface: #ffffff;
  --ox-surface-2: #eaf1f9;
  --ox-border: #d8e4f2;
  --ox-header-solid: #12243d;

  color-scheme: light;
}

/* ---------- 2. page + surfaces ---------- */
[data-theme="ocean"] body {
  background-color: var(--ox-page);
  color: var(--tg-body-color);
}
[data-theme="ocean"] .section-bg,
[data-theme="ocean"] .section-bg-three {
  background-color: var(--tg-color-gray-1);
}
[data-theme="ocean"] .section-bg-two {
  background-color: var(--tg-color-gray-2);
}
[data-theme="ocean"] .customer__form-wrap,
[data-theme="ocean"] .order__info-wrap,
[data-theme="ocean"] .search__results,
[data-theme="ocean"] .product__notfound-list a,
[data-theme="ocean"] .coupon__code-info {
  border-color: var(--ox-border);
}
[data-theme="ocean"] .search__result-thumb,
[data-theme="ocean"] .product__details-img,
[data-theme="ocean"] .product__item .product__thumb {
  background-color: var(--tg-color-gray-1);
}

/* ---------- 3. themed backgrounds + artwork ---------- */
/* main.js writes data-background onto the style attribute, so these
   need !important to win */

/* deep enough for the header's white nav text to stay legible */
[data-theme="ocean"] .slider__bg {
  background-image: radial-gradient(circle at 74% 26%, rgba(79, 179, 232, 0.30), transparent 58%),
                    radial-gradient(circle at 16% 80%, rgba(31, 95, 168, 0.35), transparent 55%),
                    linear-gradient(140deg, #12243d 0%, #1b3a63 55%, #0c1728 100%) !important;
}
[data-theme="ocean"] .slider__content .title,
[data-theme="ocean"] .slider__content p,
[data-theme="ocean"] .slider__content .sub-title {
  color: var(--tg-color-white-default);
}
[data-theme="ocean"] .features__bg,
[data-theme="ocean"] .video__bg {
  background-image: linear-gradient(150deg, #fafcff 0%, #e8f1fb 60%, #d8e6f5 100%) !important;
}
[data-theme="ocean"] .cta__bg {
  background-image: radial-gradient(circle at 80% 70%, rgba(79, 179, 232, 0.28), transparent 55%),
                    linear-gradient(120deg, #1f5fa8 0%, #17457a 60%, #0d1f38 100%) !important;
}
[data-theme="ocean"] .footer__bg {
  background-image: linear-gradient(160deg, #101f37 0%, #16304f 60%, #0a1322 100%) !important;
}
[data-theme="ocean"] .breadcrumb__bg {
  background-image: linear-gradient(135deg, #12253f 0%, #1a3b64 60%, #0b1626 100%) !important;
}
/* the decorative shapes are drawn in the terracotta palette */
[data-theme="ocean"] .top-shape img,
[data-theme="ocean"] .bottom-shape img,
[data-theme="ocean"] .section__shape img,
[data-theme="ocean"] .about__shape img,
[data-theme="ocean"] .faq__shape img,
[data-theme="ocean"] .testimonial__shape img {
  filter: hue-rotate(190deg) saturate(0.85);
}

/* ---------- 4. small corrections ---------- */
[data-theme="ocean"] .search__suggest .list-wrap a { border-color: var(--ox-border); }
[data-theme="ocean"] input,
[data-theme="ocean"] textarea,
[data-theme="ocean"] select { border-color: var(--ox-border); }
[data-theme="ocean"] input:focus,
[data-theme="ocean"] textarea:focus,
[data-theme="ocean"] select:focus { border-color: var(--tg-theme-primary); }

/* ---------- 5. toggle icon ---------- */
.theme-toggle .icon-drop { display: none; }
[data-theme="ocean"] .theme-toggle .icon-sun { display: none; }
[data-theme="ocean"] .theme-toggle .icon-drop { display: block; }