/* ***************************************************************
 * OPEN VISTA — WHMCS Client Portal Brand Layer
 * -----------------------------------------------------------------
 * Restyles the WHMCS "twenty-one" theme to match the flagship site
 * https://openvista.ma (Odoo 17):
 *   - Hero gradient  135deg  #0F172A -> #024BB7 (55%) -> #5EB1FA
 *   - CTA yellow     #FFC107  (signature action colour of openvista.ma)
 *   - Primary blue   #227AFD  hover #1B62CA  deep #024BB7
 *   - Dark navy      #0F172A / footer #141E2E
 *   - Typography     "Abel" (Google Fonts), as used on openvista.ma
 * Loaded AFTER theme.min.css -> theme-brand.min.css, so everything
 * here wins. Scope the portal: my.openvista.ma.
 * *************************************************************** */

:root {
    --ov-blue: #227AFD;
    --ov-blue-600: #1B62CA;
    --ov-blue-700: #024BB7;
    --ov-blue-tint: #EAF2FF;
    --ov-sky: #5EB1FA;
    --ov-yellow: #FFC107;
    --ov-yellow-hover: #FFCA2C;
    --ov-navy: #0F172A;
    --ov-navy-2: #141E2E;
    --ov-navy-3: #1B2B4B;
    --ov-ink: #212529;
    --ov-muted: #6B7280;
    --ov-border: #E2E8F0;
    --ov-border-soft: #EDF1F7;
    --ov-bg: #FFFFFF;
    --ov-bg-soft: #F6F8FB;
    --ov-bg-soft-2: #F1F5F9;
    --ov-shadow-sm: 0 1px 2px rgba(15, 23, 42, .05), 0 2px 8px rgba(15, 23, 42, .04);
    --ov-shadow-md: 0 6px 18px rgba(15, 23, 42, .08);
    --ov-shadow-lg: 0 18px 44px rgba(15, 23, 42, .14);
    --ov-grad-hero: linear-gradient(135deg, #0F172A 0%, #024BB7 55%, #5EB1FA 100%);
    --ov-font: 'Abel', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

/* ===============================================================
   1. BASE / TYPOGRAPHY
   =============================================================== */
html {
    font-size: 16px;
}

body {
    font-family: var(--ov-font);
    color: var(--ov-ink);
    background-color: var(--ov-bg-soft) !important;
    letter-spacing: .012em;
}

body.primary-bg-color {
    background-color: var(--ov-bg-soft) !important;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--ov-font);
    color: var(--ov-navy);
    letter-spacing: .008em;
}

a {
    color: var(--ov-blue);
    transition: color .15s ease;
}

a:hover {
    color: var(--ov-blue-700);
}

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

.container { max-width: 1260px; }

/* ===============================================================
   2. BUTTONS
   =============================================================== */
.btn {
    border-radius: .5rem;
    font-size: 1rem;
}

.btn-lg { border-radius: .65rem; }
.btn-sm { border-radius: .4rem; }

.btn-primary {
    background-color: var(--ov-blue);
    border-color: var(--ov-blue);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:not(:disabled):not(.disabled).active,
.show > .btn-primary.dropdown-toggle {
    background-color: var(--ov-blue-600);
    border-color: var(--ov-blue-600);
}

.btn-outline-primary {
    color: var(--ov-blue);
    border-color: var(--ov-blue);
}

.btn-outline-primary:hover {
    background-color: var(--ov-blue);
    border-color: var(--ov-blue);
}

.btn-outline-primary:not(:disabled):not(.disabled):active {
    background-color: var(--ov-blue-700);
    border-color: var(--ov-blue-700);
}

/* Signature CTA buttons (yellow pill, as on openvista.ma) */
.ov-cta,
a.ov-cta,
.btn-ov-cta {
    background-color: var(--ov-yellow) !important;
    border: 1px solid var(--ov-yellow) !important;
    color: var(--ov-ink) !important;
    font-weight: 700;
}

.ov-cta:hover,
.ov-cta:focus,
.btn-ov-cta:hover,
.btn-ov-cta:focus {
    background-color: var(--ov-yellow-hover) !important;
    border-color: var(--ov-yellow-hover) !important;
    color: var(--ov-ink) !important;
    transform: translateY(-1px);
}

/* Ghost (outline light) CTA for dark backgrounds */
.ov-ghost,
a.ov-ghost {
    border: 1px solid rgba(255, 255, 255, .85) !important;
    color: #FFFFFF !important;
    background-color: rgba(255, 255, 255, .08) !important;
    font-weight: 400;
}

.ov-ghost:hover,
.ov-ghost:focus {
    background-color: rgba(255, 255, 255, .18) !important;
    border-color: #FFFFFF !important;
    color: #FFFFFF !important;
}

/* ===============================================================
   3. PAGE CHROME — HEADER / NAV
   =============================================================== */
header.header {
    background-color: #FFFFFF;
    box-shadow: 0 1px 0 var(--ov-border-soft), 0 6px 18px rgba(15, 23, 42, .03);
}

header.header .logo-img {
    max-height: 56px;
    width: auto;
}

header.header .navbar { padding-top: .55rem; padding-bottom: .55rem; }

/* navbar link styling (white bar, dark-navy text, blue hover — like openvista.ma) */
.navbar-light .navbar-nav .nav-link,
.navbar-light .navbar-nav > li > a {
    color: var(--ov-navy-2) !important;
    font-size: 1.02rem;
    font-weight: 400;
    letter-spacing: .02em;
}

.navbar-light .navbar-nav .nav-link:hover,
.navbar-light .navbar-nav > li > a:hover {
    color: var(--ov-blue) !important;
}

.navbar-light .navbar-nav li.open > a,
.navbar-light .navbar-nav li.active > a,
.navbar-light .navbar-nav .show > a {
    color: var(--ov-blue-700) !important;
}

/* main menu wrapper: white, hairline separation */
.main-navbar-wrapper {
    background-color: #FFFFFF;
    border-top: 1px solid var(--ov-border-soft);
    box-shadow: 0 10px 24px -22px rgba(15, 23, 42, .35);
}

.main-navbar-wrapper .navbar-nav > li > a {
    padding: .55rem .9rem;
}

/* dropdowns */
.dropdown-menu {
    border: 1px solid var(--ov-border-soft);
    border-top: 2px solid var(--ov-blue);
    border-radius: .65rem;
    box-shadow: var(--ov-shadow-lg);
    padding: .4rem;
}

.dropdown-item {
    border-radius: .45rem;
    color: var(--ov-navy-2);
}

.dropdown-item:hover,
.dropdown-item:focus {
    background-color: var(--ov-blue-tint);
    color: var(--ov-blue-700);
}

/* Search box */
header.header .search .form-control,
header.header .search {
    border-radius: 2rem;
}

header.header .search .input-group-text,
header.header .search .btn {
    background-color: transparent;
    border: 0;
    color: var(--ov-muted);
}

/* toolbar buttons (cart / hamburger) */
header.header .toolbar .nav-link {
    border-radius: 2rem;
    border: 1px solid var(--ov-border);
    color: var(--ov-navy-2);
    background-color: #FFFFFF;
}

header.header .toolbar .nav-link:hover {
    border-color: var(--ov-blue);
    color: var(--ov-blue);
}

header.header .cart-btn .badge {
    background-color: var(--ov-yellow) !important;
    color: var(--ov-ink) !important;
    font-weight: 700;
}

/* "Compte" / account entry => blue pill in header */
#Secondary_Navbar-Account > a,
#Secondary_Navbar-Account > a.dropdown-toggle {
    background-color: var(--ov-blue) !important;
    color: #FFFFFF !important;
    border-radius: 2rem !important;
    padding: .42rem 1.15rem !important;
    margin: 0 .15rem;
    font-weight: 400;
}

#Secondary_Navbar-Account > a:hover {
    background-color: var(--ov-blue-600) !important;
    color: #fff !important;
}

