/* --- Taaza Kitchen: Full Custom Checkout Flow (V2.8 - Behrouz Layout) --- */
@import url("https://use.fontawesome.com/releases/v5.15.4/css/all.css");

/* --- 1. Main Page Wrapper (2-Column Grid) --- */
.tk-checkout-page-wrapper {
    display: grid;
    grid-template-columns: 2fr 1fr; /* 66% / 33% split */
    gap: 30px;
    max-width: 1200px;
    margin: 30px auto;
    padding: 0 15px;
}

/* --- 2. Left Column (The Steps) --- */
.tk-checkout-left-col {
    width: 100%;
}
.tk-step-card {
    background: #ffffff;
    border: 1px solid #eee;
    border-radius: 12px;
    margin-bottom: 20px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.05);
    overflow: hidden;
}
.tk-step-header {
    display: flex;
    align-items: center;
    padding: 20px 30px;
    font-size: 20px;
    font-weight: 700;
    color: var(--tk-dark-brown);
    border-bottom: 1px solid #f0f0f0;
}
.tk-step-header .tk-step-icon {
    font-size: 22px;
    margin-right: 15px;
    width: 25px;
    text-align: center;
    color: var(--tk-golden);
}
.tk-step-content {
    padding: 30px;
}
.tk-step-card.tk-step-disabled {
    background: var(--tk-light-grey);
    opacity: 0.7;
    box-shadow: none;
}
.tk-step-card.tk-step-disabled .tk-step-header,
.tk-step-card.tk-step-disabled .tk-step-header .tk-step-icon {
     color: #999;
}
.tk-step-disabled-message {
    padding: 30px;
    text-align: center;
    color: #999;
    font-style: italic;
    margin: 0;
}

/* Auth Step Styles */
.tk-logged-in-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 16px;
    color: #333;
}
.tk-change-user-btn {
    font-weight: 700;
    color: var(--tk-dark-brown);
    font-size: 14px;
    text-decoration: none;
}
.tk-checkout-login-trigger {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    width: 100%; padding: 15px; font-size: 18px; font-weight: 700; text-decoration: none;
    background-color: var(--tk-dark-brown); color: var(--tk-cream);
    border: none; border-radius: 8px; cursor: pointer; transition: all 0.3s ease;
}
.tk-checkout-login-trigger:hover {
    background-color: var(--tk-golden); color: var(--tk-dark-brown); text-decoration: none;
}


/* --- 3. Right "Sticky" Column --- */
.tk-checkout-right-col .tk-sticky-sidebar {
    position: -webkit-sticky;
    position: sticky;
    top: 40px; /* Adjust as needed */
    width: 100%;
}
.tk-sidebar-card {
    background: #fff;
    border: 1px solid #eee;
    border-radius: 12px;
    margin-bottom: 20px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.05);
    background-color: var(--tk-cream, #fffaf7);
}
.tk-sidebar-card-header {
    padding: 20px;
    border-bottom: 1px dashed #ddd;
}
.tk-sidebar-card-header h3 {
    margin: 0;
    font-size: 18px;
    color: var(--tk-dark-brown);
}
.tk-sidebar-card-content {
    padding: 20px;
}


/* --- 4. Styling WooCommerce Elements (Order Review, Coupons) --- */

/* Order Review Table */
#tk-cart-summary table.woocommerce-checkout-review-order-table {
    width: 100%;
    border: none;
    background: none;
}
#tk-cart-summary table.woocommerce-checkout-review-order-table thead,
#tk-cart-summary table.woocommerce-checkout-review-order-table tfoot > tr > :first-child {
    display: none; /* Hide table head and Cart Subtotal label */
}
#tk-cart-summary table.woocommerce-checkout-review-order-table tr {
    border-bottom: 1px solid #eee;
}
#tk-cart-summary table.woocommerce-checkout-review-order-table td,
#tk-cart-summary table.woocommerce-checkout-review-order-table th {
    padding: 15px 0;
    border: none;
    background: none;
}
#tk-cart-summary .product-name {
    font-weight: 600;
    color: #333;
}
#tk-cart-summary .product-total {
    text-align: right;
    font-weight: 700;
    color: #000;
}
#tk-cart-summary .order-total th,
#tk-cart-summary .order-total td {
    font-size: 18px;
    font-weight: 700;
    color: var(--tk-dark-brown);
}
#tk-cart-summary .order-total td {
    font-size: 20px;
}

/* Coupon Box */
#tk-coupon-box .checkout_coupon {
    padding: 0;
    border: none;
    box-shadow: none;
}
#tk-coupon-box p.form-row {
    margin: 0;
}
#tk-coupon-box input#coupon_code {
    width: 100% !important;
    max-width: 100%;
    padding: 12px 15px;
    border-radius: 8px;
    border: 1px solid #ddd;
    margin-bottom: 10px;
}
#tk-coupon-box button[name="apply_coupon"] {
    width: 100%;
    text-align: center;
    background: var(--tk-dark-brown) !important;
    color: var(--tk-cream) !important;
    border-radius: 8px !important;
}
#tk-coupon-box button[name="apply_coupon"]:hover {
    background: var(--tk-golden) !important;
    color: var(--tk-dark-brown) !important;
}

/* Cross-Sells (Complete your Meal) */
#tk-cross-sells ul.products {
    display: flex;
    flex-wrap: nowrap; /* Force single line */
    overflow-x: auto; /* Make it scroll horizontally */
    gap: 15px;
    margin: 0;
    padding-bottom: 10px;
}
#tk-cross-sells li.product {
    min-width: 150px; /* Give each item a set width */
    width: 150px;
    margin: 0;
    padding: 0;
}
#tk-cross-sells .woocommerce-loop-product__title {
    font-size: 14px;
    font-weight: 600;
}
#tk-cross-sells .price {
    font-size: 14px;
    font-weight: 700;
    color: #000;
}
#tk-cross-sells .button {
    width: 100%;
    text-align: center;
    padding: 8px 10px !important;
    font-size: 13px !important;
}


/* --- 5. Mobile Responsive --- */
@media (max-width: 900px) {
    .tk-checkout-page-wrapper {
        /* Stack the columns */
        grid-template-columns: 1fr;
    }
    .tk-checkout-right-col {
        /* Put the cart on top (on mobile) */
        grid-row: 1; 
    }
    .tk-checkout-right-col .tk-sticky-sidebar {
        position: static; /* Un-stick the sidebar */
        top: auto;
    }
}