/* ─────────────────────────────────────────────────────────────
   IOCP — WebTV custom skin
   Re-skins the existing osahan/Bootstrap markup to match the
   IOCP editorial design system (Fraunces + Manrope + moss greens
   on warm paper). All original selectors are preserved so the
   Razor views render unchanged in structure and position.
   Source of truth: SITE.IOCP/IOCPNet/IOCP/wwwroot/css/site.css
   ───────────────────────────────────────────────────────────── */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,400;0,9..144,500;0,9..144,600;1,9..144,400;1,9..144,500&family=Manrope:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
    --moss: #006726;
    --moss-deep: #9ABD9E;
    --moss-mid: #1a7a3d;
    --moss-soft: #e3eee5;
    --moss-tint: #f1f6f0;
    --moss-line: #c8dccc;
    --bone: #f6f1e6;
    --paper: #fdfaf3;
    --pure: #ffffff;
    --ink: #1a2a1d;
    --ink-soft: #4a5a4d;
    --muted: #8a958c;
    --line: #e6dfd0;
    --line-soft: #efe9da;
    --gold: #b08a3e;
    --gold-soft: #d9bf80;
    --display: 'Fraunces', 'Cormorant Garamond', Georgia, serif;
    --body: 'Manrope', 'Helvetica Neue', system-ui, sans-serif;
    --mono: 'JetBrains Mono', 'IBM Plex Mono', ui-monospace, monospace;
    --rule: 1px solid var(--line);
    --rule-moss: 1px solid var(--moss-line);
    --shadow-sm: 0 1px 0 rgba(255,255,255,.7) inset, 0 2px 6px rgba(26,42,29,.04);
    --shadow: 0 8px 24px -16px rgba(0,103,38,.18), 0 2px 6px rgba(26,42,29,.05);
    --shadow-lg: 0 24px 50px -22px rgba(0,103,38,.22), 0 4px 14px rgba(26,42,29,.06);
    --warn: #b78a2a;
    --warn-soft: #f5ecd6;
    --danger: #a13a2a;
    --danger-soft: #f5e2dd;
    --iocp-navy: var(--moss-deep);
    --iocp-navy-mid: var(--moss);
    --iocp-teal: var(--moss);
    --iocp-teal-light: var(--moss-mid);
    --iocp-cream: var(--bone);
    --iocp-white: var(--paper);
    --iocp-gray: var(--muted);
    --iocp-gray-light: var(--line);
    --iocp-text: var(--ink);
    --iocp-danger: var(--danger);
    --iocp-warning: var(--warn);
    --iocp-shadow: var(--shadow);
    --iocp-shadow-lg: var(--shadow-lg);
    --input-padding-x: .9rem;
    --input-padding-y: .9rem;
}

/* ─── BASE ──────────────────────────────────────────────────── */
*, *::before, *::after {
    box-sizing: border-box;
}

*, a:hover {
    text-decoration: none !important;
}

html {
    position: relative;
    min-height: 100%;
    scroll-behavior: smooth;
}

html, body {
    background: var(--bone) !important;
    background-image: none !important;
    background-color: var(--bone) !important;
}

body {
    color: var(--ink) !important;
    font-family: var(--body) !important;
    font-size: 16px;
    font-weight: 400;
    height: 100%;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: "ss01", "ss02", "cv11";
    isolation: isolate;
}

    body::before {
        content: '';
        position: fixed;
        inset: 0;
        pointer-events: none;
        z-index: -1;
        opacity: .32;
        background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.06 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
    }

ul {
    list-style-type: none !important;
}

a {
    color: var(--moss);
    transition: color .2s;
}

    a:hover {
        color: var(--moss-deep);
    }

::selection {
    background: var(--moss);
    color: var(--paper);
}

h1, h2, h3, h4, h5, h6,
.main-title h5,
.single-video-title h2,
.modal-title,
.section-title {
    font-family: var(--display);
    font-weight: 500;
    color: var(--ink);
    letter-spacing: -.01em;
    margin: 0;
}

.azul {
    font-family: var(--display);
    font-weight: 500;
    color: var(--moss-deep) !important;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: border-color .2s;
}

    .azul:hover {
        border-bottom-color: var(--moss);
    }

hr {
    border-top: 1px solid var(--line);
}

.w-100 {
    width: 100% !important
}

.w-90 {
    width: 90% !important
}

.w-80 {
    width: 80% !important
}

.w-70 {
    width: 70% !important
}

.w-60 {
    width: 60% !important
}

.w-50 {
    width: 50% !important
}

.w-40 {
    width: 40% !important
}

.w-30 {
    width: 30% !important
}

.w-20 {
    width: 20% !important
}

.w-10 {
    width: 10% !important
}

.mg-0 {
    margin: 0 !important
}

.pd-0 {
    padding: 0 !important
}

.mg-bt-0 {
    margin-bottom: 0 !important
}

.mg-bt-10 {
    margin-bottom: 10px !important
}

.mg-bt-20 {
    margin-bottom: 20px !important
}

.mg-bt-30 {
    margin-bottom: 30px !important
}

.mg-bt-40 {
    margin-bottom: 40px !important
}

.mg-bt-50 {
    margin-bottom: 50px !important
}

.mg-tp-0 {
    margin-top: 0 !important
}

.mg-tp-10 {
    margin-top: 10px !important
}

.mg-tp-20 {
    margin-top: 20px !important
}

.mg-tp-30 {
    margin-top: 30px !important
}

.mg-tp-40 {
    margin-top: 40px !important
}

.mg-tp-50 {
    margin-top: 50px !important
}

.mg-tp-100 {
    margin-top: 100px
}

.mg-rg-0 {
    margin-right: 0 !important
}

.mg-rg-10 {
    margin-right: 10px !important
}

.mg-rg-20 {
    margin-right: 20px !important
}

.mg-rg-30 {
    margin-right: 30px !important
}

.mg-rg-40 {
    margin-right: 40px !important
}

.mg-rg-50 {
    margin-right: 50px !important
}

.mg-lf-0 {
    margin-left: 0 !important
}

.mg-lf-10 {
    margin-left: 10px !important
}

.mg-lf-15 {
    margin-left: 15px !important
}

.mg-lf-20 {
    margin-left: 20px !important
}

.mg-lf-30 {
    margin-left: 30px !important
}

.mg-lf-40 {
    margin-left: 40px !important
}

.mg-lf-50 {
    margin-left: 50px !important
}

.mg-10 {
    margin: 10px !important
}

.mg-20 {
    margin: 20px !important
}

.mg-30 {
    margin: 30px !important
}

.mg-40 {
    margin: 40px !important
}

.mg-50 {
    margin: 50px !important
}

.pd-tp-0 {
    padding-top: 0 !important
}

.pd-tp-10 {
    padding-top: 10px !important
}

.pd-tp-20 {
    padding-top: 20px !important
}

.pd-tp-30 {
    padding-top: 30px !important
}

.pd-tp-40 {
    padding-top: 40px !important
}

.pd-tp-50 {
    padding-top: 50px !important
}

.pd-bt-0 {
    padding-bottom: 0 !important
}

.pd-bt-10 {
    padding-bottom: 10px !important
}

.pd-bt-15 {
    padding-bottom: 15px !important
}

.pd-bt-20 {
    padding-bottom: 20px !important
}

.pd-bt-30 {
    padding-bottom: 30px !important
}

.pd-bt-40 {
    padding-bottom: 40px !important
}

.pd-bt-50 {
    padding-bottom: 50px !important
}

.pd-lf-0 {
    padding-left: 0 !important
}

.pd-lf-10 {
    padding-left: 10px !important
}

.pd-lf-15 {
    padding-left: 15px !important
}

.pd-lf-20 {
    padding-left: 20px !important
}

.pd-lf-30 {
    padding-left: 30px !important
}

.pd-lf-40 {
    padding-left: 40px !important
}

.pd-lf-50 {
    padding-left: 50px !important
}

.pd-rg-0 {
    padding-right: 0 !important
}

.pd-rg-10 {
    padding-right: 10px !important
}

.pd-rg-15 {
    padding-right: 15px !important
}

.pd-rg-20 {
    padding-right: 20px !important
}

.pd-rg-30 {
    padding-right: 30px !important
}

.pd-rg-40 {
    padding-right: 40px !important
}

.pd-rg-50 {
    padding-right: 50px !important
}

.pd-10 {
    padding: 10px !important
}

.pd-20 {
    padding: 20px !important
}

.pd-30 {
    padding: 30px !important
}

.pd-40 {
    padding: 40px !important
}

.pd-50 {
    padding: 50px !important
}

.fs-12 {
    font-size: 12px !important
}

.fs-14 {
    font-size: 14px !important
}

.fs-16 {
    font-size: 16px !important
}

.fs-18 {
    font-size: 18px !important
}

.fs-20 {
    font-size: 20px !important
}

.fs-22 {
    font-size: 22px !important
}

.fs-24 {
    font-size: 24px !important
}

.fs-26 {
    font-size: 26px !important
}

.fs-28 {
    font-size: 28px !important
}

.fs-30 {
    font-size: 30px !important
}

.fs-32 {
    font-size: 32px !important
}

.fs-100 {
    font-size: 100%
}

.small {
    font-size: small !important
}

.negrito {
    font-weight: bold !important
}

.normal {
    font-weight: normal !important
}

.fw-100 {
    font-weight: 100 !important
}

.fw-200 {
    font-weight: 200 !important
}

.fw-300 {
    font-weight: 300 !important
}

.fw-400 {
    font-weight: 400 !important
}

.fw-500 {
    font-weight: 500 !important
}

.fw-600 {
    font-weight: 600 !important
}

.fw-700 {
    font-weight: 700 !important
}

.fw-800 {
    font-weight: 800 !important
}

.fw-900 {
    font-weight: 900 !important
}

.op-0 {
    opacity: 0 !important
}

.op-10 {
    opacity: .1 !important
}

.op-20 {
    opacity: .2 !important
}

.op-30 {
    opacity: .3 !important
}

.op-40 {
    opacity: .4 !important
}

.op-50 {
    opacity: .5 !important
}

.op-60 {
    opacity: .6 !important
}

.op-70 {
    opacity: .7 !important
}

.op-80 {
    opacity: .8 !important
}

.op-90 {
    opacity: .9 !important
}

.op-100 {
    opacity: 1 !important
}

.esconder {
    display: none
}

.fixo {
    position: fixed;
    z-index: 9999
}

.ln-normal {
    line-height: normal !important
}

.border-none {
    border: 0 !important;
    box-shadow: none
}

.sublinhado {
    text-decoration: underline !important
}

.pointer {
    cursor: pointer !important
}

.radius-3 {
    border-radius: 2px
}

/* Brand color helpers (Portuguese names — used in markup) */
.branco {
    color: var(--paper) !important
}

.preto {
    color: var(--ink) !important
}

.verde {
    color: var(--moss)
}

.cinza {
    color: var(--muted)
}

.vermelho {
    color: var(--danger)
}

/* ─── LAYOUT FOUNDATIONS ───────────────────────────────────── */
#wrapper {
    display: flex;
}

    #wrapper #content-wrapper {
        overflow-x: hidden;
        width: 100%;
        background: var(--bone) !important;
    }

        #wrapper #content-wrapper .container-fluid {
            padding: 30px 30px 30px 255px;
        }

.sidebar-toggled #wrapper #content-wrapper .container-fluid {
    padding: 30px 30px 30px 121px;
}

.single-channel-page {
    padding: 0 0 0 225px;
}

.sidebar-toggled .single-channel-page {
    padding: 0 0 0 90px;
}

.single-channel-page .container-fluid {
    padding: 30px !important;
}

body.fixed-nav #content-wrapper {
    margin-top: 56px;
    padding-left: 90px;
}

body.fixed-nav.sidebar-toggled #content-wrapper {
    padding-left: 0;
}

@media (min-width: 815px) {
    body.fixed-nav #content-wrapper {
        padding-left: 225px;
    }

    body.fixed-nav.sidebar-toggled #content-wrapper {
        padding-left: 90px;
    }
}

.sticky-top {
    position: sticky;
    top: 0;
    z-index: 99;
}

