/*
 * ARUSWARTA TOOLS — SHARED VISUAL FOUNDATION
 * Version: 2026-11-08
 * Purpose: normalize shared page chrome across tool detail views.
 * Safe scope: only known Tools view wrappers; calculator logic and page-specific grids stay intact.
 */

body.aw-theme {
    --aw-tool-teal: #10837f;
    --aw-tool-teal-dark: #086f6b;
    --aw-tool-navy: #0d2d4c;
    --aw-tool-ink: #17324f;
    --aw-tool-muted: #718296;
    --aw-tool-line: #dce8ed;
    --aw-tool-surface: #ffffff;
    --aw-tool-page: #edf3f6;
}

/* One common desktop content width. Inner form/result grids remain page-specific. */
body.aw-theme :is(
    .bn-page-layout,
    .ts-currency-shell,
    .aev-page,
    .awfc-page,
    .awtg-page,
    .gc-page,
    .aw-gold-history-page-shell,
    .ts-gold-layout,
    .awif-page,
    .awti-page,
    .ts-tool-page,
    .aw-artinama-page,
    .aw-nhp-page,
    .aw-fs-page,
    .aw-jodoh-page,
    .aw-life-number-page,
    .aw-shio-page,
    .aw-tafsir-page,
    .aw-weton-redesign,
    .aw-wuku-page,
    .aw-zodiac-page,
    .awts-page,
    .aw-market-wrap,
    .awto-page,
    .aw-loan-page,
    .avt-page
) {
    width: min(1360px, calc(100% - 48px)) !important;
    max-width: 1360px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
}

/* The gold-price screen has a full-width page background and a nested content shell. */
body.aw-theme .ts-gold-page {
    width: 100% !important;
    max-width: none !important;
}

/* Shared breadcrumb rhythm and typography. Individual back/share controls are preserved. */
body.aw-theme :is(
    .aw-tools-crumbs,
    .aev-breadcrumb,
    .awfc-breadcrumb,
    .awtg-breadcrumb,
    .aw-gcalc-breadcrumb,
    .aw-gold-history-breadcrumb,
    .ts-gold-breadcrumb,
    .awif-breadcrumb,
    .awti-breadcrumb,
    .an-breadcrumb,
    .aw-nhp-breadcrumb,
    .aw-fs-breadcrumb,
    .aw-jodoh-breadcrumb,
    .aw-ln-breadcrumb,
    .aw-shio-breadcrumb,
    .tm-breadcrumb,
    .aw-wuku-breadcrumb,
    .aw-zodiac-breadcrumb,
    .awts-breadcrumb,
    .aw-market-breadcrumb,
    .awto-breadcrumb,
    .avt-breadcrumb,
    #AW_BABY_NAMES_BREADCRUMB
) {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    margin-bottom: 16px !important;
    color: var(--aw-tool-muted) !important;
    font-family: inherit !important;
    font-size: 12px !important;
    line-height: 1.45 !important;
    box-sizing: border-box !important;
}

body.aw-theme :is(
    .aev-breadcrumb,
    .awfc-breadcrumb,
    .awtg-breadcrumb,
    .aw-gcalc-breadcrumb,
    .aw-gold-history-breadcrumb,
    .ts-gold-breadcrumb,
    .awif-breadcrumb,
    .awti-breadcrumb,
    .an-breadcrumb,
    .aw-nhp-breadcrumb,
    .aw-fs-breadcrumb,
    .aw-jodoh-breadcrumb,
    .aw-ln-breadcrumb,
    .aw-shio-breadcrumb,
    .tm-breadcrumb,
    .aw-wuku-breadcrumb,
    .aw-zodiac-breadcrumb,
    .awts-breadcrumb,
    .aw-market-breadcrumb,
    .awto-breadcrumb,
    .avt-breadcrumb,
    #AW_BABY_NAMES_BREADCRUMB
) a {
    color: var(--aw-tool-teal) !important;
    text-decoration: none !important;
    font-weight: 650 !important;
}

