/**
 * WooCommerce Blocks Styles
 * Modern flat design for Cart & Checkout blocks
 */

/* ===========================
   CART BLOCK
   =========================== */

/* Main Container */
.wp-block-woocommerce-cart,
.wp-block-woocommerce-checkout {
    padding: var(--spacing-2xl) 0;
}

.wc-block-cart,
.wc-block-checkout {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 var(--spacing-lg);
}

/* Sidebar Layout */
.wc-block-components-sidebar-layout {
    gap: var(--spacing-2xl);
    align-items: start;
}

/* Main Content Area */
.wc-block-components-main {
    background: white;
    border: 2px solid var(--border-color);
    border-radius: var(--border-radius-large);
    padding: var(--spacing-xl);
}

/* Cart Items Table */
.wc-block-cart-items {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

.wc-block-cart-items caption {
    margin-bottom: var(--spacing-lg);
}

.wc-block-cart-items caption h2 {
    font-size: var(--font-2xl);
    font-weight: var(--font-bold);
    color: var(--heading-color);
    text-align: left;
}

/* Table Header */
.wc-block-cart-items__header {
    background: var(--secondary-bg);
    border-bottom: 2px solid var(--border-color);
}

.wc-block-cart-items__header th {
    padding: var(--spacing-md) var(--spacing-lg);
    font-size: var(--font-base);
    font-weight: var(--font-semibold);
    color: var(--heading-color);
    text-align: left;
}

.wc-block-cart-items__header-image {
    width: 120px;
}

.wc-block-cart-items__header-total {
    width: 150px;
    text-align: right;
}

/* Cart Item Row */
.wc-block-cart-items__row {
    border-bottom: 1px solid var(--border-color);
    transition: background var(--transition-base);
}

.wc-block-cart-items__row:hover {
    background: var(--secondary-bg);
}

.wc-block-cart-items__row td {
    padding: var(--spacing-lg);
    vertical-align: middle;
}

/* Product Image */
.wc-block-cart-item__image {
    width: 120px;
}

.wc-block-cart-item__image img {
    width: 100px;
    height: 100px;
    object-fit: cover;
    border-radius: var(--border-radius-medium);
    border: 2px solid var(--border-color);
}

/* Product Details */
.wc-block-cart-item__product {
    padding-right: var(--spacing-lg);
}

.wc-block-components-product-name {
    font-size: var(--font-lg);
    font-weight: var(--font-semibold);
    color: var(--heading-color);
    text-decoration: none;
    display: block;
    margin-bottom: var(--spacing-sm);
    transition: color var(--transition-base);
}

.wc-block-components-product-name:hover {
    color: var(--primary-color);
}

/* Product Price */
.wc-block-cart-item__prices {
    margin-bottom: var(--spacing-sm);
}

.wc-block-components-product-price {
    font-size: var(--font-lg);
    font-weight: var(--font-bold);
    color: var(--heading-color);
}

.wc-block-components-product-price__regular {
    color: #9ca3af;
    text-decoration: line-through;
    margin-right: var(--spacing-sm);
}

.wc-block-components-product-price__value.is-discounted {
    color: var(--primary-color);
}

/* Sale Badge */
.wc-block-components-sale-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: 6px 12px;
    background: #fef3c7;
    color: #92400e;
    border-radius: var(--border-radius-small);
    font-size: var(--font-sm);
    font-weight: var(--font-semibold);
    margin-bottom: var(--spacing-sm);
}

/* Product Metadata */
.wc-block-components-product-metadata {
    margin-bottom: var(--spacing-sm);
}

.wc-block-components-product-metadata__description {
    font-size: var(--font-sm);
    color: #6b7280;
    line-height: var(--leading-normal);
}

/* Quantity Selector */
.wc-block-cart-item__quantity {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    margin-top: var(--spacing-sm);
}

.wc-block-components-quantity-selector {
    display: inline-flex;
    align-items: center;
    border: 2px solid var(--border-color);
    border-radius: var(--border-radius-medium);
    overflow: hidden;
    background: white;
}

.wc-block-components-quantity-selector__input {
    width: 60px;
    padding: 10px 8px;
    border: none;
    text-align: center;
    font-size: var(--font-base);
    font-weight: var(--font-semibold);
    color: var(--text-color);
    background: transparent;
}