/* logged-in top bar: navy like the openvista identity */
header.header .topbar {
    background-color: var(--ov-navy) !important;
    color: rgba(255, 255, 255, .75) !important;
}

header.header .topbar .btn,
header.header .topbar .input-group-text {
    color: rgba(255, 255, 255, .75) !important;
}

header.header .topbar a:hover { color: #fff !important; }

/* ===============================================================
   4. BREADCRUMB
   =============================================================== */
.master-breadcrumb {
    background-color: var(--ov-bg-soft-2) !important;
    border-top: 1px solid var(--ov-border-soft);
    border-bottom: 1px solid var(--ov-border-soft);
}

.master-breadcrumb .breadcrumb { padding: .6rem 0; }

.master-breadcrumb .breadcrumb-item a { color: var(--ov-blue); }

.master-breadcrumb .breadcrumb-item.active { color: var(--ov-muted); }

/* ===============================================================
   5. MAIN CONTENT / PANELS / CARDS
   =============================================================== */
section#main-body {
    padding: 1.6rem 0 3rem;
    min-height: 380px;
}

.card {
    border: 1px solid var(--ov-border);
    border-radius: .8rem;
    box-shadow: var(--ov-shadow-sm);
}

.card-header {
    background-color: #FFFFFF;
    border-bottom: 1px solid var(--ov-border-soft);
    border-radius: .8rem .8rem 0 0 !important;
}