body.aw-theme :is(
    .aev-breadcrumb,
    .awfc-breadcrumb,
    .awtg-breadcrumb,
    .aw-gcalc-breadcrumb,
    .aw-gold-history-breadcrumb,
    .ts-gold-breadcrumb,
    .awif-breadcrumb,
    .awti-breadcrumb,
    .an-breadcrumb,
    .aw-nhp-breadcrumb,
    .aw-fs-breadcrumb,
    .aw-jodoh-breadcrumb,
    .aw-ln-breadcrumb,
    .aw-shio-breadcrumb,
    .tm-breadcrumb,
    .aw-wuku-breadcrumb,
    .aw-zodiac-breadcrumb,
    .awts-breadcrumb,
    .aw-market-breadcrumb,
    .awto-breadcrumb,
    .avt-breadcrumb,
    #AW_BABY_NAMES_BREADCRUMB
) [aria-current="page"],
body.aw-theme :is(
    .aev-breadcrumb,
    .awfc-breadcrumb,
    .awtg-breadcrumb,
    .aw-gcalc-breadcrumb,
    .aw-gold-history-breadcrumb,
    .ts-gold-breadcrumb,
    .awif-breadcrumb,
    .awti-breadcrumb,
    .an-breadcrumb,
    .aw-nhp-breadcrumb,
    .aw-fs-breadcrumb,
    .aw-jodoh-breadcrumb,
    .aw-ln-breadcrumb,
    .aw-shio-breadcrumb,
    .tm-breadcrumb,
    .aw-wuku-breadcrumb,
    .aw-zodiac-breadcrumb,
    .awts-breadcrumb,
    .aw-market-breadcrumb,
    .awto-breadcrumb,
    .avt-breadcrumb,
    #AW_BABY_NAMES_BREADCRUMB
) strong {
    color: var(--aw-tool-navy) !important;
    font-weight: 800 !important;
}

/* Consistent hero frame while preserving every page's artwork and layout. */
body.aw-theme :is(
    .bn-hero,
    .aev-hero,
    .awfc-hero,
    .awtg-hero,
    .gc-hero,
    .aw-gh-hero,
    .ts-gold-page-hero,
    .awif-hero,
    .awti-hero,
    .aw-artinama-page .an-hero,
    .aw-nhp-hero,
    .aw-fs-hero,
    .aw-jodoh-hero,
    .aw-ln-hero,
    .aw-shio-hero,
    .tm-hero,
    .ts-jawa-calendar-hero,
    .ts-tanggal-jawa-hero,
    .aw-weton-hero,
    .aw-wuku-hero,
    .aw-zodiac-hero,
    .awts-hero,
    .aw-market-hero,
    .awto-hero,
    .avt-hero,
    .aw-umur-hero,
    .aw-calendar2027-hero,
    .aw-discount-hero,
    .aw-loan-hero,
    .aw-bmi-hero
) {
    border-radius: 16px !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}

body.aw-theme :is(
    .aev-hero-copy,
    .awfc-hero-copy,
    .awtg-hero-copy,
    .gc-hero-copy,
    .aw-gh-hero-copy,
    .ts-gold-hero-copy,
    .awif-hero-copy,
    .awti-hero-copy,
    .an-hero-copy,
    .aw-nhp-hero-copy,
    .aw-fs-hero-copy,
    .aw-jodoh-hero-copy,
    .aw-ln-hero,
    .aw-shio-hero-copy,
    .tm-hero-copy,
    .ts-tanggal-jawa-hero-copy,
    .aw-weton-hero-copy,
    .aw-wuku-hero-copy,
    .aw-zodiac-hero-copy,
    .awts-hero-copy,
    .aw-market-hero-copy,
    .awto-hero-copy,
    .avt-hero-copy,
    .aw-umur-hero-copy,
    .aw-calendar2027-hero-copy,
    .aw-discount-hero-copy,
    .aw-loan-hero-copy
) h1 {
    font-size: clamp(24px, 2.25vw, 32px) !important;
    line-height: 1.14 !important;
    font-weight: 900 !important;
    letter-spacing: -.35px !important;
}

