/* Main Container */
.carvil-promo-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 40px 20px;
    font-family: 'Inter', sans-serif;
    /* Fallback if not loaded, but preferred */
}

/* Global Banner */
.carvil-global-banner {
    background: linear-gradient(90deg, var(--cp-primary, #FF3366) 0%, var(--cp-secondary, #FF6B6B) 100%);
    color: #fff;
    text-align: center;
    padding: 10px;
    font-weight: 700;
    font-size: 1rem;
    position: relative;
    z-index: 9999;
}

.carvil-global-banner a {
    color: #fff;
    text-decoration: none;
    display: block;
}

.carvil-global-banner a:hover {
    text-decoration: underline;
}

/* Section Title */
.cp-section-title {
    text-align: center;
    margin-bottom: 40px;
    font-weight: 800;
    /* Use configurable variables */
    background: transparent;
    font-size: 2.5em;
    margin-bottom: 30px;
    position: relative;
    display: inline-block;
    width: 100%;
    margin-top: 20px;
}

.cp-section-title span {
    background: var(--cp-section-bg, #FF3366);
    color: var(--cp-section-text, #ffffff);
    padding: 10px 30px;
    border-radius: 50px;
    display: inline-block;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.cp-section-title:after {
    display: none;
}

/* --- CARD STYLING --- */
.carvil-promo-card {
    background: var(--cp-card-bg, #ffffff);
    border-radius: var(--cp-card-radius, 12px);
    overflow: hidden;
    position: relative;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* Card Shadows */
.cp-card-shadow-none {
    box-shadow: none;
    border: 1px solid #eee;
}

.cp-card-shadow-soft {
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}

.cp-card-shadow-hard {
    box-shadow: 5px 5px 0px rgba(0, 0, 0, 0.1);
    border: 2px solid #000;
}

.cp-card-shadow-bevel {
    box-shadow: inset 2px 2px 5px rgba(255, 255, 255, 0.7), inset -2px -2px 5px rgba(0, 0, 0, 0.1), 5px 5px 10px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(0, 0, 0, 0.05);
}

.carvil-promo-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
}

/* Badge Font Size */
.cp-badge-val {
    font-size: var(--cp-badge-font-size, 14px) !important;
}

/* --- LAYOUT GRID --- */
.carvil-promo-container.cp-grid-layout {
    display: grid;
    grid-template-columns: repeat(var(--cp-grid-cols, 3), 1fr);
    gap: 30px;
    justify-content: center;
}

/* Responsive Grid Overrides */
@media (max-width: 1024px) {
    .carvil-promo-container.cp-grid-layout {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .carvil-promo-container.cp-grid-layout {
        grid-template-columns: 1fr;
    }

    .cp-hero-carousel {
        height: 200px;
    }
}

/* HIGHLIGHT LAYOUT (class-based approach) */
.carvil-promo-container.cp-highlight-first .cp-highlighted-card {
    grid-column: span 2;
    grid-row: span 2;
    display: flex;
    flex-direction: column;
}

.carvil-promo-container.cp-highlight-first .cp-highlighted-card .cp-image-wrapper {
    height: 100%;
    padding-top: 60%;
}

/* Fallback for highlight on mobile */
@media (max-width: 768px) {
    .carvil-promo-container.cp-highlight-first .cp-highlighted-card {
        grid-column: span 1 !important;
        grid-row: span 1 !important;
    }
}


/* --- DEEP CUSTOMIZATION: TIMER STYLES --- */
.cp-global-timer-container.cp-timer-circle .cp-time-card {
    border-radius: 50%;
    width: 70px;
    height: 70px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.cp-global-timer-container.cp-timer-minimal .cp-time-card {
    background: transparent !important;
    box-shadow: none;
    padding: 0;
}

.cp-global-timer-container.cp-timer-minimal span {
    font-size: 3em;
    font-weight: 300;
    color: var(--cp-timer-bg);
    /* Use block color as text color for minimal */
}

.cp-global-timer-container.cp-timer-minimal small {
    color: #555;
    text-transform: uppercase;
    font-size: 0.6em;
    letter-spacing: 2px;
}

/* --- HERO CAROUSEL (FADE) --- */
.cp-hero-carousel {
    position: relative;
    width: 100%;
    height: var(--cp-carousel-height, 350px);
    overflow: hidden;
    margin-bottom: 40px;
    border-radius: 12px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

@media (max-width: 768px) {
    .cp-hero-carousel {
        height: calc(var(--cp-carousel-height, 350px) * 0.6);
    }
}

.cp-carousel-track {
    width: 100%;
    height: 100%;
    position: relative;
    /* No transform transition for fade */
}

.cp-carousel-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: opacity 1s ease-in-out;
    /* SMOOTH FADE */
    z-index: 1;
}

.cp-carousel-slide.active {
    opacity: 1;
    z-index: 2;
}

/* Video Slides */
.cp-slide-video {
    background: #000;
}

.cp-slide-video-el {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    transform: translate(-50%, -50%);
    object-fit: cover;
}

.cp-carousel-dots {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 10px;
    z-index: 10;
}

.cp-dot {
    width: 12px;
    height: 12px;
    background: rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    cursor: pointer;
    transition: 0.3s;
}

.cp-dot.active {
    background: #fff;
    transform: scale(1.2);
}

/* --- CARD (additional styles, vars defined above at line ~60) --- */
/* font-family applied here since it's not in the first block */
.carvil-promo-card {
    border: 1px solid rgba(0, 0, 0, 0.05);
    font-family: var(--cp-font-family, sans-serif);
}

/* Image Wrapper */
.cp-image-wrapper {
    position: relative;
    overflow: hidden;
    padding-top: 100%;
    /* 1:1 Aspect Ratio */
}

.cp-image-wrapper img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.carvil-promo-card:hover .cp-image-wrapper img {
    transform: scale(1.05);
}

/* Badge */
.cp-badge {
    position: absolute;
    top: 15px;
    left: 15px;
    background: linear-gradient(135deg, var(--cp-badge-color-1, #FF3366), var(--cp-badge-color-2, #FF6B6B));
    color: var(--cp-badge-text-color, #fff);
    width: 50px;
    height: 50px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: var(--cp-badge-radius, 50%);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    z-index: 10;
    line-height: 1.1;
    font-weight: bold;
}

.cp-badge-val {
    font-size: 14px;
}

.cp-badge-lbl {
    font-size: 9px;
    text-transform: uppercase;
    opacity: 0.9;
}

/* --- GLOBAL TIMER (Cute / Pro Style) --- */
@keyframes carvil-groovy-pulse {
    0% {
        transform: scale(1);
        box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
    }

    50% {
        transform: scale(1.02);
        box-shadow: 0 20px 45px rgba(0, 0, 0, 0.3);
    }

    100% {
        transform: scale(1);
        box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
    }
}

@keyframes carvil-bg-shift {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

.cp-global-timer-container {
    background: var(--cp-timer-bg, #FF3366);
    background: linear-gradient(135deg, var(--cp-timer-bg, #FF3366) 0%, color-mix(in srgb, var(--cp-timer-bg, #FF3366) 70%, #000) 150%);
    background-size: 200% 200%;
    animation: carvil-groovy-pulse 3s infinite ease-in-out, carvil-bg-shift 8s ease infinite;

    color: var(--cp-timer-text, #ffffff);
    padding: 30px;
    margin-bottom: 40px;
    text-align: center;
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

/* Shine effect */
.cp-global-timer-container::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 70%);
    z-index: 1;
    pointer-events: none;
}

.cp-global-timer-title {
    margin: 0 0 20px 0;
    font-size: 2em;
    color: var(--cp-timer-text, #ffffff);
    text-transform: var(--cp-timer-transform, uppercase);
    letter-spacing: 3px;
    font-weight: 800;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
    z-index: 2;
}

.cp-global-clock {
    display: flex;
    gap: 15px;
    font-family: var(--cp-font-family, sans-serif);
    font-weight: bold;
    z-index: 2;
    flex-wrap: wrap;
    /* Safe wrapping for mobile */
    justify-content: center;
}

.cp-time-card {
    background: rgba(255, 255, 255, 0.95);
    color: #333;
    padding: 15px;
    min-width: 80px;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.cp-time-card:hover {
    transform: translateY(-5px) scale(1.05);
}

.cp-time-card span {
    font-size: 2.5em;
    line-height: 1;
    font-weight: 900;
    color: #333;
}

.cp-time-card small {
    text-transform: uppercase;
    font-size: 0.75em;
    font-weight: 700;
    color: #666;
    margin-top: 5px;
    letter-spacing: 1px;
}

.cp-sep {
    font-size: 3em;
    line-height: 1;
    margin-top: 10px;
    color: rgba(255, 255, 255, 0.8);
    display: none;
    /* Hide separators for card style */
}

/* Seconds in different color? */
.cp-seconds-card span {
    color: #FF3366;
}

/* Actions Overlay (Buttons) */
.cp-actions {
    position: absolute;
    bottom: 70px;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    gap: 15px;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.3s ease;
    z-index: 10;
    pointer-events: none;
}

.carvil-promo-card:hover .cp-actions {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
    /* Enable on hover */
}

/* Buttons */
.cp-btn-cart,
.cp-btn-view {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    background: var(--cp-btn-bg, #fff);
    color: var(--cp-btn-text, #333);
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    transition: all 0.2s ease;
    cursor: pointer;
}

.cp-btn-cart:hover,
.cp-btn-view:hover {
    background: var(--cp-btn-text, #333);
    color: var(--cp-btn-bg, #fff);
    transform: scale(1.1);
}

.cp-btn-cart span,
.cp-btn-view span {
    font-size: 20px;
}

/* Card Timer Overlay */
.cp-timer-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
    padding: 8px;
    text-align: center;
    transform: translateY(100%);
    transition: transform 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 0.9em;
}

/* If global timer is off, maybe show card timer always? 
   For now adhere to "hover" unless user wants otherwise. 
   User said "Show card timer". Let's make it visible on hover OR always if configured? 
   Let's stick to hover effect for aesthetics unless requested otherwise. */
.carvil-promo-card:hover .cp-timer-overlay {
    transform: translateY(0);
}

/* Details */
.cp-details {
    padding: 20px;
    text-align: center;
}

.cp-title {
    font-size: 1.1em;
    margin: 0 0 10px 0;
    line-height: 1.4;
    font-weight: 600;
}

.cp-title a {
    color: var(--cp-title-color, #333);
    text-decoration: none;
    transition: color 0.2s;
}

.cp-title a:hover {
    color: var(--cp-badge-color-1);
}

/* Price Box */
.cp-price-box {
    display: flex;
    justify-content: center;
    align-items: baseline;
    gap: 10px;
}

.cp-price-row {
    display: flex;
    align-items: baseline;
    gap: 10px;
}

.cp-old-price {
    text-decoration: line-through;
    color: #999;
    font-size: 0.9em;
}

.cp-old-price del {
    opacity: 1;
    /* WooCommerce sometimes fades it */
}

.cp-new-price {
    color: var(--cp-badge-color-1, #FF3366);
    font-weight: bold;
    font-size: 1.2em;
}

.cp-new-price ins {
    text-decoration: none;
}

/* Animations */
@keyframes bounceIn {
    0% {
        transform: scale(0);
        opacity: 0;
    }

    50% {
        transform: scale(1.2);
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/* Empty State */
.cp-no-promos {
    text-align: center;
    padding: 60px;
    background: #f8f9fa;
    border-radius: 10px;
    color: #666;
    font-size: 1.2rem;
}

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

/* --- TABLET (max-width: 768px) --- */
@media (max-width: 768px) {

    /* Section Title */
    .cp-section-title {
        font-size: 1.8em;
        margin-bottom: 20px;
    }

    .cp-section-title span {
        padding: 8px 20px;
    }

    /* Global Timer */
    .cp-global-timer-container {
        padding: 20px 15px;
        border-radius: 14px;
        margin-bottom: 25px;
    }

    .cp-global-timer-title {
        font-size: 1.4em;
        letter-spacing: 1.5px;
        margin-bottom: 15px;
    }

    .cp-global-clock {
        gap: 10px;
    }

    .cp-time-card {
        min-width: 60px;
        padding: 10px;
        border-radius: 10px;
    }

    .cp-time-card span {
        font-size: 1.8em;
    }

    .cp-time-card small {
        font-size: 0.65em;
    }

    /* Cards */
    .carvil-promo-container {
        padding: 20px 15px;
    }

    .carvil-promo-container.cp-grid-layout {
        gap: 20px;
    }

    .cp-details {
        padding: 15px;
    }

    .cp-title {
        font-size: 1em;
    }

    /* Touch devices: always show actions & timer (no hover!) */
    .cp-actions {
        opacity: 1;
        transform: translateY(0);
        pointer-events: auto;
    }

    .cp-timer-overlay {
        transform: translateY(0);
    }

    /* Shrink action buttons slightly */
    .cp-btn-cart,
    .cp-btn-view {
        width: 40px;
        height: 40px;
    }

    .cp-btn-cart span,
    .cp-btn-view span {
        font-size: 18px;
    }

    /* Carousel */
    .cp-carousel-dots {
        bottom: 12px;
    }

    .cp-dot {
        width: 14px;
        height: 14px;
    }

    /* Empty state */
    .cp-no-promos {
        padding: 40px 20px;
        font-size: 1rem;
    }
}

/* --- MOBILE (max-width: 600px) --- */
@media (max-width: 600px) {

    /* Single column grid */
    .carvil-promo-container.cp-grid-layout {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    /* Section Title */
    .cp-section-title {
        font-size: 1.4em;
        margin-bottom: 15px;
        margin-top: 10px;
    }

    .cp-section-title span {
        padding: 6px 16px;
        font-size: 0.9em;
    }

    /* Global Timer */
    .cp-global-timer-container {
        padding: 15px 10px;
        border-radius: 10px;
        margin-bottom: 20px;
    }

    .cp-global-timer-title {
        font-size: 1.1em;
        letter-spacing: 1px;
        margin-bottom: 10px;
    }

    .cp-time-card {
        min-width: 50px;
        padding: 8px 6px;
        border-radius: 8px;
    }

    .cp-time-card span {
        font-size: 1.5em;
    }

    .cp-time-card small {
        font-size: 0.55em;
        margin-top: 3px;
    }

    .cp-global-clock {
        gap: 8px;
    }

    /* Cards */
    .carvil-promo-container {
        padding: 15px 10px;
    }

    .cp-details {
        padding: 12px 10px;
    }

    .cp-title {
        font-size: 0.95em;
        margin-bottom: 6px;
    }

    .cp-price-row {
        gap: 8px;
    }

    .cp-old-price {
        font-size: 0.8em;
    }

    .cp-new-price {
        font-size: 1.05em;
    }

    /* Badge */
    .cp-badge {
        width: 44px;
        height: 44px;
        top: 10px;
        left: 10px;
    }

    .cp-badge-val {
        font-size: 12px !important;
    }

    /* Action buttons */
    .cp-actions {
        bottom: 55px;
        gap: 10px;
    }

    .cp-btn-cart,
    .cp-btn-view {
        width: 36px;
        height: 36px;
    }

    .cp-btn-cart span,
    .cp-btn-view span {
        font-size: 16px;
    }

    /* Timer overlay on card */
    .cp-timer-overlay {
        font-size: 0.8em;
        padding: 6px;
        gap: 5px;
    }

    /* Banner */
    .carvil-global-banner {
        font-size: 0.85rem;
        padding: 8px 10px;
    }

    /* Carousel */
    .cp-dot {
        width: 12px;
        height: 12px;
    }

    /* Card hover effects off on mobile */
    .carvil-promo-card:hover {
        transform: none;
    }

    .carvil-promo-card:hover .cp-image-wrapper img {
        transform: none;
    }

    /* Empty state */
    .cp-no-promos {
        padding: 30px 15px;
        font-size: 0.95rem;
    }
}

/* --- SMALL MOBILE (max-width: 400px) --- */
@media (max-width: 400px) {
    .cp-section-title {
        font-size: 1.2em;
    }

    .cp-global-timer-title {
        font-size: 0.95em;
    }

    .cp-time-card {
        min-width: 42px;
        padding: 6px 4px;
    }

    .cp-time-card span {
        font-size: 1.2em;
    }

    .cp-badge {
        width: 40px;
        height: 40px;
    }

    .cp-badge-val {
        font-size: 11px !important;
    }
}