/* ─── SIDEBAR — paper canvas, moss left-border on active ──── */
.sidebar {
    width: 90px !important;
    background: var(--paper) !important;
    background-image: none !important;
    border-right: var(--rule) !important;
    min-height: 100%;
    z-index: 9;
    padding: 2px 0;
    position: fixed;
}

    .sidebar .nav-item:last-child {
        margin-bottom: 1rem;
    }

    .sidebar .nav-item .nav-link {
        color: var(--ink-soft) !important;
        font-family: var(--body);
        font-size: .82rem;
        font-weight: 500;
        letter-spacing: .04em;
        padding: 14px 14px !important;
        text-align: center;
        width: 90px;
        border-left: 2px solid transparent;
        transition: background .25s, color .25s, border-color .25s;
        text-transform: uppercase;
    }

        .sidebar .nav-item .nav-link:hover,
        .sidebar .nav-item.active .nav-link {
            background-color: var(--moss-tint) !important;
            color: var(--moss-deep) !important;
            border-left-color: var(--moss);
        }

        .sidebar .nav-item .nav-link .fas,
        .sidebar .nav-item .nav-link i {
            color: var(--muted) !important;
            transition: color .2s;
        }

        .sidebar .nav-item .nav-link:hover .fas,
        .sidebar .nav-item .nav-link:hover i,
        .sidebar .nav-item.active .nav-link .fas,
        .sidebar .nav-item.active .nav-link i {
            color: var(--moss) !important;
        }

        .sidebar .nav-item .nav-link span {
            display: inline;
            font-size: .82rem;
            margin: 0 0 0 11px;
            text-transform: none;
            letter-spacing: 0;
        }

    .sidebar .nav-item .dropdown-menu {
        position: absolute !important;
        transform: none !important;
        left: calc(90px + 0rem) !important;
        margin: 0;
    }

        .sidebar .nav-item .dropdown-menu.dropup {
            bottom: 0;
            top: auto !important;
        }

    .sidebar .nav-item.dropdown .dropdown-toggle::after {
        display: none;
    }

    .sidebar.toggled {
        width: 0 !important;
        overflow: hidden;
    }

@media (min-width: 815px) {
    .sidebar {
        height: 100%;
        overflow: auto;
        position: fixed;
        width: 225px !important;
    }

        .sidebar .nav-item .nav-link {
            display: block;
            width: 225px;
            text-align: left;
            padding: 1rem 1.25rem !important;
            font-size: .8rem;
        }

            .sidebar .nav-item .nav-link span {
                display: inline;
                font-size: .9rem;
                margin: 0 0 0 6px;
                text-transform: none;
                letter-spacing: 0;
                font-weight: 500;
            }

        .sidebar .nav-item .dropdown-menu {
            position: static !important;
            margin: 0 1rem;
            top: 0;
        }

        .sidebar .nav-item.dropdown .dropdown-toggle::after {
            display: block;
        }

        .sidebar.toggled {
            overflow: visible;
            width: 90px !important;
        }

            .sidebar.toggled .nav-item .nav-link {
                text-align: center;
                padding: .85rem 1rem !important;
                width: 90px;
            }

                .sidebar.toggled .nav-item .nav-link span {
                    font-size: .65rem;
                    display: block;
                    margin: 0;
                }

            .sidebar.toggled .nav-item .dropdown-menu {
                position: absolute !important;
                left: calc(90px + .5rem) !important;
                margin: 0;
            }
}

.sidebar.fixed-top {
    top: 56px;
    height: calc(100vh - 56px);
    overflow-y: auto;
}

.channel-sidebar-list {
    border-top: var(--rule);
    margin: 6px 0 0;
    padding: 7px 14px;
    background-color: var(--moss-tint);
}

    .channel-sidebar-list h6 {
        font-family: var(--mono);
        color: var(--moss);
        font-size: .68rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: .18em;
        margin: 9px 0 8px;
    }

    .channel-sidebar-list ul {
        list-style: none;
        margin: 0;
        padding: 0;
    }

        .channel-sidebar-list ul li img {
            border-radius: 50%;
            height: 28px;
            width: 28px;
            margin: 0 14px 0 0;
        }

    .channel-sidebar-list li a {
        color: var(--ink);
        display: inline-block;
        padding: 6px 0;
        width: 100%;
        font-size: .88rem;
        text-align: left;
    }

        .channel-sidebar-list li a .badge {
            float: right;
            margin: 7px 0 0;
        }

/* Scroll-to-top — moss circle */
.scroll-to-top {
    background: var(--moss) !important;
    background-image: none !important;
    border-radius: 50% !important;
    bottom: 16px;
    color: var(--paper) !important;
    display: none;
    height: 46px;
    line-height: 42px;
    position: fixed;
    right: 15px;
    text-align: center;
    width: 46px;
    z-index: 999;
    box-shadow: 0 12px 28px -10px rgba(0,103,38,.45);
    transition: background .25s, transform .25s;
}

    .scroll-to-top:focus, .scroll-to-top:hover {
        color: var(--paper) !important;
        background: var(--moss-deep) !important;
        transform: translateY(-2px);
    }

    .scroll-to-top i {
        font-weight: 800;
    }

/* ─── TOP NAV — frosted moss-deep bar, paper logo ──────────── */
.osahan-nav,
.navbar.bg-white,
nav.navbar-light.bg-white,
.osahan-nav.bg-white {
    background: var(--moss-deep) !important;
    background-image: radial-gradient(ellipse 60% 100% at 75% 50%, rgba(0,103,38,.28) 0%, transparent 60%) !important;
    background-color: var(--moss-deep) !important;
    border-bottom: 1px solid rgba(255,255,255,.08) !important;
    box-shadow: 0 1px 0 rgba(0, 0, 0, .15);
    padding: 0;
}

.osahan-navbar-search {
    margin-right: 24px !important;
}

    .osahan-navbar-search .form-control {
        background: rgba(255, 255, 255, .07) !important;
        border: 1px solid rgba(255, 255, 255, .12) !important;
        color: var(--paper) !important;
        border-radius: 2px !important;
        font-family: var(--body);
        font-size: .85rem;
        max-width: 307px !important;
        width: 307px !important;
    }

        .osahan-navbar-search .form-control::placeholder {
            color: rgba(255, 255, 255, .55);
            font-style: italic;
            font-family: var(--display);
            font-weight: 400;
        }

        .osahan-navbar-search .form-control:focus {
            border-color: var(--moss-mid) !important;
            background: rgba(255,255,255,.12) !important;
            box-shadow: none !important;
        }

    .osahan-navbar-search .btn {
        background: var(--moss-mid) !important;
        background-image: none !important;
        border: none;
        color: var(--paper) !important;
        font-size: .85rem;
        padding: 0 18px;
        border-radius: 2px;
        transition: background .2s;
    }

        .osahan-navbar-search .btn:hover {
            background: var(--moss) !important;
        }

.osahan-right-navbar {
    margin: 0 7px 0 0;
}

    .osahan-right-navbar .nav-link {
        padding: 17px 13px !important;
        position: relative;
        color: rgba(255, 255, 255, .85) !important;
        font-family: var(--body);
        font-weight: 500;
        font-size: .8rem;
        letter-spacing: .04em;
        text-transform: uppercase;
        transition: color .2s;
    }

        .osahan-right-navbar .nav-link:hover {
            color: var(--moss-soft) !important;
        }

.osahan-nav .navbar-brand {
    padding: 0;
}

    .osahan-nav .navbar-brand img {
        max-height: 44px;
        filter: brightness(0) invert(1);
        opacity: .94;
        transition: opacity .25s, transform .25s;
    }

    .osahan-nav .navbar-brand:hover img {
        opacity: 1;
        transform: translateY(-1px);
    }

.osahan-nav .btn-link {
    color: rgba(255, 255, 255, .85) !important;
    transition: color .2s;
}

    .osahan-nav .btn-link:hover {
        color: var(--moss-soft) !important;
    }

/* User initials avatar — moss circle, mono initials */
a#userDropdown,
.user-dropdown-link {
    display: inline-flex;
    background-color: var(--moss-mid) !important;
    margin: 8px;
    border-radius: 50%;
    height: 40px;
    width: 40px;
    color: var(--paper) !important;
    text-align: center;
    vertical-align: middle;
    padding: 0 !important;
    font-size: 1rem;
    font-weight: 600;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255,255,255,.18);
    transition: background .2s, transform .2s;
}

    a#userDropdown:hover,
    .user-dropdown-link:hover {
        background-color: var(--moss-soft) !important;
        color: var(--moss-deep) !important;
        transform: translateY(-1px);
    }

    .user-dropdown-link img {
        border-radius: 50%;
        height: 30px;
        margin: -9px 2px -6px 0;
        width: 30px;
    }

.iniciais {
    margin: 0;
    width: 100%;
    color: inherit;
    font-family: var(--mono);
    font-weight: 600;
    font-size: .82rem;
    letter-spacing: .06em;
}

.navbar-nav .form-inline .input-group {
    width: 100%;
}

.navbar-nav .nav-item.dropdown .dropdown-toggle::after {
    width: 1rem;
    text-align: center;
    float: right;
    vertical-align: 0;
    border: 0;
    font-weight: 900;
    content: '\f105';
    font-family: 'Font Awesome 5 Free';
}

.navbar-nav .nav-item.dropdown.show .dropdown-toggle::after {
    content: '\f107';
}

.navbar-nav .nav-item.dropdown.no-arrow .dropdown-toggle::after {
    display: none;
}

.navbar-nav .nav-item .nav-link:focus {
    outline: none;
}

.navbar-nav .nav-item .nav-link .badge {
    border: none !important;
    border-radius: 100px;
    font-size: 11px;
    font-weight: 600;
    height: 16px;
    line-height: 11px;
    min-width: 16px;
    position: absolute;
    text-align: center;
    top: 10px;
    right: 0;
}

@media (min-width: 815px) {
    .navbar-nav .form-inline .input-group {
        width: auto;
    }
}

button#sidebarToggle {
    font-size: 1.2rem;
}

/* Language flags */
.language-flag {
    max-width: 25px;
    vertical-align: middle;
    margin: 0 2px;
    border-radius: 2px;
    box-shadow: 0 1px 3px rgba(0,0,0,.2);
    transition: transform .2s;
}

    .language-flag:hover {
        transform: translateY(-1px);
    }

/* ─── DROPDOWN MENUS — paper sheets ────────────────────────── */
.dropdown-menu {
    border: var(--rule);
    border-radius: 2px;
    background: var(--paper);
    box-shadow: var(--shadow-lg);
    padding: .5rem 0;
    margin: 0;
}

    .dropdown-menu .dropdown-item,
    .dropdown-item {
        color: var(--ink);
        font-family: var(--body);
        font-size: .88rem;
        padding: .6rem 1.2rem !important;
        transition: background .2s, color .2s, padding-left .2s;
    }

        .dropdown-item:hover,
        .dropdown-item.active,
        .dropdown-item:active {
            background-color: var(--moss-tint) !important;
            color: var(--moss-deep) !important;
            text-decoration: none;
            padding-left: 1.5rem !important;
        }

.dropdown-divider {
    border-top: 1px solid var(--line-soft);
    margin: .35rem 0;
}

.dropdown-header {
    color: var(--moss);
    font-family: var(--mono);
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .18em;
    padding: .5rem 1.2rem;
}

/* ─── CART ─────────────────────────────────────────────────── */
.carrinho, .carrinho li {
    width: 100%;
    text-align: right;
}

    .carrinho i {
        color: var(--moss-soft);
        font-size: 22px;
        border-left: 1px solid rgba(255, 255, 255, .15);
        padding-left: 12px;
        margin-right: 6px;
    }

.carrinho-interno {
    padding: 1rem;
    min-width: 320px;
    max-width: 80%;
}

    .carrinho-interno i {
        font-size: 16px;
        border: 0;
        color: var(--muted);
    }

    .carrinho-interno a.dropdown-item {
        font-size: .88rem;
        color: var(--ink);
        display: contents;
    }

span.valor-carrinho {
    margin-left: 10px;
    padding-left: 10px;
    border-left: 1px solid var(--line);
    float: right;
    font-family: var(--mono);
    font-weight: 500;
    color: var(--moss);
}

.lista-carrinho {
    margin-bottom: 10px;
}

    .lista-carrinho li {
        text-align: left;
    }

    .lista-carrinho td:first-child {
        width: 10%;
    }

    .lista-carrinho td:nth-child(2) {
        width: 64%;
    }

    .lista-carrinho td {
        vertical-align: middle;
        line-height: normal;
        padding: 10px 5px;
        font-family: var(--body);
    }

    .lista-carrinho tr {
        border-bottom: 1px solid var(--line-soft);
    }

.carrinho {
    display: none !important;
}

