/**
 * Theme System - Component Styles & Widget Styles
 * Light/Dark/System theme switching with multiple widget types
 *
 * NOTE: CSS variables are defined in variables.css (loaded via DesignSystemAsset)
 * This file contains only component styles that USE those variables.
 */

/* ============================================
   Global Element Styling
   ============================================ */

body {
    background-color: var(--bg-primary);
    color: var(--text-primary);
    transition: var(--transition-colors);
}

/* Navbar */
.navbar {
    background-color: var(--bg-secondary) !important;
    border-bottom: 1px solid var(--border-default);
    transition: var(--transition-colors);
}

.navbar-brand,
.nav-link {
    color: var(--text-primary) !important;
    transition: color var(--duration-300) var(--ease-in-out);
}

.nav-link:hover {
    color: var(--link-default) !important;
}

/* Cards */
.card {
    background-color: var(--bg-secondary);
    border-color: var(--border-default);
    color: var(--text-primary);
    transition: var(--transition-colors);
}

/* Forms */
.form-control,
.form-select {
    background-color: var(--bg-primary);
    border-color: var(--border-default);
    color: var(--text-primary);
    transition: var(--transition-colors);
}

.form-control:focus,
.form-select:focus {
    background-color: var(--bg-primary);
    border-color: var(--link-default);
    color: var(--text-primary);
    box-shadow: var(--focus-ring-shadow);
}

/* Buttons */
.btn-outline-secondary {
    color: var(--text-primary);
    border-color: var(--border-default);
}

.btn-outline-secondary:hover {
    background-color: var(--bg-tertiary);
    border-color: var(--border-default);
    color: var(--text-primary);
}

/* Footer - styles moved to footer.css */

/* Tables */
.table {
    color: var(--text-primary);
}

.table-striped > tbody > tr:nth-of-type(odd) > * {
    background-color: var(--bg-secondary);
}

/* Alerts */
.alert {
    background-color: var(--bg-secondary);
    border-color: var(--border-default);
    color: var(--text-primary);
}

/* Links */
a {
    color: var(--link-default);
    transition: color var(--duration-300) var(--ease-in-out);
}

a:hover {
    color: var(--link-hover);
}

/* ============================================
   Theme Switcher - Base Styles
   ============================================ */

.theme-switcher {
    /* Mirrors .language-switcher (web/css/language.css) - without this the
       wrapper is a plain block <div>, which breaks onto its own line
       wherever it's dropped inline into text (e.g. the footer copyright
       row) instead of sitting beside its neighbours. */
    display: inline-block;
    z-index: 1000;
}

/* Prevent transition on page load */
.preload * {
    transition: none !important;
}

/* ============================================
   Widget Type: FLOATING
   ============================================ */

.theme-switcher-floating {
    position: fixed;
}

/* Positions */
.theme-switcher-bottom-right {
    bottom: 20px;
    right: 20px;
}

.theme-switcher-bottom-left {
    bottom: 20px;
    left: 20px;
}

.theme-switcher-top-right {
    top: 80px;
    right: 20px;
}

.theme-switcher-top-left {
    top: 80px;
    left: 20px;
}

/* Floating button */
.theme-switcher-floating .theme-switcher-btn {
    border: 2px solid var(--border-default);
    background-color: var(--bg-secondary);
    color: var(--text-primary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    transition: all var(--duration-300) var(--ease-in-out);
    box-shadow: var(--shadow-md);
}

.theme-switcher-floating .theme-switcher-btn:hover {
    transform: scale(1.1);
    box-shadow: var(--shadow-lg);
}

/* Floating menu */
.theme-switcher-floating .theme-switcher-menu {
    position: absolute;
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-default);
    border-radius: 8px;
    padding: 8px;
    box-shadow: var(--shadow-lg);
    display: none;
    min-width: 140px;
}

.theme-switcher-floating.theme-switcher-bottom-right .theme-switcher-menu,
.theme-switcher-floating.theme-switcher-bottom-left .theme-switcher-menu {
    bottom: 70px;
}

.theme-switcher-floating.theme-switcher-top-right .theme-switcher-menu,
.theme-switcher-floating.theme-switcher-top-left .theme-switcher-menu {
    top: 70px;
}

.theme-switcher-floating.theme-switcher-bottom-right .theme-switcher-menu,
.theme-switcher-floating.theme-switcher-top-right .theme-switcher-menu {
    right: 0;
}

.theme-switcher-floating.theme-switcher-bottom-left .theme-switcher-menu,
.theme-switcher-floating.theme-switcher-top-left .theme-switcher-menu {
    left: 0;
}

.theme-switcher-menu.show {
    display: block;
}

/* Theme options */
.theme-option {
    padding: 8px 12px;
    cursor: pointer;
    border-radius: 4px;
    transition: background-color var(--duration-200) var(--ease-in-out);
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-primary);
}

.theme-option:hover {
    background-color: var(--bg-tertiary);
}

.theme-option.active {
    background-color: var(--link-default);
    color: white;
}

.theme-option-icon {
    font-size: 1.2rem;
}

/* ============================================
   Widget Type: DROPDOWN (Bootstrap)
   ============================================ */

.theme-switcher-dropdown .theme-switcher-btn {
    background-color: var(--bg-secondary);
    border-color: var(--border-default);
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 8px;
}

.theme-switcher-dropdown .theme-switcher-btn:hover,
.theme-switcher-dropdown .theme-switcher-btn:focus {
    background-color: var(--bg-tertiary);
    border-color: var(--border-default);
    color: var(--text-primary);
}

