/* ===== CART PAGE WRAPPER ===== */
.cart-page {
    width: 100%;
    padding: 40px 0;
}

/* MAIN CONTAINER */
.cart-container {
    display: flex;
    align-items: flex-start; /* IMPORTANT for sticky */
    gap: 40px;
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 24px;
}

/* ===== LEFT SECTION ===== */
.cart-left {
    flex: 3;
    background: #ffffff; /* changed from white to light gray */
    padding: 25px;
    border-radius: 8px; /* keep a little rounding if you want, or set to 0 */
}

.cart-heading {
    font-size: 28px;
    font-weight: 700;
}

.cart-sub {
    color: #666;
    margin-bottom: 20px;
}

.cart-item {
    display: flex;
    gap: 20px;
    padding: 20px 0;
    border-top: 1px solid #ddd;
    align-items: flex-start;
}

.cart-img img {
    width: 120px;
    height: 90px;
    object-fit: cover;
    border-radius: 6px;
}

.cart-info {
    flex: 1;
}

.cart-info h3 {
    font-size: 18px;
    margin-bottom: 6px;
}

.cart-info p {
    font-size: 14px;
    color: #555;
}

.cart-actions {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-top: 12px;
}

.qty-box {
    display: flex;
    align-items: center;
    border: 1px solid #ccc;
    border-radius: 4px;
}

.qty-box button {
    border: none;
    background: none;
    padding: 5px 10px;
    cursor: pointer;
}

.qty-box span {
    padding: 0 10px;
}

.cart-actions a {
    font-size: 14px;
    color: #007bff;
    text-decoration: none;
}

.cart-price {
    font-size: 18px;
    font-weight: 600;
    white-space: nowrap;
}

/* ===== RIGHT SECTION ===== */
.cart-right {
    flex: 1;
    margin-top: 30px;
}

.summary-box {
    background: #2d2a6e; /* purple remains */
    color: #fff;
    padding: 30px;
    border-radius: 5%; /* removed the curve to make rectangle */
    text-align: center;

    position: sticky;
    top: 300px;
    margin-top: 30px;   
}


.summary-box h2 {
    font-size: 34px;
    margin: 20px 0;
}

.checkout-btn {
    display: block;
    background: #00a3e0;
    color: #fff;
    padding: 14px;
    border-radius: 6px;
    text-decoration: none;
    margin: 20px auto; /* top-bottom 20px, left-right auto = centers */
    font-weight: 600;
    font-size: 18px;
    width: 200px;
}

.coupon-btn {
    background: #00a3e0;
    border: none;
    color: #fff;
    padding: 12px;
    width: 100%;
    border-radius: 6px;
    cursor: pointer;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 992px) {
    .cart-container {
        flex-direction: column;
    }

    .summary-box {
        position: static; /* disable sticky on mobile */
        margin-top: 30px;
    }
}

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

.checkout-section {
    background: #ffffff;
    padding: 90px 0; /* ⬆️ increased top spacing */
}

.checkout-row {
    display: flex;
    align-items: flex-start;  /* makes left keep its height, right fits content */
    margin-top: 20px;
}

/* FORCE COLUMNS TO STRETCH */
.checkout-row > div {
    display: flex;
}

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

.checkout-left {
    background: #2b2a6f;
    color: #fff;
    padding: 40px 40px;   /* increase padding for bigger rectangle */
    border-radius: 0;
    box-shadow: none;
    width: 100%;
    min-height: 500px;    /* optional: set minimum height */
}

.checkout-left h1 {
    font-size: 36px;
    margin-bottom: 28px;
}

.checkout-left h1 span {
    color: #00a8ff;
}

.section-label {
    font-size: 14px;
    opacity: 0.85;
    margin-bottom: 18px;
    display: block;
}

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

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

/* ===== INPUT BOX ===== */

.input-box {
    margin-bottom: 18px;
}

.input-box label {
    font-size: 11px;
    margin-bottom: 4px;
    display: block;
}

/* 🔥 FINAL INPUT DIMENSIONS — SAME EVERYWHERE */
.input-box input {
    width: 160px;
    height: 30px;
    padding: 0 8px;

    background: #f2f2f2;
    color: #000;

    border: 1px solid #aaa;
    border-radius: 0 !important;

    font-size: 11px;
    line-height: 30px;

    outline: none;
    box-shadow: none;

    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}

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

.checkout-left h3 {
    margin: 24px 0 10px;
    font-size: 18px;
}

