/* Beyond Oil Co. shared platform theme. */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Outfit:wght@400;500;600;700&display=swap');

:root {
    --gold: #cf104a !important;
    --gold-light: #ffd6e3 !important;
    --gold-dark: #c90044 !important;
    --dark: #ffffff !important;
    --dark-card: #ffffff !important;
    --dark-elevated: #f5f6f8 !important;
    --dark-border: #e7e7eb !important;
    --text-primary: #3f3d45 !important;
    --text-secondary: #67636d !important;
    --text-muted: #696470 !important;
    --accent-green: #087866 !important;
    --green: #087866 !important;
    --accent-red: #c90044 !important;
    --accent-orange: #94520b !important;
    --bg-primary: #ffffff !important;
    --bg-secondary: #f5f6f8 !important;
    --bg-card: #ffffff !important;
    --border: #e7e7eb !important;
    --radius: 12px !important;
    --radius-sm: 8px !important;
    --bo-pink: #cf104a;
    --bo-pink-dark: #c90044;
    --bo-purple: #7551b2;
    --bo-teal: #18c7b0;
    --bo-orange: #ff9d2e;
    --bo-charcoal: #3f3d45;
    --bo-muted: #696470;
    --bo-soft: #f5f6f8;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    color: var(--bo-charcoal) !important;
    background: #fff !important;
    background-image: none !important;
    font-family: 'DM Sans', Arial, sans-serif !important;
    -webkit-font-smoothing: antialiased;
}
body::before { content: none !important; }
a { text-underline-offset: 3px; }
h1, h2, h3, h4, h5, h6,
.section-title, .page-header h1, .hero h1,
.stat-value, .amount-label-value, .plan-label-duration {
    color: var(--bo-charcoal) !important;
    font-family: 'Outfit', 'DM Sans', Arial, sans-serif !important;
    font-weight: 500 !important;
    letter-spacing: -.025em;
}

.navbar, .dash-navbar, nav.navbar, nav.dash-navbar {
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    min-height: 68px !important;
    padding: 0 !important;
    border: 0 !important;
    border-bottom: 1px solid #ececf0 !important;
    border-radius: 0 !important;
    background: rgba(255,255,255,.97) !important;
    box-shadow: 0 5px 18px rgba(49,45,55,.045) !important;
    backdrop-filter: blur(14px) saturate(130%) !important;
}
.navbar .container, .dash-navbar .container,
.navbar .nav-container, .dash-navbar .nav-container { min-height: 68px !important; }
.navbar .nav-links a:not(.btn), .dash-navbar .nav-links a:not(.btn),
.navbar .nav-right, .dash-navbar .nav-right,
.navbar a:not(.btn), .dash-navbar a:not(.btn) {
    color: #68646e !important;
    font-size: 13px !important;
    font-weight: 600 !important;
}
.navbar .nav-links a:not(.btn):hover, .dash-navbar .nav-links a:not(.btn):hover,
.navbar a:not(.btn):hover, .dash-navbar a:not(.btn):hover { color: var(--bo-pink) !important; }
.navbar .logo img, .dash-navbar .logo img, .logo img {
    width: min(188px, 48vw) !important;
    height: 38px !important;
    object-fit: contain !important;
    object-position: left center !important;
}
.mobile-toggle span { background: var(--bo-charcoal) !important; }
.mobile-nav {
    background: rgba(255,255,255,.99) !important;
    border-color: #ececf0 !important;
    box-shadow: 0 16px 30px rgba(49,45,55,.08) !important;
}
.mobile-nav a { color: var(--bo-charcoal) !important; }

