/*----------------------------------------------------------------
  BBC Industrial Services — Global Theme System (Light / Dark)
  ----------------------------------------------------------------
  Loaded AFTER main.css. Provides:
    1. Semantic design tokens (light defaults)
    2. Dark palette + remapping of the theme's --rs-* tokens
    3. Dark-mode component overrides (Industrie design language)
    4. Theme toggle button (sun / moon)
    5. Smooth cross-theme transitions (JS-gated, no FOUC)

  Theme is driven by:  <html data-theme="light|dark">
  Persistence + system preference handled by assets/js/theme-toggle.js
-----------------------------------------------------------------*/

/*==================================================
  1. SEMANTIC DESIGN TOKENS — LIGHT (default)
==================================================*/
:root {
  color-scheme: light;

  /* Backgrounds */
  --bbc-bg-body: #FFFFFF;
  --bbc-bg-surface: #F7F7F7;
  /* section / soft panels  */
  --bbc-bg-elevated: #FFFFFF;
  /* cards, dropdowns, sticky header */
  --bbc-bg-card: #F7F7F7;
  /* tinted cards           */
  --bbc-bg-input: #FFFFFF;

  /* Text */
  --bbc-text-heading: #1F1F1F;
  --bbc-text-body: #616161;
  --bbc-text-muted: rgba(97, 97, 97, 0.54);

  /* Brand-derived (readable-on-background variants) */
  --bbc-navy-text: #263068;
  /* navy used AS TEXT      */
  --bbc-navy-deep-text: #0C3C61;
  --bbc-slate-text: #142340;

  /* Lines & depth */
  --bbc-border: rgba(0, 0, 0, 0.05);
  --bbc-border-soft: #F1F1F1;
  --bbc-border-strong: #D2D2D2;
  --bbc-divider: #DDDDE0;
  --bbc-shadow-color: rgba(0, 0, 0, 0.07);
  --bbc-shadow-card: 0 15px 50px rgba(0, 0, 0, 0.05);

  /* Stroke-text (outlined numbers / titles) */
  --bbc-stroke-text: rgba(31, 31, 31, 0.6);
  --bbc-stroke-line: rgba(31, 31, 31, 0.16);

  /* Watermark display text (giant section titles) */
  --bbc-watermark-start: #F5F6F7;
  --bbc-watermark-end: #FDFDFD;

  /* Toggle button */
  --bbc-toggle-color: #1F1F1F;
  --bbc-toggle-border: rgba(0, 0, 0, 0.12);
  --bbc-toggle-hover-bg: rgba(234, 95, 35, 0.1);
}

/* Body background now themable (was implicit white) */
body {
  background-color: var(--bbc-bg-body);
}

/*==================================================
  2. DARK PALETTE + --rs-* TOKEN REMAP
     Industrial charcoal with a subtle navy cast —
     designed to feel native to the Industrie theme.
==================================================*/
html[data-theme="dark"] {
  color-scheme: dark;

  /* Backgrounds */
  --bbc-bg-body: #10151D;
  --bbc-bg-surface: #171D28;
  --bbc-bg-elevated: #1D2532;
  --bbc-bg-card: #171D28;
  --bbc-bg-input: #131923;

  /* Text */
  --bbc-text-heading: #F2F4F8;
  --bbc-text-body: #A7AFBC;
  --bbc-text-muted: rgba(167, 175, 188, 0.6);

  /* Brand-derived text (lightened for AA contrast on dark) */
  --bbc-navy-text: #9DB2E8;
  --bbc-navy-deep-text: #A9C3DF;
  --bbc-slate-text: #C9D4E6;

  /* Lines & depth */
  --bbc-border: rgba(255, 255, 255, 0.08);
  --bbc-border-soft: rgba(255, 255, 255, 0.07);
  --bbc-border-strong: rgba(255, 255, 255, 0.16);
  --bbc-divider: rgba(255, 255, 255, 0.12);
  --bbc-shadow-color: rgba(0, 0, 0, 0.5);
  --bbc-shadow-card: 0 15px 50px rgba(0, 0, 0, 0.35);

  --bbc-stroke-text: rgba(255, 255, 255, 0.65);
  --bbc-stroke-line: rgba(255, 255, 255, 0.14);

  --bbc-watermark-start: #1C2431;
  --bbc-watermark-end: #151B25;

  --bbc-toggle-color: #F2F4F8;
  --bbc-toggle-border: rgba(255, 255, 255, 0.18);
  --bbc-toggle-hover-bg: rgba(234, 95, 35, 0.18);

  /* ---- Remap the original Industrie tokens (main.css) ----
     Brand colors (--rs-theme-*) intentionally unchanged so the
     site keeps its Industrie identity in dark mode.            */
  --rs-bg-primary: var(--bbc-bg-surface);
  --rs-text-primary: var(--bbc-text-body);
  --rs-title-primary: var(--bbc-text-heading);
  --rs-title-secondary: var(--bbc-text-heading);
  --rs-text-tertiary: var(--bbc-slate-text);
  --rs-border-primary: var(--bbc-border);
  --rs-border-secondary: var(--bbc-border-strong);
  --rs-placeholder: rgba(231, 236, 244, 0.4);
  --rs-light: #232B38;
}

