/**
 * WooCommerce Reserve Cart - Frontend CSS
 *
 * @package WooCommerce_Reserve_Cart
 */

/* Timer Container */
.wrc-timer-container {
    background: #f0f7ff;
    border: 2px solid #4a90e2;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 25px;
    text-align: center;
    transition: all 0.3s ease;
}

/* Timer Message */
.wrc-timer-message {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
}

/* Timer Icon */
.wrc-timer-icon {
    font-size: 24px;
    line-height: 1;
}

/* Timer Text */
.wrc-timer-text {
    font-size: 16px;
    font-weight: 600;
    color: #333;
}

/* Timer Countdown */
.wrc-timer-countdown {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    font-size: 28px;
    font-weight: 700;
    color: #4a90e2;
    font-family: 'Courier New', monospace;
    background: #fff;
    padding: 8px 16px;
    border-radius: 6px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    min-width: 100px;
}

.wrc-timer-seconds {
    display: inline-block;
    min-width: 60px;
    text-align: center;
    font-size: 32px;
}

.wrc-timer-label {
    display: inline-block;
    font-size: 16px;
    font-weight: 500;
    margin-left: 8px;
    opacity: 0.8;
}

/* Inline timer next to item name */
.wrc-timer-inline {
    display: inline !important;
    margin-inline-start: 6px;
    font-size: inherit;
    vertical-align: baseline;
    color: inherit !important; /* Inherit color from product name */
    white-space: normal; /* Allow full sentence wrapping */
    text-decoration: none !important; /* Remove underline from link */
    pointer-events: none !important; /* Prevent clicking on timer */
    line-height: inherit; /* Match line height of product name */
}

/* Timer inside product image container - display as block */
.wc-block-cart-item__image .wrc-timer-inline,
td.product-thumbnail .wrc-timer-inline,
.product-thumbnail .wrc-timer-inline,
td:has(img[src*="product"]) .wrc-timer-inline {
    display: block !important;
    margin: 8px 0 0 0 !important;
    text-align: center;
    font-size: 14px;
    line-height: 1.4;
    white-space: normal;
}

/* Optional text shown under each line-item timer */
.wrc-line-item-text {
    display: inline;
    font-size: 12px;
    font-weight: 500;
    opacity: 0.9;
}

.wrc-line-item-text--cart {
    text-align: inherit;
}

/* Keep the numeric countdown LTR inside RTL sentences */
.wrc-timer-countdown-inline {
    display: inline;
    direction: ltr;
    unicode-bidi: isolate-override;
    white-space: nowrap;
}

/* Ensure timer stays inline when placed after a link */
a + .wrc-timer-inline,
.wc-block-components-product-name + .wrc-timer-inline {
    display: inline !important;
    margin-inline-start: 6px;
}

/* Ensure parent containers allow inline display */
.wc-block-components-product-name,
.wc-block-cart-item__product,
td.product-name,
.product-name {
    white-space: normal;
}

/* When timer is sibling of link, ensure they stay on same line */
a.wc-block-components-product-name,
a[class*="product-name"] {
    display: inline;
}

a.wc-block-components-product-name + .wrc-timer-inline {
    display: inline !important;
    vertical-align: baseline;
}

/* Remove underline and link behavior from timer when inside a link */
a .wrc-timer-inline,
a .wrc-timer-icon-small,
a .wrc-timer-countdown-inline,
a .wrc-timer-minutes-inline,
a .wrc-timer-separator-inline,
a .wrc-timer-seconds-inline {
    text-decoration: none !important;
    pointer-events: none !important;
    cursor: default !important;
    user-select: none; /* Prevent text selection */
    position: relative;
    z-index: 1;
}

/* Ensure timer elements are never clickable, even if outside a link */
.wrc-timer-inline,
.wrc-timer-icon-small,
.wrc-timer-countdown-inline,
.wrc-timer-minutes-inline,
.wrc-timer-separator-inline,
.wrc-timer-seconds-inline {
    pointer-events: none !important;
    cursor: default !important;
    text-decoration: none !important;
}

/* Prevent link behavior on timer when inside a link */
a:has(.wrc-timer-inline) {
    position: relative;
}

a .wrc-timer-inline::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    pointer-events: none;
}

.wrc-timer-icon-small {
    font-size: 1em;
    margin-inline-end: 4px;
    vertical-align: middle;
    display: inline !important;
}

.wrc-timer-countdown-inline {
    display: inline !important;
    font-weight: inherit;
    color: inherit; /* Inherit color from product name */
    vertical-align: baseline;
    font-family: 'Courier New', monospace;
    line-height: inherit;
}

.wrc-timer-minutes-inline,
.wrc-timer-seconds-inline {
    font-size: inherit;
    font-weight: inherit;
    font-family: 'Courier New', monospace;
    display: inline !important;
    line-height: inherit;
}

.wrc-timer-separator-inline {
    display: inline !important;
    margin: 0;
    line-height: inherit;
}

