/* ============================================================
   RateTheWork Theme Overhaul — Carbon / Cobalt / Lime
   Loaded AFTER app.css to override CSS variables via cascade.
   ============================================================ */

/* ----------------------------------------------------------
   A2  Dark Theme — Carbon deep base
   ---------------------------------------------------------- */
.dark {
    --background: 30 9% 4%;               /* #0D0C0B carbon-1000 warm */
    --surface: 36 11% 10%;               /* #1B1A16 carbon-900 warm */
    --card: 0 0% 16%;                    /* #2A2A2A carbon-800 */
    --popover: 0 0% 16%;
    --muted: 0 0% 25%;                   /* carbon-700 */
    --border: 0 0% 25%;                  /* carbon-700 */
    --border-light: 0 0% 16%;            /* carbon-800 */
    --input: 0 0% 25%;
    --glass-bg: rgba(27, 26, 22, 0.70);
    --glass-border: rgba(52, 82, 227, 0.18);
    --sidebar-background: 0 0% 6%;
    --sidebar-accent: 0 0% 14%;
    --sidebar-border: 0 0% 14%;
}

/* ----------------------------------------------------------
   A3a  Glowing Border — Conic-gradient rotating border
   ---------------------------------------------------------- */
@property --glow-angle {
    syntax: "<angle>";
    initial-value: 0deg;
    inherits: false;
}

@keyframes glow-rotate {
    from { --glow-angle: 0deg; }
    to   { --glow-angle: 360deg; }
}

.glow-border {
    position: relative;
    overflow: visible;
}

.glow-border::before {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    padding: 1px;
    background: conic-gradient(
        from var(--glow-angle),
        transparent 40%,
        rgba(52, 82, 227, 0.45) 50%,
        rgba(184, 240, 56, 0.40) 58%,
        transparent 65%
    );
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
    z-index: 1;
}

.glow-border:hover::before {
    opacity: 1;
    animation: glow-rotate 4s linear infinite;
}

.glow-border-active::before {
    opacity: 1 !important;
    animation: glow-rotate 4s linear infinite !important;
}

.glow-border-primary::before {
    background: conic-gradient(
        from var(--glow-angle),
        transparent 30%,
        rgba(184, 240, 56, 0.55) 45%,
        rgba(52, 82, 227, 0.50) 57%,
        transparent 70%
    ) !important;
}

/* ----------------------------------------------------------
   A3b  Text Gradient — Theme-aware hero headings
   ---------------------------------------------------------- */