.theme-switcher-dropdown .dropdown-menu {
    background-color: var(--bg-secondary);
    border-color: var(--border-default);
}

.theme-switcher-dropdown .dropdown-item {
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 8px;
}

.theme-switcher-dropdown .dropdown-item:hover,
.theme-switcher-dropdown .dropdown-item:focus {
    background-color: var(--bg-tertiary);
    color: var(--text-primary);
}

.theme-switcher-dropdown .dropdown-item.active {
    background-color: var(--link-default);
    color: white;
}

/* ============================================================
   Footer Widget - Dropdown Type (icon + label text credit)
   Used inline in the copyright bar (widgets/views/footer-copyright.php),
   mirroring the language switcher's own footer treatment (see the
   analogous ".language-switcher-footer" section in web/css/language.css) -
   a quiet text credit instead of the bordered button the dropdown type
   uses everywhere else, with a glass-blur open menu. Placed after the
   generic .theme-switcher-dropdown rules above so it wins on source order
   (same selector specificity).
   ============================================================ */
.theme-switcher-footer.theme-switcher-dropdown .theme-switcher-btn {
    background: none;
    border: none;
    /* Underline deliberately copies .footer-sitelink / .footer-changelog-link
       (inline CSS in widgets/views/footer-copyright.php) so the chip reads as
       just another link in the copyright chain - same rgba fallback +
       color-mix pair, kept in lockstep with web/css/language.css's footer
       chip rule. The toggle is rendered as an anchor WITHOUT .btn
       (widgets/views/theme-dropdown.php's dropup branch) precisely so the
       community footer-link rules - color/hover/preset against
       `footer.footer-widget a:not(.btn)` / `.website-footer a:not(.btn)`
       (CommunityBrandingHelper, buildLinkStyleCss()) - override the
       var(--text-muted) fallback below via their !important, exactly as they
       do for the sibling links. currentColor then keeps the dotted underline
       in that same color. */
    border-bottom: 1px dotted rgba(128, 128, 128, 0.4);
    border-bottom: 1px dotted color-mix(in srgb, currentColor 40%, transparent);
    padding: 0;
    /* Same 14px as the links, which sit inside <small> (0.875em of 1rem). */
    font-size: 0.875rem;
    color: var(--text-muted);
    text-decoration: none;
    gap: 0.3em;
    /* ThemeWidget adds .theme-switcher-shape-* at every location and the
       default shape is circle - without this the chip anchor keeps that
       rule's border-radius: 50% and reads as a pill/oval, not a text link. */
    border-radius: 0;
    transition: color 0.3s ease, border-color 0.3s ease;
}

.theme-switcher-footer.theme-switcher-dropdown .theme-switcher-btn:hover,
.theme-switcher-footer.theme-switcher-dropdown .theme-switcher-btn:focus {
    /* Longhand on purpose: the `background` shorthand would also wipe the
       community link-style preset's background-image underline animation
       (OrgWebsiteBrandingHelper::linkPresetRules()), which must keep playing
       on the chip exactly as on the sibling links. */
    background-color: transparent;
    border-bottom-color: var(--bs-primary);
    color: var(--bs-primary);
    text-decoration: none;
}

/* Track the toggle's own 14px instead of the size-small shrink - the
   .theme-switcher-size-small rules further down would otherwise win on
   source order at equal (0,2,0) specificity and leave the label at 0.8rem
   while the language chip next to it sits at 0.875rem ("language looks
   highlighted, theme doesn't"). The extra .theme-switcher-btn class lifts
   these to (0,3,0). */
.theme-switcher-footer .theme-switcher-btn .theme-switcher-icon {
    font-size: 1em;
}

.theme-switcher-footer .theme-switcher-btn .theme-switcher-label {
    font-size: inherit;
}

.theme-switcher-footer .theme-switcher-menu {
    min-width: 150px;
    padding: var(--space-1);
    background: rgba(var(--bg-primary-rgb, 255, 255, 255), 0.9);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(var(--border-default-rgb, 200, 200, 200), 0.2);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
}

[data-theme="dark"] .theme-switcher-footer .theme-switcher-menu {
    background: rgba(var(--bg-primary-rgb, 24, 24, 27), 0.9);
}

.theme-switcher-footer .dropdown-item {
    padding: var(--space-1-5) var(--space-2);
    border-radius: var(--radius-base);
    font-size: var(--font-size-sm);
}

/* Dropdown Size Variations */
.theme-switcher-size-small .theme-switcher-icon {
    font-size: 0.9rem;
}

.theme-switcher-size-small .theme-switcher-label {
    font-size: 0.8rem;
}

.theme-switcher-size-large .theme-switcher-icon {
    font-size: 1.25rem;
}

.theme-switcher-size-large .theme-switcher-label {
    font-size: 1rem;
}

/* ============================================
   Widget Type: TOGGLE SWITCH
   ============================================ */

.theme-switcher-toggle {
    display: inline-block;
}

.theme-toggle-switch {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    user-select: none;
}

.theme-toggle-label {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--text-secondary);
    font-size: 0.9rem;
    transition: color var(--duration-300) var(--ease-in-out);
}

.theme-toggle-input {
    display: none;
}

.theme-toggle-slider {
    position: relative;
    width: 50px;
    height: 26px;
    background-color: var(--bg-tertiary);
    border: 2px solid var(--border-default);
    border-radius: 26px;
    transition: all var(--duration-300) var(--ease-in-out);
}

.theme-toggle-slider::before {
    content: '';
    position: absolute;
    width: 18px;
    height: 18px;
    left: 2px;
    top: 2px;
    background-color: var(--text-primary);
    border-radius: 50%;
    transition: all var(--duration-300) var(--ease-in-out);
}