.wc-block-components-quantity-selector__input:focus {
    outline: none;
}

.wc-block-components-quantity-selector__button {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--secondary-bg);
    border: none;
    color: var(--text-color);
    font-size: 18px;
    font-weight: var(--font-bold);
    cursor: pointer;
    transition: all var(--transition-base);
}

.wc-block-components-quantity-selector__button:hover:not(:disabled) {
    background: var(--primary-color);
    color: white;
}

.wc-block-components-quantity-selector__button:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.wc-block-components-quantity-selector__button--minus {
    border-right: 1px solid var(--border-color);
}

.wc-block-components-quantity-selector__button--plus {
    border-left: 1px solid var(--border-color);
}

/* Remove Button */
.wc-block-cart-item__remove-link {
    padding: 8px 16px;
    background: transparent;
    border: 2px solid #fca5a5;
    border-radius: var(--border-radius-medium);
    color: #dc2626;
    font-size: var(--font-sm);
    font-weight: var(--font-semibold);
    cursor: pointer;
    transition: all var(--transition-base);
}

.wc-block-cart-item__remove-link:hover {
    background: #dc2626;
    border-color: #dc2626;
    color: white;
}

/* Item Total */
.wc-block-cart-item__total {
    text-align: right;
}

.wc-block-cart-item__total .wc-block-components-product-price {
    font-size: var(--font-xl);
    font-weight: var(--font-bold);
    color: var(--heading-color);
}

/* ===========================
   SIDEBAR - CART TOTALS
   =========================== */

.wc-block-components-sidebar {
    position: sticky;
    top: 100px;
}

.wp-block-woocommerce-cart-order-summary-block,
.wp-block-woocommerce-checkout-order-summary-block {
    background: #ffffff;
    border: 2px solid var(--border-color);
    border-radius: var(--border-radius-large);
    padding: var(--spacing-xl);
}

/* Totals Title */
.wc-block-cart__totals-title {
    font-size: var(--font-2xl);
    font-weight: var(--font-bold);
    color: var(--heading-color);
    margin: 0 0 var(--spacing-lg);
    padding-bottom: var(--spacing-md);
    border-bottom: 2px solid var(--border-color);
}

/* Coupon Panel */
.wc-block-components-totals-coupon {
    margin-bottom: var(--spacing-lg);
    border: 2px solid var(--border-color);
    border-radius: var(--border-radius-medium);
    overflow: hidden;
}

.wc-block-components-panel__button {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    width: 100%;
    padding: var(--spacing-md) var(--spacing-lg);
    background: var(--secondary-bg);
    border: none;
    font-size: var(--font-base);
    font-weight: var(--font-semibold);
    color: var(--text-color);
    cursor: pointer;
    transition: all var(--transition-base);
}

.wc-block-components-panel__button:hover {
    background: #e5e7eb;
}

.wc-block-components-panel__button-icon {
    width: 24px;
    height: 24px;
    transition: transform var(--transition-base);
}

.wc-block-components-panel__button[aria-expanded="true"] .wc-block-components-panel__button-icon {
    transform: rotate(180deg);
}

/* Coupon Form */
.wc-block-components-panel__content {
    padding: var(--spacing-lg);
    background: white;
}

.wc-block-components-totals-coupon__content {
    display: flex;
    gap: var(--spacing-sm);
}

.wc-block-components-totals-coupon__content input {
    flex: 1;
    padding: 12px 16px;
    border: 2px solid var(--border-color);
    border-radius: var(--border-radius-medium);
    font-size: var(--font-base);
}

.wc-block-components-totals-coupon__content button {
    padding: 12px 24px;
    background: var(--primary-color);
    color: white;
    border: none;
    border-radius: var(--border-radius-medium);
    font-size: var(--font-base);
    font-weight: var(--font-semibold);
    cursor: pointer;
    transition: all var(--transition-base);
    white-space: nowrap;
}

.wc-block-components-totals-coupon__content button:hover {
    background: var(--accent-color);
    border-color: var(--accent-color);
    color: white;
}

/* Totals Items */
.wc-block-components-totals-wrapper {
    margin-bottom: var(--spacing-lg);
}

