/* ========================================
   CHECKOUT / CART CUSTOM STYLES
   Based on Figma Design
   ======================================== */

/* ========================================
   CSS VARIABLES
   ======================================== */
:root {
    --checkout-bg: #FFFFFF;
    --checkout-border: #B2B2B2;
    --checkout-border-focus: var(--color-brand-one-8-base, #E4FD71);
    --checkout-hover-bg: var(--color-brand-two-11, #F8F5F2);
    --checkout-radius: var(--radius-x-small, 4px);
    --checkout-text-primary: #000000;
    --checkout-text-secondary: #595959;
    --checkout-radio-bg: var(--color-brand-one-8-base, #E4FD71);
    --checkout-radio-border: var(--color-brand-one-7, #C7E068);
    --checkout-radio-dot: #183030;
}

/* ========================================
   CART PAGE STYLES
   ======================================== */

/* Cart container */
.cart-page,
.checkout-page,
#cart,
#module-supercheckout-supercheckout {
    font-family: var(--font-family-family-primary, Sora), sans-serif;
}

/* ========================================
   FORM INPUTS - SELECT/DROPDOWN
   ======================================== */
.checkout-page select,
.cart-page select,
#cart select,
.opc-container select,
#supercheckout-fieldset select {
    display: block;
    width: 100%;
    padding: 12px 40px 12px 16px;
    background-color: var(--checkout-bg);
    border: 1px solid var(--checkout-border);
    border-radius: var(--checkout-radius);
    font-family: var(--font-family-family-primary, Sora), sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    color: var(--checkout-text-primary);
    cursor: pointer;
    transition: all 0.2s ease;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 6L8 10L12 6' stroke='%23595959' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
}

.checkout-page select:hover,
.cart-page select:hover,
#cart select:hover,
.opc-container select:hover,
#supercheckout-fieldset select:hover {
    background-color: var(--checkout-hover-bg);
}

.checkout-page select:focus,
.cart-page select:focus,
#cart select:focus,
.opc-container select:focus,
#supercheckout-fieldset select:focus {
    border-color: var(--checkout-border-focus);
    outline: none;
    box-shadow: none;
    background-color: var(--checkout-bg);
}

/* ========================================
   TEXT INPUTS
   ======================================== */
.checkout-page input[type="text"],
.checkout-page input[type="email"],
.checkout-page input[type="password"],
.checkout-page input[type="tel"],
.checkout-page input[type="number"],
.checkout-page textarea,
.cart-page input[type="text"],
.cart-page input[type="email"],
.cart-page input[type="password"],
.cart-page input[type="tel"],
.cart-page input[type="number"],
.cart-page textarea,
.opc-container input[type="text"],
.opc-container input[type="email"],
.opc-container input[type="password"],
.opc-container input[type="tel"],
.opc-container input[type="number"],
.opc-container textarea,
#supercheckout-fieldset input[type="text"],
#supercheckout-fieldset input[type="email"],
#supercheckout-fieldset input[type="password"],
#supercheckout-fieldset input[type="tel"],
#supercheckout-fieldset input[type="number"],
#supercheckout-fieldset textarea {
    display: block;
    width: 100%;
    padding: 12px 16px;
    background-color: var(--checkout-bg);
    border: 1px solid var(--checkout-border);
    border-radius: var(--checkout-radius);
    font-family: var(--font-family-family-primary, Sora), sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    color: var(--checkout-text-primary);
    transition: all 0.2s ease;
    box-sizing: border-box;
}

.checkout-page input:hover,
.checkout-page textarea:hover,
.cart-page input:hover,
.cart-page textarea:hover,
.opc-container input:hover,
.opc-container textarea:hover,
#supercheckout-fieldset input:hover,
#supercheckout-fieldset textarea:hover {
    background-color: var(--checkout-hover-bg);
}

.checkout-page input:focus,
.checkout-page textarea:focus,
.cart-page input:focus,
.cart-page textarea:focus,
.opc-container input:focus,
.opc-container textarea:focus,
#supercheckout-fieldset input:focus,
#supercheckout-fieldset textarea:focus {
    border-color: var(--checkout-border-focus);
    outline: none;
    box-shadow: none;
    background-color: var(--checkout-bg);
}

/* ========================================
   RADIO BUTTONS - Custom Style
   ======================================== */