.dark .text-gradient-hero {
    background: linear-gradient(180deg, #ffffff 22.5%, rgba(255, 255, 255, 0.65) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

:root:not(.dark) .text-gradient-hero {
    background: linear-gradient(180deg, hsl(0 0% 10%) 22.5%, hsl(0 0% 10% / 0.7) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* ----------------------------------------------------------
   A3c  Cobalt Glow — Theme-aware ambient section glow
   ---------------------------------------------------------- */
.dark .cobalt-glow-hero {
    background-image: radial-gradient(ellipse 80% 50% at 50% 0%, rgba(52, 82, 227, 0.09) 0%, transparent 70%);
}

.dark .cobalt-glow-card {
    background-image: radial-gradient(ellipse 60% 40% at 50% -10%, rgba(52, 82, 227, 0.07) 0%, transparent 60%);
}

.dark .cobalt-glow-footer {
    background-image: radial-gradient(ellipse 70% 50% at 50% 100%, rgba(52, 82, 227, 0.06) 0%, transparent 60%);
}

:root:not(.dark) .cobalt-glow-hero {
    background-image: radial-gradient(ellipse 80% 50% at 50% 0%, rgba(52, 82, 227, 0.05) 0%, transparent 70%);
}

:root:not(.dark) .cobalt-glow-card {
    background-image: radial-gradient(ellipse 60% 40% at 50% -10%, rgba(52, 82, 227, 0.04) 0%, transparent 60%);
}

:root:not(.dark) .cobalt-glow-footer {
    background-image: radial-gradient(ellipse 70% 50% at 50% 100%, rgba(52, 82, 227, 0.03) 0%, transparent 60%);
}

/* Legacy aliases — map old purple-glow class names to cobalt equivalents */
.dark .purple-glow-hero    { background-image: radial-gradient(ellipse 80% 50% at 50% 0%, rgba(52, 82, 227, 0.09) 0%, transparent 70%); }
.dark .purple-glow-card    { background-image: radial-gradient(ellipse 60% 40% at 50% -10%, rgba(52, 82, 227, 0.07) 0%, transparent 60%); }
.dark .purple-glow-footer  { background-image: radial-gradient(ellipse 70% 50% at 50% 100%, rgba(52, 82, 227, 0.06) 0%, transparent 60%); }
:root:not(.dark) .purple-glow-hero   { background-image: radial-gradient(ellipse 80% 50% at 50% 0%, rgba(52, 82, 227, 0.05) 0%, transparent 70%); }
:root:not(.dark) .purple-glow-card   { background-image: radial-gradient(ellipse 60% 40% at 50% -10%, rgba(52, 82, 227, 0.04) 0%, transparent 60%); }
:root:not(.dark) .purple-glow-footer { background-image: radial-gradient(ellipse 70% 50% at 50% 100%, rgba(52, 82, 227, 0.03) 0%, transparent 60%); }

/* ----------------------------------------------------------
   A3d  Button Shimmer — Rotating edge glow on primary buttons
   ---------------------------------------------------------- */
@property --shimmer-angle {
    syntax: "<angle>";
    initial-value: 0deg;
    inherits: false;
}

@keyframes shimmer-rotate {
    from { --shimmer-angle: 0deg; }
    to   { --shimmer-angle: 360deg; }
}

.btn-shimmer {
    position: relative;
    overflow: visible;
    isolation: isolate;
}

.btn-shimmer::before {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    padding: 1.5px;
    background: conic-gradient(
        from var(--shimmer-angle),
        transparent 60%,
        rgba(255, 255, 255, 0.5) 68%,
        transparent 76%
    );
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    animation: shimmer-rotate 3s linear infinite;
    pointer-events: none;
    z-index: -1;
}

/* ----------------------------------------------------------
   A3e  Section Badges — Glass-effect pill badges
   ---------------------------------------------------------- */
.dark .section-badge {
    background: rgba(255, 255, 255, 0.04);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.06);
}

:root:not(.dark) .section-badge {
    background: rgba(0, 0, 0, 0.03);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(0, 0, 0, 0.06);
}

/* ----------------------------------------------------------
   A4  Aurora & Gradient Enhancement
   ---------------------------------------------------------- */

/* Aurora background — Cobalt/Lime dominant */
.dark .aurora-bg::before {
    background: radial-gradient(ellipse 80% 60% at 50% 20%, rgba(52, 82, 227, 0.08) 0%, transparent 60%),
                radial-gradient(ellipse 60% 40% at 30% 70%, rgba(184, 240, 56, 0.04) 0%, transparent 50%),
                radial-gradient(ellipse 50% 30% at 80% 40%, rgba(30, 95, 191, 0.06) 0%, transparent 50%) !important;
}

/* Gradient primary — Cobalt base (fixed hue, same in light/dark — TECH-5349) */
.gradient-primary {
    background: linear-gradient(135deg, var(--ds-cobalt-500, #3452E3) 0%, var(--ds-cobalt-400, #4A6CF0) 100%);
}

/* Gradient text — Cobalt → Lime */
.dark .gradient-text {
    background: linear-gradient(135deg, #3452E3 0%, #4A6CF0 40%, #B8F038 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}

:root:not(.dark) .gradient-text {
    background: linear-gradient(135deg, #3452E3 0%, #1F30A1 50%, #5C800F 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}

/* gradient-text-italic — matches gradient-text */
.dark .gradient-text-italic {
    background: linear-gradient(135deg, #3452E3 0%, #4A6CF0 40%, #B8F038 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    font-style: italic;
}

:root:not(.dark) .gradient-text-italic {
    background: linear-gradient(135deg, #3452E3 0%, #1F30A1 50%, #5C800F 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    font-style: italic;
}

/* Card glow hover — Cobalt blend */
.dark .card-glow:hover::before {
    background: radial-gradient(ellipse at 50% -20%, rgba(52, 82, 227, 0.13) 0%, rgba(184, 240, 56, 0.05) 40%, transparent 70%) !important;
}

/* ----------------------------------------------------------
   Reduced Motion — respect user preference
   ---------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .glow-border:hover::before,
    .glow-border-active::before,
    .btn-shimmer::before {
        animation: none !important;
    }
}

/* ----------------------------------------------------------
   Prosopo CAPTCHA SDK — contain artifacts to captcha wrappers
   ---------------------------------------------------------- */

/* 1. Hide SDK elements globally */
iframe[src*="prosopo"],
iframe[src*="procaptcha"],
[data-sitekey]:not(.prosopo-captcha),
[data-captcha-type],
.p-procaptcha,
.procaptcha,
.procaptcha-container,
.prosopo-procaptcha,
.captcha-checkbox,
.prosopo-logo,
.prosopo-logo-text {
    display: none !important;
    visibility: hidden !important;
    position: absolute !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
}

/* 2. Show SDK elements ONLY inside our managed captcha containers */
.prosopo-captcha iframe[src*="prosopo"],
.prosopo-captcha iframe[src*="procaptcha"],
.prosopo-captcha [data-sitekey],
.prosopo-captcha [data-captcha-type],
.prosopo-captcha .p-procaptcha,
.prosopo-captcha .procaptcha,
.prosopo-captcha .procaptcha-container,
.prosopo-captcha .prosopo-procaptcha,
.prosopo-captcha .captcha-checkbox,
.prosopo-captcha .prosopo-logo,
.prosopo-captcha .prosopo-logo-text {
    display: block !important;
    visibility: visible !important;
    position: static !important;
    width: auto !important;
    height: auto !important;
    overflow: visible !important;
    pointer-events: auto !important;
}

/* ----------------------------------------------------------
   PWA Standalone Mode — Bottom navigation offset & footer hide
   ---------------------------------------------------------- */

body.pwa-mode .pwa-nav-offset {
    padding-bottom: 5rem;
}

@media (min-width: 768px) {
    body.pwa-mode .pwa-nav-offset {
        padding-bottom: 0;
    }
}

body.pwa-hide-footer footer[role="contentinfo"] {
    display: none;
}