.wc-block-components-totals-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-md) 0;
    border-bottom: 1px solid var(--border-color);
}

.wc-block-components-totals-item:last-child {
    border-bottom: none;
}

.wc-block-components-totals-item__label {
    font-size: var(--font-base);
    font-weight: var(--font-medium);
    color: var(--text-color);
}

.wc-block-components-totals-item__value {
    font-size: var(--font-lg);
    font-weight: var(--font-semibold);
    color: var(--heading-color);
}

/* Footer Total */
.wc-block-components-totals-footer-item {
    padding: var(--spacing-lg) 0 0;
    margin-top: var(--spacing-md);
    border-top: 2px solid var(--border-color);
}

.wc-block-components-totals-footer-item .wc-block-components-totals-item__label {
    font-size: var(--font-lg);
    font-weight: var(--font-bold);
    color: var(--heading-color);
}

.wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
    font-size: var(--font-3xl);
    font-weight: var(--font-bold);
    color: var(--primary-color);
}

/* Proceed to Checkout Button */
.wc-block-cart__submit-container {
    margin-top: var(--spacing-lg);
}

.wc-block-cart__submit-button {
    width: 100%;
    padding: 18px 32px;
    background: var(--primary-color);
    color: white;
    border: none;
    border-radius: var(--border-radius-medium);
    font-size: var(--font-lg);
    font-weight: var(--font-bold);
    text-align: center;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all var(--transition-base);
    letter-spacing: 0.5px;
}

.wc-block-cart__submit-button:hover {
    background: var(--accent-color);
    border-color: var(--accent-color);
    color: white;
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

/* ===========================
   CHECKOUT BLOCK
   =========================== */

/* Checkout Layout */
.wc-block-checkout__main {
    background: white;
    border: 2px solid var(--border-color);
    border-radius: var(--border-radius-large);
    padding: var(--spacing-xl);
}

.wc-block-checkout__sidebar {
    position: sticky;
    top: 100px;
}

/* Checkout Steps */
.wc-block-components-checkout-step {
    margin-bottom: var(--spacing-2xl);
}

.wc-block-components-checkout-step__heading {
    font-size: var(--font-2xl);
    font-weight: var(--font-bold);
    color: var(--heading-color);
    margin: 0 0 var(--spacing-lg);
    padding-bottom: var(--spacing-md);
    border-bottom: 2px solid var(--border-color);
}

.wc-block-components-checkout-step__content {
    padding: var(--spacing-lg) 0;
}

/* Form Fields */
.wc-block-components-text-input,
.wc-block-components-select-input,
.wc-block-components-textarea {
    margin-bottom: var(--spacing-lg);
}

.wc-block-components-text-input label,
.wc-block-components-select-input label,
.wc-block-components-textarea label {
    display: block;
    font-size: var(--font-base);
    font-weight: var(--font-semibold);
    color: var(--heading-color);
    margin-bottom: var(--spacing-sm);
}

.wc-block-components-text-input input,
.wc-block-components-select-input select,
.wc-block-components-textarea textarea {
    width: 100%;
    padding: 14px 16px;
    font-size: var(--font-md);
    border: 2px solid var(--border-color);
    border-radius: var(--border-radius-medium);
    transition: all var(--transition-base);
}

.wc-block-components-text-input input:focus,
.wc-block-components-select-input select:focus,
.wc-block-components-textarea textarea:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: var(--focus-ring);
}

/* Validation */
.wc-block-components-text-input.has-error input,
.wc-block-components-select-input.has-error select {
    border-color: #ef4444;
}

.wc-block-components-validation-error {
    color: #ef4444;
    font-size: var(--font-sm);
    margin-top: var(--spacing-xs);
}

/* Payment Methods */
.wc-block-components-radio-control {
    margin-bottom: var(--spacing-md);
}

.wc-block-components-radio-control__option {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-md) var(--spacing-lg);
    background: white;
    border: 2px solid var(--border-color);
    border-radius: var(--border-radius-medium);
    cursor: pointer;
    transition: all var(--transition-base);
    margin-bottom: var(--spacing-sm);
}

.wc-block-components-radio-control__option:hover {
    border-color: var(--primary-color);
    background: #f9fafb;
}