.checkout-page .radio-inline,
.checkout-page .radio,
.cart-page .radio-inline,
.cart-page .radio,
.checkout-step .delivery-option,
.checkout-step .payment-option {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px;
    margin-bottom: 8px;
    background-color: var(--checkout-bg);
    border: 1px solid var(--checkout-border);
    border-radius: var(--checkout-radius);
    cursor: pointer;
    transition: all 0.2s ease;
}

.checkout-page .radio-inline:hover,
.checkout-page .radio:hover,
.cart-page .radio-inline:hover,
.cart-page .radio:hover,
.checkout-step .delivery-option:hover,
.checkout-step .payment-option:hover {
    background-color: var(--checkout-hover-bg);
}

.checkout-step .delivery-option.selected,
.checkout-step .payment-option.selected,
.checkout-step .delivery-option:has(input:checked),
.checkout-step .payment-option:has(input:checked) {
    background-color: var(--checkout-hover-bg);
    border-color: var(--checkout-border-focus);
}

/* Hide native radio button */
.checkout-page input[type="radio"],
.cart-page input[type="radio"],
.checkout-step .delivery-option input[type="radio"],
.checkout-step .payment-option input[type="radio"] {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    width: 20px;
    height: 20px;
}

/* Custom radio circle */
.checkout-step .custom-radio,
.checkout-page .custom-radio {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    min-width: 20px;
    background: var(--checkout-bg);
    border: 1px solid var(--checkout-border);
    border-radius: 50%;
    transition: all 0.15s ease;
}

.checkout-step input[type="radio"]:checked + label .custom-radio,
.checkout-step input[type="radio"]:checked ~ .custom-radio,
.checkout-step .delivery-option:has(input:checked) .custom-radio,
.checkout-step .payment-option:has(input:checked) .custom-radio {
    background-color: var(--checkout-radio-bg);
    border-color: var(--checkout-radio-border);
}

.checkout-step .custom-radio::after {
    content: '';
    display: block;
    width: 8px;
    height: 8px;
    background: var(--checkout-radio-dot);
    border-radius: 50%;
    opacity: 0;
    transform: scale(0);
    transition: all 0.15s ease;
}

.checkout-step input[type="radio"]:checked + label .custom-radio::after,
.checkout-step input[type="radio"]:checked ~ .custom-radio::after,
.checkout-step .delivery-option:has(input:checked) .custom-radio::after,
.checkout-step .payment-option:has(input:checked) .custom-radio::after {
    opacity: 1;
    transform: scale(1);
}

/* ========================================
   CHECKBOXES - Custom Style
   ======================================== */
.checkout-page .checkbox,
.cart-page .checkbox,
.checkout-step .custom-checkbox {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
}

/* Hide native checkbox */
.checkout-page input[type="checkbox"],
.cart-page input[type="checkbox"],
.checkout-step input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    width: 20px;
    height: 20px;
}

/* Custom checkbox box */
.checkout-step .checkbox-box,
.checkout-page .checkbox-box {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    min-width: 20px;
    background: var(--checkout-bg);
    border: 1px solid var(--checkout-border);
    border-radius: var(--checkout-radius);
    transition: all 0.15s ease;
}

.checkout-step input[type="checkbox"]:checked + label .checkbox-box,
.checkout-step input[type="checkbox"]:checked ~ .checkbox-box {
    background-color: var(--checkout-radio-bg);
    border-color: var(--checkout-radio-border);
}

.checkout-step .checkbox-box svg,
.checkout-page .checkbox-box svg {
    opacity: 0;
    transform: scale(0);
    transition: all 0.15s ease;
}

.checkout-step input[type="checkbox"]:checked + label .checkbox-box svg,
.checkout-step input[type="checkbox"]:checked ~ .checkbox-box svg {
    opacity: 1;
    transform: scale(1);
}

/* ========================================
   SHIPPING/PAYMENT METHOD LIST
   ======================================== */
.checkout-step .delivery-options,
.checkout-step .payment-options {
    list-style: none;
    padding: 0;
    margin: 0;
}

.checkout-step .delivery-options > li,
.checkout-step .payment-options > li {
    margin-bottom: 8px;
}

.checkout-step .delivery-option-content,
.checkout-step .payment-option-content {
    display: flex;
    align-items: center;
    flex: 1;
    gap: 12px;
}

.checkout-step .carrier-logo img,
.checkout-step .payment-logo img {
    max-width: 48px;
    max-height: 32px;
    object-fit: contain;
}

