:root {
    --primary: #0188ba;

    --primary-dark: #014476;

    --primary-soft: #94cadc;

    --primary-light: #d1e5ec;

    --white: #fff;

    --black: #000;

    --text: #383838;
}

body {
    font-family: "DM Sans", sans-serif;

    background: #f8fcfd;

    color: var(--text);
}

.checkout-header {
    background: #fff;

    border-bottom: 1px solid rgba(1, 136, 186, 0.08);

    padding: 18px 0;
}

.checkout-page {
    padding: 60px 0;
}

.checkout-card {
    background: #fff;

    border: 1px solid rgba(1, 136, 186, 0.08);

    border-radius: 24px;

    padding: 32px;

    box-shadow: 0 20px 40px rgba(1, 68, 118, 0.06);
}

.checkout-card h3 {
    color: var(--primary-dark);

    margin-bottom: 24px;
}

.form-control,
.form-select {
    border: 1px solid #dbe7ec;

    border-radius: 14px;

    padding: 14px 16px;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--primary);

    box-shadow: 0 0 0 4px rgba(1, 136, 186, 0.12);
}

.payment-head {
    display: flex;

    justify-content: space-between;

    align-items: center;
}

label {
    margin-bottom: 0.5rem;
}

.card-icons img {
    height: 28px;
}

.order-summary {
    background: #fff;

    border-radius: 24px;

    padding: 32px;

    box-shadow: 0 20px 40px rgba(1, 68, 118, 0.08);

    top: 120px;

    z-index: 1;
}

.summary-item {
    display: flex;

    justify-content: space-between;

    margin-bottom: 18px;
}

.summary-total {
    display: flex;

    justify-content: space-between;

    font-size: 20px;

    color: var(--primary-dark);
}

.checkout-btn {
    width: 100%;

    padding: 16px;

    border: none;

    border-radius: 16px;

    background: linear-gradient(135deg, var(--primary), #40a3c6);

    color: #fff;

    font-weight: 700;
}

.checkout-btn:hover {
    background: linear-gradient(135deg, var(--primary-dark), var(--primary));
}

@media (max-width: 991px) {
    .order-summary {
        position: static;

        margin-top: 30px;
    }

    .checkout-card {
        padding: 24px;
    }
}