:root {
    --rp-navy: #04307f;
    --rp-sky: #04a0f8;
    --rp-blue: #0560e0;
    --rp-sky-dark: #0478e8;
    --rp-bg: #f5f7fb;
    --rp-border: #e3e8f0;
    --rp-text: #1d2433;
    --rp-muted: #6b7489;
}

body { background: var(--rp-bg); color: var(--rp-text); font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
a { color: var(--rp-sky-dark); }

/* Header */
.rp-nav { background: #fff; border-bottom: 1px solid var(--rp-border); }
.rp-brand { font-weight: 800; font-size: 1.5rem; color: var(--rp-navy) !important; letter-spacing: -.5px; }
.rp-brand span { color: var(--rp-sky); }
.rp-nav .nav-link { color: var(--rp-text); font-weight: 500; }
.rp-nav .nav-link:hover, .rp-nav .nav-link.active { color: var(--rp-sky-dark); }
.wallet-pill { background: #e8f8fe; color: var(--rp-navy); border-radius: 999px; padding: .35rem .9rem; font-weight: 600; text-decoration: none; white-space: nowrap; }

/* Buttons */
.btn-rp { background: var(--rp-sky); border-color: var(--rp-sky); color: #fff; font-weight: 600; }
.btn-rp:hover, .btn-rp:focus { background: var(--rp-sky-dark); border-color: var(--rp-sky-dark); color: #fff; }
.btn-navy { background: var(--rp-navy); color: #fff; font-weight: 600; }
.btn-navy:hover { background: #001c4f; color: #fff; }

/* Hero */
.rp-hero { background: linear-gradient(135deg, var(--rp-navy) 0%, var(--rp-blue) 60%, var(--rp-sky) 100%); color: #fff; padding: 2.5rem 0 6rem; }
.rp-hero h1 { font-weight: 800; letter-spacing: -.5px; }
.rp-hero-card { margin-top: -4.5rem; }

/* Cards */
.rp-card { background: #fff; border: 1px solid var(--rp-border); border-radius: 16px; box-shadow: 0 4px 24px rgba(0, 41, 112, .06); }
.rp-card-title { font-weight: 700; color: var(--rp-navy); }

/* Service grid */
.svc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: .5rem; }
.svc-item { display: flex; flex-direction: column; align-items: center; gap: .4rem; padding: .75rem .25rem; border-radius: 12px; text-decoration: none; color: var(--rp-text); font-size: .82rem; font-weight: 500; text-align: center; transition: background .15s; }
.svc-item:hover { background: #eef9fe; color: var(--rp-navy); }
.svc-item.active { background: #e2f6fd; color: var(--rp-navy); }
.svc-icon { width: 48px; height: 48px; border-radius: 14px; background: #e8f8fe; color: var(--rp-sky-dark); display: grid; place-items: center; font-size: 1.4rem; }
.svc-item.active .svc-icon { background: var(--rp-sky); color: #fff; }

/* Forms */
.form-control, .form-select { border-radius: 10px; padding: .65rem .9rem; border-color: #d3dae6; }
.form-control:focus, .form-select:focus { border-color: var(--rp-sky); box-shadow: 0 0 0 .2rem rgba(4, 160, 248, .18); }
.form-floating > label { color: var(--rp-muted); }

/* Operator logo bubble */
.op-logo { width: 40px; height: 40px; border-radius: 50%; color: #fff; display: inline-grid; place-items: center; font-weight: 700; font-size: .85rem; flex-shrink: 0; }

/* Plans */
.plan-card { border: 1px solid var(--rp-border); border-radius: 12px; padding: .85rem 1rem; cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.plan-card:hover { border-color: var(--rp-sky); box-shadow: 0 2px 10px rgba(4, 160, 248, .18); }
.plan-amount { font-size: 1.25rem; font-weight: 800; color: var(--rp-navy); }
.plan-meta small { color: var(--rp-muted); display: block; font-size: .72rem; text-transform: uppercase; letter-spacing: .3px; }

/* Receipt */
.status-icon { width: 72px; height: 72px; border-radius: 50%; display: grid; place-items: center; font-size: 2.2rem; margin: 0 auto; color: #fff; }
.receipt-row { display: flex; justify-content: space-between; padding: .55rem 0; border-bottom: 1px dashed var(--rp-border); gap: 1rem; }
.receipt-row:last-child { border-bottom: 0; }
.receipt-row span:first-child { color: var(--rp-muted); }
.receipt-row span:last-child { font-weight: 600; text-align: right; word-break: break-all; }

/* Promo strip */
.promo { border-radius: 16px; padding: 1.25rem; color: #fff; min-height: 120px; }
.promo-1 { background: linear-gradient(135deg, #ff7a18, #ffb347); }
.promo-2 { background: linear-gradient(135deg, #6a11cb, #2575fc); }
.promo-3 { background: linear-gradient(135deg, #11998e, #38ef7d); }

/* Footer */
.rp-footer { background: var(--rp-navy); color: #c9d5ec; }
.rp-footer .rp-brand, .admin-sidebar .rp-brand { color: #fff !important; }
.rp-footer a { color: #c9d5ec; text-decoration: none; overflow-wrap: anywhere; }
.rp-footer a:hover { color: #fff; }

/* Tables */
.table > :not(caption) > * > * { padding: .75rem .75rem; }
.table thead th { font-size: .78rem; text-transform: uppercase; letter-spacing: .4px; color: var(--rp-muted); font-weight: 600; background: #f8fafc; }

/* Admin */
.admin-sidebar { background: var(--rp-navy); min-height: 100vh; width: 240px; flex-shrink: 0; }
.admin-sidebar .nav-link { color: #c9d5ec; border-radius: 10px; padding: .6rem .9rem; margin-bottom: .2rem; }
.admin-sidebar .nav-link:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.admin-sidebar .nav-link.active { background: var(--rp-sky); color: #fff; }
.stat-card .stat-value { font-size: 1.6rem; font-weight: 800; color: var(--rp-navy); }
.stat-card .stat-label { color: var(--rp-muted); font-size: .85rem; }

@media (max-width: 991.98px) {
    .admin-sidebar { width: 100%; min-height: auto; }
}

@media print {
    .rp-nav, .rp-footer, .no-print { display: none !important; }
    body { background: #fff; }
    .rp-card { box-shadow: none; border: 0; }
}

/* Content pages */
.page-hero { background: linear-gradient(135deg, var(--rp-navy) 0%, var(--rp-blue) 60%, var(--rp-sky) 100%); color: #fff; padding: 3rem 0 3.5rem; }
.page-hero h1 { font-weight: 800; letter-spacing: -.5px; }
.page-hero .breadcrumb-item, .page-hero .breadcrumb-item a, .page-hero .breadcrumb-item::before { color: rgba(255, 255, 255, .75) !important; text-decoration: none; }
.section-title { font-weight: 800; color: var(--rp-navy); letter-spacing: -.3px; }
.eyebrow { text-transform: uppercase; letter-spacing: 1.5px; font-size: .75rem; font-weight: 700; color: var(--rp-sky-dark); }
.feature-icon { width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; font-size: 1.6rem; background: #e8f8fe; color: var(--rp-sky-dark); }
.stat-big { font-size: 2.2rem; font-weight: 800; color: var(--rp-navy); line-height: 1; }
.timeline { border-left: 3px solid var(--rp-border); padding-left: 1.5rem; }
.timeline-item { position: relative; padding-bottom: 1.5rem; }
.timeline-item::before { content: ""; position: absolute; left: calc(-1.5rem - 9px); top: .25rem; width: 15px; height: 15px; border-radius: 50%; background: var(--rp-sky); border: 3px solid #fff; box-shadow: 0 0 0 2px var(--rp-sky); }
.step-num { width: 40px; height: 40px; border-radius: 50%; background: var(--rp-sky); color: #fff; font-weight: 800; display: grid; place-items: center; flex-shrink: 0; }

/* Blog */
.post-card { overflow: hidden; transition: transform .15s, box-shadow .15s; text-decoration: none; color: inherit; display: flex; flex-direction: column; }
.post-card:hover { transform: translateY(-3px); box-shadow: 0 10px 30px rgba(0, 41, 112, .12); color: inherit; }
.post-cover { height: 170px; display: grid; place-items: center; font-size: 3.5rem; color: #fff; }
.post-cover.lg { height: 260px; font-size: 5rem; border-radius: 16px; }
.cover-0 { background: linear-gradient(135deg, #002970, #00baf2); }
.cover-1 { background: linear-gradient(135deg, #6a11cb, #2575fc); }
.cover-2 { background: linear-gradient(135deg, #11998e, #38ef7d); }
.cover-3 { background: linear-gradient(135deg, #ff7a18, #ffb347); }
.cover-4 { background: linear-gradient(135deg, #c31432, #f3721b); }
.cover-5 { background: linear-gradient(135deg, #0f2027, #2c5364); }
.post-body { font-size: 1.05rem; line-height: 1.8; }
.post-body h2, .post-body h3 { font-weight: 700; color: var(--rp-navy); margin-top: 2rem; }
.post-body blockquote { border-left: 4px solid var(--rp-sky); padding: .5rem 1rem; background: #f0faff; border-radius: 0 8px 8px 0; }

/* FAQ */
.faq .accordion-item { border: 1px solid var(--rp-border); border-radius: 12px !important; margin-bottom: .6rem; overflow: hidden; }
.faq .accordion-button { font-weight: 600; color: var(--rp-text); }
.faq .accordion-button:not(.collapsed) { background: #eef9fe; color: var(--rp-navy); box-shadow: none; }
.faq .accordion-button:focus { box-shadow: none; }

/* Policy pages */
.policy h2 { font-size: 1.2rem; font-weight: 700; color: var(--rp-navy); margin-top: 2rem; }
.policy p, .policy li { color: #3a4356; line-height: 1.75; }

/* Brand lockup (logo symbol + wordmark) */
.brand-lockup { display: inline-flex; align-items: center; gap: .55rem; text-decoration: none; }
.brand-icon { object-fit: contain; flex-shrink: 0; }
.brand-text { font-weight: 800; letter-spacing: .5px; color: var(--rp-navy); line-height: 1; white-space: nowrap; }
.brand-text span { color: var(--rp-sky-dark); font-weight: 800; }
.brand-dark .brand-icon { background: #fff; border-radius: 10px; padding: 3px; }
.brand-dark .brand-text { color: #fff; }
.brand-dark .brand-text span { color: #7cc8ff; }
.brand-logo-full { max-width: 220px; height: auto; }
.rp-nav .nav-link, .rp-nav .btn { white-space: nowrap; }

/* Operator grid (below pay forms) */
.op-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: .6rem; }
.op-tile { display: flex; flex-direction: column; align-items: center; gap: .45rem; padding: .85rem .5rem; border: 1px solid var(--rp-border); border-radius: 12px; background: #fff; transition: border-color .15s, box-shadow .15s, background .15s; }
.op-tile:hover { border-color: var(--rp-sky); box-shadow: 0 2px 10px rgba(4, 160, 248, .15); }
.op-tile.active { border-color: var(--rp-sky); background: #eef8ff; box-shadow: 0 0 0 2px rgba(4, 160, 248, .25); }
.op-tile-name { font-size: .78rem; font-weight: 600; color: var(--rp-text); text-align: center; line-height: 1.25; }
.op-logo-img { object-fit: contain; border-radius: 50%; background: #fff; flex-shrink: 0; }
.op-tile-state { font-size: .68rem; color: var(--rp-muted); margin-top: -.3rem; }
.rp-footer ul li { display: flex; align-items: baseline; gap: .25rem; }
.rp-footer ul li > i { flex-shrink: 0; }