/* ==========================================================================
   WCPA theme switch — "Bluish" (default) ↔ "Moss/Clay"  (Session 11)
   --------------------------------------------------------------------------
   This file carries the FULL Moss/Clay scheme, scoped under
   `body.theme-moss`. Default (no class) = the current site-wide bluish
   scheme (#273c66 footer / #334e82 newsletter card / #21a7d0 buttons &
   nav) — NOTHING in here applies until theme-switch.js (or the visitor's
   saved choice) turns the Moss/Clay theme on, so adding this file to a
   page changes nothing visually until toggled.

   History: these rules lived as page-scoped demo <style> blocks on
   contact.html + workshops/workshop-the-art-of-cueing-pilates-on-
   suspension-straps.html (S9/S10) so Natalia could compare schemes. S11
   re-homed them here verbatim — extended with the booking-page buttons
   (.btn-book + the terms-gate button) and the workshops.html filter so
   EVERY page reads as one scheme in either mode — and deleted the page
   blocks.

   Endgame: when Natalia picks a winner, the winner becomes the DEFAULT
   (move these values into style.css / the page inline blocks, then delete
   this layer + the toggle). Do NOT `git revert 88e416d` — that rollback
   path was retired in S10 (stale commit vs diverged inline styles =
   conflicts). See AGENTS.md + next-session.md decision log.
   ========================================================================== */

/* --- Topbar strip → Moss ---------------------------------------------------
   !important required: style.css's `.dark-parimary-bg { background:#203154
   !important }` would otherwise win (this was the "still bluish topbar"
   bug fixed on the demo pages in S10). */
