/* ========================================
MODSHOP - Checkout Page Complete Styles
File: assets/css/checkout.css
Version: 1.0.0
Fix: Alignment & Layout Issues
======================================== */

/* ========================================
📦 CHECKOUT CONTAINER - FIX WIDTH
======================================== */
body {
    background: yellow !important;
}

.modshop-checkout-wrapper {
    width: 100% !important;
    max-width: 1400px !important;
    margin: 0 auto !important;
    padding: var(--spacing-xl) var(--spacing-md) !important;
    box-sizing: border-box !important;
}

.woocommerce-checkout .woocommerce {
    max-width: 100% !important;
    padding: 0 !important;
}

.woocommerce-checkout .entry-content {
    padding: 0 !important;
}

/* ========================================
📝 PAGE TITLE - CENTERED
======================================== */
.woocommerce-checkout h1,
.woocommerce-checkout .entry-title {
    text-align: center !important;
    font-size: 2.25rem !important;
    font-weight: 700 !important;
    color: var(--primary-color) !important;
    margin: 0 0 var(--spacing-xl) 0 !important;
    padding: var(--spacing-md) 0 !important;
    width: 100% !important;
}

/* ========================================
📐 TWO-COLUMN GRID LAYOUT - CRITICAL FIX
======================================== */
.modshop-checkout-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: var(--spacing-xl) !important;
    align-items: start !important;
    width: 100% !important;
    margin: 0 auto !important;
}

.modshop-checkout-column {
    width: 100% !important;
    min-width: 0 !important;
}

/* Left Column - Customer Details */
.modshop-checkout-details {
    width: 100% !important;
}

/* Right Column - Order Review */
.modshop-checkout-review {
    width: 100% !important;
}

