/**
 * Checkout Shipping Threshold Warning Styles
 *
 * Warning notice displayed at checkout when discounts drop
 * net total below free shipping threshold (₪450).
 *
 * Design: Amber/warning color scheme for attention
 * - Matches checkout design system
 * - RTL support for Hebrew
 * - Mobile responsive
 * - Accessibility compliant
 *
 * @package Eride
 * @version 1.0.0
 * @since 2026-01-11
 */

/* ============================================
   Warning Notice Container
   ============================================ */
.free-shipping-gap-notice {
    display: flex;
    align-items: center;
    gap: 0.75rem;

    /* Warning style - amber background */
    background: #fef3c7; /* amber-100 */
    border: 1px solid #f59e0b; /* amber-500 */
    border-radius: 0.75rem;

    padding: 1rem 1.25rem;
    margin-block-end: 1rem;

    /* Subtle fade-in animation */
    animation: freeShippingFadeIn 0.3s ease-out;
}

/* Icon styling */
.free-shipping-gap-notice__icon {
    font-size: 1.25rem;
    flex-shrink: 0;
    line-height: 1;
}

/* Message text styling */
.free-shipping-gap-notice__message {
    font-size: 0.875rem;
    font-weight: 600;
    color: #92400e; /* amber-800 */
    line-height: 1.4;
}

/* Price amount emphasis */
.free-shipping-gap-notice__message .woocommerce-Price-amount {
    font-weight: 700;
    color: #78350f; /* amber-900 */
}

/* Currency symbol styling */
.free-shipping-gap-notice__message .woocommerce-Price-currencySymbol {
    font-weight: 700;
}

/* ============================================
   RTL Support (Hebrew)
   ============================================ */
[dir="rtl"] .free-shipping-gap-notice {
    flex-direction: row-reverse;
}

/* ============================================
   Mobile Responsive
   ============================================ */
@media (max-width: 480px) {
    .free-shipping-gap-notice {
        padding: 0.875rem 1rem;
        gap: 0.5rem;
    }

    .free-shipping-gap-notice__icon {
        font-size: 1rem;
    }

    .free-shipping-gap-notice__message {
        font-size: 0.8125rem;
    }
}

/* ============================================
   Animation
   ============================================ */
@keyframes freeShippingFadeIn {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Reduced motion accessibility */
@media (prefers-reduced-motion: reduce) {
    .free-shipping-gap-notice {
        animation: none;
    }
}

/* ============================================
   High Contrast Mode Support
   ============================================ */
@media (prefers-contrast: high) {
    .free-shipping-gap-notice {
        border-width: 2px;
        border-color: #b45309; /* amber-700 */
    }

    .free-shipping-gap-notice__message {
        color: #78350f; /* amber-900 */
    }
}

/* ============================================
   Coupon Form Fix
   ============================================
   The theme's style.css hides all panel buttons:
   .wp-block-woocommerce-checkout .wc-block-components-panel__button { display: none; }

   This override shows the coupon "Add coupons" button specifically.
   ============================================ */
.wp-block-woocommerce-checkout .wc-block-components-totals-coupon .wc-block-components-panel__button {
    display: flex !important;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    padding: 0.75rem 0;
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--wp--preset--color--primary, #0d9488);
}

.wp-block-woocommerce-checkout .wc-block-components-totals-coupon .wc-block-components-panel__button:hover {
    color: var(--wp--preset--color--primary-dark, #0f766e);
}

/* Style the expand/collapse icon */
.wp-block-woocommerce-checkout .wc-block-components-totals-coupon .wc-block-components-panel__button-icon {
    width: 18px;
    height: 18px;
    transition: transform 0.2s ease;
}

/* Rotate icon when expanded */
.wp-block-woocommerce-checkout .wc-block-components-totals-coupon .wc-block-components-panel[aria-expanded="true"] .wc-block-components-panel__button-icon {
    transform: rotate(180deg);
}