body.theme-moss .topbar-area.dark-parimary-bg { background: #2E4036 !important; }

/* --- Footer + newsletter card → Moss shades -------------------------------- */
body.theme-moss .rs-footer { background-color: #2E4036; }
body.theme-moss .rs-newsletter.style1 .newsletter-wrap { background: #3A5145; }

/* --- Nav menu hover + active/current item → Clay ----------------------------
   Out-specifies the end-of-file nav block in style.css (which sets the
   light-blue hover/active with !important). */
body.theme-moss .full-width-header.home1-modifiy .rs-header .menu-area .rs-menu-area .main-menu .rs-menu ul.nav-menu li a:hover { color: #CC5833 !important; transition: color 0.25s ease; }
body.theme-moss .full-width-header.home1-modifiy .rs-header .menu-area .rs-menu-area .main-menu .rs-menu ul.nav-menu li.current-menu-item > a,
body.theme-moss .full-width-header.home1-modifiy .rs-header .menu-area .rs-menu-area .main-menu .rs-menu ul.nav-menu li.active > a { color: #CC5833 !important; }

/* --- Footer menu hover + bullets → Clay ------------------------------------- */
body.theme-moss .rs-footer .footer-top .site-map li a { transition: color 0.25s ease; }
body.theme-moss .rs-footer .footer-top .site-map li a:hover { color: #CC5833 !important; }
body.theme-moss .rs-footer .footer-top .site-map li:before { background: #CC5833 !important; }

/* --- All CTA buttons → Clay (#b04724 on hover) ------------------------------
   .readon (Send Message, CTAs), .apply-btn (topbar "Book Workshop"),
   .btn-register (workshop detail pages), .btn-book (booking pages).
   !important: the button rules in style.css and each page's inline
   <style> would otherwise win. */
body.theme-moss .readon,
body.theme-moss .apply-btn,
body.theme-moss .btn-register,
body.theme-moss .btn-book { background: #CC5833 !important; }
body.theme-moss .readon:hover,
body.theme-moss .apply-btn:hover,
body.theme-moss .btn-register:hover,
body.theme-moss .btn-book:hover { background: #b04724 !important; }
/* .btn-book's inline hover glow is bluish — swap it for the Clay glow */
body.theme-moss .btn-book:hover { box-shadow: 0 8px 24px rgba(204, 88, 51, 0.35) !important; }

/* Terms-gate "Show Available Dates" button (workout-and-learn/* pages) */
body.theme-moss .terms-gate button { background: #CC5833 !important; }
body.theme-moss .terms-gate button:not(:disabled):hover { background: #b04724 !important; }

/* --- Newsletter submit → Clay ------------------------------------------------ */
body.theme-moss .rs-newsletter.style1 .newsletter-wrap .newsletter-form button { background: #CC5833 !important; }
body.theme-moss .rs-newsletter.style1 .newsletter-wrap .newsletter-form button:hover { background: #b04724 !important; }

/* --- Topbar "Contact Us" envelope icon + link hover → Clay ------------------- */
body.theme-moss .topbar-area .topbar-right li.login-register i { color: #CC5833 !important; }
body.theme-moss .topbar-area .topbar-right li.login-register a:hover { color: #CC5833 !important; }

/* --- workshops.html class-filter active state → Clay -------------------------
   (extended beyond the original two demo pages so the scheme is one
   consistent system on every page) */
body.theme-moss .gridFilter button.active { color: #CC5833; }
body.theme-moss .gridFilter button.active::after { background: #CC5833; }

/* ==========================================================================
   Session 12 — color consistency audit ("magnifying glass" pass)
   --------------------------------------------------------------------------
   The S11 toggle above only re-homed the demo-block family. Two MORE leak
   classes were making both schemes read "mixed" (see docs/color-audit.md):

   (1) The CSS-VARIABLE SYSTEM — every page's inline :root pins the 4
       design tokens to the MOSS palette, and ~120 inline rules consume
       them via var(--primary-color) etc. Nothing re-defined the vars per
       theme, so those rules rendered Moss in BOTH modes (workshop banners,
       .content-area h3/h4, .btn-enquire, legal-card headings, sub-titles,
       the topbar, …). Fix: redefine the tokens on `body` (Bluish) and on
       `body.theme-moss` (Moss). `body` out-specifics `:root`, so this
       single block flips the whole var-based family at once.
       --secondary-color stays CLAY in both modes (decorative accent stays
       warm per the S9 owner call; see docs/color-audit.md §D2).

   (2) style.css's TEMPLATE ACCENT SYSTEM — ~248 #21a7d0 rules (card-title
       hovers, category chips, "Info" chips, testimonial dots, footer
       sitemap hovers, pagination, base link color, ::selection, …) that
       never flipped under Moss. Fix: Moss-mode overrides below for every
       LIVE component family. Dormant template variants (WooCommerce,
       checkout, events, FAQ, header-style2/3, home7/8/9-style4,
       transparent) deliberately untouched — they're not on this site.

   Plus the Bluish-mode Moss leaks: sticky-nav bg + header logo text were
   Moss in both modes (inline rgba(46,64,54,…) + inline style="color:#2E4036").
   Both fixed per-theme below.

   NOTHING here changes the Bluish DEFAULT values (footer #273c66, card
   #334e82, button/nav #21a7d0) — those stay the owner-sanctioned interim
   until Natalia picks. The audit only ADDS Moss-mode coverage and FIXES
   leaks that were rendering Moss in Bluish mode.
   ========================================================================== */

/* --- (1) The CSS-variable system, flipped per theme ------------------------ */
/* `body` out-specifics the inline `:root`, so these win. The four tokens
   drive ~120 var() rules site-wide (banners, headings, cards, sub-titles,
   legal-card titles, etc.) — one block flips the lot. */
body {
    --primary-color: #273c66;   /* Bluish navy — replaces Moss in default mode */
    --secondary-color: #CC5833; /* Clay — stays Clay in BOTH modes (decorative accent; §D2) */
    --bg-color: #F2F0E9;        /* Cream page bg — same in both modes */
    --text-color: #1A1A1A;      /* Charcoal — same in both modes */
}
body.theme-moss {
    --primary-color: #2E4036;   /* Moss */
    --secondary-color: #CC5833; /* Clay */
    --bg-color: #F2F0E9;
    --text-color: #1A1A1A;
}

/* Parallel block for the 3 workout-and-learn/* session pages, which use a
   DIVERGENT token naming (--moss/--clay/--charcoal/--cream/--white) instead
   of the standard four. Their inline rules mostly use literal bluish hexes
   (already covered by S11), but the few var() consumers need this. */
body {
    --moss: #273c66; --clay: #CC5833; --charcoal: #1A1A1A; --cream: #F2F0E9; --white: #ffffff;
}
body.theme-moss {
    --moss: #2E4036; --clay: #CC5833; --charcoal: #1A1A1A; --cream: #F2F0E9; --white: #ffffff;
}

/* --- (2) Bluish-mode Moss leaks → fixed per theme -------------------------- */

/* Sticky nav background — was rgba(46,64,54,0.95) on every page in BOTH
   modes (inline in each <style> block). Bluish mode gets the navy equivalent;
   Moss mode keeps Moss. The `body` prefix out-specifics the inline rule.
   NOTE: workshop detail pages use alpha 0.97 — covered by the same override
   (we set the full rgba; the inline 0.97 vs 0.95 difference is moot once
   the color itself is right). */
body .rs-header .menu-area.menu-sticky.sticky { background: rgba(39, 60, 102, 0.95) !important; backdrop-filter: blur(10px); }
body.theme-moss .rs-header .menu-area.menu-sticky.sticky { background: rgba(46, 64, 54, 0.95) !important; backdrop-filter: blur(10px); }

/* Header "WCP Academy" <h3> logo text — was inline style="color:#2E4036"
   (Moss) on all 21 pages in both modes. The inline style= wins normal
   specificity, so we need !important. Bluish mode = navy; Moss mode = Moss. */
body #rs-header .logo-part h3 { color: #273c66 !important; }
body.theme-moss #rs-header .logo-part h3 { color: #2E4036 !important; }

/* --- (3) Moss-mode coverage for style.css's template-accent family ----------
   These rules only apply under body.theme-moss. They catch the #21a7d0
   family in style.css so Moss mode reads as one system. Where a rule is an
   ACCENT (hover, chip, icon, dot, label) it becomes Clay #CC5833 (matches
   the Moss/Clay palette); where it's a STRUCTURAL bg it becomes Moss
   #2E4036. The full per-rule map is in docs/color-audit.md §B. */

/* Base link color + selection highlight (style.css L137/146/157/162) */
body.theme-moss a { color: #2E4036; }
body.theme-moss a:hover, body.theme-moss a:active { color: #CC5833; }
body.theme-moss ::-moz-selection,
body.theme-moss ::selection { background: #CC5833; }

/* Section sub-titles (.sec-title .sub-title.primary style.css L1290,
   .sec-title2 .sub-title L1316) — Clay accent label */
body.theme-moss .sec-title .sub-title.primary,
body.theme-moss .sec-title2 .sub-title { color: #CC5833; }

/* Topbar contact/login/apply link hovers (style.css L1513/1528/1534/1543) */
body.theme-moss .topbar-area .topbar-contact li a:hover,
body.theme-moss .topbar-area .topbar-right li.login-register i,
body.theme-moss .topbar-area .topbar-right li.login-register a:hover,
body.theme-moss .topbar-area .topbar-right li a.apply-btn:hover { color: #CC5833; }
body.theme-moss .topbar-area .topbar-right li a.apply-btn:hover { background: #b04724; }

/* Buttons the S11 block didn't list (.readon2/3, .readon-arrow, .btn-shop,
   .blog-btn — style.css L685/784/831/857/868 etc.). The main .readon/
   .apply-btn/.btn-register/.btn-book are already Clay via S11 above. */
body.theme-moss .readon2,
body.theme-moss .readon3,
body.theme-moss .btn-shop { background: #CC5833 !important; }
body.theme-moss .readon2:hover,
body.theme-moss .readon3:hover,
body.theme-moss .btn-shop:hover { background: #b04724 !important; }
body.theme-moss .readon2.transparent,
body.theme-moss .readon3.active,
body.theme-moss .readon-arrow:hover,
body.theme-moss .blog-btn:hover,
body.theme-moss .readon3:hover { color: #CC5833; }

/* Notice board (index.html "Upcoming Training" — style.css L5057/5081/5082) */
body.theme-moss .rs-about.style1 .notice-bord.style1 .title { background: #2E4036; }
body.theme-moss .rs-about.style1 .notice-bord.style1 li .date { color: #CC5833; border-right-color: #CC5833; }

/* Services / categories (style.css L5500/5521/5534/5577/5628/5785/5976) */
body.theme-moss .rs-services.style1 .service-item.overly2:after { background: rgba(46, 64, 54, 0.85); }
body.theme-moss .rs-services.style2 .service-item .content-part .icon-part i,
body.theme-moss .rs-services.style6 .services-wrap .services-item .services-desc .title a:hover,
body.theme-moss .rs-services.style6 .services-wrap:hover .services-item .services-desc .title a,
body.theme-moss .rs-services.style7 .services-item .content-part .title a:hover,
body.theme-moss .rs-services.style2 .service-item .content-part .service-btn:hover,
body.theme-moss .rs-services.style2 .service-item .content-part .title a:hover { color: #CC5833; }
body.theme-moss .rs-categories.style1 .categories-item:hover { background: #2E4036; border-color: #2E4036; }
body.theme-moss .rs-categories.home11-style .main-part .categories-item .content-part .title a:hover { color: #CC5833; }

/* Course cards (style.css L6191/6236/6371/6435/6511/6609/7076/7105/7131/7324/7350/7454/7497) */
body.theme-moss .rs-popular-courses.style1 .courses-item .content-part .meta-part li span.price,
body.theme-moss .rs-popular-courses.style2 .course-wrap .price-btn a i:before,
body.theme-moss .rs-popular-courses.style3 .courses-item .content-part a.categories,
body.theme-moss .rs-popular-courses.style4 .courses-item .content-part .price { background: #CC5833; }
body.theme-moss .rs-popular-courses.style5 .courses-item .courses-grid .content-part .title a:hover,
body.theme-moss .rs-popular-courses.home11-style .courses-item .content-part .course-body .title a:hover,
body.theme-moss .rs-popular-courses.home11-style .courses-item .btn-part a:hover,
body.theme-moss .rs-latest-couses .course-item .course-info .course-title a:hover,
body.theme-moss .rs-latest-couses .course-item .course-info .bottom-part .btn-part a:hover,
body.theme-moss .rs-featured-courses .courses-item .content-part .title a:hover,
body.theme-moss .rs-featured-courses .courses-item .content-part .bottom-part .btn-part a:hover { color: #CC5833; }
body.theme-moss .rs-popular-courses.home11-style .courses-item .content-part .bottom-part .course-footer .desc { color: #2E4036; }
body.theme-moss .rs-popular-courses.style1 .courses-item .content-part .bottom-part .btn-part a { border-color: #CC5833; }

/* Carousel/owl dots & nav arrows (style.css L1181/1236/1267/1273/1276/4674/7384/7387) */
body.theme-moss .rs-carousel.nav-style1 .owl-nav .owl-next,
body.theme-moss .rs-carousel.nav-style1 .owl-nav .owl-prev,
body.theme-moss .rs-slider.style1 .owl-nav .owl-next,
body.theme-moss .rs-slider.style1 .owl-nav .owl-prev { background: #2E4036; }
body.theme-moss .rs-carousel.nav-style2 .owl-nav .owl-prev:hover i,
body.theme-moss .rs-carousel.nav-style2 .owl-nav .owl-next:hover i { color: #CC5833; }
body.theme-moss .rs-carousel .owl-dots .owl-dot { border-color: #CC5833; }
body.theme-moss .rs-carousel .owl-dots .owl-dot:hover,
body.theme-moss .rs-carousel .owl-dots .active,
body.theme-moss .rs-featured-courses .rs-carousel .owl-dots .owl-dot:hover,
body.theme-moss .rs-featured-courses .rs-carousel .owl-dots .active { background: #CC5833; }

/* Testimonials (style.css L9017/9047/9072/9415/9420/9434/9478) */
body.theme-moss .rs-testimonial.style3 .owl-dots .owl-dot,
body.theme-moss .rs-testimonial.style4 .owl-dots .owl-dot,
body.theme-moss .rs-testimonial.home-style1 .owl-dots .owl-dot,
body.theme-moss .rs-testimonial.home-style1 .owl-dots .owl-dot:hover,
body.theme-moss .rs-testimonial.home-style1 .owl-dots .owl-dot.active,
body.theme-moss .rs-testimonial.home11-style .rs-carousel .owl-dots .owl-dot { background: #CC5833; }
body.theme-moss .rs-testimonial.style4 .testi-item .user-info .name:hover,
body.theme-moss .rs-testimonial.home11-style .testi-item .user-info .name:hover { color: #CC5833; }

/* Team / instructors (style.css L8336/8381/8440/8508/8536/8551) — kept for safety */
body.theme-moss .rs-team.style1 .team-item:after { background: rgba(46, 64, 54, 0.85); }
body.theme-moss .rs-team.style1 .nav-style .owl-nav .owl-prev:hover i,
body.theme-moss .rs-team.style1 .nav-style .owl-nav .owl-next:hover i,
body.theme-moss .rs-team.inner-style .team-item .content-part .name a:hover,
body.theme-moss .rs-team.home11-style .team-item .team-thumbnail .team-img .team-social-link li a:hover,
body.theme-moss .rs-team.home11-style .team-item .team-thumbnail .team-header .name a:hover,
body.theme-moss .rs-team.home11-style .team-item .team-thumbnail:hover .team-img .team-social-link li a:hover { color: #CC5833 !important; }

/* Blog / news / widgets / comments (style.css L9718–L10840) */
body.theme-moss .rs-blog.style1 .blog-item .blog-content .title a:hover,
body.theme-moss .rs-blog.style1 .events-short .date-part .date,
body.theme-moss .rs-blog.style1 .events-short .content-part .categorie a:hover,
body.theme-moss .rs-blog.style1 .events-short .content-part .title a:hover,
body.theme-moss .rs-blog.style1.home11-style .blog-item .blog-content .title a:hover,
body.theme-moss .rs-blog.style1.home11-style .blog-item .blog-content .btn-part .readon-arrow:hover,
body.theme-moss .rs-blog.style1.home11-style .blog-item .blog-content .btn-part .readon-arrow:hover:after,
body.theme-moss .rs-blog.style2 .blog-item .blog-content .title a:hover,
body.theme-moss .rs-blog.style2 .blog-item .blog-content .blog-bottom li.cmnt-part a:hover,
body.theme-moss .rs-blog.style2 .blog-item .blog-content .blog-bottom li.btn-part .readon-arrow:hover,
body.theme-moss .rs-blog.style2 .blog-item .blog-content.new-style .title a:hover,
body.theme-moss .rs-blog.style2 .blog-item .blog-content.new-style .blog-bottom li.cmnt-part a:hover,
body.theme-moss .rs-blog.style2 .blog-item .blog-content.new-style .blog-bottom li.btn-part .readon-arrow:hover,
body.theme-moss .rs-blog.style2 .blog-item .blog-content.new-style2 .blog-bottom li.cmnt-part a:hover,
body.theme-moss .rs-blog.style2 .blog-item .blog-content.new-style2 .blog-bottom li.btn-part .readon-arrow:hover,
body.theme-moss .rs-blog.home9-style .short .date-part .date,
body.theme-moss .rs-blog.home9-style .short .content-part .categorie a:hover,
body.theme-moss .rs-blog.home9-style .short .content-part .title a:hover,
body.theme-moss .rs-inner-blog .blog-item .blog-content .blog-title a:hover,
body.theme-moss .rs-inner-blog .blog-item .blog-content .blog-meta .btm-cate li .blog-date i,
body.theme-moss .rs-inner-blog .blog-item .blog-content .blog-meta .btm-cate li .author i,
body.theme-moss .rs-inner-blog .blog-item .blog-content .blog-meta .btm-cate li .tag-line i,
body.theme-moss .rs-inner-blog .widget-area .search-widget .search-wrap button:hover,
body.theme-moss .rs-inner-blog .widget-area .recent-posts ul li a:hover,
body.theme-moss .rs-inner-blog .widget-area .recent-posts-widget .show-featured .post-desc a:hover,
body.theme-moss .rs-inner-blog .widget-area .recent-posts-widget .show-featured .post-desc .date,
body.theme-moss .rs-inner-blog .widget-area .recent-posts-widget .show-featured .post-desc .date i,
body.theme-moss .rs-inner-blog .blog-deatails .blog-full .single-post-meta li .p-date i,
body.theme-moss .rs-inner-blog .blog-deatails .blog-full .single-post-meta .Post-cate .tag-line i,
body.theme-moss .rs-inner-blog .blog-deatails .blog-full .single-post-meta .Post-cate .tag-line a:hover,
body.theme-moss .rs-inner-blog .blog-deatails .blog-full .single-post-meta .post-comment i:before,
body.theme-moss .rs-inner-blog .blog-deatails .blog-full .unorder-list li:before,
body.theme-moss .rs-inner-blog .ps-navigation ul li a .next-link:hover,
body.theme-moss .rs-inner-blog .ps-navigation ul li a .link-text:hover { color: #CC5833; }
body.theme-moss .rs-inner-blog .comment-area .comment-full .submit-btn .submit { background: #CC5833; border-color: #CC5833; }

/* Events (style.css L11093/11308/11317) — dormant on this site, kept for safety */
body.theme-moss .rs-event.modify1 .event-item .event-short .featured-img .dates,
body.theme-moss .rs-latest-events.style1 .event-wrap .events-short .content-part .categorie a:hover,
body.theme-moss .rs-latest-events.style1 .event-wrap .events-short .content-part .title a:hover { background: #CC5833; color: #fff; }
body.theme-moss .rs-latest-events.style1 .event-wrap .events-short .content-part .title a:hover { color: #CC5833; background: transparent; }

/* Intro tabs / course review / why-choose (style.css L7856/8012/8021/8166) */
body.theme-moss .intro-section .intro-tabs .tabs-content .minutes,
body.theme-moss .cource-review-box .like-option li i:hover,
body.theme-moss .cource-review-box .like-option .report:hover,
body.theme-moss .why-choose-us .choose-us-part .facilities-part .single-facility .icon-part i { color: #CC5833; }

/* Pagination (style.css — .pagination-area) */
body.theme-moss .pagination-area a:hover,
body.theme-moss .pagination-area span.current { color: #CC5833; }

/* Footer chrome beyond S11 (style.css L14137/14147/14170/14188/14206/14235/14248/14267/14448) */
body.theme-moss .rs-footer .footer-top .address-widget li .desc a:hover,
body.theme-moss .rs-footer.style6 .footer-top .site-map li a:hover,
body.theme-moss .rs-footer.style6 .footer-bottom .main-part p a:hover,
body.theme-moss .rs-footer.style7 .footer-top .address-widget li i:before,
body.theme-moss .rs-footer.home9-style .footer-bottom .copyright a:hover { color: #CC5833 !important; }
body.theme-moss .rs-footer .footer-bottom .copyright a,
body.theme-moss .rs-footer .footer-top .site-map li a:hover { color: #CC5833; }
body.theme-moss .rs-footer .footer-top .site-map li:before,
body.theme-moss .rs-footer .footer-bottom .footer-social li a { background: #CC5833; }

/* Forms — checkbox/radio :checked ring (style.css L13733/13752) */
body.theme-moss .styled-form .form-group .check-box input[type="checkbox"]:checked + label:before,
body.theme-moss .styled-form .form-group .radio-box input[type="radio"]:checked + label:before { border-color: #CC5833; }

/* Misc chrome — blockquote bar, listing bullets, scrollUp, loader ring,
   FAQ accordion header, video popup (style.css L417/1156/12309/12428/12478/14853/15154/960/989) */
body.theme-moss blockquote:before,
body.theme-moss #scrollUp i { background: #CC5833; }
body.theme-moss ul.listing-style li:before { color: #CC5833; }
body.theme-moss .rs-faq-part .content-part .accordion .card .card-header .card-link,
body.theme-moss .rs-faq-part.style1 .main-part .faq-content .accordion .card .card-header .card-link { background: #2E4036; }
body.theme-moss .media-icon .popup-videos,
body.theme-moss .media-icon .popup-videos:hover:before { background: #CC5833; }
body.theme-moss .loader .loader-container:before { border-top-color: #CC5833; }
/* Page nav strip (breadcrumbs on template pages not used here, but covered) */
body.theme-moss .pagenav-link ul li,
body.theme-moss .pagenav-link ul li a:hover,
body.theme-moss .pagenav-link ul li a:hover i:before { color: #CC5833; }
/* CTA partition overlay (style.css L11564/11651) — dormant, kept for safety */
body.theme-moss .rs-cta.style1 .partition-bg-wrap:after,
body.theme-moss .rs-cta.style3 .partition-bg-wrap:after { background: rgba(46, 64, 54, 0.85); }
/* Publication overlay icon (style.css L12309) */
body.theme-moss .rs-publication .product-list .image-product .overley i:before { background: #CC5833; }

/* ==========================================================================
   The switch UI — markup injected by theme-switch.js
   (fixed pill, bottom-right; styles live here so the look is one file)
   ========================================================================== */
.wcpa-theme-switch {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 9998;
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(26, 26, 26, 0.9);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(242, 240, 233, 0.14);
    border-radius: 999px;
    padding: 6px 8px 6px 16px;
    box-shadow: 0 10px 30px rgba(26, 26, 26, 0.28);
    font-family: 'Outfit', sans-serif;
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 0.45s ease, transform 0.45s ease;
}
.wcpa-theme-switch.wcpa-ts-visible {
    opacity: 1;
    transform: translateY(0);
}
.wcpa-theme-switch .wcpa-ts-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: rgba(242, 240, 233, 0.66);
    white-space: nowrap;
}
.wcpa-ts-options {
    display: flex;
    gap: 3px;
    background: rgba(242, 240, 233, 0.08);
    border-radius: 999px;
    padding: 3px;
}
.wcpa-ts-option {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border: 0;
    cursor: pointer;
    background: transparent;
    color: rgba(242, 240, 233, 0.72);
    font-family: 'Outfit', sans-serif;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    padding: 8px 14px;
    border-radius: 999px;
    white-space: nowrap;
    transition: background 0.25s ease, color 0.25s ease, transform 0.2s ease;
}
.wcpa-ts-option:hover {
    background: rgba(242, 240, 233, 0.12);
    color: #F2F0E9;
}
.wcpa-ts-option:active { transform: scale(0.97); }
.wcpa-ts-option:focus-visible {
    outline: 2px solid #F2F0E9;
    outline-offset: 2px;
}
.wcpa-ts-swatch {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex: none;
    box-shadow: inset 0 0 0 1px rgba(242, 240, 233, 0.35);
}
.wcpa-ts-swatch--bluish { background: #21a7d0; }
.wcpa-ts-swatch--moss { background: linear-gradient(135deg, #2E4036 50%, #CC5833 50%); }
.wcpa-ts-option[aria-pressed="true"].wcpa-ts-option--bluish { background: #21a7d0; color: #1A1A1A; }
.wcpa-ts-option[aria-pressed="true"].wcpa-ts-option--moss { background: #2E4036; color: #F2F0E9; }
.wcpa-ts-option[aria-pressed="true"] .wcpa-ts-swatch { box-shadow: inset 0 0 0 1px rgba(242, 240, 233, 0.6); }

@media (max-width: 575px) {
    .wcpa-theme-switch {
        right: 12px;
        bottom: 12px;
        gap: 7px;
        padding: 5px 6px 5px 12px;
    }
    .wcpa-theme-switch .wcpa-ts-label { display: none; }
    .wcpa-ts-option {
        font-size: 12px;
        padding: 7px 11px;
    }
}
@media print {
    .wcpa-theme-switch { display: none; }
}