/* =========================================================
   GOLDBITES SIP
   ========================================================= */

:root {

    --gold: #f4c542;
    --gold-light: #ffe47a;
    --green-dark: #001f13;
    --green: #002d19;
    --green-mid: #063b25;

    --white: #ffffff;

    --muted:
        rgba(255, 255, 255, 0.68);

    --soft:
        rgba(255, 255, 255, 0.45);

}


/* =========================================================
   RESET
   ========================================================= */

* {
    box-sizing: border-box;
}


body {

    margin: 0;

    font-family:
        "Inter",
        sans-serif;

    color: var(--white);

    background:
        linear-gradient(
            180deg,
            #001d11,
            #002d19,
            #001d11
        );

}


button,
input {

    font-family:
        "Inter",
        sans-serif;

}


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

.sip-page {

    min-height: 100vh;

}


/* =========================================================
   CONTAINER
   ========================================================= */

.sip-container {

    width:
        min(
            900px,
            calc(100% - 32px)
        );

    margin:
        auto;

}


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

.sip-hero {

    padding:
        135px 20px 65px;

    text-align:
        center;

    background:

        radial-gradient(
            circle at center,
            rgba(244, 197, 66, 0.09),
            transparent 48%
        ),

        linear-gradient(
            135deg,
            #001d11,
            #00351f
        );

    border-bottom:
        1px solid
        rgba(244,197,66,.4);

}


.sip-hero-content {

    max-width:
        800px;

    margin:
        auto;

}


.sip-eyebrow {

    margin:
        0 0 15px;

    color:
        var(--gold-light);

    font-size:
        11px;

    font-weight:
        700;

    letter-spacing:
        3px;

}


.sip-hero h3 {

    margin:
        0;

    font-family:
        "Playfair Display",
        serif;

    font-size:
        clamp(20px, 3vw, 38px);

    line-height:
        1.05;

}


.sip-hero h1 span {

    color:
        var(--gold-light);

}


.sip-hero-description {

    max-width:
        650px;

    margin:
        22px auto 0;

    color:
        var(--muted);

    font-size:
        16px;

    line-height:
        1.7;

}


/* =========================================================
   INVEST SECTION
   ========================================================= */

.sip-invest-section {

    padding:
        65px 0 80px;

}


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

.sip-card {

    width:
        100%;

    padding:
        34px;

    border:
        1px solid
        var(--gold);

    border-radius:
        18px;

    background:
        linear-gradient(
            145deg,
            rgba(0,45,25,.98),
            rgba(0,28,17,.98)
        );

    box-shadow:
        0 25px 70px
        rgba(0,0,0,.35),

        0 0 25px
        rgba(244,197,66,.06);

}


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

.card-eyebrow {

    margin:
        0 0 7px;

    color:
        var(--gold-light);

    font-size:
        10px;

    font-weight:
        700;

    letter-spacing:
        2px;

}


.sip-card-heading h2 {

    margin:
        0 0 7px;

    font-family:
        "Playfair Display",
        serif;

    font-size:
        31px;

}


.sip-card-heading > p:last-child {

    margin:
        0;

    color:
        var(--muted);

    font-size:
        13px;

}


/* =========================================================
   GROUP
   ========================================================= */

.sip-group {

    margin-top:
        28px;

}


.sip-label {

    display:
        block;

    margin-bottom:
        10px;

    color:
        var(--gold-light);

    font-size:
        13px;

    font-weight:
        600;

}


/* =========================================================
   METAL
   ========================================================= */

.metal-options {

    display:
        grid;

    grid-template-columns:
        1fr 1fr;

    gap:
        12px;

}


.metal-option {

    min-height:
        75px;

    padding:
        12px 15px;

    display:
        flex;

    align-items:
        center;

    gap:
        12px;

    border:
        1px solid
        rgba(244,197,66,.35);

    border-radius:
        10px;

    background:
        rgba(0,30,18,.65);

    color:
        white;

    cursor:
        pointer;

    text-align:
        left;

    transition:
        .2s ease;

}


.metal-option:hover {

    border-color:
        var(--gold-light);

}


.metal-option.active {

    border-color:
        var(--gold);

    background:
        rgba(244,197,66,.12);

    box-shadow:
        0 0 16px
        rgba(244,197,66,.09);

}


.metal-icon {

    width:
        40px;

    height:
        40px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border:
        1px solid
        var(--gold);

    border-radius:
        50%;

}


.metal-icon img {

    width:
        25px;

    height:
        25px;

    object-fit:
        contain;

}


.metal-info strong {

    display:
        block;

    font-size:
        14px;

}


.metal-info small {

    display:
        block;

    margin-top:
        3px;

    color:
        var(--soft);

    font-size:
        11px;

}


/* =========================================================
   LIVE RATE
   ========================================================= */

.live-rate-box {

    margin-top:
        25px;

    padding:
        15px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        15px;

    border:
        1px solid
        rgba(244,197,66,.42);

    border-radius:
        11px;

    background:
        rgba(244,197,66,.045);

}


