/* ----------------------------------------------------------------
   KoperasiOne — minimal overrides on top of mortgage.css
   Only styles that mortgage.css genuinely does not cover.
----------------------------------------------------------------- */

/* Brand logo in the header — overrides theme's #header-wrap #logo img height:var(--cnvs-header-height) */
#header-wrap #logo img.header-logo-img {
    height: 42px;
    width: auto;
    display: block;
}

/* ----------------------------------------------------------------
   Whitelabel fallbacks. A brand in includes/brands.php may ship no
   logo files at all (see WHITELABEL.md); these render its name in the
   brand colour instead, so a new partner is presentable on day one.
----------------------------------------------------------------- */

/* Header lockup when the brand has no logo_header file. */
#header-wrap #logo .brand-wordmark {
    display: block;
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 42px;
    color: var(--brand-primary);
    white-space: nowrap;
}

/* Footer mark when the brand has no logo_symbol file: its initial on a tile. */
.brand-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-hero-from) 100%);
    color: #fff;
    font-size: 1.25rem;
    font-weight: 800;
    line-height: 1;
}

/* Loan card rate badge (not in mortgage.css) */
.loan-card .rate-tag {
    display: inline-block;
    background: rgba(var(--brand-primary-rgb, 26, 86, 219), 0.08);
    color: var(--cnvs-themecolor);
    font-size: 0.75rem;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 20px;
    margin-top: 0.75rem;
    letter-spacing: 0.02em;
}

/* Language toggle pill in header */
.lang-toggle {
    display: flex;
    align-items: center;
    background: var(--cnvs-contrast-100);
    border-radius: 20px;
    padding: 3px;
    gap: 2px;
}

.lang-btn {
    padding: 4px 12px;
    border-radius: 16px;
    font-size: 0.73rem;
    font-weight: 700;
    text-decoration: none;
    color: var(--cnvs-contrast-500);
    transition: background 0.18s, color 0.18s;
    letter-spacing: 0.5px;
    line-height: 1.6;
}

.lang-btn.active {
    background: var(--cnvs-themecolor);
    color: #fff;
}

.lang-btn:hover:not(.active) {
    color: var(--cnvs-themecolor);
}

/* Mobile header: BM/EN + Apply Now wrap under the logo onto their own row;
   push the whole control cluster (lang toggle, Apply button, hamburger) to
   the right edge as one group instead of splitting it across the row. */
@media (max-width: 991.98px) {
    .header-row .header-misc {
        margin-left: auto;
    }
}

/* Desktop header. Ten primary nav items with long BM labels leave very little
   room for the control cluster (WhatsApp, BM/EN, Mohon Sekarang), which sits
   after the menu in the same wrapping flex row. */
@media (min-width: 992px) {
    /* The theme's 1px menu letter-spacing is sized for its default UPPERCASE
       menu; this site renders the labels sentence-case (--cnvs-primary-menu-tt
       is none), where it only adds ~110px of nav width and reads loose. The
       sub-menus keep the theme value. */
    .is-expanded-menu .primary-menu .menu-container > .menu-item > .menu-link {
        letter-spacing: 0;
    }

    /* Row one is already pinned by #logo's auto right margin, so this only
       takes effect on the control cluster once it wraps: it lines up under the
       menu at the right edge instead of stranding at the left. row-gap applies
       between flex lines, so it is inert while everything fits on one line. */
    .is-expanded-menu .header-row {
        justify-content: flex-end;
        row-gap: 6px;
    }

    /* The vertical margin keeps the cluster off the header's bottom edge once
       it wraps, and MUST stay symmetric: the row centres items on their margin
       box, so a bottom-only margin silently lifts the controls off the logo and
       menu baseline by half its value. 10px also keeps the outer height (58px)
       inside the 60px shrunken sticky row, so neither state grows. */
    .is-expanded-menu .header-row .header-misc {
        margin-left: 1.5rem;
        margin-top: 10px;
        margin-bottom: 10px;
    }

    /* The theme's full-header rule draws a divider after the menu to separate
       it from the cluster. Once the two can land on different rows that divider
       dangles at the right edge with nothing beside it; the extra margin above
       does the separating instead. */
    .is-expanded-menu .full-header .primary-menu .menu-container {
        padding-right: 0;
        margin-right: 0;
        border-right: 0;
    }
}

/* Eligibility section */
#eligibility .section-sub-title {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--cnvs-themecolor);
}

/* Portiere — CSS-only wordmark (no logo file available) */
.portiere-logo {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.portiere-logo-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--cnvs-themecolor) 0%, var(--brand-hero-from, #0f2d6e) 100%);
    color: #fff;
    font-size: 1.0625rem;
    box-shadow: 0 6px 14px rgba(var(--cnvs-themecolor-rgb), 0.32);
    flex-shrink: 0;
}