.theme-toggle-input:checked + .theme-toggle-slider {
    background-color: var(--link-default);
}

.theme-toggle-input:checked + .theme-toggle-slider::before {
    transform: translateX(24px);
    background-color: white;
}

.theme-toggle-input:checked ~ .theme-toggle-label-dark {
    color: var(--text-primary);
    font-weight: 600;
}

/* Toggle Header Style - align with nav-items */
.theme-switcher-toggle.d-flex {
    height: 100%;
}

.theme-toggle-header {
    gap: 8px;
    height: 100%;
    display: flex;
    align-items: center;
}

.theme-toggle-header .theme-toggle-icon {
    font-size: 1rem;
}

/* Match nav-link vertical alignment */
.nav-item .theme-switcher-toggle {
    display: flex;
    align-items: center;
    height: 100%;
}

/* Toggle Size Variations */
.theme-switcher-size-small .theme-toggle-switch {
    gap: 6px;
}

.theme-switcher-size-small .theme-toggle-slider {
    width: 36px;
    height: 20px;
}

.theme-switcher-size-small .theme-toggle-slider::before {
    width: 14px;
    height: 14px;
    left: 1px;
    top: 1px;
}

.theme-switcher-size-small .theme-toggle-input:checked + .theme-toggle-slider::before {
    transform: translateX(16px);
}

.theme-switcher-size-small .theme-toggle-label {
    font-size: 0.8rem;
}

.theme-switcher-size-large .theme-toggle-switch {
    gap: 16px;
}

.theme-switcher-size-large .theme-toggle-slider {
    width: 60px;
    height: 32px;
}

.theme-switcher-size-large .theme-toggle-slider::before {
    width: 24px;
    height: 24px;
    left: 2px;
    top: 2px;
}

.theme-switcher-size-large .theme-toggle-input:checked + .theme-toggle-slider::before {
    transform: translateX(28px);
}

.theme-switcher-size-large .theme-toggle-label {
    font-size: 1rem;
}

/* ============================================
   Widget Type: SEGMENTED CONTROL
   ============================================ */

.theme-switcher-segmented {
    display: inline-block;
}

.theme-segmented-control {
    position: relative;
    display: inline-flex;
    background-color: var(--bg-tertiary);
    border: 1px solid var(--border-default);
    border-radius: 8px;
    padding: 4px;
    gap: 4px;
}

.theme-segment-btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 16px;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    border-radius: 6px;
    transition: all var(--duration-300) var(--ease-in-out);
    z-index: 2;
    font-size: 0.9rem;
}

.theme-segment-btn:hover {
    color: var(--text-primary);
}

.theme-segment-btn.active {
    color: var(--text-primary);
    font-weight: 600;
}

.theme-segment-indicator {
    position: absolute;
    background-color: var(--bg-primary);
    border-radius: 6px;
    transition: all var(--duration-300) var(--ease-out);
    box-shadow: var(--shadow-sm);
    z-index: 1;
    pointer-events: none;
}

.theme-segment-icon {
    font-size: 1.1rem;
}

/* Account dropdown row (widgets/views/_preferences-rows.php): icon-only
   (showLabels:false), sharing one line with the language flags. Rebuilt to
   drop the segmented control's own chrome (background/border/padding) and
   its sliding indicator pill entirely, and instead adopt the exact chip
   shape .language-flag uses (web/css/language.css) at account size - so the
   two controls read as one family of small round chips, not a boxed
   segmented control next to bare flags. */
.theme-switcher-account .theme-segmented-control {
    background: none;
    border: 0;
    padding: 0;
    gap: 4px;
    flex-wrap: wrap;
}
.theme-switcher-account .theme-segment-btn {
    width: calc(1.3rem + 2px);
    height: calc(1.3rem + 2px);
    padding: 0;
    border-radius: var(--radius-full);
    background: var(--bg-tertiary);
    /* Border width reserved at rest (transparent) so .active below only
       swaps color, matching .language-flag's pattern - avoids a layout
       jump when the active button changes. */
    border: 2px solid transparent;
}
.theme-switcher-account .theme-segment-btn:hover {
    background: var(--color-primary-50);
    border-color: var(--color-primary-500);
    transform: scale(1.1);
}
.theme-switcher-account .theme-segment-icon {
    font-size: 0.8rem;
    line-height: 1;
}

/* Active-theme indicator, matching .language-flag.active's ring treatment
   (web/css/language.css) so the two controls read as "the same style of
   active marker". */
.theme-switcher-account .theme-segment-btn.active {
    background: var(--color-primary-100);
    border-color: var(--color-primary-500);
    box-shadow: 0 0 0 3px var(--color-primary-100);
}

/* --color-primary-100 stays a fixed light tint in dark mode (web/css/variables.css
   never remaps it), so the ring above washes out against a dark chip - same
   problem web/css/language.css already solved for .language-flag.active, mirrored
   here with the same dark shades. */
[data-theme="dark"] .theme-switcher-account .theme-segment-btn.active {
    background: var(--color-primary-950);
    border-color: var(--color-primary-500);
    box-shadow: 0 0 0 3px var(--color-primary-900);
}
[data-theme="dark"] .theme-switcher-account .theme-segment-btn:hover {
    background: var(--color-primary-900);
    border-color: var(--color-primary-500);
}

/* The JS-driven sliding pill (web/js/theme.js updateSegmentedIndicator())
   is redundant now that each chip paints its own round background, and
   would show through as a stray rectangle behind the chips. */
