/* CookieConsent theme. Overrides the library's :root variables (Vendor/cookieconsent/cookieconsent.css)
   on #cc-main, so it must load after that file. The app's own theme variables are scoped to
   #offcanvasTopUsers in main.css, hence the literal values here. */
#cc-main {
    --cc-font-family: "Poppins", sans-serif;
    --cc-modal-border-radius: 14px;
    --cc-btn-border-radius: 10px;

    --cc-bg: #ffffff;
    --cc-primary-color: #1f2937;
    --cc-secondary-color: #6b7280;
    /* #35d3c9 on white is too faint for text; a darker teal keeps links readable. */
    --cc-link-color: #0f766e;

    /* White text on the turquoise to match the app's own #35d3c9 buttons (btn-color-primary-i10 text-light). */
    --cc-btn-primary-bg: #35d3c9;
    --cc-btn-primary-color: #ffffff;
    --cc-btn-primary-border-color: #35d3c9;
    --cc-btn-primary-hover-bg: #23aaa0;
    --cc-btn-primary-hover-color: #ffffff;
    --cc-btn-primary-hover-border-color: #23aaa0;

    --cc-btn-secondary-bg: #e1f5f3;
    --cc-btn-secondary-color: #1f2937;
    --cc-btn-secondary-border-color: #e1f5f3;
    --cc-btn-secondary-hover-bg: #c6ece8;
    --cc-btn-secondary-hover-color: #0f172a;
    --cc-btn-secondary-hover-border-color: #c6ece8;

    --cc-separator-border-color: #e5e7eb;

    --cc-toggle-on-bg: #35d3c9;
    --cc-toggle-off-bg: #9ca3af;
    --cc-toggle-enabled-icon-color: #ffffff;
    --cc-toggle-readonly-bg: #d1d5db;

    --cc-cookie-category-block-bg: #f8f9fa;
    --cc-cookie-category-block-border: #e5e7eb;
    --cc-cookie-category-block-hover-bg: #e1f5f3;
    --cc-cookie-category-block-hover-border: #c6ece8;
    --cc-cookie-category-expanded-block-hover-bg: #e1f5f3;

    --cc-footer-bg: #f8f9fa;
    --cc-footer-border-color: #e5e7eb;
}

#cc-main .cm,
#cc-main .pm {
    box-shadow: 0 8px 24px rgba(0, 0, 0, .08);
    border: 1px solid #e5e7eb;
}

/* Tutorial video modal: shown in place of the YouTube embed until the "marketing" category is
   accepted (Index.cshtml #videoConsentNotice, Modals.js). Display is toggled by d-none/d-flex. */
.video-consent {
    padding: 1.5rem;
    background: #f8f9fa;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    /* .ratio pins this to the 16:9 box; on narrow modals the content can be taller than that. */
    overflow-y: auto;
}

.video-consent__title {
    margin-bottom: .5rem;
    color: #1f2937;
    font-weight: 600;
}

.video-consent__text {
    max-width: 30rem;
    margin-bottom: 1.25rem;
    color: #6b7280;
    font-size: .875rem;
    line-height: 1.5;
}

.video-consent__btn {
    padding: .4rem 1rem;
    border-radius: 6px;
    font-size: .875rem;
}

.video-consent__btn--outline {
    color: #1f2937;
    background: #ffffff;
    border: 1px solid #d1d5db;
}

    .video-consent__btn--outline:hover {
        color: #1f2937;
        background: #f3f4f6;
        border-color: #d1d5db;
    }

.video-consent__channel {
    margin-top: .75rem;
    color: #9ca3af;
    font-size: .75rem;
    text-decoration: none;
}

    .video-consent__channel:hover {
        color: #6b7280;
        text-decoration: underline;
    }

/* "Privacy" section at the bottom of the Settings offcanvas (Index.cshtml). Kept visually apart from
   the unit setting and its Save button, since cookie choices are saved by the CookieConsent panel. */
.settings-section-title {
    margin-bottom: .75rem;
    color: #485368;
    font-size: .8rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.settings-cookie-row__text {
    color: #6b7280;
    font-size: .875rem;
}

/* .btn-color-primary-i9 removes the border (main.css, !important), which leaves Save 2px shorter
   than the outlined Manage button. A transparent 1px border gives both the same height. */
#saveSettings {
    border: 1px solid transparent !important;
}

/* Bottom-right icon buttons (cookie settings, contact mail) on the auth/standalone pages
   (Login, Register, ForgotPassword, ...), Pages/Shared/_CornerButtons.cshtml. Square, in the
   theme's blue (.btn-color-primary-i9) with its dark hover. */
.corner-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 51px;
    height: 51px;
    padding: 0;
    vertical-align: middle;
    color: #ffffff;
    background: #74b9ff;
    border: none;
    border-radius: 10px;
    font-size: 20px;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.3s linear;
}

    /* The mail button is an <a>: keep generic link hover styles (underline) off the icon. */
    .corner-btn:hover,
    .corner-btn:focus-visible {
        text-decoration: none;
        color: #ffffff;
        background: #161D39;
    }