/* ==========================================================================
   PLAYITCOM REDESIGN — theme layer
   Loaded after the legacy template CSS. Delete the <link> in
   layouts/master.blade.php (or switch git branch) to get the old look back.
   ========================================================================== */

:root {
    --rd-ink: #0A0D24;
    --rd-ink-2: #10143A;
    --rd-ink-3: #181D4D;
    --rd-line: rgba(160, 175, 255, .14);
    --rd-line-strong: rgba(160, 175, 255, .28);
    --rd-text: #E9ECFF;
    --rd-muted: #A3ABD6;
    --rd-faint: #6F78A8;
    --rd-cyan: #3EE6FF;
    --rd-violet: #8B7CFF;
    --rd-magenta: #FF5CC8;
    --rd-amber: #FFC94A;
    --rd-red: #FF4D6D;
    --rd-grad: linear-gradient(100deg, var(--rd-cyan) 0%, var(--rd-violet) 50%, var(--rd-magenta) 100%);

    /* theme-dependent helpers (overridden for the light theme below) */
    --rd-ink-rgb: 10, 13, 36;
    --rd-surface-rgb: 16, 20, 58;
    --rd-tint-1: var(--rd-tint-1);
    --rd-tint-2: var(--rd-tint-2);
    --rd-tint-3: var(--rd-tint-3);
    --rd-shadow: var(--rd-shadow);
    --rd-shadow-strong: var(--rd-shadow-strong);
    --rd-on-accent: #0A0D24;
    --rd-on-amber: #1A1530;
    --rd-term-bg: var(--rd-term-bg);
    --rd-term-fg: #B9FF8A;
    --rd-prose: #CBD0F0;
    --rd-code-bg: #060818;
    --rd-code-fg: #DDE3FF;
    --rd-glow-violet: rgba(139, 124, 255, .22);
    --rd-glow-cyan: rgba(62, 230, 255, .12);
    color-scheme: dark;

    --rd-display: 'Unbounded', 'Manrope', system-ui, sans-serif;
    --rd-body: 'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --rd-mono: 'JetBrains Mono', ui-monospace, Menlo, monospace;

    --rd-r-sm: 10px;
    --rd-r: 18px;
    --rd-r-lg: 28px;
    --rd-ease: cubic-bezier(.16, 1, .3, 1);
    --rd-header-h: 78px;
}

/* ---------- Light theme ---------- */
:root[data-theme="light"] {
    --rd-ink: #F3F4FB;
    --rd-ink-2: #FFFFFF;
    --rd-ink-3: #E7E9F6;
    --rd-line: rgba(30, 40, 110, .12);
    --rd-line-strong: rgba(30, 40, 110, .24);
    --rd-text: #12153A;
    --rd-muted: #545B85;
    --rd-faint: #7F86AE;
    --rd-cyan: #0A84B8;
    --rd-violet: #5B49E6;
    --rd-magenta: #D61F9A;
    --rd-amber: #F5B21A;
    --rd-red: #E1264A;

    --rd-ink-rgb: 243, 244, 251;
    --rd-surface-rgb: 255, 255, 255;
    --rd-tint-1: rgba(30, 40, 110, .03);
    --rd-tint-2: rgba(30, 40, 110, .04);
    --rd-tint-3: rgba(30, 40, 110, .06);
    --rd-shadow: rgba(30, 35, 90, .18);
    --rd-shadow-strong: rgba(30, 35, 90, .25);
    --rd-on-accent: #FFFFFF;
    --rd-term-bg: #12153A;
    --rd-term-fg: #B9FF8A;
    --rd-prose: #2E3460;
    --rd-code-bg: #12153A;
    --rd-code-fg: #E9ECFF;
    --rd-glow-violet: rgba(91, 73, 230, .14);
    --rd-glow-cyan: rgba(10, 132, 184, .10);
    color-scheme: light;
}
/* Smooth cross-fade when the visitor flips the theme */
html.rd-theme-anim, html.rd-theme-anim * , html.rd-theme-anim *::before, html.rd-theme-anim *::after {
    transition: background-color .5s ease, border-color .5s ease, color .4s ease, fill .4s ease !important;
}

/* ---------- Theme switch ---------- */
.rd-theme-toggle {
    position: relative; flex: 0 0 auto;
    width: 64px; height: 34px; padding: 0; border-radius: 999px;
    border: 1px solid var(--rd-line-strong); background: var(--rd-tint-2);
    cursor: pointer; color: var(--rd-text);
}
.rd-theme-toggle__knob {
    position: absolute; top: 3px; left: 3px; width: 26px; height: 26px; border-radius: 50%;
    background: var(--rd-text); color: var(--rd-ink);
    display: flex; align-items: center; justify-content: center;
    transition: transform .5s var(--rd-ease), background .4s;
}
.rd-theme-toggle__knob svg { width: 15px; height: 15px; }
.rd-theme-toggle .rd-ico-sun { display: none; }
:root[data-theme="light"] .rd-theme-toggle__knob { transform: translateX(30px); }
:root[data-theme="light"] .rd-theme-toggle .rd-ico-sun { display: block; }
:root[data-theme="light"] .rd-theme-toggle .rd-ico-moon { display: none; }
.rd-theme-toggle:hover .rd-theme-toggle__knob { box-shadow: 0 0 0 6px var(--rd-tint-3); }

/* ---------- Base ---------- */
html { scroll-behavior: smooth; }
html, body.rd { background: var(--rd-ink); }
/* Slide-in elements start outside the viewport. `body { overflow-x: hidden }` alone is ignored by
   most mobile browsers (the page can be dragged sideways), so clip on both html and body, and
   on every full-width section. `clip` (unlike `hidden`) does not create a scroll container. */
html { overflow-x: clip; }
body.rd { overflow-x: clip; max-width: 100%; }
.rd-section, .rd-stats, .rd-hero, .rd-marquee, .rd-footer, .blog_list_page, .courses_area { overflow-x: clip; }
body.rd {
    font-family: var(--rd-body);
    color: var(--rd-text);
    font-size: 16px;
    line-height: 1.6;
    overflow-x: clip;
}
/* :where() keeps element rules at legacy specificity so pages with their own
   component styles (e.g. /aplikacije) are not overridden. */
:where(body.rd) :is(h1, h2, h3, h4, h5, h6) {
    font-family: var(--rd-display);
    color: var(--rd-text);
    letter-spacing: -.01em;
    font-weight: 600;
}
:where(body.rd) p { color: var(--rd-muted); font-size: 16px; line-height: 1.7; }
:where(body.rd) a { color: var(--rd-cyan); transition: color .25s var(--rd-ease); }
:where(body.rd) a:hover { color: var(--rd-text); }
:where(body.rd) :is(strong, b) { color: inherit; }
body.rd ::selection { background: var(--rd-magenta); color: #fff; }
body.rd :focus-visible { outline: 2px solid var(--rd-cyan); outline-offset: 3px; border-radius: 6px; }
body.rd .container { max-width: 1240px; }
@media (max-width: 575px) { body.rd .container { padding-left: 16px; padding-right: 16px; } }

/* ---------- Preloader ---------- */
#preloader.rd-preloader {
    position: fixed; inset: 0; z-index: 99999;
    background: var(--rd-ink);
    display: flex; align-items: center; justify-content: center;
}
.rd-preloader__mark {
    font-family: var(--rd-mono); font-size: 34px; color: var(--rd-text);
    display: flex; align-items: center; gap: 10px;
}
.rd-preloader__bracket { opacity: .8; }
.rd-preloader__dot {
    width: 14px; height: 14px; border-radius: 50%;
    background: var(--rd-grad);
    animation: rdPulse 1s var(--rd-ease) infinite alternate;
}
@keyframes rdPulse { from { transform: scale(.6); opacity: .5; } to { transform: scale(1.3); opacity: 1; } }

/* ---------- Buttons ---------- */
.rd-btn {
    --b-bg: var(--rd-text);
    --b-fg: var(--rd-ink);
    position: relative;
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    padding: 0 26px; height: 50px;
    border-radius: 999px;
    font-family: var(--rd-body); font-weight: 700; font-size: 15px;
    background: var(--b-bg); color: var(--b-fg) !important;
    border: 1px solid transparent;
    overflow: hidden; isolation: isolate;
    white-space: nowrap;
    transition: box-shadow .4s var(--rd-ease), background .3s, color .3s;
}
.rd-btn::before {
    content: ''; position: absolute; inset: 0; z-index: -1;
    background: var(--rd-grad);
    transform: translateY(101%);
    transition: transform .5s var(--rd-ease);
}
.rd-btn:hover { box-shadow: 0 10px 40px -10px rgba(139, 124, 255, .7); color: #fff !important; }
.rd-btn:hover::before { transform: translateY(0); }
.rd-btn--ghost {
    --b-bg: var(--rd-tint-2);
    --b-fg: var(--rd-text);
    border-color: var(--rd-line-strong);
    backdrop-filter: blur(8px);
}
.rd-btn--lg { height: 58px; padding: 0 32px; font-size: 16px; }
.rd-btn--sm { height: 40px; padding: 0 18px; font-size: 14px; }
.rd-btn--block { width: 100%; }
.rd-btn--mono { font-family: var(--rd-mono); font-weight: 600; }

.rd-link { color: var(--rd-muted) !important; font-weight: 600; font-size: 14px; }
.rd-link:hover { color: var(--rd-text) !important; }

.rd-live-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--rd-red); display: inline-block;
    box-shadow: 0 0 0 0 rgba(255, 77, 109, .7);
    animation: rdLive 1.6s infinite;
}
@keyframes rdLive { 70% { box-shadow: 0 0 0 9px rgba(255, 77, 109, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 77, 109, 0); } }