.theme-switcher-account .theme-segment-indicator {
    display: none;
}

/* ============================================
   Size Modifiers
   ============================================ */

/* Small */
.theme-switcher-size-small.theme-switcher-floating .theme-switcher-btn {
    width: 40px;
    height: 40px;
    font-size: 1.2rem;
}

.theme-switcher-size-small .theme-option {
    padding: 6px 10px;
    font-size: 0.85rem;
}

.theme-switcher-size-small .theme-segment-btn {
    padding: 6px 12px;
    font-size: 0.85rem;
}

/* Medium (default) */
.theme-switcher-size-medium.theme-switcher-floating .theme-switcher-btn {
    width: 50px;
    height: 50px;
    font-size: 1.5rem;
}

/* Large */
.theme-switcher-size-large.theme-switcher-floating .theme-switcher-btn {
    width: 60px;
    height: 60px;
    font-size: 1.8rem;
}

.theme-switcher-size-large .theme-option {
    padding: 10px 14px;
    font-size: 1rem;
}

.theme-switcher-size-large .theme-segment-btn {
    padding: 10px 20px;
    font-size: 1rem;
}

/* ============================================
   Shape Modifiers
   ============================================ */

.theme-switcher-shape-circle .theme-switcher-btn {
    border-radius: 50%;
}

.theme-switcher-shape-square .theme-switcher-btn {
    border-radius: 4px;
}

.theme-switcher-shape-rounded .theme-switcher-btn {
    border-radius: 12px;
}

/* ============================================
   Style Modifiers
   ============================================ */

.theme-switcher-shadow.theme-switcher-floating .theme-switcher-btn {
    box-shadow: var(--shadow-lg);
}

.theme-switcher-shadow.theme-switcher-floating .theme-switcher-menu {
    box-shadow: var(--shadow-xl);
}

.theme-switcher-animated .theme-switcher-btn {
    transition: all var(--duration-300) var(--ease-out);
}

.theme-switcher-animated .theme-switcher-btn:hover {
    transform: scale(1.1) rotate(5deg);
}

.theme-switcher-animated .theme-option {
    transition: all var(--duration-200) var(--ease-in-out);
}

/* ============================================
   Responsive Design
   ============================================ */

@media (max-width: 768px) {
    .theme-switcher-floating {
        bottom: 10px;
        right: 10px;
    }

    .theme-switcher-size-medium.theme-switcher-floating .theme-switcher-btn {
        width: 45px;
        height: 45px;
        font-size: 1.3rem;
    }

    .theme-switcher-menu {
        min-width: 120px;
    }
}

/* ============================================
   Widget Type: ICON (Animated Single Button)
   ============================================ */

/* Base button styles for icon-type theme switcher in header */
.theme-icon-button {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text-primary);
    line-height: 1;
}

.theme-icon-button .fas {
    font-size: 1.125rem;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

/* Out animation: rotate + shrink + fade */
.theme-icon-button .theme-icon-out {
    transform: rotate(-90deg) scale(0);
    opacity: 0;
}

/* In animation: rotate from opposite side + grow + fade in */
.theme-icon-button .theme-icon-in {
    animation: themeIconIn 0.35s ease-out;
}

@keyframes themeIconIn {
    from {
        transform: rotate(90deg) scale(0);
        opacity: 0;
    }
    to {
        transform: rotate(0) scale(1);
        opacity: 1;
    }
}

/* ============================================
   Icon Theme Switcher - Sun/Moon Animations
   ============================================ */

/* Sun icon - warm yellow with shine */
.theme-icon-button .theme-icon-light {
    color: #f59e0b;
    filter: drop-shadow(0 0 4px rgba(245, 158, 11, 0.6));
    animation: sunShine 3s ease-in-out infinite;
}

/* Moon icon - cool blue with glow */
.theme-icon-button .theme-icon-dark {
    color: #60a5fa;
    filter: drop-shadow(0 0 4px rgba(96, 165, 250, 0.5));
    animation: moonGlow 4s ease-in-out infinite;
}

/* Hover: amplified glow + spin/bounce */
.theme-icon-button:hover .theme-icon-light {
    filter: drop-shadow(0 0 10px rgba(245, 158, 11, 0.9));
    animation: sunSpin 0.5s ease-out;
}

.theme-icon-button:hover .theme-icon-dark {
    filter: drop-shadow(0 0 12px rgba(96, 165, 250, 0.9));
    animation: moonBounce 0.5s ease-out;
}

@keyframes sunShine {
    0%, 100% {
        filter: drop-shadow(0 0 4px rgba(245, 158, 11, 0.5));
        transform: rotate(0deg) scale(1);
    }
    50% {
        filter: drop-shadow(0 0 8px rgba(245, 158, 11, 0.8));
        transform: rotate(15deg) scale(1.05);
    }
}

@keyframes moonGlow {
    0%, 100% {
        filter: drop-shadow(0 0 4px rgba(96, 165, 250, 0.4));
        transform: rotate(0deg) scale(1);
    }
    50% {
        filter: drop-shadow(0 0 8px rgba(96, 165, 250, 0.7));
        transform: rotate(-10deg) scale(1.05);
    }
}

@keyframes sunSpin {
    0% { transform: rotate(0deg) scale(1); }
    50% { transform: rotate(180deg) scale(1.2); }
    100% { transform: rotate(360deg) scale(1); }
}

@keyframes moonBounce {
    0%, 100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-3px) scale(1.15); }
}

/* ============================================
   Header Nav-Link Style (Unified)
   ============================================ */

