/**********************************************************
 * KISI — Unified Button & Page Consistency Layer
 * MUST be loaded LAST on every page (after premium.css,
 * services-theme.css and any inline <style> block).
 * Purpose:
 *  1. One single button system across the whole website
 *  2. Smaller, tighter, more professional button sizing
 *  3. Same palette on every page (index, contact, services,
 *     online registration)
 *  4. "Submit Registration" uses the same teal primary
 *     colour as every other button on the site
 **********************************************************/

:root {
    /* single source of truth — shared by every page */
    --u-primary: #0B8F9E;
    --u-primary-deep: #076C78;
    --u-primary-glow: #1FC8D6;
    --u-accent: #E0A73C;
    --u-ink: #0E1B2B;
    --u-ink-soft: #46586B;
    --u-line: rgba(14, 27, 43, .10);
    --u-grad: linear-gradient(135deg, #076C78, #0B8F9E 55%, #1FC8D6);
    --u-btn-radius: 10px;
    --u-btn-shadow: 0 8px 18px -10px rgba(11, 143, 158, .55);
}

/*** 1. Base button: same shape + size everywhere ***/
.btn,
.vbtn,
.reg-page button.submit,
.reg-page .clear-btn,
.reg-page .copy-btn {
    font-family: 'Sora', 'Plus Jakarta Sans', sans-serif !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    line-height: 1.2 !important;
    letter-spacing: .01em !important;
    border-radius: var(--u-btn-radius) !important;
    padding: 10px 20px !important;
    text-transform: none !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-width: 1px !important;
    transition: background .25s ease, color .25s ease, box-shadow .25s ease,
                border-color .25s ease, transform .2s ease !important;
}

.btn:hover,
.vbtn:hover,
.reg-page button.submit:hover {
    transform: translateY(-1px) !important;
}

.btn:focus-visible,
.vbtn:focus-visible,
button:focus-visible {
    outline: 2px solid var(--u-primary);
    outline-offset: 2px;
}

/*** size variants stay proportional ***/
.btn-sm { font-size: 13px !important; padding: 8px 16px !important; }
.btn-lg,
.btn.py-3,
.btn.px-5,
.btn.px-4 { font-size: 14px !important; padding: 11px 24px !important; }

/*** icon-only / social buttons keep their square-circle shape ***/
.btn-square, .btn-sm-square, .btn-lg-square,
.btn.btn-social, .footer .btn.btn-social, .back-to-top {
    padding: 0 !important;
    gap: 0;
}
.btn-sm-square { width: 34px !important; height: 34px !important; }
.btn-square { width: 38px !important; height: 38px !important; }
.btn-lg-square, .back-to-top { width: 44px !important; height: 44px !important; }
.footer .btn.btn-social { width: 38px !important; height: 38px !important; border-radius: 50% !important; }

/*** link-style buttons are not real buttons ***/
.btn.btn-link, .footer .btn.btn-link {
    padding: 4px 0 !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    font-weight: 500 !important;
    display: inline-flex !important;
}
.btn.btn-link:hover { transform: none !important; }

/*** 2. One primary colour across the site ***/
.btn.btn-primary,
.btn.btn-secondary,
.btn.btn-hero,
.btn-get-started,
.vbtn,
.vbtn-amber,
.vbtn.ghost:hover,
.vbtn-ghost:hover {
    background: var(--u-grad) !important;
    border-color: transparent !important;
    color: #fff !important;
    box-shadow: var(--u-btn-shadow) !important;
}

.btn.btn-primary:hover,
.btn.btn-secondary:hover,
.btn.btn-hero:hover,
.btn-get-started:hover,
.vbtn:hover,
.vbtn-amber:hover {
    background: linear-gradient(135deg, #065C66, #0A8593 55%, #16B7C4) !important;
    color: #fff !important;
    box-shadow: 0 14px 26px -12px rgba(11, 143, 158, .65) !important;
}

/*** outline / secondary treatment — identical everywhere ***/
.btn.btn-outline-primary,
.btn.btn-outline-light,
.vbtn-outline,
.vbtn-ghost,
.vbtn.ghost,
.reg-page .clear-btn {
    background: transparent !important;
    border: 1px solid var(--u-primary) !important;
    color: var(--u-primary) !important;
    box-shadow: none !important;
}

.btn.btn-outline-primary:hover,
.btn.btn-outline-light:hover,
.vbtn-outline:hover,
.reg-page .clear-btn:hover {
    background: var(--u-grad) !important;
    border-color: transparent !important;
    color: #fff !important;
}

/*** on dark / hero backgrounds ***/
.btn.btn-hero-ghost,
.vbtn-outline-dark {
    background: rgba(255, 255, 255, .10) !important;
    border: 1px solid rgba(255, 255, 255, .55) !important;
    color: #fff !important;
    box-shadow: none !important;
}
.btn.btn-hero-ghost:hover,
.vbtn-outline-dark:hover {
    background: #fff !important;
    border-color: #fff !important;
    color: var(--u-ink) !important;
}

/*** 3. Online Registration page adopts the site palette ***/
.reg-page,
body:has(.reg-page) {
    --navy: #0E1B2B;
    --navy-2: #12293C;
    --navy-3: #0B3742;
    --gold: #E0A73C;
    --paper: #F2FAFB;
    --line: rgba(14, 27, 43, .10);
    --ink: #0E1B2B;
    --muted: #46586B;
    --radius: 14px;
}

.reg-page {
    font-family: 'Plus Jakarta Sans', 'Heebo', sans-serif !important;
    color: var(--u-ink-soft);
    background: #FBFDFE;
}

.reg-page h1, .reg-page h2, .reg-page h3, .reg-page h4,
.reg-page .brand-mark {
    font-family: 'Sora', 'Plus Jakarta Sans', sans-serif !important;
    color: var(--u-ink);
    letter-spacing: -.02em;
}

.reg-page .copy-btn {
    background: transparent !important;
    border: 1px solid var(--u-line) !important;
    color: var(--u-ink) !important;
    font-size: 13px !important;
    padding: 7px 14px !important;
}
.reg-page .copy-btn:hover {
    border-color: var(--u-primary) !important;
    color: var(--u-primary) !important;
}

/*** 4. Submit button — same teal as every other button ***/
.reg-page button.submit,
#submitBtn {
    background: var(--u-grad) !important;
    border: none !important;
    color: #fff !important;
    font-size: 15px !important;
    padding: 12px 30px !important;
    box-shadow: 0 10px 22px -12px rgba(11, 143, 158, .7) !important;
}

.reg-page button.submit:hover,
#submitBtn:hover {
    background: linear-gradient(135deg, #065C66, #0A8593 55%, #16B7C4) !important;
    box-shadow: 0 16px 30px -14px rgba(11, 143, 158, .75) !important;
    color: #fff !important;
}

.reg-page button.submit:disabled,
#submitBtn:disabled {
    opacity: .6 !important;
    transform: none !important;
    cursor: not-allowed;
}

/*** 5. Shared page rhythm so no page feels "different" ***/
.navbar .btn-get-started { padding: 9px 20px !important; font-size: 14px !important; }
.hero .btn, .hero .vbtn { min-width: 150px; }
.card .btn, .service-item .btn, .course-item .btn, .spec-card .vbtn,
.consult-card .vbtn { width: auto; }

@media (max-width: 575.98px) {
    .btn, .vbtn, .reg-page button.submit {
        font-size: 13px !important;
        padding: 9px 16px !important;
    }
}