/* iHandel site styles. Top part is the provided design, verbatim. */
/* The design asks for Inter; serve it locally so every visitor gets it. */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 900; font-display: swap;
  src: url('/fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 900; font-display: swap;
  src: url('/fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --primary: #2E4357;
    --secondary: #57758A;
    --soft: #C7D9E5;
    --cream: #F3EFEC;
    --white: #ffffff;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI",
        Roboto, Helvetica, Arial, sans-serif;
    background: var(--cream);
    color: var(--primary);
    line-height: 1.6;
}

a {
    text-decoration: none;
    color: inherit;
}

button,
input {
    font-family: inherit;
}

.container {
    width: min(1180px, calc(100% - 40px));
    margin: auto;
}

/* ================= HEADER ================= */

header {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: rgba(243, 239, 236, 0.94);
    backdrop-filter: blur(16px);
    border-bottom: 1px solid rgba(46, 67, 87, 0.10);
}

.navbar {
    height: 76px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.logo {
    display: flex;
    align-items: center;
    gap: 11px;
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -0.6px;
}

.logo-mark {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    background: var(--primary);
    color: var(--soft);
    display: grid;
    place-items: center;
    font-weight: 900;
    font-size: 18px;
}

.nav-links {
    display: flex;
    align-items: center;
    gap: 32px;
    font-size: 14px;
    font-weight: 600;
    color: var(--secondary);
}

.nav-links a {
    transition: 0.25s ease;
}

.nav-links a:hover {
    color: var(--primary);
}

.nav-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.login-btn {
    padding: 11px 18px;
    font-size: 14px;
    font-weight: 700;
    color: var(--primary);
}

.signup-btn {
    padding: 12px 20px;
    border-radius: 12px;
    background: var(--primary);
    color: var(--soft);
    font-size: 14px;
    font-weight: 700;
    transition: 0.25s ease;
}

.signup-btn:hover {
    background: var(--secondary);
}

.mobile-menu {
    display: none;
    border: none;
    background: var(--primary);
    color: var(--soft);
    width: 42px;
    height: 42px;
    border-radius: 11px;
    font-size: 20px;
    cursor: pointer;
}

/* ================= HERO ================= */

.hero {
    padding: 76px 0 95px;
    overflow: hidden;
}

.hero-grid {
    display: grid;
    grid-template-columns: 1.08fr 0.92fr;
    gap: 70px;
    align-items: center;
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--soft);
    color: var(--primary);
    border-radius: 50px;
    padding: 8px 13px;
    font-size: 12px;
    font-weight: 800;
    margin-bottom: 23px;
}

.badge-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--secondary);
}

.hero h1 {
    font-size: clamp(42px, 5vw, 68px);
    line-height: 1.04;
    letter-spacing: -3px;
    max-width: 680px;
    margin-bottom: 24px;
    font-weight: 850;
}

.hero h1 span {
    color: var(--secondary);
}

.hero-description {
    max-width: 590px;
    color: var(--secondary);
    font-size: 17px;
    line-height: 1.75;
    margin-bottom: 32px;
}

.hero-buttons {
    display: flex;
    gap: 13px;
    flex-wrap: wrap;
}

.primary-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 15px 23px;
    border-radius: 13px;
    background: var(--primary);
    color: var(--soft);
    font-size: 14px;
    font-weight: 750;
    border: 1px solid var(--primary);
    transition: 0.25s ease;
}

.primary-btn:hover {
    background: var(--secondary);
    border-color: var(--secondary);
}

.secondary-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 15px 23px;
    border-radius: 13px;
    background: transparent;
    color: var(--primary);
    border: 1px solid var(--secondary);
    font-size: 14px;
    font-weight: 750;
    transition: 0.25s ease;
}

.secondary-btn:hover {
    background: var(--soft);
}

.hero-trust {
    display: flex;
    gap: 25px;
    margin-top: 32px;
    flex-wrap: wrap;
}

.trust-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 700;
    color: var(--secondary);
}

.trust-icon {
    width: 25px;
    height: 25px;
    border-radius: 8px;
    background: var(--soft);
    display: grid;
    place-items: center;
    font-size: 12px;
}

/* ================= HERO CARD ================= */

.hero-visual {
    position: relative;
}

.dashboard-card {
    position: relative;
    background: var(--primary);
    border-radius: 28px;
    padding: 24px;
    box-shadow: 0 30px 70px rgba(46, 67, 87, 0.18);
    overflow: hidden;
}

.dashboard-card::before {
    content: "";
    position: absolute;
    width: 250px;
    height: 250px;
    border-radius: 50%;
    background: var(--secondary);
    opacity: 0.28;
    right: -100px;
    top: -100px;
}

.dash-top {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
}

.dash-title {
    color: var(--soft);
    font-weight: 800;
    font-size: 14px;
}

.dash-profile {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    background: var(--secondary);
    color: var(--soft);
    display: grid;
    place-items: center;
    font-size: 14px;
    font-weight: 800;
}

.payment-box {
    background: var(--soft);
    border-radius: 20px;
    padding: 20px;
    color: var(--primary);
    margin-bottom: 16px;
}

.payment-label {
    font-size: 11px;
    font-weight: 700;
    color: var(--secondary);
    margin-bottom: 6px;
}

.payment-number {
    font-size: 26px;
    font-weight: 850;
    letter-spacing: -1px;
}

.payment-status {
    margin-top: 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 11px;
    font-weight: 700;
}

.status-pill {
    background: var(--primary);
    color: var(--soft);
    padding: 6px 10px;
    border-radius: 20px;
}

.quick-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 9px;
}

.quick-item {
    background: var(--secondary);
    border-radius: 15px;
    padding: 15px 7px;
    text-align: center;
    color: var(--soft);
}

.quick-item .icon {
    width: 32px;
    height: 32px;
    margin: 0 auto 8px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: var(--primary);
    font-size: 14px;
}

.quick-item span {
    display: block;
    font-size: 10px;
    font-weight: 700;
}

.floating-voucher {
    position: absolute;
    right: -30px;
    bottom: 25px;
    background: var(--cream);
    color: var(--primary);
    border: 1px solid var(--soft);
    border-radius: 17px;
    padding: 14px 17px;
    box-shadow: 0 18px 40px rgba(46, 67, 87, 0.15);
    min-width: 175px;
}

.floating-voucher small {
    display: block;
    color: var(--secondary);
    font-size: 10px;
    font-weight: 700;
    margin-bottom: 3px;
}

.floating-voucher strong {
    font-size: 14px;
}

/* ================= SERVICES ================= */

.services {
    padding: 90px 0;
    background: var(--soft);
}

.section-heading {
    text-align: center;
    max-width: 650px;
    margin: 0 auto 48px;
}

.eyebrow {
    color: var(--secondary);
    font-size: 11px;
    font-weight: 850;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    margin-bottom: 12px;
}

.section-heading h2 {
    font-size: clamp(30px, 4vw, 44px);
    line-height: 1.1;
    letter-spacing: -1.7px;
    margin-bottom: 15px;
}

.section-heading p {
    color: var(--secondary);
    font-size: 15px;
}

.service-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
}

.service-card {
    background: var(--cream);
    border-radius: 20px;
    padding: 23px;
    border: 1px solid rgba(46, 67, 87, 0.08);
    transition: 0.3s ease;
}

.service-card:hover {
    transform: translateY(-5px);
    border-color: var(--secondary);
}

.service-icon {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: var(--primary);
    color: var(--soft);
    display: grid;
    place-items: center;
    font-size: 19px;
    margin-bottom: 18px;
}

.service-card h3 {
    font-size: 16px;
    margin-bottom: 7px;
}

.service-card p {
    color: var(--secondary);
    font-size: 12px;
    line-height: 1.6;
}

/* ================= VOUCHER ================= */

.voucher-section {
    padding: 100px 0;
}

.voucher-wrapper {
    background: var(--primary);
    color: var(--soft);
    border-radius: 30px;
    padding: 55px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    align-items: center;
    overflow: hidden;
    position: relative;
}

.voucher-wrapper::after {
    content: "";
    position: absolute;
    width: 370px;
    height: 370px;
    border: 1px solid var(--secondary);
    border-radius: 50%;
    right: -120px;
    top: -140px;
    opacity: 0.5;
}

.voucher-content {
    position: relative;
    z-index: 2;
}

.voucher-content .eyebrow {
    color: var(--soft);
}

.voucher-content h2 {
    font-size: clamp(31px, 4vw, 48px);
    line-height: 1.08;
    letter-spacing: -2px;
    margin-bottom: 17px;
}

.voucher-content p {
    color: var(--soft);
    opacity: 0.8;
    font-size: 14px;
    max-width: 500px;
}

.voucher-brands {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.brand-card {
    background: var(--secondary);
    border-radius: 17px;
    padding: 20px;
    color: var(--soft);
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 13px;
    font-weight: 750;
}

.brand-symbol {
    width: 35px;
    height: 35px;
    border-radius: 10px;
    background: var(--primary);
    display: grid;
    place-items: center;
}

/* ================= HOW IT WORKS ================= */

.how-it-works {
    padding: 85px 0 100px;
    background: var(--soft);
}

.steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    max-width: 950px;
    margin: auto;
}

.step {
    background: var(--cream);
    border-radius: 21px;
    padding: 30px;
    text-align: center;
}

.step-number {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    margin: 0 auto 19px;
    background: var(--primary);
    color: var(--soft);
    display: grid;
    place-items: center;
    font-size: 13px;
    font-weight: 850;
}

.step h3 {
    font-size: 16px;
    margin-bottom: 8px;
}

.step p {
    color: var(--secondary);
    font-size: 12px;
    line-height: 1.7;
}

/* ================= SECURITY ================= */

.security {
    padding: 95px 0;
}

.security-grid {
    display: grid;
    grid-template-columns: 0.8fr 1.2fr;
    gap: 70px;
    align-items: center;
}

.security-copy h2 {
    font-size: 43px;
    line-height: 1.1;
    letter-spacing: -1.8px;
    margin-bottom: 18px;
}

.security-copy p {
    color: var(--secondary);
    font-size: 14px;
    line-height: 1.8;
}

.security-items {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
}

.security-item {
    background: var(--soft);
    padding: 22px;
    border-radius: 18px;
}

.security-item-icon {
    width: 38px;
    height: 38px;
    background: var(--primary);
    color: var(--soft);
    border-radius: 11px;
    display: grid;
    place-items: center;
    margin-bottom: 14px;
}

.security-item h4 {
    font-size: 14px;
    margin-bottom: 5px;
}

.security-item p {
    color: var(--secondary);
    font-size: 11px;
    line-height: 1.6;
}

/* ================= CTA ================= */

.cta {
    padding: 20px 0 100px;
}

.cta-box {
    background: var(--secondary);
    border-radius: 27px;
    padding: 58px 40px;
    text-align: center;
    color: var(--soft);
}

.cta-box h2 {
    font-size: clamp(30px, 4vw, 45px);
    letter-spacing: -1.8px;
    line-height: 1.1;
    margin-bottom: 13px;
}

.cta-box p {
    color: var(--soft);
    opacity: 0.82;
    max-width: 580px;
    margin: 0 auto 25px;
    font-size: 14px;
}

.cta-box .primary-btn {
    background: var(--primary);
    border-color: var(--primary);
}

/* ================= FOOTER ================= */

footer {
    background: var(--primary);
    color: var(--soft);
    padding: 55px 0 25px;
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1fr;
    gap: 45px;
    padding-bottom: 40px;
}

.footer-brand p {
    color: var(--soft);
    opacity: 0.65;
    max-width: 300px;
    margin-top: 15px;
    font-size: 12px;
    line-height: 1.8;
}

.footer-column h4 {
    font-size: 12px;
    margin-bottom: 17px;
    color: var(--soft);
}

.footer-column a {
    display: block;
    color: var(--soft);
    opacity: 0.65;
    font-size: 12px;
    margin-bottom: 10px;
    transition: 0.2s;
}