/*==================================================
  3. DARK-MODE COMPONENT OVERRIDES
==================================================*/

/* ---------- 3.1 Header / Navigation ---------- */
html[data-theme="dark"] .rs-sticky-header {
  background: var(--bbc-bg-elevated);
  box-shadow: 0 0 25px rgba(0, 0, 0, 0.55);
}

html[data-theme="dark"] .main-menu .submenu,
html[data-theme="dark"] .main-menu .submenu ul,
html[data-theme="dark"] .main-menu .mega-menu {
  background-color: var(--bbc-bg-elevated);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
}

html[data-theme="dark"] .rs-header-search input {
  color: var(--bbc-text-heading);
  background: var(--bbc-bg-elevated);
  border-color: var(--bbc-border-strong);
}

html[data-theme="dark"] .rs-header-hamburger .bar-icon svg path {
  fill: var(--bbc-text-body);
}

/* Header logo swap (dark uses the white footer logo art) */
.bbc-logo-dark {
  display: none;
}

html[data-theme="dark"] .bbc-logo-dark {
  display: inline-block;
}

html[data-theme="dark"] .bbc-logo-light {
  display: none;
}

/* ---------- 3.2 Offcanvas / Mobile menu ---------- */
html[data-theme="dark"] .offcanvas-area .mean-container .mean-nav ul li a,
html[data-theme="dark"] .offcanvas-area .mean-container .mean-nav ul li span {
  color: var(--bbc-text-heading);
}

html[data-theme="dark"] .mean-container .mean-nav ul li span {
  color: var(--bbc-text-heading);
}

html[data-theme="dark"] .offcanvas-about p,
html[data-theme="dark"] .offcanvas-contact-text a {
  color: var(--bbc-text-body);
}

html[data-theme="dark"] .offcanvas-contact-icon svg path {
  fill: var(--bbc-text-body);
}

html[data-theme="dark"] .offcanvas-social ul li a {
  color: var(--bbc-text-heading);
  border-color: var(--bbc-border-strong);
}

/* ---------- 3.3 Preloader & custom cursor ---------- */
html[data-theme="dark"] .loader .loader-container {
  border-color: #2A3240;
}

html[data-theme="dark"] #rs-mouse #cursor-ball {
  border-color: rgba(255, 255, 255, 0.18);
}

/* ---------- 3.4 Banner (Home hero) ---------- */
html[data-theme="dark"] .rs-banner-seven .rs-banner-subtitle {
  color: var(--bbc-navy-text);
}

html[data-theme="dark"] .rs-banner-seven .rs-banner-title.has-stroke {
  -webkit-text-stroke-color: var(--bbc-navy-text);
  -webkit-text-fill-color: var(--bbc-bg-body);
}

html[data-theme="dark"] .rs-banner-seven .rs-play-btn.has-transparent-btn {
  background: var(--bbc-bg-elevated);
  color: var(--bbc-text-heading);
}

/* ---------- 3.5 Section titles / subtitles ---------- */
html[data-theme="dark"] .rs-section-subtitle {
  color: var(--bbc-text-heading);
}

/* keep branded subtitle variants (orange etc.) as designed */
html[data-theme="dark"] .rs-section-subtitle.has-theme-orange {
  color: var(--rs-theme-orange);
}

html[data-theme="dark"] .rs-section-subtitle.has-theme-red {
  color: var(--rs-theme-orange);
}

html[data-theme="dark"] .rs-section-title.has-theme-blue {
  color: var(--bbc-navy-deep-text);
}

html[data-theme="dark"] .rs-section-title.has-theme-green {
  color: var(--bbc-navy-deep-text);
}

html[data-theme="dark"] .rs-about-four .rs-section-title {
  color: var(--bbc-text-heading);
}

