/**
 * Woo Popup Checkout - Frontend Styles
 */

/* CSS Variables - Releaseit Style */
:root {
    --wpc-primary: #ff6b35;
    /* Vibrant coral/orange */
    --wpc-primary-hover: #ff5722;
    /* Darker on hover */
    --wpc-success: #10b981;
    /* Modern green */
    --wpc-border: #e5e7eb;
    /* Light gray border */
    --wpc-text: #1f2937;
    /* Dark gray text */
    --wpc-text-light: #6b7280;
    /* Medium gray */
    --wpc-bg: #f9fafb;
    /* Very light gray bg */
    --wpc-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
    --wpc-shadow-lg: 0 20px 40px rgba(0, 0, 0, 0.12);
    --wpc-radius: 12px;
    /* Modern border radius */
}

/* Buy Now Button - Releaseit Style */
.wpc-buy-now-btn:not(.wpc-el-btn) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px 32px;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    border: none !important;
    outline: none !important;
    transition: background-color 0.3s ease, box-shadow 0.3s ease, transform 0.15s ease;
    margin-top: 12px;
    text-transform: none;
    letter-spacing: 0.3px;
    border-radius: var(--wpc-radius);
    box-shadow: var(--wpc-shadow);
    will-change: transform;
}

.wpc-buy-now-btn:not(.wpc-el-btn):hover {
    transform: translateY(-3px);
    box-shadow: var(--wpc-shadow-lg);
}

.wpc-buy-now-btn:active {
    transform: translateY(-1px);
}

/* ========================================
   BUTTON IDLE ANIMATIONS
   ======================================== */

/* 2. Heartbeat */
@keyframes wpcBtnHeartbeat {
    0%, 100% { transform: scale(1); }
    14%      { transform: scale(1.05); }
    28%      { transform: scale(1); }
    42%      { transform: scale(1.03); }
    70%      { transform: scale(1); }
}

/* 3. Breathing */
@keyframes wpcBtnBreathing {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.025); }
}

/* 4. Shine Loop */
@keyframes wpcBtnShineLoop {
    0%        { left: -100%; }
    40%, 100% { left: 130%; }
}

/* 6. Float */
@keyframes wpcBtnFloat {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-5px); }
}

/* 7. Attention Shake */
@keyframes wpcBtnShakeAttn {
    0%, 80%, 100% { transform: rotate(0deg); }
    83%           { transform: rotate(-2.5deg); }
    86%           { transform: rotate(2.5deg); }
    89%           { transform: rotate(-2deg); }
    92%           { transform: rotate(2deg); }
    95%           { transform: rotate(-1deg); }
    98%           { transform: rotate(1deg); }
}

/* 8. Arrow Bounce */
@keyframes wpcBtnArrowBounce {
    0%, 100% { transform: translateX(0); }
    50%      { transform: translateX(6px); }
}

/* Buy Now — animation classes */
.wpc-buy-now-btn.wpc-anim-pulse_glow   { animation: wpcBtnPulseGlowBuy 2s ease-in-out infinite; }
.wpc-buy-now-btn.wpc-anim-heartbeat    { animation: wpcBtnHeartbeat 1.5s ease-in-out infinite; }
.wpc-buy-now-btn.wpc-anim-breathing    { animation: wpcBtnBreathing 3s ease-in-out infinite; }
.wpc-buy-now-btn.wpc-anim-float        { animation: wpcBtnFloat 2.5s ease-in-out infinite; }
.wpc-buy-now-btn.wpc-anim-shake_attn   { animation: wpcBtnShakeAttn 3.5s ease-in-out infinite; }

@keyframes wpcBtnPulseGlowBuy {
    0%, 100% { box-shadow: 0 0 0 0 rgba(var(--wpc-btn-glow-rgb, 40,167,69), 0.5); }
    50%       { box-shadow: 0 0 0 9px rgba(var(--wpc-btn-glow-rgb, 40,167,69), 0); }
}

.wpc-buy-now-btn.wpc-anim-shine_loop   { position: relative; overflow: hidden; }
.wpc-buy-now-btn.wpc-anim-shine_loop::after {
    content: '';
    position: absolute;
    top: 0; left: -100%;
    width: 55%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.32), transparent);
    transform: skewX(-20deg);
    animation: wpcBtnShineLoop 2.5s ease-in-out infinite;
}

.wpc-buy-now-btn.wpc-anim-arrow_bounce .wpc-btn-arrow {
    display: inline-block;
    margin-left: 6px;
    animation: wpcBtnArrowBounce 1s ease-in-out infinite;
}

/* Place Order — same animation classes */
.wpc-place-order-btn.wpc-anim-pulse_glow   { animation: wpcBtnPulseGlowPlace 2s ease-in-out infinite; }
.wpc-place-order-btn.wpc-anim-heartbeat    { animation: wpcBtnHeartbeat 1.5s ease-in-out infinite; }
.wpc-place-order-btn.wpc-anim-breathing    { animation: wpcBtnBreathing 3s ease-in-out infinite; }
.wpc-place-order-btn.wpc-anim-float        { animation: wpcBtnFloat 2.5s ease-in-out infinite; }
.wpc-place-order-btn.wpc-anim-shake_attn   { animation: wpcBtnShakeAttn 3.5s ease-in-out infinite; }

@keyframes wpcBtnPulseGlowPlace {
    0%, 100% { box-shadow: 0 0 0 0 rgba(var(--wpc-place-glow-rgb, 40,167,69), 0.5); }
    50%       { box-shadow: 0 0 0 9px rgba(var(--wpc-place-glow-rgb, 40,167,69), 0); }
}

.wpc-place-order-btn.wpc-anim-shine_loop   { position: relative; overflow: hidden; }
.wpc-place-order-btn.wpc-anim-shine_loop::after {
    content: '';
    position: absolute;
    top: 0; left: -100%;
    width: 55%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.32), transparent);
    transform: skewX(-20deg);
    animation: wpcBtnShineLoop 2.5s ease-in-out infinite;
}

.wpc-place-order-btn.wpc-anim-arrow_bounce .wpc-btn-arrow {
    display: inline-block;
    margin-left: 6px;
    animation: wpcBtnArrowBounce 1s ease-in-out infinite;
}

/* Disable animations when reduced-motion is preferred */
@media (prefers-reduced-motion: reduce) {
    .wpc-buy-now-btn[class*="wpc-anim-"],
    .wpc-place-order-btn[class*="wpc-anim-"],
    .wpc-buy-now-btn.wpc-anim-shine_loop::after,
    .wpc-place-order-btn.wpc-anim-shine_loop::after {
        animation: none !important;
    }
}

/* Popup Overlay */
.wpc-popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    box-sizing: border-box;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