.wrc-timer-inline.wrc-timer-warning .wrc-timer-countdown-inline {
    color: #ff9800;
}

.wrc-timer-inline.wrc-timer-critical .wrc-timer-countdown-inline {
    color: #f44336;
    /* Animation removed per user request */
}

/* Multiple timer containers */
.wrc-timer-item {
    margin-bottom: 15px;
}

/* Warning State - Last Minute */
.wrc-timer-container.wrc-timer-warning {
    background: #fff4e5;
    border-color: #ff9800;
    animation: pulse-warning 1s ease-in-out infinite;
}

.wrc-timer-container.wrc-timer-warning .wrc-timer-countdown {
    color: #ff9800;
    animation: shake 0.5s ease-in-out infinite;
}

.wrc-timer-container.wrc-timer-warning .wrc-timer-icon {
    animation: bounce 0.5s ease-in-out infinite;
}

/* Critical State - Last 10 Seconds */
.wrc-timer-container.wrc-timer-critical {
    background: #ffebee;
    border-color: #f44336;
    animation: pulse-critical 0.5s ease-in-out infinite;
}

.wrc-timer-container.wrc-timer-critical .wrc-timer-countdown {
    color: #f44336;
    animation: shake-critical 0.3s ease-in-out infinite;
}

/* Expired State */
.wrc-timer-container.wrc-timer-expired {
    background: #fce4ec;
    border-color: #e91e63;
}

.wrc-timer-container.wrc-timer-expired .wrc-timer-countdown {
    color: #e91e63;
}

.wrc-expired {
    font-size: 18px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Animations */
@keyframes pulse-warning {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(255, 152, 0, 0.4);
    }
    50% {
        box-shadow: 0 0 0 10px rgba(255, 152, 0, 0);
    }
}

@keyframes pulse-critical {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(244, 67, 54, 0.6);
    }
    50% {
        box-shadow: 0 0 0 15px rgba(244, 67, 54, 0);
    }
}

@keyframes shake {
    0%, 100% {
        transform: translateX(0);
    }
    25% {
        transform: translateX(-3px);
    }
    75% {
        transform: translateX(3px);
    }
}

@keyframes shake-critical {
    0%, 100% {
        transform: translateX(0);
    }
    25% {
        transform: translateX(-5px);
    }
    75% {
        transform: translateX(5px);
    }
}

@keyframes bounce {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-5px);
    }
}

/* Responsive Design */
@media (max-width: 768px) {
    .wrc-timer-container {
        padding: 15px;
        margin-bottom: 20px;
    }
    
    .wrc-timer-message {
        gap: 8px;
    }
    
    .wrc-timer-text {
        font-size: 14px;
    }
    
    .wrc-timer-countdown {
        font-size: 24px;
        padding: 6px 12px;
        min-width: 90px;
    }
    
    .wrc-timer-minutes,
    .wrc-timer-seconds {
        min-width: 25px;
    }
    
    .wrc-timer-icon {
        font-size: 20px;
    }
}

@media (max-width: 480px) {
    .wrc-timer-container {
        padding: 12px;
    }
    
    .wrc-timer-message {
        flex-direction: column;
        gap: 10px;
    }
    
    .wrc-timer-text {
        font-size: 13px;
    }
    
    .wrc-timer-countdown {
        font-size: 22px;
        padding: 5px 10px;
    }
}

/* WooCommerce Notices Integration */
.woocommerce-message.wrc-message,
.woocommerce-info.wrc-message {
    display: flex;
    align-items: center;
    gap: 10px;
}

.woocommerce-message.wrc-message::before,
.woocommerce-info.wrc-message::before {
    content: "⏱️";
    font-size: 20px;
}

/* Product Availability Messages */
.wrc-availability-message {
    display: inline-block;
    padding: 8px 12px;
    margin: 10px 0;
    background: #fff3cd;
    border: 1px solid #ffc107;
    border-radius: 4px;
    color: #856404;
    font-size: 14px;
}

.wrc-availability-message.unavailable {
    background: #f8d7da;
    border-color: #f44336;
    color: #721c24;
}

.wrc-availability-message.limited {
    background: #d1ecf1;
    border-color: #17a2b8;
    color: #0c5460;
}

/* Loading State */
.wrc-timer-loading {
    opacity: 0.6;
    pointer-events: none;
}

.wrc-timer-loading::after {
    content: "";
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid #4a90e2;
    border-radius: 50%;
    border-top-color: transparent;
    animation: spin 0.6s linear infinite;
    margin-left: 10px;
}

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

/* Print Styles */
@media print {
    .wrc-timer-container {
        display: none;
    }
}

/* High Contrast Mode */
@media (prefers-contrast: high) {
    .wrc-timer-container {
        border-width: 3px;
    }
    
    .wrc-timer-countdown {
        border: 2px solid currentColor;
    }
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    .wrc-timer-container,
    .wrc-timer-countdown,
    .wrc-timer-icon {
        animation: none !important;
        transition: none !important;
    }
}