html[data-theme="dark"] .rs-section-title.elements-title {
  color: var(--bbc-text-heading) !important;
}

html[data-theme="dark"] .rs-section-subtitle-wrapper .rs-section-border-line {
  background: rgba(255, 255, 255, 0.18);
}

html[data-theme="dark"] .watermark-title {
  background-image: linear-gradient(180deg,
      rgba(255, 255, 255, .12) 0%,
      rgba(255, 255, 255, .03) 100%);

  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Giant watermark display titles (gradient-clipped text) */
/* html[data-theme="dark"] .rs-about-six.rs-about-title,
html[data-theme="dark"] .rs-about-six .rs-about-title,
html[data-theme="dark"] .rs-about-fourteen .rs-about-title {
  background-image: linear-gradient(180deg, var(--bbc-watermark-start) 20%, var(--bbc-watermark-end) 100%);
} */
html[data-theme="dark"] .rs-header-area.has-theme-light-green .main-menu ul li a.active {
  color: white;
}

html[data-theme="dark"] .rs-header-area.has-theme-light-green .main-menu>ul>li:hover>a {
  color: white;
}

html[data-theme="dark"] .rs-header-area.has-theme-light-green .main-menu .submenu li:hover>a {
  color: white;
}
html[data-theme="dark"].rs-header-four .main-menu li a {
    color: white;
}
html[data-theme="light"].rs-header-four .main-menu li a {
    color: #263068;
}

html[data-theme="dark"] .rs-rotate-btn .rs-text-circle span {
  color: white;
}

html[data-theme="dark"] .chs-mod h4 {
  color: #000 !important;
}

html[data-theme="dark"] .heading-5 {
  color: #000 !important;
}

html[data-theme="dark"] .rs-accordion-one.has-theme-blue .accordion-button:not(.collapsed) {
  color: #fff;

}

html[data-theme="dark"] .rs-accordion-one.has-theme-blue .accordion-button {
  color: #fff;
}

html[data-theme="dark"] .rs-accordion-one.has-theme-blue .accordion-button:not(.collapsed) .accordion-btn::after {
  background: #fff;
}

html[data-theme="dark"] .rs-accordion-one.has-theme-blue .accordion-button .accordion-btn::before,
.rs-accordion-one.has-theme-blue .accordion-button .accordion-btn::after {
  background: #fff;
}

html[data-theme="dark"] .rs-contact-one.has-theme-orange-two .rs-contact-form-title {
  color: #000;
}

html[data-theme="dark"] .para-grey {
  color: #666 !important;
}

html[data-theme="dark"] .bis-special-content strong {
  color: #EA5F23;
  font-weight: 700;
}

html[data-theme="dark"] .privacy-card {
  background: var(--bbc-bg-card);
  border-color: var(--bbc-border);
}

html[data-theme="dark"] .privacy-intro {
  background: var(--bbc-bg-card);
  border-color: var(--bbc-border);
}


html[data-theme="light"] .rs-accordion-one.has-theme-blue .accordion-button .accordion-btn::before,
.rs-accordion-one.has-theme-blue .accordion-button .accordion-btn::after {
  background: #000;
}


/* ---------- 3.6 Buttons ---------- */
html[data-theme="dark"] .rs-btn.has-bg-transparent {
  border-color: var(--bbc-border-strong);
}

html[data-theme="dark"] .rs-btn.has-text {
  color: var(--bbc-text-heading);
}

html[data-theme="dark"] .rs-btn.has-text .icon-box svg {
  fill: var(--bbc-text-heading);
}

/* ---------- 3.7 Counters (outlined numbers) ---------- */
html[data-theme="dark"] .rs-counter-one .rs-counter-number,
html[data-theme="dark"] .rs-counter-one .prefix {
  -webkit-text-stroke-color: var(--bbc-stroke-text);
  stroke: var(--bbc-stroke-text);
}

html[data-theme="dark"] .rs-counter-one .rs-counter-number-wrapper {
  border-bottom-color: var(--bbc-stroke-line);
}

html[data-theme="dark"] .rs-about-four .rs-counter-title {
  color: var(--bbc-text-body);
}

/* ---------- 3.8 About sections & tab navs ---------- */
html[data-theme="dark"] .rs-about-four .rs-about-tab .nav-item:not(:last-child) .nav-link::before,
html[data-theme="dark"] .rs-about-five .rs-about-tab .nav-item:not(:last-child) .nav-link::before,
html[data-theme="dark"] .rs-about-six .rs-about-tab .nav-item:not(:last-child) .nav-link::before,
html[data-theme="dark"] .rs-about-ten .rs-about-tab .nav-item:not(:last-child) .nav-link::before,
html[data-theme="dark"] .rs-history-one .rs-history-tab .nav-item:not(:last-child) .nav-link::before {
  background: var(--bbc-divider);
}

/* ---------- 3.9 Services ---------- */
html[data-theme="dark"] .rs-services-one .rs-services-tab .nav-link {
  background: var(--bbc-bg-card);
  color: var(--bbc-text-body);
  border-color: var(--bbc-border);
}

html[data-theme="dark"] .rs-services-one .rs-services-tab .nav-link.active,
html[data-theme="dark"] .rs-services-one .rs-services-tab .nav-link:hover {
  background: var(--rs-theme-orange);
  color: #FFFFFF;
}

html[data-theme="dark"] .rs-services-one .rs-services-tab-title.has-theme-green {
  color: var(--bbc-text-heading);
}

/* ---------- 3.10 History / timeline tabs ---------- */
html[data-theme="dark"] .rs-history-one .rs-history-tab .nav-link {
  background: var(--bbc-bg-elevated);
  color: var(--bbc-text-body);
}

html[data-theme="dark"] .rs-history-one .rs-history-bg-thumb {
  opacity: 0.07;
}

/* ---------- 3.11 Testimonials ---------- */
html[data-theme="dark"] .rs-testimonial-four .rs-testimonial-slider-wrapper .swiper-slide.swiper-slide-active {
  background-color: var(--bbc-bg-elevated);
  box-shadow: 0px 10px 20px -20px rgba(0, 0, 0, 0.6);
}

html[data-theme="dark"] .rs-testimonial-four .rs-testimonial-rating-wrapper {
  border-top-color: var(--bbc-border-strong);
}

html[data-theme="dark"] .rs-testimonial-four .rs-testimonial-separator {
  color: #3A4250;
}

html[data-theme="dark"] .rs-testimonial-four .rs-testimonial-avater-designation {
  color: var(--bbc-text-muted);
}

/* ---------- 3.12 CTA strip ---------- */
html[data-theme="dark"] .rs-cta-two .rs-cta-input input {
  background: var(--bbc-bg-elevated);
  color: var(--bbc-text-heading);
  border-color: var(--bbc-border-strong);
}

/* ---------- 3.13 VMC (Vision / Mission) cards ---------- */
html[data-theme="dark"] .rs-vmc-item {
  background: var(--bbc-bg-card);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25);
}

