:root
{
    --muted : #6B5E4E;
}

.eyebrow
{
    display : inline-block;
    margin-bottom : 1rem;
    font-family : 'DM Sans', sans-serif;
    font-size : 0.7rem;
    font-weight : 700;
    letter-spacing : 0.18em;
    text-transform : uppercase;
    color : #8A6A3E;
}

.page-hero .eyebrow
{
    color : #C9A84C;
}

.section--dim
{
    background : #EDE8E0;
}

.welcome-hero
{
    padding : 4rem 0 0;
}

.checkout-header
{
    max-width : 640px;
    margin : 0 auto;
}

.checkout-header .eyebrow
{
    display : block;
}

.checkout-header h1
{
    margin-bottom : 1rem;
}

.checkout-header p
{
    color : rgba(245, 241, 235, 0.72);
}

.checkout-grid
{
    display : grid;
    grid-template-columns : 1fr;
    gap : 2.4rem;
    align-items : start;
    max-width : 760px;
    margin : 0 auto;
}

.checkout-form-panel,
.checkout-grid + .checkout-form-panel
{
    max-width : 760px;
    margin : 2.4rem auto 0;
}

.checkout-details
{
    display : flex;
    flex-direction : column;
    gap : 1.6rem;
}

.policy-card,
.payment-card
{
    background : #FFFFFF;
    border : 1px solid #D5CBBC;
    border-radius : 20px;
    padding : 2rem 2.2rem;
}

.policy-card h3
{
    margin-bottom : 0.3rem;
}

.policy-card .auc
{
    margin-bottom : 1.4rem;
}

.policy-box
{
    background : #F5F1EB;
    border-left : 4px solid #C9A84C;
    border-radius : 4px;
    padding : 1.5rem 1.7rem;
}

.policy-box p
{
    max-width : none;
    margin : 0;
}

.policy-box h4
{
    margin : 1.3rem 0 0.6rem;
    font-family : 'DM Sans', sans-serif;
    font-size : 1rem;
    font-weight : 700;
    color : #0F1928;
}

.policy-box h4:first-child
{
    margin-top : 0;
}

.right-arrow-long
{
    list-style : none;
    margin : 0 0 1rem;
    padding : 0;
}

.right-arrow-long li
{
    position : relative;
    margin-bottom : 0.4rem;
    padding-left : 1.4rem;
    font-size : 1rem;
    color : #4A3F30;
}

.right-arrow-long li::before
{
    content : '';
    position : absolute;
    left : 0;
    top : 0.55em;
    width : 8px;
    height : 8px;
    border-radius : 50%;
    background : #C9A84C;
}

.payment-card
{
    display : flex;
    align-items : flex-start;
    gap : 1rem;
}

.payment-card .security-icon
{
    flex : none;
    display : flex;
    align-items : center;
    justify-content : center;
    width : 34px;
    height : 34px;
    border-radius : 50%;
    background : #F5F1EB;
}

.payment-card .security-icon svg
{
    width : 16px;
    height : 16px;
    color : #1B3A5C;
}

.payment-card .security-note h4
{
    margin : 0 0 0.3rem;
    font-family : 'DM Sans', sans-serif;
    font-size : 0.95rem;
    font-weight : 700;
    color : #0F1928;
}

.payment-card .security-note p
{
    max-width : none;
    margin : 0;
    font-size : 0.92rem;
    color : #4A3F30;
}

.checkout-summary
{
    background : #0F1928;
    color : #F5F1EB;
    border-radius : 20px;
    padding : 2.2rem 2.2rem 2.4rem;
}

.checkout-summary .eyebrow
{
    color : #C9A84C;
}

.checkout-summary h2
{
    margin-bottom : 1.4rem;
    font-size : clamp(1.5rem, 2.6vw, 1.9rem);
    color : #FFFFFF;
}

.summary-features
{
    list-style : none;
    margin : 0 0 1.6rem;
    padding : 0;
    border-top : 1px solid rgba(255, 255, 255, 0.12);
}