/* Popup Container - ALWAYS LIGHT MODE - Releaseit Style */
.wpc-popup-container {
    background: #fff !important;
    color: var(--wpc-body-text, #333) !important;
    width: 100%;
    max-width: 520px;
    max-height: 95vh;
    overflow-y: auto;
    box-shadow: var(--wpc-popup-shadow, 0 20px 40px rgba(0,0,0,0.12));
    animation: wpcSlideIn 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    color-scheme: light !important;
    border-radius: var(--wpc-radius);
    font-family: var(--wpc-font-family, inherit);
}

@keyframes wpcSlideIn {
    from { opacity: 0; transform: translateY(-30px) scale(0.95); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes wpcFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes wpcZoomIn {
    from { opacity: 0; transform: scale(0.85); }
    to   { opacity: 1; transform: scale(1); }
}
@keyframes wpcSlideUp {
    from { opacity: 0; transform: translateY(40px); }
    to   { opacity: 1; transform: translateY(0); }
}

.wpc-popup-container.wpc-anim-fadeIn  { animation: wpcFadeIn  0.3s ease; }
.wpc-popup-container.wpc-anim-zoomIn  { animation: wpcZoomIn  0.3s cubic-bezier(0.34, 1.56, 0.64, 1); }
.wpc-popup-container.wpc-anim-slideUp { animation: wpcSlideUp 0.35s cubic-bezier(0.4, 0, 0.2, 1); }
.wpc-popup-container.wpc-anim-none    { animation: none; }
.wpc-popup-container.wpc-anim-slideDown { animation: wpcSlideIn 0.35s cubic-bezier(0.4, 0, 0.2, 1); }

/* Popup Header - Uses Dashboard Settings */
.wpc-popup-header {
    padding: 20px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: sticky;
    top: 0;
    z-index: 100;
    /* background-color is set by PHP inline style */
}

.wpc-popup-header h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    color: var(--wpc-popup-header-text, #ffffff) !important;
    letter-spacing: 0.3px;
}

.wpc-popup-close {
    background: rgba(255, 255, 255, 0.2) !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.2s ease;
    padding: 0 !important;
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    max-width: 34px !important;
    min-height: 34px !important;
    max-height: 34px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 50% !important;
    -webkit-border-radius: 50% !important;
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
    appearance: none;
    -webkit-appearance: none;
}

.wpc-popup-close::before,
.wpc-popup-close::after {
    content: '';
    position: absolute;
    width: 14px;
    height: 2.5px;
    border-radius: 2px;
    background-color: var(--wpc-popup-header-text, #ffffff);
    transition: transform 0.2s ease;
}

.wpc-popup-close::before {
    transform: rotate(45deg);
}

.wpc-popup-close::after {
    transform: rotate(-45deg);
}

.wpc-popup-close:hover {
    background: rgba(255, 255, 255, 0.35) !important;
    border-color: rgba(255, 255, 255, 0.5) !important;
    transform: scale(1.08);
}

.wpc-popup-close:hover::before {
    transform: rotate(45deg) scale(1.1);
}

.wpc-popup-close:hover::after {
    transform: rotate(-45deg) scale(1.1);
}

.wpc-popup-close:active {
    transform: scale(0.95);
    background: rgba(255, 255, 255, 0.45) !important;
}

/* Popup Content */
.wpc-popup-content {
    padding: 0;
    background: #fff !important;
}

/* ========================================
   SKELETON LOADER — replaces spinner
   ======================================== */
.wpc-skeleton {
    padding: 20px 24px;
    background: #fff !important;
}

@keyframes wpcSkeletonShimmer {
    0% { background-position: -400px 0; }
    100% { background-position: 400px 0; }
}

.wpc-skel {
    background: linear-gradient(90deg, #f0f1f3 25%, #e4e6e8 50%, #f0f1f3 75%);
    background-size: 800px 100%;
    animation: wpcSkeletonShimmer 1.4s ease-in-out infinite;
    border-radius: 6px;
}

/* Product row */
.wpc-skel-product {
    display: flex;
    gap: 14px;
    margin-bottom: 20px;
}

.wpc-skel-image {
    width: 65px;
    height: 65px;
    flex-shrink: 0;
    border-radius: 10px;
}

.wpc-skel-details {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
    justify-content: center;
}

.wpc-skel-title {
    height: 14px;
    width: 70%;
}

.wpc-skel-price {
    height: 18px;
    width: 40%;
    border-radius: 4px;
}

/* Section blocks */
.wpc-skel-section {
    margin-bottom: 16px;
}

.wpc-skel-section-head {
    height: 13px;
    width: 30%;
    margin-bottom: 12px;
    border-radius: 4px;
}

.wpc-skel-field {
    height: 44px;
    width: 100%;
    border-radius: 10px;
    margin-bottom: 10px;
}

.wpc-skel-field-half {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 10px;
}

.wpc-skel-field-half .wpc-skel {
    height: 44px;
    border-radius: 10px;
}

/* Button */
.wpc-skel-button {
    height: 56px;
    width: 100%;
    border-radius: 12px;
    margin-top: 4px;
}

/* Loading State — keep for fallback */
.wpc-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    background: #fff !important;
}

.wpc-spinner {
    width: 50px;
    height: 50px;
    border: 3px solid var(--wpc-border);
    border-top-color: var(--wpc-primary);
    border-radius: 50%;
    animation: wpcSpin 0.8s linear infinite;
}

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

.wpc-loading p {
    margin-top: 15px;
    color: var(--wpc-text-light);
    font-size: 14px;
}

/* Checkout Form */
.wpc-checkout-form {
    padding: 0;
    background: #fff !important;
}

/* Section Styles - Releaseit Modern */
.wpc-section {
    padding: 24px;
    border-bottom: 1px solid #f3f4f6;
    background: #fff !important;
}

.wpc-section:last-of-type {
    border-bottom: none;
}

.wpc-section-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: var(--wpc-section-title-size, 15px);
    font-weight: 700;
    color: var(--wpc-section-title-color, #1f2937);
    margin: 0 0 16px 0;
    padding-bottom: 0;
    border-bottom: none;
}

.wpc-section-icon {
    font-size: 18px;
    color: var(--wpc-primary);
}

/* ========================================
   URGENCY COUNTDOWN TIMER - PROFESSIONAL DESIGN
   Supports: minimal, blocks, glassmorphism styles
   ======================================== */
.wpc-urgency-timer {
    --timer-font-size: 24px;
    margin: 16px;
    padding: 0;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
    position: relative;
}

/* Pulse Animation */
.wpc-urgency-timer.wpc-timer-pulse {
    animation: wpcTimerGlow 2s ease-in-out infinite;
    will-change: box-shadow;
}

@keyframes wpcTimerGlow {

    0%,
    100% {
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
    }

    50% {
        box-shadow: 0 4px 30px rgba(255, 107, 53, 0.5), 0 0 20px rgba(255, 107, 53, 0.3);
    }
}

.wpc-timer-content {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    flex-wrap: wrap;
    padding: 18px 24px;
}

/* Timer Icon */
.wpc-timer-icon {
    font-size: 28px;
    animation: wpcIconBounce 1.5s ease-in-out infinite;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
}

@keyframes wpcIconBounce {

    0%,
    100% {
        transform: scale(1) rotate(0deg);
    }

    25% {
        transform: scale(1.1) rotate(-5deg);
    }

    75% {
        transform: scale(1.1) rotate(5deg);
    }
}

/* Timer Message */
.wpc-timer-message {
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.3px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

/* Timer Countdown Container */
.wpc-timer-countdown {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Time Block Design */
.wpc-time-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    padding: 8px 14px;
    min-width: 54px;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.wpc-time-value {
    font-size: var(--timer-font-size);
    font-weight: 800;
    line-height: 1;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    font-family: 'SF Mono', 'Courier New', monospace;
}

.wpc-time-label {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    opacity: 0.85;
    margin-top: 4px;
}

/* Timer Separator */
.wpc-timer-separator {
    font-size: calc(var(--timer-font-size) * 0.9);
    font-weight: 800;
    animation: wpcBlink 1s step-end infinite;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

@keyframes wpcBlink {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.3;
    }
}

/* Progress Bar */
.wpc-timer-progress {
    height: 4px;
    background: rgba(0, 0, 0, 0.15);
    overflow: hidden;
}

.wpc-timer-progress-bar {
    height: 100%;
    transition: width 1s linear;
    width: 100%;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
    position: relative;
}

.wpc-timer-progress-bar::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    animation: wpcShimmer 2s infinite;
}

@keyframes wpcShimmer {
    0% {
        transform: translateX(-100%);
    }

    100% {
        transform: translateX(100%);
    }
}

/* ========================================
   TIMER STYLE: MINIMAL
   ======================================== */
.wpc-timer-style-minimal .wpc-time-block {
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 4px 8px;
    min-width: auto;
    backdrop-filter: none;
}

.wpc-timer-style-minimal .wpc-timer-countdown {
    background: rgba(255, 255, 255, 0.2);
    padding: 10px 18px;
    border-radius: 30px;
}

.wpc-timer-style-minimal .wpc-time-value {
    font-size: calc(var(--timer-font-size) * 0.85);
}

/* ========================================
   TIMER STYLE: BLOCKS (Default - Premium)
   ======================================== */
.wpc-timer-style-blocks .wpc-time-block {
    background: rgba(0, 0, 0, 0.15);
    border: 2px solid rgba(255, 255, 255, 0.2);
    padding: 10px 16px;
    min-width: 60px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.wpc-timer-style-blocks .wpc-time-block:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
}

/* ========================================
   TIMER STYLE: GLASSMORPHISM
   ======================================== */
.wpc-timer-style-glassmorphism {
    background: rgba(255, 255, 255, 0.1) !important;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.wpc-timer-style-glassmorphism .wpc-time-block {
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(10px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1), inset 0 2px 0 rgba(255, 255, 255, 0.3);
}

.wpc-timer-style-glassmorphism .wpc-timer-progress {
    background: rgba(255, 255, 255, 0.1);
}

/* ========================================
   SHADOW INTENSITY LEVELS
   ======================================== */
/* No shadow when disabled */
.wpc-urgency-timer:not(.wpc-timer-shadow) {
    box-shadow: none;
}

/* Light shadow */
.wpc-urgency-timer.wpc-shadow-light {
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.wpc-urgency-timer.wpc-shadow-light.wpc-timer-pulse {
    animation: wpcTimerGlowLight 2s ease-in-out infinite;
}

@keyframes wpcTimerGlowLight {

    0%,
    100% {
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    }

    50% {
        box-shadow: 0 4px 15px rgba(255, 107, 53, 0.3);
    }
}

/* Medium shadow (default) */
.wpc-urgency-timer.wpc-shadow-medium {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

.wpc-urgency-timer.wpc-shadow-medium.wpc-timer-pulse {
    animation: wpcTimerGlow 2s ease-in-out infinite;
}

/* Strong shadow */
.wpc-urgency-timer.wpc-shadow-strong {
    box-shadow: 0 8px 35px rgba(0, 0, 0, 0.35);
}

.wpc-urgency-timer.wpc-shadow-strong.wpc-timer-pulse {
    animation: wpcTimerGlowStrong 2s ease-in-out infinite;
}

@keyframes wpcTimerGlowStrong {

    0%,
    100% {
        box-shadow: 0 8px 35px rgba(0, 0, 0, 0.35);
    }

    50% {
        box-shadow: 0 10px 50px rgba(255, 107, 53, 0.6), 0 0 30px rgba(255, 107, 53, 0.4);
    }
}

/* ========================================
   ANIMATION TOGGLE CLASSES
   ======================================== */
/* Disable icon animation */
.wpc-urgency-timer.wpc-no-icon-animation .wpc-timer-icon {
    animation: none;
}

/* Disable shimmer effect on progress bar */
.wpc-urgency-timer.wpc-no-shimmer .wpc-timer-progress-bar::after {
    display: none;
}

/* Disable blink animation on separator */
.wpc-urgency-timer.wpc-no-blink .wpc-timer-separator {
    animation: none;
    opacity: 1;
}

/* ========================================
   TIME BLOCK SHADOW LEVELS
   ======================================== */
/* No block shadow */
.wpc-urgency-timer:not(.wpc-block-shadow) .wpc-time-block {
    box-shadow: none;
}

/* Block shadow - None */
.wpc-urgency-timer.wpc-block-shadow-none .wpc-time-block {
    box-shadow: none;
}

/* Block shadow - Light */
.wpc-urgency-timer.wpc-block-shadow-light .wpc-time-block {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Block shadow - Medium */
.wpc-urgency-timer.wpc-block-shadow-medium .wpc-time-block {
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

/* Block shadow - Strong */
.wpc-urgency-timer.wpc-block-shadow-strong .wpc-time-block {
    box-shadow: 0 6px 25px rgba(0, 0, 0, 0.3), 0 2px 10px rgba(0, 0, 0, 0.15);
}

/* ========================================
   TIMER EXPIRED STATE
   ======================================== */
.wpc-urgency-timer.wpc-timer-expired {
    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%) !important;
    animation: wpcExpiredFlash 1s infinite;
    will-change: opacity;
}

@keyframes wpcExpiredPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.02); }
}

@keyframes wpcExpiredFlash {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.9; }
}

.wpc-timer-expired .wpc-timer-message {
    font-size: 16px;
    font-weight: 800;
    animation: wpcTextPulse 1s infinite;
}

@keyframes wpcTextPulse {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.02);
    }
}

.wpc-timer-expired .wpc-timer-countdown {
    display: none;
}

/* ========================================
   MOBILE RESPONSIVE
   ======================================== */
@media (max-width: 768px) {
    .wpc-urgency-timer {
        margin: 12px;
        --timer-font-size: 20px;
    }

    .wpc-timer-content {
        padding: 14px 18px;
        gap: 10px;
    }

    .wpc-timer-icon {
        font-size: 22px;
    }

    .wpc-timer-message {
        font-size: 13px;
        text-align: center;
        width: 100%;
    }

    .wpc-time-block {
        padding: 6px 10px;
        min-width: 46px;
    }

    .wpc-time-label {
        font-size: 9px;
    }

    .wpc-timer-style-minimal .wpc-timer-countdown {
        padding: 8px 14px;
    }
}

/* ========================================
   PRODUCT SUMMARY - RELEASEIT STYLE CARD
   ======================================== */
.wpc-product-summary {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #fafbfc !important;
    padding: 14px 16px;
    border-radius: 10px;
    border: 1px solid #f0f1f3;
}

.wpc-product-image {
    flex-shrink: 0;
    width: 72px;
    height: 72px;
}

.wpc-product-image img {
    width: 72px;
    height: 72px;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid var(--wpc-border);
    background: #fff;
    display: block;
}

.wpc-product-details {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.wpc-product-title {
    margin: 0;
    font-size: 13px;
    font-weight: 700;
    color: var(--wpc-text);
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.wpc-variation-attributes {
    margin: 0;
}

.wpc-variation-attr {
    display: inline-block;
    background: #e9ecef;
    padding: 2px 7px;
    border-radius: 4px;
    font-size: 11px;
    margin-right: 4px;
    color: #555;
}

/* Variable Options */
.wpc-variable-options {
    margin: 4px 0 0;
}

.wpc-attribute-row {
    margin-bottom: 8px;
}

.wpc-attribute-row label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 4px;
    color: var(--wpc-text);
}

.wpc-attribute-select {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--wpc-border) !important;
    border-radius: 8px;
    font-size: 14px;
    background: #fff !important;
}

/* ========================================
   QUANTITY + PRICE ROW
   Quantity left, Price right (stacked: regular top, offer bottom)
   ======================================== */
.wpc-price-qty-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 0;
}

.wpc-quantity-controls {
    order: 1;
    height: 24px !important;
}

.wpc-qty-btn {
    width: 24px;
    height: 22px;
    border: none !important;
    background: transparent !important;
    color: #333 !important;
    font-size: 14px;
    font-weight: 400;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s ease;
    user-select: none;
    padding: 0;
    line-height: 1;
}

.wpc-quantity-input {
    width: 28px;
    height: 22px;
    border: none !important;
    border-left: 1px solid #ddd !important;
    border-right: 1px solid #ddd !important;
    text-align: center;
    font-size: 12px;
    font-weight: 700;
    color: #333 !important;
    background: #fff !important;
    padding: 0;
    -moz-appearance: textfield;
    appearance: textfield;
    border-radius: 0 !important;
}

/* Price column right */
.wpc-product-price {
    order: 2;
    text-align: right;
}
}

/* Price column — stacked */
.wpc-product-price {
    display: flex;
    flex-direction: column;
    gap: 1px;
    flex-shrink: 0;
}

/* Regular (crossed) price — top */
.wpc-product-price del {
    display: block;
    color: #9ca3af;
    font-size: 12px;
    font-weight: 500;
    text-decoration: line-through;
    line-height: 1.3;
}

/* Offer / sale price — bottom */
.wpc-product-price ins,
.wpc-product-price > .woocommerce-Price-amount:not(del .woocommerce-Price-amount) {
    display: block;
    text-decoration: none;
    font-size: var(--wpc-price-size, 20px);
    font-weight: 800;
    color: var(--wpc-price-color, #10b981);
    line-height: 1.2;
}

/* When no sale — single price */
.wpc-product-price > .woocommerce-Price-amount {
    font-size: var(--wpc-price-size, 20px);
    font-weight: 800;
    color: var(--wpc-price-color, #10b981);
    line-height: 1.2;
}

/* Quantity Controls */
.wpc-quantity-controls {
    display: inline-flex;
    align-items: center;
    background: #eef0f2 !important;
    border-radius: 8px;
    overflow: hidden;
    height: 36px;
    border: 1.5px solid #ddd !important;
    flex-shrink: 0;
}

/* Billing Fields - Modern Clean Design */

/* ========================================
   FIELD ICON - INSIDE INPUT (PROFESSIONAL)
   ======================================== */
.wpc-icon-field-wrap {
    position: relative;
    display: flex;
    flex-direction: column;
}

/* Make sure the form-row takes full width and has relative positioning to serve as context if needed */
.wpc-icon-field-wrap .form-row {
    position: relative;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
    width: 100%;
}

.wpc-icon-field-wrap .wpc-field-icon {
    position: absolute;
    top: 0;
    left: 0;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.08);
    font-size: 14px;
    z-index: 2;
    pointer-events: none;
    transition: background 0.3s ease;
    border-radius: 10px 0 0 10px;
}

/* When focused, slightly darken the icon bg */
.wpc-icon-field-wrap:focus-within .wpc-field-icon {
    background: rgba(0, 0, 0, 0.12);
}

/* Add left padding to ALL possible input types in the form row */
.wpc-icon-field-wrap .form-row input[type="text"],
.wpc-icon-field-wrap .form-row input[type="email"],
.wpc-icon-field-wrap .form-row input[type="tel"],
.wpc-icon-field-wrap .form-row input[type="number"],
.wpc-icon-field-wrap .form-row textarea,
.wpc-icon-field-wrap .form-row select {
    padding-left: 52px !important;
    height: 44px;
}

.wpc-icon-field-wrap .form-row .select2-container .select2-selection--single {
    height: 44px;
    padding-left: 40px;
    border-radius: 10px;
}

.wpc-icon-field-wrap .form-row .select2-container .select2-selection--single .select2-selection__rendered {
    line-height: 44px;
    padding-left: 12px !important;
}

.wpc-icon-field-wrap .form-row .select2-container .select2-selection--single .select2-selection__arrow {
    height: 42px;
}

.wpc-billing-fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.wpc-billing-fields .form-row {
    margin: 0;
    width: 100%;
    min-width: 0;
}

/* Icon-wrapped fields should respect grid */
.wpc-billing-fields .wpc-icon-field-wrap {
    min-width: 0;
}

.wpc-billing-fields .form-row-wide {
    grid-column: 1 / -1;
}

/* Half-width fields sit side by side */
.wpc-billing-fields .form-row-first {
    grid-column: 1;
}

.wpc-billing-fields .form-row-last {
    grid-column: 2;
}

/* Full-width overrides */
.wpc-billing-fields .form-row-wide,
.wpc-billing-fields .wpc-icon-field-wrap:has(.form-row-wide) {
    grid-column: 1 / -1;
}

.wpc-billing-fields .form-row label {
    display: block;
    font-size: var(--wpc-label-size, 12px);
    font-weight: 600;
    margin-bottom: 6px;
    color: #555;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.wpc-billing-fields .form-row label .required {
    color: #e74c3c;
    font-weight: 700;
}

.wpc-billing-fields .form-row label .optional {
    color: #9ca3af;
    font-weight: 400;
    font-size: 11px;
    text-transform: none;
}

.wpc-billing-fields .form-row input,
.wpc-billing-fields .form-row select,
.wpc-billing-fields .form-row textarea {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0;
    box-sizing: border-box !important;
    padding: 14px 16px;
    border: 1.5px solid var(--wpc-input-border, #e5e7eb) !important;
    border-radius: var(--wpc-input-radius, 10px);
    font-size: 14px;
    transition: all 0.25s ease;
    background: #fff !important;
    color: #333 !important;
    height: var(--wpc-input-height, 44px);
}

.wpc-billing-fields .form-row input:focus,
.wpc-billing-fields .form-row select:focus,
.wpc-billing-fields .form-row textarea:focus {
    outline: none;
    border-color: var(--wpc-input-focus, #ff6b35) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--wpc-input-focus, #ff6b35) 15%, transparent);
}

.wpc-billing-fields .form-row.woocommerce-invalid input,
.wpc-billing-fields .form-row.woocommerce-invalid select {
    border-color: #ef4444 !important;
    background: #fff8f8 !important;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
}

.wpc-billing-fields .form-row.woocommerce-invalid label {
    color: #ef4444;
}

.wpc-billing-fields .form-row .woocommerce-error,
.wpc-billing-fields .form-row span.required-field-notice {
    display: block;
    font-size: 11px;
    color: #ef4444;
    margin-top: 4px;
}

/* Full width fields */
.wpc-billing-fields .form-row-wide {
    grid-column: 1 / -1;
}

/* Select2 Overrides */
.wpc-billing-fields .select2-container {
    width: 100% !important;
}

.wpc-billing-fields .select2-container .select2-selection--single {
    height: 44px;
    border: 1px solid var(--wpc-border) !important;
    border-radius: 6px;
    background: #fff !important;
}

.wpc-billing-fields .select2-container .select2-selection--single .select2-selection__rendered {
    line-height: 44px;
    padding-left: 14px;
    color: #333 !important;
}

.wpc-billing-fields .select2-container .select2-selection--single .select2-selection__arrow {
    height: 42px;
}

/* Shipping Methods - Modern Cards */
.wpc-shipping-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.wpc-shipping-item {
    margin-bottom: 12px;
}

.wpc-shipping-item label {
    display: flex;
    align-items: center;
    padding: 14px 16px;
    border: 1.5px solid #e5e7eb;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.3s;
    background: #fff !important;
}

.wpc-shipping-item label:hover {
    border-color: var(--wpc-primary);
    background: #fff8f6 !important;
}

.wpc-shipping-item input:checked+.wpc-shipping-label {
    color: var(--wpc-primary);
    font-weight: 700;
}

.wpc-shipping-item input[type="radio"] {
    margin-right: 12px;
    width: 18px;
    height: 18px;
}

.wpc-shipping-label {
    flex: 1;
    font-size: 14px;
}

.wpc-shipping-cost {
    font-weight: 700;
    color: var(--wpc-text);
}

.wpc-no-shipping {
    padding: 16px;
    background: #fef3c7 !important;
    border-radius: 10px;
    color: #92400e !important;
    font-size: 14px;
}

/* Payment Methods - Clean Modern Cards */
.wpc-payment-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.wpc-payment-item {
    margin-bottom: 10px;
    border: 1.5px solid #e5e7eb;
    border-radius: 10px;
    overflow: hidden;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    background: #fff !important;
}

.wpc-payment-item:hover {
    border-color: #bdc3c9;
}

.wpc-payment-item.wpc-payment-selected {
    border-color: var(--wpc-primary);
    box-shadow: 0 0 0 3px rgba(255, 107, 53, 0.1);
    background: #fff8f6 !important;
}

.wpc-payment-label {
    display: flex;
    align-items: center;
    padding: 14px 16px;
    cursor: pointer;
    gap: 12px;
}

.wpc-payment-label input[type="radio"] {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    accent-color: var(--wpc-primary);
    margin: 0;
}

.wpc-payment-title {
    flex: 1;
    font-size: 14px;
    font-weight: 500;
    color: #374151;
    transition: font-weight 0.1s ease, color 0.1s ease;
}

.wpc-payment-item.wpc-payment-selected .wpc-payment-title {
    font-weight: 700;
    color: #1f2937;
}

/* Checkmark badge on selected */
.wpc-payment-item.wpc-payment-selected .wpc-payment-label::after {
    content: '✓';
    font-size: 13px;
    font-weight: 700;
    color: var(--wpc-primary);
    background: rgba(255, 107, 53, 0.1);
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.wpc-payment-icon {
    margin-left: 4px;
}

.wpc-payment-icon img {
    max-height: 24px;
    width: auto;
    vertical-align: middle;
}

.wpc-payment-fields {
    padding: 16px;
    background: #fafbfc !important;
    border-top: 1px solid #f0f1f3;
}

.wpc-payment-desc {
    margin: 0 0 12px 0;
    font-size: 13px;
    color: var(--wpc-text-light);
}

.wpc-payment-fields input,
.wpc-payment-fields select {
    width: 100%;
    padding: 12px 14px;
    border: 1.5px solid #e5e7eb !important;
    border-radius: 10px;
    font-size: 14px;
    margin-bottom: 12px;
    background: #fff !important;
    color: #333 !important;
}

.wpc-no-payment {
    padding: 16px;
    background: #fee2e2 !important;
    border-radius: 10px;
    color: #991b1b !important;
    font-size: 14px;
}

/* Order Summary Container - Clean Design */
.wpc-order-totals {
    background: transparent;
    border: none;
    padding: 0;
}

.wpc-totals-section {
    border: none !important;
}

/* Order Totals */
.wpc-totals-table {
    width: 100%;
    border-collapse: collapse;
    border: none;
}

.wpc-totals-table tr {
    border: none;
    border-bottom: 1px solid #f0f1f3;
}

.wpc-totals-table tr:last-child {
    border-bottom: 2px solid #e5e7eb;
}

.wpc-totals-table th,
.wpc-totals-table td {
    padding: 14px 0;
    font-size: 14px;
    border: none;
}

.wpc-totals-table th {
    text-align: left;
    font-weight: 500;
    color: var(--wpc-text-light);
}

.wpc-totals-table td {
    text-align: right;
    font-weight: 500;
}

.wpc-order-total th,
.wpc-order-total td {
    font-size: 18px;
    font-weight: 700;
    color: var(--wpc-text);
    padding-top: 15px;
}

.wpc-coupon-row td a {
    color: #e74c3c;
    text-decoration: none;
    margin-left: 8px;
    font-weight: 700;
}

/* Coupon Form */
.wpc-coupon-form {
    display: flex;
    flex-wrap: nowrap;
    /* Prevent wrapping on mobile */
    gap: 10px;
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid var(--wpc-border);
}

.wpc-coupon-input {
    flex: 1;
    min-width: 100px;
    padding: 12px 14px;
    border: 1px solid var(--wpc-border) !important;
    border-radius: 6px;
    font-size: 14px;
    background: #fff !important;
    color: #333 !important;
}

.wpc-apply-coupon-btn {
    flex-shrink: 0;
    /* Prevent button from shrinking */
    padding: 12px 20px;
    background: var(--wpc-place-color) !important;
    color: var(--wpc-place-text-color) !important;
    border: none !important;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.3s;
    white-space: nowrap;
    /* Keep button text on one line */
}

.wpc-apply-coupon-btn:hover {
    background: var(--wpc-place-hover-color) !important;
}

/* Popup Footer */
.wpc-popup-footer {
    padding: 20px 24px;
    background: #fff !important;
    border-top: 2px solid var(--wpc-border);
}

.wpc-error-messages {
    margin-bottom: 15px;
}

.wpc-error-messages:empty {
    display: none;
}

.wpc-error-messages p,
.wpc-error-messages li {
    background: #f8d7da !important;
    color: #721c24 !important;
    padding: 10px 15px;
    border-radius: 6px;
    margin-bottom: 8px;
    font-size: 14px;
    list-style: none;
}

.wpc-place-order-btn {
    width: 100%;
    padding: 16px 24px;
    border: none !important;
    outline: none !important;
    border-radius: var(--wpc-radius);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    transition: background-color 0.3s ease, box-shadow 0.3s ease, transform 0.15s ease;
    text-transform: none;
    box-shadow: var(--wpc-shadow);
    will-change: transform;
}

.wpc-btn-text {
    font-size: 16px;
    font-weight: 800;
    flex: 1;
    text-align: center;
}

.wpc-btn-total {
    background: rgba(255, 255, 255, 0.22);
    padding: 5px 14px;
    border-radius: 20px;
    font-size: 15px;
    font-weight: 800;
    white-space: nowrap;
    flex-shrink: 0;
}

.wpc-place-order-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
}

.wpc-place-order-btn:disabled {
    background: #d1d5db !important;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.wpc-secure-notice {
    text-align: center;
    margin: 12px 0 0 0;
    font-size: 12px;
    color: var(--wpc-text-light);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
}

.wpc-secure-notice .dashicons {
    font-size: 14px;
    width: 14px;
    height: 14px;
}

/* Success Message */
/* ========================================
   ORDER SUCCESS — Checkmark Draw + Confetti
   ======================================== */
.wpc-success-message {
    text-align: center;
    padding: 48px 28px 36px;
    background: #fff !important;
    position: relative;
    overflow: hidden;
}

/* ── Success Icon ── */
.wpc-success-icon {
    width: 80px;
    height: 80px;
    background: #10b981;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 24px;
    animation: wpcSuccessPop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes wpcSuccessPop {
    0%   { transform: scale(0); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}

.wpc-success-icon svg {
    width: 40px;
    height: 40px;
    fill: #fff;
}

/* ── Text styles ── */
.wpc-success-title {
    font-size: 22px;
    font-weight: 800;
    color: #111827;
    margin: 0 0 8px;
}

.wpc-success-sub {
    font-size: 14px;
    color: #6b7280;
    margin: 0 0 12px;
}

.wpc-success-message .wpc-order-number {
    font-size: 15px;
    font-weight: 700;
    color: #10b981;
    margin-bottom: 24px;
    background: #f0fdf4;
    display: inline-block;
    padding: 4px 14px;
    border-radius: 20px;
}

.wpc-success-actions {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
}

.wpc-success-actions a {
    padding: 11px 22px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
    font-size: 14px;
    transition: all 0.2s;
}

.wpc-success-actions .wpc-btn-primary {
    background: #10b981 !important;
    color: #fff !important;
}

.wpc-success-actions .wpc-btn-primary:hover {
    background: #059669 !important;
    transform: translateY(-1px);
}

.wpc-success-actions .wpc-btn-secondary {
    background: #f3f4f6 !important;
    color: #374151 !important;
}

.wpc-success-actions .wpc-btn-secondary:hover {
    background: #e5e7eb !important;
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
    .wpc-success-icon {
        animation: none !important;
    }
}

/* ========================================
   MOBILE RESPONSIVE - SAME DESIGN
   ======================================== */
@media (max-width: 768px) {
    .wpc-popup-overlay {
        padding: 15px;
        /* Show background page */
        align-items: flex-start;
    }

    .wpc-popup-container {
        max-height: calc(100vh - 30px);
        /* Account for 15px top + bottom padding */
    }

    .wpc-popup-header h3 {
        font-size: 18px;
    }

    .wpc-section {
        padding: 14px 16px;
    }

    /* Mobile Product Summary */
    .wpc-product-summary {
        gap: 10px;
        padding: 12px 14px;
    }

    .wpc-product-image {
        width: 60px;
        height: 60px;
    }

    .wpc-product-image img {
        width: 60px;
        height: 60px;
        border-radius: 6px;
    }

    .wpc-product-title {
        font-size: 12px;
    }

    /* Quantity — same size on mobile */
    .wpc-quantity-controls {
        height: 34px;
    }

    .wpc-qty-btn {
        width: 34px;
        height: 32px;
        font-size: 17px;
    }

    .wpc-quantity-input {
        width: 38px;
        height: 32px;
        font-size: 13px;
    }

    .wpc-billing-fields {
        grid-template-columns: 1fr;
    }

    .wpc-billing-fields .form-row-first,
    .wpc-billing-fields .form-row-last {
        grid-column: 1 / -1;
    }

    .wpc-popup-footer {
        padding: 14px 16px;
    }

    .wpc-place-order-btn {
        padding: 14px 18px;
    }

    .wpc-btn-text {
        font-size: 15px;
    }

    .wpc-success-actions {
        flex-direction: column;
    }

    .wpc-success-actions a {
        width: 100%;
        text-align: center;
    }
}

/* RTL Support */
[dir="rtl"] .wpc-product-summary {
    flex-direction: row-reverse;
}

[dir="rtl"] .wpc-billing-fields .form-row label {
    text-align: right;
}

[dir="rtl"] .wpc-totals-table th {
    text-align: right;
}

[dir="rtl"] .wpc-totals-table td {
    text-align: left;
}

/* Accessibility */
.wpc-buy-now-btn:not(.wpc-el-btn):focus,
.wpc-place-order-btn:focus {
    outline: none !important;
    border: none !important;
    box-shadow: 0 0 0 3px rgba(var(--wpc-primary-rgb, 59,130,246), 0.3);
}

.wpc-popup-close:focus {
    outline: 2px solid var(--wpc-primary);
    outline-offset: 2px;
}

.wpc-billing-fields .form-row input:focus,
.wpc-billing-fields .form-row select:focus {
    outline: none;
}

/* Print Styles */
@media print {
    .wpc-popup-overlay {
        display: none !important;
    }
}

/* Accessibility: respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
    .wpc-popup-container {
        animation: none !important;
    }
    .wpc-urgency-timer,
    .wpc-urgency-timer.wpc-timer-pulse,
    .wpc-urgency-timer.wpc-timer-expired {
        animation: none !important;
    }
    .wpc-timer-icon {
        animation: none !important;
    }
    .wpc-timer-separator {
        animation: none !important;
        opacity: 1 !important;
    }
    .wpc-timer-progress-bar::after {
        display: none !important;
    }
    .wpc-buy-now-btn,
    .wpc-place-order-btn {
        transition: none !important;
    }
    .wpc-success-icon {
        animation: none !important;
    }
}

/* ========================================
   PROCESSING OVERLAY — 4 Styles
   ======================================== */

/* Base overlay — fixed to popup via JS positioning */
.wpc-proc-overlay {
    position: fixed;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    opacity: 0;
    transition: opacity 0.25s ease;
    pointer-events: all;
    border-radius: inherit;
}

.wpc-proc-overlay.wpc-proc-visible {
    opacity: 1;
}

.wpc-proc-text {
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    margin: 0;
    letter-spacing: 0.3px;
}

/* ── Style 0: Moto Delivery ── */
.wpc-proc-moto_delivery {
    background: linear-gradient(170deg,#0c1322 0%,#0f2027 40%,#1a1a2e 100%);
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 20px 0;
    gap: 0;
    overflow: hidden;
    border-radius: inherit;
}

/* Road section first, info second */
.wpc-proc-moto_delivery .wpc-proc-road-section { order: 1; }
.wpc-proc-moto_delivery .wpc-proc-info         { order: 2; }

/* Stars */
.wpc-proc-stars { position:absolute;inset:0;pointer-events:none }
.wpc-proc-star {
    position:absolute;border-radius:50%;background:#fff;
    animation:wpcStarTwinkle 2s ease-in-out infinite;
}
@keyframes wpcStarTwinkle{0%,100%{opacity:.15}50%{opacity:.7}}

/* Info section */
.wpc-proc-info {
    width:calc(100% - 32px);
    display:flex;flex-direction:column;align-items:center;
    gap:10px;padding-top:10px;z-index:1;
}

/* Ring */
.wpc-proc-ring-wrap {
    width:56px;height:56px;position:relative;
    display:flex;align-items:center;justify-content:center;
}
.wpc-proc-ring-svg { position:absolute;inset:0;animation:wpcRingRot 1.8s linear infinite }
@keyframes wpcRingRot{to{transform:rotate(360deg)}}
.wpc-proc-ring-icon { font-size:22px;z-index:1 }

.wpc-proc-title { font-size:15px;font-weight:800;color:#fff;text-align:center }
.wpc-proc-sub   { font-size:11px;color:rgba(255,255,255,.4);text-align:center;margin-top:-4px }

/* Progress bar */
.wpc-proc-prog-row { width:100% }
.wpc-proc-prog-bg  { height:3px;background:rgba(255,255,255,.07);border-radius:10px;overflow:hidden }
.wpc-proc-prog-fill{
    height:100%;width:0;border-radius:10px;
    background:linear-gradient(90deg,#3b82f6,#10b981);
    transition:width .6s cubic-bezier(.4,0,.2,1);
    box-shadow:0 0 6px rgba(59,130,246,.5);
}

/* Steps */
.wpc-proc-steps { width:100%;display:flex;flex-direction:column;gap:6px }
.wpc-proc-step {
    display:flex;align-items:center;gap:9px;
    padding:8px 11px;border-radius:9px;
    background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06);
    transition:all .4s;opacity:.4;
}
.wpc-proc-step-active { background:rgba(59,130,246,.12);border-color:rgba(59,130,246,.3);opacity:1 }
.wpc-proc-step-done   { background:rgba(16,185,129,.08);border-color:rgba(16,185,129,.2);opacity:1 }
.wpc-proc-sico { width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;background:rgba(255,255,255,.07);flex-shrink:0 }
.wpc-proc-step-active .wpc-proc-sico { background:rgba(59,130,246,.2) }
.wpc-proc-step-done   .wpc-proc-sico { background:rgba(16,185,129,.2) }
.wpc-proc-sinfo { flex:1 }
.wpc-proc-sname { font-size:11px;font-weight:600;color:rgba(255,255,255,.7) }
.wpc-proc-sdesc { font-size:9px;color:rgba(255,255,255,.3);margin-top:1px }
.wpc-proc-step-active .wpc-proc-sname { color:#fff }
.wpc-proc-step-done   .wpc-proc-sname { color:#6ee7b7 }
.wpc-proc-scheck {
    width:16px;height:16px;border-radius:50%;
    border:2px solid rgba(255,255,255,.12);
    display:flex;align-items:center;justify-content:center;
    font-size:8px;color:transparent;transition:all .4s;flex-shrink:0;
}
.wpc-proc-step-done .wpc-proc-scheck { background:#10b981;border-color:#10b981;color:#fff }
.wpc-proc-step-active .wpc-proc-scheck { border-color:#3b82f6;animation:wpcCheckPulse 1s ease infinite }
@keyframes wpcCheckPulse{0%,100%{box-shadow:0 0 0 0 rgba(59,130,246,.4)}50%{box-shadow:0 0 0 4px rgba(59,130,246,0)}}
.wpc-proc-spin {
    width:8px;height:8px;border-radius:50%;
    border:2px solid rgba(255,255,255,.15);border-top-color:#3b82f6;
    animation:wpcProcSpin .6s linear infinite;
}
@keyframes wpcProcSpin{to{transform:rotate(360deg)}}

/* Trust */
.wpc-proc-trust {
    display:flex;align-items:center;gap:5px;
    font-size:9px;color:rgba(255,255,255,.25);
    padding-bottom:2px;
}
.wpc-proc-tdot { width:5px;height:5px;border-radius:50%;background:#10b981;flex-shrink:0 }

/* Road section */
.wpc-proc-road-section {
    width:100%;height:68px;position:relative;
    z-index:1;
    overflow:hidden;
}
.wpc-proc-road {
    position:absolute;bottom:0;left:0;right:0;height:30px;
    background:linear-gradient(180deg,#1e293b,#0f172a);
    border-top:2px solid rgba(255,255,255,.07);
}
.wpc-proc-dashline {
    position:absolute;bottom:12px;left:0;right:0;height:2px;overflow:hidden;
}
.wpc-proc-dashline::after {
    content:'';position:absolute;top:0;left:-100%;width:200%;height:100%;
    background:repeating-linear-gradient(90deg,transparent 0,transparent 14px,rgba(255,255,255,.28) 14px,rgba(255,255,255,.28) 26px);
    animation:wpcDashMove .45s linear infinite;
}
@keyframes wpcDashMove{to{transform:translateX(26px)}}
.wpc-proc-glow {
    position:absolute;bottom:0;left:0;right:0;height:5px;
    background:linear-gradient(90deg,transparent,rgba(255,200,50,.12),transparent);
    animation:wpcGlowPulse 2s ease-in-out infinite;
}
@keyframes wpcGlowPulse{0%,100%{opacity:.4}50%{opacity:.9}}

/* Motorcycle */
.wpc-proc-moto {
    position:absolute;bottom:4px;
    display:flex;align-items:flex-end;
    animation:wpcMotoRide 3s ease-in-out infinite;
    filter:drop-shadow(0 3px 8px rgba(59,130,246,.4));
}
@keyframes wpcMotoRide{
    0%  {left:-170px}
    35% {left:calc(50% - 50px)}
    65% {left:calc(50% - 50px)}
    100%{left:calc(100% + 40px)}
}

/* Wheels */
.wpc-proc-wheel {
    width:22px;height:22px;border-radius:50%;
    border:3px solid #475569;
    background:radial-gradient(circle,#1e293b 38%,#334155 38%,#334155 62%,#1e293b 62%);
    animation:wpcWheelSpin .25s linear infinite;
    flex-shrink:0;box-shadow:0 0 0 1px rgba(255,255,255,.08);
}
@keyframes wpcWheelSpin{to{transform:rotate(360deg)}}

/* Bike body */
.wpc-proc-bikebody { position:relative;margin:0 -3px;display:flex;flex-direction:column;align-items:flex-end }
.wpc-proc-frame {
    width:48px;height:17px;
    background:linear-gradient(135deg,#f97316,#ea580c);
    border-radius:3px 7px 2px 2px;position:relative;
    box-shadow:0 2px 6px rgba(249,115,22,.4);
}
.wpc-proc-frame::after { content:'';position:absolute;bottom:-2px;left:4px;right:7px;height:3px;background:#c2410c;border-radius:0 0 2px 2px }
.wpc-proc-engine { width:20px;height:12px;background:linear-gradient(135deg,#374151,#1f2937);border-radius:3px;margin-top:-3px;margin-right:7px;border:1px solid rgba(255,255,255,.07) }
.wpc-proc-seat { position:absolute;top:-6px;left:3px;right:13px;height:6px;background:#1e293b;border-radius:3px 3px 0 0;border-top:1px solid rgba(255,255,255,.1) }
.wpc-proc-handlebar { position:absolute;top:-9px;right:3px;width:2px;height:14px;background:#94a3b8;border-radius:2px }
.wpc-proc-handlebar::after { content:'';position:absolute;top:0;left:-4px;width:10px;height:2px;background:#94a3b8;border-radius:2px }
.wpc-proc-bag {
    width:24px;height:19px;
    background:linear-gradient(135deg,#dc2626,#b91c1c);
    border-radius:3px;position:absolute;bottom:6px;left:-16px;
    display:flex;align-items:center;justify-content:center;font-size:9px;
    border:1px solid rgba(255,255,255,.12);box-shadow:0 2px 6px rgba(220,38,38,.35);
    animation:wpcBagBounce .3s ease-in-out infinite;
}
@keyframes wpcBagBounce{0%,100%{transform:rotate(-1deg)}50%{transform:rotate(1deg) translateY(-1px)}}
.wpc-proc-helmet {
    width:16px;height:14px;
    background:linear-gradient(135deg,#1d4ed8,#1e40af);
    border-radius:50% 50% 40% 40%;
    position:absolute;bottom:22px;right:5px;
    border:1px solid rgba(255,255,255,.18);
}
.wpc-proc-visor { position:absolute;bottom:2px;left:2px;right:2px;height:4px;background:rgba(148,210,255,.3);border-radius:0 0 5px 5px }
.wpc-proc-exhaust { position:absolute;left:-10px;bottom:10px }
.wpc-proc-puff {
    position:absolute;border-radius:50%;background:rgba(255,255,255,.15);
    animation:wpcPuffOut .7s ease-out infinite;
}
.wpc-proc-puff:nth-child(1){width:7px;height:7px;bottom:0;left:0;animation-delay:0s}
.wpc-proc-puff:nth-child(2){width:5px;height:5px;bottom:2px;left:-2px;animation-delay:.2s}
.wpc-proc-puff:nth-child(3){width:4px;height:4px;bottom:1px;left:-3px;animation-delay:.4s}
@keyframes wpcPuffOut{0%{opacity:.6;transform:translate(0,0) scale(1)}100%{opacity:0;transform:translate(-16px,-12px) scale(2)}}
.wpc-proc-light { position:absolute;right:-10px;bottom:7px;width:0;height:0;border-left:12px solid rgba(255,230,100,.55);border-top:4px solid transparent;border-bottom:4px solid transparent;animation:wpcLightFlicker 1.2s ease infinite;filter:blur(.4px) }
@keyframes wpcLightFlicker{0%,100%{opacity:.6}50%{opacity:1}}
.wpc-proc-streaks { position:absolute;right:calc(100% + 1px);top:3px;display:flex;flex-direction:column;gap:4px }
.wpc-proc-streak { height:2px;border-radius:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.22));animation:wpcStreakAnim .4s ease-in-out infinite }
.wpc-proc-streak:nth-child(1){width:18px;animation-delay:0s}
.wpc-proc-streak:nth-child(2){width:12px;animation-delay:.13s}
.wpc-proc-streak:nth-child(3){width:16px;animation-delay:.26s}
@keyframes wpcStreakAnim{0%,100%{opacity:.3}50%{opacity:.7}}

/* Reduced motion */
@media(prefers-reduced-motion:reduce){
    .wpc-proc-moto,.wpc-proc-wheel,.wpc-proc-ring-svg,
    .wpc-proc-dashline::after,.wpc-proc-puff,.wpc-proc-bag,
    .wpc-proc-streak,.wpc-proc-star{animation:none!important}
}
.wpc-content-blurred > *:not(#wpc-processing-overlay) {
    filter: blur(3px);
    pointer-events: none;
    user-select: none;
    transition: filter 0.25s ease;
}

.wpc-proc-blur_spinner {
    background: rgba(0, 0, 0, 0.45);
}

.wpc-proc-spinner {
    width: 52px;
    height: 52px;
    border: 4px solid rgba(255, 255, 255, 0.2);
    border-top-color: #ffffff;
    border-radius: 50%;
    animation: wpcSpinnerRotate 0.75s linear infinite;
}

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

/* ── Style 2: Dark + Dots ── */
.wpc-proc-dark_dots {
    background: rgba(17, 24, 39, 0.88);
}

.wpc-proc-dots {
    display: flex;
    gap: 10px;
    align-items: center;
}

.wpc-proc-dots span {
    width: 14px;
    height: 14px;
    background: #fff;
    border-radius: 50%;
    animation: wpcDotBounce 1.2s ease-in-out infinite;
}

.wpc-proc-dots span:nth-child(1) { animation-delay: 0s; }
.wpc-proc-dots span:nth-child(2) { animation-delay: 0.2s; }
.wpc-proc-dots span:nth-child(3) { animation-delay: 0.4s; }

@keyframes wpcDotBounce {
    0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; }
    40%            { transform: scale(1.2); opacity: 1; }
}

/* ── Style 3: Skeleton Shimmer ── */
.wpc-proc-skeleton {
    background: rgba(255, 255, 255, 0.97);
    padding: 40px 32px;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
}

.wpc-proc-skeleton .wpc-proc-text {
    color: #9ca3af;
    font-size: 13px;
    text-align: center;
    margin-top: 8px;
}

.wpc-skel-line {
    height: 14px;
    border-radius: 7px;
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: wpcProcSkeletonShimmer 1.4s ease-in-out infinite;
}

.wpc-skel-wide   { width: 100%; }
.wpc-skel-medium { width: 70%; }
.wpc-skel-short  { width: 45%; }

@keyframes wpcProcSkeletonShimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ── Style 4: Progress Bar + Pulse ── */
.wpc-proc-progress_pulse {
    background: rgba(16, 185, 129, 0.92);
}

.wpc-proc-progress-bar {
    width: 200px;
    height: 5px;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 10px;
    overflow: hidden;
}

.wpc-proc-progress-fill {
    height: 100%;
    background: #fff;
    border-radius: 10px;
    animation: wpcProgressIndeterminate 1.4s ease-in-out infinite;
    transform-origin: left;
}

@keyframes wpcProgressIndeterminate {
    0%   { transform: scaleX(0) translateX(0); }
    50%  { transform: scaleX(0.6) translateX(80px); }
    100% { transform: scaleX(0) translateX(500px); }
}

.wpc-proc-pulse-ring {
    width: 60px;
    height: 60px;
    border: 3px solid rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    animation: wpcPulseRing 1.2s ease-out infinite;
}

@keyframes wpcPulseRing {
    0%   { transform: scale(0.8); opacity: 1; }
    100% { transform: scale(1.4); opacity: 0; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .wpc-proc-spinner,
    .wpc-proc-dots span,
    .wpc-skel-line,
    .wpc-proc-progress-fill,
    .wpc-proc-pulse-ring {
        animation: none !important;
    }
}

/* Order Bump */
.wpc-order-bump-box {
    margin: 0 0 8px 0;
    padding: 14px 16px;
    background-color: #e8f4fd;
    border: 1.5px solid #b3d9f5;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    position: relative;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.wpc-order-bump-box:hover {
    border-color: #4fa8e0;
    box-shadow: 0 2px 8px rgba(3, 155, 229, 0.12);
}

.wpc-order-bump-box.wpc-processing {
    opacity: 0.6;
    pointer-events: none;
}

/* 1. Checkbox Column */
.wpc-bump-checkbox-col {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.wpc-order-bump-checkbox {
    width: 20px;
    height: 20px;
    cursor: pointer;
    margin: 0;
    accent-color: #039be5;
}

/* 2. Content Column */
.wpc-bump-content-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
}

.wpc-bump-title {
    font-size: 14px;
    color: #1a3a4c;
    line-height: 1.4;
    cursor: pointer;
    margin: 0;
    font-weight: 500;
}

.wpc-bump-title strong {
    font-weight: 700;
    color: #0d2535;
}

.wpc-bump-old-price {
    text-decoration: line-through;
    color: #78909c;
    font-size: 13px;
    margin-right: 5px;
}

.wpc-bump-new-price {
    color: #d32f2f;
    font-weight: 700;
    font-size: 15px;
}

.wpc-bump-desc {
    font-size: 12px;
    color: #4a7a96;
    margin: 0;
    line-height: 1.4;
}

/* 3. Image Column */
.wpc-bump-image-col {
    flex-shrink: 0;
    width: 64px;
    height: 64px;
}

.wpc-bump-image-col img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 8px;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.07);
}
/* ========================================
   ELEMENTOR WIDGET BUTTON
   Only layout — color/size set by Elementor
   ======================================== */
.wpc-el-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    cursor: pointer;
    border: none !important;
    outline: none !important;
    text-decoration: none !important;
    transition: background-color 0.3s ease, transform 0.15s ease, box-shadow 0.3s ease;
    line-height: 1.2;
}
.wpc-el-btn:hover {
    transform: translateY(-2px);
}
.wpc-el-btn i,
.wpc-el-btn svg {
    display: inline-block;
    vertical-align: middle;
    width: 1em;
    height: 1em;
    line-height: 1;
}
.wpc-elementor-wrap {
    display: block;
    line-height: 1;
}