.card-footer {
    background-color: var(--ov-bg-soft);
    border-top: 1px solid var(--ov-border-soft);
    border-radius: 0 0 .8rem .8rem !important;
}

.panel,
.panel-default {
    border-color: var(--ov-border);
    border-radius: .8rem;
}

.panel-heading {
    background-color: #FFFFFF !important;
    border-bottom: 1px solid var(--ov-border-soft);
    color: var(--ov-navy);
}

/* sidebars */
.sidebar .panel-heading,
.sidebar .card-header {
    font-weight: 400;
    letter-spacing: .04em;
    text-transform: uppercase;
    font-size: .86rem;
    color: var(--ov-navy-3);
}

.sidebar .nav-item a {
    color: var(--ov-navy-2);
}

.sidebar .nav-item a:hover,
.sidebar .nav-item.active a {
    color: var(--ov-blue-700);
    background-color: var(--ov-blue-tint);
    border-radius: .5rem;
}

/* ===============================================================
   6. FORMS
   =============================================================== */
.form-control {
    border-radius: .5rem;
    border-color: var(--ov-border);
}

.form-control:focus {
    border-color: var(--ov-blue);
    box-shadow: 0 0 0 .2rem rgba(34, 122, 253, .15);
}

.input-group-merge .input-group-text {
    background-color: #FFFFFF;
    border-color: var(--ov-border);
    color: var(--ov-muted);
}

.input-group-merge .form-control:focus {
    border-color: var(--ov-blue);
}

/* ===============================================================
   7. TABLES / LISTS
   =============================================================== */
.table thead th {
    background-color: var(--ov-bg-soft-2);
    color: var(--ov-navy-3);
    border-bottom: 1px solid var(--ov-border);
    font-size: .95rem;
}

.table tbody + tbody { border-top: 1px solid var(--ov-border); }

/* ===============================================================
   8. CLIENT AREA HOME (logged in)
   =============================================================== */
.client-home-cards .card {
    border-radius: .8rem;
    border: 1px solid var(--ov-border);
    transition: box-shadow .2s ease, transform .2s ease;
}

.client-home-cards .card:hover {
    box-shadow: var(--ov-shadow-md);
    transform: translateY(-2px);
}

.client-home-cards .card-header { font-weight: 400; color: var(--ov-navy); }

.client-home-cards .card-header .btn { background-color: var(--ov-blue); }