.summary-features li
{
    display : flex;
    align-items : center;
    gap : 0.6rem;
    margin : 0;
    padding : 0.65rem 0;
    border-bottom : 1px solid rgba(255, 255, 255, 0.12);
    font-size : 0.94rem;
    color : rgba(245, 241, 235, 0.82);
}

.summary-features li::before
{
    content : "";
    flex : none;
    width : 6px;
    height : 6px;
    border-radius : 50%;
    background : #C9A84C;
}

.summary-price
{
    display : flex;
    align-items : baseline;
    justify-content : space-between;
    gap : 1rem;
    margin-bottom : 1.8rem;
    padding : 1.1rem 1.4rem;
    background : #1B3A5C;
    border-radius : 12px;
}

.summary-price__duration
{
    font-size : 0.85rem;
    color : rgba(245, 241, 235, 0.7);
}

.summary-price__amount
{
    font-size : 1.7rem;
    font-weight : 600;
    color : #FFFFFF;
}

.checkout-form-panel
{
    background : #FFFFFF;
    border : 1px solid #D5CBBC;
    border-radius : 20px;
    padding : 2.2rem;
}

.form-height
{
    background : #F5F1EB;
    border-radius : 12px;
    padding : 1.2rem;
}

.change-selection
{
    max-width : 760px;
    margin : 1.8rem auto 0;
    text-align : center;
}

.change-selection a
{
    font-size : 0.94rem;
    font-weight : 600;
    color : #1B3A5C;
    text-decoration : underline;
    text-underline-offset : 3px;
}

.change-selection a:hover
{
    color : #0F1928;
}

.checkout-spacer-top
{
    height : 60px;
}

.checkout-spacer-footer
{
    height : 100px;
}

.panel
{
    display : flex;
    flex-direction : column;
    gap : 1.5rem;
    max-width : 560px;
    margin : 0 auto;
    padding : 2.2rem;
    background : #FFFFFF;
    border : 1px solid #D5CBBC;
    border-radius : 20px;
}

.product-badge
{
    display : inline-block;
    padding : 0.35rem 0.9rem;
    background : #F5F1EB;
    border : 1px solid #D5CBBC;
    border-radius : 999px;
    font-size : 0.7rem;
    font-weight : 700;
    letter-spacing : 0.14em;
    text-transform : uppercase;
    color : #8A6A3E;
}

.product-name
{
    font-family : 'Playfair Display', serif;
    font-size : clamp(1.5rem, 3vw, 1.9rem);
    font-weight : 700;
    line-height : 1.25;
    color : #0F1928;
}

.product-desc
{
    font-size : 0.94rem;
    color : #4A3F30;
}

.divider
{
    height : 1px;
    background : #D5CBBC;
}

.calc-block
{
    display : flex;
    flex-direction : column;
    gap : 0.9rem;
}

.calc-label,
.currency-label
{
    font-size : 0.7rem;
    font-weight : 700;
    letter-spacing : 0.18em;
    text-transform : uppercase;
    color : #8A6A3E;
}

.calc-display
{
    padding : 0.75rem 1.25rem;
    background : #F5F1EB;
    border-radius : 12px;
}

.calc-row
{
    display : flex;
    align-items : baseline;
    justify-content : space-between;
    gap : 1rem;
    padding : 0.45rem 0;
    font-size : 0.94rem;
    color : #4A3F30;
}

.calc-row--total
{
    margin-top : 0.4rem;
    padding-top : 0.75rem;
    border-top : 2px solid #C9A84C;
    font-weight : 700;
    color : #0F1928;
}

.calc-val
{
    font-weight : 700;
    color : #1B3A5C;
}

.calc-slider
{
    display : block;
    width : 100%;
    accent-color : #1B3A5C;
    cursor : pointer;
}

.calc-scale
{
    display : flex;
    justify-content : space-between;
    font-size : 0.8rem;
    color : var(--muted);
}