/* ─── FOOTER — paper baseline with mono small caps ─────────── */
footer {
    background: var(--paper);
    color: var(--ink-soft);
    padding: 3rem 1.5rem !important;
    border-top: var(--rule);
    position: relative;
    z-index: 2;
}

    footer p, footer small {
        color: var(--ink-soft) !important;
        font-family: var(--body);
        font-size: .85rem;
    }

    footer .font-weight-light {
        font-family: var(--mono);
        font-weight: 500 !important;
        font-size: .68rem;
        text-transform: uppercase;
        letter-spacing: .18em;
        color: var(--muted) !important;
    }

    footer a {
        color: var(--moss);
        transition: color .2s;
    }

        footer a:hover {
            color: var(--moss-deep);
        }

    footer hr {
        border: 0;
        height: 1px;
        background: linear-gradient(to right, transparent, var(--line) 12%, var(--line) 88%, transparent);
        margin: .8rem 0 1.2rem;
    }

    footer .logo_rodape {
        filter: grayscale(20%);
        opacity: .82;
    }

    footer.sticky-footer {
        background-color: var(--paper);
        padding: 15px;
        margin-left: 225px;
    }

        footer.sticky-footer .copyright {
            line-height: 1;
            font-size: .8rem;
        }

body.sidebar-toggled footer.sticky-footer {
    width: 100%;
}

@media (min-width: 815px) {
    body.sidebar-toggled footer.sticky-footer {
        width: calc(100% - 90px);
        margin-left: 90px;
    }
}

/* ─── SECTIONS & TITLES ────────────────────────────────────── */
.video-block.section-padding {
    background: transparent;
    padding: 3.5rem 1rem 2rem;
}

.video-block .mb-3 {
    margin-bottom: 30px !important;
}

.main-title {
    display: flex;
    align-items: baseline;
    margin-bottom: 1.4rem;
    padding-bottom: 1rem;
    border-bottom: var(--rule);
    position: relative;
}

    .main-title::before {
        content: '';
        position: absolute;
        left: 0;
        bottom: -1px;
        width: 64px;
        height: 2px;
        background: var(--moss);
    }

    .main-title h5 {
        font-family: var(--display);
        font-size: 1.55rem;
        font-weight: 500;
        color: var(--ink);
        margin: 0;
        display: inline-flex;
        align-items: center;
        gap: .7rem;
        letter-spacing: -.015em;
        line-height: 1.2;
    }

        .main-title h5 i,
        .main-title h5 .text-muted {
            color: var(--moss) !important;
            opacity: 1;
        }

        .main-title h5 i {
            font-size: 1.1rem;
        }

    .main-title > h6 {
        margin: 0 0 16px;
    }

/* The Razor template uses .video-block > hr right after .main-title.
   We've replaced the visual rule with the .main-title underline above
   — collapse the legacy hr so the spacing reads correctly. */
.video-block .main-title + hr,
.video-block hr {
    border: 0;
    height: 0;
    margin: 0 0 .5rem;
}

.sub-title h6 {
    font-family: var(--mono);
    color: var(--moss);
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .22em;
    font-weight: 500;
    margin: 1.8rem 0 1rem;
    display: inline-flex;
    align-items: center;
    gap: .8rem;
}

    .sub-title h6::before {
        content: '';
        display: inline-block;
        width: 32px;
        height: 1px;
        background: var(--moss);
    }

.right-action-link .fa {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 50%;
    box-shadow: var(--shadow-sm);
    display: inline-block;
    height: 22px;
    line-height: 21px;
    margin: 0 0 0 3px;
    text-align: center;
    width: 22px;
    color: var(--moss);
}

/* ─── CHANNELS CARD (Lives & Modules on Home) ──────────────── */
.channels-card {
    background: var(--paper);
    border: var(--rule);
    border-radius: 2px;
    padding: 0;
    overflow: hidden;
    transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    position: relative;
    text-align: center;
}

    .channels-card::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 3px;
        background: var(--moss);
        transform: scaleX(0);
        transform-origin: left center;
        transition: transform .45s ease;
        z-index: 2;
    }

    .channels-card:hover {
        transform: translateY(-6px);
        box-shadow: var(--shadow-lg);
        border-color: var(--moss-line);
        cursor: pointer;
    }

        .channels-card:hover::before {
            transform: scaleX(1);
        }

    .channels-card > a > img,
    .channels-card > a > img.img-fluid {
        width: 100%;
        display: block;
    }

.channels-card-body {
    padding: 1.2rem 1.3rem 1.4rem;
    flex: 1;
    text-align: left;
    background: linear-gradient(to bottom, var(--moss-tint) 0%, var(--paper) 100%);
    border-top: 1px solid var(--moss-line);
}

.channels-title a {
    font-family: var(--display);
    color: var(--ink) !important;
    font-size: 1.1rem;
    line-height: 1.3;
    font-weight: 500;
    text-decoration: none;
    display: block;
    margin-bottom: .6rem;
    letter-spacing: -.01em;
    transition: color .2s;
}

    .channels-title a:hover {
        color: var(--moss) !important;
    }

.channels-view {
    font-family: var(--mono);
    color: var(--ink-soft);
    font-size: .76rem;
    line-height: 1.7;
    letter-spacing: .02em;
}

    .channels-view i {
        color: var(--moss);
        margin-right: .35rem;
    }

.modulos-home .channels-view {
    font-size: .76rem;
}

.channels-card-image .btn {
    font-size: .7rem;
    padding: .25rem .8rem;
    border-radius: 2px;
}

    .channels-card-image .btn strong {
        margin: 0 0 0 5px;
    }

.channels-card-image-btn {
    margin: 3px 0 7px;
}

/* The Razor templates render a top-aligned status badge above the
   channels-card image. Push it inside as a corner ribbon for a more
   editorial feel. Excludes .channels-card-body, which also carries
   .text-left in markup. */
.channels-card > .text-left:not(.channels-card-body),
.channels-card > .text-right:not(.channels-card-body) {
    position: absolute;
    top: .65rem;
    left: .65rem;
    z-index: 3;
    margin: 0 !important;
}

.channels-card > .text-right:not(.channels-card-body) {
    left: auto;
    right: .65rem;
    display: flex;
    align-items: center;
    gap: .35rem;
}

/* live indicator pulse — burgundy, not bootstrap red */
.live-circle {
    display: inline-block;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--danger);
    box-shadow: 0 0 0 0 rgba(161, 58, 42, .55);
    animation: iocp-pulse 1.6s infinite;
    vertical-align: middle;
    margin-left: .25rem;
}

@keyframes iocp-pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(161, 58, 42, .55);
    }

    70% {
        box-shadow: 0 0 0 10px rgba(161, 58, 42, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(161, 58, 42, 0);
    }
}

/* ─── VIDEO CARD (Home thumbs, Module list, Watch playlist) ─ */
.video-card {
    background: var(--paper);
    border: var(--rule);
    border-radius: 2px;
    overflow: hidden;
    transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
    box-shadow: var(--shadow-sm);
    cursor: pointer;
    position: relative;
}

    .video-card::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 2px;
        background: var(--moss);
        transform: scaleX(0);
        transform-origin: left center;
        transition: transform .4s ease;
        z-index: 3;
    }

    .video-card:hover {
        transform: translateY(-4px);
        box-shadow: var(--shadow-lg);
        border-color: var(--moss-line);
    }

        .video-card:hover::before {
            transform: scaleX(1);
        }

.video-card-image {
    border-radius: 0;
    overflow: hidden;
    position: relative;
    background: var(--ink);
}

    .video-card-image img {
        width: 100%;
        display: block;
    }

.time {
    background: rgba(26, 42, 29, .92);
    border-radius: 2px;
    bottom: 8px;
    right: 8px;
    color: var(--paper);
    font-family: var(--mono);
    font-size: .7rem;
    font-weight: 500;
    opacity: .92;
    padding: .2rem .55rem;
    position: absolute;
    letter-spacing: .04em;
}

.video-card:hover .time {
    opacity: 1;
}

.video-card-image .badge.badge-dark {
    position: absolute;
    bottom: 8px;
    right: 8px;
    background: rgba(26, 42, 29, .92) !important;
    color: var(--paper) !important;
    font-family: var(--mono);
    font-size: .68rem;
    padding: .2rem .55rem;
    border-radius: 2px;
    font-weight: 500;
    letter-spacing: .04em;
    text-transform: none;
}

.play-icon {
    opacity: 0;
    position: absolute;
    display: none !important;
}

    .play-icon .fas {
        bottom: 0;
        left: 0;
        right: 0;
        top: 0;
        height: 56px;
        width: 56px;
        margin: auto;
        position: absolute;
        color: var(--paper);
        text-shadow: 0 4px 16px rgba(0, 0, 0, .35);
    }

.video-card:hover .play-icon {
    background: rgba(0, 61, 22, .45);
    backdrop-filter: blur(2px);
    bottom: 0;
    left: 0;
    right: 0;
    top: 0;
    color: var(--paper);
    font-size: 44px;
    opacity: 1;
    position: absolute;
    text-align: center;
    transition-duration: .4s;
    display: block !important;
}

.video-card-body {
    padding: 1rem 1.1rem 1.2rem;
    background: var(--paper);
}

    .video-card-body .stars,
    .video-card-body .rating {
        color: var(--gold);
        font-size: .82rem;
        margin-bottom: .4rem;
        letter-spacing: .08em;
    }

        .video-card-body .stars i,
        .stars i {
            color: var(--gold) !important;
        }

    .video-card-body .video-title a {
        font-family: var(--display);
        color: var(--ink);
        font-size: 1rem;
        font-weight: 500;
        line-height: 1.3;
        text-decoration: none;
        letter-spacing: -.005em;
        transition: color .2s;
    }

        .video-card-body .video-title a:hover {
            color: var(--moss);
        }

.video-title {
    margin-bottom: 6px;
}

.video-page {
    font-family: var(--body);
    font-size: .78rem;
    color: var(--ink-soft);
    line-height: 1.5;
}

    .video-page p {
        margin-bottom: 0;
    }

.video-view {
    font-family: var(--mono);
    color: var(--muted);
    font-size: .72rem;
    font-weight: 500;
    margin: .4rem 0 0;
    cursor: default;
    letter-spacing: .04em;
}

.video-card-body .video-page p {
    margin-bottom: 0;
}

.video-card-body .video-view i,
.video-view i {
    color: var(--moss);
    margin: 0 .25rem;
}

.aquisicao-individuais .video-view {
    margin-bottom: 0;
}

.aquisicao-individuais h3 {
    font-family: var(--display);
    font-size: 1.05rem;
    font-weight: 500;
    color: var(--ink);
}

.aquisicao-individuais button {
    margin-bottom: 5px;
}

.video-card i.fas.fa-clock {
    color: var(--muted) !important;
}

/* video-card-list — used on Module index, Watch playlist */
.video-card-list {
    background: transparent;
    box-shadow: none;
    border: none;
    display: inline-block;
    margin-bottom: .2rem;
    width: 100%;
    border-radius: 0;
}

    .video-card-list::before {
        display: none;
    }

    .video-card-list:hover {
        background: var(--moss-tint);
        transform: none;
        box-shadow: none;
    }

    .video-card-list .video-card-image {
        float: left;
        height: 77px;
        margin: 0 12px 0 0;
        width: 122px;
        border-radius: 2px;
    }

.coluna-play .video-card-list .video-card-image {
    float: left;
    height: 77px;
    margin: 0 12px 15px 0;
    width: 122px;
}

.aquisicao .video-card-list .video-card-image {
    float: left;
    height: auto;
    margin: 0 12px 20px 0;
    width: 100%;
}

.resumo-compra.aquisicao .video-card-list .video-card-image {
    float: left;
    margin: 0 12px 10px 0;
    width: 100%;
}

.resumo-compra .video-card {
    min-height: 270px;
}

.aquisicao .video-card-image img {
    cursor: default !important;
}

.aquisicao .video-title > div {
    font-family: var(--display);
    font-size: 1rem;
    font-weight: 500;
    cursor: default;
    line-height: 1.4;
    color: var(--ink);
}

.aquisicao h2 {
    font-family: var(--display);
    font-size: 1.5rem;
    color: var(--ink);
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: -.015em;
    margin-bottom: 8px;
}

.aquisicao .video-card-list {
    padding: 8px;
}

.aquisicao .stars {
    display: contents;
}

