/* Shared Hublogs page language for authenticated and utility screens. */
:root {
    --hub-navy: #081a46;
    --hub-blue: #1268ad;
    --hub-cyan: #20b6e6;
    --hub-teal: #129c92;
    --hub-bg: #f4f9fc;
    --hub-line: #dceaf1;
    --hub-muted: #60758a;
    --hub-card-shadow: 0 8px 22px rgba(8, 26, 70, .055);
    --hub-radius: 14px;
}

body:not(.home-redesign):not(.login-page) {
    background:
        radial-gradient(circle at 100% 0%, rgba(32, 182, 230, .12), transparent 24rem),
        linear-gradient(180deg, #f8fcff 0%, var(--hub-bg) 48%, #eef7fb 100%);
    color: #102a43;
}

body:not(.home-redesign) .container,
body:not(.home-redesign) .plp-container,
body:not(.home-redesign) .smspool-shell,
body:not(.home-redesign) .boost-container {
    max-width: 1120px;
}

.container .page-hero,
.container .wallet-hero,
.container .dashboard-section,
.container .wallet-card,
.container .support-card,
.container .customer-card,
.container .content-card,
.plp-container .product-filter-bar,
.plp-container .product-category-block,
.smspool-shell .panel,
.smspool-shell .card,
.boost-container .panel,
.boost-container .card {
    border: 1px solid var(--hub-line);
    border-radius: var(--hub-radius);
    background: rgba(255, 255, 255, .96);
    box-shadow: var(--hub-card-shadow);
}

.container .page-hero,
.container .wallet-hero {
    position: relative;
    overflow: hidden;
    padding: 1.2rem 1.35rem;
    margin: 1rem 0 1.15rem;
    background: linear-gradient(120deg, #ffffff 0%, #eef8fc 62%, #e3f8f3 100%);
}

.container .page-hero::after,
.container .wallet-hero::after {
    content: "";
    position: absolute;
    width: 11rem;
    height: 11rem;
    right: -3rem;
    bottom: -5rem;
    border-radius: 50%;
    background: rgba(32, 182, 230, .14);
    box-shadow: -3rem -2rem 0 rgba(18, 156, 146, .08);
    pointer-events: none;
}

.container .page-hero > *,
.container .wallet-hero > * {
    position: relative;
    z-index: 1;
}

.container .page-hero h1,
.container .wallet-hero h1,
.plp-container > h1 {
    color: var(--hub-navy);
    font-family: 'Plus Jakarta Sans', 'Manrope', sans-serif;
    letter-spacing: -.02em;
}

.container .page-hero p,
.container .wallet-hero-sub,
.section-lead {
    color: var(--hub-muted);
}

.container .dashboard-section,
.container .wallet-card {
    position: relative;
    padding: 1.15rem;
    margin-bottom: 1rem;
}

.container .dashboard-section::before,
.container .wallet-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 1.15rem;
    right: 1.15rem;
    height: 3px;
    border-radius: 0 0 8px 8px;
    background: linear-gradient(90deg, var(--hub-blue), var(--hub-teal), var(--hub-cyan));
}

.container .dashboard-section h2,
.container .wallet-card h2 {
    color: var(--hub-navy);
    font-family: 'Plus Jakarta Sans', 'Manrope', sans-serif;
}

.container .section-head {
    border-bottom: 1px solid var(--hub-line);
    padding-bottom: .7rem;
    margin-bottom: .85rem;
}

.container .section-head h2 {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.container .section-head h2::before {
    content: "";
    width: .55rem;
    height: .55rem;
    border-radius: 50%;
    background: var(--hub-teal);
    box-shadow: 0 0 0 5px rgba(18, 156, 146, .12);
}

.container .form-group label,
.container form label,
.plp-container .filter-control label {
    color: #102a43;
    font-size: .78rem;
    font-weight: 800;
}

.container input:not([type="hidden"]),
.container select,
.container textarea,
.plp-container input,
.plp-container select,
.smspool-shell input,
.smspool-shell select,
.smspool-shell textarea,
.boost-container input,
.boost-container select,
.boost-container textarea {
    border: 1px solid #cddfea;
    border-radius: 10px;
    background: #f8fbfd;
    color: #102a43;
}

.container input:not([type="hidden"]):focus,
.container select:focus,
.container textarea:focus,
.plp-container input:focus,
.plp-container select:focus,
.smspool-shell input:focus,
.smspool-shell select:focus,
.smspool-shell textarea:focus,
.boost-container input:focus,
.boost-container select:focus,
.boost-container textarea:focus {
    outline: none;
    border-color: var(--hub-cyan);
    box-shadow: 0 0 0 4px rgba(32, 182, 230, .14);
}

.container .btn,
.plp-container .btn,
.plp-container .btn-buy,
.smspool-shell .btn,
.boost-container .btn {
    border-radius: 9px;
    font-weight: 800;
}

.container .btn-primary,
.container .btn-success,
.plp-container .btn-buy,
.smspool-shell .btn-primary,
.boost-container .btn-primary {
    border: 0;
    background: linear-gradient(105deg, var(--hub-blue), var(--hub-teal));
    color: #fff;
}

.container .btn:not(.btn-primary):not(.btn-success) {
    border: 1px solid #b9d8e8;
    background: #eef8fc;
    color: var(--hub-blue);
}

.container .btn:not(.btn-primary):not(.btn-success):hover {
    background: #dff5f2;
    border-color: #8bcfc5;
}

.container .message,
.plp-container .message,
.smspool-shell .message,
.boost-container .message {
    border-radius: 10px;
    border-width: 1px;
    box-shadow: none;
}

.plp-container .product-filter-bar { padding: 1rem; }
.plp-container .product-category-block { padding: 1rem; }
.plp-container .category-title { color: var(--hub-navy); font-family: 'Plus Jakarta Sans', 'Manrope', sans-serif; }
.plp-container .product-card { border-color: var(--hub-line); border-radius: 12px; box-shadow: 0 7px 16px rgba(8, 26, 70, .045); }
.plp-container .product-card::before { background: #e5f5fb; color: var(--hub-blue); }
.plp-container .product-card:hover { border-color: #a9ddec; box-shadow: 0 10px 22px rgba(8, 26, 70, .08); }
.plp-container .product-price { color: var(--hub-blue); }

.container .transactions-table,
.container .orders-table,
.container .users-table {
    overflow-x: auto;
    border-radius: 10px;
}

.container table { min-width: 620px; }
.container th { color: var(--hub-navy); background: #eef7fb; }
.container td, .container th { border-color: var(--hub-line); }
.container tbody tr:nth-child(even) { background: rgba(238, 248, 252, .48); }
.container tbody tr:hover { background: #e5f7f4; }
.container td.positive { color: #087f72; font-weight: 800; }
.container td.negative { color: #b42336; font-weight: 800; }

.wallet-layout {
    gap: 1rem;
}

.wallet-note {
    border-left: 4px solid var(--hub-teal);
    background: #e8f8f4;
    color: #356b70;
    border-radius: 0 8px 8px 0;
    padding: .65rem .75rem;
}

.wallet-tips li::marker {
    color: var(--hub-teal);
}

.container .message.success {
    background: #e8f8f4;
    border-color: #a9dfd2;
    color: #087f72;
}

.container .message.error {
    background: #fff0f2;
    border-color: #f0b7c0;
    color: #a52c3b;
}

.wallet-balance-chip,
.balance-summary {
    background: linear-gradient(110deg, var(--hub-navy), var(--hub-blue), var(--hub-teal)) !important;
    border-radius: 12px !important;
}

.wallet-fund-btn { min-height: 46px; }

.product-detail-page .product-detail {
    border: 1px solid var(--hub-line);
    border-radius: var(--hub-radius);
    background: #fff;
    box-shadow: var(--hub-card-shadow);
}

.product-detail-page .product-detail h1 { color: var(--hub-navy); font-family: 'Plus Jakarta Sans', 'Manrope', sans-serif; }
.product-detail-page .product-detail .price { color: var(--hub-blue); }
.product-detail-page .product-detail .btn { background: linear-gradient(105deg, var(--hub-blue), var(--hub-teal)); color: #fff; border: 0; }

.smspool-page .smspool-shell,
.social-boost-page .boost-container { padding-top: 1rem; }

.smspool-page .smspool-shell > section,
.social-boost-page .boost-container > section { border-radius: var(--hub-radius); }

@media (max-width: 700px) {
    body:not(.home-redesign) .container,
    body:not(.home-redesign) .plp-container,
    body:not(.home-redesign) .smspool-shell,
    body:not(.home-redesign) .boost-container { width: calc(100% - 24px); }
    .container .page-hero,
    .container .wallet-hero { padding: 1rem; margin-top: .7rem; }
    .container .page-hero h1,
    .container .wallet-hero h1,
    .plp-container > h1 { font-size: 1.65rem; }
    .container .dashboard-section,
    .container .wallet-card { padding: .9rem; }
    .container table { min-width: 580px; }
    .wallet-balance-chip { width: 100%; min-width: 0 !important; }
}

@media (max-width: 430px) {
    .container .page-hero,
    .container .wallet-hero { margin-bottom: .8rem; }
    .container .page-hero h1,
    .container .wallet-hero h1,
    .plp-container > h1 { font-size: 1.45rem; }
    .container .btn { min-height: 44px; }
    .product-detail-page .product-detail { padding: 1rem; }
    .smspool-page .smspool-shell,
    .social-boost-page .boost-container { padding-top: .5rem; }
}