/* ============================================================
   CHECKOUT STYLES
   ============================================================ */

.m-checkout-page {
    background: #F4F6FB;
    min-height: 100vh;
    padding-bottom: 90px;
}

/* TOP BAR */
.m-checkout-top-bar {
    height: 52px;
    background: white;
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
    border-bottom: 1px solid #F3F4F6;
}
.m-checkout-top-bar .left-section {
    display: flex;
    align-items: center;
    gap: 8px;
}
.m-checkout-top-bar .back-btn {
    color: var(--m-primary-purple);
    display: flex;
    align-items: center;
    text-decoration: none;
}
.m-checkout-top-bar .back-btn svg {
    width: 22px;
    height: 22px;
}
.m-checkout-top-bar .title {
    font-size: 17px;
    font-weight: 700;
    color: var(--m-primary-purple);
}
.m-checkout-top-bar .right-section svg {
    width: 18px;
    height: 18px;
}

/* PROGRESS STEPPER */
.m-progress-stepper {
    padding: 16px 20px;
    background: white;
    margin-top: 52px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}
.m-progress-stepper .step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    width: 40px;
    z-index: 2;
}
.m-progress-stepper .circle {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
}
.m-progress-stepper .label {
    font-size: 10px;
    font-weight: 600;
    white-space: nowrap;
}

/* Stepper States */
.m-progress-stepper .step.completed .circle {
    background: var(--m-primary-purple);
}
.m-progress-stepper .step.completed .circle svg {
    width: 14px;
    height: 14px;
}
.m-progress-stepper .step.completed .label {
    color: var(--m-primary-purple);
}

.m-progress-stepper .step.active .circle {
    background: white;
    border: 2.5px solid var(--m-primary-purple);
    color: var(--m-primary-purple);
    font-weight: 700;
}
.m-progress-stepper .step.active .label {
    color: var(--m-primary-purple);
}

.m-progress-stepper .step.inactive .circle {
    background: #E5E7EB;
    color: #9CA3AF;
    font-weight: 600;
}
.m-progress-stepper .step.inactive .label {
    color: #9CA3AF;
}

.m-progress-stepper .line {
    flex: 1;
    height: 2px;
    margin-top: 14px;
    z-index: 1;
}
.m-progress-stepper .completed-line {
    background: var(--m-primary-purple);
}
.m-progress-stepper .pending-line {
    background: #E5E7EB;
}

/* BODY */
.m-checkout-body {
    padding-top: 12px;
}

/* CARDS COMMON */
.m-checkout-card {
    margin: 0 16px 12px;
    background: white;
    border-radius: 16px;
    padding: 16px;
}
.m-checkout-card .header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}
.m-checkout-card .header-row .left {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 700;
    color: #111827;
}
.m-checkout-card .header-row .left svg {
    width: 16px;
    height: 16px;
}
.m-checkout-card .header-row .right {
    color: var(--m-primary-purple);
    font-size: 13px;
    font-weight: 600;
}