.video-card-list .video-card-body {
    padding: 0;
    background: transparent;
}

    .video-card-list .video-card-body .video-title {
        line-height: 1.3;
    }

        .video-card-list .video-card-body .video-title a {
            font-size: .88rem;
            margin-top: -2px;
            font-family: var(--display);
            font-weight: 500;
        }

    .video-card-list .video-card-body .right-action {
        opacity: 0;
    }

.video-card-list:hover .video-card-body .right-action {
    opacity: 1;
}

.tbl-playlist tr {
    transition: background .2s;
}

    .tbl-playlist tr:hover {
        background: var(--moss-tint) !important;
        cursor: pointer;
    }

.video-card.video-card-list.table-hover {
    background: var(--moss-tint);
    border: 1px solid var(--moss-line);
}

    .video-card.video-card-list.table-hover:hover {
        background: var(--moss-soft);
    }

.video-suggestion-title {
    font-family: var(--display);
    color: var(--moss);
    font-weight: 600;
    font-size: .92rem;
    text-decoration: none;
    line-height: 1.3;
    letter-spacing: -.005em;
}

    .video-suggestion-title:hover {
        color: var(--moss-mid);
    }

.coluna-play .badge.badge-dark {
    font-weight: 400;
}

.history-video .progress {
    border-radius: 0;
    font-size: .65rem;
    font-weight: 600;
    height: 4px;
    margin: 12px 14px -4px 13px;
    background: var(--line-soft);
    font-family: var(--mono);
}

.video-close {
    color: var(--paper) !important;
    font-size: 18px;
    position: absolute;
    right: 6px;
    z-index: 9999;
}

/* ─── WATCH PAGE — paper sheets ────────────────────────────── */
.box,
.single-video-title.box,
.single-video-author.box,
.comment.box,
.single-video-info-content.box {
    background: var(--paper);
    border: var(--rule);
    border-radius: 2px;
    box-shadow: var(--shadow-sm);
    padding: 1.5rem;
    transition: box-shadow .25s, border-color .25s;
    position: relative;
}

    .box:hover,
    .single-video-title.box:hover,
    .single-video-author.box:hover,
    .comment.box:hover,
    .single-video-info-content.box:hover {
        border-color: var(--moss-line);
    }

.single-video-title h2 {
    font-family: var(--display);
    font-size: 1.85rem;
    font-weight: 500;
    margin-top: 1.4rem;
    line-height: 1.15;
    letter-spacing: -.018em;
    color: var(--ink);
}

    .single-video-title h2 a {
        color: var(--ink);
    }

        .single-video-title h2 a:hover {
            color: var(--moss);
        }

.single-video-author {
    display: flow-root;
}

    .single-video-author img {
        border-radius: 50%;
        float: left;
        height: 60px;
        width: 60px;
        object-fit: cover;
        margin: 0 16px 0 0;
        border: 2px solid var(--moss-line);
        padding: 2px;
        background: var(--paper);
    }

    .single-video-author p {
        margin: 0 0 .25rem;
        padding: 0;
    }

        .single-video-author p a strong {
            font-family: var(--display);
            color: var(--ink);
            font-size: 1.1rem;
            font-weight: 500;
        }

    .single-video-author small {
        color: var(--ink-soft);
        line-height: 1.65;
        font-family: var(--body);
        font-size: .88rem;
    }

    .single-video-author.box small {
        font-size: .9rem;
    }

.single-video-info-content h6 {
    font-family: var(--mono);
    font-size: .68rem;
    font-weight: 600;
    color: var(--moss);
    text-transform: uppercase;
    letter-spacing: .18em;
    margin-top: .9rem;
    margin-bottom: .4rem;
}

    .single-video-info-content h6:first-child {
        margin-top: 0;
    }

.single-video-info-content p {
    font-family: var(--body);
    color: var(--ink);
    line-height: 1.7;
    font-size: .94rem;
    margin-bottom: .5rem;
}

#videoBox {
    border-radius: 2px;
    overflow: hidden;
    border: 1px solid var(--ink);
    box-shadow: var(--shadow);
}

/* ─── COMMENTS ─────────────────────────────────────────────── */
.comment.box h4 {
    font-family: var(--display);
    color: var(--ink);
    font-size: 1.4rem;
    font-weight: 500;
    margin-bottom: 1.2rem;
    padding-bottom: .8rem;
    border-bottom: var(--rule);
    position: relative;
    letter-spacing: -.01em;
}

    .comment.box h4::after {
        content: '';
        position: absolute;
        left: 0;
        bottom: -1px;
        width: 36px;
        height: 2px;
        background: var(--moss);
    }

.comment .comment {
    border-top: 1px solid var(--line-soft);
    padding-top: 1rem;
    margin-top: 1rem;
}

.comment h5, .comment h6 {
    font-family: var(--display);
    color: var(--ink);
    font-size: .98rem;
    font-weight: 500;
    margin-bottom: .35rem;
    line-height: 1.3;
}

    .comment h5 strong,
    .comment h6 strong {
        font-family: var(--display);
        font-weight: 600;
        color: var(--moss-deep);
    }

.comment p {
    font-family: var(--body);
    color: var(--ink-soft);
    line-height: 1.65;
    font-size: .94rem;
}

.reply-content {
    border-left: 2px solid var(--moss) !important;
    padding-left: 1rem;
    background: var(--moss-tint);
    border-radius: 0 2px 2px 0;
    padding-top: .6rem;
    padding-bottom: .6rem;
    margin-top: .6rem;
}

.reply-button.btn.btn-primary {
    padding: .35rem .65rem;
    font-size: .75rem;
    border-radius: 2px;
}

#commentForm textarea {
    border: 1px solid var(--line) !important;
    border-radius: 2px !important;
    background: var(--bone) !important;
    padding: .9rem 1rem;
    font-size: .92rem;
    font-family: var(--body);
    color: var(--ink) !important;
    transition: border-color .2s, background .2s;
}

    #commentForm textarea::placeholder {
        color: var(--muted);
        font-family: var(--display);
        font-style: italic;
        font-weight: 400;
    }

    #commentForm textarea:focus {
        border-color: var(--moss) !important;
        background: var(--paper) !important;
        box-shadow: 0 0 0 3px rgba(0,103,38,.08) !important;
        outline: none;
    }

.reply-container .reply-input {
    border: 1px solid var(--line) !important;
    border-radius: 2px !important;
    background: var(--bone) !important;
    font-family: var(--body);
}

    .reply-container .reply-input:focus {
        border-color: var(--moss) !important;
        background: var(--paper) !important;
    }

.tags span a,
.tags a,
.tag-video-interno a {
    display: inline-block;
    background: var(--paper);
    color: var(--moss) !important;
    border: 1px solid var(--moss-line);
    border-radius: 2px;
    padding: .3rem .85rem;
    font-family: var(--mono);
    font-size: .68rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .14em;
    margin: 0 .35rem .4rem 0;
    text-decoration: none;
    transition: background .2s, color .2s, border-color .2s;
}

    .tags a:hover, .tags span a:hover, .tag-video-interno a:hover {
        background: var(--moss) !important;
        color: var(--paper) !important;
        border-color: var(--moss) !important;
    }

.adblock {
    background: var(--moss) !important;
    background-image: none !important;
    border-radius: 2px;
    margin-bottom: 1rem;
    padding: 1.1rem 1.4rem !important;
    text-align: left;
    width: 100%;
    color: var(--paper) !important;
    font-family: var(--body);
    font-size: .95rem;
    position: relative;
    overflow: hidden;
}

    .adblock::before {
        content: '';
        position: absolute;
        inset: 6px;
        border: 1px solid rgba(255,255,255,.18);
        pointer-events: none;
    }

    .adblock.bd-block-bt,
    .adblock.bd-block {
        background: var(--moss) !important;
    }

    .adblock .img,
    .adblock > div {
        font-family: var(--mono);
        color: rgba(255,255,255,.85);
        font-size: .72rem;
        text-transform: uppercase;
        letter-spacing: .18em;
        font-weight: 500;
        position: relative;
        z-index: 1;
    }

        .adblock .img strong,
        .adblock > div strong {
            display: block;
            font-family: var(--display);
            color: var(--paper);
            font-size: 1.15rem;
            font-weight: 500;
            text-transform: none;
            letter-spacing: -.01em;
            margin-top: .35rem;
        }

    .adblock select.form-control {
        margin-top: .6rem;
        background: rgba(255, 255, 255, .1) !important;
        border: 1px solid rgba(255, 255, 255, .2) !important;
        color: var(--paper) !important;
        border-radius: 2px;
        font-family: var(--body);
    }

        .adblock select.form-control option {
            color: var(--ink);
        }

.bg-logo-modulo.adblock,
.bg-logo-modulo {
    background: var(--paper) !important;
    color: var(--ink) !important;
    border: var(--rule);
    border-radius: 2px;
    padding: 2rem;
}

    .bg-logo-modulo::before {
        display: none;
    }

.bd-block, .bd-block-bt {
    border-color: var(--moss-line) !important;
}

.bd-bt-2px {
    border-bottom: 2px solid var(--moss);
    padding: 10px;
}

.apoio-pagina img {
    padding: 10px;
    margin-bottom: 10px;
}

/* Group title in playlist */
.group-title.alert {
    background: var(--moss-deep);
    color: var(--paper);
    border: none;
    border-radius: 2px;
    padding: .8rem 1rem;
    margin-bottom: 0;
    position: relative;
    overflow: hidden;
}

    .group-title.alert::before {
        content: '';
        position: absolute;
        inset: 4px;
        border: 1px solid rgba(255,255,255,.18);
        pointer-events: none;
    }

.group-title h6 {
    color: var(--paper);
    margin: 0;
    font-family: var(--display);
    font-weight: 500;
    font-size: 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    z-index: 1;
    letter-spacing: -.005em;
}

.group-hidden {
    display: none;
}

.group-title-row {
    cursor: pointer;
}

.next-video {
    background: var(--moss-tint);
    border: 1px solid var(--moss-line);
    border-radius: 2px;
    padding: .55rem .85rem;
}

.reproducao-automatica {
    margin: 8px 4px;
}

    .reproducao-automatica small {
        color: var(--ink-soft);
        font-family: var(--mono);
        font-size: .7rem;
        text-transform: uppercase;
        letter-spacing: .12em;
        font-weight: 500;
    }

.switch-toggle {
    margin-left: 10px;
}

/* ─── BUTTONS — IOCP square pills, uppercase, mono labels ─── */
.btn,
.btn-primary, .btn-secondary, .btn-success, .btn-danger,
.btn-warning, .btn-info, .btn-light, .btn-dark,
.btn-outline-primary, .btn-outline-secondary, .btn-outline-success,
.btn-outline-danger, .btn-outline-warning, .btn-outline-info,
.btn-large, .btn-block, .btn-lg, .btn-sm {
    background-image: none !important;
}

.btn {
    border-radius: 2px;
    font-family: var(--body);
    font-weight: 600;
    font-size: .82rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: .7rem 1.4rem;
    transition: background .25s, border-color .25s, color .25s, transform .25s, box-shadow .25s;
    border: 1px solid transparent;
}

    .btn:hover {
        transform: translateY(-2px);
    }

    .btn:active {
        transform: translateY(0);
    }

.btn-primary,
a.btn-primary,
button.btn-primary,
.btn-primary.btn-large,
.btn-primary.btn-block,
.btn-primary.btn-lg,
.btn-primary.btn-sm,
.bg-primary:not(.progress-bar-animated),
.badge-primary {
    background: var(--moss) !important;
    background-color: var(--moss) !important;
    background-image: none !important;
    border-color: var(--moss) !important;
    color: var(--paper) !important;
    text-shadow: none !important;
}

    .btn-primary:hover,
    a.btn-primary:hover,
    button.btn-primary:hover {
        background-color: var(--moss-deep) !important;
        border-color: var(--moss-deep) !important;
        color: var(--paper) !important;
        box-shadow: 0 14px 28px -10px rgba(0, 103, 38, .35);
    }

    .btn-primary small {
        color: var(--paper) !important;
    }

.btn-outline-primary {
    background: transparent !important;
    border: 1px solid var(--moss) !important;
    color: var(--moss) !important;
}

    .btn-outline-primary:hover {
        background: var(--moss) !important;
        border-color: var(--moss) !important;
        color: var(--paper) !important;
    }

    .btn-outline-primary small {
        color: var(--moss) !important;
    }

.text-primary {
    color: var(--moss) !important;
}

.progress-bar {
    background-color: var(--moss);
}