.footer-column a:hover {
    opacity: 1;
}

.footer-bottom {
    border-top: 1px solid rgba(199, 217, 229, 0.15);
    padding-top: 22px;
    display: flex;
    justify-content: space-between;
    gap: 20px;
    color: var(--soft);
    opacity: 0.55;
    font-size: 11px;
}

/* ================= RESPONSIVE ================= */

@media (max-width: 950px) {
    .nav-links {
        display: none;
    }

    .mobile-menu {
        display: block;
    }

    .hero-grid {
        grid-template-columns: 1fr;
        gap: 55px;
    }

    .hero {
        padding-top: 55px;
    }

    .hero-visual {
        max-width: 600px;
        margin: auto;
        width: 100%;
    }

    .service-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .voucher-wrapper {
        grid-template-columns: 1fr;
    }

    .security-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .footer-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .container {
        width: min(100% - 28px, 1180px);
    }

    .navbar {
        height: 68px;
    }

    .login-btn {
        display: none;
    }

    .signup-btn {
        padding: 10px 14px;
        font-size: 12px;
    }

    .hero {
        padding: 48px 0 70px;
    }

    .hero h1 {
        font-size: 43px;
        letter-spacing: -2px;
    }

    .hero-description {
        font-size: 14px;
    }

    .hero-buttons {
        flex-direction: column;
    }

    .primary-btn,
    .secondary-btn {
        width: 100%;
    }

    .floating-voucher {
        right: 8px;
        bottom: -22px;
    }

    .services,
    .voucher-section,
    .security,
    .how-it-works {
        padding: 70px 0;
    }

    .service-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    .service-card {
        padding: 17px;
    }

    .service-icon {
        width: 42px;
        height: 42px;
    }

    .voucher-wrapper {
        padding: 32px 23px;
        border-radius: 23px;
    }

    .voucher-brands {
        grid-template-columns: 1fr 1fr;
    }

    .steps {
        grid-template-columns: 1fr;
    }

    .security-items {
        grid-template-columns: 1fr 1fr;
    }

    .security-copy h2 {
        font-size: 34px;
    }

    .footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 30px 20px;
    }

    .footer-brand {
        grid-column: 1 / -1;
    }

    .footer-bottom {
        flex-direction: column;
    }
}

/* =====================================================================
   Everything below extends the design above to the app screens
   (recharge, bills, vouchers, sign-in, order status, dashboard, pages),
   using only the design's own palette and shapes.
   ===================================================================== */

[hidden] { display: none !important; }
button { cursor: pointer; }
.muted { color: var(--secondary); }
.err { color: #a3372f; font-size: 13px; font-weight: 600; margin-top: 10px; min-height: 1em; }
.ok-text { color: var(--secondary); font-size: 12px; font-weight: 700; margin-top: 6px; }
.logo { cursor: pointer; }
.nav-links a.active { color: var(--primary); }
.avatar { width: 34px; height: 34px; border-radius: 11px; background: var(--primary); color: var(--soft); display: grid; place-items: center; font-size: 12px; font-weight: 800; }
.login-btn, .signup-btn { border: none; background: none; }
.signup-btn { background: var(--primary); }
button.primary-btn, button.secondary-btn { cursor: pointer; }
.primary-btn:disabled, .secondary-btn:disabled { opacity: .45; cursor: not-allowed; }
.primary-btn:disabled:hover { background: var(--primary); border-color: var(--primary); }
.btn-block { width: 100%; margin-top: 18px; }
.link-btn { background: none; border: none; color: var(--secondary); font-weight: 700; font-size: 13px; padding: 4px 0; }
.link-btn:hover { color: var(--primary); }
a.service-card, button.service-card { display: block; color: inherit; text-align: left; font: inherit; cursor: pointer; width: 100%; }
.service-card .count { display: block; margin-top: 10px; font-size: 11px; font-weight: 800; color: var(--primary); }
a.brand-card, button.brand-card { border: none; font: inherit; cursor: pointer; text-align: left; transition: .25s ease; }
a.brand-card:hover, button.brand-card:hover { background: #4d6a7e; }
.floating-voucher { display: block; }
.voucher-content .primary-btn { background: var(--soft); color: var(--primary); border-color: var(--soft); }
.voucher-content .primary-btn:hover { background: var(--cream); border-color: var(--cream); }
.quick-item { display: block; transition: .25s ease; }
.quick-item:hover { background: #4d6a7e; }
.payment-status .muted-pill { background: var(--secondary); color: var(--soft); padding: 6px 10px; border-radius: 20px; }

/* mobile menu */
.mobile-nav { display: none; }
.mobile-nav.open { display: block; border-top: 1px solid rgba(46,67,87,.10); padding: 10px 0 18px; }
.mobile-nav a, .mobile-nav button { display: block; width: 100%; text-align: left; padding: 12px 4px; font-size: 15px; font-weight: 700; color: var(--primary); background: none; border: none; border-bottom: 1px solid rgba(46,67,87,.06); }
@media (min-width: 951px) { .mobile-nav, .mobile-nav.open { display: none; } }

/* app pages */
.page { padding: 48px 0 90px; }
.page-narrow { width: min(760px, calc(100% - 40px)); margin: auto; }
.back-link { background: none; border: none; color: var(--secondary); font-size: 13px; font-weight: 700; margin-bottom: 18px; padding: 0; }
.back-link:hover { color: var(--primary); }
.page h1 { font-size: clamp(30px, 4vw, 42px); line-height: 1.1; letter-spacing: -1.6px; margin-bottom: 18px; font-weight: 850; }
.stepper { display: flex; align-items: center; gap: 8px; margin-bottom: 28px; flex-wrap: wrap; }
.step-pill { padding: 6px 12px; border-radius: 50px; font-size: 11px; font-weight: 800; background: var(--soft); color: var(--secondary); }
.step-pill.on { background: var(--primary); color: var(--soft); }
.step-sep { color: var(--secondary); opacity: .5; font-size: 12px; }
.panel { background: var(--white); border: 1px solid rgba(46,67,87,.10); border-radius: 22px; padding: 26px; }
.panel + .panel { margin-top: 16px; }
.field { margin-top: 18px; }
.field:first-child { margin-top: 0; }
.field > label, .label { display: block; font-size: 12px; font-weight: 800; color: var(--secondary); margin-bottom: 8px; letter-spacing: .2px; }
.input { width: 100%; min-height: 48px; padding: 12px 14px; border-radius: 13px; border: 1px solid var(--soft); background: var(--cream); color: var(--primary); font-size: 15px; font-weight: 600; outline: none; transition: .2s ease; }
.input::placeholder { color: var(--secondary); opacity: .7; font-weight: 500; }
.input:focus { border-color: var(--secondary); background: var(--white); box-shadow: 0 0 0 3px rgba(87,117,138,.15); }
select.input { appearance: auto; }
.input-row { display: flex; gap: 10px; }
.input-prefix { display: grid; place-items: center; padding: 0 14px; border-radius: 13px; background: var(--soft); font-weight: 800; font-size: 14px; }
.hint { font-size: 12px; color: var(--secondary); margin-top: 7px; min-height: 1em; font-weight: 600; }
.seg { display: inline-flex; background: var(--soft); border-radius: 14px; padding: 4px; gap: 4px; margin-bottom: 22px; }
.seg button { border: none; background: transparent; padding: 9px 18px; border-radius: 11px; font-size: 13px; font-weight: 800; color: var(--secondary); }
.seg button.on { background: var(--primary); color: var(--soft); }
.choices { display: flex; gap: 10px; flex-wrap: wrap; }
.choice { border: 1px solid var(--soft); background: var(--cream); color: var(--primary); border-radius: 13px; padding: 11px 16px; font-size: 14px; font-weight: 700; transition: .2s ease; }
.choice:hover { border-color: var(--secondary); }
.choice.on { background: var(--primary); border-color: var(--primary); color: var(--soft); }
.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip { border: 1px solid var(--soft); background: var(--white); color: var(--secondary); border-radius: 50px; padding: 7px 13px; font-size: 12px; font-weight: 800; }
.chip:hover { border-color: var(--secondary); color: var(--primary); }
.chip.on { background: var(--primary); border-color: var(--primary); color: var(--soft); }
.plan-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; margin-top: 14px; }
.plan-card { text-align: left; border: 1px solid var(--soft); background: var(--cream); border-radius: 17px; padding: 16px; color: var(--primary); font: inherit; transition: .2s ease; }
.plan-card:hover { border-color: var(--secondary); transform: translateY(-2px); }
.plan-card.on { border-color: var(--primary); box-shadow: 0 0 0 2px var(--primary) inset; }
.plan-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 6px; }
.plan-price { font-size: 22px; font-weight: 850; letter-spacing: -.8px; }
.tag { display: inline-block; background: var(--soft); color: var(--primary); border-radius: 20px; padding: 3px 9px; font-size: 10px; font-weight: 800; white-space: nowrap; }
.tag.dark { background: var(--primary); color: var(--soft); }
.plan-card p { color: var(--secondary); font-size: 12px; line-height: 1.6; }
.plan-validity { font-size: 12px; font-weight: 800; color: var(--primary); margin-bottom: 4px; }
.summary-box { background: var(--primary); color: var(--soft); border-radius: 20px; padding: 20px; margin-top: 18px; position: relative; overflow: hidden; }
.summary-box::before { content: ""; position: absolute; width: 180px; height: 180px; border-radius: 50%; background: var(--secondary); opacity: .28; right: -70px; top: -70px; }
.summary-box > * { position: relative; }
.summary-box .payment-label { color: var(--soft); opacity: .75; }
.summary-box .payment-number { color: var(--white); }
.lines { display: flex; flex-direction: column; gap: 12px; margin: 18px 0; }
.line { display: flex; justify-content: space-between; gap: 16px; font-size: 14px; border-bottom: 1px solid rgba(46,67,87,.08); padding-bottom: 10px; }
.line span:first-child { color: var(--secondary); font-weight: 600; }
.line span:last-child { font-weight: 750; text-align: right; }
.total-row { display: flex; justify-content: space-between; align-items: baseline; margin: 18px 0 6px; }
.total-row span:first-child { color: var(--secondary); font-weight: 700; font-size: 14px; }
.amount-big { font-size: 32px; font-weight: 850; letter-spacing: -1.2px; }
.actions { display: flex; gap: 10px; margin-top: 18px; flex-wrap: wrap; }
.actions .primary-btn { flex: 1; }
.brand-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(175px, 1fr)); gap: 10px; margin-top: 14px; }
.brand-tile { display: flex; align-items: center; gap: 11px; text-align: left; border: 1px solid var(--soft); background: var(--white); border-radius: 16px; padding: 11px; color: var(--primary); font: inherit; transition: .2s ease; }
.brand-tile:hover { border-color: var(--secondary); }
.brand-tile.on { border-color: var(--primary); box-shadow: 0 0 0 2px var(--primary) inset; }
.brand-tile strong { display: block; font-size: 13px; line-height: 1.3; }
.brand-tile small { display: block; font-size: 11px; color: var(--secondary); font-weight: 600; }
.brand-logo { width: 40px; height: 40px; border-radius: 11px; object-fit: contain; background: var(--white); border: 1px solid var(--soft); flex: none; }
.brand-logo.lg { width: 56px; height: 56px; border-radius: 14px; }
.brand-head { display: flex; gap: 14px; align-items: center; margin-bottom: 8px; }
.brand-head h3 { font-size: 20px; letter-spacing: -.5px; }
.qty { display: inline-flex; align-items: center; gap: 14px; }
.qty button { width: 40px; height: 40px; border-radius: 12px; border: 1px solid var(--soft); background: var(--cream); color: var(--primary); font-size: 18px; font-weight: 800; }
.qty span { min-width: 20px; text-align: center; font-weight: 850; font-size: 16px; }
details.terms { margin-top: 16px; font-size: 13px; }
details.terms summary { cursor: pointer; font-weight: 800; color: var(--secondary); }
details.terms ul { padding-left: 18px; margin-top: 8px; color: var(--secondary); }
.note { font-size: 12px; color: var(--secondary); font-weight: 600; margin-top: 6px; }

