/* =============================================================
   login-components.css — iMessaging Portal
   Theme-aware styles for login/public layout.
   Requires _LoginThemeVars.cshtml loaded first.
   ============================================================= */

/* ── Buttons ───────────────────────────────────────────────── */
.btnCustomeStyle {
    background-color: var(--theme) !important;
    color: var(--font-main) !important;
    border-color: var(--font-main) !important;
}

    .btnCustomeStyle:hover {
        background-color: var(--font-main) !important;
        color: var(--theme) !important;
        border-color: var(--theme) !important;
    }

    .btnCustomeStyle:focus-visible, .btnCustomeStyle:focus {
        background-color: var(--font-main) !important;
        color: var(--theme) !important;
        border-color: var(--theme) !important;
        outline: 0;
        box-shadow: 0 0 0 0.10rem var(--theme);
    }

.inputCustomeStyle:focus {
    color: var(--theme) !important;
    border-color: var(--theme) !important;
    outline: 0;
    box-shadow: 0 0 0 0.10rem var(--theme);
}

/* ── Footer ────────────────────────────────────────────────── */
.footerCustomeStyle {
    margin-left: 0 !important;
    background-color: var(--theme) !important;
    color: var(--font-main) !important;
    border-top: none !important;
}

/* ── Back to top ───────────────────────────────────────────── */
.back-to-top {
    background-color: var(--theme) !important;
    border: 1px solid var(--font-main) !important;
}

/* ── Card / text colors ────────────────────────────────────── */
.card-title {
    color: var(--theme) !important;
}

.customeFontColor {
    color: var(--theme) !important;
}

h3.title {
    font-size: 28px;
    font-weight: 700;
    color: var(--theme);
    margin-bottom: 25px;
    font-family: "Poppins",sans-serif;
}

p.sub-title {
    color: var(--theme);
    font-size: 14px;
    margin-bottom: 25px;
    font-family: "Poppins",sans-serif;
    text-align: center;
}

p span.phone-number {
    display: block;
    color: var(--theme);
    font-weight: 600;
}

/* ── Modal header ──────────────────────────────────────────── */
.modal-header {
    background-color: var(--theme) !important;
    color: var(--font-main) !important;
}

/* ── Checkbox ──────────────────────────────────────────────── */
.form-check-input:focus {
    border-color: var(--theme) !important;
    box-shadow: 0 0 0 0.25rem var(--theme-r1) !important;
}

.form-check-input:checked {
    background-color: var(--theme) !important;
    border-color: var(--theme) !important;
}

/* ── Toggle switch colors ──────────────────────────────────── */
:root {
    --switches-bg-color: var(--font-main);
    --switches-label-color: var(--theme);
    --switch-bg-color: var(--theme);
    --switch-text-color: var(--font-main);
}

.switches-container {
    background: var(--switches-bg-color);
}

    .switches-container label {
        color: var(--switches-label-color);
    }

.switch {
    background: var(--switch-bg-color);
}

    .switch div {
        color: var(--switch-text-color);
    }

/* ── Language globe colors ─────────────────────────────────── */
.lp-lang-drop-header {
    color: var(--theme);
}

.lp-lang-item:hover {
    background: var(--theme-r1);
    color: var(--theme);
}

.lp-lang-item--active {
    background: var(--theme-r1);
    color: var(--theme);
    font-weight: 600;
}

.lp-lang-check {
    color: var(--theme);
}

/* ── Language dropdown colors ──────────────────────────────── */
.language_dropdown-item {
    color: var(--theme);
    background: var(--theme-r1);
}

    .language_dropdown-item:hover {
        background-color: var(--theme-r2);
        color: var(--theme);
    }

    .language_dropdown-item.active {
        background-color: var(--theme);
        color: #fff;
    }

.language-dropdown-menu-arrow::before {
    border-bottom: 1px solid var(--theme);
    border-right: 1px solid var(--theme);
}

/* ── Footer lang button ────────────────────────────────────── */
.footer-lang-btn {
    display: inline-block;
    padding: 3px 12px;
    border-radius: 20px;
    border: 1px solid var(--font-main);
    color: var(--font-main) !important;
    font-size: 13px;
    text-decoration: none;
    transition: background-color .2s, color .2s;
    white-space: nowrap;
}

    .footer-lang-btn:hover {
        background-color: var(--font-main);
        color: var(--theme) !important;
    }

.footer-lang-btn--active {
    background-color: var(--font-main);
    color: var(--theme) !important;
    font-weight: 500;
}

/* ── RTL input title ───────────────────────────────────────── */
html[dir="rtl"] .input-Title {
    font-size: 15px;
    font-weight: 700;
    padding-bottom: 5px;
    color: var(--theme) !important;
}

html[dir="rtl"] .secondaryColor {
    background-color: var(--theme-r1) !important;
}