.portiere-logo-text {
    font-weight: 800;
    font-size: 1.4375rem;
    letter-spacing: -0.03em;
    line-height: 1;
    color: var(--cnvs-contrast-900);
    background: linear-gradient(100deg, var(--cnvs-contrast-900) 30%, var(--cnvs-themecolor) 130%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Hero secondary WhatsApp CTA — sits beside the white .btn-primary-cta,
   differentiated in WhatsApp green (eligibility-enquiry path vs form path). */
#hero .btn-whatsapp-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #25D366;
    color: #fff;
    font-weight: 700;
    font-size: 0.9375rem;
    padding: 14px 28px;
    border-radius: 8px;
    text-decoration: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 0 4px 20px rgba(0,0,0,0.2);
}
#hero .btn-whatsapp-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(37,211,102,0.4);
    color: #fff;
}

/* Small, secondary privacy microcopy under CTAs. */
.cta-microcopy {
    font-size: 0.75rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.7);
    max-width: 520px;
}
#hero .cta-microcopy { color: rgba(255, 255, 255, 0.7); }
#hero .cta-microcopy a { color: #fff; text-decoration: underline; }
/* On light backgrounds (e.g. apply sidebar) use muted dark text. */
#apply .cta-microcopy { color: var(--cnvs-contrast-500); }
#apply .cta-microcopy a { color: var(--cnvs-themecolor); text-decoration: underline; }

/* Sticky mobile WhatsApp CTA. */
.sticky-wa-cta {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1030;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(6px);
    border-top: 1px solid var(--cnvs-contrast-200);
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.08);
}
.sticky-wa-cta a {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    background: #25D366;
    color: #fff;
    font-weight: 700;
    font-size: 1rem;
    padding: 12px 18px;
    border-radius: 8px;
    text-decoration: none;
}
/* Reserve space so the fixed bar never overlaps footer/form submit on mobile. */
@media (max-width: 991.98px) {
    body.stretched { padding-bottom: 72px; }
}

/* Cookie consent banner (created by tracking.js only when GTM is configured). */
.cookie-consent {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1055;
    background: #fff;
    border-top: 1px solid var(--cnvs-contrast-200);
    box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.12);
    padding: 18px 16px calc(18px + env(safe-area-inset-bottom));
}
/* Keep the consent banner clear of the sticky mobile CTA. */
@media (max-width: 991.98px) {
    .cookie-consent { bottom: 64px; }
}
.cookie-consent-inner {
    max-width: 960px;
    margin: 0 auto;
}
.cookie-consent-title {
    font-weight: 700;
    font-size: 1rem;
    color: var(--cnvs-contrast-900);
    margin-bottom: 4px;
}
.cookie-consent-body {
    font-size: 0.85rem;
    line-height: 1.55;
    color: var(--cnvs-contrast-600);
    margin: 0 0 12px;
}
.cookie-consent-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end;
}
.cookie-btn {
    font-size: 0.85rem;
    font-weight: 600;
    padding: 9px 18px;
    border-radius: 6px;
    border: 1px solid var(--cnvs-contrast-300);
    background: var(--cnvs-contrast-100);
    color: var(--cnvs-contrast-800);
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}
.cookie-btn:hover { background: var(--cnvs-contrast-200); }
.cookie-btn:focus-visible { outline: 2px solid var(--cnvs-themecolor); outline-offset: 2px; }
.cookie-btn-accept {
    background: var(--cnvs-themecolor);
    border-color: var(--cnvs-themecolor);
    color: #fff;
}
.cookie-btn-accept:hover { filter: brightness(0.95); background: var(--cnvs-themecolor); }
.cookie-btn-save { margin-top: 12px; }
.cookie-consent-panel {
    border-top: 1px solid var(--cnvs-contrast-200);
    margin: 8px 0 12px;
    padding-top: 12px;
}
.cookie-consent-row {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 8px 0;
}
.cookie-consent-row input { margin-top: 3px; flex-shrink: 0; }
.cookie-consent-row-text { display: flex; flex-direction: column; cursor: pointer; }
.cookie-consent-row-title { font-weight: 600; font-size: 0.875rem; color: var(--cnvs-contrast-900); }
.cookie-consent-row-desc { font-size: 0.8rem; color: var(--cnvs-contrast-500); line-height: 1.45; }

/* ----------------------------------------------------------------
   Articles hub + article pages (project-specific; minimal, Bootstrap
   utilities handle the rest). See docs/ARTICLE-SYSTEM-PLAN.md.
----------------------------------------------------------------- */
.article-card:hover {
    box-shadow: 0 10px 30px rgba(15, 45, 110, 0.10);
    transform: translateY(-3px);
    border-color: var(--cnvs-themecolor) !important;
}
.article-related-card:hover {
    border-color: var(--cnvs-themecolor) !important;
    background: rgba(var(--cnvs-themecolor-rgb), 0.04);
}
.article-content h2 { font-size: 1.5rem; font-weight: 700; margin-top: 2rem; margin-bottom: 1rem; color: var(--cnvs-contrast-900); }
.article-content h3 { font-size: 1.2rem; font-weight: 700; margin-top: 1.5rem; margin-bottom: 0.75rem; color: var(--cnvs-contrast-900); }
.article-content ul,
.article-content ol { padding-left: 1.25rem; margin-bottom: 1.25rem; }
.article-content li { margin-bottom: 0.4rem; }
.article-content a { color: var(--cnvs-themecolor); text-decoration: underline; }
.article-content table { width: 100%; margin-bottom: 1.25rem; }