/*
    MerchStudio version 0.01 - Core CSS File
    Copyright (c) 2025 Michael Lewis White and MerchStudio Inc.
    Client Side Cart CSS
    @version client/css/cart.css - 0.01 - 2025-11-05 - totaltec

    # included by client/css_load.tpl
*/

.cart_page_container .page_title {
    text-align: left;
    padding: 0 0 15px 0;
    margin: 0 0 20px 0;
    border-bottom: 1px solid var(--line);
}

.cart_empty_message {
    text-align: center;
    padding: 40px;
    background-color: var(--base);
    border-radius: 4px;
}

/* Cart Grid Layout */
.cart_header_row,
.cart_item_row {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr 50px;
    gap: 15px;
    align-items: center;
    padding: 15px 0;
    border-bottom: 1px solid var(--line);
}

.cart_header_row {
    font-weight: bold;
    color: var(--middle_grey);
    text-transform: uppercase;
    font-size: 0.9em;
    padding-top: 0;
}

.cart_col_product {
    display: flex;
    align-items: center;
    gap: 15px;
}

.cart_item_image {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: 4px;
    border: 1px solid var(--line);
}

.cart_item_name {
    font-weight: bold;
    text-decoration: none;
    display: block;
    color: var(--text);
}
.cart_item_name:hover {
    color: var(--link_hover);
}

.cart_item_sku {
    font-size: 0.9em;
    color: var(--middle_grey);
    display: block;
    margin-top: 4px;
}

.cart_col_price,
.cart_col_total {
    font-weight: 500;
}

.cart_qty_input {
    max-width: 80px;
    text-align: center;
    padding: 0.4em 0.6em; /* Smaller padding */
    margin: 0;
}

.btn_cart_remove {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--middle_grey);
    padding: 5px;
    border-radius: 50%;
    transition: all 0.2s ease-out;
}
.btn_cart_remove:hover {
    color: var(--accent_red);
    background-color: var(--base);
}

.cart_summary {
    margin-top: 20px;
    padding-top: 20px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 15px;
}

.summary_subtotal span {
    display: inline-block;
    min-width: 65px;
    text-align: right;
}

.summary_actions .merch_button {
    margin: 0; /* Remove default button margin */
}

/*
=========================================
Desktop Header Mini Cart
=========================================
*/
/*
 * This is the main container for our new desktop-only cart
 * in the header. It's a dropdown container.
 */
#desktop_cart_wrap {
    display: inline-flex; /* Use flex for alignment */
    align-items: center;
}

/*
 * This styles the clickable trigger area that contains
 * the icon and text.
 */
#desktop_cart_wrap .drop_trigger {
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 8px 12px;
    border-radius: 4px;
    color: var(--text);
    cursor: pointer;
}

/*
 * This container holds the item count and subtotal,
 * stacking them vertically.
 */
.desktop_cart_details {
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1.2;
}

/* Styles for the "X item(s)" text */
#desktop_cart_count {
    font-size: 1em;
}

/* Styles for the "$XX.XX" subtotal text */
#desktop_cart_total {
    font-weight: bold;
    color: var(--text);
}

/* Generic Mini Cart CSS */
.cart_items {
    font-size: 0.8em;
    background-color: var(--accent_red);
    color: white;
    padding: 6px 5px; /* Adjusted padding for small badge */
    border-radius: 14px; /* For pill shape */
    line-height: 1;
    margin-bottom: 4px;
    min-width: 18px; /* For single digit */
    text-align: center;
}

/*
=========================================
Menu Mini Cart
=========================================
*/
/* Cart Icon Container - Initially hidden on desktop non-sticky */
#mm_cart_wrap {
    display: flex;
    align-items: center;
    opacity: 0;
    transform: translateX(30px); /* Start off-screen for animation */
    width: 0; /* Start with no width, will expand */
    height: 30px;
    flex-shrink: 0;
    justify-content: flex-end;
    transition: opacity 0.3s ease-in-out,
                transform 0.3s ease-in-out,
                width 0.3s ease-in-out;
}

#merch_menu.sticky #mm_cart_wrap {
    opacity: 1;
    transform: translateX(0);
    width: auto; /* Let it size to content (icon + badge) */
    margin-left: 10px; /* Space before cart, after list_wrap */
}

