/* =====================================================
   SKIKK Bootstrap Global Styles
   Loaded on all pages using bootstrap layout
   ===================================================== */

/* Brand Colors */
:root {
    --skikk-primary: #008356;
    --skikk-dark: #0f172a;
    --skikk-muted: #64748b;
    --bs-body-bg: #f8fafc;
}

/* Body */
body {
    background: #f8fafc;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* Navbar */
.navbar {
    backdrop-filter: saturate(180%) blur(8px);
}

/* Buttons */
.btn-primary,
.btn-success {
    background: var(--skikk-primary);
    border-color: var(--skikk-primary);
}
.btn-primary:hover,
.btn-success:hover {
    background: #02965f;
    border-color: #02965f;
}
.btn-outline-primary {
    color: var(--skikk-primary);
    border-color: var(--skikk-primary);
}
.btn-outline-primary:hover {
    background: var(--skikk-primary);
    border-color: var(--skikk-primary);
}

/* Text Colors */
.text-primary {
    color: var(--skikk-primary) !important;
}
.text-muted {
    color: #475569 !important;
}
.text-secondary {
    color: #FFFFFF !important;
}
.text-white-50 {
    color: rgba(255, 255, 255, 0.7) !important;
}

/* Links */
a {
    color: var(--skikk-primary);
    text-decoration: underline;
    text-underline-offset: 2px;
}
a:hover,
a:focus {
    color: #005f3f;
    text-decoration-thickness: 2px;
}

/* Tables */
.table-success {
    background-color: rgba(0, 168, 107, .1);
}

/* Footer */
footer {
    background: #0b1220;
    color: #cbd5e1;
}
footer a {
    color: #cbd5e1;
    text-decoration: none;
}
footer a:hover {
    color: #fff;
}

/* Hero Section */
.hero {
    background: radial-gradient(1200px 600px at 80% -20%, rgba(0, 168, 107, .15), transparent 60%),
                linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
}
.hero .badge {
    background: rgba(0, 168, 107, .1);
    color: var(--skikk-primary);
}

/* Cards */
.card-hover {
    transition: transform .2s ease, box-shadow .2s ease;
}
.card-hover:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(2, 8, 23, .08);
}

/* USP Icons */
.icon-usp {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: rgba(0, 168, 107, .08);
}

/* Language Modal */
#modal_lang {
    visibility: hidden;
    opacity: 0;
    position: fixed;
    inset: 0;
    z-index: 1050;
    background: rgba(2, 8, 23, .55);
    transition: opacity .25s ease, visibility .25s ease;
    display: grid;
    place-items: center;
    padding: 1rem;
}
#modal_lang.show {
    visibility: visible;
    opacity: 1;
}
#modal_content {
    width: 100%;
    max-width: 560px;
    background: #fff;
    border-radius: 16px;
    padding: 1.25rem 1.25rem 1.5rem;
}
@media (min-width: 768px) {
    #modal_content {
        padding: 1.75rem 1.75rem 2rem;
    }
}
#modal_content .form-label {
    color: var(--skikk-dark);
}
#modal_content .text-secondary {
    color: var(--skikk-muted) !important;
}
#modal_content .btn-light {
    background: #f1f5f9;
}
#logo_l {
    background: rgba(0, 168, 107, .1) !important;
}

/* Modal Selects */
#modal_content .form-select {
    border-radius: .6rem;
    padding: .6rem .95rem;
    border-color: #e2e8f0;
}
#modal_content .form-select:focus {
    border-color: var(--skikk-primary);
    box-shadow: 0 0 0 .25rem rgba(0, 168, 107, .15);
}

/* Flag Wrappers */
#country_modal,
#lang_modal,
#curr_modal {
    transition: box-shadow .2s ease, border-color .2s ease;
}
#country_modal:focus-within,
#lang_modal:focus-within,
#curr_modal:focus-within {
    border-color: var(--skikk-primary) !important;
    box-shadow: 0 0 0 .25rem rgba(0, 168, 107, .1);
}