.rate-left {

    display:
        flex;

    align-items:
        center;

    gap:
        12px;

}


.rate-image {

    width:
        46px;

    height:
        46px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border:
        1px solid
        rgba(244,197,66,.5);

    border-radius:
        50%;

}


.rate-image img {

    width:
        30px;

    height:
        30px;

    object-fit:
        contain;

}


.rate-title {

    display:
        block;

    color:
        var(--soft);

    font-size:
        10px;

}


.rate-name-row {

    display:
        flex;

    align-items:
        center;

    gap:
        7px;

    margin-top:
        4px;

}


.rate-name-row strong {

    font-size:
        14px;

}


.rate-name-row span {

    padding:
        3px 7px;

    border-radius:
        10px;

    background:
        rgba(244,197,66,.12);

    color:
        var(--gold-light);

    font-size:
        9px;

}


.rate-right {

    text-align:
        right;

}


.rate-value {

    display:
        block;

    color:
        var(--gold-light);

    font-size:
        18px;

}


.rate-live-row {

    display:
        flex;

    align-items:
        center;

    justify-content:
        flex-end;

    gap:
        5px;

    margin-top:
        5px;

    color:
        #7ee0a7;

    font-size:
        10px;

}


.live-dot {

    width:
        6px;

    height:
        6px;

    border-radius:
        50%;

    background:
        #55d98a;

}


.rate-timer {

    margin-left:
        6px;

    color:
        var(--gold-light);

}


/* =========================================================
   MODE
   ========================================================= */

.purchase-mode {

    display:
        flex;

    width:
        fit-content;

    padding:
        4px;

    border:
        1px solid
        rgba(244,197,66,.28);

    border-radius:
        9px;

    background:
        rgba(0,0,0,.16);

}


.mode-option {

    padding:
        9px 20px;

    border-radius:
        6px;

    color:
        var(--muted);

    cursor:
        pointer;

    font-size:
        12px;

}


.mode-option input {

    display:
        none;

}


.mode-option.active {

    background:
        rgba(244,197,66,.14);

    color:
        var(--gold-light);

}


.mode-option:has(input:checked) {

    background:
        rgba(244,197,66,.14);

    color:
        var(--gold-light);

}


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

.amount-heading {

    display:
        flex;

    justify-content:
        space-between;

    align-items:
        center;

    gap:
        10px;

}


.amount-heading .sip-label {

    margin-bottom:
        0;

}


.minimum-message {

    color:
        var(--soft);

    font-size:
        10px;

}


.amount-input-wrapper {

    position:
        relative;

}


.currency-symbol {

    position:
        absolute;

    left:
        17px;

    top:
        50%;

    transform:
        translateY(-50%);

    color:
        var(--gold-light);

    font-size:
        18px;

    font-weight:
        600;

}


.amount-input {

    width:
        100%;

    height:
        58px;

    padding:
        0 18px 0 48px;

    border:
        1px solid
        rgba(244,197,66,.4);

    border-radius:
        9px;

    outline:
        none;

    background:
        rgba(0,15,9,.55);

    color:
        white;

    font-size:
        18px;

    font-weight:
        600;

}


.amount-input:focus {

    border-color:
        var(--gold-light);

    box-shadow:
        0 0 14px
        rgba(244,197,66,.10);

}


.amount-input::-webkit-inner-spin-button,
.amount-input::-webkit-outer-spin-button {

    opacity:
        .5;

}


/* =========================================================
   POPULAR
   ========================================================= */

.popular-options {

    display:
        none;

    margin-top:
        10px;

}


.popular-options.visible {

    display:
        flex;

    align-items:
        center;

    gap:
        9px;

}


.popular-options > span {

    color:
        var(--soft);

    font-size:
        10px;

}


.popular-options-list {

    display:
        flex;

    gap:
        6px;

    flex-wrap:
        wrap;

}


.popular-options-list button {

    padding:
        6px 10px;

    border:
        1px solid
        rgba(244,197,66,.28);

    border-radius:
        15px;

    background:
        transparent;

    color:
        var(--muted);

    cursor:
        pointer;

    font-size:
        10px;

}


.popular-options-list button:hover,
.popular-options-list button.active {

    border-color:
        var(--gold);

    color:
        var(--gold-light);

}


.converted-value {

    margin-top:
        9px;

    color:
        var(--gold-light);

    text-align:
        right;

    font-size:
        11px;

}


/* =========================================================
   FREQUENCY
   ========================================================= */

.frequency-options {

    display:
        grid;

    grid-template-columns:
        repeat(4, 1fr);

    gap:
        9px;

}


.frequency-option {

    min-height:
        72px;

    padding:
        10px 7px;

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        center;

    align-items:
        center;

    border:
        1px solid
        rgba(244,197,66,.35);

    border-radius:
        9px;

    background:
        rgba(0,30,18,.6);

    color:
        white;

    cursor:
        pointer;

    transition:
        .2s ease;

}