#mm_cart_wrap .drop_trigger {
    padding: 0;
    border: 0;
}

#mm_cart_wrap .cart_items {
    display: inline-block;
    padding: 4px 4px;
    font-size: 0.8em;
    width: 18px; /* Fixed width */
    height: 18px; /* Fixed height (equal to width) */
    line-height: 18px; /* Same as height to center text */
    margin: 0;
    border-radius: 50%; /* Make it circular */
    text-align: center; /* Center the number */
}

#mm_cart_wrap .merch_icon {
    width: 30px;
    height: 30px;
}

/*
=========================================
Mini Cart Dropdown Panel Styles
=========================================
*/
/*
 * This is the main content wrapper for the dropdown panels
 * used by both the desktop and sticky menu carts.
 */
.mini_cart_content {
    width: 320px;
    max-height: 70vh; /* Prevents long carts from going off-screen */
    display: flex;
    flex-direction: column;
}

/* This makes the list of items scrollable */
.mini_cart_items_list {
    overflow-y: auto;
    flex-grow: 1;
}

.mini_cart_empty {
    padding: 20px;
    text-align: center;
    color: var(--middle_grey);
}

/* A single item row in the mini cart */
.mini_cart_item_row {
    display: grid;
    /* We create 3 columns: Image, Details, Controls */
    grid-template-columns: 50px 1fr 80px;
    gap: 10px;
    align-items: center;
    padding: 10px;
    border-bottom: 1px solid var(--base);
}

.mini_cart_item_image {
    width: 50px;
    height: 50px;
    object-fit: cover;
    border-radius: 3px;
    border: 1px solid var(--line);
}

.mini_cart_item_details {
    display: flex;
    flex-direction: column;
}

.mini_cart_item_name {
    font-size: 0.9em;
    font-weight: bold;
    color: var(--text);
    text-decoration: none;
    line-height: 1.3;
}
.mini_cart_item_name:hover {
    color: var(--link_hover);
}

.mini_cart_item_price {
    font-size: 0.9em;
    color: var(--highlight);
}

/* Wrapper for the Qty input and Remove button */
.mini_cart_item_controls {
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    gap: 5px;
}

/* Our new, smaller quantity input for the mini cart */
input[type="number"].mini_cart_qty_input {
    width: 50px;
    padding: 0.3em 0.5em; /* Smaller padding */
    font-size: 0.9em;
    text-align: center;
    margin: 0;
}

/* Our new, icon-only remove button */
.btn_mini_cart_remove {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--middle_grey);
    padding: 0;
    line-height: 1;
}
.btn_mini_cart_remove:hover {
    color: var(--accent_red);
}

/* The summary section at the bottom (Subtotal, Buttons) */
.mini_cart_summary {
    padding: 10px;
    border-top: 2px solid var(--line);
    background-color: var(--base);
}

.mini_cart_summary .summary_subtotal {
    display: flex;
    justify-content: space-between;
    font-size: 1.1em;
    font-weight: bold;
    margin-bottom: 10px;
}

/* Container for the "View Cart" and "Checkout" buttons */
.mini_cart_actions {
    display: flex;
    justify-content: space-between;
    gap: 10px;
}

.mini_cart_actions .merch_button {
    border-bottom: none;
}

.mini_cart_actions .merch_button.highlight {
    color: var(--highlight);
}

/* Styling for the buttons inside the mini cart */
.mini_cart_actions .merch_button {
    flex-grow: 1;
    text-align: center;
    justify-content: center;
    padding: 0.5em;
    margin: 0;
    min-width: auto;
}