.btn-secondary, .badge-secondary {
    background-color: var(--bone) !important;
    border-color: var(--line) !important;
    color: var(--ink) !important;
}

    .btn-secondary:hover {
        background-color: var(--line-soft) !important;
        border-color: var(--line) !important;
    }

.btn-outline-secondary {
    background: transparent !important;
    border: 1px solid var(--line) !important;
    color: var(--ink-soft) !important;
}

    .btn-outline-secondary:hover {
        background: var(--bone) !important;
    }

.text-secondary {
    color: var(--muted) !important;
}

.btn-info, .btn-outline-info, .badge-info {
    background-color: var(--moss-deep) !important;
    border-color: var(--moss-deep) !important;
    color: var(--paper) !important;
}

    .btn-info:hover, .btn-outline-info:hover {
        background-color: var(--moss) !important;
        border-color: var(--moss) !important;
        color: var(--paper) !important;
    }

.text-info {
    color: var(--moss-deep) !important;
}

.btn-success, .btn-outline-success, .badge-success {
    background-color: var(--moss) !important;
    border-color: var(--moss) !important;
    color: var(--paper) !important;
}

    .btn-success:hover, .btn-outline-success:hover {
        background-color: var(--moss-deep) !important;
        border-color: var(--moss-deep) !important;
    }

.text-success {
    color: var(--moss) !important;
}

.btn-warning, .badge-warning {
    background-color: var(--warn) !important;
    border-color: var(--warn) !important;
    color: var(--paper) !important;
}

    .btn-warning:hover {
        background-color: #946d1e !important;
        border-color: #946d1e !important;
    }

.btn-outline-warning {
    background: transparent !important;
    border: 1px solid var(--warn) !important;
    color: var(--warn) !important;
}

    .btn-outline-warning:hover {
        background: var(--warn) !important;
        color: var(--paper) !important;
    }

.text-warning {
    color: var(--warn) !important;
}

.btn-danger, .badge-danger {
    background-color: var(--danger) !important;
    border-color: var(--danger) !important;
    color: var(--paper) !important;
}

.btn-outline-danger {
    background-color: transparent !important;
    border: 1px solid var(--danger) !important;
    color: var(--danger) !important;
}

    .btn-outline-danger:hover {
        background-color: var(--danger) !important;
        color: var(--paper) !important;
    }
/* video-page btn-outline-danger override (used as a "release in" pill) */
.video-page .btn-outline-danger {
    font-family: var(--mono) !important;
    font-size: .68rem !important;
    background: var(--moss) !important;
    border: 1px solid var(--moss) !important;
    color: var(--paper) !important;
    padding: .25rem .7rem;
    text-transform: uppercase;
    letter-spacing: .12em;
    border-radius: 2px;
}

.text-danger {
    color: var(--danger) !important;
}

.btn-dark, .badge-dark {
    background: var(--ink) !important;
    border-color: var(--ink) !important;
    color: var(--paper) !important;
}

.btn-light {
    background: var(--bone) !important;
    border: 1px solid var(--line);
    color: var(--ink) !important;
}

.text-dark {
    color: var(--ink) !important;
}

.btn-link {
    color: var(--moss) !important;
    text-transform: none;
    letter-spacing: 0;
    font-weight: 500;
}

    .btn-link:hover {
        color: var(--moss-deep) !important;
        text-decoration: none;
    }

.btn-large, .btn-lg {
    padding: .95rem 1.7rem;
    font-size: .88rem;
    border-radius: 2px;
}

.btn-lg {
    font-size: .85rem;
    padding: .85rem 1.4rem;
}

.btn-block {
    display: block;
    width: 100%;
}

/* "Adquirir Módulo" / not-acquired pills above the video — center, refined */
.video-card-image > .btn.btn-block {
    border-radius: 2px;
    font-family: var(--mono);
    font-size: .72rem;
    letter-spacing: .14em;
    margin-bottom: .5rem;
}

/* ─── BADGES ───────────────────────────────────────────────── */
.badge {
    font-family: var(--mono);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .14em;
    padding: .35rem .75rem;
    border-radius: 2px;
    font-size: .65rem;
    border: 1px solid transparent !important;
}

.badge-success {
    background: var(--moss-tint) !important;
    color: var(--moss-deep) !important;
    border-color: var(--moss-line) !important;
}

.badge-danger {
    background: var(--danger-soft) !important;
    color: var(--danger) !important;
    border-color: rgba(161,58,42,.25) !important;
}

.badge-warning {
    background: var(--warn-soft) !important;
    color: var(--warn) !important;
    border-color: rgba(183,138,42,.3) !important;
}

.badge-info {
    background: var(--moss-soft) !important;
    color: var(--moss-deep) !important;
    border-color: var(--moss-line) !important;
}

.badge-dark {
    background: var(--ink) !important;
    color: var(--paper) !important;
    border-color: var(--ink) !important;
}

/* ─── ALERTS ───────────────────────────────────────────────── */
.alert {
    border: var(--rule) !important;
    border-radius: 2px !important;
    padding: 1.2rem 1.4rem;
    background: var(--paper) !important;
    color: var(--ink) !important;
    font-family: var(--body);
}

.alert-info {
    background: var(--paper) !important;
    color: var(--ink) !important;
    border-left: 3px solid var(--moss) !important;
}

    .alert-info i {
        color: var(--moss);
    }

.alert-danger {
    background: var(--danger-soft) !important;
    color: var(--danger) !important;
    border-left: 3px solid var(--danger) !important;
}

.alert-warning {
    background: var(--warn-soft) !important;
    color: var(--warn) !important;
    border-left: 3px solid var(--warn) !important;
}

/* ─── FORMS ────────────────────────────────────────────────── */
.form-control {
    border: 1px solid var(--line) !important;
    border-radius: 2px !important;
    background: var(--bone) !important;
    color: var(--ink) !important;
    font-family: var(--body);
    font-size: .92rem;
    padding: .85rem 1rem !important;
    transition: border-color .2s, background .2s, box-shadow .2s;
}

    .form-control::placeholder {
        color: var(--muted);
        font-family: var(--display);
        font-style: italic;
        font-weight: 400;
    }

    .form-control:focus {
        border-color: var(--moss) !important;
        background: var(--paper) !important;
        box-shadow: 0 0 0 3px rgba(0, 103, 38, .1) !important;
        outline: none !important;
    }

.custom-select {
    background-color: var(--bone);
    border-color: var(--line);
    border-radius: 2px;
    font-family: var(--body);
    font-size: .85rem;
}

.custom-checkbox .custom-control-label::before {
    border-radius: 2px;
    border-color: var(--line);
}

.custom-checkbox .custom-control-input:checked ~ .custom-control-label::before {
    background-color: var(--moss);
    border-color: var(--moss);
}

.category-checkbox .custom-control {
    margin: 0 0 6px !important;
}

label {
    font-family: var(--mono);
    font-weight: 500;
    color: var(--muted);
    font-size: .7rem;
    margin: 0 0 .55rem;
    text-transform: uppercase;
    letter-spacing: .14em;
}

.form-label-group {
    position: relative;
}

    .form-label-group > input,
    .form-label-group > label {
        padding: var(--input-padding-y) var(--input-padding-x);
        height: auto;
    }

    .form-label-group > label {
        position: absolute;
        top: 0;
        left: 0;
        display: block;
        width: 100%;
        margin-bottom: 0;
        line-height: 1.5;
        color: var(--muted);
        border: 1px solid transparent;
        border-radius: 2px;
        transition: all .1s ease-in-out;
    }

    .form-label-group input::placeholder {
        color: transparent;
    }

    .form-label-group input:not(:placeholder-shown) {
        padding-top: calc(var(--input-padding-y) + var(--input-padding-y) * (2 / 3));
        padding-bottom: calc(var(--input-padding-y) / 3);
    }

        .form-label-group input:not(:placeholder-shown) ~ label {
            padding-top: calc(var(--input-padding-y) / 3);
            padding-bottom: calc(var(--input-padding-y) / 3);
            font-size: .65rem;
            color: var(--muted);
            letter-spacing: .14em;
        }

.card-login {
    max-width: 25rem;
}

.card-register {
    max-width: 40rem;
}

/* ─── MODULE PRICING (.aquisicao-valor) ────────────────────── */
.aquisicao-valor h5 {
    font-family: var(--display);
    color: var(--ink);
    font-weight: 500;
    margin-bottom: 1.4rem;
    display: inline-flex;
    align-items: center;
    gap: .7rem;
    letter-spacing: -.01em;
    font-size: 1.4rem;
}

    .aquisicao-valor h5 i {
        color: var(--moss);
    }

.aquisicao-valor p {
    margin-bottom: 0;
}

.aquisicao-valor > .row > .col-md-12 > .row {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: stretch !important;
    gap: 1.5rem !important;
    margin: 0 !important;
}

    .aquisicao-valor > .row > .col-md-12 > .row > div {
        margin: 0 !important;
        padding: 0 !important;
        flex: 1 1 280px;
        min-width: 0;
    }

        .aquisicao-valor > .row > .col-md-12 > .row > div[style*="border-right"] {
            border-right: 1px solid var(--line) !important;
            padding-right: 1.5rem !important;
            flex: 1 1 320px;
            overflow-x: auto;
        }

        .aquisicao-valor > .row > .col-md-12 > .row > div:last-child {
            flex: 0 0 auto;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-top: 0 !important;
        }

.aquisicao-valor table.table {
    border: 1px solid var(--line) !important;
    border-radius: 2px;
    overflow: hidden;
    background: var(--paper) !important;
    color: var(--ink) !important;
    width: auto;
    min-width: 280px;
    margin: 0;
    font-family: var(--body);
    font-size: .88rem;
}

    .aquisicao-valor table.table thead th {
        background: var(--moss-tint) !important;
        color: var(--moss-deep) !important;
        font-family: var(--mono);
        text-transform: uppercase;
        letter-spacing: .12em;
        font-size: .68rem;
        font-weight: 600;
        padding: .9rem 1rem !important;
        border: none !important;
        border-bottom: 1px solid var(--moss-line) !important;
        white-space: nowrap;
        text-align: left !important;
    }

    .aquisicao-valor table.table tbody td {
        border-bottom: 1px solid var(--line-soft) !important;
        padding: .7rem 1rem !important;
        white-space: nowrap;
        color: var(--ink) !important;
    }

    .aquisicao-valor table.table tbody tr:nth-child(even) td {
        background: var(--moss-tint);
    }

    .aquisicao-valor table.table tbody tr:last-child td {
        border-bottom: none !important;
    }

.aquisicao-valor .btn-outline-info,
.aquisicao-valor .btn-outline-success,
.aquisicao-valor .flex-column.btn {
    background: var(--paper) !important;
    border: 1px solid var(--line) !important;
    color: var(--ink) !important;
    box-shadow: var(--shadow-sm) !important;
    padding: 1.2rem 1.4rem !important;
    border-radius: 2px !important;
    text-align: left !important;
    margin: 0 !important;
    cursor: default;
    transition: border-color .25s, box-shadow .25s;
    text-transform: none;
    letter-spacing: 0;
    font-weight: 400;
}

    .aquisicao-valor .btn-outline-info:hover,
    .aquisicao-valor .btn-outline-success:hover,
    .aquisicao-valor .flex-column.btn:hover {
        border-color: var(--moss-line) !important;
        box-shadow: var(--shadow) !important;
        transform: none;
    }

.aquisicao-valor h6.text-success {
    color: var(--moss-deep) !important;
    font-family: var(--mono);
    font-weight: 600;
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .18em;
    margin-bottom: .6rem;
}

.aquisicao-valor .parcela,
p.parcela,
h3.parcela {
    font-family: var(--display);
    color: var(--ink) !important;
    font-weight: 500;
    font-size: 1.3rem;
    margin: 10px 0;
    letter-spacing: -.01em;
}

h3.parcela {
    font-size: 1.7rem;
    margin-top: 20px;
    margin-bottom: 0;
}

.aquisicao-valor .parcela span {
    color: var(--moss);
    font-family: var(--mono);
    font-weight: 500;
}

.aquisicao-valor .parcela small {
    color: var(--muted);
    font-family: var(--body);
    font-weight: 400;
    font-style: italic;
}

.aquisicao-valor #btnAC,
.aquisicao-valor #btnCartAdded,
.aquisicao-valor .btn[data-ismodule] {
    padding: 1.6rem 1.85rem !important;
    font-size: .85rem !important;
    font-weight: 600 !important;
    border-radius: 2px !important;
    box-shadow: var(--shadow);
    line-height: 1.4;
    text-transform: uppercase;
    letter-spacing: .12em;
}