.checkout-step .carrier-name,
.checkout-step .payment-name {
    font-family: var(--font-family-family-primary, Sora), sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: var(--checkout-text-primary);
}

.checkout-step .carrier-price {
    margin-left: auto;
    font-family: var(--font-family-family-primary, Sora), sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: var(--checkout-text-primary);
}

/* ========================================
   BUTTONS
   ======================================== */
.checkout-page .btn-primary,
.cart-page .btn-primary,
#cart .btn-primary,
.checkout-step .continue-button,
#payment-confirmation button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 16px 24px;
    border-radius: var(--checkout-radius);
    font-family: var(--font-family-family-primary, Sora), sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s ease;
    border: 1px solid var(--color-brand-one-10, #F2FEBD);
    background-color: var(--color-brand-one-8-base, #E4FD71);
    color: #000000;
    box-shadow: 0 0 44px 0 rgba(228, 253, 113, 0.30);
}

.checkout-page .btn-primary:hover,
.cart-page .btn-primary:hover,
#cart .btn-primary:hover,
.checkout-step .continue-button:hover,
#payment-confirmation button:hover {
    background-color: var(--color-brand-one-9, #EBFE97);
    border-color: var(--color-brand-one-7, #C7E068);
    box-shadow: 0 0 60px 0 rgba(228, 253, 113, 0.40);
}

/* Secondary Button */
.checkout-page .btn-secondary,
.cart-page .btn-secondary,
.checkout-page .btn-outline,
.cart-page .btn-outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 16px 24px;
    border-radius: var(--checkout-radius);
    font-family: var(--font-family-family-primary, Sora), sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s ease;
    border: 1px solid var(--background-color-brand-1-dark, #183030);
    background-color: transparent;
    color: #000000;
}

.checkout-page .btn-secondary:hover,
.cart-page .btn-secondary:hover,
.checkout-page .btn-outline:hover,
.cart-page .btn-outline:hover {
    background-color: rgba(24, 48, 48, 0.12);
}

/* ========================================
   CART PROGRESS BAR
   ======================================== */
.cart-progress-bar {
    margin-bottom: 32px;
}

.cart-progress-steps {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 32px;
}

.cart-progress-step {
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: var(--font-family-family-primary, Sora), sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: var(--checkout-text-secondary);
}

.cart-progress-step.active {
    font-weight: 600;
    color: var(--checkout-text-primary);
}

.cart-progress-step .step-number {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: transparent;
    font-size: 14px;
    font-weight: 600;
}

.cart-progress-step.active .step-number {
    color: var(--text-color-base-primary, #000);
    font-family: var(--font-family-family-primary, Sora);
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 24px;
}

/* ========================================
   CHECKOUT STEP HEADERS
   ======================================== */
.checkout-step .step-title,
.checkout-step h2 {
    font-family: var(--font-family-family-primary, Sora), sans-serif;
    font-size: 18px;
    font-weight: 600;
    line-height: 24px;
    color: var(--checkout-text-primary);
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid #E5E5E5;
}

/* ========================================
   CART SUMMARY SIDEBAR
   ======================================== */
.cart-grid-right .cart-summary,
.cart-grid-right .checkout-summary {
    background-color: var(--checkout-bg);
    border: 1px solid #E5E5E5;
    border-radius: var(--checkout-radius);
    padding: 24px;
}

.cart-summary h2,
.checkout-summary h2 {
    font-family: var(--font-family-family-primary, Sora), sans-serif;
    font-size: 18px;
    font-weight: 600;
    line-height: 24px;
    color: var(--checkout-text-primary);
    margin-bottom: 16px;
}

.cart-summary .cart-summary-line {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    font-family: var(--font-family-family-primary, Sora), sans-serif;
    font-size: 14px;
    color: var(--checkout-text-primary);
}

.cart-summary .cart-summary-line.cart-total {
    font-weight: 600;
    font-size: 16px;
    border-top: 1px solid #E5E5E5;
    padding-top: 16px;
    margin-top: 8px;
}

/* ========================================
   QUANTITY SELECTOR
   ======================================== */
.cart-line-product-quantity,
.cart-item .qty-input,
.quantity-selector {
    display: flex;
    align-items: center;
    border: 1px solid var(--checkout-border);
    border-radius: var(--checkout-radius);
    overflow: hidden;
}

.cart-line-product-quantity input,
.quantity-selector input {
    width: 50px;
    text-align: center;
    border: none !important;
    background: var(--checkout-bg) !important;
    font-family: var(--font-family-family-primary, Sora), sans-serif;
    font-size: 14px;
    padding: 8px !important;
}

.cart-line-product-quantity .btn,
.quantity-selector .btn {
    border: none;
    background: var(--checkout-bg);
    padding: 8px 12px;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.cart-line-product-quantity .btn:hover,
.quantity-selector .btn:hover {
    background: var(--checkout-hover-bg);
}

/* ========================================
   VOUCHER/COUPON INPUT
   ======================================== */
.voucher-form,
.promo-code-form,
.discount-code {
    display: flex;
    align-items: stretch;
    border: 1px solid var(--checkout-border);
    border-radius: var(--checkout-radius);
    overflow: hidden;
}

.voucher-form input,
.promo-code-form input,
.discount-code input {
    flex: 1;
    border: none !important;
    padding: 12px 16px !important;
}

.voucher-form button,
.promo-code-form button,
.discount-code button {
    border: none;
    border-left: 1px solid var(--checkout-border);
    background: var(--checkout-bg);
    padding: 12px 24px;
    cursor: pointer;
    font-family: var(--font-family-family-primary, Sora), sans-serif;
    font-size: 14px;
    transition: background-color 0.15s ease;
}

.voucher-form button:hover,
.promo-code-form button:hover,
.discount-code button:hover {
    background: var(--checkout-hover-bg);
}

/* ========================================
   REMOVE BUTTON
   ======================================== */
.cart-line-product-actions .remove-from-cart,
.cart-item .delete-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 1px solid var(--checkout-border);
    border-radius: 50%;
    background: var(--checkout-bg);
    cursor: pointer;
    transition: all 0.15s ease;
}

.cart-line-product-actions .remove-from-cart:hover,
.cart-item .delete-btn:hover {
    background: var(--checkout-hover-bg);
    border-color: var(--checkout-text-secondary);
}

/* ========================================
   TABS STYLE (Login/Register/Guest)
   ======================================== */
.checkout-step .nav-tabs,
.login-form .nav-tabs {
    display: flex;
    border: none;
    gap: 0;
    margin-bottom: 16px;
}

.checkout-step .nav-tabs .nav-item,
.login-form .nav-tabs .nav-item {
    flex: 1;
}

.checkout-step .nav-tabs .nav-link,
.login-form .nav-tabs .nav-link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 16px;
    border: 1px solid var(--checkout-border);
    background: var(--checkout-bg);
    font-family: var(--font-family-family-primary, Sora), sans-serif;
    font-size: 14px;
    color: var(--checkout-text-primary);
    cursor: pointer;
    transition: all 0.15s ease;
}

.checkout-step .nav-tabs .nav-link:first-child,
.login-form .nav-tabs .nav-link:first-child {
    border-radius: var(--checkout-radius) 0 0 var(--checkout-radius);
}

.checkout-step .nav-tabs .nav-link:last-child,
.login-form .nav-tabs .nav-link:last-child {
    border-radius: 0 var(--checkout-radius) var(--checkout-radius) 0;
}

.checkout-step .nav-tabs .nav-link.active,
.login-form .nav-tabs .nav-link.active {
    background: var(--checkout-hover-bg);
    border-color: var(--checkout-border-focus);
}

/* ========================================
   MOBILE RESPONSIVE
   ======================================== */
@media (max-width: 991px) {
    .cart-progress-steps {
        flex-wrap: wrap;
        gap: 16px;
    }
    
    .cart-progress-step {
        font-size: 12px;
    }
    
    .cart-progress-step .step-number {
        width: 28px;
        height: 28px;
        font-size: 12px;
    }
}

@media (max-width: 767px) {
    .checkout-page select,
    .checkout-page input,
    .checkout-page textarea,
    .cart-page select,
    .cart-page input,
    .cart-page textarea {
        font-size: 16px; /* Prevent zoom on iOS */
        padding: 12px 16px;
    }
    
    .checkout-page .btn-primary,
    .cart-page .btn-primary {
        width: 100%;
        padding: 16px 24px;
    }
    
    .checkout-step .delivery-option,
    .checkout-step .payment-option {
        padding: 12px;
    }
    
    .cart-progress-steps {
        gap: 8px;
    }
    
    .cart-progress-step .step-label {
        display: none;
    }
}