/* CSS Custom Properties for Font Sizes */
:root {
    --font-size-s: 10px;
    --font-size-m: 16px;
    --font-size-xl: 22px;
    --font-size-xxl: 24px;
}
.checkout-container {
    padding: 24px;
    border-radius: 2px;

    max-width: 800px;
    width: 100%;
    text-align: center;
}

.form-section {
    margin-bottom: 30px;
    padding: 20px;
    background: white;
    border-radius: 2px;
}


.order-summary-section {
    margin-bottom: 30px;
    padding: 20px;
    background: var(--white);
    border-radius: 2px;
}

.form-group {
    margin-bottom: 15px;
}

.form-group label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
}

.form-group input,
.form-group select {
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 2px;
}

.form-row {
    display: flex;
    gap: 15px;
}

.form-row .form-group {
    flex: 1;
}

.payment-option {
    margin-bottom: 10px;
}

.order-summary {

    padding: 24px;
    border-radius: 2px;
    font-size: var(--font-size-s); 
    max-width: 800px;
    width: 100%;
    text-align: left;
}


.shipping-info {

    padding: 24px;
    border-radius: 2px;
    font-size: var(--font-size-s); 
    max-width: 800px;
    width: 100%;
    text-align: left;
}