/* Theme icon in header nav-link - match size of language flag */
.navbar .nav-link .theme-switcher-icon {
    font-size: 1.25rem;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Theme dropdown menu in header */
.navbar .theme-switcher-menu {
    background-color: var(--bg-secondary);
    border-color: var(--border-default);
}

.navbar .theme-switcher-menu .dropdown-item {
    color: var(--text-primary);
}

.navbar .theme-switcher-menu .dropdown-item:hover {
    background-color: var(--bg-tertiary);
}

.navbar .theme-switcher-menu .dropdown-item.active {
    background-color: var(--link-default);
    color: white;
}

/* ============================================
   Design Token Utility Classes
   ============================================ */

/* Text colors using design tokens */
.text-link {
    color: var(--link-default);
    transition: color var(--duration-200) var(--ease-in-out);
}

.text-link:hover {
    color: var(--link-hover);
}

.text-accent {
    color: var(--color-secondary-500);
}

.text-primary-brand {
    color: var(--color-primary-500);
}

.text-theme-primary {
    color: var(--text-primary);
}

.text-theme-secondary {
    color: var(--text-secondary);
}

.text-theme-muted {
    color: var(--text-muted);
}

/* Background colors using design tokens */
.bg-surface {
    background-color: var(--bg-secondary);
}

.bg-surface-alt {
    background-color: var(--bg-tertiary);
}

.bg-accent {
    background-color: var(--color-secondary-500);
}

.bg-accent-subtle {
    background-color: var(--color-secondary-50);
}

.bg-primary-subtle {
    background-color: var(--color-primary-50);
}

/* Border colors using design tokens */
.border-theme {
    border-color: var(--border-default) !important;
}

.border-accent {
    border-color: var(--color-primary-500) !important;
}

.border-secondary-accent {
    border-color: var(--color-secondary-500) !important;
}

/* Badge variants using design tokens */
.badge-accent {
    background-color: var(--color-secondary-500);
    color: white;
}

.badge-primary-brand {
    background-color: var(--color-primary-500);
    color: white;
}

/* Bootstrap badge overrides for theme compatibility */
.badge.bg-secondary {
    background-color: var(--bg-tertiary) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-default);
}

.badge.bg-light {
    background-color: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-default);
}

.badge.bg-dark {
    background-color: var(--color-neutral-800) !important;
    color: var(--color-neutral-100) !important;
}

[data-theme="dark"] .badge.bg-dark {
    background-color: var(--color-neutral-200) !important;
    color: var(--color-neutral-900) !important;
}

/* Link styles for content */
.link-accent {
    color: var(--color-secondary-600);
    transition: color var(--duration-200) var(--ease-in-out);
}

.link-accent:hover {
    color: var(--color-secondary-700);
}

/* Card hover effects */
.card-hover-accent {
    transition: border-color var(--duration-200) var(--ease-in-out),
                box-shadow var(--duration-200) var(--ease-in-out);
}

.card-hover-accent:hover {
    border-color: var(--color-primary-300);
    box-shadow: 0 4px 12px rgba(var(--color-primary-500-rgb), 0.1);
}

/* Section accent border */
.border-start-accent {
    border-left: 3px solid var(--color-primary-500);
    padding-left: var(--space-4);
}

.border-start-secondary {
    border-left: 3px solid var(--color-secondary-500);
    padding-left: var(--space-4);
}

/* Dark mode adjustments for accents */
[data-theme="dark"] .bg-accent-subtle {
    background-color: var(--color-secondary-950);
}

[data-theme="dark"] .bg-primary-subtle {
    background-color: var(--color-primary-950);
}

[data-theme="dark"] .link-accent {
    color: var(--color-secondary-400);
}

[data-theme="dark"] .link-accent:hover {
    color: var(--color-secondary-300);
}