/* Responsive styles for cart */
@media (max-width: 800px) {
    #desktop_cart_wrap {
        display: none;
    }

    .cart_header_row {
        display: none; /* Hide headers on mobile */
    }

    .cart_item_row {
        grid-template-columns: 1fr 1fr; /* 2-column grid */
        gap: 10px 20px;
        padding: 20px 0;
    }

    /* Product spans full width */
    .cart_col_product {
        grid-column: 1 / -1;
    }

    .cart_col_price,
    .cart_col_qty,
    .cart_col_total {
        grid-column: 1 / 2; /* Stack left */
        position: relative;
        padding-left: 100px; /* Label space */
        min-height: 40px; /* Ensure alignment */
        display: flex;
        align-items: center;
    }

    .cart_col_remove {
        grid-column: 2 / -1; /* Stack right */
        grid-row: 2 / span 3; /* Span 3 rows */
        justify-self: flex-end;
        align-self: center;
    }

    /* Add pseudo-element labels */
    .cart_col_price::before,
    .cart_col_qty::before,
    .cart_col_total::before {
        content: attr(data-label);
        position: absolute;
        left: 0;
        color: var(--middle_grey);
        font-weight: bold;
    }

    .cart_col_price::before { content: 'Price'; }
    .cart_col_qty::before { content: 'Qty'; }
    .cart_col_total::before { content: 'Total'; }

    .cart_summary {
        align-items: center; /* Center summary on mobile */
    }
}

/*
=========================================
Shipping Estimator and Totals
=========================================
*/
.cart_content {
    display: flex;
    flex-wrap: wrap; /* Allows sections to wrap on smaller screens */
    gap: 30px;
    margin-top: 20px;
}

.cart_items_list {
    flex: 1 1 60%; /* Take 60% of width, minimum */
    min-width: 300px;
}

.cart_summary {
    flex: 1 1 30%; /* Take remaining space */
    min-width: 250px;

    /* We align the summary items on the right side */
    align-items: stretch;
    padding: 0;
}

.shipping_estimator_wrap {
    flex: 1 1 30%; /* Position estimator beside the list */
    min-width: 250px;
    padding: 20px;
    background-color: var(--base);
    border: 1px solid var(--line);
    border-radius: 4px;
    margin-top: 20px;

    /* Small h3 style for estimator */
    h3 {
        padding: 0;
        margin-top: 0;
        font-size: 1.1em;
        font-weight: 700;
        text-align: left;
    }
}

.rates_display {
    padding: 10px 0;
}

.shipping_option {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    font-size: 1em;
}

.shipping_option input[type="radio"] {
    /* Custom styling for radio if needed, otherwise rely on default */
    margin: 0;
}

.summary_shipping,
.summary_grand_total,
.summary_subtotal {
    display: flex;
    justify-content: space-between;
    width: 100%;
    padding: 5px 0;
    font-size: 1.1em;
    font-weight: normal;
    color: var(--text);
}

.summary_grand_total {
    font-size: 1.5em;
    font-weight: bold;
    border-top: 1px solid var(--line);
    padding-top: 10px;
}

#cart_shipping_rate,
#cart_grand_total {
    font-weight: bold;
    color: var(--highlight);
}

/* Discount Line Styles */
.summary_discount {
    display: flex;
    justify-content: space-between;
    width: 100%;
    padding: 5px 0;
    font-size: 1.1em;
    font-weight: normal;
    color: var(--accent_green); /* Highlights savings */
}

.summary_discount.hidden {
    display: none;
}

/* Coupon Section */
.coupon_section {
    width: 100%;
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px dashed var(--line);
}

.coupon_input_group {
    display: flex;
    gap: 5px;
}

.coupon_input_group.hidden {
    display: none;
}

.coupon_input_group input {
    flex-grow: 1;
    min-width: 0; /* Allows shrinking */
    padding: 6px 10px;
    margin: 0;
}

.coupon_input_group .merch_button {
    margin: 0;
}

.coupon_active_display {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: var(--info_bg);
    padding: 8px 12px;
    border-radius: 4px;
    border: 1px solid var(--line);
}

.coupon_active_display.hidden {
    display: none;
}

.text_link_btn {
    background: none;
    border: none;
    color: var(--accent_red);
    text-decoration: underline;
    cursor: pointer;
    font-size: 0.9em;
    padding: 0;
}
.text_link_btn:hover {
    text-decoration: none;
}

/* Discount Breakdown Styles */
.summary_discount.applied_row {
    color: var(--accent_green);
    align-items: center;
}

.summary_discount .discount_badge {
    display: inline-block;
    font-size: 0.8em;
    background-color: var(--accent_green);
    color: var(--button_text);
    padding: 2px 6px;
    border-radius: 4px;
    margin-left: 8px;
    font-weight: bold;
    vertical-align: middle;
}

/* Ensure strong tags inherit color context */
.summary_discount strong {
    color: inherit;
}