.sidebar, .admin-sidebar {
    color: #fff !important;
    background: #302c36 !important;
    border-color: #403a48 !important;
}
.sidebar a, .admin-sidebar a { border-radius: 7px !important; }
.sidebar a:hover, .sidebar a.active,
.admin-sidebar a:hover, .admin-sidebar a.active { background: var(--bo-pink) !important; color: #fff !important; }

.btn, button, input[type='submit'],
.btn-primary, .btn-secondary, .btn-outline {
    border-radius: 7px !important;
    font-family: 'DM Sans', Arial, sans-serif !important;
    font-weight: 700 !important;
    letter-spacing: 0 !important;
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease !important;
}
.btn-primary, button.btn-primary, input[type='submit'] {
    color: #fff !important;
    background: var(--bo-pink) !important;
    border: 1px solid var(--bo-pink) !important;
    box-shadow: 0 8px 20px rgba(243,24,89,.18) !important;
}
.btn-primary:hover, button.btn-primary:hover, input[type='submit']:hover {
    background: var(--bo-pink-dark) !important;
    border-color: var(--bo-pink-dark) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 11px 24px rgba(243,24,89,.24) !important;
}
.btn-secondary, .btn-outline {
    color: var(--bo-charcoal) !important;
    background: #fff !important;
    border: 1px solid #d7d5dc !important;
    box-shadow: none !important;
}

.hero, .city-hero, .auth-hero, .page-hero {
    color: var(--bo-charcoal) !important;
    background: #fff !important;
    background-image: none !important;
}
.hero h1, .hero h2, .hero h3, .hero .command-copy h1,
.city-hero h1, .city-hero h2, .auth-hero h1 { color: var(--bo-charcoal) !important; }
.hero p, .command-copy p, .city-hero p, .auth-hero p { color: var(--bo-muted) !important; }
.hero-kicker, .section-label, .eyebrow, .verified-badge, .investment-mini-label {
    color: var(--bo-pink) !important;
    background: #fff0f5 !important;
    border: 1px solid #ffd5e2 !important;
    border-radius: 5px !important;
    font-family: 'DM Sans', Arial, sans-serif !important;
    font-weight: 700 !important;
    letter-spacing: .04em !important;
    text-transform: uppercase !important;
}
.gold-text { color: var(--bo-pink) !important; }

.glass-panel, .section-shell, .section-card, .summary-panel,
.stat-card, .info-card, .investment-card, .investment-row-card,
.promotion-card, .testimonial-card, .country-card, .project-card,
.operator-profile, .auth-card, .form-card, .table-card, .returns-card,
.clarity-step, .support-channel, .bank-card {
    border: 1px solid #e8e7ec !important;
    border-radius: 12px !important;
    background: #fff !important;
    box-shadow: 0 12px 34px rgba(49,45,55,.065) !important;
}
.stat-card:nth-child(3n+1), .info-card:nth-child(3n+1) { border-top: 3px solid var(--bo-purple) !important; }
.stat-card:nth-child(3n+2), .info-card:nth-child(3n+2) { border-top: 3px solid var(--bo-teal) !important; }
.stat-card:nth-child(3n), .info-card:nth-child(3n) { border-top: 3px solid var(--bo-orange) !important; }

input:not([type='checkbox']):not([type='radio']):not([type='range']):not([type='hidden']):not([type='submit']):not([type='button']),
select, textarea, .form-control {
    min-height: 46px;
    border: 1px solid #d9d7de !important;
    border-radius: 7px !important;
    background: #fff !important;
    color: var(--bo-charcoal) !important;
    font-family: 'DM Sans', Arial, sans-serif !important;
}
input:focus, select:focus, textarea:focus, .form-control:focus {
    border-color: var(--bo-pink) !important;
    box-shadow: 0 0 0 3px rgba(243,24,89,.11) !important;
    outline: none !important;
}

table { border-collapse: separate; border-spacing: 0; }
th {
    color: #625d69 !important;
    background: #f4f4f7 !important;
    font-family: 'DM Sans', Arial, sans-serif !important;
    font-size: 11px !important;
    letter-spacing: .045em;
    text-transform: uppercase;
}
td { border-color: #ecebf0 !important; }
tbody tr:hover { background: #fff7fa !important; }

.trust-pill, .hero-badge, .clarity-pill, .legacy-pill,
.feed-chip, .status-badge, .badge { border-radius: 5px !important; }
.progress-fill, .progress-bar, .ring {
    background: linear-gradient(90deg, var(--bo-pink), var(--bo-purple)) !important;
}
.success-message, .alert-success {
    color: #087866 !important;
    background: #eafaf6 !important;
    border-color: #bcecdf !important;
}
.error-message, .alert-error {
    color: #b0003c !important;
    background: #fff0f4 !important;
    border-color: #ffc7d7 !important;
}

footer, .footer, footer[style] {
    color: #68636d !important;
    background: #f3f4f6 !important;
    border-top: 1px solid #e7e7eb !important;
}
footer p, footer a, footer h3, footer h4 { color: #68636d !important; }
footer a:hover { color: var(--bo-pink) !important; }
::selection { color: #fff; background: var(--bo-pink); }

@media (max-width: 768px) {
    .navbar, .dash-navbar { min-height: 62px !important; }
    .navbar .logo img, .dash-navbar .logo img, .logo img {
        width: min(170px, 58vw) !important;
        height: 34px !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    * { scroll-behavior: auto !important; transition-duration: .001ms !important; animation-duration: .001ms !important; animation-iteration-count: 1 !important; }
}

/* Surface-aware contrast: light cards must not inherit dark-panel text colours. */
:is(.bo-surface-dark, .auth-sidebar, .support-card, .payment-card-header,
    .promotion-modal-head, .hero-card, .referral-card, .matured-card,
    .inv-pay-panel, .cta-section) {
    --text-primary: #fff !important;
    --text-secondary: #f0edf4 !important;
    --text-muted: #e7e2ed !important;
    color: #fff !important;
    background: linear-gradient(135deg, #37313e, #58436e) !important;
}
:is(.bo-surface-dark, .auth-sidebar, .support-card, .payment-card-header,
    .promotion-modal-head, .hero-card, .referral-card, .matured-card,
    .inv-pay-panel, .cta-section) :is(h1, h2, h3, h4, h5, h6, .section-title) {
    color: #fff !important;
}
:is(.bo-surface-dark, .auth-sidebar, .support-card, .payment-card-header,
    .promotion-modal-head, .hero-card, .referral-card, .matured-card,
    .inv-pay-panel, .cta-section) :is(p, .section-subtitle, .label, .lbl, .sidebar-stat span) {
    color: #f0edf4 !important;
}
.sidebar-link, .sidebar-logout, .admin-sidebar a { color: #f0edf4 !important; }
.sidebar-badge { color: #fff !important; background: #7551b2 !important; }
.sidebar-logo img { background: #fff; padding: 6px; border-radius: 7px; }
.sidebar-feature-text, .referral-card .share-btn { color: #f0edf4 !important; }
.inv-pay-panel:hover { background: linear-gradient(135deg, #37313e, #58436e) !important; }
.sticky-bulk-actions .act-btn { background: #fff !important; color: #3f3d45 !important; }
.sticky-bulk-actions .act-approve { color: #087866 !important; }
.sticky-bulk-actions .act-delete { color: #b0003c !important; }
.support-card .support-channel,
.support-card .support-channel :is(.support-channel-text, strong, p) {
    color: var(--bo-charcoal) !important;
}
.support-card .support-channel-icon { color: #087866 !important; background: #eafaf6 !important; }
:is(.glass-panel, .section-shell, .section-card, .summary-panel, .stat-card,
    .investment-card, .investment-row-card, .promotion-card, .testimonial-card,
    .country-card, .project-card, .auth-card, .form-card, .table-card,
    .returns-card, .bank-card, .modal, .modal-card, .bank-ack-modal, .matching-card) {
    --text-primary: #3f3d45 !important;
    --text-secondary: #67636d !important;
    --text-muted: #696470 !important;
    color: #3f3d45;
}
#bankDetailsBanner, #pwaInstallBanner {
    color: #fff !important;
    background: linear-gradient(110deg, #37313e, #58436e) !important;
}
input::placeholder, textarea::placeholder { color: #696470 !important; opacity: 1; }
input[type='checkbox'], input[type='radio'] { accent-color: var(--bo-pink); }
.btn-facebook { background: #145fc2 !important; }

/* Keep intrinsic text, media and form widths inside their layout column. */
:where(main, section, article, header, footer, nav, div, form, fieldset) { min-width: 0; }
body { overflow-wrap: anywhere; }
img, video, canvas, iframe { max-width: 100%; }
img, video { height: auto; }
input, select, textarea, .form-control { min-width: 0; max-width: 100%; }
textarea { resize: vertical; }
button, .btn, .bo-button { max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
.table-wrap, .table-wrapper, .table-responsive, .dash-table-scroll {
    min-width: 0; max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain;
}
.info-row, .ref-row, .bank-row, .payment-card-header-top,
.modal-actions, .modal-btns, .btn-row, .share-buttons { flex-wrap: wrap; }
.info-row .value, .referral-link-input, .link-input { min-width: 0; overflow-wrap: anywhere; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, summary:focus-visible {
    outline: 3px solid #7551b2 !important; outline-offset: 3px;
    box-shadow: 0 0 0 2px #fff !important;
}
:is(.plan-option, .amount-option, .dur-option, .choice-option) input:focus-visible + label {
    outline: 3px solid #7551b2; outline-offset: 3px;
}

/* Do not set display here: existing open/close and payment-acknowledgement logic owns it. */
.modal-overlay, .bank-ack-overlay, .matching-overlay, #pwaIosModal, #dashExitModal {
    --dialog-gap: 16px;
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    padding: var(--dialog-gap) !important;
    padding: max(var(--dialog-gap), env(safe-area-inset-top)) max(var(--dialog-gap), env(safe-area-inset-right)) max(var(--dialog-gap), env(safe-area-inset-bottom)) max(var(--dialog-gap), env(safe-area-inset-left)) !important;
    overflow-y: auto;
    overscroll-behavior: contain;
}
.modal-overlay > :is(.modal, .modal-card), .bank-ack-modal, .matching-card,
#pwaIosModal > div, #dashExitModal > div {
    flex-shrink: 1;
    min-width: 0;
    width: 100% !important;
    max-height: calc(100vh - 2 * var(--dialog-gap, 16px)) !important;
    max-height: calc(100dvh - max(var(--dialog-gap, 16px), env(safe-area-inset-top)) - max(var(--dialog-gap, 16px), env(safe-area-inset-bottom))) !important;
    overflow: auto !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}
.promotion-close, #pwaInstallDismiss,
#pwaIosModal > div > button:first-child, #dashExitModal > div > button:first-child {
    min-width: 44px; min-height: 44px;
}
#pwaIosModal > div > button:first-child, #dashExitModal > div > button {
    color: #625d69 !important;
}
#pwaIosModal > div > button:last-child { color: #fff !important; }
.modal-btns > *, .modal-actions > * { min-width: 0; }
.notif-dropdown, .notification-panel { max-width: calc(100vw - 24px); }
.notif-list, .notification-panel-body { max-height: min(380px, calc(100dvh - 160px)); }
.maturity-feedback { max-width: calc(100vw - 32px); }
.verify-preview { color: #fff; max-width: 100%; }
.sp-popup { max-width: calc(100vw - 24px); }
.sp-card { min-width: 0 !important; padding-right: 48px !important; }
.sp-meta { color: #696470 !important; font-size: .8rem !important; flex-wrap: wrap; }
.sp-title strong { color: var(--bo-pink) !important; }
.sp-verified { color: #087866 !important; font-size: .75rem !important; }
.sp-close { color: #625d69 !important; min-width: 44px; min-height: 44px; top: 0 !important; right: 0 !important; }

@media (max-width: 1060px) {
    .promotion-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 768px) {
    .navbar .container, .dash-navbar .container { gap: 10px; }
    .dash-navbar .logo { flex: 0 1 138px; min-width: 0; }
    .dash-navbar .logo img { width: 100% !important; max-width: 138px !important; }
    .dash-navbar .nav-right { gap: 8px; min-width: 0; }
    .dash-navbar .nav-back, .dash-navbar .nav-logout { min-height: 44px; }
    .nav-avatar { flex-shrink: 0; }
    .mobile-nav { max-height: calc(100dvh - 72px); overflow-y: auto; }
    .notif-dropdown { position: fixed; top: 76px; right: 12px !important; width: calc(100vw - 24px); }
    .notification-panel { position: fixed; top: 76px; right: 12px; width: calc(100vw - 24px); z-index: 200; }
    .sidebar { max-width: 100%; }
    .sidebar-nav { min-width: 0 !important; }
    .modal-overlay, .bank-ack-overlay, .matching-overlay, #pwaIosModal, #dashExitModal { --dialog-gap: 12px; }
    .modal-overlay > .modal, .bank-ack-modal, .matching-card,
    #pwaIosModal > div, #dashExitModal > div { padding: 28px 18px !important; }
    #pwaIosModal > div, #dashExitModal > div { padding-top: 56px !important; }
    .promotion-modal-head, .promotion-modal-body { padding: 22px 18px; }
    .promotion-grid, .profile-grid, .verify-panel { grid-template-columns: minmax(0, 1fr); }
    .modal-btns, .modal-actions, .btn-row { flex-direction: column; }
    .modal-btns > *, .modal-actions > *, .btn-row > * { width: 100%; }
    input:not([type='checkbox']):not([type='radio']):not([type='range']):not([type='hidden']), select, textarea {
        font-size: 16px !important;
    }
    .btn, .bo-button, .act-btn { min-height: 44px; }
    .form-grid, .grid-2, .referral-how-it-works { grid-template-columns: minmax(0, 1fr); }
    .main [style*='grid-template-columns'] { grid-template-columns: minmax(0, 1fr) !important; }
    .pipeline-row { grid-template-columns: minmax(0, 1fr) auto; }
    .pipeline-row > :nth-child(2) { grid-row: 2; grid-column: 1 / -1; }
    .notification-item, .table-card-header, .dashboard-card-header, .dash-topbar,
    .admin-head-actions, .attention-strip, .referral-link-box { flex-wrap: wrap; }
    #bankDetailsBanner, #pwaInstallBanner {
        max-height: 45vh; max-height: 45dvh; overflow-y: auto;
        padding: 12px max(12px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left)) !important;
    }
    #bankDetailsBanner > div, #pwaInstallBanner > div { flex-wrap: wrap; max-width: 100%; }
    body:has(#bankDetailsBanner), body:has(#pwaInstallBanner) { padding-bottom: min(45dvh, 260px); }
}
@media (max-width: 420px) {
    .dash-navbar .logo { flex-basis: 106px; }
    .dash-navbar .logo img { max-width: 106px !important; }
    .dash-navbar .nav-right { gap: 5px; }
    .dash-navbar .container { padding-left: 12px; padding-right: 12px; }
    .stats-row, .steps, .matured-stats, .dur-grid, .inv-pay-inner { grid-template-columns: minmax(0, 1fr); }
    .hero-card, .link-card, .matured-card, .referral-card { padding: 24px 18px; }
    .matching-card { padding-top: 28px !important; }
    .plan-option label { padding: 18px 8px; }
}