/* Common surface treatment for calculator panels without changing their layout. */
body.aw-theme :is(
    .aev-page,
    .awfc-page,
    .awtg-page,
    .gc-page,
    .aw-gold-history-page-shell,
    .ts-gold-page,
    .awif-page,
    .awti-page,
    .ts-tool-page,
    .aw-artinama-page,
    .aw-nhp-page,
    .aw-fs-page,
    .aw-jodoh-page,
    .aw-life-number-page,
    .aw-shio-page,
    .aw-tafsir-page,
    .aw-weton-redesign,
    .aw-wuku-page,
    .aw-zodiac-page,
    .awts-page,
    .aw-market-wrap,
    .awto-page,
    .aw-loan-page,
    .avt-page
) :is([class$="-card"], [class*="-card "], [class$="-panel"], [class*="-panel "]) {
    border-color: var(--aw-tool-line) !important;
    border-radius: 14px !important;
}

/* Shared form-control appearance. Checkboxes, radios, sliders and button controls are untouched. */
body.aw-theme :is(
    .aev-page,
    .awfc-page,
    .awtg-page,
    .gc-page,
    .ts-gold-page,
    .awif-page,
    .awti-page,
    .ts-tool-page,
    .aw-artinama-page,
    .aw-nhp-page,
    .aw-fs-page,
    .aw-jodoh-page,
    .aw-life-number-page,
    .aw-shio-page,
    .aw-tafsir-page,
    .aw-weton-redesign,
    .aw-wuku-page,
    .aw-zodiac-page,
    .awts-page,
    .awto-page,
    .aw-loan-page,
    .avt-page
) :is(
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]):not([type="submit"]):not([type="button"]),
    select,
    textarea
) {
    border-color: #d6e3e9 !important;
    border-radius: 9px !important;
    color: var(--aw-tool-ink) !important;
    font-family: inherit !important;
    box-sizing: border-box !important;
}