html[data-theme="dark"] .rs-vmc-title {
  color: var(--bbc-text-heading);
}

html[data-theme="dark"] .rs-vmc-content p {
  color: var(--bbc-text-body);
}

/* ---------- 3.14 Story timeline (Our Story) ---------- */
html[data-theme="dark"] .story-section {
  background: var(--bbc-bg-body);
}

html[data-theme="dark"] .story-section .section-title h2 {
  color: var(--bbc-text-heading);
}

html[data-theme="dark"] .story-section .section-title p {
  color: var(--bbc-text-body);
}

html[data-theme="dark"] .timeline::before {
  background: linear-gradient(#EA5F23, #3A4250, #EA5F23);
}

html[data-theme="dark"] .timeline-item::before {
  background: var(--bbc-bg-elevated);
}

html[data-theme="dark"] .timeline-content {
  background: var(--bbc-bg-card);
  border-color: var(--bbc-border);
}

html[data-theme="dark"] .timeline-content::after {
  color: rgba(255, 255, 255, 0.06);
}

html[data-theme="dark"] .timeline-content h4 {
  color: var(--bbc-text-heading);
}

html[data-theme="dark"] .timeline-content p {
  color: var(--bbc-text-body);
}

/* ---------- 3.15 Director section ---------- */
html[data-theme="dark"] .director-section {
  background: var(--bbc-bg-body);
}

html[data-theme="dark"] .director-content h2 {
  color: var(--bbc-text-heading);
}

html[data-theme="dark"] .director-content p {
  color: var(--bbc-text-body);
}

html[data-theme="dark"] .director-footer h4 {
  color: var(--bbc-text-heading);
}

html[data-theme="dark"] .director-footer span {
  color: var(--bbc-text-muted);
}

html[data-theme="dark"] .steel-pattern {
  background-image: radial-gradient(#2A3240 2px, transparent 2px);
}

/* ---------- 3.16 Masonry marquee gallery ---------- */
html[data-theme="dark"] .ind-masonry-marquee {
  background: var(--bbc-bg-body);
}

html[data-theme="dark"] .ind-card {
  background: var(--bbc-bg-card);
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4);
}

/* ---------- 3.17 Proof / certification section ---------- */
html[data-theme="dark"] .ind-proof-section {
  background: var(--bbc-bg-body);
}

html[data-theme="dark"] .ind-proof-wrapper {
  background: var(--bbc-bg-card);
  border-color: var(--bbc-border);
  box-shadow: var(--bbc-shadow-card);
}

html[data-theme="dark"] .ind-cert-box,
html[data-theme="dark"] .ind-letter-box {
  background: var(--bbc-bg-elevated);
  border-color: var(--bbc-border);
}

html[data-theme="dark"] .ind-cert-box:hover,
html[data-theme="dark"] .ind-letter-box:hover {
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.45);
}