.rd-pill {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 8px 16px 8px 12px; border-radius: 999px;
    border: 1px solid var(--rd-line-strong);
    background: var(--rd-tint-2);
    backdrop-filter: blur(8px);
    font-size: 14px; font-weight: 600; color: var(--rd-text);
}
.rd-pill__pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--rd-cyan); box-shadow: 0 0 12px var(--rd-cyan); }

/* ---------- Header ---------- */
body.rd .header_area.rd-header {
    position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
    transition: transform .5s var(--rd-ease), background .4s, border-color .4s;
    border-bottom: 1px solid transparent;
}
body.rd .rd-header.is-scrolled {
    background: rgba(var(--rd-ink-rgb), .72);
    backdrop-filter: blur(16px) saturate(140%);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
    border-bottom-color: var(--rd-line);
}
body.rd .rd-header.is-hidden { transform: translateY(-100%); }
body.rd .rd-header .navbar { min-height: var(--rd-header-h); padding: 0; }
.rd-brand { display: flex; align-items: center; gap: 12px; padding: 0; margin-right: 24px; }
.rd-brand img { width: 34px; height: auto; }
.rd-brand__text {
    font-family: var(--rd-display); font-weight: 600; font-size: 12px;
    line-height: 1.15; color: var(--rd-text); letter-spacing: .02em;
}

body.rd .rd-nav .navbar-nav li { margin: 0 4px; }
body.rd .rd-nav .navbar-nav > li > a {
    padding: 10px 14px; border-radius: 999px;
    color: var(--rd-muted); font-weight: 600; font-size: 14.5px;
}
body.rd .rd-nav .navbar-nav > li > a::before { display: none; }
body.rd .rd-nav .navbar-nav > li > a.active,
body.rd .rd-nav .navbar-nav > li:hover > a { color: var(--rd-text); background: var(--rd-tint-3); }
body.rd .rd-nav .navbar-nav > li > a.active { box-shadow: inset 0 0 0 1px var(--rd-line-strong); }
body.rd .rd-nav .navbar-nav li a i { font-size: 10px; opacity: .7; }

body.rd .rd-nav .navbar-nav li .sub-menu {
    width: 250px; padding: 8px;
    background: rgba(var(--rd-surface-rgb), .92);
    backdrop-filter: blur(16px);
    border: 1px solid var(--rd-line);
    border-radius: var(--rd-r);
    box-shadow: 0 30px 60px -20px var(--rd-shadow);
    transform: translateY(10px);
    transition: opacity .3s var(--rd-ease), transform .4s var(--rd-ease), visibility .3s;
}
body.rd .rd-nav .navbar-nav li:hover > .sub-menu { transform: translateY(0); top: 100%; }
body.rd .rd-nav .navbar-nav li .sub-menu li a {
    color: var(--rd-muted); border-radius: var(--rd-r-sm); padding: 9px 12px; font-size: 14px;
    transition: background .25s, color .25s, padding .3s var(--rd-ease);
}
body.rd .rd-nav .navbar-nav li .sub-menu li:hover > a { color: var(--rd-text); background: var(--rd-tint-3); padding-left: 18px; }

.rd-nav__auth { display: flex; align-items: center; gap: 18px; }
.rd-nav .rd-theme-toggle { margin-left: 18px; }
@media (max-width: 991px) {
    .rd-nav .rd-theme-toggle { margin-left: auto; margin-right: 14px; }
}

body.rd .rd-toggler { border: 0; padding: 8px; }
body.rd .rd-toggler .toggler-icon { background: var(--rd-text); width: 24px; }