.calc-note
{
    font-size : 0.82rem;
    color : var(--muted);
}

.currency-label
{
    margin-bottom : 0.6rem;
}

.currency-switcher
{
    display : flex;
    flex-wrap : wrap;
    gap : 0.6rem;
}

.currency-btn
{
    padding : 0.55rem 1.1rem;
    background : #FFFFFF;
    border : 2px solid #D5CBBC;
    border-radius : 999px;
    font-family : 'DM Sans', sans-serif;
    font-size : 0.875rem;
    font-weight : 700;
    color : #1B3A5C;
    cursor : pointer;
    transition : background 0.18s, border-color 0.18s, color 0.18s;
}

.currency-btn:hover
{
    border-color : #1B3A5C;
}

.currency-btn.active
{
    background : #1B3A5C;
    border-color : #1B3A5C;
    color : #F5F1EB;
}

.price-display
{
    display : flex;
    align-items : baseline;
    gap : 0.6rem;
}

.price-amount
{
    font-family : 'Playfair Display', serif;
    font-size : clamp(2.2rem, 5vw, 3rem);
    font-weight : 700;
    line-height : 1.1;
    color : #0F1928;
}

.price-label
{
    font-size : 0.9rem;
    color : var(--muted);
}

.line-items
{
    display : flex;
    flex-direction : column;
}

.line-item
{
    display : flex;
    justify-content : space-between;
    gap : 1rem;
    padding : 0.6rem 0;
    border-bottom : 1px solid #E8E2D8;
    font-size : 0.94rem;
    color : #4A3F30;
}

.line-item.total
{
    border-bottom : none;
    font-weight : 700;
    color : #0F1928;
}

.error-msg
{
    display : none;
    padding : 0.85rem 1.1rem;
    background : #FBEAEA;
    border-left : 4px solid #B3261E;
    border-radius : 4px;
    font-size : 0.9rem;
    color : #7A1A15;
}

.error-msg.visible
{
    display : block;
}

.pay-btn
{
    position : relative;
    display : flex;
    align-items : center;
    justify-content : center;
    width : 100%;
    padding : 1rem 1.5rem;
    background : #1B3A5C;
    border : 2px solid #1B3A5C;
    border-radius : 8px;
    font-family : 'DM Sans', sans-serif;
    font-size : 1rem;
    font-weight : 700;
    letter-spacing : 0.04em;
    color : #F5F1EB;
    cursor : pointer;
    transition : background 0.18s, border-color 0.18s, transform 0.18s;
}

.pay-btn:hover
{
    background : #142E4A;
    border-color : #142E4A;
    transform : translateY(-1px);
}

.pay-btn:disabled
{
    opacity : 0.7;
    cursor : not-allowed;
    transform : none;
}

.btn-text
{
    display : flex;
    align-items : center;
    gap : 0.6rem;
}

.spinner
{
    display : none;
    position : absolute;
    top : 50%;
    left : 50%;
    width : 22px;
    height : 22px;
    margin : -11px 0 0 -11px;
    border : 3px solid rgba(245, 241, 235, 0.35);
    border-top-color : #F5F1EB;
    border-radius : 50%;
    animation : checkout-spin 0.8s linear infinite;
}

.pay-btn.loading .btn-text
{
    visibility : hidden;
}

.pay-btn.loading .spinner
{
    display : block;
}

.secure-note
{
    display : flex;
    align-items : center;
    justify-content : center;
    gap : 0.4rem;
    font-size : 0.8rem;
    color : var(--muted);
}

@keyframes checkout-spin
{
    to
    {
        transform : rotate(360deg);
    }
}

@media(max-width:600px)
{
    .policy-card,
    .payment-card,
    .checkout-form-panel,
    .panel
    {
        padding : 1.5rem;
    }

    .checkout-summary
    {
        padding : 1.8rem 1.6rem 2rem;
    }

    .payment-card
    {
        flex-direction : column;
    }
}