/* ===== Variables ===== */
:root {
    --smsalert-primary: #2a3f54;
    --smsalert-secondary: #016937;
    --smsalert-soft: rgba(42, 63, 84, .10);
    --smsalert-soft2: rgba(1, 105, 55, .10);
    --font-heading: 'Plus Jakarta Sans', system-ui, sans-serif;
    --font-body: 'DM Sans', system-ui, sans-serif;
}

/* ===== Base ===== */
body {
    font-family: var(--font-body);
    background: radial-gradient(1200px 520px at 70% 0%, rgba(42, 63, 84, .12), transparent 56%),
                radial-gradient(900px 420px at 10% 10%, rgba(1, 105, 55, .10), transparent 58%),
                #fff;
}

h1, h2, h3, h4, h5, h6,
.display-5, .h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--font-heading);
}

.glass {
    background: rgba(255, 255, 255, .80);
    backdrop-filter: blur(12px) saturate(170%);
}

.shadow-soft {
    box-shadow: 0 10px 30px rgba(2, 6, 23, .10);
}

.card-soft {
    background: rgba(255, 255, 255, .86);
    border: 1px solid rgba(226, 232, 240, .90);
    box-shadow: 0 8px 18px rgba(2, 6, 23, .05);
    transition: transform .18s ease, box-shadow .18s ease;
}

.card-soft:hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 36px rgba(2, 6, 23, .10);
}

.section-alt {
    background: rgba(248, 250, 252, .70);
}

/* ===== Navbar ===== */
.navbar {
    border-bottom: 1px solid rgba(226, 232, 240, .85);
}

.navbar .nav-link:hover,
.navbar .nav-link:focus,
.navbar .nav-link:focus-visible,
.navbar .nav-link:active {
    outline: none;
    box-shadow: none;
}

.navbar .container {
    position: relative;
}

.navbar-brand {
    font-family: var(--font-heading);
}

.nav-item.dropdown {
    position: static;
}

/* ===== Mega Menu ===== */
.dropdown-menu.mega {
    width: auto !important;
    right: 0 !important;
    padding: 1.25rem 1rem;
    border-radius: 0 0 1rem 1rem;
    border: 1px solid rgba(226, 232, 240, .95);
    border-top: 3px solid var(--smsalert-primary);
    box-shadow: 0 8px 30px rgba(2, 6, 23, .10);
    top: 100% !important;
    left: 0 !important;
    transform: none !important;
    margin-top: -1px;
}

.dropdown-header {
    font-weight: 900;
    color: #0f172a;
    padding-left: .25rem;
}

.mega-item {
    display: flex;
    gap: .75rem;
    align-items: flex-start;
    padding: .75rem;
    border-radius: .9rem;
    border: 1px solid rgba(226, 232, 240, .90);
    background: #fff;
    text-decoration: none;
    color: inherit;
    transition: transform .06s ease, border-color .15s ease, background .15s ease, box-shadow .15s ease;
}

.mega-item:hover {
    transform: translateY(-1px);
    border-color: rgba(42, 63, 84, .28);
    background: rgba(42, 63, 84, .03);
    box-shadow: 0 6px 18px rgba(2, 6, 23, .07);
}

.mega-title {
    font-weight: 900;
    letter-spacing: -.2px;
}

.mega-desc {
    color: #64748b;
    font-size: .9rem;
    margin-top: 2px;
    line-height: 1.25;
}

/* ===== Buttons ===== */
.btn-smsalert {
    --bs-btn-bg: var(--smsalert-primary);
    --bs-btn-border-color: var(--smsalert-primary);
    --bs-btn-hover-bg: #223244;
    --bs-btn-hover-border-color: #223244;
    --bs-btn-color: #fff;
    --bs-btn-hover-color: #fff;
    box-shadow: 0 14px 30px rgba(42, 63, 84, .22);
}

.btn-smsalert-secondary {
    --bs-btn-bg: var(--smsalert-secondary);
    --bs-btn-border-color: var(--smsalert-secondary);
    --bs-btn-hover-bg: #015a30;
    --bs-btn-hover-border-color: #015a30;
    --bs-btn-color: #fff;
    --bs-btn-hover-color: #fff;
    box-shadow: 0 14px 30px rgba(1, 105, 55, .18);
}

/* ===== Badges ===== */
.badge-soft {
    background: var(--smsalert-soft);
    border: 1px solid rgba(42, 63, 84, .20);
    color: var(--smsalert-primary);
    font-weight: 800;
}