/* order status */
.status-view { text-align: center; max-width: 480px; margin: 10px auto 0; }
.status-icon { width: 72px; height: 72px; margin: 0 auto 18px; border-radius: 22px; display: grid; place-items: center; font-size: 30px; font-weight: 900; background: var(--primary); color: var(--soft); }
.status-icon.soft { background: var(--soft); color: var(--primary); }
.spinner { width: 72px; height: 72px; margin: 0 auto 18px; border-radius: 50%; border: 4px solid var(--soft); border-top-color: var(--primary); animation: spin .9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spinner { animation-duration: 3s; } .service-card:hover, .plan-card:hover { transform: none; } }
.status-view h2 { font-size: 30px; letter-spacing: -1.2px; margin-bottom: 6px; }
.status-view .panel { text-align: left; margin: 20px 0; }
.voucher-code { background: var(--cream); border: 1px dashed var(--secondary); border-radius: 14px; padding: 14px; margin-top: 10px; text-align: left; }
.voucher-code small { display: block; font-size: 11px; font-weight: 800; color: var(--secondary); }
.voucher-code code { font-family: ui-monospace, Menlo, monospace; font-size: 16px; font-weight: 700; letter-spacing: .5px; word-break: break-all; }

/* dashboard */
.dash-grid { display: grid; grid-template-columns: 1.2fr .8fr; gap: 22px; align-items: start; }
.dash-quick { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; margin-bottom: 30px; }
.order-row { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 14px 0; border-top: 1px solid rgba(46,67,87,.08); color: inherit; }
.order-row:first-child { border-top: none; }
.order-mark { width: 44px; height: 44px; border-radius: 13px; background: var(--primary); color: var(--soft); display: grid; place-items: center; font-size: 12px; font-weight: 850; }
.order-title { font-size: 14px; font-weight: 750; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.order-meta { font-size: 12px; color: var(--secondary); font-weight: 600; margin-top: 2px; }
.order-amt { font-weight: 850; font-size: 14px; }
.section-title { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; }
.section-title h2 { font-size: 22px; letter-spacing: -.8px; }
.offer-box { background: var(--secondary); color: var(--soft); border-radius: 22px; padding: 24px; }
.offer-box h3 { font-size: 20px; letter-spacing: -.6px; margin: 4px 0 8px; }
.offer-box .eyebrow { color: var(--soft); margin-bottom: 4px; }
.offer-box p { font-size: 13px; opacity: .85; }
.offer-strip { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; background: var(--white); border: 1px solid var(--soft); border-radius: 20px; padding: 18px 22px; margin-top: 28px; }
.offer-strip p { font-size: 14px; font-weight: 600; }
.offer-strip strong { font-weight: 850; }

/* dialog */
.dialog-backdrop { position: fixed; inset: 0; z-index: 2000; display: grid; place-items: center; padding: 16px; background: rgba(46,67,87,.45); backdrop-filter: blur(4px); }
.dialog { width: min(430px, 100%); background: var(--cream); border-radius: 26px; padding: 28px; box-shadow: 0 30px 70px rgba(46,67,87,.35); }
.dialog-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.dialog-close { width: 36px; height: 36px; border-radius: 11px; border: none; background: var(--soft); color: var(--primary); font-size: 18px; font-weight: 800; }
.dialog h2 { font-size: 26px; letter-spacing: -1px; line-height: 1.15; margin-bottom: 6px; }
.dialog .sub { color: var(--secondary); font-size: 14px; margin-bottom: 8px; }
.otp-input { letter-spacing: .4em; font-size: 20px; text-align: center; }
.check { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; font-weight: 600; margin-top: 16px; color: var(--secondary); }
.check input { width: 18px; height: 18px; accent-color: var(--primary); margin-top: 1px; flex: none; }
.check a { color: var(--primary); text-decoration: underline; }
.switch-row { display: flex; align-items: center; gap: 6px; font-size: 13px; margin-top: 16px; color: var(--secondary); font-weight: 600; }
.row-between { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; }

/* static pages */
.prose { max-width: 740px; }
.prose h2 { font-size: 20px; letter-spacing: -.5px; margin: 28px 0 8px; }
.prose p, .prose li { color: var(--secondary); font-size: 15px; line-height: 1.8; margin-bottom: 10px; }
.prose a { color: var(--primary); text-decoration: underline; }

@media (max-width: 950px) {
    .dash-grid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
    .page { padding: 32px 0 70px; }
    .panel { padding: 20px; border-radius: 18px; }
    .dialog { padding: 22px; }
    .actions { flex-direction: column-reverse; }
    .floating-voucher { right: 8px; }
}

/* =====================================================================
   Login page — the provided login design, verbatim, scoped under .auth-page
   so its .logo / .logo-mark / .terms / .otp-input don't clash with the site.
   ===================================================================== */
.auth-page a { color: inherit; }

/* ================= PAGE ================= */

.auth-page {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 1fr 1fr;
}

/* ================= LEFT PANEL ================= */

.auth-page .auth-left {
    background: var(--primary);
    color: var(--soft);
    padding: 50px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    overflow: hidden;
}

.auth-page .auth-left::before {
    content: "";
    position: absolute;
    width: 480px;
    height: 480px;
    border: 1px solid var(--secondary);
    border-radius: 50%;
    right: -230px;
    top: -160px;
    opacity: .45;
}

.auth-page .auth-left::after {
    content: "";
    position: absolute;
    width: 300px;
    height: 300px;
    border: 1px solid var(--secondary);
    border-radius: 50%;
    left: -180px;
    bottom: -130px;
    opacity: .35;
}

/* Logo */

.auth-page .logo {
    display: flex;
    align-items: center;
    gap: 11px;
    color: var(--soft);
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -.6px;
    position: relative;
    z-index: 2;
}

.auth-page .logo-mark {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: var(--secondary);
    display: grid;
    place-items: center;
    font-size: 17px;
    font-weight: 900;
}

/* Left Content */

.auth-page .left-content {
    position: relative;
    z-index: 2;
    max-width: 530px;
}

.auth-page .left-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 13px;
    background: var(--secondary);
    border-radius: 50px;
    font-size: 11px;
    font-weight: 750;
    margin-bottom: 25px;
}

.auth-page .left-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--soft);
}

.auth-page .left-content h1 {
    font-size: clamp(38px, 4vw, 57px);
    line-height: 1.04;
    letter-spacing: -2.5px;
    margin-bottom: 22px;
}

.auth-page .left-content h1 span {
    color: var(--secondary);
}

.auth-page .left-content p {
    color: var(--soft);
    opacity: .72;
    font-size: 14px;
    line-height: 1.8;
    max-width: 450px;
}

/* Features */

.auth-page .features {
    display: flex;
    gap: 12px;
    margin-top: 35px;
    flex-wrap: wrap;
}

.auth-page .feature {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    font-weight: 650;
    color: var(--soft);
}

.auth-page .feature-icon {
    width: 27px;
    height: 27px;
    border-radius: 9px;
    background: var(--secondary);
    display: grid;
    place-items: center;
}

/* Footer */

.auth-page .left-footer {
    position: relative;
    z-index: 2;
    font-size: 11px;
    color: var(--soft);
    opacity: .55;
}

/* ================= RIGHT PANEL ================= */

.auth-page .auth-right {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 35px;
}

.auth-page .auth-box {
    width: 100%;
    max-width: 430px;
}

/* Mobile Logo */

.auth-page .mobile-logo {
    display: none;
    justify-content: center;
    margin-bottom: 35px;
}

/* Login Header */

.auth-page .auth-header {
    margin-bottom: 30px;
}

.auth-page .auth-header .small-title {
    font-size: 11px;
    color: var(--secondary);
    font-weight: 800;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 10px;
}

.auth-page .auth-header h2 {
    font-size: 35px;
    letter-spacing: -1.5px;
    line-height: 1.1;
    margin-bottom: 10px;
}

.auth-page .auth-header p {
    font-size: 13px;
    color: var(--secondary);
    line-height: 1.6;
}

/* ================= LOGIN SCREEN ================= */

.auth-page .auth-screen {
    display: none;
}

.auth-page .auth-screen.active {
    display: block;
}

/* Input */

.auth-page .input-label {
    display: block;
    font-size: 12px;
    font-weight: 750;
    margin-bottom: 9px;
}

.auth-page .phone-input {
    display: flex;
    width: 100%;
    height: 57px;
    border: 1px solid var(--soft);
    background: var(--white);
    border-radius: 14px;
    overflow: hidden;
    transition: .2s ease;
}

.auth-page .phone-input:focus-within {
    border-color: var(--secondary);
    box-shadow: 0 0 0 4px rgba(87,117,138,.10);
}

.auth-page .country-code {
    min-width: 72px;
    padding: 0 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-right: 1px solid var(--soft);
    color: var(--primary);
    font-size: 13px;
    font-weight: 750;
}

.auth-page .phone-input input {
    width: 100%;
    border: none;
    outline: none;
    background: transparent;
    padding: 0 16px;
    color: var(--primary);
    font-size: 15px;
    font-weight: 600;
}

.auth-page .phone-input input::placeholder {
    color: var(--secondary);
    opacity: .55;
}

/* Continue Button */

.auth-page .continue-btn {
    width: 100%;
    height: 56px;
    border: none;
    border-radius: 14px;
    background: var(--primary);
    color: var(--soft);
    font-size: 14px;
    font-weight: 800;
    cursor: pointer;
    margin-top: 18px;
    transition: .25s ease;
}

.auth-page .continue-btn:hover {
    background: var(--secondary);
}

/* Terms */

.auth-page .terms {
    margin-top: 18px;
    text-align: center;
    color: var(--secondary);
    font-size: 10px;
    line-height: 1.6;
}

.auth-page .terms a {
    color: var(--primary);
    font-weight: 750;
}

/* Divider */

.auth-page .divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 27px 0;
    color: var(--secondary);
    font-size: 10px;
}

.auth-page .divider::before,
.auth-page .divider::after {
    content: "";
    height: 1px;
    flex: 1;
    background: var(--soft);
}

/* Google */

.auth-page .google-btn {
    width: 100%;
    height: 53px;
    border-radius: 14px;
    background: transparent;
    border: 1px solid var(--soft);
    color: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-size: 13px;
    font-weight: 750;
    cursor: pointer;
}

.auth-page .google-icon {
    width: 24px;
    height: 24px;
    border-radius: 7px;
    background: var(--soft);
    display: grid;
    place-items: center;
    font-size: 12px;
    font-weight: 900;
}

/* Signup */

.auth-page .signup-text {
    text-align: center;
    margin-top: 28px;
    font-size: 12px;
    color: var(--secondary);
}

.auth-page .signup-text a {
    color: var(--primary);
    font-weight: 800;
}

/* ================= OTP SCREEN ================= */

.auth-page .back-btn {
    border: none;
    background: none;
    color: var(--secondary);
    font-size: 12px;
    font-weight: 750;
    cursor: pointer;
    padding: 0;
    margin-bottom: 25px;
}

.auth-page .otp-phone {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: var(--soft);
    padding: 8px 12px;
    border-radius: 30px;
    font-size: 11px;
    font-weight: 750;
    margin-bottom: 23px;
}

.auth-page .otp-phone button {
    border: none;
    background: none;
    color: var(--secondary);
    font-weight: 800;
    cursor: pointer;
}

/* OTP Boxes */

.auth-page .otp-container {
    display: flex;
    gap: 10px;
    margin-top: 10px;
}