/* Remove per-view fixed bottom bars: mobile navigation is managed by the shared site shell. */
body.aw-theme :is(
    .ts-mobile-nav,
    .aw-kurs-bottom-nav,
    .aw-gcalc-bottom-nav,
    .aw-gold-history-bottom-nav,
    .aw-gold-bottom-nav
) {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

@media (max-width: 760px) {
    body.aw-theme :is(
        .bn-page-layout,
        .ts-currency-shell,
        .aev-page,
        .awfc-page,
        .awtg-page,
        .gc-page,
        .aw-gold-history-page-shell,
        .ts-gold-layout,
        .awif-page,
        .awti-page,
        .ts-tool-page,
        .aw-artinama-page,
        .aw-nhp-page,
        .aw-fs-page,
        .aw-jodoh-page,
        .aw-life-number-page,
        .aw-shio-page,
        .aw-tafsir-page,
        .aw-weton-redesign,
        .aw-wuku-page,
        .aw-zodiac-page,
        .awts-page,
        .aw-market-wrap,
        .awto-page,
        .aw-loan-page,
        .avt-page
    ) {
        width: calc(100% - 24px) !important;
        max-width: 720px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    body.aw-theme :is(
        .aev-breadcrumb,
        .awfc-breadcrumb,
        .awtg-breadcrumb,
        .aw-gcalc-breadcrumb,
        .aw-gold-history-breadcrumb,
        .ts-gold-breadcrumb,
        .awif-breadcrumb,
        .awti-breadcrumb,
        .an-breadcrumb,
        .aw-nhp-breadcrumb,
        .aw-fs-breadcrumb,
        .aw-jodoh-breadcrumb,
        .aw-ln-breadcrumb,
        .aw-shio-breadcrumb,
        .tm-breadcrumb,
        .aw-wuku-breadcrumb,
        .aw-zodiac-breadcrumb,
        .awts-breadcrumb,
        .aw-market-breadcrumb,
        .awto-breadcrumb,
        .avt-breadcrumb,
        #AW_BABY_NAMES_BREADCRUMB
    ) {
        gap: 6px !important;
        margin-bottom: 13px !important;
        font-size: 11px !important;
    }

    body.aw-theme :is(
        .aev-hero,
        .awfc-hero,
        .awtg-hero,
        .gc-hero,
        .aw-gh-hero,
        .ts-gold-page-hero,
        .awif-hero,
        .awti-hero,
        .an-hero,
        .aw-nhp-hero,
        .aw-fs-hero,
        .aw-jodoh-hero,
        .aw-ln-hero,
        .aw-shio-hero,
        .tm-hero,
        .ts-jawa-calendar-hero,
        .ts-tanggal-jawa-hero,
        .aw-weton-hero,
        .aw-wuku-hero,
        .aw-zodiac-hero,
        .awts-hero,
        .aw-market-hero,
        .awto-hero,
        .avt-hero
    ) {
        border-radius: 13px !important;
    }

    body.aw-theme :is(
        .aev-hero-copy,
        .awfc-hero-copy,
        .awtg-hero-copy,
        .gc-hero-copy,
        .awif-hero-copy,
        .awti-hero-copy,
        .an-hero-copy,
        .aw-nhp-hero-copy,
        .aw-fs-hero-copy,
        .aw-jodoh-hero-copy,
        .aw-ln-hero,
        .aw-shio-hero-copy,
        .tm-hero-copy,
        .ts-tanggal-jawa-hero-copy,
        .aw-weton-hero-copy,
        .aw-wuku-hero-copy,
        .aw-zodiac-hero-copy,
        .awts-hero-copy,
        .aw-market-hero-copy,
        .awto-hero-copy,
        .avt-hero-copy,
        .aw-umur-hero-copy,
        .aw-calendar2027-hero-copy,
        .aw-discount-hero-copy,
        .aw-loan-hero-copy
    ) h1 {
        font-size: clamp(21px, 6vw, 27px) !important;
        line-height: 1.16 !important;
    }
}


/* Breadcrumbs and compact page headers use the same horizontal alignment as each tool shell. */
body.aw-theme :is(
    .aw-tools-crumbs,
    .aev-breadcrumb,
    .awfc-breadcrumb,
    .awtg-breadcrumb,
    .aw-gcalc-breadcrumb,
    .aw-gold-history-breadcrumb,
    .ts-gold-breadcrumb,
    .awif-breadcrumb,
    .awti-breadcrumb,
    .an-breadcrumb,
    .aw-nhp-breadcrumb,
    .aw-fs-breadcrumb,
    .aw-jodoh-breadcrumb,
    .aw-ln-breadcrumb,
    .aw-shio-breadcrumb,
    .tm-breadcrumb,
    .aw-wuku-breadcrumb,
    .aw-zodiac-breadcrumb,
    .awts-breadcrumb,
    .aw-market-breadcrumb,
    .awto-breadcrumb,
    .avt-breadcrumb,
    #AW_BABY_NAMES_BREADCRUMB
) {
    width: 100% !important;
    max-width: 100% !important;
}

body.aw-theme :is(
    .aw-kurs-page-header,
    .aw-gold-history-header,
    .aw-gcalc-header,
    .aw-cicilan-page-header,
    .aw-umur-page-header,
    .aw-jodoh-mobile-header,
    .aw-kalender-jawa-mobile-header,
    .aw-wuku-mobile-header
) {
    width: min(1360px, calc(100% - 48px)) !important;
    max-width: 1360px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
}

@media (max-width: 760px) {
    body.aw-theme :is(
        .aw-kurs-page-header,
        .aw-gold-history-header,
        .aw-gcalc-header,
        .aw-cicilan-page-header,
        .aw-umur-page-header,
        .aw-jodoh-mobile-header,
        .aw-kalender-jawa-mobile-header,
        .aw-wuku-mobile-header
    ) {
        width: calc(100% - 24px) !important;
        max-width: 720px !important;
    }
}


/* ==========================================================
   ARUSWARTA TOOLS — ONE DETAIL BREADCRUMB STANDARD
   Shared by all calculator, finance, automotive and Primbon views.
========================================================== */
.aw-theme .aw-tools-detail-breadcrumb,
.aw-tools-detail-breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    width: 100%;
    min-width: 0;
    margin: 0 0 14px;
    padding: 0;
    color: #718292;
    font-family: inherit;
    font-size: 12px;
    line-height: 1.45;
    box-sizing: border-box;
}
.aw-theme .aw-tools-detail-breadcrumb a,
.aw-tools-detail-breadcrumb a {
    color: #10837f;
    font-weight: 600;
    text-decoration: none;
}
.aw-theme .aw-tools-detail-breadcrumb a:hover,
.aw-tools-detail-breadcrumb a:hover {
    color: #086b68;
    text-decoration: underline;
}
.aw-theme .aw-tools-detail-breadcrumb-separator,
.aw-tools-detail-breadcrumb-separator {
    color: #9aa9b5;
    font-size: 13px;
    line-height: 1;
}
.aw-theme .aw-tools-detail-breadcrumb-current,
.aw-tools-detail-breadcrumb-current {
    color: #102d4d;
    font-weight: 800;
}
@media (max-width: 600px) {
    .aw-theme .aw-tools-detail-breadcrumb,
    .aw-tools-detail-breadcrumb {
        gap: 6px;
        margin-bottom: 11px;
        font-size: 10px;
    }
}


/* Kalkulator Cicilan: align its legacy page wrapper with the shared Tools container. */
body.aw-theme .aw-loan-page {
    width: min(1360px, calc(100% - 48px)) !important;
    max-width: 1360px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}
@media (max-width: 760px) {
    body.aw-theme .aw-loan-page {
        width: calc(100% - 24px) !important;
        max-width: 720px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
}


/* FINAL CICILAN CONTAINER WIDTH — align with global portal content span */
html body.aw-theme:has(#aw-loan-calculator) .ts-tool-page,
html body.aw-theme:has(#aw-loan-calculator) .aw-tools-back-breadcrumb,
html body.aw-theme:has(#aw-loan-calculator) .awr-related-tools {
    width: min(1360px, calc(100vw - 48px)) !important;
    max-width: 1360px !important;
    min-width: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
}

html body.aw-theme:has(#aw-loan-calculator) .aw-loan-page {
    width: 100% !important;
    max-width: 1360px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
}

@media (max-width: 800px) {
    html body.aw-theme:has(#aw-loan-calculator) .ts-tool-page,
    html body.aw-theme:has(#aw-loan-calculator) .aw-tools-back-breadcrumb,
    html body.aw-theme:has(#aw-loan-calculator) .awr-related-tools {
        width: calc(100vw - 24px) !important;
        max-width: 720px !important;
    }

    html body.aw-theme:has(#aw-loan-calculator) .aw-loan-page {
        width: 100% !important;
        max-width: 720px !important;
    }
}


/* Final legacy Cicilan wrapper width: independent of body.aw-theme. */
@media (min-width: 801px) {
    html body:has(#aw-loan-calculator) .aw-tools-back-breadcrumb,
    html body:has(#aw-loan-calculator) .ts-tool-page {
        position: static !important; left: auto !important; transform: none !important;
        width: min(1360px, calc(100vw - 48px)) !important; max-width: 1360px !important;
        min-width: 0 !important; margin-left: auto !important; margin-right: auto !important;
        box-sizing: border-box !important;
    }
    html body:has(#aw-loan-calculator) #aw-loan-page,
    html body:has(#aw-loan-calculator) #aw-loan-guide,
    html body:has(#aw-loan-calculator) .awr-related-tools {
        width: 100% !important; max-width: 100% !important; box-sizing: border-box !important;
    }
}
@media (max-width: 800px) {
    html body:has(#aw-loan-calculator) .aw-tools-back-breadcrumb,
    html body:has(#aw-loan-calculator) .ts-tool-page {
        width: calc(100vw - 24px) !important; max-width: 720px !important;
        margin-left: auto !important; margin-right: auto !important; box-sizing: border-box !important;
    }
    html body:has(#aw-loan-calculator) #aw-loan-page,
    html body:has(#aw-loan-calculator) #aw-loan-guide,
    html body:has(#aw-loan-calculator) .awr-related-tools { width:100% !important; max-width:100% !important; }
}