.aquisicao-valor .btn,
.aquisicao-valor {
    cursor: default !important;
}

/* Price summary table (.tabela-valores) */
.tabela-valores {
    max-width: 360px;
    width: 100%;
    margin-left: 20px;
    margin-bottom: 20px;
    color: var(--ink);
    font-family: var(--body);
}

    .tabela-valores table {
        width: 100%;
    }

    .tabela-valores tr {
        border-bottom: 1px solid var(--line-soft);
    }

    .tabela-valores td {
        padding: 5px 5px;
        text-align: right;
        font-family: var(--mono);
        font-size: .82rem;
    }

        .tabela-valores td:first-child {
            text-align: left;
            font-family: var(--body);
            color: var(--ink-soft);
        }

/* ─── MODULE DETAIL ────────────────────────────────────────── */
.modulo-detalhe.aquisicao {
    background: transparent;
}

.intro-page img {
    border: 1px solid var(--line);
    border-radius: 2px !important;
    box-shadow: var(--shadow);
    padding: 6px;
    background: var(--paper);
}

.intro-page p a {
    color: var(--moss-deep) !important;
    font-family: var(--mono);
    font-weight: 600;
    text-transform: uppercase;
    font-size: .72rem;
    letter-spacing: .12em;
}

.bandeira {
    width: 30px;
}

.bandeira-direita {
    width: 20px;
    vertical-align: text-bottom;
}

.thumb-intro {
    max-height: 200px;
    width: 80%;
    display: block;
    margin: 0 auto 20px;
}

.thumb-img {
    border: 1px solid var(--line);
    padding: 8px;
    border-radius: 2px;
    background: var(--paper);
}

.aquisicao-descricao ul {
    padding: 0;
    font-size: .92rem;
    line-height: 1.65;
    font-family: var(--body);
}

.aquisicao-descricao li {
    margin-bottom: 10px;
    color: var(--ink);
    padding-left: 1.4rem;
    position: relative;
}

    .aquisicao-descricao li::before {
        content: '';
        position: absolute;
        left: 0;
        top: .7em;
        width: 18px;
        height: 1px;
        background: var(--moss);
    }

.expira-menu {
    font-family: var(--mono);
    font-style: normal;
    font-size: .72rem;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: .1em;
}

.aquisicao-home {
    min-height: 18px;
}

    .aquisicao-home a {
        float: left;
        margin: 0 0 5px;
        color: var(--moss);
        font-family: var(--mono);
        font-size: .72rem;
        text-transform: uppercase;
        letter-spacing: .12em;
        font-weight: 500;
    }

a.card-link {
    color: var(--moss);
    font-weight: 500;
    font-family: var(--body);
}

.col-md-3.border-left.ofertas {
    border-left: 1px solid var(--line) !important;
    padding-left: 1.5rem;
}

.ofertas h3 {
    font-family: var(--display);
    color: var(--ink);
    font-size: 1.3rem;
    font-weight: 500;
    margin-bottom: 1.1rem;
    padding-bottom: .8rem;
    border-bottom: 1px solid var(--moss-line);
    letter-spacing: -.01em;
}

.ofertas .table.table-hover tr {
    border-radius: 2px;
    transition: background .25s;
}

    .ofertas .table.table-hover tr:hover {
        background: var(--moss-tint) !important;
    }

.ofertas .conteudo p b {
    font-family: var(--display);
    color: var(--ink);
    font-weight: 500;
}

.ofertas .conteudo div p:nth-child(2) {
    font-family: var(--mono);
    font-size: .92rem;
    margin-top: 5px;
    font-weight: 500;
    color: var(--moss);
    margin-bottom: 6px;
    line-height: 1.4;
}

.ofertas .conteudo div p:nth-child(3) {
    margin-bottom: 0;
}

.ofertas .table td, .ofertas .table th {
    padding: .25rem 0 0;
}

.meus-modulos .img-fluid {
    width: 100%;
}

.videos-meus-modulos {
    padding: 18px 30px;
    background: var(--moss-tint);
    margin-top: 10px;
    border-radius: 2px;
    border: 1px solid var(--moss-line);
    display: none;
}

.fechar-meu-modulo {
    float: right;
    top: 0;
    position: absolute;
    right: 0;
    font-size: 20px;
    cursor: pointer;
    color: var(--ink-soft);
}

.videos-meus-modulos h3 {
    width: auto;
    display: inline;
    vertical-align: bottom;
    margin-right: 30px;
    font-family: var(--display);
    color: var(--ink);
    font-weight: 500;
}

.meus-videos-bar li {
    padding-bottom: 5px;
    margin-bottom: 3px;
    border-bottom: 1px solid var(--line-soft);
    font-family: var(--body);
    font-size: .88rem;
}

/* ─── MODAL ────────────────────────────────────────────────── */
.modal-content {
    border: var(--rule);
    border-radius: 2px;
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    background: var(--paper);
}

.modal-header {
    background: var(--moss) !important;
    background-color: var(--moss) !important;
    background-image: none !important;
    color: var(--paper);
    border-bottom: none;
    padding: 1.1rem 1.5rem;
    position: relative;
    overflow: hidden;
}

    .modal-header::before {
        content: '';
        position: absolute;
        inset: 6px;
        border: 1px solid rgba(255,255,255,.16);
        pointer-events: none;
    }

    .modal-header * {
        color: var(--paper) !important;
        position: relative;
        z-index: 1;
    }

    .modal-header .modal-title,
    .modal-header h5 {
        color: var(--paper);
        font-family: var(--display);
        font-weight: 500;
        letter-spacing: -.005em;
    }

    .modal-header .close {
        color: var(--paper);
        opacity: .85;
        text-shadow: none;
    }

        .modal-header .close:hover {
            opacity: 1;
        }

.modal-body {
    padding: 1.6rem;
    color: var(--ink);
    font-family: var(--body);
    background: var(--paper);
}

.modal-footer {
    border-top: var(--rule);
    padding: 1rem 1.5rem;
    background: var(--bone);
}

.modal-modulo .modal-content {
    background: var(--paper);
}

.modal-modulo p {
    font-size: .94rem;
    color: var(--ink);
    font-family: var(--body);
}

.modal-modulo .jumbotron {
    padding: 1.7rem 2rem 1rem;
    background-color: var(--moss-tint);
    border: 1px solid var(--moss-line);
    border-radius: 2px;
}

hr.traco {
    margin-top: 0;
    width: 60px;
    border: 0;
    border-top: 2px solid var(--moss);
}

.programacao-modal strong {
    background-color: var(--moss);
    padding: 2px 10px;
    color: var(--paper);
    border-radius: 2px;
    font-family: var(--mono);
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .1em;
}

.programacao-modal ul {
    list-style: inherit !important;
    padding: 0 15px;
    color: var(--ink);
    font-family: var(--body);
    font-size: .94rem;
    line-height: 1.65;
    margin: 5px 0 20px;
}

.programacao-modal li {
    margin-bottom: 5px;
}

.programacao-modal p {
    margin: 0;
}

.excecao-li {
    list-style: none;
    margin-left: -20px;
    font-weight: 600;
}

.tab-content h3 {
    margin-top: 14px;
    font-family: var(--display);
    font-size: 1.5rem;
    font-weight: 500;
    color: var(--ink);
    letter-spacing: -.01em;
}

ul.itens-modal {
    color: var(--ink);
    list-style-type: circle !important;
    padding-left: 20px;
    font-family: var(--body);
}

    ul.itens-modal li {
        margin-bottom: 5px;
        line-height: 1.5;
    }

.pop-detalhes {
    position: absolute;
    top: 0;
    right: -306px;
    width: 320px;
    z-index: 99;
    background-color: var(--paper);
    padding: 16px;
    box-shadow: var(--shadow-lg);
    display: none;
    border-radius: 2px;
    border: var(--rule);
}

    .pop-detalhes ul {
        list-style: initial !important;
        padding-left: 15px;
        font-family: var(--body);
    }

/* ─── PAGINATION ───────────────────────────────────────────── */
.pagination .page-item .page-link {
    background: transparent;
    border: none;
    color: var(--ink-soft);
    line-height: 20px;
    font-family: var(--mono);
    font-size: .82rem;
}

.pagination .page-item.active .page-link {
    background: var(--moss);
    border-radius: 2px;
    color: var(--paper);
    height: 32px;
    margin: 0 7px;
    text-align: center;
    width: 32px;
    line-height: 22px;
}

.pagination .page-item.disabled .page-link {
    opacity: .5;
}

/* ─── OVERLAYS ─────────────────────────────────────────────── */
.overlay-play,
.overlay-play-expired {
    position: absolute;
    top: 0;
    color: var(--paper);
    text-align: center;
    font-size: 100px;
    background-color: rgba(26, 42, 29, .55);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    width: 100%;
    height: 100%;
    padding: 10px 0;
    z-index: 2147483645;
    line-height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

    .overlay-play:hover {
        background-color: rgba(26, 42, 29, .65);
    }

    .overlay-play i {
        flex: 0 0 120px;
    }

/* SweetAlert2 must sit above the play/expired overlays, which use a near-max
   z-index (2147483645). Without this the swal renders underneath the overlay. */
.swal2-container {
    z-index: 2147483646 !important;
}

.overlay-alert,
.overlay-alert-success {
    background: var(--paper);
    border: var(--rule);
    border-radius: 2px;
    box-shadow: var(--shadow-lg);
    padding: 1.6rem 1.8rem;
    color: var(--ink);
    font-family: var(--body);
    position: relative;
}

    .overlay-alert::before,
    .overlay-alert-success::before {
        content: '';
        display: block;
        width: 36px;
        height: 2px;
        background: var(--moss);
        margin: 0 auto 1rem;
    }

.overlay-alert-text {
    color: var(--ink);
    font-size: .92rem;
    line-height: 1.6;
    font-family: var(--body);
}

.overlay-alert i,
.overlay-alert-success i {
    font-size: 2.4rem;
    margin-bottom: .8rem;
    display: inline-block;
}

/* ─── HELPERS ──────────────────────────────────────────────── */
.no-gutters {
    background: transparent;
}

.bg-glass {
    background: var(--paper);
    border: var(--rule);
    border-radius: 2px;
    box-shadow: var(--shadow);
}

.bg-white {
    background: var(--paper) !important;
}

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

.text-black-50 {
    color: var(--ink) !important;
}

/* ─── COOKIE ALERT ─────────────────────────────────────────── */
#alertCookiePolicy {
    background: var(--moss-deep) !important;
    background-image: none !important;
    color: var(--paper) !important;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
    font-family: var(--body);
    font-size: .9rem;
    padding: 1rem 1.2rem;
}

    #alertCookiePolicy .btnOkAlertCookiePolicy {
        background: var(--moss-soft) !important;
        border-color: var(--moss-soft) !important;
        color: var(--moss-deep) !important;
        font-family: var(--body);
        font-weight: 600;
        font-size: .78rem;
        text-transform: uppercase;
        letter-spacing: .1em;
        border-radius: 2px;
    }

/* ─── CART OVERLAY HELP ────────────────────────────────────── */
#overlay {
    background: rgba(0, 61, 22, .88) !important;
    color: var(--paper);
}

    #overlay h5 {
        color: var(--paper);
        font-family: var(--display);
        font-weight: 500;
    }

    #overlay .btn-primary {
        background: var(--paper) !important;
        border-color: var(--paper) !important;
        color: var(--moss-deep) !important;
    }

/* ─── LOGIN PAGE — IOCP HERO (paper card, moss accents) ───── */
.login-main-body {
    background-color: var(--bone) !important;
    background-image: radial-gradient(ellipse 60% 60% at 75% 35%, rgba(0, 103, 38, .12) 0%, transparent 70%), radial-gradient(ellipse 45% 45% at 18% 85%, rgba(176, 138, 62, .08) 0%, transparent 60%), linear-gradient(rgba(0, 103, 38, .04) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 103, 38, .04) 1px, transparent 1px) !important;
    background-size: auto, auto, 80px 80px, 80px 80px !important;
    background-attachment: fixed !important;
    min-height: 100vh;
    height: auto;
    overflow-x: hidden;
    position: relative;
}
    /* Decorative oversized italic IOCP wordmark, behind the card */
    .login-main-body::after {
        content: 'IOCP';
        position: fixed;
        top: 50%;
        left: -60px;
        transform: translateY(-50%) rotate(-90deg);
        transform-origin: left center;
        font-family: var(--display);
        font-weight: 300;
        font-style: italic;
        font-size: 14rem;
        color: rgba(0, 103, 38, .05);
        pointer-events: none;
        letter-spacing: -.02em;
        z-index: 0;
    }