@media (max-width: 991px) {
    body.rd .rd-header { background: rgba(var(--rd-ink-rgb), .85); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
    body.rd .rd-header .navbar { min-height: 66px; }
    body.rd .rd-header .navbar-collapse {
        position: absolute; top: 100%; left: -16px; right: -16px; width: auto;
        max-height: calc(100vh - 66px); overflow: auto;
        background: rgba(var(--rd-ink-rgb), .97);
        border-bottom: 1px solid var(--rd-line);
        padding: 12px 16px 24px;
    }
    body.rd .rd-nav .navbar-nav > li > a { display: block; color: var(--rd-text); font-size: 17px; padding: 12px 8px; border-radius: var(--rd-r-sm); }
    body.rd .rd-nav .navbar-nav li a .sub-nav-toggler { color: var(--rd-text); top: 6px; }
    body.rd .rd-nav .navbar-nav li a .sub-nav-toggler span,
    body.rd .rd-nav .navbar-nav li a .sub-nav-toggler span::before,
    body.rd .rd-nav .navbar-nav li a .sub-nav-toggler span::after { background-color: var(--rd-text); }
    body.rd .rd-nav .navbar-nav li .sub-menu {
        width: 100%; background: transparent; border: 0; box-shadow: none; transform: none; padding: 0 0 0 12px;
        border-left: 1px solid var(--rd-line); border-radius: 0; backdrop-filter: none;
    }
    .rd-nav__auth { padding: 16px 8px 0; border-top: 1px solid var(--rd-line); margin-top: 12px; }
}

/* ---------- Site alert bars (verified / not verified) sit under the fixed header ---------- */
/* Inner pages: reserve room for the fixed header so content never hides under it. */
body.rd-inner { padding-top: var(--rd-header-h); }
@media (max-width: 991px) { :root { --rd-header-h: 66px; } }
/* Legacy pages that put the header in normal flow (e.g. /aplikacije) */
body.rd-inner .header_area.rd-header { position: fixed; background: rgba(var(--rd-ink-rgb), .85); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
body.rd.rd-home .site-alert-bar { margin-top: var(--rd-header-h); }

/* ---------- Hero ---------- */
.rd-hero {
    position: relative;
    min-height: 100vh; min-height: 100svh;
    display: flex; align-items: center;
    overflow: hidden;
    background:
        radial-gradient(60% 60% at 75% 45%, var(--rd-glow-violet), transparent 70%),
        radial-gradient(40% 50% at 15% 85%, var(--rd-glow-cyan), transparent 70%),
        var(--rd-ink);
}
.rd-hero__canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.rd-hero__vignette {
    position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(180deg, rgba(var(--rd-ink-rgb), 0) 60%, var(--rd-ink) 100%),
                linear-gradient(90deg, rgba(var(--rd-ink-rgb), .75) 0%, rgba(var(--rd-ink-rgb), 0) 55%);
}
.rd-hero::after {
    /* fine grid for a technical feel */
    content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .35;
    background-image:
        linear-gradient(var(--rd-line) 1px, transparent 1px),
        linear-gradient(90deg, var(--rd-line) 1px, transparent 1px);
    background-size: 72px 72px;
    mask-image: radial-gradient(80% 70% at 30% 50%, #000 0%, transparent 75%);
    -webkit-mask-image: radial-gradient(80% 70% at 30% 50%, #000 0%, transparent 75%);
}
.rd-hero__inner { position: relative; z-index: 2; padding-top: 120px; padding-bottom: 110px; }
.rd-hero__copy { max-width: 660px; }
.rd-hero__pill { margin-bottom: 28px; }

.rd-hero__title {
    font-family: var(--rd-display) !important;
    font-weight: 800 !important;
    font-size: clamp(48px, 8.6vw, 124px);
    line-height: .92;
    letter-spacing: -.045em;
    margin: 0 0 28px;
}
.rd-line { display: block; overflow: hidden; padding-bottom: .06em; }
.rd-line__inner { display: inline-block; will-change: transform; }
.rd-outline {
    font-style: normal;
    color: transparent;
    background: var(--rd-grad);
    background-size: 200% 100%;
    -webkit-background-clip: text; background-clip: text;
    animation: rdSheen 6s linear infinite;
    padding-right: .04em;
}
@keyframes rdSheen { to { background-position: 200% 0; } }

.rd-hero__sub { font-size: 19px !important; max-width: 520px; color: var(--rd-muted); margin-bottom: 26px !important; }

.rd-terminal {
    display: inline-flex; align-items: center; gap: 12px;
    font-family: var(--rd-mono); font-size: 16px;
    padding: 12px 18px; border-radius: var(--rd-r-sm);
    background: var(--rd-term-bg);
    border: 1px solid var(--rd-line);
    margin-bottom: 34px; min-width: 300px;
}
.rd-terminal__prompt { color: var(--rd-magenta); }
.rd-terminal__typed { color: var(--rd-term-fg); }
.rd-terminal__caret { width: 9px; height: 19px; background: var(--rd-cyan); animation: rdBlink 1s steps(1) infinite; margin-left: -8px; }
@keyframes rdBlink { 50% { opacity: 0; } }

.rd-hero__cta { display: flex; flex-wrap: wrap; gap: 14px; }

.rd-hero__shapes {
    position: absolute; right: 15px; bottom: 110px;
    display: flex; gap: 6px; padding: 6px;
    border-radius: 999px; border: 1px solid var(--rd-line);
    background: rgba(var(--rd-ink-rgb), .55); backdrop-filter: blur(10px);
}
.rd-shape {
    position: relative; width: 36px; height: 22px; padding: 0; border: 0; background: transparent; cursor: pointer;
}
.rd-shape::before {
    content: ""; position: absolute; left: 4px; right: 4px; top: 50%; height: 4px; margin-top: -2px;
    border-radius: 4px; background: var(--c); opacity: .4;
    transition: opacity .3s, height .3s, margin-top .3s, box-shadow .3s;
}
.rd-shape:hover::before { opacity: .8; }
.rd-shape.is-active::before { opacity: 1; height: 6px; margin-top: -3px; box-shadow: 0 0 12px var(--c); }

.rd-hero__scroll {
    position: absolute; left: 50%; bottom: 28px; z-index: 3; transform: translateX(-50%);
    width: 26px; height: 42px; border-radius: 20px; border: 1.5px solid var(--rd-line-strong);
}
.rd-hero__scroll span {
    position: absolute; left: 50%; top: 8px; width: 4px; height: 8px; margin-left: -2px;
    border-radius: 4px; background: var(--rd-text);
    animation: rdScroll 1.8s var(--rd-ease) infinite;
}
@keyframes rdScroll { 0% { transform: translateY(0); opacity: 1; } 80% { transform: translateY(16px); opacity: 0; } 100% { opacity: 0; } }

@media (max-width: 991px) {
    .rd-hero { align-items: flex-end; }
    .rd-hero__vignette { background: linear-gradient(180deg, rgba(var(--rd-ink-rgb), .1) 0%, rgba(var(--rd-ink-rgb), .55) 45%, var(--rd-ink) 100%); }
    .rd-hero__inner { padding-top: 46vh; padding-bottom: 90px; }
    .rd-hero__shapes { position: static; display: inline-flex; margin-top: 28px; }
    .rd-hero__scroll { display: none; }
}
@media (max-width: 575px) {
    /* Unbounded is a wide face: keep "For Brain" inside a 343px column instead of being cut off. */
    .rd-hero__title { font-size: clamp(34px, 11.2vw, 56px); }
    .rd-hero__inner { padding-top: 40vh; }
    .rd-hero__sub { font-size: 17px !important; }
    .rd-terminal { min-width: 0; width: 100%; font-size: 14px; }
    .rd-hero__cta .rd-btn { flex: 1 1 100%; }
    .rd-hero__shapes { max-width: 100%; flex-wrap: wrap; justify-content: center; border-radius: 22px; }
}

/* ---------- Marquee ---------- */
.rd-marquee {
    position: relative; overflow: hidden;
    border-top: 1px solid var(--rd-line); border-bottom: 1px solid var(--rd-line);
    background: var(--rd-ink-2);
    padding: 22px 0;
}
.rd-marquee__track {
    display: flex; width: max-content;
    animation: rdMarquee 38s linear infinite;
}
.rd-marquee__track span {
    font-family: var(--rd-display); font-weight: 600; font-size: clamp(22px, 3vw, 38px);
    color: transparent; -webkit-text-stroke: 1px var(--rd-line-strong);
    padding: 0 28px; display: inline-flex; align-items: center; gap: 56px;
    transition: color .3s, -webkit-text-stroke-color .3s;
}
.rd-marquee__track span::after { content: '✦'; font-size: .5em; color: var(--rd-violet); -webkit-text-stroke: 0; }
.rd-marquee__track span:nth-child(3n+1) { color: var(--rd-text); -webkit-text-stroke: 0; }
.rd-marquee:hover .rd-marquee__track { animation-play-state: paused; }
@keyframes rdMarquee { to { transform: translateX(-50%); } }

/* ---------- Sections ---------- */
.rd-section { position: relative; padding: 130px 0; }
.rd-section__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; margin-bottom: 56px; flex-wrap: wrap; }
.rd-section__head--center { flex-direction: column; align-items: center; text-align: center; }
.rd-section__aside { display: flex; align-items: center; gap: 22px; }
.rd-section__aside p { margin: 0; font-size: 14px; }
.rd-h2 {
    font-family: var(--rd-display) !important;
    font-weight: 600 !important;
    font-size: clamp(34px, 5vw, 64px);
    line-height: 1.02; letter-spacing: -.035em;
    margin: 0 0 18px;
}
.rd-lead { font-size: 18px !important; max-width: 560px; margin: 0 auto !important; }
@media (max-width: 767px) { .rd-section { padding: 90px 0; } }

/* ---------- Course rail ---------- */
.rd-courses { padding-bottom: 80px; overflow: hidden; }
.rd-courses .rd-section__head { margin-bottom: 40px; }
.rd-arrows { display: flex; gap: 8px; }
.rd-arrow {
    width: 48px; height: 48px; border-radius: 50%;
    border: 1px solid var(--rd-line-strong); background: transparent; color: var(--rd-text);
    cursor: pointer; transition: background .3s, color .3s, transform .3s var(--rd-ease);
}
.rd-arrow:hover:not(:disabled) { background: var(--rd-text); color: var(--rd-ink); transform: scale(1.06); }
.rd-arrow:disabled { opacity: .3; cursor: default; }

.rd-rail {
    /* Same left edge as .container content (max 1240px, 15px padding), so the first
       card lines up with the progress line. % = rail width, which ignores the scrollbar. */
    --rd-gutter: max(15px, calc((100% - 1240px) / 2 + 15px));
    overflow-x: auto; overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--rd-gutter);
    scrollbar-width: none;
    padding: 20px 0 30px;
    cursor: grab;
}
.rd-rail::-webkit-scrollbar { display: none; }
@media (max-width: 575px) { .rd-rail { --rd-gutter: 16px; } }
.rd-rail.is-dragging { cursor: grabbing; scroll-snap-type: none; user-select: none; }
.rd-rail.is-dragging .rd-course { pointer-events: none; }
.rd-rail:focus-visible { outline: 2px solid var(--rd-cyan); outline-offset: -2px; }
.rd-rail img { -webkit-user-drag: none; user-select: none; }
.rd-rail__track {
    display: flex; gap: 24px; width: max-content;
    padding: 0 var(--rd-gutter);
    will-change: transform;
}
.rd-slide { width: clamp(270px, 26vw, 340px); flex: 0 0 auto; scroll-snap-align: start; }
.rd-rail__progress { height: 2px; background: var(--rd-line); border-radius: 2px; overflow: hidden; }
.rd-rail__progress span { display: block; height: 100%; background: var(--rd-grad); transform-origin: 0 50%; transform: scaleX(.04); transition: transform .2s linear; }

.rd-endcard {
    height: 100%; min-height: 380px;
    display: flex; flex-direction: column; justify-content: space-between;
    padding: 32px; border-radius: var(--rd-r-lg);
    background: var(--rd-grad); color: var(--rd-on-accent) !important;
    transition: transform .5s var(--rd-ease);
}
.rd-endcard:hover { transform: scale(.98); }
.rd-endcard__big { font-family: var(--rd-display); font-weight: 800; font-size: 46px; line-height: .95; letter-spacing: -.04em; }
.rd-endcard__arrow {
    width: 64px; height: 64px; border-radius: 50%; background: var(--rd-on-amber); color: #fff;
    display: flex; align-items: center; justify-content: center; font-size: 22px; align-self: flex-end;
    transition: transform .5s var(--rd-ease);
}
.rd-endcard:hover .rd-endcard__arrow { transform: rotate(-45deg); }


/* ---------- Course card ---------- */
.rd-course {
    --rx: 0deg; --ry: 0deg; --mx: 50%; --my: 0%;
    position: relative; height: 100%;
    display: flex; flex-direction: column;
    background: var(--rd-ink-2);
    border: 1px solid var(--rd-line);
    border-radius: var(--rd-r-lg);
    overflow: hidden;
    transform: perspective(900px) rotateX(var(--rx)) rotateY(var(--ry));
    transition: transform .5s var(--rd-ease), border-color .4s, box-shadow .5s var(--rd-ease);
}
.rd-course::after {
    content: ''; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
    background: radial-gradient(400px circle at var(--mx) var(--my), rgba(139, 124, 255, .18), transparent 45%);
    opacity: 0; transition: opacity .4s;
}
.rd-course:hover { border-color: var(--rd-line-strong); box-shadow: 0 40px 80px -30px var(--rd-shadow-strong); }
.rd-course:hover::after { opacity: 1; }
.rd-course__media { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--rd-ink-3); }
.rd-course__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--rd-ease); }
.rd-course:hover .rd-course__media img { transform: scale(1.07); }
.rd-course__body { padding: 20px 22px 22px; display: flex; flex-direction: column; flex: 1; }
.rd-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px !important; }
.rd-tags a {
    display: inline-block; font-size: 12px; font-weight: 700;
    padding: 4px 10px; border-radius: 999px;
    color: var(--rd-cyan) !important; background: rgba(62, 230, 255, .08);
}
.rd-tags li:nth-child(2n) a { color: var(--rd-magenta) !important; background: rgba(255, 92, 200, .08); }
.rd-course__title { font-family: var(--rd-body) !important; font-size: 19px !important; font-weight: 700 !important; line-height: 1.3; margin: 0 0 18px !important; letter-spacing: -.01em; }
.rd-course__title a { color: var(--rd-text) !important; }
.rd-course__title a:hover { color: var(--rd-cyan) !important; }
.rd-course__foot {
    margin-top: auto; padding-top: 14px; border-top: 1px solid var(--rd-line);
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    font-size: 13px; color: var(--rd-muted);
}
.rd-course__author { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; }
.rd-course__author img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; border: 1px solid var(--rd-line-strong); }
.rd-course__students i { margin-right: 4px; }