.auth-page .otp-input {
    width: 54px;
    height: 58px;
    border-radius: 13px;
    border: 1px solid var(--soft);
    background: var(--white);
    text-align: center;
    font-size: 20px;
    font-weight: 800;
    color: var(--primary);
    outline: none;
}

.auth-page .otp-input:focus {
    border-color: var(--secondary);
    box-shadow: 0 0 0 4px rgba(87,117,138,.10);
}

/* Timer */

.auth-page .otp-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 16px;
    font-size: 11px;
}

.auth-page .resend {
    border: none;
    background: none;
    color: var(--secondary);
    font-weight: 800;
    cursor: pointer;
}

.auth-page .resend.disabled {
    opacity: .45;
    cursor: not-allowed;
}

.auth-page .timer {
    color: var(--secondary);
}

/* Error */

.auth-page .error-message {
    display: none;
    margin-top: 9px;
    font-size: 11px;
    color: var(--secondary);
    font-weight: 700;
}

.auth-page .error-message.show {
    display: block;
}

/* Success */

.auth-page .success-message {
    display: none;
    background: var(--soft);
    border-radius: 13px;
    padding: 12px;
    margin-top: 14px;
    text-align: center;
    font-size: 11px;
    font-weight: 750;
}

.auth-page .success-message.show {
    display: block;
}

/* ================= MOBILE ================= */

@media (max-width: 850px) {

    .auth-page {
        grid-template-columns: 1fr;
    }

    .auth-page .auth-left {
        display: none;
    }

    .auth-page .auth-right {
        min-height: 100vh;
        padding: 25px 20px;
        align-items: center;
    }

    .auth-page .mobile-logo {
        display: flex;
    }

    .auth-page .auth-box {
        max-width: 430px;
    }
}

@media (max-width: 480px) {

    .auth-page .auth-right {
        padding: 25px 17px;
    }

    .auth-page .auth-header h2 {
        font-size: 31px;
    }

    .auth-page .otp-container {
        gap: 7px;
    }

    .auth-page .otp-input {
        width: calc(25% - 6px);
        height: 54px;
    }
}


/* =====================================================================
   Dashboard — the provided dashboard design, verbatim, scoped under .dash-page.
   ===================================================================== */
/* Undo home-page rules that share class names with the dashboard design. */
.dash-page .services { padding: 0; background: none; }
.dash-page .service-icon { font-size: inherit; }
.dash-page header { border-bottom: 1px solid rgba(46,67,87,.09); }
.dash-page a, .dash-page button { font: inherit; }

.dash-page .container {
    width:min(1180px,calc(100% - 36px));
    margin:auto;
}

/* =====================================================
   ICON SYSTEM
===================================================== */