/* ============================================
   Brand Primary Button (uses design token orange)
   ============================================
   Compound `.btn.btn-brand-*` selector is deliberate: Bootstrap's own base
   `.btn` rule sets the same background-color/border-color/color at the same
   specificity (0-1-0). A bare single-class selector here only wins because
   this file happens to load after bootstrap.css on the platform layout - on
   the org-website layout the load order is reversed and a single-class rule
   silently loses to Bootstrap's transparent default. The compound selector
   (0-2-0) wins regardless of which file loads last. See web/css/website-theme.css
   for the identical org-website copy of these rules.

   Button-roles round: this file now reads the SAME --wb-btn-*/--website-btn-
   {role}-*/--website-button-* tier chain as website-theme.css (see that
   file's "Four-tier button color cascade" comment for the full explanation).
   Previously this copy read no vars at all, so a community custom page
   (which loads this file, not website-theme.css - see
   CommunityWebsiteController::actionPublicPage / layouts/main.php) silently
   ignored the Appearance tab's Buttons card. Every var() here keeps this
   file's own hardcoded color as its innermost fallback, so a page that never
   emits any of these vars (i.e. every platform page) renders unchanged. */

.btn.btn-brand-primary {
    background-color: var(--wb-btn-bg, var(--website-btn-primary-bg, var(--website-button-bg-color, var(--color-primary-500))));
    border-color: var(--wb-btn-bg, var(--website-btn-primary-bg, var(--website-button-bg-color, var(--color-primary-500))));
    color: var(--wb-btn-text, var(--website-btn-primary-text, var(--website-button-text-color, white)));
    transition: all var(--duration-200) var(--ease-in-out);
}

.btn.btn-brand-primary:hover,
.btn.btn-brand-primary:focus {
    background-color: var(--wb-btn-hover-bg, var(--website-btn-primary-hover-bg, var(--website-button-hover-bg-color, var(--color-primary-600))));
    border-color: var(--wb-btn-hover-bg, var(--website-btn-primary-hover-bg, var(--website-button-hover-bg-color, var(--color-primary-600))));
    color: var(--wb-btn-hover-text, var(--website-btn-primary-hover-text, var(--website-button-hover-text-color, white)));
}

.btn.btn-brand-primary:active {
    background-color: var(--wb-btn-hover-bg, var(--website-btn-primary-hover-bg, var(--website-button-hover-bg-color, var(--color-primary-700))));
    border-color: var(--wb-btn-hover-bg, var(--website-btn-primary-hover-bg, var(--website-button-hover-bg-color, var(--color-primary-700))));
    color: var(--wb-btn-hover-text, var(--website-btn-primary-hover-text, var(--website-button-hover-text-color, white)));
}

.btn.btn-brand-primary:focus-visible {
    box-shadow: var(--focus-ring-shadow);
}

/* Brand Primary Outline Button */
.btn.btn-outline-brand-primary {
    color: var(--wb-btn-text, var(--website-btn-outline-color, var(--color-primary-500)));
    border-color: var(--wb-btn-text, var(--website-btn-outline-color, var(--color-primary-500)));
    background-color: var(--wb-btn-bg, var(--website-btn-outline-bg, transparent));
    transition: all var(--duration-200) var(--ease-in-out);
}

.btn.btn-outline-brand-primary:hover,
.btn.btn-outline-brand-primary:focus {
    background-color: var(--wb-btn-hover-bg, var(--website-btn-outline-hover-bg, var(--website-button-hover-bg-color, var(--color-primary-500))));
    border-color: var(--wb-btn-hover-bg, var(--website-btn-outline-hover-bg, var(--website-button-hover-bg-color, var(--color-primary-500))));
    color: var(--wb-btn-hover-text, var(--website-btn-outline-hover-text, var(--website-button-hover-text-color, white)));
}

/* Brand Secondary Button (uses design token fuchsia) */
.btn.btn-brand-secondary {
    background-color: var(--wb-btn-bg, var(--website-btn-secondary-bg, var(--website-button-bg-color, var(--color-secondary-500))));
    border-color: var(--wb-btn-bg, var(--website-btn-secondary-bg, var(--website-button-bg-color, var(--color-secondary-500))));
    color: var(--wb-btn-text, var(--website-btn-secondary-text, var(--website-button-text-color, white)));
    transition: all var(--duration-200) var(--ease-in-out);
}

.btn.btn-brand-secondary:hover,
.btn.btn-brand-secondary:focus {
    background-color: var(--wb-btn-hover-bg, var(--website-btn-secondary-hover-bg, var(--website-button-hover-bg-color, var(--color-secondary-600))));
    border-color: var(--wb-btn-hover-bg, var(--website-btn-secondary-hover-bg, var(--website-button-hover-bg-color, var(--color-secondary-600))));
    color: var(--wb-btn-hover-text, var(--website-btn-secondary-hover-text, var(--website-button-hover-text-color, white)));
}

/* Tier-4 safety net (see website-theme.css's identical rule for the full
 * explanation) - a per-button override still needs to land on a button whose
 * Button Style preset fell back to a plain, non-brand Bootstrap class. */
.btn.wb-btn-custom {
    background-color: var(--wb-btn-bg);
    border-color: var(--wb-btn-bg);
    color: var(--wb-btn-text);
}
.btn.wb-btn-custom:hover,
.btn.wb-btn-custom:focus {
    background-color: var(--wb-btn-hover-bg);
    border-color: var(--wb-btn-hover-bg);
    color: var(--wb-btn-hover-text);
}

/* Dark mode adjustments for buttons */
[data-theme="dark"] .btn.btn-brand-primary {
    background-color: var(--wb-btn-bg, var(--website-btn-primary-bg, var(--website-button-bg-color, var(--color-primary-500))));
    border-color: var(--wb-btn-bg, var(--website-btn-primary-bg, var(--website-button-bg-color, var(--color-primary-500))));
}

[data-theme="dark"] .btn.btn-brand-primary:hover {
    background-color: var(--wb-btn-hover-bg, var(--website-btn-primary-hover-bg, var(--website-button-hover-bg-color, var(--color-primary-400))));
    border-color: var(--wb-btn-hover-bg, var(--website-btn-primary-hover-bg, var(--website-button-hover-bg-color, var(--color-primary-400))));
}


/* ============================================
   Secondary Color (Bronze) Utility Classes
   ============================================

   Bring the secondary palette into the UI following
   the 75/20/5 rule: blue primary, bronze accent, semantic colors.
   Semantic meaning: money/value, featured/premium, categories.
*/

/* Price text */
.text-price {
    color: var(--color-secondary-600);
    font-weight: 700;
}

[data-theme="dark"] .text-price {
    color: var(--color-secondary-400);
}

/* Featured badge */
.badge-featured {
    background-color: var(--color-secondary-500);
    color: white;
}

/* Variant/options count badge on product cards - glassy dark pill that stays
   readable over any image corner in both light and dark themes. */
.badge-variants {
    background-color: rgba(0, 0, 0, 0.62);
    color: #fff;
    backdrop-filter: blur(2px);
}

/* Category badge (subtle) */
.badge-category {
    background-color: var(--color-secondary-50);
    color: var(--color-secondary-700);
    border: 1px solid rgba(var(--color-secondary-500-rgb), 0.2);
}

[data-theme="dark"] .badge-category {
    background-color: var(--color-secondary-950);
    color: var(--color-secondary-300);
    border-color: rgba(var(--color-secondary-500-rgb), 0.3);
}

/* Price badge */
.badge-price {
    background-color: var(--color-secondary-500);
    color: white;
}

/* Card accent top border (solid) */
.card-accent-top {
    border-top: 3px solid var(--color-secondary-400);
}

/* Card accent top border (gradient) */
.card-accent-top-gradient {
    position: relative;
    overflow: hidden;
}

.card-accent-top-gradient::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--color-primary-500), var(--color-secondary-400));
    z-index: 1;
}

