/**
 * MPR Sales Revolution
 * Frontend styles - Campaign countdown and badges
 */

/* Campaign badge */
.mpr-campaign-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    padding: 4px 8px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    border-radius: 3px;
    z-index: 10;
    background: var(--mpr-badge-bg, #ff0000);
    color: var(--mpr-badge-color, #ffffff);
}

.mpr-campaign-badge--flash {
    animation: mpr-flash-pulse 1.5s ease-in-out infinite;
}

@keyframes mpr-flash-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

/* Countdown timer */
.mpr-countdown {
    display: flex;
    gap: 0.5rem;
    justify-content: center;
    margin: 1rem 0;
}

.mpr-countdown__block {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 50px;
}

.mpr-countdown__value {
    font-size: 1.5rem;
    font-weight: 700;
    color: #232323;
    line-height: 1;
}

.mpr-countdown__label {
    font-size: 0.65rem;
    text-transform: uppercase;
    color: #666;
    margin-top: 4px;
}

.mpr-countdown__separator {
    font-size: 1.5rem;
    font-weight: 700;
    color: #232323;
    line-height: 1;
}

/* Countdown - Flip style */
.mpr-countdown--flip .mpr-countdown__value {
    background: #232323;
    color: #fff;
    padding: 8px 12px;
    border-radius: 4px;
    font-family: monospace;
}

/* Countdown - Circle style */
.mpr-countdown--circle .mpr-countdown__block {
    position: relative;
    width: 60px;
    height: 60px;
}

.mpr-countdown--circle .mpr-countdown__value {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 1.25rem;
}

.mpr-countdown--circle .mpr-countdown__ring {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 3px solid #e5e5e5;
    border-top-color: var(--mpr-countdown-color, #2fb5d2);
    animation: mpr-ring-spin 1s linear infinite;
}

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

/* Price display with campaign */
.mpr-campaign-price {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.mpr-campaign-price__original {
    font-size: 0.85rem;
    color: #999;
    text-decoration: line-through;
}

.mpr-campaign-price__current {
    font-size: 1.25rem;
    font-weight: 700;
    color: #ff0000;
}

.mpr-campaign-price__savings {
    font-size: 0.75rem;
    color: #4caf50;
    font-weight: 600;
}

/* Product listing campaign overlay */
.mpr-product-campaign {
    position: relative;
}

.mpr-product-campaign::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border: 2px solid var(--mpr-badge-bg, #ff0000);
    border-radius: 4px;
    pointer-events: none;
}

/* Urgency indicator */
.mpr-urgency {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem;
    background: #fff3e0;
    border-radius: 4px;
    font-size: 0.85rem;
    color: #e65100;
}

.mpr-urgency__icon {
    width: 16px;
    height: 16px;
}

.mpr-urgency--low-stock {
    background: #ffebee;
    color: #c62828;
}

.mpr-urgency--ending-soon {
    background: #fff8e1;
    color: #f57f17;
}

/* =====================================================================
   DEAL WIDGET
   ===================================================================== */

/* Grid cell wrapper — matches product-miniature sizing */
.mpr-deal-cell {
    position: relative;
    min-height: 0;
}

.mpr-deal-cell--single_cell {
    /* Same footprint as one product-miniature */
}

.mpr-deal-cell--multi_cell {
    /* grid-column: span N set by JS */
}

.mpr-deal-cell--standalone {
    grid-column: 1 / -1;
}

/* Widget container */
.mpr-deal-widget {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    border-radius: 8px;
    overflow: hidden;
    border: 2px solid #ff4444;
    background: #fff;
}

.mpr-deal-widget--sold-out {
    border-color: #999;
    filter: grayscale(40%);
}

/* Header */
.mpr-deal-widget__header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.625rem 0.75rem;
    background: linear-gradient(135deg, #ff4444 0%, #cc0000 100%);
    color: #fff;
}

.mpr-deal-widget--sold-out .mpr-deal-widget__header {
    background: linear-gradient(135deg, #888 0%, #555 100%);
}

.mpr-deal-widget__title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    font-weight: 600;
    min-width: 0;
}

.mpr-deal-widget__discount {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.125rem 0.5rem;
    background: rgba(255,255,255,0.25);
    border-radius: 3px;
    font-size: 0.9rem;
    font-weight: 700;
    white-space: nowrap;
}

.mpr-deal-widget__name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mpr-deal-widget__controls {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-shrink: 0;
}

.mpr-deal-widget__countdown {
    flex-shrink: 0;
}


.mpr-deal-widget__countdown .mpr-countdown {
    margin: 0;
    gap: 0.25rem;
}

.mpr-deal-widget__countdown .mpr-countdown__block {
    min-width: 28px;
}

.mpr-deal-widget__countdown .mpr-countdown__value {
    font-size: 0.9rem;
    color: #fff;
}

.mpr-deal-widget__countdown .mpr-countdown__label {
    font-size: 0.55rem;
    color: rgba(255,255,255,0.75);
}

.mpr-deal-widget__countdown .mpr-countdown__separator {
    font-size: 0.9rem;
    color: rgba(255,255,255,0.75);
}

/* Progress bar */
.mpr-deal-progress {
    padding: 0.5rem 0.75rem;
}

.mpr-deal-progress__bar {
    height: 8px;
    background: #e0e0e0;
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 0.375rem;
}

.mpr-deal-progress__fill {
    height: 100%;
    border-radius: 4px;
    background: linear-gradient(90deg, #4caf50, #ff9800);
    transition: width 0.6s ease;
}

/* Color shift by percent via data attribute — handled by JS */
.mpr-deal-progress__fill[data-percent] {
    /* JS sets inline background based on percent */
}

.mpr-deal-progress__text {
    font-size: 0.75rem;
    color: #555;
    text-align: center;
}

.mpr-deal-progress__claimed {
    font-weight: 700;
    color: #e65100;
}

.mpr-deal-progress__total {
    font-weight: 600;
}

.mpr-deal-progress__sold-out {
    font-weight: 700;
    color: #c62828;
    text-transform: uppercase;
}

/* Circle progress */
.mpr-deal-progress--circle {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.mpr-deal-progress__circle {
    width: 50px;
    height: 50px;
    flex-shrink: 0;
}

.mpr-deal-progress__circle-bg {
    fill: none;
    stroke: #e0e0e0;
    stroke-width: 3;
}

.mpr-deal-progress__circle-fill {
    fill: none;
    stroke: #ff9800;
    stroke-width: 3;
    stroke-linecap: round;
    transition: stroke-dasharray 0.6s ease;
}

.mpr-deal-progress__circle-text {
    fill: #333;
    font-size: 0.5rem;
    text-anchor: middle;
    font-weight: 700;
}

/* Text-only progress */
.mpr-deal-progress--text .mpr-deal-progress__bar {
    display: none;
}

.mpr-deal-progress--text .mpr-deal-progress__text {
    font-size: 0.85rem;
    font-weight: 600;
    padding: 0.25rem 0;
}

/* Products area */
.mpr-deal-products {
    position: relative;
    flex: 1;
    overflow: hidden;
}

.mpr-deal-products__track {
    display: flex;
    transition: transform 0.4s ease;
}

.mpr-deal-products__slide {
    flex: 0 0 100%;
    min-width: 0;
}

/* Single-cell: only show active slide */
.mpr-deal-single .mpr-deal-products__slide {
    display: none;
}

.mpr-deal-single .mpr-deal-products__slide--active {
    display: block;
}

/* Multi-cell carousel: show slides side by side */
.mpr-deal-carousel .mpr-deal-products__track {
    /* width managed by JS */
}

/* Legacy navigation buttons (kept for grid-injected widgets) */
.mpr-deal-products__btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 50%;
    background: rgba(0,0,0,0.5);
    color: #fff;
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5;
    transition: background 0.2s;
}

.mpr-deal-products__btn:hover {
    background: rgba(0,0,0,0.7);
}

.mpr-deal-products__btn--prev {
    left: 4px;
}

.mpr-deal-products__btn--next {
    right: 4px;
}

/* Sold out overlay */
.mpr-deal-widget__overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.45);
    z-index: 10;
    pointer-events: none;
}

.mpr-deal-widget__overlay-text {
    padding: 0.5rem 1.5rem;
    background: rgba(0,0,0,0.75);
    color: #fff;
    font-size: 1.25rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 2px;
    border-radius: 4px;
}

/* Standalone widget — constrain to theme container width */
.mpr-deal-standalone {
    width: 100%;
    max-width: 1320px;
    margin: 1.5rem auto;
    padding: 0 12px;
    justify-self: center;
    box-sizing: border-box;
}

.mpr-deal-standalone .mpr-deal-widget {
    max-width: 100%;
    box-shadow: 0 2px 12px rgba(0,0,0,0.08);
}

/* Responsive */

@media (max-width: 767px) {
    .mpr-countdown__value {
        font-size: 1.25rem;
    }

    .mpr-countdown__block {
        min-width: 40px;
    }

    .mpr-deal-cell--multi_cell {
        grid-column: 1 / -1 !important;
    }

    .mpr-deal-widget__header {
        flex-direction: column;
        align-items: flex-start;
    }

}