/* RADIO STYLES */
.radio-circle {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid #E5E7EB;
    background: white;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.radio-circle .dot {
    width: 10px;
    height: 10px;
    background: var(--m-primary-purple);
    border-radius: 50%;
}

/* ADDRESS CARDS */
.address-card {
    border: 1.5px solid #E5E7EB;
    border-radius: 12px;
    padding: 12px 14px;
    margin-bottom: 8px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
}
.address-card.selected {
    border-color: var(--m-primary-purple);
    background: #FDFBFF;
}
.address-card.selected .radio-circle {
    border-color: var(--m-primary-purple);
}
.address-card .info-side {
    flex: 1;
}
.address-card .badge-row {
    display: flex;
    align-items: center;
    gap: 8px;
}
.address-card .type-badge {
    background: #EDE9FE;
    color: var(--m-primary-purple);
    border-radius: 6px;
    padding: 2px 8px;
    font-size: 10px;
    font-weight: 700;
}
.address-card .name {
    font-size: 13px;
    font-weight: 700;
    color: #111827;
}
.address-card .address-lines {
    font-size: 12px;
    color: #6B7280;
    line-height: 1.4;
    margin-top: 4px;
}
.address-card .edit-link {
    color: var(--m-primary-purple);
    font-size: 12px;
    font-weight: 600;
    margin-top: 6px;
}
.address-card .radio-side {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}
.address-card .deliver-here {
    color: var(--m-primary-purple);
    font-size: 12px;
    font-weight: 600;
    margin-top: 6px;
}

/* DELIVERY SPEED */
.speed-option {
    border: 1.5px solid #E5E7EB;
    border-radius: 12px;
    padding: 12px 14px;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    position: relative;
    transition: all 0.2s ease;
}
.speed-option.selected {
    border-color: var(--m-primary-purple);
    background: #FDFBFF;
}
.speed-option.selected .radio-circle {
    border-color: var(--m-primary-purple);
}
.speed-option .content {
    flex: 1;
}
.speed-option .opt-name {
    font-size: 14px;
    font-weight: 700;
    color: #111827;
}
.speed-option .opt-sub {
    font-size: 12px;
    color: #6B7280;
    margin-top: 2px;
}
.speed-option .right-price.free {
    color: #10B981;
    font-weight: 700;
    font-size: 14px;
}
.speed-option .right-price.badge {
    background: var(--m-primary-purple);
    color: white;
    border-radius: 6px;
    padding: 4px 8px;
    font-size: 12px;
    font-weight: 700;
}
.speed-option .fastest-pill {
    position: absolute;
    top: -1px;
    right: -1px;
    background: #F97316;
    color: white;
    font-size: 9px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 0 12px 0 8px;
}

/* PAYMENT METHOD */
.payment-sub {
    font-size: 12px;
    color: #9CA3AF;
    line-height: 1.4;
}

/* ORDER SUMMARY */
.m-checkout-card .summary-heading {
    font-size: 16px;
    font-weight: 800;
    color: #111827;
    margin-bottom: 12px;
}
.product-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
}
.product-row .prod-left {
    font-size: 12px;
    color: #374151;
    font-weight: 600;
}
.product-row .prod-right {
    font-size: 13px;
    font-weight: 700;
    color: #111827;
}
.m-divider {
    height: 1px;
    background: #F3F4F6;
    margin: 12px 0;
}
.calc-row {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    color: #4B5563;
    margin-bottom: 6px;
}
.calc-row .discount-val {
    color: #10B981;
}
.to-pay-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.to-pay-row span:first-child {
    font-size: 16px;
    font-weight: 800;
    color: #111827;
}
.to-pay-row span:last-child {
    font-size: 18px;
    font-weight: 800;
    color: #111827;
}
.savings-banner {
    background: #F0FDF4;
    border-radius: 8px;
    color: #10B981;
    font-size: 12px;
    font-weight: 600;
    padding: 8px 12px;
    margin-top: 12px;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* BOTTOM BUTTON */
.m-checkout-bottom-bar {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    background: white;
    padding: 12px 16px;
    border-top: 1px solid #F3F4F6;
    z-index: 100;
    padding-bottom: calc(12px + env(safe-area-inset-bottom));
}
.m-checkout-bottom-bar .btn-proceed {
    width: 100%;
    height: 54px;
    border-radius: 14px;
    background: var(--m-primary-purple);
    color: white;
    font-size: 16px;
    font-weight: 700;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
}
.m-checkout-bottom-bar .btn-proceed svg {
    width: 20px;
    height: 20px;
}
.m-checkout-bottom-bar .secure-text {
    font-size: 11px;
    color: #9CA3AF;
    text-align: center;
    margin-top: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}
.m-checkout-bottom-bar .secure-text svg {
    width: 14px;
    height: 14px;
}