.dash-page .icon {
    width:20px;
    height:20px;
    stroke:currentColor;
    stroke-width:1.8;
    fill:none;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.dash-page .icon-sm {
    width:17px;
    height:17px;
}

.dash-page .icon-lg {
    width:23px;
    height:23px;
}

/* =====================================================
   HEADER
===================================================== */

.dash-page .header {
    height:76px;
    background:rgba(243,239,236,.94);
    backdrop-filter:blur(16px);
    border-bottom:1px solid rgba(46,67,87,.09);
    position:sticky;
    top:0;
    z-index:100;
}

.dash-page .nav {
    height:100%;
    display:flex;
    align-items:center;
    justify-content:space-between;
}

/* LOGO */

.dash-page .logo {
    display:flex;
    align-items:center;
    gap:11px;
    font-size:21px;
    font-weight:850;
    letter-spacing:-.5px;
}

.dash-page .logo-icon {
    width:39px;
    height:39px;
    border-radius:12px;
    background:var(--primary);
    color:var(--soft);
    display:grid;
    place-items:center;
}

.dash-page .logo-icon svg {
    width:20px;
    height:20px;
}

/* HEADER RIGHT */

.dash-page .nav-right {
    display:flex;
    align-items:center;
    gap:12px;
}

.dash-page .notification {
    width:42px;
    height:42px;
    border-radius:13px;
    border:1px solid var(--soft);
    background:var(--white);
    color:var(--primary);
    display:grid;
    place-items:center;
    cursor:pointer;
    position:relative;
}

.dash-page .notification-dot {
    position:absolute;
    width:7px;
    height:7px;
    background:var(--secondary);
    border:2px solid var(--white);
    border-radius:50%;
    top:8px;
    right:9px;
}

.dash-page .profile {
    display:flex;
    align-items:center;
    gap:10px;
    cursor:pointer;
}

.dash-page .avatar {
    width:40px;
    height:40px;
    border-radius:13px;
    background:var(--secondary);
    color:var(--soft);
    display:grid;
    place-items:center;
    font-size:12px;
    font-weight:850;
}

.dash-page .profile-info {
    line-height:1.25;
}

.dash-page .profile-name {
    font-size:12px;
    font-weight:800;
}

.dash-page .profile-mobile {
    color:var(--secondary);
    font-size:10px;
    margin-top:3px;
}

/* =====================================================
   MAIN
===================================================== */

.dash-page .main {
    padding:34px 0 70px;
}

/* =====================================================
   WELCOME
===================================================== */

.dash-page .welcome {
    display:flex;
    justify-content:space-between;
    align-items:flex-end;
    margin-bottom:25px;
}

.dash-page .welcome-label {
    color:var(--secondary);
    font-size:10px;
    font-weight:850;
    letter-spacing:1.6px;
    text-transform:uppercase;
    margin-bottom:7px;
}

.dash-page .welcome h1 {
    font-size:30px;
    line-height:1.1;
    letter-spacing:-1.3px;
}

.dash-page .welcome p {
    color:var(--secondary);
    font-size:12px;
    margin-top:6px;
}

/* =====================================================
   QUICK ACTIONS
===================================================== */

.dash-page .quick-actions {
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:13px;
    margin-bottom:25px;
}

.dash-page .quick-card {
    min-height:148px;
    padding:21px;
    background:var(--primary);
    color:var(--soft);
    border-radius:20px;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    cursor:pointer;
    transition:.25s ease;
    position:relative;
    overflow:hidden;
}

.dash-page .quick-card::after {
    content:"";
    position:absolute;
    width:130px;
    height:130px;
    border:1px solid var(--secondary);
    border-radius:50%;
    right:-65px;
    top:-65px;
    opacity:.35;
}

.dash-page .quick-card:hover {
    transform:translateY(-4px);
    background:var(--secondary);
}

.dash-page .quick-icon {
    width:45px;
    height:45px;
    border-radius:14px;
    background:var(--secondary);
    display:grid;
    place-items:center;
    position:relative;
    z-index:1;
}

.dash-page .quick-card:hover .quick-icon {
    background:var(--primary);
}

.dash-page .quick-card-content {
    position:relative;
    z-index:1;
}

.dash-page .quick-card h3 {
    font-size:14px;
    margin-bottom:4px;
}

.dash-page .quick-card p {
    color:var(--soft);
    opacity:.62;
    font-size:10px;
}

/* =====================================================
   OFFER
===================================================== */

.dash-page .offer {
    background:var(--secondary);
    border-radius:23px;
    padding:28px 30px;
    color:var(--soft);
    display:flex;
    align-items:center;
    justify-content:space-between;
    position:relative;
    overflow:hidden;
    margin-bottom:31px;
}

.dash-page .offer::before {
    content:"";
    position:absolute;
    width:260px;
    height:260px;
    border:1px solid var(--soft);
    border-radius:50%;
    right:-105px;
    top:-110px;
    opacity:.16;
}

.dash-page .offer-content {
    position:relative;
    z-index:2;
}

.dash-page .offer-label {
    font-size:9px;
    font-weight:850;
    letter-spacing:1.6px;
    text-transform:uppercase;
    margin-bottom:7px;
}

.dash-page .offer h2 {
    font-size:23px;
    line-height:1.15;
    letter-spacing:-.8px;
}

.dash-page .offer p {
    margin-top:6px;
    opacity:.68;
    font-size:11px;
}

.dash-page .offer-btn {
    position:relative;
    z-index:2;
    display:flex;
    align-items:center;
    gap:8px;
    border:0;
    background:var(--primary);
    color:var(--soft);
    padding:12px 17px;
    border-radius:12px;
    font-size:11px;
    font-weight:800;
    cursor:pointer;
}

.dash-page .offer-btn svg {
    width:15px;
}

/* =====================================================
   SECTION HEADER
===================================================== */

.dash-page .section-head {
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:15px;
}

.dash-page .section-head h2 {
    font-size:18px;
    letter-spacing:-.5px;
}

.dash-page .view-all {
    display:flex;
    align-items:center;
    gap:5px;
    color:var(--secondary);
    font-size:11px;
    font-weight:800;
}

.dash-page .view-all svg {
    width:14px;
}

/* =====================================================
   SERVICES
===================================================== */

.dash-page .services {
    display:grid;
    grid-template-columns:repeat(6,1fr);
    gap:11px;
    margin-bottom:32px;
}

.dash-page .service {
    background:var(--white);
    border:1px solid rgba(46,67,87,.07);
    border-radius:18px;
    padding:18px 9px;
    text-align:center;
    cursor:pointer;
    transition:.25s ease;
}

.dash-page .service:hover {
    transform:translateY(-4px);
    border-color:var(--secondary);
}

.dash-page .service-icon {
    width:43px;
    height:43px;
    border-radius:13px;
    background:var(--soft);
    color:var(--primary);
    display:grid;
    place-items:center;
    margin:0 auto 11px;
}

.dash-page .service h4 {
    font-size:11px;
    font-weight:800;
}

.dash-page .service p {
    color:var(--secondary);
    font-size:9px;
    margin-top:3px;
}

/* =====================================================
   LOWER GRID
===================================================== */

.dash-page .content-grid {
    display:grid;
    grid-template-columns:1.35fr .65fr;
    gap:18px;
}

/* =====================================================
   PANEL
===================================================== */

.dash-page .panel {
    background:var(--white);
    border-radius:21px;
    padding:22px;
    border:1px solid rgba(46,67,87,.06);
}

/* =====================================================
   TRANSACTIONS
===================================================== */

.dash-page .transaction {
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:15px 0;
    border-bottom:1px solid var(--soft);
}

.dash-page .transaction:last-child {
    border-bottom:0;
    padding-bottom:2px;
}

.dash-page .transaction-left {
    display:flex;
    align-items:center;
    gap:12px;
}

.dash-page .transaction-icon {
    width:40px;
    height:40px;
    border-radius:12px;
    background:var(--soft);
    color:var(--primary);
    display:grid;
    place-items:center;
}

.dash-page .transaction-name {
    font-size:12px;
    font-weight:800;
}

.dash-page .transaction-date {
    color:var(--secondary);
    font-size:9px;
    margin-top:3px;
}

.dash-page .transaction-right {
    text-align:right;
}

.dash-page .amount {
    font-size:12px;
    font-weight:850;
}

.dash-page .status {
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:4px;
    color:var(--secondary);
    font-size:9px;
    font-weight:750;
    margin-top:3px;
}

.dash-page .status svg {
    width:11px;
    height:11px;
}

/* =====================================================
   VOUCHERS
===================================================== */

.dash-page .voucher-list {
    display:flex;
    flex-direction:column;
    gap:9px;
}

.dash-page .voucher {
    background:var(--soft);
    border-radius:15px;
    padding:13px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    cursor:pointer;
    transition:.2s ease;
}

.dash-page .voucher:hover {
    background:var(--secondary);
    color:var(--soft);
}

.dash-page .voucher-brand {
    display:flex;
    align-items:center;
    gap:10px;
}

.dash-page .brand-icon {
    width:36px;
    height:36px;
    border-radius:10px;
    background:var(--primary);
    color:var(--soft);
    display:grid;
    place-items:center;
}

.dash-page .voucher-name {
    font-size:11px;
    font-weight:800;
}

.dash-page .voucher-type {
    color:var(--secondary);
    font-size:9px;
    margin-top:2px;
}

.dash-page .voucher:hover .voucher-type {
    color:var(--soft);
    opacity:.7;
}

.dash-page .voucher-arrow {
    color:var(--primary);
}

.dash-page .voucher:hover .voucher-arrow {
    color:var(--soft);
}

/* =====================================================
   FOOTER
===================================================== */

.dash-page .footer {
    margin-top:48px;
    padding-top:22px;
    border-top:1px solid var(--soft);
    display:flex;
    align-items:center;
    justify-content:space-between;
    color:var(--secondary);
    font-size:10px;
}

/* =====================================================
   MOBILE
===================================================== */

@media(max-width:950px){

    .dash-page .quick-actions {
        grid-template-columns:repeat(2,1fr);
    }

    .dash-page .services {
        grid-template-columns:repeat(3,1fr);
    }

    .dash-page .content-grid {
        grid-template-columns:1fr;
    }
}

@media(max-width:600px){

    .dash-page .container {
        width:calc(100% - 26px);
    }

    .dash-page .header {
        height:68px;
    }

    .dash-page .profile-info {
        display:none;
    }

    .dash-page .main {
        padding-top:25px;
    }

    .dash-page .welcome h1 {
        font-size:26px;
    }

    .dash-page .quick-actions {
        gap:9px;
    }

    .dash-page .quick-card {
        min-height:130px;
        padding:17px;
    }

    .dash-page .quick-icon {
        width:40px;
        height:40px;
    }

    .dash-page .offer {
        display:block;
        padding:23px;
    }

    .dash-page .offer h2 {
        font-size:20px;
    }

    .dash-page .offer-btn {
        margin-top:17px;
    }

    .dash-page .services {
        grid-template-columns:repeat(3,1fr);
        gap:8px;
    }

    .dash-page .service {
        padding:14px 5px;
    }

    .dash-page .service-icon {
        width:38px;
        height:38px;
    }

    .dash-page .service h4 {
        font-size:9px;
    }

    .dash-page .service p {
        display:none;
    }

    .dash-page .panel {
        padding:18px;
    }

    .dash-page .footer {
        display:block;
        line-height:2;
    }
}


/* Icon colour fix: the design only gave .icon its stroke settings, so .icon-sm / .icon-lg
   (quick actions, voucher list) rendered as solid black shapes. Same stroke style for all. */
.dash-page .icon-sm,
.dash-page .icon-lg {
    stroke: currentColor;
    stroke-width: 1.8;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Additions the design needs to work: profile menu, profile form, empty states. */
.dash-page button.notification, .dash-page button.profile, .dash-page button.offer-btn { font: inherit; }
.dash-page button.profile { border: 0; background: none; color: inherit; text-align: left; padding: 0; }
.dash-page .profile-wrap { position: relative; }
.dash-page .profile-menu { position: absolute; right: 0; top: 52px; min-width: 190px; background: var(--white); border: 1px solid var(--soft); border-radius: 15px; padding: 7px; box-shadow: 0 18px 40px rgba(46,67,87,.15); z-index: 200; }
.dash-page .profile-menu a, .dash-page .profile-menu button { display: block; width: 100%; text-align: left; padding: 10px 12px; border-radius: 10px; border: 0; background: none; color: var(--primary); font-size: 12px; font-weight: 750; cursor: pointer; }
.dash-page .profile-menu a:hover, .dash-page .profile-menu button:hover { background: var(--soft); }
.dash-page .empty { color: var(--secondary); font-size: 12px; padding: 12px 0; }
.dash-page .empty a { color: var(--primary); font-weight: 800; }
.dash-page .footer a:hover { color: var(--primary); }
.dash-page .pager { display: flex; gap: 10px; margin-top: 16px; }
.dash-page .pager a { background: var(--soft); border-radius: 11px; padding: 9px 14px; font-size: 11px; font-weight: 800; }
.dash-page .profile-form { max-width: 520px; }
.dash-page .profile-form .field { margin-top: 16px; }
.dash-page .profile-form label { display: block; font-size: 12px; font-weight: 800; color: var(--secondary); margin-bottom: 8px; }
.dash-page .profile-form .save-btn { margin-top: 18px; border: 0; background: var(--primary); color: var(--soft); border-radius: 12px; padding: 12px 18px; font-size: 12px; font-weight: 800; cursor: pointer; }

/* =====================================================================
   Recharge page — the provided recharge design, verbatim, scoped under .rc-page
   (it shares the dashboard's header/footer, so the page also carries .dash-page).
   ===================================================================== */
/* Undo site rules that share class names with this design. */
.rc-page .security { padding: 0; }
.rc-page .field { margin-top: 0; }
.rc-page .input { min-height: 0; box-shadow: none; }
.rc-page .input:focus { box-shadow: none; }
.rc-page .plan-validity { margin-bottom: 0; color: inherit; }
.rc-page button { font-family: inherit; cursor: pointer; }

/* ================= BREADCRUMB ================= */

.rc-page .breadcrumb {
    display:flex;
    align-items:center;
    gap:8px;
    color:var(--secondary);
    font-size:11px;
    margin-bottom:22px;
}

.rc-page .breadcrumb svg {
    width:14px;
}

/* ================= PAGE TITLE ================= */

.rc-page .page-title {
    margin-bottom:26px;
}

.rc-page .page-title h1 {
    font-size:30px;
    letter-spacing:-1.2px;
}

.rc-page .page-title p {
    color:var(--secondary);
    font-size:12px;
    margin-top:6px;
}

/* ================= LAYOUT ================= */

.rc-page .recharge-layout {
    display:grid;
    grid-template-columns:minmax(0,1.55fr) minmax(320px,.65fr);
    gap:20px;
    align-items:start;
}

/* ================= CARD ================= */

.rc-page .card {
    background:var(--white);
    border:1px solid rgba(46,67,87,.07);
    border-radius:22px;
    padding:25px;
}

.rc-page .card-title {
    display:flex;
    align-items:center;
    gap:12px;
    margin-bottom:23px;
}

.rc-page .card-title-icon {
    width:43px;
    height:43px;
    border-radius:13px;
    background:var(--soft);
    color:var(--primary);
    display:grid;
    place-items:center;
}

.rc-page .card-title h2 {
    font-size:16px;
}

.rc-page .card-title p {
    color:var(--secondary);
    font-size:10px;
    margin-top:3px;
}

/* ================= FORM ================= */

.rc-page .field {
    margin-bottom:20px;
}

.rc-page .field-label {
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:8px;
}

.rc-page .field-label label {
    font-size:11px;
    font-weight:800;
}

.rc-page .detected {
    display:none;
    align-items:center;
    gap:4px;
    color:var(--secondary);
    font-size:9px;
    font-weight:700;
}

.rc-page .input-wrap {
    position:relative;
}

.rc-page .input-icon {
    position:absolute;
    left:14px;
    top:50%;
    transform:translateY(-50%);
    color:var(--secondary);
    display:flex;
}

.rc-page .input {
    width:100%;
    height:51px;
    border:1px solid var(--soft);
    border-radius:13px;
    outline:none;
    padding:0 45px;
    background:var(--cream);
    color:var(--primary);
    font-size:13px;
    font-weight:600;
    transition:.2s;
}

.rc-page .input:focus {
    border-color:var(--secondary);
    background:var(--white);
}

.rc-page .clear-btn {
    position:absolute;
    right:12px;
    top:50%;
    transform:translateY(-50%);
    width:27px;
    height:27px;
    border:0;
    border-radius:50%;
    background:var(--soft);
    color:var(--primary);
    display:none;
    place-items:center;
}

.rc-page .clear-btn svg {
    width:13px;
}

/* ================= OPERATORS ================= */

.rc-page .operator-grid {
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:9px;
}

.rc-page .operator {
    border:1px solid var(--soft);
    background:var(--white);
    border-radius:13px;
    padding:12px 8px;
    text-align:center;
    transition:.2s;
}

.rc-page .operator:hover,
.rc-page .operator.active {
    border-color:var(--secondary);
    background:var(--soft);
}

.rc-page .operator-logo {
    width:38px;
    height:38px;
    margin:0 auto 8px;
    border-radius:11px;
    background:var(--primary);
    color:var(--soft);
    display:grid;
    place-items:center;
    font-size:12px;
    font-weight:850;
}

.rc-page .operator span {
    display:block;
    font-size:9px;
    font-weight:750;
}

/* ================= CIRCLE ================= */

.rc-page .select-wrap {
    position:relative;
}

.rc-page .select {
    appearance:none;
    width:100%;
    height:51px;
    border:1px solid var(--soft);
    border-radius:13px;
    padding:0 42px 0 14px;
    background:var(--cream);
    color:var(--primary);
    font-size:12px;
    outline:none;
}

.rc-page .select-arrow {
    position:absolute;
    right:15px;
    top:50%;
    transform:translateY(-50%);
    pointer-events:none;
}

/* ================= AMOUNT ================= */

.rc-page .amount-wrap {
    position:relative;
}

.rc-page .amount-prefix {
    position:absolute;
    left:15px;
    top:50%;
    transform:translateY(-50%);
    font-size:14px;
    font-weight:850;
    color:var(--secondary);
}

.rc-page .amount-input {
    width:100%;
    height:55px;
    border:1px solid var(--soft);
    border-radius:13px;
    padding:0 15px 0 35px;
    background:var(--cream);
    outline:none;
    color:var(--primary);
    font-size:17px;
    font-weight:850;
}

.rc-page .amount-input:focus {
    border-color:var(--secondary);
    background:var(--white);
}

/* ================= PLANS ================= */

.rc-page .plans-header {
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin:27px 0 12px;
}

.rc-page .plans-header h3 {
    font-size:13px;
}

.rc-page .plan-tabs {
    display:flex;
    gap:6px;
    overflow:auto;
    padding-bottom:3px;
}

.rc-page .plan-tab {
    flex:0 0 auto;
    border:1px solid var(--soft);
    background:var(--white);
    color:var(--secondary);
    padding:7px 11px;
    border-radius:9px;
    font-size:9px;
    font-weight:800;
}

.rc-page .plan-tab.active {
    background:var(--primary);
    color:var(--soft);
    border-color:var(--primary);
}

.rc-page .plans {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:10px;
}

.rc-page .plan {
    border:1px solid var(--soft);
    border-radius:15px;
    padding:14px;
    background:var(--white);
    cursor:pointer;
    transition:.2s;
}

.rc-page .plan:hover,
.rc-page .plan.active {
    border-color:var(--secondary);
    background:var(--soft);
}

.rc-page .plan-top {
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:8px;
}

.rc-page .plan-price {
    font-size:17px;
    font-weight:850;
}

.rc-page .plan-tag {
    font-size:8px;
    font-weight:800;
    color:var(--secondary);
}

.rc-page .plan-validity {
    font-size:10px;
    font-weight:750;
}

.rc-page .plan-desc {
    color:var(--secondary);
    font-size:9px;
    line-height:1.5;
    margin-top:5px;
}

/* ================= SUMMARY ================= */

.rc-page .summary-card {
    background:var(--primary);
    color:var(--soft);
    border-radius:22px;
    padding:24px;
    position:sticky;
    top:100px;
}

.rc-page .summary-title {
    display:flex;
    align-items:center;
    gap:10px;
    padding-bottom:20px;
    border-bottom:1px solid rgba(199,217,229,.2);
}

.rc-page .summary-title-icon {
    width:40px;
    height:40px;
    border-radius:12px;
    background:var(--secondary);
    display:grid;
    place-items:center;
}

.rc-page .summary-title h2 {
    font-size:15px;
}

.rc-page .summary-title p {
    font-size:9px;
    opacity:.6;
    margin-top:3px;
}

.rc-page .summary-info {
    padding:19px 0;
    border-bottom:1px solid rgba(199,217,229,.2);
}

.rc-page .summary-row {
    display:flex;
    justify-content:space-between;
    gap:15px;
    margin-bottom:13px;
}

.rc-page .summary-row:last-child {
    margin-bottom:0;
}

.rc-page .summary-label {
    font-size:10px;
    opacity:.6;
}

.rc-page .summary-value {
    font-size:10px;
    font-weight:750;
    text-align:right;
}

.rc-page .summary-total {
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:20px 0;
}

.rc-page .summary-total span:first-child {
    font-size:11px;
    opacity:.7;
}

.rc-page .total-price {
    font-size:23px;
    font-weight:850;
}

.rc-page .continue-btn {
    width:100%;
    height:51px;
    border:0;
    border-radius:13px;
    background:var(--soft);
    color:var(--primary);
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    font-size:12px;
    font-weight:850;
}

.rc-page .continue-btn svg {
    width:16px;
}

.rc-page .security {
    display:flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    margin-top:15px;
    font-size:9px;
    opacity:.55;
}

/* ================= PAYMENT NOTE ================= */

.rc-page .payment-note {
    margin-top:14px;
    padding:12px 13px;
    border-radius:12px;
    background:rgba(199,217,229,.12);
    display:flex;
    gap:9px;
    align-items:flex-start;
}

.rc-page .payment-note svg {
    flex:0 0 auto;
    width:15px;
}

.rc-page .payment-note p {
    font-size:9px;
    line-height:1.5;
    opacity:.65;
}

/* ================= RECENT ================= */

.rc-page .recent {
    margin-top:20px;
}

.rc-page .recent-title {
    font-size:12px;
    font-weight:800;
    margin-bottom:11px;
}

.rc-page .recent-number {
    background:var(--soft);
    border-radius:12px;
    padding:11px;
    display:flex;
    align-items:center;
    justify-content:space-between;
}

.rc-page .recent-left {
    display:flex;
    align-items:center;
    gap:9px;
}

.rc-page .recent-icon {
    width:31px;
    height:31px;
    border-radius:9px;
    background:var(--primary);
    color:var(--soft);
    display:grid;
    place-items:center;
}

.rc-page .recent-number strong {
    font-size:10px;
}

.rc-page .recent-number span {
    display:block;
    color:var(--secondary);
    font-size:8px;
    margin-top:2px;
}

.rc-page .use-btn {
    border:0;
    background:var(--primary);
    color:var(--soft);
    border-radius:8px;
    padding:7px 9px;
    font-size:8px;
    font-weight:800;
}

/* ================= MOBILE ================= */

@media(max-width:950px){

    .rc-page .recharge-layout {
        grid-template-columns:1fr;
    }

    .rc-page .summary-card {
        position:static;
    }

    .rc-page .plans {
        grid-template-columns:repeat(2,1fr);
    }
}

@media(max-width:600px){

    .rc-page .page-title h1 {
        font-size:26px;
    }

    .rc-page .card {
        padding:18px;
        border-radius:19px;
    }

    .rc-page .operator-grid {
        grid-template-columns:repeat(2,1fr);
    }

    .rc-page .plans {
        grid-template-columns:1fr;
    }

    .rc-page .footer span {
        display:block;
    }
}


/* Classes replacing the design's inline style="" (the CSP blocks inline styles). */
.rc-page .detected svg { width: 12px; }
.rc-page .security svg { width: 13px; }
/* States the design's script toggled via inline styles. */
.rc-page .detected.show { display: flex; }
.rc-page .clear-btn.show { display: grid; }
.rc-page .operator { color: var(--primary); font: inherit; }
.rc-page .summary-card .err { color: #f3c9c4; margin-top: 12px; }
.rc-page .continue-btn:disabled { opacity: .5; cursor: not-allowed; }
.rc-page .more-plans { margin-top: 12px; border: 1px solid var(--soft); background: var(--white); color: var(--primary); border-radius: 10px; padding: 9px 12px; font-size: 10px; font-weight: 800; }
.rc-page .plans-empty { color: var(--secondary); font-size: 11px; }
.rc-page .breadcrumb a:hover { color: var(--primary); }

/* =====================================================================
   Review & Payment — the provided review design, verbatim, scoped under .rv-page.
   ===================================================================== */
/* Undo site rules that share class names with this design. */
.rv-page .security { padding: 0; }
.rv-page .plan-price { letter-spacing: normal; }
.rv-page header { backdrop-filter: none; }
.rv-page button { font-family: inherit; cursor: pointer; }

.rv-page .container {
    width:min(1080px,calc(100% - 30px));
    margin:auto;
}

.rv-page .icon {
    width:20px;
    height:20px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.8;
    stroke-linecap:round;
    stroke-linejoin:round;
}

/* HEADER */

.rv-page .header {
    height:74px;
    background:rgba(243,239,236,.96);
    border-bottom:1px solid rgba(46,67,87,.08);
    position:sticky;
    top:0;
    z-index:10;
}

.rv-page .nav {
    height:100%;
    display:flex;
    align-items:center;
    justify-content:space-between;
}

.rv-page .logo {
    display:flex;
    align-items:center;
    gap:10px;
    font-size:20px;
    font-weight:850;
    text-decoration:none;
    color:var(--primary);
}

.rv-page .logo-box {
    width:39px;
    height:39px;
    border-radius:12px;
    background:var(--primary);
    color:var(--soft);
    display:grid;
    place-items:center;
}

.rv-page .secure-top {
    display:flex;
    align-items:center;
    gap:6px;
    color:var(--secondary);
    font-size:10px;
    font-weight:700;
}

/* MAIN */

.rv-page .main {
    padding:35px 0 70px;
}

.rv-page .breadcrumb {
    display:flex;
    align-items:center;
    gap:7px;
    color:var(--secondary);
    font-size:10px;
    margin-bottom:20px;
}

.rv-page .breadcrumb strong {
    color:var(--primary);
}

.rv-page .page-heading {
    margin-bottom:27px;
}

.rv-page .page-heading h1 {
    font-size:29px;
    letter-spacing:-1.2px;
}

.rv-page .page-heading p {
    color:var(--secondary);
    font-size:11px;
    margin-top:6px;
}

/* PROGRESS */

.rv-page .progress {
    display:flex;
    align-items:center;
    margin-bottom:27px;
}

.rv-page .progress-step {
    display:flex;
    align-items:center;
    gap:8px;
    font-size:9px;
    font-weight:800;
    color:var(--secondary);
}

.rv-page .progress-number {
    width:27px;
    height:27px;
    border-radius:50%;
    display:grid;
    place-items:center;
    background:var(--soft);
    color:var(--primary);
}

.rv-page .progress-step.active {
    color:var(--primary);
}

.rv-page .progress-step.active .progress-number {
    background:var(--primary);
    color:var(--soft);
}

.rv-page .progress-line {
    width:65px;
    height:1px;
    background:var(--soft);
    margin:0 9px;
}

.rv-page .progress-line.done {
    background:var(--secondary);
}

/* LAYOUT */

.rv-page .payment-layout {
    display:grid;
    grid-template-columns:1.2fr .8fr;
    gap:20px;
    align-items:start;
}

/* CARD */

.rv-page .card {
    background:var(--white);
    border:1px solid rgba(46,67,87,.07);
    border-radius:22px;
    padding:24px;
}

.rv-page .card-header {
    display:flex;
    align-items:center;
    gap:12px;
    padding-bottom:20px;
    border-bottom:1px solid var(--soft);
}

.rv-page .header-icon {
    width:43px;
    height:43px;
    border-radius:13px;
    background:var(--soft);
    display:grid;
    place-items:center;
}

.rv-page .card-header h2 {
    font-size:16px;
}

.rv-page .card-header p {
    color:var(--secondary);
    font-size:9px;
    margin-top:3px;
}

/* RECHARGE INFO */

.rv-page .recharge-box {
    background:var(--cream);
    border-radius:16px;
    padding:16px;
    margin:18px 0;
}

.rv-page .recharge-top {
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding-bottom:14px;
    border-bottom:1px solid var(--soft);
}

.rv-page .operator {
    display:flex;
    align-items:center;
    gap:10px;
}

.rv-page .operator-logo {
    width:39px;
    height:39px;
    border-radius:11px;
    background:var(--primary);
    color:var(--soft);
    display:grid;
    place-items:center;
    font-size:11px;
    font-weight:850;
}

.rv-page .operator-name {
    font-size:12px;
    font-weight:850;
}

.rv-page .operator-number {
    color:var(--secondary);
    font-size:9px;
    margin-top:3px;
}

.rv-page .change-btn {
    border:1px solid var(--soft);
    background:var(--white);
    color:var(--primary);
    padding:7px 10px;
    border-radius:8px;
    font-size:8px;
    font-weight:800;
}

.rv-page .info-grid {
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:15px;
    padding-top:15px;
}

.rv-page .info-label {
    color:var(--secondary);
    font-size:8px;
    margin-bottom:4px;
}

.rv-page .info-value {
    font-size:10px;
    font-weight:800;
}

/* PLAN */

.rv-page .plan-selected {
    border:1px solid var(--soft);
    border-radius:15px;
    padding:15px;
    display:flex;
    align-items:center;
    justify-content:space-between;
}

.rv-page .plan-left {
    display:flex;
    align-items:center;
    gap:11px;
}

.rv-page .plan-icon {
    width:38px;
    height:38px;
    border-radius:11px;
    background:var(--soft);
    display:grid;
    place-items:center;
}

.rv-page .plan-name {
    font-size:11px;
    font-weight:800;
}

.rv-page .plan-description {
    color:var(--secondary);
    font-size:9px;
    margin-top:3px;
}

.rv-page .plan-price {
    font-size:16px;
    font-weight:850;
}

/* PAYMENT METHODS */

.rv-page .payment-title {
    font-size:13px;
    font-weight:850;
    margin:25px 0 11px;
}

.rv-page .payment-method {
    border:1px solid var(--soft);
    border-radius:14px;
    padding:14px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:9px;
    transition:.2s;
}

.rv-page .payment-method.active {
    border-color:var(--secondary);
    background:var(--soft);
}

.rv-page .method-left {
    display:flex;
    align-items:center;
    gap:11px;
}

.rv-page .method-icon {
    width:39px;
    height:39px;
    border-radius:11px;
    background:var(--primary);
    color:var(--soft);
    display:grid;
    place-items:center;
}

.rv-page .method-name {
    font-size:11px;
    font-weight:850;
}

.rv-page .method-desc {
    color:var(--secondary);
    font-size:8px;
    margin-top:3px;
}

.rv-page .method-radio {
    width:18px;
    height:18px;
    border:1.5px solid var(--secondary);
    border-radius:50%;
    position:relative;
}

.rv-page .payment-method.active .method-radio:after {
    content:"";
    position:absolute;
    width:8px;
    height:8px;
    border-radius:50%;
    background:var(--primary);
    top:3.5px;
    left:3.5px;
}

/* RIGHT SUMMARY */

.rv-page .summary {
    background:var(--primary);
    color:var(--soft);
    border-radius:22px;
    padding:24px;
    position:sticky;
    top:98px;
}

.rv-page .summary-head {
    display:flex;
    align-items:center;
    gap:10px;
    padding-bottom:19px;
    border-bottom:1px solid rgba(199,217,229,.2);
}

.rv-page .summary-head-icon {
    width:40px;
    height:40px;
    border-radius:12px;
    background:var(--secondary);
    display:grid;
    place-items:center;
}

.rv-page .summary-head h2 {
    font-size:15px;
}

.rv-page .summary-head p {
    font-size:9px;
    opacity:.55;
    margin-top:3px;
}

.rv-page .breakup {
    padding:19px 0;
    border-bottom:1px solid rgba(199,217,229,.2);
}

.rv-page .row {
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:13px;
}

.rv-page .row:last-child {
    margin-bottom:0;
}

.rv-page .row span:first-child {
    font-size:10px;
    opacity:.62;
}

.rv-page .row span:last-child {
    font-size:10px;
    font-weight:750;
}

.rv-page .row.discount span:last-child {
    color:var(--soft);
}

.rv-page .total {
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:20px 0;
}

.rv-page .total-label {
    font-size:11px;
    opacity:.65;
}

.rv-page .total-amount {
    font-size:24px;
    font-weight:850;
}

.rv-page .pay-btn {
    width:100%;
    height:53px;
    border:0;
    border-radius:13px;
    background:var(--soft);
    color:var(--primary);
    font-size:12px;
    font-weight:850;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
}

.rv-page .pay-btn svg {
    width:17px;
}

.rv-page .security {
    display:flex;
    justify-content:center;
    align-items:center;
    gap:6px;
    font-size:8px;
    opacity:.55;
    margin-top:14px;
}

/* OFFER */

.rv-page .offer {
    margin-top:15px;
    padding:13px;
    border-radius:13px;
    background:rgba(199,217,229,.11);
    display:flex;
    align-items:flex-start;
    gap:9px;
}

.rv-page .offer svg {
    width:15px;
    flex:0 0 auto;
}

.rv-page .offer p {
    font-size:8px;
    line-height:1.5;
    opacity:.6;
}

/* FOOTER */

.rv-page .footer {
    margin-top:50px;
    padding-top:22px;
    border-top:1px solid var(--soft);
    display:flex;
    justify-content:space-between;
    color:var(--secondary);
    font-size:9px;
}

/* MOBILE */

@media(max-width:850px){

    .rv-page .payment-layout {
        grid-template-columns:1fr;
    }

    .rv-page .summary {
        position:static;
    }
}

@media(max-width:600px){

    .rv-page .container {
        width:calc(100% - 26px);
    }

    .rv-page .header {
        height:68px;
    }

    .rv-page .main {
        padding-top:25px;
    }

    .rv-page .page-heading h1 {
        font-size:25px;
    }

    .rv-page .secure-top span {
        display:none;
    }

    .rv-page .card,
    .rv-page .summary {
        padding:18px;
        border-radius:19px;
    }

    .rv-page .progress-line {
        width:25px;
    }

    .rv-page .progress-step span:last-child {
        display:none;
    }

    .rv-page .info-grid {
        gap:12px;
    }

    .rv-page .footer {
        display:block;
        line-height:2;
    }
}


/* Classes replacing the design's inline style="" widths (the CSP blocks inline styles). */
.rv-page .secure-top svg { width: 15px; }
.rv-page .breadcrumb svg { width: 13px; }
.rv-page .progress-number svg { width: 14px; }
.rv-page .security svg { width: 13px; }
/* Interactive bits. */
.rv-page button.payment-method { width: 100%; text-align: left; background: var(--white); color: inherit; font: inherit; }
.rv-page button.payment-method.active { background: var(--soft); }
.rv-page .breadcrumb a:hover { color: var(--primary); }
.rv-page .pay-btn:disabled { opacity: .6; cursor: progress; }
.rv-page .summary .err { color: #f3c9c4; font-size: 11px; font-weight: 700; margin-top: 12px; min-height: 0; }
.rv-page .offer .promo-link { background: none; border: 0; color: var(--soft); font-size: 8px; font-weight: 800; text-decoration: underline; padding: 0; }
.rv-page .promo-row { display: flex; gap: 6px; margin-top: 8px; }
.rv-page .promo-row input { flex: 1; min-width: 0; height: 34px; border-radius: 9px; border: 1px solid rgba(199,217,229,.35); background: rgba(199,217,229,.08); color: var(--soft); padding: 0 10px; font-size: 11px; font-weight: 700; text-transform: uppercase; outline: none; }
.rv-page .promo-row input::placeholder { color: var(--soft); opacity: .45; text-transform: none; }
.rv-page .promo-row button { border: 0; border-radius: 9px; background: var(--soft); color: var(--primary); padding: 0 12px; font-size: 10px; font-weight: 850; }
.rv-page .promo-msg { font-size: 9px; margin-top: 6px; font-weight: 700; }
.rv-page .brand-logo-img { width: 39px; height: 39px; border-radius: 11px; object-fit: contain; background: var(--white); }

/* =====================================================================
   Processing Payment — the provided processing design, verbatim, scoped under .pr-page.
   ===================================================================== */
/* Undo site rules that share class names with this design (home "How it works" .steps/.step). */
.pr-page .steps { display: block; max-width: none; grid-template-columns: none; gap: 0; }
.pr-page .step { background: none; border-radius: 0; padding: 0; text-align: left; }
.pr-page header { position: static; backdrop-filter: none; }

.pr-page .container {
    width:min(1000px,calc(100% - 30px));
    margin:auto;
}

.pr-page .icon {
    width:20px;
    height:20px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.8;
    stroke-linecap:round;
    stroke-linejoin:round;
}

/* ================= HEADER ================= */

.pr-page .header {
    height:74px;
    border-bottom:1px solid rgba(46,67,87,.08);
    background:rgba(243,239,236,.95);
}

.pr-page .nav {
    height:100%;
    display:flex;
    align-items:center;
    justify-content:space-between;
}

.pr-page .logo {
    display:flex;
    align-items:center;
    gap:10px;
    font-size:20px;
    font-weight:850;
    text-decoration:none;
    color:var(--primary);
}

.pr-page .logo-icon {
    width:39px;
    height:39px;
    border-radius:12px;
    background:var(--primary);
    color:var(--soft);
    display:grid;
    place-items:center;
}

.pr-page .secure {
    display:flex;
    align-items:center;
    gap:6px;
    color:var(--secondary);
    font-size:9px;
    font-weight:750;
}

/* ================= MAIN ================= */

.pr-page .main {
    min-height:calc(100vh - 74px);
    display:flex;
    align-items:center;
    justify-content:center;
    padding:50px 0 70px;
}

/* ================= PROCESSING CARD ================= */

.pr-page .processing-card {
    width:100%;
    max-width:610px;
    background:var(--white);
    border:1px solid rgba(46,67,87,.07);
    border-radius:26px;
    padding:38px;
    text-align:center;
}

/* ================= ANIMATION ================= */

.pr-page .loader {
    width:92px;
    height:92px;
    margin:0 auto 25px;
    position:relative;
}

.pr-page .loader-ring {
    width:92px;
    height:92px;
    border-radius:50%;
    border:3px solid var(--soft);
    border-top-color:var(--primary);
    animation:spin 1.1s linear infinite;
}

.pr-page .loader-center {
    position:absolute;
    inset:0;
    display:grid;
    place-items:center;
}

.pr-page .loader-center svg {
    width:28px;
    height:28px;
    color:var(--secondary);
}

/* ================= TEXT ================= */

.pr-page .status-label {
    color:var(--secondary);
    font-size:9px;
    font-weight:850;
    letter-spacing:1.8px;
    text-transform:uppercase;
    margin-bottom:9px;
}

.pr-page .processing-card h1 {
    font-size:27px;
    letter-spacing:-1px;
}

.pr-page .subtitle {
    color:var(--secondary);
    font-size:11px;
    line-height:1.6;
    max-width:420px;
    margin:9px auto 27px;
}

/* ================= TRANSACTION ================= */

.pr-page .transaction-box {
    background:var(--cream);
    border-radius:17px;
    padding:17px;
    text-align:left;
}

.pr-page .transaction-top {
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding-bottom:14px;
    border-bottom:1px solid var(--soft);
}

.pr-page .operator {
    display:flex;
    align-items:center;
    gap:10px;
}

.pr-page .operator-icon {
    width:40px;
    height:40px;
    border-radius:11px;
    background:var(--primary);
    color:var(--soft);
    display:grid;
    place-items:center;
    font-size:11px;
    font-weight:850;
}

.pr-page .operator-name {
    font-size:11px;
    font-weight:850;
}

.pr-page .operator-number {
    color:var(--secondary);
    font-size:9px;
    margin-top:3px;
}

.pr-page .amount {
    font-size:17px;
    font-weight:850;
}

.pr-page .details {
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:15px;
    padding-top:14px;
}

.pr-page .detail-label {
    color:var(--secondary);
    font-size:8px;
    margin-bottom:4px;
}

.pr-page .detail-value {
    font-size:10px;
    font-weight:800;
}

/* ================= STEPS ================= */

.pr-page .steps {
    margin:27px 0 20px;
    text-align:left;
}

.pr-page .step {
    display:flex;
    align-items:center;
    gap:11px;
    margin-bottom:13px;
}

.pr-page .step:last-child {
    margin-bottom:0;
}

.pr-page .step-icon {
    width:30px;
    height:30px;
    border-radius:50%;
    background:var(--soft);
    color:var(--secondary);
    display:grid;
    place-items:center;
    flex:0 0 auto;
}

.pr-page .step.active .step-icon {
    background:var(--primary);
    color:var(--soft);
}

.pr-page .step svg {
    width:14px;
    height:14px;
}

.pr-page .step-text {
    font-size:10px;
    font-weight:750;
}

.pr-page .step-sub {
    color:var(--secondary);
    font-size:8px;
    margin-top:2px;
}

.pr-page .step-line {
    width:1px;
    height:13px;
    background:var(--soft);
    margin-left:15px;
    margin-top:-8px;
    margin-bottom:-8px;
}

/* ================= NOTICE ================= */

.pr-page .notice {
    display:flex;
    align-items:flex-start;
    gap:8px;
    text-align:left;
    padding:12px;
    border-radius:12px;
    background:var(--soft);
}

.pr-page .notice svg {
    width:15px;
    flex:0 0 auto;
}

.pr-page .notice p {
    color:var(--primary);
    font-size:8px;
    line-height:1.55;
}

/* ================= FOOTER ================= */

.pr-page .footer {
    margin-top:26px;
    color:var(--secondary);
    font-size:8px;
    text-align:center;
}

/* ================= MOBILE ================= */

@media(max-width:600px){

    .pr-page .container {
        width:calc(100% - 24px);
    }

    .pr-page .header {
        height:68px;
    }

    .pr-page .secure span {
        display:none;
    }

    .pr-page .main {
        padding:30px 0 50px;
        align-items:flex-start;
    }

    .pr-page .processing-card {
        padding:27px 17px;
        border-radius:21px;
    }

    .pr-page .loader,
    .pr-page .loader-ring {
        width:78px;
        height:78px;
    }

    .pr-page .processing-card h1 {
        font-size:23px;
    }

    .pr-page .details {
        gap:10px;
    }
}


/* Class replacing the design's inline style="width:14px" (the CSP blocks inline styles). */
.pr-page .secure svg { width: 14px; }
/* Finished steps. */
.pr-page .step.done .step-icon { background: var(--secondary); color: var(--soft); }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .pr-page .loader-ring { animation-duration: 3s; } }
.pr-page .footer a { color: var(--primary); font-weight: 800; }
/* Real plan data has many category tabs; let them scroll inside their row instead of widening the page. */
.rc-page .recharge-layout > * { min-width: 0; }
.rc-page .plans-header { gap: 12px; }
.rc-page .plans-header .plan-tabs { min-width: 0; }
.rc-page .plans-header h3 { flex: none; }
.rv-page .payment-layout > *, .dash-page .content-grid > * { min-width: 0; }

/* =====================================================================
   Receipt (Recharge Successful) — the provided receipt design, verbatim, scoped under .sc-page.
   Also used for failed / refunded outcomes with a different hero.
   ===================================================================== */
/* Undo site rules that share class names with this design. */
.sc-page .actions { display: block; margin-top: 0; flex-wrap: nowrap; gap: 0; }
.sc-page header { position: static; backdrop-filter: none; }
.sc-page button { font-family: inherit; cursor: pointer; }

.sc-page .container {
    width:min(1050px,calc(100% - 30px));
    margin:auto;
}

.sc-page .icon {
    width:20px;
    height:20px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.8;
    stroke-linecap:round;
    stroke-linejoin:round;
}

/* ================= HEADER ================= */

.sc-page .header {
    height:74px;
    background:rgba(243,239,236,.96);
    border-bottom:1px solid rgba(46,67,87,.08);
}

.sc-page .nav {
    height:100%;
    display:flex;
    align-items:center;
    justify-content:space-between;
}

.sc-page .logo {
    display:flex;
    align-items:center;
    gap:10px;
    font-size:20px;
    font-weight:850;
}

.sc-page .logo-icon {
    width:39px;
    height:39px;
    border-radius:12px;
    background:var(--primary);
    color:var(--soft);
    display:grid;
    place-items:center;
}

.sc-page .nav-right {
    display:flex;
    align-items:center;
    gap:10px;
}

.sc-page .secure {
    display:flex;
    align-items:center;
    gap:6px;
    color:var(--secondary);
    font-size:9px;
    font-weight:750;
}

/* ================= MAIN ================= */

.sc-page .main {
    padding:40px 0 70px;
}

/* ================= SUCCESS HERO ================= */

.sc-page .success-hero {
    text-align:center;
    margin-bottom:30px;
}

.sc-page .success-icon {
    width:78px;
    height:78px;
    border-radius:50%;
    background:var(--primary);
    color:var(--soft);
    margin:0 auto 18px;
    display:grid;
    place-items:center;
    position:relative;
}

.sc-page .success-icon:after {
    content:"";
    position:absolute;
    inset:-7px;
    border:1px solid var(--soft);
    border-radius:50%;
}

.sc-page .success-icon svg {
    width:35px;
    height:35px;
    stroke-width:2;
}

.sc-page .success-label {
    font-size:9px;
    letter-spacing:1.7px;
    font-weight:850;
    color:var(--secondary);
    text-transform:uppercase;
    margin-bottom:8px;
}

.sc-page .success-hero h1 {
    font-size:30px;
    letter-spacing:-1.2px;
}

.sc-page .success-hero p {
    color:var(--secondary);
    font-size:11px;
    margin-top:7px;
}

/* ================= LAYOUT ================= */

.sc-page .receipt-layout {
    display:grid;
    grid-template-columns:1fr 330px;
    gap:20px;
    align-items:start;
}

/* ================= RECEIPT ================= */

.sc-page .receipt {
    background:var(--white);
    border-radius:23px;
    border:1px solid rgba(46,67,87,.07);
    overflow:hidden;
}

/* receipt top */

.sc-page .receipt-top {
    padding:24px;
    border-bottom:1px dashed var(--soft);
}

.sc-page .receipt-heading {
    display:flex;
    align-items:center;
    justify-content:space-between;
}

.sc-page .receipt-heading h2 {
    font-size:15px;
}

.sc-page .receipt-heading span {
    color:var(--secondary);
    font-size:9px;
    font-weight:700;
}

.sc-page .merchant {
    margin-top:20px;
    background:var(--cream);
    border-radius:16px;
    padding:16px;
    display:flex;
    align-items:center;
    justify-content:space-between;
}

.sc-page .merchant-left {
    display:flex;
    align-items:center;
    gap:11px;
}

.sc-page .operator-logo {
    width:42px;
    height:42px;
    border-radius:12px;
    background:var(--primary);
    color:var(--soft);
    display:grid;
    place-items:center;
    font-size:12px;
    font-weight:850;
}

.sc-page .merchant-name {
    font-size:12px;
    font-weight:850;
}

.sc-page .merchant-number {
    color:var(--secondary);
    font-size:9px;
    margin-top:3px;
}

.sc-page .amount {
    text-align:right;
}

.sc-page .amount-label {
    color:var(--secondary);
    font-size:8px;
}

.sc-page .amount-value {
    font-size:20px;
    font-weight:850;
    margin-top:2px;
}

/* ================= STATUS ================= */

.sc-page .status-bar {
    display:flex;
    align-items:center;
    gap:8px;
    margin-top:17px;
    padding:10px 12px;
    border-radius:10px;
    background:var(--soft);
}

.sc-page .status-dot {
    width:19px;
    height:19px;
    border-radius:50%;
    background:var(--primary);
    color:var(--soft);
    display:grid;
    place-items:center;
}

.sc-page .status-dot svg {
    width:11px;
    height:11px;
}

.sc-page .status-text {
    font-size:9px;
    font-weight:800;
}

.sc-page .status-sub {
    color:var(--secondary);
    font-size:8px;
    margin-top:2px;
}

/* ================= DETAILS ================= */

.sc-page .details {
    padding:23px 24px;
}

.sc-page .details-title {
    font-size:12px;
    font-weight:850;
    margin-bottom:15px;
}

.sc-page .detail-row {
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:10px 0;
    border-bottom:1px solid rgba(199,217,229,.6);
}

.sc-page .detail-row:last-child {
    border-bottom:0;
}

.sc-page .detail-label {
    color:var(--secondary);
    font-size:9px;
}

.sc-page .detail-value {
    font-size:9px;
    font-weight:800;
    text-align:right;
}

.sc-page .copy {
    margin-left:5px;
    width:22px;
    height:22px;
    border:0;
    border-radius:6px;
    background:var(--soft);
    color:var(--primary);
    display:inline-grid;
    place-items:center;
    vertical-align:middle;
}

.sc-page .copy svg {
    width:11px;
}

/* ================= PAYMENT BREAKUP ================= */

.sc-page .breakup {
    padding:20px 24px;
    background:var(--cream);
    border-top:1px dashed var(--soft);
}

.sc-page .breakup-title {
    font-size:11px;
    font-weight:850;
    margin-bottom:12px;
}

.sc-page .breakup-row {
    display:flex;
    justify-content:space-between;
    margin-bottom:9px;
}

.sc-page .breakup-row span:first-child {
    color:var(--secondary);
    font-size:9px;
}

.sc-page .breakup-row span:last-child {
    font-size:9px;
    font-weight:750;
}

.sc-page .breakup-total {
    display:flex;
    justify-content:space-between;
    padding-top:11px;
    margin-top:10px;
    border-top:1px solid var(--soft);
}

.sc-page .breakup-total span:first-child {
    font-size:10px;
    font-weight:800;
}

.sc-page .breakup-total span:last-child {
    font-size:15px;
    font-weight:850;
}

/* ================= SIDE CARD ================= */

.sc-page .side-card {
    background:var(--primary);
    color:var(--soft);
    border-radius:23px;
    padding:23px;
    position:sticky;
    top:20px;
}

.sc-page .side-title {
    display:flex;
    align-items:center;
    gap:10px;
    padding-bottom:18px;
    border-bottom:1px solid rgba(199,217,229,.2);
}

.sc-page .side-icon {
    width:40px;
    height:40px;
    border-radius:12px;
    background:var(--secondary);
    display:grid;
    place-items:center;
}

.sc-page .side-title h2 {
    font-size:14px;
}

.sc-page .side-title p {
    font-size:8px;
    opacity:.55;
    margin-top:3px;
}

/* ACTIONS */

.sc-page .actions {
    padding:18px 0;
}

.sc-page .action {
    width:100%;
    height:47px;
    border-radius:12px;
    border:1px solid rgba(199,217,229,.25);
    background:transparent;
    color:var(--soft);
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    font-size:10px;
    font-weight:800;
    margin-bottom:9px;
}

.sc-page .action svg {
    width:16px;
}

.sc-page .action.primary {
    background:var(--soft);
    color:var(--primary);
    border-color:var(--soft);
}

/* SHARE */

.sc-page .share-box {
    padding-top:17px;
    border-top:1px solid rgba(199,217,229,.2);
}

.sc-page .share-title {
    font-size:9px;
    font-weight:800;
    margin-bottom:10px;
    opacity:.75;
}

.sc-page .share-buttons {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:7px;
}

.sc-page .share {
    height:36px;
    border:1px solid rgba(199,217,229,.22);
    border-radius:9px;
    background:transparent;
    color:var(--soft);
    display:grid;
    place-items:center;
}

.sc-page .share svg {
    width:16px;
}

/* INFO */

.sc-page .side-info {
    margin-top:17px;
    padding:12px;
    background:rgba(199,217,229,.1);
    border-radius:11px;
    display:flex;
    gap:8px;
}

.sc-page .side-info svg {
    width:14px;
    flex:0 0 auto;
}

.sc-page .side-info p {
    font-size:8px;
    line-height:1.5;
    opacity:.6;
}

/* ================= BOTTOM ACTIONS ================= */

.sc-page .bottom-actions {
    display:flex;
    justify-content:center;
    gap:9px;
    margin-top:23px;
}

.sc-page .bottom-btn {
    height:45px;
    padding:0 19px;
    border-radius:11px;
    border:1px solid var(--soft);
    background:var(--white);
    color:var(--primary);
    display:flex;
    align-items:center;
    gap:7px;
    font-size:9px;
    font-weight:800;
}

.sc-page .bottom-btn svg {
    width:15px;
}

/* ================= FOOTER ================= */

.sc-page .footer {
    text-align:center;
    color:var(--secondary);
    font-size:8px;
    margin-top:32px;
}

/* ================= MOBILE ================= */

@media(max-width:850px){

    .sc-page .receipt-layout {
        grid-template-columns:1fr;
    }

    .sc-page .side-card {
        position:static;
    }
}

@media(max-width:600px){

    .sc-page .container {
        width:calc(100% - 24px);
    }

    .sc-page .main {
        padding-top:30px;
    }

    .sc-page .success-hero h1 {
        font-size:25px;
    }

    .sc-page .receipt-top,
    .sc-page .details {
        padding:19px;
    }

    .sc-page .breakup {
        padding:18px 19px;
    }

    .sc-page .merchant {
        padding:13px;
    }

    .sc-page .amount-value {
        font-size:17px;
    }

    .sc-page .bottom-actions {
        flex-direction:column;
    }

    .sc-page .bottom-btn {
        justify-content:center;
    }

    .sc-page .side-card {
        padding:19px;
    }
}


/* Class replacing the design's inline style="width:14px" (the CSP blocks inline styles). */
.sc-page .secure svg { width: 14px; }
/* Outcome variants of the hero / status bar. */
.sc-page .success-icon.soft { background: var(--soft); color: var(--primary); }
.sc-page .success-icon.soft:after { border-color: var(--secondary); }
.sc-page .status-bar.soft { background: var(--cream); border: 1px solid var(--soft); }
.sc-page .status-bar.soft .status-dot { background: var(--secondary); }
.sc-page a.bottom-btn, .sc-page a.action { text-decoration: none; }
.sc-page .detail-value { word-break: break-all; }
.sc-page .voucher-reveal { margin-top: 14px; }
.sc-page .voucher-reveal .reveal-btn { width: 100%; height: 44px; border: 0; border-radius: 11px; background: var(--primary); color: var(--soft); font-size: 10px; font-weight: 850; }
.sc-page .voucher-code { background: var(--cream); border: 1px dashed var(--secondary); border-radius: 12px; padding: 12px; margin-top: 10px; }
.sc-page .voucher-code small { display: block; font-size: 8px; font-weight: 800; color: var(--secondary); margin-top: 6px; }
.sc-page .voucher-code small:first-child { margin-top: 0; }
.sc-page .voucher-code code { font-family: ui-monospace, Menlo, monospace; font-size: 14px; font-weight: 800; word-break: break-all; }
.sc-page .toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); background: var(--primary); color: var(--soft); font-size: 11px; font-weight: 800; padding: 10px 16px; border-radius: 10px; z-index: 50; }
.sc-page .receipt-layout > * { min-width: 0; }

/* Download Receipt = print / Save as PDF with just the receipt. */
@media print {
    body { background: #fff; }
    .sc-page .header, .sc-page .side-card, .sc-page .bottom-actions, .sc-page .voucher-reveal .reveal-btn, .sc-page .copy, .sc-page .toast { display: none !important; }
    .sc-page .receipt-layout { display: block; }
    .sc-page .main { padding: 0; }
    .sc-page .receipt { border: 1px solid #ccc; }
}