.login-main-wrapper {
    background: transparent !important;
    background-image: none !important;
    padding: 3rem 1rem !important;
    height: auto;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 1;
}

.full-height {
    height: auto;
    min-height: 100vh;
}

.login-main-wrapper > .container {
    max-width: 1080px;
    padding-left: 0 !important;
    padding-right: 0 !important;
    animation: iocp-login-in .8s cubic-bezier(.2, .7, .2, 1) both;
}

@keyframes iocp-login-in {
    from {
        opacity: 0;
        transform: translateY(24px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.login-main-wrapper .no-gutters {
    background: var(--paper) !important;
    border-radius: 2px !important;
    box-shadow: 0 30px 80px -20px rgba(0, 61, 22, .25), 0 1px 0 rgba(255, 255, 255, .04);
    border: var(--rule);
    overflow: hidden;
    position: relative;
}

    .login-main-wrapper .no-gutters::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 3px;
        background: var(--moss);
        z-index: 1;
    }

/* ─── Left column — form ─── */
.login-main-wrapper .col-md-5 {
    padding: 3.5rem 2.85rem !important;
    background: var(--paper) !important;
}

.login-main-left {
    margin: 0 auto;
    max-width: 380px;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    background: transparent !important;
}

.login-main-left-header {
    padding-top: 0 !important;
    margin-bottom: 2.4rem;
    text-align: center;
}

    .login-main-left-header img.img-fluid {
        max-width: fit-content !important;
        margin: 0 auto 1.25rem;
        display: block;
    }

.login-main-left h5 {
    font-family: var(--display);
    color: var(--ink);
    font-weight: 500;
    font-size: 1.55rem;
    margin: 1.4rem 0 0;
    letter-spacing: -.02em;
    position: relative;
    padding-top: 1.6rem;
    text-align: center;
    line-height: 1.2;
}

    .login-main-left h5::before {
        content: '';
        display: block;
        width: 36px;
        height: 1px;
        background: var(--moss);
        margin: 0 auto 1.1rem;
    }

.login-main-left .language-flag {
    width: 30px !important;
    height: auto;
    border-radius: 2px;
    margin: .5rem .25rem 0;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .08);
    transition: transform .2s, box-shadow .2s;
}

    .login-main-left .language-flag:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 14px rgba(0, 0, 0, .15);
    }

.login-main-left form {
    margin-top: .75rem;
}

.login-main-left .form-group {
    margin-bottom: 1.3rem;
}

    .login-main-left .form-group label {
        display: block;
        font-family: var(--mono);
        font-size: .68rem;
        text-transform: uppercase;
        letter-spacing: .18em;
        color: var(--muted);
        font-weight: 500;
        margin-bottom: .55rem;
    }

.login-main-left .form-control {
    padding: .95rem 1.1rem !important;
    height: auto !important;
    background: var(--bone) !important;
    border: 1px solid var(--line) !important;
    border-radius: 2px !important;
    font-family: var(--body);
    font-size: .94rem;
    color: var(--ink) !important;
    transition: background .2s, border-color .2s, box-shadow .2s;
}

    .login-main-left .form-control::placeholder {
        color: var(--muted);
        font-family: var(--display);
        font-style: italic;
    }

    .login-main-left .form-control:focus {
        background: var(--paper) !important;
        border-color: var(--moss) !important;
        box-shadow: 0 0 0 3px rgba(0, 103, 38, .12) !important;
    }

.login-main-left .text-danger {
    display: inline-block;
    font-family: var(--mono);
    font-size: .72rem;
    margin-top: .35rem;
    color: var(--danger) !important;
    letter-spacing: .04em;
}

.login-main-wrapper .form-control {
    background: var(--bone);
}

.login-main-left .btn-outline-primary,
.login-main-left .btn-outline-primary.btn-block.btn-lg {
    background: var(--moss) !important;
    background-image: none !important;
    border: 1px solid var(--moss) !important;
    color: var(--paper) !important;
    padding: 1rem 1.5rem !important;
    font-family: var(--body);
    font-weight: 600;
    font-size: .82rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    border-radius: 2px !important;
    box-shadow: 0 14px 28px -12px rgba(0, 103, 38, .35);
    transition: transform .25s, box-shadow .25s, background .25s;
    margin-top: .6rem;
}

    .login-main-left .btn-outline-primary:hover {
        background: var(--moss-deep) !important;
        border-color: var(--moss-deep) !important;
        transform: translateY(-2px);
        box-shadow: 0 18px 36px -12px rgba(0, 103, 38, .45);
    }

    .login-main-left .btn-outline-primary:active {
        transform: translateY(0);
    }

.login-main-left .light-gray {
    color: var(--muted) !important;
    font-family: var(--body);
    font-size: .85rem;
}

    .login-main-left .light-gray a {
        color: var(--moss);
        font-weight: 500;
        text-decoration: none;
    }

        .login-main-left .light-gray a:hover {
            color: var(--moss-deep);
            text-decoration: underline;
        }

.login-main-left .bg-degrade {
    display: block;
    background: transparent !important;
    background-image: none !important;
    color: var(--ink-soft) !important;
    font-family: var(--body);
    font-size: .9rem;
    margin: 1.85rem 0 0;
    padding: 1.3rem 0 0;
    border-top: 1px solid var(--line-soft);
    text-align: center;
}

.login-main-left .branco {
    color: var(--moss) !important;
    font-weight: 600;
    text-decoration: none;
}

    .login-main-left .branco:hover {
        color: var(--moss-deep) !important;
        text-decoration: underline;
    }

.login-main-left .btn-primary,
.login-main-left .btn-primary.btn-block.btn-large,
.login-main-left .btn-primary.btn-block.btn-lg {
    background: var(--ink) !important;
    background-image: none !important;
    border: 1px solid var(--ink) !important;
    color: var(--paper) !important;
    padding: 1rem 1.5rem !important;
    font-family: var(--body);
    font-weight: 600;
    font-size: .8rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    border-radius: 2px !important;
    box-shadow: 0 8px 20px -8px rgba(26,42,29,.35) !important;
    text-shadow: none !important;
    transition: transform .25s, background .25s, box-shadow .25s;
    margin-top: 1rem;
}

    .login-main-left .btn-primary:hover {
        background: var(--moss-deep) !important;
        border-color: var(--moss-deep) !important;
        transform: translateY(-2px);
        box-shadow: 0 12px 28px -10px rgba(0, 103, 38, .35) !important;
    }

.bg-degrade {
    background: var(--moss) !important;
    background-image: none !important;
    padding: 6px 12px;
    color: var(--paper);
    border-radius: 2px;
    display: inline-block;
    font-family: var(--mono);
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .12em;
}

/* ─── Right column — IOCP showcase ─── */
.login-main-wrapper .col-md-7 {
    padding: 3rem 2.5rem !important;
    background: var(--bone) !important;
    position: relative;
}

    .login-main-wrapper .col-md-7::before {
        content: '';
        position: absolute;
        inset: 0;
        background: radial-gradient(ellipse 50% 50% at 75% 25%, rgba(0, 103, 38, .07) 0%, transparent 70%), radial-gradient(ellipse 30% 30% at 20% 80%, rgba(176, 138, 62, .05) 0%, transparent 60%);
        pointer-events: none;
    }

    .login-main-wrapper .col-md-7::after {
        content: '';
        position: absolute;
        inset: 0;
        background-image: linear-gradient(rgba(0, 103, 38, .025) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 103, 38, .025) 1px, transparent 1px);
        background-size: 60px 60px;
        pointer-events: none;
        mask-image: linear-gradient(to bottom, transparent 0%, #000 25%, #000 75%, transparent 100%);
        -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 25%, #000 75%, transparent 100%);
    }

.login-main-right,
.login-main-right.bg-white {
    background: transparent !important;
    background-image: none !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    max-width: none;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    z-index: 1;
}

.carousel-login-card {
    padding: 1rem;
    text-align: center;
}

    .carousel-login-card img {
        border-radius: 2px;
        box-shadow: 0 24px 50px -22px rgba(0, 61, 22, .25);
        max-height: 380px;
        width: 100%;
        height: auto;
        margin: 0 auto;
        display: block;
        object-fit: cover;
        border: 1px solid var(--moss-line);
        padding: 4px;
        background: var(--paper);
    }

    .carousel-login-card h5 {
        margin-top: 1.85rem !important;
        font-family: var(--display);
        color: var(--ink);
        font-weight: 500;
        font-size: 1.2rem;
        line-height: 1.4;
        max-width: 480px;
        margin-left: auto !important;
        margin-right: auto !important;
        letter-spacing: -.01em;
        font-style: italic;
    }

/* Owl pagination — moss dots, expanding active pill */
.owl-carousel-login .owl-pagination,
.owl-carousel-login .owl-dots,
.login-main-right .owl-theme .owl-controls {
    text-align: center;
    margin-top: 1.85rem;
}

    .login-main-right .owl-theme .owl-controls .owl-page span,
    .owl-carousel-login .owl-pagination .owl-page span,
    .owl-carousel-login .owl-dots .owl-dot span {
        background: var(--line) !important;
        background-image: none !important;
        width: 8px !important;
        height: 8px !important;
        border-radius: 50% !important;
        margin: 0 4px !important;
        opacity: 1 !important;
        display: inline-block !important;
        transition: background .25s ease, width .25s ease, border-radius .25s ease;
    }

        .login-main-right .owl-theme .owl-controls .owl-page.active span,
        .login-main-right .owl-theme .owl-controls .owl-page span:hover,
        .owl-carousel-login .owl-pagination .owl-page.active span,
        .owl-carousel-login .owl-dots .owl-dot.active span {
            background: var(--moss) !important;
            background-image: none !important;
            width: 28px !important;
            border-radius: 100px !important;
            transform: none;
        }

.register {
    width: 80% !important;
    margin: 0 10%;
    max-width: 100%;
}

.logo-topo {
    max-width: 320px;
}

.logo-barra {
    max-height: 40px;
    margin-left: 20px;
}

@media (max-width: 991.98px) {
    .login-main-wrapper {
        padding: 2rem 1rem !important;
    }

        .login-main-wrapper .col-md-5,
        .login-main-wrapper .col-md-7 {
            padding: 2.4rem 1.85rem !important;
        }

        .login-main-wrapper .no-gutters {
            border-radius: 2px !important;
        }

    .carousel-login-card img {
        max-height: 280px;
    }
}

@media (max-width: 575.98px) {
    .login-main-wrapper {
        padding: 1rem !important;
    }

        .login-main-wrapper .col-md-5,
        .login-main-wrapper .col-md-7 {
            padding: 1.8rem 1.3rem !important;
        }

    .login-main-left h5 {
        font-size: 1.25rem;
    }

    .login-main-left-header img.img-fluid {
        max-width: 180px;
    }

    .login-main-wrapper .no-gutters {
        border-radius: 2px !important;
    }
}

/* ─── UPLOAD / WATCH-HISTORY (legacy) ──────────────────────── */
.imgplace {
    background-color: var(--bone);
    border: 1px solid var(--line);
    border-radius: 2px;
    height: 94px;
    width: 100%;
}

.osahan-title {
    color: var(--ink);
    font-family: var(--display);
    font-weight: 500;
}

.osahan-size {
    font-family: var(--mono);
    font-size: .7rem;
    color: var(--muted);
    letter-spacing: .04em;
}

.osahan-progress .progress {
    border-radius: 0;
    height: 4px;
    margin: 14px 0;
    background: var(--line-soft);
}

.osahan-close {
    position: absolute;
    right: 18px;
    top: 0;
}

.osahan-desc {
    font-size: .78rem;
    opacity: .7;
    font-family: var(--body);
}

.upload-video .fas {
    font-size: 200px;
    color: var(--line);
}

/* ─── SINGLE CHANNEL (legacy) ──────────────────────────────── */
.single-channel-image {
    position: relative;
}

    .single-channel-image .img-fluid {
        width: 100%;
    }

.single-channel-nav .navbar {
    padding: 0;
}

.single-channel-nav {
    background: var(--paper) !important;
    box-shadow: var(--shadow-sm);
    border-bottom: var(--rule);
    padding: 0 30px;
}