/* Card hover with secondary color */
.card-hover-secondary:hover {
    border-color: var(--color-secondary-300);
    box-shadow: 0 4px 12px rgba(var(--color-secondary-500-rgb), 0.12);
}

/* Section heading accent underline */
.section-heading-accent {
    position: relative;
    display: inline-block;
    padding-bottom: var(--space-2);
}

.section-heading-accent::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 60px;
    height: 3px;
    background: linear-gradient(90deg, var(--color-primary-500), var(--color-secondary-400));
    border-radius: 2px;
}

/* Outline button variant - shares the Outline tab's --website-btn-outline-*
 * vars with btn-outline-brand-primary above (see theme.css's top comment). */
.btn.btn-outline-brand-secondary {
    color: var(--wb-btn-text, var(--website-btn-outline-color, var(--color-secondary-500)));
    border-color: var(--wb-btn-text, var(--website-btn-outline-color, var(--color-secondary-500)));
    background-color: var(--wb-btn-bg, var(--website-btn-outline-bg, transparent));
    transition: all var(--duration-200) var(--ease-in-out);
}

.btn.btn-outline-brand-secondary:hover,
.btn.btn-outline-brand-secondary:focus {
    background-color: var(--wb-btn-hover-bg, var(--website-btn-outline-hover-bg, var(--website-button-hover-bg-color, var(--color-secondary-500))));
    border-color: var(--wb-btn-hover-bg, var(--website-btn-outline-hover-bg, var(--website-button-hover-bg-color, var(--color-secondary-500))));
    color: var(--wb-btn-hover-text, var(--website-btn-outline-hover-text, var(--website-button-hover-text-color, white)));
}

[data-theme="dark"] .btn.btn-outline-brand-secondary {
    color: var(--wb-btn-text, var(--website-btn-outline-color, var(--color-secondary-400)));
    border-color: var(--wb-btn-text, var(--website-btn-outline-color, var(--color-secondary-400)));
}

[data-theme="dark"] .btn.btn-outline-brand-secondary:hover,
[data-theme="dark"] .btn.btn-outline-brand-secondary:focus {
    background-color: var(--wb-btn-hover-bg, var(--website-btn-outline-hover-bg, var(--website-button-hover-bg-color, var(--color-secondary-400))));
    border-color: var(--wb-btn-hover-bg, var(--website-btn-outline-hover-bg, var(--website-button-hover-bg-color, var(--color-secondary-400))));
    color: var(--wb-btn-hover-text, var(--website-btn-outline-hover-text, var(--website-button-hover-text-color, white)));
}

/* Icon circle with secondary color */
.icon-circle-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: var(--color-secondary-50);
    color: var(--color-secondary-600);
}

[data-theme="dark"] .icon-circle-secondary {
    background-color: var(--color-secondary-950);
    color: var(--color-secondary-400);
}

/* Star rating color */
.star-rating-color {
    color: var(--color-secondary-400);
}


/* ============================================
   Focus State Utilities
   ============================================

   Standardized focus indicators for accessibility.
   Uses tokens from variables.css for consistent styling.
*/

/* Default focus-visible styles for interactive elements */
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible:not([tabindex="-1"]) {
    outline: var(--focus-ring-width) var(--focus-ring-style) var(--focus-ring-color);
    outline-offset: var(--focus-ring-offset);
}

/* Alternative: box-shadow based focus (for elements that need rounded focus) */
.focus-ring:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring-shadow);
}

/* Remove default outline when using custom focus */
.focus-ring-custom:focus {
    outline: none;
}

/* Skip link for keyboard accessibility */
.skip-link {
    position: absolute;
    top: -40px;
    left: 0;
    background: var(--bg-primary);
    color: var(--text-primary);
    padding: var(--space-2) var(--space-4);
    z-index: var(--z-max);
    transition: top var(--duration-200) var(--ease-in-out);
}

.skip-link:focus {
    top: 0;
}

/* ============================================
   Select2 Theme Support (Light & Dark)
   ============================================ */

/* Select2 container - main input */
.select2-container--krajee-bs5 .select2-selection {
    background-color: var(--bg-primary) !important;
    border-color: var(--border-default) !important;
    color: var(--text-primary) !important;
}

.select2-container--krajee-bs5 .select2-selection--single .select2-selection__rendered {
    color: var(--text-primary) !important;
}

.select2-container--krajee-bs5 .select2-selection--single .select2-selection__placeholder {
    color: var(--text-muted) !important;
}

/* Select2 dropdown container */
.select2-container--krajee-bs5 .select2-dropdown {
    background-color: var(--bg-secondary) !important;
    border-color: var(--border-default) !important;
}

/* Search field inside dropdown */
.select2-container--krajee-bs5 .select2-search--dropdown .select2-search__field {
    background-color: var(--bg-primary) !important;
    border-color: var(--border-default) !important;
    color: var(--text-primary) !important;
}

/* Results list container */
.select2-container--krajee-bs5 .select2-results__options {
    background-color: var(--bg-secondary) !important;
}