/* tinted left accents -> brand blues */
.card-accent-midnight-blue { border-top-color: #024BB7 !important; }
.card-accent-teal { border-top-color: #2AA9C9 !important; }
.card-accent-pomegranate { border-top-color: #E8503A !important; }
.card-accent-sun-flower { border-top-color: #FFC107 !important; }
.card-accent-asbestos { border-top-color: #7F8C8D !important; }
.card-accent-green { border-top-color: #1FAE67 !important; }

/* ===============================================================
   9. HOME PAGE (OV landing)
   =============================================================== */
.ov-page-home { margin: -1.6rem 0 0; }

/* ---- Hero ---- */
.ov-hero {
    border-radius: 0 0 1.4rem 1.4rem;
    margin: 0 0 2.2rem;
    background:
        radial-gradient(1100px 480px at 85% -10%, rgba(94, 177, 250, .35), transparent 60%),
        radial-gradient(900px 420px at -10% 110%, rgba(2, 75, 183, .55), transparent 60%),
        var(--ov-grad-hero);
    color: #FFFFFF;
    position: relative;
    overflow: hidden;
}

/* faint tech grid */
.ov-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px);
    background-size: 46px 46px;
    pointer-events: none;
}

.ov-hero-inner {
    position: relative;
    z-index: 1;
    max-width: 880px;
    margin: 0 auto;
    padding: 3.4rem 1.25rem 3rem;
    text-align: center;
}

.ov-badge {
    display: inline-block;
    background: rgba(94, 177, 250, .24);
    border: 1px solid rgba(255, 255, 255, .38);
    color: #FFFFFF;
    border-radius: 50rem;
    padding: .42rem 1.05rem;
    font-size: .95rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    margin-bottom: 1.15rem;
    backdrop-filter: blur(4px);
}

.ov-hero-title {
    color: #FFFFFF;
    font-size: clamp(2rem, 4.6vw, 3.35rem);
    line-height: 1.08;
    font-weight: 400;
    letter-spacing: .005em;
    margin-bottom: .9rem;
}

.ov-hero-lead {
    color: rgba(255, 255, 255, .9);
    font-size: 1.18rem;
    line-height: 1.55;
    max-width: 720px;
    margin: 0 auto 1.6rem;
}

.ov-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .7rem;
    justify-content: center;
    margin-bottom: 1.7rem;
}

.ov-hero-actions .btn {
    border-radius: 50rem;
    padding: .6rem 1.6rem;
    font-size: 1.08rem;
}

.ov-hero-chips {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: .4rem 1.5rem;
    justify-content: center;
    color: rgba(255, 255, 255, .78);
    font-size: .98rem;
}

/* ---- Generic section ---- */
.ov-section { padding: .6rem 0 1.4rem; }

.ov-section-head {
    text-align: center;
    max-width: 720px;
    margin: 0 auto 1.9rem;
}

.ov-section-title {
    font-size: clamp(1.55rem, 3vw, 2.15rem);
    margin-bottom: .4rem;
    color: var(--ov-navy);
}

.ov-section-sub {
    color: var(--ov-muted);
    font-size: 1.08rem;
    margin: 0;
}

/* ---- Product cards ---- */
.ov-grid-products {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
    gap: 1.2rem;
}

.ov-pcard {
    display: block;
    background: #FFFFFF;
    border: 1px solid var(--ov-border);
    border-radius: 1rem;
    padding: 1.7rem 1.5rem 1.4rem;
    text-align: left;
    box-shadow: var(--ov-shadow-sm);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
    color: var(--ov-ink);
}

.ov-pcard:hover {
    transform: translateY(-4px);
    box-shadow: var(--ov-shadow-md);
    border-color: rgba(34, 122, 253, .45);
    color: var(--ov-ink);
    text-decoration: none;
}

.ov-pcard-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.1rem;
    height: 3.1rem;
    border-radius: .9rem;
    background: var(--ov-blue-tint);
    font-size: 1.7rem;
    margin-bottom: .9rem;
}

.ov-pcard-title {
    font-size: 1.3rem;
    margin: 0 0 .35rem;
    color: var(--ov-navy);
    font-weight: 400;
}

.ov-pcard-txt {
    color: var(--ov-muted);
    margin: 0 0 .9rem;
    font-size: 1.02rem;
    min-height: 2.9em;
}

.ov-pcard-link {
    color: var(--ov-blue);
    font-weight: 400;
    font-size: 1.02rem;
}

.ov-pcard:hover .ov-pcard-link { color: var(--ov-blue-700); }

.ov-pcard-link i { font-size: .8rem; vertical-align: middle; margin-left: .3rem; }

/* ---- Quick-access tiles ---- */
.ov-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1.1rem;
}

.ov-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: #FFFFFF;
    border: 1px solid var(--ov-border);
    border-radius: 1rem;
    padding: 1.5rem 1rem 1.25rem;
    box-shadow: var(--ov-shadow-sm);
    color: var(--ov-navy-2);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.ov-tile:hover {
    transform: translateY(-3px);
    box-shadow: var(--ov-shadow-md);
    border-color: rgba(34, 122, 253, .4);
    color: var(--ov-blue-700);
    text-decoration: none;
}

.ov-tile .ov-tile-ico {
    width: 3.4rem;
    height: 3.4rem;
    border-radius: 1rem;
    background: var(--ov-blue-tint);
    color: var(--ov-blue-700);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.55rem;
    margin-bottom: .75rem;
}

.ov-tile:hover .ov-tile-ico {
    background: var(--ov-blue);
    color: #fff;
}

.ov-tile .ov-tile-label {
    font-size: 1.04rem;
    line-height: 1.2;
}

/* ---- Bottom CTA band ---- */
.ov-cta-band {
    margin: 2.2rem 0 0;
    border-radius: 1.3rem;
    background:
        radial-gradient(760px 300px at 90% -20%, rgba(94, 177, 250, .3), transparent 60%),
        linear-gradient(120deg, #0F172A 0%, #0B2556 45%, #024BB7 100%);
    color: #fff;
    text-align: center;
    padding: 2.9rem 1.5rem;
    position: relative;
    overflow: hidden;
}

.ov-cta-band h2 {
    color: #fff;
    font-size: clamp(1.5rem, 3vw, 2.2rem);
    margin-bottom: .5rem;
}

.ov-cta-band p {
    color: rgba(255, 255, 255, .82);
    font-size: 1.1rem;
    max-width: 620px;
    margin: 0 auto 1.5rem;
}

.ov-cta-band .btn { border-radius: 50rem; padding: .6rem 1.7rem; font-size: 1.06rem; }

/* ===============================================================
   10. FOOTER (dark navy, openvista.ma style)
   =============================================================== */
footer.ov-footer {
    background-color: var(--ov-navy-2);
    background-image:
        radial-gradient(900px 300px at 15% -40%, rgba(2, 75, 183, .35), transparent 60%);
    color: #B8C2D4;
    font-size: .98rem;
    padding: 3.2rem 0 1.2rem;
    margin-top: 3rem;
}

footer.ov-footer h5 {
    color: #FFFFFF;
    font-size: 1.08rem;
    letter-spacing: .05em;
    text-transform: uppercase;
    margin-bottom: 1rem;
    font-weight: 400;
}

footer.ov-footer a {
    color: #B8C2D4;
}

footer.ov-footer a:hover {
    color: #FFFFFF;
    text-decoration: none;
}

footer.ov-footer .ov-f-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

footer.ov-footer .ov-f-list li { margin-bottom: .55rem; }

footer.ov-footer .ov-f-list a {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
}

footer.ov-footer .ov-f-list a:hover { transform: translateX(2px); color: var(--ov-sky); }

.ov-footer-brand .ov-footer-logo {
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: .12em;
    color: #FFFFFF;
    margin-bottom: .7rem;
}

.ov-footer-brand p { margin-bottom: .8rem; line-height: 1.55; }

.ov-f-contact li {
    display: flex;
    align-items: flex-start;
    gap: .55rem;
    margin-bottom: .55rem;
}

.ov-f-contact i {
    color: var(--ov-sky);
    margin-top: .18rem;
}

.ov-footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, .12);
    margin-top: 2rem;
    padding-top: 1.15rem;
    color: #7C8AA0;
    font-size: .9rem;
    align-items: center;
}