.channel-brand {
    color: var(--ink);
    font-family: var(--display);
    font-size: 1.05rem;
    font-weight: 500;
    letter-spacing: -.005em;
}

.single-channel-nav .nav-link {
    border-bottom: 2px solid transparent;
    margin: 0 12px;
    padding: 14px 0 !important;
    font-family: var(--mono);
    font-size: .76rem;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--ink-soft);
    font-weight: 500;
}

.single-channel-nav .nav-item.active .nav-link,
.single-channel-nav .nav-item .nav-link:hover {
    border-color: var(--moss);
    color: var(--moss);
}

.single-channel-nav .navbar-nav {
    margin: 0 0 0 40px;
}

.channel-profile {
    bottom: 0;
    left: 0;
    padding: 1rem 30px;
    position: absolute;
    right: 0;
}

.channel-profile-img {
    background: var(--paper);
    border: 6px solid var(--paper);
    border-radius: 50%;
    height: 90px;
    width: 90px;
}

.social {
    color: var(--paper);
    float: right;
    margin: 62px 0 0;
}

    .social a {
        background: var(--moss);
        border-radius: 2px;
        color: var(--paper);
        font-family: var(--mono);
        font-size: .7rem;
        font-weight: 500;
        padding: 5px 10px;
        text-transform: uppercase;
        letter-spacing: .1em;
    }

/* ─── CATEGORY SLIDER (legacy) ─────────────────────────────── */
.category-item {
    background: var(--paper);
    border: var(--rule);
    border-radius: 2px;
    box-shadow: var(--shadow-sm);
    margin: 6px 2px;
    padding: 24px 12px;
    text-align: center;
    transition: border-color .25s, box-shadow .25s;
}

    .category-item:hover {
        border-color: var(--moss-line);
        box-shadow: var(--shadow);
    }

    .category-item img {
        background: var(--paper);
        border: 1px solid var(--moss-line);
        border-radius: 50%;
        height: 60px;
        margin: 1px 0 8px;
        object-fit: scale-down;
        transform: scale(1);
        width: 60px;
        transition: transform .35s ease;
    }

    .category-item:hover img {
        transform: scale(1.09);
    }

    .category-item h6 {
        font-family: var(--display);
        font-size: .92rem;
        font-weight: 500;
        margin: 5px 0 3px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        color: var(--ink);
    }

    .category-item p {
        font-family: var(--mono);
        font-size: .68rem;
        font-weight: 500;
        margin: 0;
        color: var(--muted);
        text-transform: uppercase;
        letter-spacing: .12em;
    }

/* ─── PROGRAMACAO LIVE / VIDEO MODERATOR ───────────────────── */
.programacao-live {
    margin-top: 30px;
}

    .programacao-live h2 {
        font-family: var(--display);
        color: var(--ink);
        font-size: 1.85rem;
        font-weight: 500;
        text-align: center;
        letter-spacing: -.02em;
    }

    .programacao-live h4 {
        font-family: var(--display);
        font-size: 1.2rem;
        text-align: center;
        color: var(--ink-soft);
        font-style: italic;
        font-weight: 400;
    }

    .programacao-live table {
        border: var(--rule);
        border-radius: 2px;
        overflow: hidden;
        background: var(--paper);
        font-family: var(--body);
    }

        .programacao-live table td:first-child {
            width: 20%;
            font-family: var(--mono);
            font-size: .82rem;
            color: var(--moss);
            font-weight: 500;
        }

        .programacao-live table tr:nth-child(odd) {
            background: var(--moss-tint);
        }

        .programacao-live table tr:first-child {
            background: var(--moss);
            color: var(--paper);
            font-family: var(--mono);
            text-transform: uppercase;
            letter-spacing: .12em;
            font-size: .7rem;
        }

            .programacao-live table tr:first-child td {
                color: var(--paper);
                font-family: var(--mono);
            }

        .programacao-live table td,
        .programacao-live table th {
            padding: .65rem 1rem;
            vertical-align: top;
            border-bottom: 1px solid var(--line-soft);
        }

.kWidgetIframeContainer {
    max-width: 100% !important;
}

.content-moderator {
    padding: 8px;
    background-color: var(--paper) !important;
    color: var(--ink) !important;
    border: var(--rule);
    border-radius: 2px;
}

    .content-moderator h3,
    .content-moderator h4,
    .content-moderator h5,
    .content-moderator small {
        color: var(--ink) !important;
        font-family: var(--display);
        font-weight: 500;
    }

    .content-moderator small {
        font-family: var(--body);
        font-weight: 400;
    }

.video-moderador {
    padding: 6px;
    background-color: var(--paper) !important;
    border: var(--rule);
    border-radius: 2px;
}

    .video-moderador .plyr--video {
        max-height: 440px;
    }

    .video-moderador .kWidgetIframeContainer {
        height: 250px !important;
    }

    .video-moderador .plyr.plyr--video {
        width: 30%;
    }

.pg-moderador {
    padding: 20px 0 20px 20px;
}

.btn-live-left {
    display: block;
    float: left;
}

/* ─── ADMIN APP FALLBACKS ──────────────────────────────────── */
.wrapper {
    background: var(--bone);
    padding: 1.5rem;
}

.page-title-box {
    background: var(--paper);
    border: var(--rule);
    border-radius: 2px;
    padding: 1.1rem 1.5rem;
    margin-bottom: 1.5rem;
    box-shadow: var(--shadow-sm);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
}

.breadcrumb {
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    font-family: var(--mono);
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .14em;
}

.breadcrumb-item a {
    color: var(--moss);
    text-decoration: none;
}

.breadcrumb-item.active {
    color: var(--moss-deep);
    font-weight: 600;
}

.breadcrumb-item + .breadcrumb-item::before {
    color: var(--muted);
}

.card {
    background: var(--paper);
    border: var(--rule) !important;
    border-radius: 2px !important;
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

.card-body {
    padding: 1.5rem !important;
}

.mini-stat {
    position: relative;
    margin-bottom: 1.5rem;
}

    .mini-stat .mini-stat-icon {
        position: absolute;
        top: 1rem;
        right: 1rem;
        opacity: .9;
    }

        .mini-stat .mini-stat-icon i {
            color: var(--moss);
            font-size: 2.4rem;
            line-height: 1;
        }

    .mini-stat h6 {
        color: var(--muted) !important;
        font-family: var(--mono);
        font-size: .68rem;
        letter-spacing: .18em;
        text-transform: uppercase;
        font-weight: 500;
    }

    .mini-stat h4 {
        font-family: var(--display);
        color: var(--ink);
        font-weight: 500;
        font-size: 2rem;
        letter-spacing: -.015em;
    }

.table.table-striped,
.table.table-bordered,
.table.dataTable {
    background: var(--paper);
    border: var(--rule) !important;
    border-radius: 2px;
    overflow: hidden;
    font-family: var(--body);
    font-size: .9rem;
}

    .table.table-striped thead th,
    .table.table-bordered thead th,
    .table.dataTable thead th {
        background: var(--moss-tint) !important;
        color: var(--moss-deep) !important;
        font-family: var(--mono);
        text-transform: uppercase;
        letter-spacing: .12em;
        font-size: .68rem;
        font-weight: 600;
        padding: .9rem 1rem !important;
        border: none !important;
        border-bottom: 1px solid var(--moss-line) !important;
    }

    .table.table-striped tbody tr:nth-of-type(odd) {
        background: var(--moss-tint) !important;
    }

    .table.table-bordered td, .table.table-bordered th {
        border-color: var(--line-soft) !important;
    }

.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_paginate {
    color: var(--muted);
    font-family: var(--mono);
    font-size: .76rem;
    letter-spacing: .04em;
}

    .dataTables_wrapper .dataTables_paginate .paginate_button {
        background: var(--paper) !important;
        border: 1px solid var(--line) !important;
        color: var(--ink) !important;
        border-radius: 2px !important;
        padding: .4rem .8rem !important;
        margin: 0 2px !important;
        font-family: var(--mono);
    }

        .dataTables_wrapper .dataTables_paginate .paginate_button.current,
        .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
            background: var(--moss) !important;
            border-color: var(--moss) !important;
            color: var(--paper) !important;
        }

.dt-buttons .btn {
    font-size: .72rem;
    padding: .45rem .9rem;
}

#tableUserQuestions td:first-child {
    width: 20%;
    font-family: var(--display);
    font-style: italic;
    color: var(--ink-soft);
}

#tableUserQuestions tbody td:nth-child(3) {
    font-family: var(--mono);
    font-size: .78rem;
}

#tableUserQuestions button {
    margin-bottom: 10px;
    font-weight: 600;
}

#tableUserQuestions tbody tr:hover {
    background-color: var(--moss-tint);
}

div#selectedFilter {
    display: contents;
    margin-bottom: 20px;
}

.divisor {
    margin: 10px;
}

/* ─── LIVESTREAM PAGE (parity if rewired) ─────────────────── */
.live-page-header-container,
.live-stream-header-banner,
.banner-live,
.navHeaderBg-container {
    display: none !important;
}

.ds-client-header {
    background: var(--moss-deep) !important;
    color: var(--paper);
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.ds-client-header-title,
.ds-client-header-user {
    color: var(--paper);
}

    .ds-client-header-user a {
        color: var(--moss-soft);
    }

.ds-stream-container,
.stream-main-container {
    background: var(--bone) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    padding-bottom: 0 !important;
}

.player-client {
    padding: 0 !important;
}

/* ─── RESPONSIVE TWEAKS ────────────────────────────────────── */
@media (max-width: 991.98px) {
    .login-main-wrapper {
        padding: 2rem 1rem !important;
    }

    .login-main-left, .login-main-right {
        padding: 2rem 1.5rem !important;
    }

    .aquisicao-valor > .row > .col-md-12 > .row {
        gap: 1rem !important;
    }

    .login-main-body::after {
        display: none;
    }
}

@media screen and (max-width: 814px) {
    .sidebar-toggled #wrapper #content-wrapper .container-fluid {
        padding: 15px !important;
    }

    #wrapper #content-wrapper .container-fluid {
        padding-left: 108px !important;
        padding-top: 1rem !important;
    }

    .columns-video-content {
        padding-left: 2px !important;
    }
}

@media (max-width: 767.98px) {
    .video-block.section-padding {
        padding: 2rem .85rem;
    }

    .main-title h5 {
        font-size: 1.25rem;
    }

    .channels-card-body, .video-card-body {
        padding: 1rem !important;
    }

    footer {
        padding: 2.4rem 1.25rem !important;
    }

    .login-main-wrapper > .container {
        max-width: 100%;
    }

    .login-main-left h5 {
        font-size: 1.1rem;
    }

    .aquisicao-valor > .row > .col-md-12 > .row > div[style*="border-right"] {
        border-right: none !important;
        border-bottom: 1px solid var(--line) !important;
        padding-right: 0 !important;
        padding-bottom: 1.5rem !important;
    }
}

@media screen and (max-width: 430px) {
    .sidebar-toggled .video-card-image .overlay-play,
    .sidebar-toggled .upload-details .overlay-play {
        font-size: 75px !important;
    }

        .sidebar-toggled .video-card-image .overlay-play .overlay-alert-text {
            font-size: 13pt !important;
        }

    .sidebar-toggled .video-card-image .overlay-play-expired {
        font-size: 50px !important;
    }

        .sidebar-toggled .video-card-image .overlay-play-expired .overlay-alert-text {
            font-size: 13pt !important;
        }

    .sidebar-toggled .video-card-body .btn {
        font-size: 10pt !important;
    }

    .sidebar-toggled .sticky-footer {
        margin-left: 0 !important;
    }

    .aquisicao-valor table {
        min-width: 0 !important;
    }

    .video-card-image .overlay-play,
    .upload-details .overlay-play {
        font-size: 60px !important;
    }

        .video-card-image .overlay-play .overlay-alert-text {
            font-size: 10pt !important;
        }

    .video-card-image .overlay-play-expired {
        font-size: 30px !important;
    }

        .video-card-image .overlay-play-expired .overlay-alert-text {
            font-size: 9pt !important;
        }

    .video-card-body .btn {
        font-size: 6pt !important;
    }

    .sticky-footer {
        margin-left: 76px !important;
    }
}

.overlay-alert .overlay-alert-text:last-child {
    display: none !important;
}

#btnAC,
.btn-cart-checkout,
li.carrinho,
.carrinho-interno,
.lista-carrinho {
    display: none !important;
}