/* THOKIN UI — Free Call screen as the shared mobile design language. */

:root {
    --ui-ink: #0f172a;
    --ui-muted: #64748b;
    --ui-border: #e5ede8;
    --ui-card: #ffffff;
    --ui-page: #f7f9f8;
    --ui-radius: 16px;
    --ui-green: var(--brand, #137a42);
    --ui-green-dark: var(--brand-dark, #0f5f34);
}

html, body {
    margin: 0;
    padding: 0;
    font-family: Inter, "SF Pro Text", "SF Pro Display", "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
    overflow-x: hidden;
}

body.has-mobile-nav,
body.free-call-page,
body.vtu-flow-page,
body.data-redesign {
    background: var(--ui-page);
    color: var(--ui-ink);
}

body.home-page {
    background: #006844;
    color: var(--ui-ink);
}

.app-shell,
.flow-page,
.flow-body,
main,
.page-enter {
    max-width: 100%;
    overflow-x: hidden;
}

.app-shell img,
.app-shell video,
.app-shell canvas,
.app-shell svg,
.app-shell table {
    max-width: 100%;
}

.app-shell h1, .flow-header__title, .page-inner__title {
    font-size: 22px !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
    letter-spacing: -0.02em;
    color: var(--ui-ink);
}

/* Marketplace + NIN sample banners must stay white on the green/yellow/hero fills. */
.app-shell .mp-title,
.app-shell .mp-sub,
.app-shell .mp-banner,
.app-shell .mp-banner h2,
.app-shell .idv-hero,
.app-shell .idv-hero h1,
.app-shell .idv-hero p,
.app-shell .cm-head,
.app-shell .cm-logo {
    color: #fff !important;
}

.app-shell h2,
.section-heading,
.home-section-heading h2,
.free-call-section-title {
    font-size: 17px !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    color: var(--ui-ink);
}

.app-shell h3,
.gc-panel__intro h2,
.mw-hero__title {
    font-size: 15px !important;
    font-weight: 600 !important;
    color: var(--ui-ink);
}

.app-shell p,
.app-shell li,
.app-shell label,
.flow-label {
    font-size: 14px;
    line-height: 1.5;
}

.app-shell small,
.free-call-hint,
.text-ink-muted,
.mw-hero__sub {
    font-size: 13px !important;
    line-height: 1.45 !important;
    color: var(--ui-muted);
}

body.has-mobile-nav .text-4xl,
body.has-mobile-nav .text-3xl { font-size: 1.5rem !important; line-height: 1.25 !important; }
body.has-mobile-nav .text-2xl { font-size: 1.375rem !important; line-height: 1.3 !important; }
body.has-mobile-nav .text-xl { font-size: 1.125rem !important; line-height: 1.35 !important; }

.flow-header {
    background: #fff !important;
    border-bottom: 1px solid var(--ui-border) !important;
    box-shadow: none !important;
}
.flow-header__bar {
    min-height: 3.25rem !important;
    padding: calc(var(--safe-top) + 0.55rem) 1rem 0.7rem !important;
}
.flow-header__back,
.flow-header__action {
    color: var(--ui-green) !important;
}

body.vtu-flow-page .flow-header__bar { min-height: 3.25rem !important; }
body.vtu-flow-page .flow-header__back,
body.vtu-flow-page .flow-header__action,
body.vtu-flow-page .beneficiary-bar strong,
body.vtu-flow-page .phone-contact-btn { color: var(--ui-green) !important; }
body.vtu-flow-page .flow-chip--active,
body.data-redesign .plan-tab--active { background: var(--ui-green) !important; color: #fff !important; }
body.data-redesign .plan-card--selected { box-shadow: inset 0 0 0 2px var(--ui-green) !important; background: #f4fbf7 !important; }
body.data-redesign .phone-input-box { min-height: 3rem !important; }
body.data-redesign .phone-input-box input,
body.vtu-flow-page .phone-input-box input { font-size: 15px !important; letter-spacing: 0 !important; font-weight: 600 !important; }
body.vtu-flow-page .phone-input-box { min-height: 3rem !important; }
body.data-redesign .plan-card { min-height: 0 !important; }

.flow-card,
.inner-card,
.free-call-status,
.gc-panel,
.mw-stat,
.mw-product-card,
.stro-quick-card {
    background: var(--ui-card);
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius);
    box-shadow: none;
}

.btn-primary,
.voucher-primary,
.gc-primary-btn,
.mw-btn--primary {
    min-height: 48px !important;
    padding: 12px 16px !important;
    border-radius: 16px !important;
    background: var(--ui-green) !important;
    color: #fff !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    box-shadow: none !important;
}

.voucher-secondary,
.mw-btn--outline,
button.btn-secondary {
    min-height: 46px;
    border: 1px solid var(--ui-border);
    border-radius: 16px;
    background: #fff;
    color: var(--ui-green-dark);
    font-size: 15px;
    font-weight: 600;
}

.app-shell input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]),
.app-shell select,
.app-shell textarea,
.mw-input,
.gc-field input,
.gc-field select,
.gc-field textarea {
    min-height: 46px;
    padding: 10px 14px;
    border: 1px solid var(--ui-border);
    border-radius: 14px;
    background: #fff;
    font-size: 15px;
    color: var(--ui-ink);
}
.app-shell textarea { min-height: 96px; }
.app-shell input:focus,
.app-shell select:focus,
.app-shell textarea:focus,
.mw-input:focus {
    outline: none;
    border-color: var(--ui-green);
    box-shadow: 0 0 0 3px rgba(19, 122, 66, 0.12);
}

.stro-home-brand strong { font-size: 1.25rem !important; }
.stro-wallet__balance { font-size: clamp(1.45rem, 6vw, 1.85rem) !important; }
.stro-wallet-account { min-height: 0 !important; }

.gc-header {
    min-height: auto !important;
    color: var(--ui-ink) !important;
    background: #fff !important;
    border-bottom: 1px solid var(--ui-border);
}
.gc-header h1 { color: var(--ui-ink) !important; font-size: 22px !important; }
.gc-header p { color: var(--ui-muted) !important; font-size: 13px !important; }
.gc-header__back, .gc-header__history { color: var(--ui-green) !important; }

body.has-mobile-nav .bottom-nav__label {
    font-size: 11px !important;
    font-weight: 600 !important;
}
body.has-mobile-nav .bottom-nav__link--center .bottom-nav__label {
    font-size: 11px !important;
}

body.has-mobile-nav .app-shell,
body.has-mobile-nav .flow-page,
body.has-mobile-nav .flow-body,
body.has-mobile-nav .home-body,
body.has-mobile-nav .gc-main,
body.has-mobile-nav .mw-body {
    padding-bottom: calc(var(--mobile-nav-height, 4.1rem) + var(--safe-bottom, 0px) + 1.25rem) !important;
}

body.tx-pin-open .flow-confirm-bar,
body.tx-pin-open .bottom-nav,
body.thk-modal-open .flow-confirm-bar,
body.thk-modal-open .bottom-nav {
    visibility: hidden !important;
    pointer-events: none !important;
}

.stro-home-actions-block { margin: .85rem 0 1.25rem; display: grid; gap: .7rem; }
.stro-home-actions-block .stro-home-shortcuts { margin: 0; }
.stro-home-actions-block .reward-card {
    min-height: 0 !important;
    flex-direction: row !important;
    align-items: center !important;
    border: 1px solid var(--ui-border, #e5ede8);
}

@media (max-width: 380px) {
    .app-shell h1, .flow-header__title { font-size: 20px !important; }
    .btn-primary, .voucher-primary { min-height: 44px !important; }
}