.ov-footer-bottom .copyright { margin: 0; }

.ov-footer-bottom .btn {
    background-color: rgba(255, 255, 255, .08);
    border: 0;
    color: #CFD8E6;
    border-radius: 2rem;
    padding: .25rem .9rem;
}

/* legacy stock footer bits inside our navy footer */
footer.ov-footer .nav-link { color: #B8C2D4; }
footer.ov-footer .nav-link:hover { color: #fff; }

/* ===============================================================
   11. LOGIN / REGISTER & SMALL SCREENS
   =============================================================== */
.login-form .card { border-radius: 1rem; }

.pw-strength-meter .progress { background-color: var(--ov-bg-soft-2); }

.alert { border-radius: .7rem; }

/* badges */
.badge-info { background-color: var(--ov-blue); }
.badge-primary { background-color: var(--ov-blue); }

/* back to top */
#backtotop,
#toTop {
    background-color: var(--ov-blue);
    border: 0;
    border-radius: 50%;
    color: #fff;
}

/* responsive header cleanup */
@media (max-width: 1199.98px) {
    header.header .search { display: none; }
    .main-navbar-wrapper .navbar-collapse {
        padding: .75rem 0 .9rem;
    }
    .main-navbar-wrapper .navbar-collapse .navbar-nav {
        align-items: flex-start;
    }
}

@media (max-width: 767.98px) {
    .ov-hero-inner { padding: 2.4rem 1rem 2.2rem; }
    .ov-hero-lead { font-size: 1.08rem; }
    .ov-grid-products { grid-template-columns: 1fr; }
    .ov-tiles { grid-template-columns: repeat(2, 1fr); }
}

/* ==========================================================================
   OpenVista round-2 (2026-10-21): internal-linking blocks + domain FAQ
   Appended to custom.css (source); ov-site.min.css = custom.css + ov-i18n.css
   ========================================================================== */
.ov-related-list li { margin-bottom: .45rem; padding-left: 1.1rem; position: relative; }
.ov-related-list li:before { content: "\2192"; position: absolute; left: 0; color: #024BB7; }
.ov-related-list a { color: #024BB7; text-decoration: underline; }
.ov-guides { margin: 2.5rem 0 0; padding: 1.75rem 0; background: #f8fafc; border-top: 1px solid #e5e7eb; }
.ov-guides h2 { margin-bottom: 1rem; }
.ov-guides-list { columns: 2; column-gap: 2rem; }
.ov-guides-list li { margin-bottom: .45rem; break-inside: avoid; }
.ov-guides-list a { color: #024BB7; }
.ov-domain-faq { max-width: 900px; }
.ov-domain-faq .ov-faq-list details { border-bottom: 1px solid #e5e7eb; padding: .6rem 0; }
.ov-domain-faq .ov-faq-list summary { cursor: pointer; font-weight: 600; }
.ov-domain-faq .ov-faq-list p { margin: .5rem 0 0; }
@media (max-width: 767.98px) { .ov-guides-list { columns: 1; } }
/* ============================================================
   Open Vista — language switcher (header + footer) — 2026-10-20
   ============================================================ */
.ov-lang-switch {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    border: 1px solid rgba(15, 23, 42, .18);
    border-radius: 999px;
    padding: 2px;
    background: #fff;
    line-height: 1;
    vertical-align: middle;
}
.ov-lang-switch .ov-lang-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    height: 28px;
    padding: 0 9px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .04em;
    color: #0f172a;
    text-decoration: none;
    transition: background-color .15s ease, color .15s ease;
}
.ov-lang-switch .ov-lang-link:hover,
.ov-lang-switch .ov-lang-link:focus {
    background: #eef2f7;
    color: #024bb7;
    text-decoration: none;
}
.ov-lang-switch .ov-lang-link.is-active {
    background: #024bb7;
    color: #fff;
}
.navbar-nav.toolbar .ov-lang-nav {
    display: flex;
    align-items: center;
}
/* Footer variant: dark background */
.ov-footer .ov-lang-switch,
.ov-lang-switch-footer {
    border-color: rgba(255, 255, 255, .35);
    background: rgba(255, 255, 255, .06);
    margin-right: 14px;
}
.ov-footer .ov-lang-switch .ov-lang-link,
.ov-lang-switch-footer .ov-lang-link {
    color: #fff;
}
.ov-footer .ov-lang-switch .ov-lang-link:hover,
.ov-footer .ov-lang-switch .ov-lang-link:focus,
.ov-lang-switch-footer .ov-lang-link:hover,
.ov-lang-switch-footer .ov-lang-link:focus {
    background: rgba(255, 255, 255, .18);
    color: #fff;
}
.ov-footer .ov-lang-switch .ov-lang-link.is-active,
.ov-lang-switch-footer .ov-lang-link.is-active {
    background: #ffc107;
    color: #0f172a;
}
@media (max-width: 767.98px) {
    .ov-lang-switch .ov-lang-link { min-width: 30px; height: 26px; padding: 0 7px; font-size: 11px; }
}
/* RTL: keep the pill order when the document direction flips */
html[dir="rtl"] .ov-lang-switch { direction: ltr; }