/* ==========================================================
   Promo Widget for Elementor — Frontend Styles
   ========================================================== */

.pwe-card {
    border-radius: 16px;
    overflow: hidden;
    background-color: #ffffff;
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.08);
}

/* ── Header ── */
.pwe-header {
    background-color: #E53935;
    padding: 14px 18px 12px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.pwe-header-icon {
    flex-shrink: 0;
    font-size: 22px;
    line-height: 1;
    color: #ffffff;
}

.pwe-header-icon i {
    font-size: 22px;
    color: #ffffff;
}

.pwe-header-icon svg {
    width: 22px;
    height: 22px;
    fill: #ffffff;
}

.pwe-header-text {
    flex: 1;
    min-width: 0;
}

.pwe-header-title {
    margin: 0 0 2px;
    font-size: 15px;
    font-weight: 700;
    color: #ffffff;
    line-height: 1.2;
    letter-spacing: 0.01em;
}

.pwe-header-subtitle {
    margin: 0;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.3;
}

/* ── Body: items + image cùng hàng ── */
.pwe-body {
    display: flex;
    align-items: stretch;
    gap: 0;
}

/* ── Items list ── */
.pwe-items-list {
    flex: 1;
    min-width: 0;
    padding: 4px 0;
}

.pwe-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 16px;
    border-bottom: 1px solid #eeeeee;
}

.pwe-item:last-child {
    border-bottom: none;
}

/* Check icon */
.pwe-check-icon {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: #E53935;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 2px;
}

.pwe-check-icon svg {
    display: block;
}

/* Item text */
.pwe-item-text {
    margin: 0;
    font-size: 13px;
    color: #333333;
    line-height: 1.55;
}

/* ── Product image — cột phải ── */
.pwe-product-image {
    flex-shrink: 0;
    width: 38%;
    max-width: 180px;
    overflow: hidden;
    line-height: 0;
    border-left: 1px solid #eeeeee;
}

.pwe-product-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    min-height: 120px;
}


/* ==========================================================
   HIỆU ỨNG NHẤP NHÁY — Keyframes
   ========================================================== */

@keyframes pwe-blink-soft {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.55; }
}

@keyframes pwe-blink-header {
    0%, 100% { background-color: var(--pwe-header-color, #E53935); }
    50%       { background-color: var(--pwe-header-blink-color, #ff7043); }
}

@keyframes pwe-pulse-border {
    0%   { box-shadow: 0 0 0 0   rgba(229, 57, 53, 0.70); }
    60%  { box-shadow: 0 0 0 10px rgba(229, 57, 53, 0);   }
    100% { box-shadow: 0 0 0 0   rgba(229, 57, 53, 0);    }
}

@keyframes pwe-shake {
    0%, 100%       { transform: translateX(0); }
    15%, 45%, 75%  { transform: translateX(-4px); }
    30%, 60%, 90%  { transform: translateX(4px); }
}

@keyframes pwe-glow {
    0%, 100% { box-shadow: 0 0 8px  4px rgba(229, 57, 53, 0.25); }
    50%      { box-shadow: 0 0 22px 8px rgba(229, 57, 53, 0.65); }
}

@keyframes pwe-shimmer {
    0%   { background-position: -200% center; }
    100% { background-position:  200% center; }
}


/* ==========================================================
   HIỆU ỨNG — Classes
   ========================================================== */

.pwe-effect-blink-soft {
    animation: pwe-blink-soft var(--pwe-speed, 1.2s) ease-in-out infinite;
}

.pwe-effect-blink-header .pwe-header {
    animation: pwe-blink-header var(--pwe-speed, 1.2s) ease-in-out infinite;
}

.pwe-effect-pulse-border {
    animation: pwe-pulse-border var(--pwe-speed, 1.4s) ease-out infinite;
}

.pwe-effect-shake {
    animation: pwe-shake 0.6s ease-in-out infinite;
}
.pwe-effect-shake[data-shake-pause="1"] {
    animation-play-state: paused;
}

.pwe-effect-glow {
    animation: pwe-glow var(--pwe-speed, 2s) ease-in-out infinite;
}

.pwe-effect-shimmer .pwe-header {
    background-image: linear-gradient(
        105deg,
        var(--pwe-header-color, #E53935) 0%,
        var(--pwe-header-color, #E53935) 35%,
        rgba(255,255,255,0.35) 50%,
        var(--pwe-header-color, #E53935) 65%,
        var(--pwe-header-color, #E53935) 100%
    );
    background-size: 200% auto;
    animation: pwe-shimmer var(--pwe-speed, 2s) linear infinite;
}