.wc-block-components-radio-control__option.is-active {
    border-color: var(--primary-color);
    background: #eff6ff;
}

.wc-block-components-radio-control__input {
    width: 20px;
    height: 20px;
    margin: 0;
}

/* Place Order Button */
.wc-block-components-checkout-place-order-button {
    width: 100%;
    padding: 18px 32px;
    background: var(--primary-color);
    color: white;
    border: none;
    border-radius: var(--border-radius-medium);
    font-size: var(--font-lg);
    font-weight: var(--font-bold);
    cursor: pointer;
    transition: all var(--transition-base);
    letter-spacing: 0.5px;
}

.wc-block-components-checkout-place-order-button:hover {
    background: var(--accent-color);
    border-color: var(--accent-color);
    color: white;
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

/* ===========================
   NOTICES & ALERTS
   =========================== */

.wc-block-components-notices {
    margin-bottom: var(--spacing-lg);
}

.wc-block-components-notice-banner {
    padding: var(--spacing-md) var(--spacing-lg);
    border-radius: var(--border-radius-medium);
    border: 2px solid;
    margin-bottom: var(--spacing-md);
}

.wc-block-components-notice-banner.is-error {
    color: #991b1b;
    background-color: #fee2e2;
    border-color: #fca5a5;
}

.wc-block-components-notice-banner.is-success {
    color: #065f46;
    background-color: #d1fae5;
    border-color: #6ee7b7;
}

.wc-block-components-notice-banner.is-info {
    color: #1e40af;
    background-color: #dbeafe;
    border-color: #93c5fd;
}

/* ===========================
   LOADING STATES
   =========================== */

.wc-block-components-spinner {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 3px solid rgba(0, 0, 0, 0.1);
    border-top-color: var(--primary-color);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* ===========================
   RESPONSIVE
   =========================== */

@media (max-width: 1024px) {
    .wc-block-components-sidebar-layout {
        grid-template-columns: 1fr;
        gap: var(--spacing-xl);
    }
    
    .wc-block-components-sidebar {
        position: static;
    }
}

@media (max-width: 768px) {
    .wc-block-cart-items__header-image,
    .wc-block-cart-item__image {
        display: none;
    }
    
    .wc-block-cart-items__header-product {
        width: auto;
    }
    
    .wc-block-components-main,
    .wp-block-woocommerce-cart-order-summary-block,
    .wc-block-checkout__main {
        padding: var(--spacing-lg);
    }
    
    .wc-block-cart-item__quantity {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .wc-block-components-quantity-selector {
        width: 100%;
    }
    
    .wc-block-cart-item__remove-link {
        width: 100%;
        text-align: center;
    }
}

@media (max-width: 480px) {
    .wc-block-cart-items__header-total,
    .wc-block-cart-item__total {
        display: none;
    }
    
    .wc-block-components-product-name {
        font-size: var(--font-base);
    }
    
    .wc-block-cart__submit-button,
    .wc-block-components-checkout-place-order-button {
        padding: 16px 24px;
        font-size: var(--font-md);
    }
}

/* ===========================
   EMPTY CART STATE
   =========================== */

.wc-block-cart__empty-cart,
.wc-block-checkout__empty-checkout {
    text-align: center;
    padding: var(--spacing-3xl) var(--spacing-lg);
}

.wc-block-cart__empty-cart__title,
.wc-block-checkout__empty-checkout__title {
    font-size: var(--font-3xl);
    font-weight: var(--font-bold);
    color: var(--heading-color);
    margin-bottom: var(--spacing-md);
}

.wc-block-cart__empty-cart__text,
.wc-block-checkout__empty-checkout__text {
    font-size: var(--font-lg);
    color: #6b7280;
    margin-bottom: var(--spacing-xl);
}

.wc-block-cart__empty-cart__button,
.wc-block-checkout__empty-checkout__button {
    display: inline-flex;
    padding: 16px 32px;
    background: var(--primary-color);
    color: white;
    border-radius: var(--border-radius-medium);
    font-size: var(--font-md);
    font-weight: var(--font-semibold);
    text-decoration: none;
    transition: all var(--transition-base);
}

.wc-block-cart__empty-cart__button:hover,
.wc-block-checkout__empty-checkout__button:hover {
    background: var(--accent-color);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}