/* ========================================
📋 CHECKOUT SECTIONS
======================================== */
.modshop-checkout-section {
    background: var(--background-color) !important;
    padding: var(--spacing-lg) !important;
    border-radius: 8px !important;
    border: 1px solid var(--border-color) !important;
    margin-bottom: var(--spacing-lg) !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.modshop-checkout-section h3 {
    font-size: 1.25rem !important;
    font-weight: 700 !important;
    color: var(--primary-color) !important;
    margin: 0 0 var(--spacing-md) 0 !important;
    padding-bottom: var(--spacing-sm) !important;
    border-bottom: 2px solid var(--border-color) !important;
    text-align: left !important;
    width: 100% !important;
}

/* ========================================
📝 FORM FIELDS - FIX ALIGNMENT
======================================== */
.modshop-checkout-fields {
    width: 100% !important;
}

.woocommerce-checkout .form-row {
    margin-bottom: var(--spacing-md) !important;
    padding: 0 !important;
    width: 100% !important;
    float: none !important;
    clear: both !important;
}

/* Two-column form fields (First/Last name) */
.woocommerce-checkout .form-row-first,
.woocommerce-checkout .form-row-last {
    width: 48% !important;
    float: left !important;
    clear: none !important;
}

.woocommerce-checkout .form-row-first {
    margin-right: 4% !important;
}

.woocommerce-checkout .form-row-last {
    margin-right: 0 !important;
}

.woocommerce-checkout .form-row-wide {
    width: 100% !important;
    float: none !important;
}

/* Labels - LEFT ALIGNED (not center) */
.woocommerce-checkout .form-row label {
    display: block !important;
    margin-bottom: var(--spacing-xs) !important;
    font-weight: 600 !important;
    color: var(--primary-color) !important;
    font-size: 0.9rem !important;
    line-height: 1.4 !important;
    text-align: left !important;
    width: 100% !important;
}

.woocommerce-checkout .form-row label .required {
    color: var(--accent-color) !important;
    font-weight: 700 !important;
    margin-left: 2px !important;
}

/* Input Wrapper */
.woocommerce-checkout .form-row .woocommerce-input-wrapper {
    width: 100% !important;
    display: block !important;
}

/* Input Fields - FULL WIDTH (not centered) */
.woocommerce-checkout .form-row input[type="text"],
.woocommerce-checkout .form-row input[type="email"],
.woocommerce-checkout .form-row input[type="tel"],
.woocommerce-checkout .form-row input[type="password"],
.woocommerce-checkout .form-row .input-text {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0.85rem 1rem !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 6px !important;
    font-family: var(--font-primary) !important;
    font-size: 0.95rem !important;
    background: var(--background-color) !important;
    color: var(--primary-color) !important;
    box-sizing: border-box !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
    margin: 0 !important;
    display: block !important;
    text-align: left !important;
}

.woocommerce-checkout .form-row input:focus {
    outline: none !important;
    border-color: var(--accent-color) !important;
    box-shadow: 0 0 0 3px rgba(231, 76, 60, 0.1) !important;
}

/* Select Dropdowns */
.woocommerce-checkout .form-row select,
.woocommerce-checkout .form-row .select2-container {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0.85rem 2.5rem 0.85rem 1rem !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 6px !important;
    font-family: var(--font-primary) !important;
    font-size: 0.95rem !important;
    background: var(--background-color) !important;
    color: var(--primary-color) !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    display: block !important;
    text-align: left !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666666' d='M6 8L1 3h10z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 1rem center !important;
    background-size: 12px !important;
    cursor: pointer !important;
}

.woocommerce-checkout .form-row select:focus {
    outline: none !important;
    border-color: var(--accent-color) !important;
    box-shadow: 0 0 0 3px rgba(231, 76, 60, 0.1) !important;
}

/* Textarea */
.woocommerce-checkout .form-row textarea {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0.85rem 1rem !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 6px !important;
    font-family: var(--font-primary) !important;
    font-size: 0.95rem !important;
    background: var(--background-color) !important;
    color: var(--primary-color) !important;
    box-sizing: border-box !important;
    min-height: 100px !important;
    resize: vertical !important;
    margin: 0 !important;
    display: block !important;
    text-align: left !important;
}

/* Clear floats */
.woocommerce-checkout .form-row::after {
    content: "" !important;
    display: table !important;
    clear: both !important;
}

/* ========================================
🚚 SHIPPING TOGGLE
======================================== */
.modshop-shipping-section h3 {
    margin-bottom: var(--spacing-sm) !important;
}

.woocommerce-checkout #ship-to-different-address-checkbox {
    width: 18px !important;
    height: 18px !important;
    margin: 0 !important;
    margin-right: var(--spacing-xs) !important;
    accent-color: var(--accent-color) !important;
    cursor: pointer !important;
}

.woocommerce-checkout #ship-to-different-address label {
    display: inline-flex !important;
    align-items: center !important;
    gap: var(--spacing-xs) !important;
    font-weight: 600 !important;
    color: var(--primary-color) !important;
    cursor: pointer !important;
    margin: 0 !important;
}

.shipping_address {
    margin-top: var(--spacing-md) !important;
    padding-top: var(--spacing-md) !important;
    border-top: 1px solid var(--border-color) !important;
}