.frequency-option:hover {

    border-color:
        var(--gold-light);

}


.frequency-option.active {

    border-color:
        var(--gold);

    background:
        rgba(244,197,66,.13);

    box-shadow:
        0 0 14px
        rgba(244,197,66,.09);

}


.frequency-main {

    color:
        var(--gold-light);

    font-size:
        13px;

    font-weight:
        700;

}


.frequency-sub {

    margin-top:
        5px;

    color:
        var(--soft);

    font-size:
        9px;

}


.frequency-description {

    margin-top:
        11px;

    padding:
        11px 13px;

    border-left:
        2px solid
        var(--gold);

    border-radius:
        5px;

    background:
        rgba(244,197,66,.045);

    color:
        var(--muted);

    font-size:
        11px;

    line-height:
        1.5;

}


/* =========================================================
   CALCULATION
   ========================================================= */

.calculation-box {

    margin-top:
        25px;

    padding:
        17px;

    border:
        1px solid
        rgba(244,197,66,.18);

    border-radius:
        10px;

    background:
        rgba(0,0,0,.12);

}


.calculation-row {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    padding:
        7px 0;

}


.calculation-row span {

    color:
        var(--muted);

    font-size:
        12px;

}


.calculation-row strong {

    color:
        white;

    font-size:
        12px;

}


.calculation-divider {

    height:
        1px;

    margin:
        5px 0;

    background:
        rgba(255,255,255,.08);

}


.calculation-row.total span {

    color:
        var(--gold-light);

    font-weight:
        600;

}


.calculation-row.total strong {

    color:
        var(--gold-light);

    font-size:
        16px;

}


/* =========================================================
   TERMS
   ========================================================= */

.terms {

    margin-top:
        18px;

    display:
        flex;

    align-items:
        flex-start;

    gap:
        8px;

    color:
        var(--soft);

    font-size:
        10px;

    line-height:
        1.5;

}


.terms input {

    margin-top:
        2px;

    accent-color:
        var(--gold);

}


.terms a {

    color:
        var(--gold-light);

}


/* =========================================================
   BUTTON
   ========================================================= */

.proceed-button {

    width:
        100%;

    min-height:
        55px;

    margin-top:
        20px;

    border:
        1px solid
        var(--gold);

    border-radius:
        9px;

    background:
        linear-gradient(
            135deg,
            #f4c542,
            #d8aa28
        );

    color:
        #082216;

    cursor:
        pointer;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        12px;

    font-size:
        14px;

    font-weight:
        800;

}


.proceed-button:hover {

    box-shadow:
        0 0 22px
        rgba(244,197,66,.25);

}


.proceed-button:disabled {

    opacity:
        .55;

    cursor:
        not-allowed;

}


.secure-note {

    margin:
        11px 0 0;

    color:
        var(--soft);

    text-align:
        center;

    font-size:
        9px;

}


/* =========================================================
   HOW
   ========================================================= */

.sip-how {

    padding:
        75px 0;

    border-top:
        1px solid
        rgba(244,197,66,.12);

}


.section-heading {

    text-align:
        center;

    margin-bottom:
        38px;

}


.section-heading span {

    color:
        var(--gold-light);

    font-size:
        10px;

    letter-spacing:
        2px;

    font-weight:
        700;

}


.section-heading h2 {

    margin:
        9px 0 0;

    font-family:
        "Playfair Display",
        serif;

    font-size:
        38px;

}


.sip-steps {

    display:
        grid;

    grid-template-columns:
        repeat(4, 1fr);

    gap:
        15px;

}


.sip-step {

    padding:
        22px;

    border:
        1px solid
        rgba(244,197,66,.16);

    border-radius:
        11px;

    background:
        rgba(0,45,25,.45);

}


.sip-step > span {

    color:
        var(--gold);

    font-family:
        "Playfair Display",
        serif;

    font-size:
        26px;

}


.sip-step h3 {

    margin:
        11px 0 7px;

    font-size:
        15px;

}


.sip-step p {

    margin:
        0;

    color:
        var(--muted);

    font-size:
        11px;

    line-height:
        1.6;

}


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

@media (max-width: 750px) {

    .sip-card {

        padding:
            24px 18px;

    }


    .frequency-options {

        grid-template-columns:
            repeat(2, 1fr);

    }


    .sip-steps {

        grid-template-columns:
            repeat(2, 1fr);

    }

}


@media (max-width: 520px) {

    .sip-container {

        width:
            calc(100% - 20px);

    }


    .sip-hero {

        padding:
            120px 15px 50px;

    }


    .sip-hero h1 {

        font-size:
            39px;

    }


    .metal-options {

        grid-template-columns:
            1fr;

    }


    .live-rate-box {

        align-items:
            flex-start;

    }


    .rate-value {

        font-size:
            15px;

    }


    .sip-steps {

        grid-template-columns:
            1fr;

    }

}