.badge-soft2 {
    background: var(--smsalert-soft2);
    border: 1px solid rgba(1, 105, 55, .22);
    color: var(--smsalert-secondary);
    font-weight: 800;
}

/* ===== Icon Bubble ===== */
.icon-bubble {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    background: var(--smsalert-soft);
    border: 1px solid rgba(42, 63, 84, .18);
    display: grid;
    place-items: center;
    color: var(--smsalert-primary);
    flex: 0 0 auto;
    font-weight: 900;
}

/* ===== Offcanvas ===== */
.offcanvas-body {
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    max-height: calc(100vh - 64px);
}

/* ===== Utilities ===== */
.section-divider {
    border: none;
    height: 1px;
    background: linear-gradient(to right, transparent, rgba(42, 63, 84, .12), transparent);
    margin: 0;
}

.ch-chip {
    font-size: .75rem;
    font-weight: 700;
    padding: .22rem .65rem;
    border-radius: 999px;
    border: 1px solid rgba(226, 232, 240, .95);
    background: rgba(255, 255, 255, .9);
    color: #334155;
}

.ch-chip.green {
    background: rgba(1, 105, 55, .08);
    border-color: rgba(1, 105, 55, .22);
    color: var(--smsalert-secondary);
}

.ch-chip.blue {
    background: rgba(42, 63, 84, .07);
    border-color: rgba(42, 63, 84, .20);
    color: var(--smsalert-primary);
}

/* ===== Footer ===== */
footer {
    background: rgba(255, 255, 255, .70);
}


/* ── Language Switcher ── */
.btn-lang-sw {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .28rem .7rem;
    font-size: .8rem;
    font-weight: 600;
    letter-spacing: .03em;
    color: #374151;
    background: rgba(255,255,255,.7);
    border: 1px solid rgba(0,0,0,.13);
    border-radius: 999px;
    backdrop-filter: blur(6px);
    transition: background .18s, border-color .18s, box-shadow .18s;
    white-space: nowrap;
}
.btn-lang-sw::after { display:none; }
.btn-lang-sw .lang-chevron {
    width: 12px; height: 12px;
    margin-left: .1rem;
    transition: transform .2s;
    opacity: .55;
}
.btn-lang-sw[aria-expanded="true"] .lang-chevron { transform: rotate(180deg); }
.btn-lang-sw:hover, .btn-lang-sw[aria-expanded="true"] {
    background: rgba(255,255,255,.95);
    border-color: rgba(1,105,55,.35);
    box-shadow: 0 0 0 3px rgba(1,105,55,.08);
    color: #014d28;
}
.lang-menu {
    min-width: 160px;
    border-radius: .75rem;
    border: 1px solid rgba(0,0,0,.1);
    box-shadow: 0 8px 24px rgba(0,0,0,.1);
    padding: .4rem;
    animation: langFadeIn .15s ease;
}
@keyframes langFadeIn {
    from { opacity:0; transform: translateY(-6px); }
    to   { opacity:1; transform: translateY(0); }
}
.lang-menu .lang-item {
    display: flex;
    align-items: center;
    gap: .55rem;
    padding: .45rem .7rem;
    border-radius: .5rem;
    font-size: .85rem;
    font-weight: 500;
    color: #374151;
    text-decoration: none;
    transition: background .14s;
}
.lang-menu .lang-item:hover { background: #f3f4f6; color: #111; }
.lang-menu .lang-item.active { background: rgba(1,105,55,.08); color: #014d28; font-weight: 600; }
.lang-menu .lang-item .lang-check {
    margin-left: auto;
    width: 14px; height: 14px;
    color: #016937;
}
.lang-flag { font-size: 1rem; line-height: 1; }
/* Mobile offcanvas lang row */
.offcanvas-lang-row {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .5rem .75rem;
    border-bottom: 1px solid rgba(0,0,0,.08);
    margin-bottom: .25rem;
}
.offcanvas-lang-row .lang-label { font-size: .75rem; color: #6b7280; font-weight: 500; text-transform: uppercase; letter-spacing: .06em; margin-right: auto; }
.offcanvas-lang-row a {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .25rem .65rem;
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 600;
    text-decoration: none;
    border: 1px solid transparent;
    transition: background .14s;
    color: #374151;
}
.offcanvas-lang-row a.active {
    background: rgba(1,105,55,.1);
    border-color: rgba(1,105,55,.25);
    color: #014d28;
}
.offcanvas-lang-row a:not(.active):hover { background: #f3f4f6; }