/* ========================================
📋 ORDER REVIEW BOX - RIGHT COLUMN
======================================== */
.modshop-order-review-box {
    background: var(--background-color) !important;
    padding: var(--spacing-lg) !important;
    border-radius: 8px !important;
    border: 1px solid var(--border-color) !important;
    position: sticky !important;
    top: 100px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.modshop-order-review-box h3 {
    font-size: 1.25rem !important;
    font-weight: 700 !important;
    color: var(--primary-color) !important;
    margin: 0 0 var(--spacing-md) 0 !important;
    padding-bottom: var(--spacing-sm) !important;
    border-bottom: 2px solid var(--border-color) !important;
    text-align: left !important;
}

/* Order Review Table */
.woocommerce-checkout-review-order-table-wrapper {
    width: 100% !important;
    overflow-x: auto !important;
    margin-bottom: var(--spacing-lg) !important;
}

.woocommerce-checkout-review-order-table {
    width: 100% !important;
    border-collapse: collapse !important;
    margin: 0 !important;
    background: var(--background-color) !important;
}

.woocommerce-checkout-review-order-table th,
.woocommerce-checkout-review-order-table td {
    padding: var(--spacing-sm) 0 !important;
    border: none !important;
    border-bottom: 1px solid var(--border-color) !important;
    vertical-align: top !important;
    font-size: 0.95rem !important;
    text-align: left !important;
}

.woocommerce-checkout-review-order-table th {
    font-weight: 500 !important;
    color: var(--secondary-color) !important;
    width: 60% !important;
}

.woocommerce-checkout-review-order-table td {
    font-weight: 600 !important;
    color: var(--primary-color) !important;
    text-align: right !important;
}

.woocommerce-checkout-review-order-table tfoot th,
.woocommerce-checkout-review-order-table tfoot td {
    border-top: 2px solid var(--border-color) !important;
    border-bottom: none !important;
    padding-top: var(--spacing-md) !important;
    font-size: 1.15rem !important;
}

.woocommerce-checkout-review-order-table .order-total th,
.woocommerce-checkout-review-order-table .order-total td {
    font-size: 1.3rem !important;
    font-weight: 700 !important;
}

.woocommerce-checkout-review-order-table .order-total td {
    color: var(--accent-color) !important;
}

.product-quantity {
    font-weight: 400 !important;
    color: var(--secondary-color) !important;
    font-size: 0.9rem !important;
}

/* ========================================
💳 PAYMENT SECTION
======================================== */
.modshop-payment-section {
    width: 100% !important;
}

.woocommerce-checkout-payment {
    background: var(--light-gray) !important;
    padding: var(--spacing-lg) !important;
    border-radius: 8px !important;
    border: 1px solid var(--border-color) !important;
    margin-top: var(--spacing-lg) !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.woocommerce-checkout-payment h3 {
    font-size: 1.15rem !important;
    font-weight: 600 !important;
    color: var(--primary-color) !important;
    margin: 0 0 var(--spacing-md) 0 !important;
    padding-bottom: var(--spacing-sm) !important;
    border-bottom: 1px solid var(--border-color) !important;
    text-align: left !important;
}

/* Payment Methods */
.woocommerce-checkout-payment ul.payment_methods {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 0 var(--spacing-md) 0 !important;
    width: 100% !important;
}

.woocommerce-checkout-payment ul.payment_methods li {
    padding: var(--spacing-md) !important;
    margin: 0 !important;
    border-bottom: 1px solid var(--border-color) !important;
    background: var(--background-color) !important;
    border-radius: 6px !important;
    margin-bottom: var(--spacing-sm) !important;
    transition: background 0.2s ease !important;
    text-align: left !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.woocommerce-checkout-payment ul.payment_methods li:last-child {
    border-bottom: none !important;
    margin-bottom: 0 !important;
}

.woocommerce-checkout-payment ul.payment_methods li:hover {
    background: rgba(245, 245, 245, 0.8) !important;
}

.woocommerce-checkout-payment ul.payment_methods li input[type="radio"] {
    width: 18px !important;
    height: 18px !important;
    margin: 0 !important;
    margin-right: var(--spacing-sm) !important;
    accent-color: var(--accent-color) !important;
    cursor: pointer !important;
}

.woocommerce-checkout-payment ul.payment_methods li label {
    display: inline-flex !important;
    align-items: center !important;
    gap: var(--spacing-sm) !important;
    margin: 0 !important;
    padding: 0 !important;
    font-weight: 500 !important;
    color: var(--primary-color) !important;
    font-size: 0.95rem !important;
    cursor: pointer !important;
    width: auto !important;
}

.woocommerce-checkout-payment .payment_box {
    background: var(--background-color) !important;
    padding: var(--spacing-md) !important;
    border-radius: 6px !important;
    margin-top: var(--spacing-sm) !important;
    border: 1px solid var(--border-color) !important;
    font-size: 0.9rem !important;
    color: var(--secondary-color) !important;
    line-height: 1.6 !important;
    text-align: left !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.woocommerce-checkout-payment .payment_box p {
    margin: 0 !important;
}

/* ========================================
✅ PLACE ORDER BUTTON
======================================== */
.woocommerce-checkout .place-order {
    margin-top: var(--spacing-lg) !important;
    padding-top: var(--spacing-lg) !important;
    border-top: 1px solid var(--border-color) !important;
    text-align: center !important;
    width: 100% !important;
}

.woocommerce-checkout .place-order button[type="submit"],
.woocommerce-checkout .place-order input[type="submit"] {
    width: 100% !important;
    max-width: 500px !important;
    padding: 1.25rem 2rem !important;
    background: var(--accent-color) !important;
    color: white !important;
    border: none !important;
    border-radius: 6px !important;
    cursor: pointer !important;
    font-weight: 700 !important;
    font-size: 1.1rem !important;
    font-family: var(--font-primary) !important;
    transition: background 0.2s ease, transform 0.2s ease !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    margin: 0 auto !important;
    display: block !important;
}

.woocommerce-checkout .place-order button[type="submit"]:hover,
.woocommerce-checkout .place-order input[type="submit"]:hover {
    background: #c0392b !important;
    transform: translateY(-2px) !important;
}

.woocommerce-checkout .place-order button[type="submit"]:disabled,
.woocommerce-checkout .place-order input[type="submit"]:disabled {
    background: var(--secondary-color) !important;
    cursor: not-allowed !important;
    transform: none !important;
    opacity: 0.7 !important;
}

/* ========================================
📜 TERMS & CONDITIONS
======================================== */
.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper {
    margin-bottom: var(--spacing-md) !important;
    padding: var(--spacing-md) !important;
    background: var(--light-gray) !important;
    border-radius: 6px !important;
    border: 1px solid var(--border-color) !important;
    text-align: left !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper label {
    display: inline-flex !important;
    align-items: flex-start !important;
    gap: var(--spacing-sm) !important;
    font-weight: 500 !important;
    color: var(--primary-color) !important;
    font-size: 0.9rem !important;
    cursor: pointer !important;
}

.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper input[type="checkbox"] {
    width: 18px !important;
    height: 18px !important;
    margin: 0.25rem 0 0 0 !important;
    flex-shrink: 0 !important;
    accent-color: var(--accent-color) !important;
}

.woocommerce-checkout .woocommerce-terms-and-conditions-link {
    color: var(--accent-color) !important;
    text-decoration: none !important;
    font-weight: 500 !important;
}

.woocommerce-checkout .woocommerce-terms-and-conditions-link:hover {
    text-decoration: underline !important;
}

/* ========================================
🎫 COUPON TOGGLE
======================================== */
.woocommerce-checkout .woocommerce-form-coupon-toggle {
    margin-bottom: var(--spacing-lg) !important;
    text-align: left !important;
}

.woocommerce-checkout .woocommerce-info {
    padding: var(--spacing-md) var(--spacing-lg) !important;
    background: var(--light-gray) !important;
    border-radius: 6px !important;
    border-left: 4px solid var(--accent-color) !important;
    font-size: 0.95rem !important;
    display: block !important;
    text-align: left !important;
    margin: 0 0 var(--spacing-lg) 0 !important;
}

.woocommerce-checkout .woocommerce-info a {
    color: var(--accent-color) !important;
    text-decoration: none !important;
    font-weight: 500 !important;
}

.woocommerce-checkout .woocommerce-info a:hover {
    text-decoration: underline !important;
}

.woocommerce-checkout .checkout_coupon {
    background: var(--background-color) !important;
    padding: var(--spacing-lg) !important;
    border-radius: 8px !important;
    border: 1px solid var(--border-color) !important;
    margin-bottom: var(--spacing-lg) !important;
    text-align: left !important;
}

.woocommerce-checkout .checkout_coupon .form-row {
    margin-bottom: var(--spacing-sm) !important;
    width: 100% !important;
    float: none !important;
}

.woocommerce-checkout .checkout_coupon input[type="text"] {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0.85rem 1rem !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 6px !important;
    font-family: var(--font-primary) !important;
    font-size: 0.95rem !important;
    margin: 0 !important;
    display: block !important;
    text-align: left !important;
}

.woocommerce-checkout .checkout_coupon button[type="submit"] {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0.85rem 1.5rem !important;
    background: var(--primary-color) !important;
    color: white !important;
    border: none !important;
    border-radius: 6px !important;
    cursor: pointer !important;
    font-weight: 600 !important;
    font-size: 0.95rem !important;
    font-family: var(--font-primary) !important;
    transition: background 0.2s ease !important;
    margin: 0 !important;
    display: block !important;
}

.woocommerce-checkout .checkout_coupon button[type="submit"]:hover {
    background: var(--accent-color) !important;
}

/* ========================================
📱 RESPONSIVE - MOBILE FIX
======================================== */
@media (max-width: 1024px) {
    .modshop-checkout-grid {
        grid-template-columns: 1fr !important;
        gap: var(--spacing-lg) !important;
    }

    .modshop-order-review-box {
        position: static !important;
    }

    .modshop-checkout-wrapper {
        padding: var(--spacing-lg) var(--spacing-md) !important;
    }
}

@media (max-width: 768px) {
    .woocommerce-checkout h1,
    .woocommerce-checkout .entry-title {
        font-size: 1.75rem !important;
    }

    .modshop-checkout-section {
        padding: var(--spacing-md) !important;
    }

    .woocommerce-checkout .form-row-first,
    .woocommerce-checkout .form-row-last {
        width: 100% !important;
        float: none !important;
        margin-right: 0 !important;
    }

    .woocommerce-checkout-review-order-table th,
    .woocommerce-checkout-review-order-table td {
        font-size: 0.85rem !important;
        padding: var(--spacing-xs) 0 !important;
    }

    .woocommerce-checkout .place-order button[type="submit"],
    .woocommerce-checkout .place-order input[type="submit"] {
        font-size: 1rem !important;
        padding: 1rem 1.5rem !important;
    }
}

@media (max-width: 480px) {
    .modshop-checkout-wrapper {
        padding: var(--spacing-md) var(--spacing-sm) !important;
    }

    .woocommerce-checkout h1,
    .woocommerce-checkout .entry-title {
        font-size: 1.5rem !important;
        margin-bottom: var(--spacing-lg) !important;
    }

    .modshop-checkout-section {
        padding: var(--spacing-sm) !important;
        border-radius: 6px !important;
    }

    .modshop-order-review-box {
        padding: var(--spacing-md) !important;
    }

    .woocommerce-checkout .form-row input[type="text"],
    .woocommerce-checkout .form-row input[type="email"],
    .woocommerce-checkout .form-row input[type="tel"],
    .woocommerce-checkout .form-row input[type="password"],
    .woocommerce-checkout .form-row select,
    .woocommerce-checkout .form-row textarea {
        padding: 0.75rem 0.85rem !important;
        font-size: 0.9rem !important;
    }

    .woocommerce-checkout .place-order button[type="submit"],
    .woocommerce-checkout .place-order input[type="submit"] {
        width: 100% !important;
        max-width: 100% !important;
    }
}

/* ========================================
🔧 UTILITY FIXES
======================================== */
.woocommerce-checkout .woocommerce-input-wrapper {
    width: 100% !important;
    display: block !important;
}

.woocommerce-checkout .select2-container,
.woocommerce-checkout .select2-container--default {
    width: 100% !important;
}

.woocommerce-checkout .select2-container .select2-selection--single {
    height: auto !important;
    padding: 0.85rem 1rem !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 6px !important;
    background: var(--background-color) !important;
}

.woocommerce-checkout .select2-container .select2-selection--single .select2-selection__rendered {
    color: var(--primary-color) !important;
    font-size: 0.95rem !important;
    line-height: 1.4 !important;
    padding: 0 !important;
}

.woocommerce-checkout .select2-container .select2-selection--single .select2-selection__arrow {
    height: 100% !important;
    right: 1rem !important;
}

.woocommerce-checkout .processing {
    opacity: 0.7 !important;
    pointer-events: none !important;
}

.woocommerce-checkout .blockUI {
    opacity: 0.7 !important;
    cursor: wait !important;
}

/* Hide default WooCommerce breadcrumb on checkout */
.woocommerce-checkout .woocommerce-breadcrumb {
    display: none !important;
}

/* Clear all floats */
.woocommerce-checkout::after {
    content: "" !important;
    display: table !important;
    clear: both !important;
}