.rd-price {
    position: absolute; top: 14px; right: 14px; z-index: 2;
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 12px; border-radius: 999px;
    font: 800 13px var(--rd-body);
    background: var(--rd-amber); color: var(--rd-on-amber);
    box-shadow: 0 8px 20px -6px var(--rd-shadow);
}
.rd-price--sale { background: var(--rd-ink); color: var(--rd-text); border: 1px solid var(--rd-line-strong); }
.rd-price--sale::after {
    content: ''; position: absolute; inset: 0; border-radius: inherit;
    background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .45) 50%, transparent 70%);
    background-size: 220% 100%; animation: rdShine 2.8s linear infinite;
}
@keyframes rdShine { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.rd-price--live { background: #fff; color: var(--rd-red); }
.rd-price--sub { background: var(--rd-violet); color: #fff; }
.rd-price--free { background: var(--rd-cyan); color: var(--rd-on-accent); }

/* ---------- Plans ---------- */
.rd-plans { background: linear-gradient(180deg, var(--rd-ink) 0%, var(--rd-ink-2) 50%, var(--rd-ink) 100%); }
.rd-plans__row > div { margin-bottom: 24px; }
.rd-plan {
    --rx: 0deg; --ry: 0deg; --mx: 50%; --my: 0%;
    position: relative; height: 100%;
    padding: 38px 32px 32px; border-radius: var(--rd-r-lg);
    background: var(--rd-ink-2); border: 1px solid var(--rd-line);
    display: flex; flex-direction: column;
    transform: perspective(1000px) rotateX(var(--rx)) rotateY(var(--ry));
    transition: transform .5s var(--rd-ease), box-shadow .5s;
}
.rd-plan::after {
    content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
    background: radial-gradient(500px circle at var(--mx) var(--my), rgba(62, 230, 255, .1), transparent 45%);
}
.rd-plan__name { font-family: var(--rd-display) !important; font-size: 22px !important; font-weight: 600 !important; margin-bottom: 26px !important; display: flex; align-items: center; gap: 10px; }
.rd-plan__price { display: flex; align-items: flex-start; gap: 4px; margin-bottom: 18px; line-height: 1; }
.rd-plan__amount { font-family: var(--rd-display); font-weight: 800; font-size: 84px; letter-spacing: -.06em; color: var(--rd-text); }
.rd-plan__cur { font-family: var(--rd-display); font-weight: 600; font-size: 28px; margin-top: 10px; color: var(--rd-muted); }
.rd-plan__old { font-family: var(--rd-display); font-size: 20px; color: var(--rd-muted); margin: 14px 10px 0 0; opacity: .7; }
.rd-plan__desc { margin-bottom: 28px !important; flex: 1; }
.rd-plan--featured {
    background:
        linear-gradient(var(--rd-ink-2), var(--rd-ink-2)) padding-box,
        conic-gradient(from var(--rd-angle, 0deg), var(--rd-cyan), var(--rd-violet), var(--rd-magenta), var(--rd-cyan)) border-box;
    border: 1.5px solid transparent;
    box-shadow: 0 40px 100px -40px rgba(139, 124, 255, .7);
    animation: rdSpin 6s linear infinite;
}
.rd-plan--featured .rd-plan__amount {
    background: var(--rd-grad); -webkit-background-clip: text; background-clip: text; color: transparent;
}
@property --rd-angle { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
@keyframes rdSpin { to { --rd-angle: 360deg; } }
.rd-plan__flag {
    position: absolute; top: -13px; left: 32px;
    padding: 5px 12px; border-radius: 999px;
    background: var(--rd-text); color: var(--rd-ink);
    font-size: 12px; font-weight: 800;
}
.rd-tag-live { font-family: var(--rd-body); font-size: 12px; font-weight: 800; padding: 4px 9px; border-radius: 999px; background: var(--rd-red); color: #fff; }
.rd-plan--root .rd-plan__amount { color: var(--rd-magenta); }

/* ---------- About ---------- */
.rd-about__text { max-width: 600px; margin-bottom: 40px; }
.rd-about__text p { font-size: 17px !important; margin-bottom: 14px !important; }
.rd-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--rd-line); border: 1px solid var(--rd-line); border-radius: var(--rd-r); overflow: hidden; }
.rd-fact { background: var(--rd-ink); padding: 26px 24px; }
.rd-fact i { font-size: 20px; color: var(--rd-cyan); margin-bottom: 14px; display: block; }
.rd-fact:nth-child(2n) i { color: var(--rd-magenta); }
.rd-fact h3 { font-family: var(--rd-body) !important; font-size: 17px !important; font-weight: 700 !important; margin-bottom: 6px !important; }
.rd-fact p { font-size: 14.5px !important; margin: 0 !important; }
@media (max-width: 575px) { .rd-facts { grid-template-columns: 1fr; } }

.rd-portrait { position: relative; margin: 0; max-width: 750px; }
.rd-portrait__frame {
    position: relative; border-radius: var(--rd-r-lg); overflow: hidden;
    border: 1px solid var(--rd-line-strong);
    box-shadow: 0 40px 80px -40px var(--rd-shadow-strong);
}
/* Whole photo at its natural ratio and never wider than its 750px source, so it stays sharp. */
.rd-portrait__frame img { display: block; width: 100%; height: auto; aspect-ratio: 750 / 360; }
.rd-portrait__quote {
    position: relative; margin: 16px 0 0;
    padding: 20px 24px; border-radius: var(--rd-r);
    background: rgba(var(--rd-surface-rgb), .92); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    border: 1px solid var(--rd-line-strong);
    font-family: var(--rd-display); font-weight: 600; font-size: 16px; line-height: 1.4; color: var(--rd-text);
}
@media (max-width: 991px) { .rd-portrait { margin: 50px auto 0; } }
@media (max-width: 575px) { .rd-portrait__quote { font-size: 15px; } }

/* ---------- Stats ---------- */
.rd-stats { padding: 30px 0 40px; }
.rd-stats__grid { display: grid; grid-template-columns: repeat(4, 1fr); margin: 0; border-top: 1px solid var(--rd-line); border-bottom: 1px solid var(--rd-line); }
.rd-stat { padding: 40px 24px; }
.rd-stat + .rd-stat { border-left: 1px solid var(--rd-line); }
.rd-stat dt { font-weight: 600; font-size: 14px; color: var(--rd-muted); order: 2; }
.rd-stat dd { margin: 0 0 8px; font-family: var(--rd-display); font-weight: 800; font-size: clamp(40px, 5vw, 68px); letter-spacing: -.05em; line-height: 1; color: var(--rd-text); }
.rd-stat { display: flex; flex-direction: column-reverse; }
.rd-stat dd { display: flex; align-items: baseline; white-space: nowrap; }
.rd-stat dd small { font-size: .45em; color: var(--rd-cyan); margin-left: 4px; letter-spacing: 0; }
@media (max-width: 767px) {
    .rd-stats__grid { grid-template-columns: repeat(2, 1fr); }
    .rd-stat:nth-child(3) { border-left: 0; }
    .rd-stat:nth-child(n+3) { border-top: 1px solid var(--rd-line); }
    .rd-stat { padding: 28px 16px; }
    /* Two columns: "1430" + unit must fit half the screen, so size the number from the viewport. */
    .rd-stat dd { font-size: clamp(26px, 8.2vw, 44px); letter-spacing: -.06em; }
    .rd-stat dd small { margin-left: 3px; }
}
@media (max-width: 360px) { .rd-stat { padding: 24px 12px; } }

/* ---------- Blog: bento grid (home teaser + /blog) ---------- */
.rd-blog__head { align-items: flex-end; }
.rd-blog__head .rd-h2 { margin: 0; }
.rd-blog__intro { max-width: 470px; }
.rd-blog__intro p { margin-bottom: 10px !important; font-size: 15.5px !important; }

.rd-bento {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-auto-rows: minmax(210px, auto);
    grid-auto-flow: dense;
    gap: 18px;
}
.rd-tile {
    --tile-accent: var(--rd-cyan);
    position: relative;
    display: flex !important; flex-direction: column; gap: 18px;
    padding: 18px; border-radius: var(--rd-r-lg);
    background: var(--rd-ink-2);
    border: 1px solid var(--rd-line);
    color: var(--rd-text) !important;
    transition: border-color .4s, transform .5s var(--rd-ease), box-shadow .5s var(--rd-ease);
}
.rd-tile:hover { border-color: var(--rd-line-strong); transform: translateY(-4px); box-shadow: 0 30px 60px -36px var(--rd-shadow-strong); }
.rd-tile--big  { grid-column: span 2; grid-row: span 2; padding: 22px; }
.rd-tile--wide { grid-column: span 2; flex-direction: row; align-items: center; }
.rd-tile--tall { grid-row: span 2; }

/* Image: always whole, native ratio, capped at its 640px source width. */
.rd-tile__media {
    display: block !important; flex: 0 0 auto;
    width: 100%; max-width: 640px;
    border-radius: calc(var(--rd-r-lg) - 8px); overflow: hidden;
    background: var(--rd-ink-3);
}
.rd-tile__media img { display: block; width: 100%; height: auto; aspect-ratio: 640 / 350; transition: transform .9s var(--rd-ease); }
.rd-tile:hover .rd-tile__media img { transform: scale(1.03); }
.rd-tile--wide .rd-tile__media { width: 52%; }

.rd-tile__body { display: flex !important; flex-direction: column; gap: 10px; flex: 1; min-width: 0; padding: 0 4px 2px; }
.rd-tile__title {
    font-family: var(--rd-body); font-weight: 700; font-size: 18px; line-height: 1.3; letter-spacing: -.01em;
    color: var(--rd-text);
    display: -webkit-box !important; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
    transition: color .3s;
}
.rd-tile:hover .rd-tile__title { color: var(--tile-accent); }
.rd-tile--big .rd-tile__title {
    font-family: var(--rd-display); font-weight: 600;
    font-size: clamp(22px, 2.3vw, 32px); line-height: 1.15; letter-spacing: -.03em;
}
.rd-tile--tall .rd-tile__title { font-size: 20px; }
.rd-tile__excerpt {
    font-size: 15px; line-height: 1.55; color: var(--rd-muted);
    display: -webkit-box !important; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.rd-tile__meta { margin-top: auto; display: flex !important; flex-wrap: wrap; gap: 14px; font-size: 12.5px; font-weight: 600; color: var(--rd-muted); }
.rd-tile__meta i { margin-right: 3px; }

/* Text-only small tiles carry the colour so the mosaic does not read as a list. */
.rd-tile--small { padding: 22px; }
.rd-tile--small:nth-child(3n+1) { --tile-accent: var(--rd-magenta); }
.rd-tile--small:nth-child(3n+2) { --tile-accent: var(--rd-violet); }
.rd-tile--small::after {
    content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
    background: radial-gradient(120% 90% at 100% 0%, color-mix(in srgb, var(--tile-accent) 16%, transparent), transparent 60%);
}
.rd-tile__icon {
    width: 44px; height: 44px; border-radius: 12px;
    display: flex !important; align-items: center; justify-content: center;
    color: var(--tile-accent); font-size: 18px;
    background: color-mix(in srgb, var(--tile-accent) 14%, transparent);
    border: 1px solid color-mix(in srgb, var(--tile-accent) 30%, transparent);
}
.rd-tile--small .rd-tile__title { font-size: 19px; -webkit-line-clamp: 4; }

.rd-tile__go {
    position: absolute; top: 18px; right: 18px; z-index: 2;
    width: 40px; height: 40px; border-radius: 50%;
    display: flex !important; align-items: center; justify-content: center;
    background: var(--rd-text); color: var(--rd-ink);
    transform: rotate(-45deg) scale(.7); opacity: 0;
    transition: transform .5s var(--rd-ease), opacity .35s;
}
.rd-tile:hover .rd-tile__go,
.rd-tile:focus-visible .rd-tile__go { opacity: 1; transform: rotate(-45deg) scale(1); }

/* "Ceo blog" tile on the home page */
.rd-tile--cta { background: var(--rd-grad); border: 0; color: #fff !important; }
.rd-tile--cta::after { display: none; }
.rd-tile--cta .rd-tile__title { font-family: var(--rd-display); font-size: 26px; font-weight: 600; letter-spacing: -.03em; color: #fff !important; }
.rd-tile--cta .rd-tile__meta { color: rgba(255, 255, 255, .85); }
.rd-tile--cta .rd-tile__icon { color: #fff; background: rgba(255, 255, 255, .16); border-color: rgba(255, 255, 255, .3); }
.rd-tile--cta .rd-tile__go { opacity: 1; transform: rotate(-45deg); background: #fff; color: #0A0D24; }

.rd-blog-page { padding: 70px 0 120px; }
.rd-empty { text-align: center; padding: 60px 0; }

@media (max-width: 991px) {
    .rd-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
    .rd-blog__intro { max-width: none; }
    /* Two columns would stretch the big tile past the 640px image width: lay it out sideways. */
    .rd-tile--big { grid-row: span 1; flex-direction: row; align-items: center; }
    .rd-tile--big .rd-tile__media { width: 55%; }
}
@media (max-width: 575px) {
    .rd-bento { grid-template-columns: 1fr; grid-auto-rows: auto; }
    .rd-tile--big, .rd-tile--wide { grid-column: span 1; }
    .rd-tile--big, .rd-tile--tall { grid-row: span 1; }
    .rd-tile--wide, .rd-tile--big { flex-direction: column; align-items: stretch; }
    .rd-tile--wide .rd-tile__media, .rd-tile--big .rd-tile__media { width: 100%; }
    .rd-tile--small { min-height: 180px; }
}
@media (hover: none) { .rd-tile__go { opacity: 1; transform: rotate(-45deg) scale(.85); } }

/* ---------- Quotes ---------- */
.rd-quotes { text-align: center; overflow: hidden; }
.rd-quotes__label { font-family: var(--rd-body) !important; font-size: 14px !important; color: var(--rd-muted) !important; font-weight: 600 !important; margin-bottom: 36px !important; }
.rd-quotes__stage { display: grid; max-width: 980px; margin: 0 auto; }
.rd-quote { grid-area: 1 / 1; margin: 0; visibility: hidden; opacity: 0; }
.rd-quote.is-active { visibility: visible; opacity: 1; }
.rd-quote blockquote {
    font-family: var(--rd-display); font-weight: 600;
    font-size: clamp(26px, 3.6vw, 48px); line-height: 1.15; letter-spacing: -.03em;
    color: var(--rd-text); margin: 0 0 26px;
}
.rd-quote figcaption { font-weight: 700; color: var(--rd-cyan); }
.rd-quotes__dots { display: flex; justify-content: center; gap: 10px; margin-top: 40px; }
.rd-quotes__dots button { width: 28px; height: 4px; border: 0; padding: 0; border-radius: 4px; background: var(--rd-line-strong); cursor: pointer; transition: width .5s var(--rd-ease), background .3s; }
.rd-quotes__dots button.is-active { width: 56px; background: var(--rd-text); }

/* ---------- Footer ---------- */
body.rd .rd-footer { position: relative; overflow: hidden; background: var(--rd-ink-2); border-top: 1px solid var(--rd-line); padding-top: 100px; }
.rd-footer__cta { display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; flex-wrap: wrap; padding-bottom: 70px; border-bottom: 1px solid var(--rd-line); margin-bottom: 60px; }
.rd-footer__big { font-family: var(--rd-display); font-weight: 600; font-size: clamp(30px, 4.4vw, 58px) !important; line-height: 1.04 !important; letter-spacing: -.035em; color: var(--rd-text) !important; margin: 0 !important; }
.rd-footer__title { font-family: var(--rd-body) !important; font-size: 13px !important; color: var(--rd-muted) !important; font-weight: 600 !important; margin-bottom: 18px !important; }
.rd-footer__cols > div { margin-bottom: 40px; }
.rd-footer__cols p { font-size: 15px !important; max-width: 340px; }
.rd-footer__links li { margin-bottom: 10px; }
.rd-footer__links a { color: var(--rd-text) !important; font-weight: 500; position: relative; }
.rd-footer__links a::after { content: ''; position: absolute; left: 0; bottom: -2px; width: 100%; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .5s var(--rd-ease); }
.rd-footer__links a:hover::after { transform: scaleX(1); transform-origin: left; }
.rd-footer__mail { color: var(--rd-text) !important; font-weight: 600; word-break: break-all; }
.rd-footer__social { display: flex; gap: 10px; margin-top: 20px !important; }
.rd-footer__social a {
    width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--rd-line-strong);
    display: flex !important; align-items: center; justify-content: center; color: var(--rd-text) !important;
    transition: background .3s, color .3s, transform .4s var(--rd-ease);
}
.rd-footer__social a:hover { background: var(--rd-text); color: var(--rd-ink) !important; transform: translateY(-3px); }
.rd-footer__bottom { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; padding: 26px 0; border-top: 1px solid var(--rd-line); font-size: 14px; color: var(--rd-muted); position: relative; z-index: 2; }
.rd-footer__wordmark {
    font-family: var(--rd-display); font-weight: 800; white-space: nowrap;
    font-size: clamp(64px, 15vw, 230px); line-height: .8; letter-spacing: -.06em;
    color: transparent; -webkit-text-stroke: 1px var(--rd-line-strong);
    margin-bottom: -.12em; user-select: none; pointer-events: none;
}

/* ---------- Back to top ---------- */
body.rd .back-to-top {
    width: 48px; height: 48px; line-height: 48px; border-radius: 50%;
    background: var(--rd-text); color: var(--rd-ink); font-size: 16px;
    box-shadow: 0 12px 30px -10px var(--rd-shadow);
    right: 22px; bottom: 22px;
}
body.rd .back-to-top:hover { background: var(--rd-cyan); color: var(--rd-on-accent); }

/* ==========================================================================
   INNER PAGES — dark overrides for the legacy template components
   ========================================================================== */

/* Page banners get the canvas constellation (inserted by redesign.js). */
body.rd .page_banner,
body.rd .courses_details_banner {
    position: relative; overflow: hidden; isolation: isolate;
    background-image: none !important;
    background:
        radial-gradient(50% 80% at 80% 0%, var(--rd-glow-violet), transparent 70%),
        radial-gradient(40% 60% at 0% 100%, var(--rd-glow-cyan), transparent 70%),
        var(--rd-ink) !important;
    padding-top: 110px; padding-bottom: 90px;
    border-bottom: 1px solid var(--rd-line);
}
body.rd .page_banner::before,
body.rd .courses_details_banner::before { display: none; }
body.rd .rd-net { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; }
body.rd .page_banner .banner_content .title {
    font-family: var(--rd-display); font-weight: 800;
    font-size: clamp(34px, 5.5vw, 72px); letter-spacing: -.045em; line-height: 1;
    color: var(--rd-text);
}
body.rd .banner_content .breadcrumb {
    display: inline-flex; flex-wrap: wrap; justify-content: center; margin-top: 24px;
    padding: 8px 18px; border-radius: 999px; border: 1px solid var(--rd-line);
    background: rgba(var(--rd-ink-rgb), .5); backdrop-filter: blur(8px);
}
body.rd .banner_content .breadcrumb li a { font-size: 14px; color: var(--rd-muted); }
body.rd .banner_content .breadcrumb li a.active { color: var(--rd-text); font-weight: 700; }
body.rd .banner_content .breadcrumb li + li::before { color: var(--rd-line-strong); }
body.rd .details_banner_content .title { font-family: var(--rd-display); font-size: clamp(28px, 4vw, 48px); letter-spacing: -.03em; line-height: 1.1; }
body.rd .details_media .media_content p { color: var(--rd-muted); }
body.rd .details_media .media_content .title,
body.rd .details_media .media_content .title a { color: var(--rd-text); }

/* Generic headings used by the template */
body.rd .section_title .main_title,
body.rd .courses_details_title,
body.rd .courses_title,
body.rd .sidebar_title,
body.rd .title { color: var(--rd-text); }
body.rd .section_title .main_title { font-family: var(--rd-display); letter-spacing: -.03em; }
body.rd .text-muted { color: var(--rd-muted) !important; }
body.rd hr { border-color: var(--rd-line); }

/* Generic light surfaces -> dark surfaces */
body.rd .courses_area,
body.rd .courses_details_area,
body.rd .blog_list_page,
body.rd .blog_details_page,
body.rd .contact_area,
body.rd .pricing_area,
body.rd .skill_area,
body.rd .event_area_2,
body.rd .features_area,
body.rd .why_choose_area,
body.rd .counter_area,
body.rd .testimonial_area { background-color: transparent; }
body.rd .bg-white, body.rd .bg-light { background-color: var(--rd-ink-2) !important; }

body.rd .card {
    background: var(--rd-ink-2); border: 1px solid var(--rd-line); border-radius: var(--rd-r);
    color: var(--rd-text);
}
body.rd .card-header { background: var(--rd-tint-1); border-bottom: 1px solid var(--rd-line); }
body.rd .card-body { color: var(--rd-muted); }

/* Course details */
body.rd .courses_top_bar .courses_meta .meta li,
body.rd .courses_top_bar .courses_meta .meta li a { color: var(--rd-muted); }
body.rd .courses_details_content p,
body.rd .single_courses_details p { color: var(--rd-muted); }
body.rd .courses_curriculum .accordion .card { border: 1px solid var(--rd-line); border-radius: var(--rd-r-sm) !important; margin-bottom: 10px; overflow: hidden; background: var(--rd-ink-2); }
body.rd .courses_curriculum .accordion .card .card-header { background: var(--rd-tint-1); border: 0; }
body.rd .courses_curriculum .accordion .card .card-header a { color: var(--rd-text); }
body.rd .courses_curriculum .accordion .card .card-header a::before { color: var(--rd-cyan); }
body.rd .courses_curriculum .accordion .card .card-body { background: transparent; }
body.rd .courses_curriculum .curriculum_list span,
body.rd .courses_curriculum .curriculum_list ul li a,
body.rd .courses_curriculum .accordion .card .card-body .curriculum_content .title { color: var(--rd-text); }
body.rd .courses_curriculum .curriculum_list ul li a i,
body.rd .courses_curriculum .curriculum_list span i { color: var(--rd-cyan); }

body.rd .courses_details_sidebar {
    background: var(--rd-ink-2); border: 1px solid var(--rd-line);
    border-radius: var(--rd-r-lg); overflow: visible; box-shadow: 0 40px 80px -40px var(--rd-shadow-strong);
}
body.rd .courses_details_sidebar .courses_sidebar_image img { border-radius: var(--rd-r-lg) var(--rd-r-lg) 0 0; }
body.rd .courses_details_sidebar .courses_sidebar_title { background: transparent; border-bottom: 1px solid var(--rd-line); }
body.rd .courses_details_sidebar .courses_sidebar_title .title,
body.rd .courses_details_sidebar .courses_sidebar_list .list li,
body.rd .courses_details_sidebar .courses_sidebar_list .list li span { color: var(--rd-text); }
body.rd .courses_details_sidebar .courses_sidebar_list .list li { border-bottom-color: var(--rd-line); }
body.rd .courses_details_sidebar .courses_sidebar_list .list li i { color: var(--rd-cyan); }

body.rd .average_rating,
body.rd .detailed_rating,
body.rd .courses_reviews_comment { color: var(--rd-text); }
body.rd .average_rating { background: var(--rd-ink-2); border-radius: var(--rd-r); }
body.rd .detailed_rating .single_star .bar { background: var(--rd-ink-3); }
body.rd .skill_item .skill_bar,
body.rd .skill_bar { background-color: var(--rd-ink-3); }
body.rd .skill_title, body.rd .skill_header, body.rd .skill_item p { color: var(--rd-text); }

/* Template buttons keep their role but get the new skin */
body.rd .main-btn {
    border-radius: 999px; font-family: var(--rd-body); font-weight: 700;
    background: var(--rd-text); color: var(--rd-ink);
    border: 0; transition: background .3s, color .3s, box-shadow .4s var(--rd-ease), transform .4s var(--rd-ease);
}
body.rd .main-btn:hover { background: var(--rd-cyan); color: var(--rd-on-accent); box-shadow: 0 10px 30px -10px rgba(62, 230, 255, .7); transform: translateY(-2px); }
body.rd .main-btn-2 { background: var(--rd-grad); color: #fff; }
body.rd .main-btn-2:hover { color: var(--rd-on-accent); }

/* Pricing (packet pages) */
body.rd .single_pricing {
    background: var(--rd-ink-2) !important; border: 1px solid var(--rd-line); border-radius: var(--rd-r-lg);
    box-shadow: none;
}
body.rd .single_pricing.active { border-color: var(--rd-violet); box-shadow: 0 40px 100px -40px rgba(139, 124, 255, .7); }
body.rd .single_pricing .title,
body.rd .single_pricing .price { color: var(--rd-text) !important; font-family: var(--rd-display); }
body.rd .single_pricing p { color: var(--rd-muted) !important; }

/* Legacy course cards (packet sidebars etc.) */
body.rd .single_courses { background: var(--rd-ink-2); border: 1px solid var(--rd-line); border-radius: var(--rd-r); overflow: hidden; }
body.rd .single_courses .courses_content,
body.rd .single_courses.courses_gray .courses_content { background: transparent; }
body.rd .single_courses .courses_content .title a,
body.rd .single_courses .courses_content .courses_author .author_name a { color: var(--rd-text); }
body.rd .single_courses .courses_content .meta { border-top-color: var(--rd-line); }
body.rd .single_courses .courses_content .meta ul li a { color: var(--rd-muted); }

/* Grid of course cards (all courses / categories) */
body.rd .rd-grid-item { margin-bottom: 28px; }
body.rd .courses_area { padding-top: 80px; }
body.rd #cat-description, body.rd #cat-description p { color: var(--rd-muted); }
body.rd #cat-description h1, body.rd #cat-description h2, body.rd #cat-description h3 { color: var(--rd-text) !important; }

/* Forms */
body.rd .single_form input,
body.rd .single_form textarea,
body.rd .form-control {
    background: var(--rd-tint-1);
    border: 1px solid var(--rd-line-strong);
    border-radius: var(--rd-r-sm);
    color: var(--rd-text);
}
body.rd .single_form input:focus,
body.rd .single_form textarea:focus,
body.rd .form-control:focus {
    background: var(--rd-tint-3);
    border-color: var(--rd-cyan);
    box-shadow: 0 0 0 4px rgba(62, 230, 255, .12);
    color: var(--rd-text);
}
body.rd .form-control::placeholder, body.rd .single_form ::placeholder { color: rgba(163, 171, 214, .6); }
:where(body.rd) label { color: var(--rd-text); }
body.rd .nice-select { background: var(--rd-tint-1); border-color: var(--rd-line-strong); color: var(--rd-text); border-radius: var(--rd-r-sm); }
body.rd .nice-select .list { background: var(--rd-ink-2); border: 1px solid var(--rd-line); }
body.rd .nice-select .option:hover, body.rd .nice-select .option.focus, body.rd .nice-select .option.selected.focus { background: var(--rd-ink-3); }

/* Blog list + post */
body.rd .single_blog, body.rd .blog_details .details_content,
body.rd .sidebar .sidebar_post, body.rd .sidebar > div {
    background: var(--rd-ink-2); border-color: var(--rd-line);
}
body.rd .blog_details .details_content .blog_content_wrapper .blog_title,
body.rd .blog_details .details_content .blog_content_wrapper .blog_meta li a,
body.rd .blog_details p, body.rd .blog_details li { color: var(--rd-text); }
body.rd .blog_details p { color: var(--rd-prose); }
body.rd .blog_details .blockquote { background: var(--rd-ink-2); border-left: 3px solid var(--rd-magenta); }
/* "Objavljeno ..." bar: the legacy template hard-codes a white background and a shadow. */
body.rd .blog_details .details_content .blog_content_wrapper {
    background-color: var(--rd-ink-2);
    border: 1px solid var(--rd-line);
    border-radius: var(--rd-r);
    box-shadow: 0 30px 60px -36px var(--rd-shadow);
}
body.rd .blog_details .details_content .blog_content_wrapper .blog_meta li,
body.rd .blog_details .details_content .blog_content_wrapper .blog_meta .time { color: var(--rd-muted); font-weight: 600; font-size: 14px; }
body.rd .blog_details .details_content .blog_content_wrapper .blog_meta .time i { color: var(--rd-cyan); margin-right: 6px; }
body.rd .blog_details_share span { color: var(--rd-text); }
body.rd .blog_details_share .social li a { color: var(--rd-muted); }
body.rd .blog_details_share .social li a:hover { color: var(--rd-cyan); }
body.rd .blog_details pre, body.rd .blog_details code { font-family: var(--rd-mono); background: var(--rd-code-bg); color: var(--rd-code-fg); border-radius: var(--rd-r-sm); }
body.rd .blog_details_comment .blog_comment_items ul li .single_comment .comment_content .author_name,
body.rd .blog_details_comment .blog_details_comment_title { color: var(--rd-text); }

/* Contact */
body.rd .contact_info .single_info .info_content p,
body.rd .contact_info .single_info .info_content a { color: var(--rd-text); }
body.rd .contact_info .single_info .info_icon i { color: var(--rd-cyan); }

/* Pagination */
body.rd .pagination li a,
body.rd .page-link { background: transparent; border: 1px solid var(--rd-line-strong); color: var(--rd-text); border-radius: 50%; }
body.rd .pagination li a.active,
body.rd .page-item.active .page-link { background: var(--rd-text); color: var(--rd-ink); border-color: var(--rd-text); }

/* Tables (admin-ish pages, packets) */
body.rd .table { color: var(--rd-text); }
body.rd .table td, body.rd .table th { border-color: var(--rd-line); }

/* Modal (bootstrap) */
body.rd .modal-content { background: var(--rd-ink-2); border: 1px solid var(--rd-line); border-radius: var(--rd-r-lg); color: var(--rd-text); }
body.rd .modal-header, body.rd .modal-footer { border-color: var(--rd-line); }
body.rd .close { color: var(--rd-text); text-shadow: none; }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
    html { scroll-behavior: auto; }
    .rd-marquee__track { animation: none; }
}

/* ==========================================================================
   LIGHT THEME — fixes for legacy markup with hard-coded light text
   ========================================================================== */
:root[data-theme="light"] body.rd .details_banner_content > span { color: var(--rd-muted) !important; }
:root[data-theme="light"] body.rd .rd-hero__canvas { opacity: .95; }
:root[data-theme="light"] body.rd .rd-plan--featured { box-shadow: 0 40px 100px -40px rgba(91, 73, 230, .45); }
:root[data-theme="light"] body.rd .rd-course:hover,
:root[data-theme="light"] body.rd .rd-plan { box-shadow: 0 30px 60px -36px var(--rd-shadow-strong); }
:root[data-theme="light"] body.rd .rd-marquee__track span::after { color: var(--rd-magenta); }
:root[data-theme="light"] body.rd .rd-toggler .toggler-icon { background: var(--rd-text); }

/* ==========================================================================
   PACKET + COURSE DETAIL PAGES (paket-kurseva/*, kursevi/{slug})
   The templates carry inline styles (gold square, white text, #202d44 card) and legacy light
   backgrounds, so some rules need !important to win over `style=""`.
   ========================================================================== */

/* --- Intro card: price chip + "Pristup svemu" card --- */
body.rd .blog_details .details_content { width: 100%; margin: 0; background: transparent; border: 0; box-shadow: none; }

body.rd .blog_details .details_content .date {
    display: inline-flex !important; align-items: baseline; gap: 6px;
    width: auto !important; height: auto !important; margin: 0 0 16px;
    padding: 9px 20px 10px !important; border-radius: 999px;
    background: var(--rd-amber) !important; color: #1A1530 !important;
    font: 700 18px/1 var(--rd-display) !important;
    box-shadow: 0 14px 30px -14px color-mix(in srgb, var(--rd-amber) 70%, transparent);
}
body.rd .blog_details .details_content .date br { display: none; }
body.rd .blog_details .details_content .date span { font: 800 32px/1 var(--rd-display) !important; letter-spacing: -.04em; color: inherit !important; }

body.rd .blog_details .details_content .blog_content_wrapper:not(.mb-4) {
    background: var(--rd-ink-2) !important;
    border: 1px solid var(--rd-line); border-radius: var(--rd-r-lg);
    padding: 34px 36px 32px; margin-top: 0;
    box-shadow: 0 40px 80px -48px var(--rd-shadow);
    display: flow-root;   /* contains the floated "Vidi plaćanja" button */
}
body.rd .blog_details .details_content .blog_content_wrapper:not(.mb-4) h3 {
    color: var(--rd-text) !important; font-family: var(--rd-display); font-weight: 800;
    font-size: clamp(26px, 3.4vw, 38px); letter-spacing: -.04em; line-height: 1.05; margin: 0 0 6px;
}
body.rd .blog_details .details_content .blog_content_wrapper:not(.mb-4) p { color: var(--rd-muted) !important; font-size: 16.5px; line-height: 1.7; margin: 18px 0 0; }
body.rd .blog_details .details_content .blog_content_wrapper:not(.mb-4) strong { color: var(--rd-text) !important; }
body.rd .blog_details .details_content .blog_content_wrapper:not(.mb-4) .highlight { color: var(--rd-cyan) !important; }
body.rd .blog_details .details_content .blog_content_wrapper:not(.mb-4) .main-btn { margin-top: 26px; float: none !important; display: inline-flex; align-items: center; height: 50px; line-height: 1; padding: 0 28px; }

/* --- Section blocks: "Poslednje dodato", "Način plaćanja", lesson lists --- */
body.rd .courses_curriculum {
    border: 1px solid var(--rd-line); border-radius: var(--rd-r-lg); overflow: hidden;
    background: var(--rd-ink-2);
}
body.rd .courses_curriculum .courses_top_bar {
    margin: 0; padding: 20px 28px; border-bottom: 1px solid var(--rd-line);
    background: var(--rd-tint-2) !important;
    align-items: center; gap: 12px 24px;
}
body.rd .courses_curriculum .courses_top_bar .courses_title { padding: 0; }
body.rd .courses_curriculum .courses_top_bar .courses_details_title { font: 800 clamp(20px, 2.4vw, 26px)/1.1 var(--rd-display); letter-spacing: -.03em; color: var(--rd-text); }
body.rd .courses_curriculum .courses_top_bar .courses_meta .meta { padding: 0; margin: 0; }
body.rd .courses_curriculum .courses_top_bar .courses_meta .meta li { color: var(--rd-muted); font-size: 14.5px; font-weight: 600; }
body.rd .courses_curriculum .courses_top_bar .courses_meta .meta li i { color: var(--rd-amber); margin-right: 4px; }
/* The payment block keeps a warm accent so it is recognisable as the place to pay */
body.rd #placanje.courses_curriculum { border-color: color-mix(in srgb, var(--rd-amber) 45%, var(--rd-line)); }
body.rd #placanje.courses_curriculum .courses_top_bar { background: color-mix(in srgb, var(--rd-amber) 16%, transparent) !important; }
body.rd #placanje.courses_curriculum .courses_top_bar .courses_meta .meta li { color: var(--rd-text); }

/* Accordion rows: plain list separated by hairlines, not nested boxes */
body.rd .courses_curriculum .accordion .card { background: transparent; border: 0; border-radius: 0 !important; margin: 0; box-shadow: none; }
body.rd .courses_curriculum .accordion .card .card-header {
    padding: 18px 28px; border: 0; border-top: 1px solid var(--rd-line);
    background: transparent; transition: background .3s;
}
body.rd .courses_curriculum .accordion .card:first-child .card-header { border-top: 0; }
body.rd .courses_curriculum .accordion .card .card-header:hover { background: var(--rd-tint-1); }
body.rd .courses_curriculum .accordion .card .card-header a { color: var(--rd-text); font-weight: 700; }
body.rd .courses_curriculum .accordion .card .card-header a::before { color: var(--rd-cyan); }
body.rd .courses_curriculum .accordion .card .card-body { padding: 6px 28px 26px 53px; }
body.rd .courses_curriculum .accordion .card .card-body .curriculum_content .title { color: var(--rd-text); font-size: 15.5px; line-height: 1.5; }
body.rd .courses_curriculum .accordion .card .card-body .curriculum_content p { color: var(--rd-muted); margin-top: 12px; }
body.rd .courses_curriculum .curriculum_list span { color: var(--rd-muted); font-weight: 700; font-size: 14px; }
body.rd .courses_curriculum .curriculum_list span i { color: var(--rd-amber); }
body.rd .courses_curriculum .curriculum_list ul { padding-left: 0; }
body.rd .courses_curriculum .curriculum_list ul li { border-bottom: 1px solid var(--rd-line); }
body.rd .courses_curriculum .curriculum_list ul li a { color: var(--rd-text); font-size: 15px; padding: 10px 0; transition: color .25s; }
body.rd .courses_curriculum .curriculum_list ul li a:hover { color: var(--rd-cyan); }
body.rd .courses_curriculum .curriculum_list ul li a i { color: var(--rd-cyan); }
body.rd .courses_curriculum .curriculum_list ul li a .text-muted,
body.rd .courses_curriculum .curriculum_list ul li a i.text-muted { color: var(--rd-faint) !important; }

/* --- Ratings block ("Ocene") --- */
body.rd .courses_reviews {
    border: 1px solid var(--rd-line); border-radius: var(--rd-r-lg); overflow: hidden;
    background: var(--rd-ink-2);
}
body.rd .courses_reviews .courses_top_bar {
    margin: 0; padding: 20px 28px; border-bottom: 1px solid var(--rd-line);
    background: var(--rd-tint-2) !important;
}
body.rd .courses_reviews .courses_top_bar .courses_title { padding: 0; }
body.rd .courses_reviews .courses_top_bar .courses_details_title { font: 800 clamp(20px, 2.4vw, 26px)/1.1 var(--rd-display); letter-spacing: -.03em; color: var(--rd-text); }

body.rd .courses_reviews_wrapper { padding: 30px 28px; align-items: stretch !important; gap: 8px 36px; }
body.rd .average_rating {
    width: 230px; flex: 0 0 auto; padding: 8px 36px 8px 0;
    border-right: 1px solid var(--rd-line); border-radius: 0; background: transparent;
}
body.rd .average_rating .rating_value { font: 800 64px/1 var(--rd-display); letter-spacing: -.06em; color: var(--rd-amber); }
body.rd .average_rating .review_star { margin: 12px 0 0; }
body.rd .average_rating .review_star li { margin: 0 2px; }
body.rd .average_rating .review_star li span { color: var(--rd-amber); font-size: 17px; }
body.rd .average_rating p { margin-top: 10px; font-size: 14.5px; font-weight: 600; color: var(--rd-muted); }

body.rd .detailed_rating { width: auto; flex: 1 1 auto; align-self: center; text-align: left !important; }
body.rd .detailed_rating .single_star {
    display: grid; grid-template-columns: 112px minmax(0, 1fr) 52px; align-items: center; gap: 16px; margin-top: 12px;
}
body.rd .detailed_rating .single_star:first-child { margin-top: 0; }
body.rd .detailed_rating .single_star .key { padding: 0; font-size: 14.5px; font-weight: 600; color: var(--rd-muted); white-space: nowrap; }
body.rd .detailed_rating .single_star .bar { display: block; width: auto; height: 8px; border-radius: 999px; overflow: hidden; background: var(--rd-tint-3); }
body.rd .detailed_rating .single_star .bar .full_bar { border-radius: 999px; background: linear-gradient(90deg, var(--rd-amber), color-mix(in srgb, var(--rd-amber) 60%, var(--rd-magenta))); }
body.rd .detailed_rating .single_star .value { width: auto; padding: 0; text-align: right; font-size: 14px; font-weight: 700; color: var(--rd-text); }

body.rd .courses_reviews_comment { padding: 6px 28px 30px; gap: 4px 18px; }
body.rd .courses_reviews_comment .comment_author {
    flex: 0 0 auto; width: 56px; height: 56px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: var(--rd-tint-3); border: 1px solid var(--rd-line-strong);
}
body.rd .courses_reviews_comment .comment_author i { font-size: 22px; color: var(--rd-text); }
body.rd .courses_reviews_comment .comment_author img { width: 56px; height: 56px; object-fit: cover; }
body.rd .courses_reviews_comment .comment_content { padding-left: 0; }
body.rd .courses_reviews_comment .comment_content .author_name { font: 800 17px var(--rd-body); color: var(--rd-text); margin: 2px 0 0; }
body.rd .courses_reviews_comment .comment_content .star li span { color: var(--rd-cyan); font-weight: 700; font-size: 14.5px; }
body.rd .courses_reviews_comment .comment_content .star li i { color: var(--rd-amber); font-size: 14px; }
body.rd .courses_reviews_comment .comment_content p { color: var(--rd-muted); margin-top: 8px; font-size: 15.5px; }

@media (max-width: 767px) {
    body.rd .courses_reviews_wrapper { padding: 22px 20px; }
    body.rd .average_rating { width: 100%; padding: 0 0 22px; border-right: 0; border-bottom: 1px solid var(--rd-line); }
    body.rd .detailed_rating { width: 100%; padding-top: 14px; }
    body.rd .detailed_rating .single_star { grid-template-columns: 96px minmax(0, 1fr) 44px; gap: 12px; }
    body.rd .courses_reviews .courses_top_bar { padding: 16px 20px; }
    body.rd .courses_reviews_comment { padding: 0 20px 24px; }
}

/* --- Plain content blocks ("Dodatno", "Znanje potrebno za upis") --- */
body.rd .single_courses_details ul li { color: var(--rd-muted); font-size: 16px; }
body.rd .single_courses_details ul li i { color: var(--rd-cyan); }
body.rd .single_courses_details .courses_details_title { font: 800 clamp(22px, 2.6vw, 28px)/1.15 var(--rd-display); letter-spacing: -.03em; }
body.rd .single_courses_details p { line-height: 1.7; }

/* --- PayPal buttons are an iframe. A dark page makes the browser paint the frame opaque
       white behind it unless the frame element declares the same colour scheme as its content. --- */
body.rd #smart-button-container,
body.rd #smart-button-container iframe,
body.rd #paypal-button-container,
body.rd #paypal-button-container iframe { color-scheme: normal; background: transparent; }

@media (max-width: 575px) {
    body.rd .blog_details .details_content .blog_content_wrapper[style] { padding: 26px 22px; }
    body.rd .courses_curriculum .courses_top_bar { padding: 16px 20px; }
    body.rd .courses_curriculum .accordion .card .card-header { padding: 16px 20px; }
    body.rd .courses_curriculum .accordion .card .card-body { padding: 4px 20px 22px; }
}

/* ==========================================================================
   COURSE SIDEBAR CARD (kursevi/{slug}): image + price chip + button + facts list
   The page's own inline <style> positions the price tag outside the card (left:-25px, red box);
   the selectors below are more specific, so they win without !important.
   ========================================================================== */
body.rd .courses_details_sidebar {
    background: var(--rd-ink-2); border: 1px solid var(--rd-line); border-radius: var(--rd-r-lg);
    overflow: hidden; box-shadow: 0 40px 80px -40px var(--rd-shadow-strong);
}
body.rd .courses_details_sidebar .courses_sidebar_image { position: relative; }
body.rd .courses_details_sidebar .courses_sidebar_image img { display: block; width: 100%; border-radius: 0; }

/* Price chip sits inside the image corner instead of sticking out of the card */
body.rd .courses_details_sidebar .courses_sidebar_image .price {
    position: absolute; top: 14px; left: 14px; right: auto;
    width: auto; height: auto; padding: 7px 14px; display: inline-flex; align-items: center;
    border-radius: 999px; background: var(--rd-amber); color: #1A1530;
    box-shadow: 0 10px 24px -10px rgba(0, 0, 0, .55);
}
body.rd .courses_details_sidebar .courses_sidebar_image .price .price_wrapper { display: block; }
body.rd .courses_details_sidebar .courses_sidebar_image .price .price_wrapper span { font: 800 14px/1.2 var(--rd-body); color: #1A1530; }
/* Same variants as the course cards: free = cyan, subscription = violet, LIVE = white with a pulsing dot */
body.rd .courses_details_sidebar .courses_sidebar_image .price--free { background: var(--rd-cyan); }
body.rd .courses_details_sidebar .courses_sidebar_image .price--sub { background: var(--rd-violet); }
body.rd .courses_details_sidebar .courses_sidebar_image .price--sub .price_wrapper span { color: #fff; }
body.rd .courses_details_sidebar .courses_sidebar_image .price--live { background: #fff; }
body.rd .courses_details_sidebar .courses_sidebar_image .price--live .price_wrapper span { display: inline-flex; align-items: center; gap: 7px; color: var(--rd-red); }

/* Action area: plain surface, no diamond pointer */
body.rd .courses_details_sidebar .courses_sidebar_title { background: transparent; padding: 22px 24px; border-bottom: 1px solid var(--rd-line); }
body.rd .courses_details_sidebar .courses_sidebar_title::before { display: none; }
body.rd .courses_details_sidebar .courses_sidebar_title .courses_btn { padding: 0; position: static; }
body.rd .courses_details_sidebar .courses_sidebar_title .courses_btn form { margin: 0; }
body.rd .courses_details_sidebar .courses_sidebar_title .courses_btn .main-btn { display: flex; align-items: center; justify-content: center; width: 100%; height: 54px; line-height: 1; font-size: 16px; }

/* Facts list */
body.rd .courses_details_sidebar .courses_sidebar_list { background: transparent; padding: 8px 26px 20px; }
body.rd .courses_details_sidebar .courses_sidebar_list .list { margin: 0; }
body.rd .courses_details_sidebar .courses_sidebar_list .list li {
    display: flex; align-items: center; gap: 4px; padding: 15px 0;
    font-size: 15px; font-weight: 600; color: var(--rd-muted);
    border-bottom: 1px solid var(--rd-line);
}
body.rd .courses_details_sidebar .courses_sidebar_list .list li:last-child { border-bottom: 0; }
body.rd .courses_details_sidebar .courses_sidebar_list .list li i { width: 26px; flex: 0 0 auto; color: var(--rd-cyan); }
body.rd .courses_details_sidebar .courses_sidebar_list .list li span { float: none; margin-left: auto; color: var(--rd-text); font-weight: 700; text-align: right; }

/* ==========================================================================
   BLOG SIDEBAR ("Članci po datumu objave"): legacy colours were dark-on-light
   ========================================================================== */
body.rd .sidebar .sidebar_post,
body.rd .sidebar .sidebar_list,
body.rd .sidebar .sidebar_tag {
    border: 1px solid var(--rd-line); border-radius: var(--rd-r-lg);
    background: var(--rd-ink-2); padding: 28px 28px 30px;
}
body.rd .sidebar .sidebar_title { font: 800 20px/1.2 var(--rd-display); letter-spacing: -.03em; color: var(--rd-text); }
body.rd .single_sidebar_post .post_image img { border-radius: var(--rd-r-sm); border: 1px solid var(--rd-line); object-fit: cover; }
body.rd .single_sidebar_post .post_content { padding-left: 16px; }
body.rd .single_sidebar_post .post_content .title a {
    display: block; font: 700 15px/1.4 var(--rd-body); letter-spacing: -.005em;
    color: var(--rd-text); transition: color .25s;
}
body.rd .single_sidebar_post .post_content .title a:hover { color: var(--rd-cyan); }
body.rd .single_sidebar_post .post_content .date { margin-top: 4px; font-size: 13px; font-weight: 600; color: var(--rd-muted); }
body.rd .archives_list li a { color: var(--rd-muted); }
body.rd .archives_list li a:hover { color: var(--rd-text); }
body.rd .archives_list li a i { color: var(--rd-cyan); }
body.rd .archives_tag li a { color: var(--rd-text); background: var(--rd-tint-2); border: 1px solid var(--rd-line-strong); border-radius: 999px; }
body.rd .archives_tag li a:hover { background: var(--rd-text); color: var(--rd-ink); }
@media (max-width: 575px) { body.rd .sidebar .sidebar_post { padding: 22px 20px; } }