html[data-theme="dark"] .ind-cert-box p,
html[data-theme="dark"] .ind-letter-content span,
html[data-theme="dark"] .ind-letter-content small {
  color: var(--bbc-text-body);
}

html[data-theme="dark"] .ind-popup-trigger:hover {
  background: #C64E1A;
  color: #FFFFFF;
}

/* ---------- 3.18 Industrial network (Contact) ---------- */
html[data-theme="dark"] .rs-industrial-counter-item {
  background: var(--bbc-bg-card);
  border-color: var(--bbc-border);
}

html[data-theme="dark"] .rs-industrial-counter-item:hover {
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.45);
}

html[data-theme="dark"] .rs-industrial-counter-item span {
  color: var(--bbc-text-body);
}

html[data-theme="dark"] .rs-industrial-network-desc {
  color: var(--bbc-text-body);
}

html[data-theme="dark"] .rs-industrial-sector-item {
  background: var(--bbc-bg-card);
  color: var(--bbc-text-body);
}

html[data-theme="dark"] .rs-industrial-sector-item:hover {
  background: var(--rs-theme-orange);
  color: #FFFFFF;
}

/* ---------- 3.19 Contact & forms ---------- */
html[data-theme="dark"] .rs-contact-seven .rs-contact-form {
  background: var(--bbc-bg-surface);
  box-shadow: 0px 0px 0px 5px var(--bbc-bg-elevated);
}

html[data-theme="dark"] .rs-contact-seven .rs-contact-input input,
html[data-theme="dark"] .rs-contact-seven .rs-contact-input textarea {
  background: var(--bbc-bg-input);
  color: var(--bbc-text-heading);
  border-color: var(--bbc-border-strong);
}

html[data-theme="dark"] .rs-contact-seven .rs-contact-input input:focus,
html[data-theme="dark"] .rs-contact-seven .rs-contact-input textarea:focus {
  border-color: var(--rs-theme-orange);
}