/* 🔥 RADIO — EXACT SAME SIZE AS INPUT */
.radio-box label {
    display: flex;
    align-items: center;
    gap: 8px;

    width: 310px;          /* same as input */
    height: 60px;          /* same as input */
    padding: 0 8px;

    background: #f2f2f2;   /* match input box */
    color: #000;

    border: 1px solid #aaa;
    border-radius: 0;

    font-size: 23px;
    line-height: 30px;      /* vertically center text */
    cursor: pointer;
    box-sizing: border-box;
}

/* style the actual radio button */
.radio-box input[type="radio"] {
    width: 16px;
    height: 16px;
    accent-color: #0094d9;   /* match your button color */
    margin: 0;               /* remove default spacing */
}


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

.checkout-summary {
    background: #f2f2f2;
    padding: 30px 24px;
    border-radius: 0;
    box-shadow: none;
    width: 100%;
    text-align: center;
    height: 370px;
    margin-top: 90px; /* Add this line to move the box down */
}



.checkout-summary h2 {
    font-size: 24px;
    margin-bottom: 24px;
}


/* 🔥 CENTERED CONTENT */
.summary-row {
    display: flex;
    justify-content: center;
    gap: 20px;

    font-size: 15px;
    margin-bottom: 12px;
}

.summary-row.discount {
    color: #007bff;
}

.checkout-summary hr {
    margin: 18px 0;
    border: none;           /* Remove default border */
    border-top: 1px solid black; /* Black horizontal line */
}


.summary-row.total {
    font-size: 18px;
    font-weight: 700;
}

.proceed-btn {
    width: 250px;  /* set desired width */
    height: 60px;
    margin-top: 22px;

    background: #0094d9;
    border: none;
    color: #fff;

    font-size: 20px;
    font-weight: 500;
    border-radius: 2.5%;

    cursor: pointer;
}



/* ===== MOBILE ===== */
@media (max-width: 768px) {
    .form-row {
        flex-direction: column;
    }

    .checkout-row {
        flex-direction: column;
    }

    .checkout-summary {
        margin-top: 30px;
    }
}

/* Add margin below the Order Summary title */
.order-summary-title {
    margin-bottom: 20px; /* adjust this value as needed */
}

/* Hide default radio */
.custom-radio input[type="radio"] {
    display: none;
}

/* Outer circle */
.custom-radio .radio-mark {
    display: inline-block;
    width: 24px;
    height: 24px;
    border: 2px solid #ccc; /* default grey border */
    border-radius: 50%;
    margin-right: 10px;
    vertical-align: middle;
    position: relative;
    transition: all 0.3s ease;
}

/* Inner white dot appears when checked */
.custom-radio input[type="radio"]:checked + .radio-mark {
    border-color: #1E90FF;      /* blue border */
    background-color: #1E90FF;  /* blue fill */
}

.custom-radio input[type="radio"]:checked + .radio-mark::after {
    content: "";
    width: 12px;
    height: 12px;
    background-color: white;   /* inner dot */
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* Hover effect (optional) */
.custom-radio:hover .radio-mark {
    border-color: #888;
}

/* Make the whole label clickable */
.custom-radio {
    cursor: pointer;          /* ensures pointer shows */
    display: flex;            /* keep circle and text in line */
    align-items: center;      /* vertically center text with circle */
    gap: 10px;                /* space between circle and text */
    user-select: none;        /* optional: prevent text selection when clicking */
}

/* ===== SUCCESS & FAILURE BUTTONS ===== */
.checkout-status-btns {
    display: flex;              /* align buttons in a row */
    justify-content: center;    /* center them horizontally */
    gap: 20px;                  /* space between buttons */
    margin-top: 20px;           /* space below Checkout button */
}

.status-btn {
    flex: 0 0 100px;            /* fixed width like Checkout */
    padding: 10px 0;            /* vertical padding same as Checkout */
    font-size: 18px;
    font-weight: 600;
    border-radius: 6px;
    border: none;
    cursor: pointer;
    color: #fff;
    transition: 0.2s;
}

/* Success button - blue like Checkout */
.success-btn {
    background-color: #00a3e0;  /* same as Checkout */
}

.success-btn:hover {
    background-color: #008ecf;  /* slightly darker on hover */
}

/* Failure button - slightly darker blue to differentiate */
.failure-btn {
    background-color: #007bb5;  /* darker blue */
}

.failure-btn:hover {
    background-color: #006999;  /* hover darker */
}

/* Disabled state - match Checkout button style */
.status-btn:disabled {
    background-color: #a0cce0;
    cursor: not-allowed;
}