/* All options - reset any zebra striping */
.select2-container--krajee-bs5 .select2-results__option {
    background-color: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
}

/* Hover/highlighted option */
.select2-container--krajee-bs5 .select2-results__option--highlighted,
.select2-container--krajee-bs5 .select2-results__option--highlighted[aria-selected],
.select2-container--krajee-bs5 .select2-results__option:hover {
    background-color: var(--link-default) !important;
    color: white !important;
}

/* Currently selected option (not hovered) */
.select2-container--krajee-bs5 .select2-results__option[aria-selected=true]:not(.select2-results__option--highlighted) {
    background-color: var(--bg-tertiary) !important;
    color: var(--text-primary) !important;
}

/* Select2 focus state */
.select2-container--krajee-bs5.select2-container--focus .select2-selection,
.select2-container--krajee-bs5.select2-container--open .select2-selection {
    border-color: var(--link-default) !important;
    box-shadow: var(--focus-ring-shadow) !important;
}

/* Select2 arrow */
.select2-container--krajee-bs5 .select2-selection--single .select2-selection__arrow b {
    border-color: var(--text-secondary) transparent transparent transparent !important;
}

.select2-container--krajee-bs5.select2-container--open .select2-selection--single .select2-selection__arrow b {
    border-color: transparent transparent var(--text-secondary) transparent !important;
}

/* Select2 multiple - selected tags/chips */
.select2-container--krajee-bs5 .select2-selection--multiple .select2-selection__choice {
    background-color: var(--bg-tertiary) !important;
    border-color: var(--border-default) !important;
    color: var(--text-primary) !important;
}

.select2-container--krajee-bs5 .select2-selection--multiple .select2-selection__choice__remove {
    color: var(--text-secondary) !important;
    border-right-color: var(--border-default) !important;
}

.select2-container--krajee-bs5 .select2-selection--multiple .select2-selection__choice__remove:hover {
    color: var(--text-primary) !important;
    background-color: var(--bg-secondary) !important;
}

/* Select2 multiple - placeholder */
.select2-container--krajee-bs5 .select2-selection--multiple .select2-selection__placeholder {
    color: var(--text-muted) !important;
}

/* Select2 multiple - inline search field */
.select2-container--krajee-bs5 .select2-selection--multiple .select2-search--inline .select2-search__field {
    color: var(--text-primary) !important;
}

/* Select2 multiple - clear button */
.select2-container--krajee-bs5 .select2-selection__clear {
    color: var(--text-secondary) !important;
}

.select2-container--krajee-bs5 .select2-selection__clear:hover {
    color: var(--text-primary) !important;
}

/* Select2 - no results message */
.select2-container--krajee-bs5 .select2-results__message {
    color: var(--text-muted) !important;
}

/* Dark mode overrides - higher specificity to beat Kartik vendor CSS */
[data-theme="dark"] .select2-container--krajee-bs5 .select2-selection,
[data-theme="dark"] .select2-container--krajee-bs5 .select2-search--dropdown .select2-search__field {
    background-color: var(--bg-primary) !important;
    border-color: var(--border-default) !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] .select2-container--krajee-bs5 .select2-selection--single .select2-selection__rendered {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .select2-container--krajee-bs5 .select2-dropdown,
[data-theme="dark"] .select2-container--krajee-bs5 .select2-results__options,
[data-theme="dark"] .select2-container--krajee-bs5 .select2-results__option {
    background-color: var(--bg-secondary) !important;
    border-color: var(--border-default) !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] .select2-container--krajee-bs5 .select2-results__option--highlighted,
[data-theme="dark"] .select2-container--krajee-bs5 .select2-results__option--highlighted[aria-selected],
[data-theme="dark"] .select2-container--krajee-bs5 .select2-results__option:hover {
    background-color: var(--link-default) !important;
    color: white !important;
}

[data-theme="dark"] .select2-container--krajee-bs5 .select2-results__option[aria-selected=true]:not(.select2-results__option--highlighted) {
    background-color: var(--bg-tertiary) !important;
}

[data-theme="dark"] .select2-container--krajee-bs5 .select2-selection--multiple .select2-selection__choice {
    background-color: var(--bg-tertiary) !important;
    border-color: var(--border-default) !important;
    color: var(--text-primary) !important;
}

/* ============================================
   Stripe Card Element Styling
   ============================================ */

.stripe-card-element {
    background-color: var(--bg-primary);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md, 0.375rem);
    padding: 12px 14px;
    transition: border-color var(--duration-200) var(--ease-in-out),
                box-shadow var(--duration-200) var(--ease-in-out);
}

.stripe-card-element:hover {
    border-color: var(--text-muted);
}

.stripe-card-element.StripeElement--focus {
    border-color: var(--link-default);
    box-shadow: var(--focus-ring-shadow);
}

.stripe-card-element.StripeElement--invalid {
    border-color: var(--color-error-500, #dc3545);
}

/* Payment method options styling */
.payment-option {
    padding: 12px 16px;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md, 0.375rem);
    margin-bottom: 8px;
    cursor: pointer;
    transition: border-color var(--duration-200) var(--ease-in-out),
                background-color var(--duration-200) var(--ease-in-out);
}

.payment-option,
.payment-option * {
    cursor: pointer;
}

.payment-option:hover {
    border-color: var(--text-muted);
    background-color: var(--bg-tertiary);
}

.payment-option:has(input:checked) {
    border-color: var(--link-default);
    background-color: var(--bg-secondary);
}

.payment-form-section {
    padding-left: 28px;
    margin-bottom: 16px;
}