/* Generic form elements (any page / future components) */
html[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
html[data-theme="dark"] textarea,
html[data-theme="dark"] select {
  caret-color: var(--bbc-text-heading);
}

/* html[data-theme="dark"] .nice-select {
  background-color: var(--bbc-bg-input);
  border-color: var(--bbc-border-strong);
  color: var(--bbc-text-body);
} */

/* html[data-theme="dark"] .nice-select .list {
  background-color: var(--bbc-bg-elevated);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
} */

/* html[data-theme="dark"] .nice-select .option:hover,
html[data-theme="dark"] .nice-select .option.focus,
html[data-theme="dark"] .nice-select .option.selected.focus {
  background-color: var(--bbc-bg-surface);
} */

/* Contact info cards (custom .contact-card on Contact page) */
html[data-theme="dark"] .contact-card {
  background: var(--bbc-bg-card);
  border-color: var(--bbc-border);
  box-shadow: 0 5px 5px rgba(0, 0, 0, 0.3);
}

html[data-theme="dark"] .contact-card::before {
  background: linear-gradient(120deg,
      transparent,
      rgba(255, 255, 255, 0.08),
      transparent);
}

html[data-theme="dark"] .contact-card:hover {
  background: linear-gradient(135deg, #1D2532, #241F20);
  box-shadow: 0 19px 31px rgba(235, 83, 0, 0.12);
}

html[data-theme="dark"] .contact-card h4 {
  color: var(--bbc-text-heading);
}

html[data-theme="dark"] .contact-card a,
html[data-theme="dark"] .contact-card p {
  color: var(--bbc-text-body);
}

/* Client / brand logo tiles: keep a light tile in dark mode so the
   original full-color logos stay legible (no image inversion).     */
html[data-theme="dark"] .rs-brand-item {
  background: #E9EDF2;
}

html[data-theme="dark"] .rs-brand-four .rs-brand-item:hover {
  background: #F3D9CC;
}

/* ---------- 3.20 Scrollbars ---------- */
html[data-theme="dark"] {
  scrollbar-color: #333D4D var(--bbc-bg-body);
}

html[data-theme="dark"] ::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

html[data-theme="dark"] ::-webkit-scrollbar-track {
  background: var(--bbc-bg-body);
}

html[data-theme="dark"] ::-webkit-scrollbar-thumb {
  background: #333D4D;
  border-radius: 6px;
}

html[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
  background: #414D61;
}

/*==================================================
  4. THEME TOGGLE BUTTON (sun / moon)
==================================================*/
.bbc-theme-toggle {
  -webkit-appearance: none;
  appearance: none;
  position: relative;
  width: 44px;
  height: 44px;
  min-width: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--bbc-toggle-border);
  background: transparent;
  color: var(--bbc-toggle-color);
  cursor: pointer;
  padding: 0;
  line-height: 1;
  transition: background-color 0.35s ease, border-color 0.35s ease,
    color 0.35s ease, transform 0.2s ease;
}

.bbc-theme-toggle:hover {
  background: var(--bbc-toggle-hover-bg);
  border-color: var(--rs-theme-orange);
  color: var(--rs-theme-orange);
}

.bbc-theme-toggle:active {
  transform: scale(0.92);
}

.bbc-theme-toggle:focus-visible {
  outline: 2px solid var(--rs-theme-orange);
  outline-offset: 3px;
}

.bbc-theme-toggle svg {
  position: absolute;
  width: 20px;
  height: 20px;
  fill: currentColor;
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.35s ease;
}

/* Sun visible in dark mode (click = go light), moon in light mode */
.bbc-theme-toggle .bbc-icon-sun {
  opacity: 0;
  transform: rotate(90deg) scale(0.4);
}

.bbc-theme-toggle .bbc-icon-moon {
  opacity: 1;
  transform: rotate(0) scale(1);
}

html[data-theme="dark"] .bbc-theme-toggle .bbc-icon-sun {
  opacity: 1;
  transform: rotate(0) scale(1);
}

html[data-theme="dark"] .bbc-theme-toggle .bbc-icon-moon {
  opacity: 0;
  transform: rotate(-90deg) scale(0.4);
}

/* Standalone right-side wrapper for the main (non-sticky) header,
   which ships with its .rs-header-right commented out. Keeps the
   toggle flush with the menu bar without altering the layout.   */
.bbc-header-toggle-slot {
  display: flex;
  align-items: center;
  background: var(--rs-bg-primary);
  border-radius: 10px;
  padding: 23px 20px;
  gap: 15px;
}

@media (max-width: 767px) {
  .bbc-header-toggle-slot {
    padding: 10px 12px;
  }

  .bbc-theme-toggle {
    width: 40px;
    height: 40px;
    min-width: 40px;
  }
}

/* Offcanvas placement */
.offcanvas-top .bbc-theme-toggle {
  margin-inline-start: auto;
  margin-inline-end: 15px;
}

/*==================================================
  5. SMOOTH THEME SWITCHING
     .bbc-theme-anim is added by theme-toggle.js for
     ~450ms around a switch, then removed — so page
     load and normal interactions stay untouched.
==================================================*/
html.bbc-theme-anim body,
html.bbc-theme-anim body *,
html.bbc-theme-anim body *::before,
html.bbc-theme-anim body *::after {
  transition: background-color 0.4s ease, background-image 0.4s ease,
    color 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease,
    fill 0.4s ease, stroke 0.4s ease, opacity 0.4s ease !important;
}

/* Respect reduced-motion users */
@media (prefers-reduced-motion: reduce) {

  html.bbc-theme-anim body,
  html.bbc-theme-anim body *,
  html.bbc-theme-anim body *::before,
  html.bbc-theme-anim body *::after {
    transition: none !important;
  }

  .bbc-theme-toggle svg {
    transition: none;
  }
}

@media (min-width:0px) and (max-width:475px) {
  .bbc-header-toggle-slot {
    padding: 7px 12px;
  }

  .bbc-lang-btn {
    height: 35px;
  }

  .bbc-theme-toggle {
    width: 35px;
    height: 35px;
    min-width: 35px;
  }

  .bbc-theme-toggle svg {
    width: 15px;
    height: 15px;
  }
}