/* Front‑end styles for WooPlus popups */
/* Import the Vazirmatn variable font.  Without this @font-face declaration, some browsers
   may fallback to generic sans‑serif and ignore the bundled font files.  We use the
   variable font to support multiple weights. */
@font-face {
    font-family: 'Vazirmatn';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('../../../assets/fonts/Vazirmatn[wght].woff2') format('woff2');
}
#wooplus-popups-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 99999;
}

.wooplus-popup {
    position: fixed;
    max-width: 360px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 12px 24px rgba(0,0,0,0.2);
    padding: 24px;
    /* Default font is Vazirmatn but can be overridden via font classes */
    font-family: 'Vazirmatn', sans-serif;
    direction: rtl;
    line-height: 1.5;
    color: #1f2937;
    display: none;
    opacity: 0;
    pointer-events: auto;
}

/* Overlay element for dimming the page behind a popup.  The overlay
   fills the viewport and uses a semi‑transparent background.  It is
   hidden by default and becomes visible when the .show class is
   added via JavaScript. */
.wooplus-popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 99998;
    display: none;
    opacity: 0;
    transition: opacity 0.3s ease;
}
.wooplus-popup-overlay.show {
    display: block;
    opacity: 1;
}

/* Fullscreen popups fill the viewport.  The standard max-width is removed
   and the popup stretches to full width and height with centred content. */
.wooplus-fullscreen {
    /* When fullscreen is requested the popup should fill the entire
       viewport.  Remove fixed sizing and centre offsets so the box
       expands to full width and height.  Allow scrolling if content
       exceeds the viewport. */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    transform: none;
    padding: 20px;
    overflow-y: auto;
}

.wooplus-popup .wooplus-popup-close {
    position: absolute;
    top: 8px;
    left: 8px;
    background: none;
    border: 0;
    font-size: 24px;
    cursor: pointer;
    line-height: 1;
    color: #9ca3af;
}

.wooplus-popup.show {
    display: block;
    opacity: 1;
}

/* Icon inside popup */
/*
 * Icons are displayed as flex containers so that alignment modifiers can
 * control their horizontal justification.  Using flexbox ensures that
 * icons retain their intrinsic width while aligning properly within the
 * popup content area.  The default colour is inherited from the
 * administrator settings (icon_color) or falls back to a golden hue.
 */
.wooplus-popup-icon {
    font-size: 36px;
    margin-bottom: 8px;
    display: flex;
    justify-content: center;
    color: #f59e0b;
}

/* Icon alignment modifiers */
/* Align the icon horizontally within the content.  Instead of relying on
 * justify-content (which has no effect on inline elements), we use
 * auto margins to position the icon.  The display property is set
 * inline-block by default on the <i> element, so margin auto will
 * align it within its container. */
.wooplus-icon-left .wooplus-popup-icon {
    display: block;
    margin-left: 0;
    margin-right: auto;
    text-align: left;
}
.wooplus-icon-center .wooplus-popup-icon {
    display: block;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}
.wooplus-icon-right .wooplus-popup-icon {
    display: block;
    margin-left: auto;
    margin-right: 0;
    text-align: right;
}

/* Product showcase */
.wooplus-popup-products {
    margin-top: 12px;
}
.wooplus-product-item {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(0, 0, 0, 0.05);
    border-radius: 8px;
    padding: 8px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* Hover effect on product item for subtle lift */
.wooplus-product-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.wooplus-product-add {
    display: inline-block;
    background: #3b82f6;
    color: #fff;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
    text-decoration: none;
    margin-top: 4px;
}
.wooplus-product-image {
    width: 60px;
    height: 60px;
    object-fit: cover;
    border-radius: 6px;
}
.wooplus-product-info {
    flex: 1;
    text-align: right;
}
.wooplus-product-title {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 4px;
}
.wooplus-product-price {
    font-size: 14px;
    color: #10b981;
    margin-bottom: 4px;
}
.wooplus-pack-price {
    font-weight: 700;
    color: #eab308;
    margin-bottom: 8px;
    text-align: center;
}
.wooplus-pack-timer {
    font-weight: 700;
    color: #dc2626;
    margin-top: 8px;
    text-align: center;
}

/* Copy toast notification.  Appears fixed at the bottom of the viewport
   when a coupon code is copied.  Fades out automatically. */
.wooplus-copy-toast {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0,0,0,0.8);
    color: #fff;
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 14px;
    z-index: 100000;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}
.wooplus-copy-toast.show {
    opacity: 1;
}

/* Upsell suggestion box within product info */
.wooplus-upsell {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(0,0,0,0.05);
    border-radius: 6px;
    padding: 4px;
}
.wooplus-upsell-image {
    width: 32px;
    height: 32px;
    object-fit: cover;
    border-radius: 4px;
}
.wooplus-upsell-info {
    flex: 1;
    text-align: right;
}
.wooplus-upsell-title {
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 2px;
}
.wooplus-upsell-price {
    font-size: 12px;
    color: #10b981;
    margin-bottom: 2px;
}
.wooplus-upsell-add {
    display: inline-block;
    background: #f97316;
    color: #fff;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 11px;
    text-decoration: none;
    margin-top: 2px;
}

/* Background image modifier.  When set on a popup, the image will be
   applied via inline styles on the element, but this class ensures the
   padding and background behaviour is consistent across templates. */
.wooplus-bg-image {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

/* Discount badge for product items */
.wooplus-discount-badge {
    display: inline-block;
    background: #ef4444;
    color: #fff;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 12px;
    margin-top: 2px;
}

/* Stock bar to indicate limited quantity */
.wooplus-stock-bar {
    width: 100%;
    height: 6px;
    background: #e5e7eb;
    border-radius: 3px;
    overflow: hidden;
    margin-top: 4px;
}
.wooplus-stock-fill {
    height: 100%;
    background: #10b981;
}

/* Text animations for headings and body */
@keyframes wooplus-text-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes wooplus-text-slide-up { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
@keyframes wooplus-text-slide-down { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: translateY(0); } }
@keyframes wooplus-text-slide-left { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: translateX(0); } }
@keyframes wooplus-text-slide-right { from { opacity: 0; transform: translateX(-20px); } to { opacity: 1; transform: translateX(0); } }
@keyframes wooplus-text-bounce { 0%,20%,50%,80%,100% { transform: translateY(0); } 40% { transform: translateY(-10px); } 60% { transform: translateY(-5px); } }
@keyframes wooplus-text-zoom-in { from { opacity: 0; transform: scale(0.8); } to { opacity: 1; transform: scale(1); } }
@keyframes wooplus-text-zoom-out { from { opacity: 0; transform: scale(1.2); } to { opacity: 1; transform: scale(1); } }
@keyframes wooplus-text-flip-x { from { opacity: 0; transform: perspective(400px) rotateX(90deg); } to { opacity: 1; transform: perspective(400px) rotateX(0); } }
@keyframes wooplus-text-flip-y { from { opacity: 0; transform: perspective(400px) rotateY(90deg); } to { opacity: 1; transform: perspective(400px) rotateY(0); } }
@keyframes wooplus-text-pulse { 0% { transform: scale(1); } 50% { transform: scale(1.05); } 100% { transform: scale(1); } }
@keyframes wooplus-text-shake { 10%, 90% { transform: translateX(-1px); } 20%, 80% { transform: translateX(2px); } 30%, 50%, 70% { transform: translateX(-4px); } 40%, 60% { transform: translateX(4px); } }
@keyframes wooplus-text-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes wooplus-text-jello { 0%,11.1%,100% { transform: none; } 22.2% { transform: skewX(-12.5deg) skewY(-12.5deg); } 33.3% { transform: skewX(6.25deg) skewY(6.25deg); } 44.4% { transform: skewX(-3.125deg) skewY(-3.125deg); } 55.5% { transform: skewX(1.5625deg) skewY(1.5625deg); } 66.6% { transform: skewX(-0.78125deg) skewY(-0.78125deg); } 77.7% { transform: skewX(0.390625deg) skewY(0.390625deg); } 88.8% { transform: skewX(-0.1953125deg) skewY(-0.1953125deg); } }
@keyframes wooplus-text-rubber { 0% { transform: scale3d(1,1,1); } 30% { transform: scale3d(1.25,0.75,1); } 40% { transform: scale3d(0.75,1.25,1); } 50% { transform: scale3d(1.15,0.85,1); } 65% { transform: scale3d(.95,1.05,1); } 75% { transform: scale3d(1.05,.95,1); } 100% { transform: scale3d(1,1,1); } }

.wooplus-text-fade-in { animation: wooplus-text-fade-in 0.6s ease forwards; }
.wooplus-text-slide-up { animation: wooplus-text-slide-up 0.6s ease forwards; }
.wooplus-text-slide-down { animation: wooplus-text-slide-down 0.6s ease forwards; }
.wooplus-text-slide-left { animation: wooplus-text-slide-left 0.6s ease forwards; }
.wooplus-text-slide-right { animation: wooplus-text-slide-right 0.6s ease forwards; }
.wooplus-text-bounce { animation: wooplus-text-bounce 0.8s ease forwards; }
.wooplus-text-zoom-in { animation: wooplus-text-zoom-in 0.5s ease forwards; }
.wooplus-text-zoom-out { animation: wooplus-text-zoom-out 0.5s ease forwards; }
.wooplus-text-flip-x { animation: wooplus-text-flip-x 0.6s ease forwards; }
.wooplus-text-flip-y { animation: wooplus-text-flip-y 0.6s ease forwards; }
.wooplus-text-pulse { animation: wooplus-text-pulse 1s infinite; }
.wooplus-text-shake { animation: wooplus-text-shake 0.8s ease; }
.wooplus-text-spin { animation: wooplus-text-spin 1.5s linear infinite; }
.wooplus-text-jello { animation: wooplus-text-jello 0.9s both; }
.wooplus-text-rubber { animation: wooplus-text-rubber 1s both; }

/* Additional animations for popups */
.wooplus-popup.anim-slide-left { transform: translateX(40px); transition: transform 0.4s ease, opacity 0.4s ease; opacity: 0; }
.wooplus-popup.anim-slide-left.show { transform: translateX(0); opacity: 1; }
.wooplus-popup.anim-slide-right { transform: translateX(-40px); transition: transform 0.4s ease, opacity 0.4s ease; opacity: 0; }
.wooplus-popup.anim-slide-right.show { transform: translateX(0); opacity: 1; }
.wooplus-popup.anim-slide-up { transform: translateY(40px); transition: transform 0.4s ease, opacity 0.4s ease; opacity: 0; }
.wooplus-popup.anim-slide-up.show { transform: translateY(0); opacity: 1; }
.wooplus-popup.anim-slide-down { transform: translateY(-40px); transition: transform 0.4s ease, opacity 0.4s ease; opacity: 0; }
.wooplus-popup.anim-slide-down.show { transform: translateY(0); opacity: 1; }
.wooplus-popup.anim-fade-left { opacity: 0; transform: translateX(20px); transition: transform 0.5s ease, opacity 0.5s ease; }
.wooplus-popup.anim-fade-left.show { opacity: 1; transform: translateX(0); }
.wooplus-popup.anim-fade-right { opacity: 0; transform: translateX(-20px); transition: transform 0.5s ease, opacity 0.5s ease; }
.wooplus-popup.anim-fade-right.show { opacity: 1; transform: translateX(0); }
.wooplus-popup.anim-pulse { animation: wooplus-text-pulse 1s infinite; }
.wooplus-popup.anim-shake { animation: wooplus-text-shake 0.8s ease; }
.wooplus-popup.anim-jello { animation: wooplus-text-jello 0.9s both; }
.wooplus-popup.anim-swing { transform-origin: top center; animation: wooplus-swing 0.8s ease forwards; }
@keyframes wooplus-swing { 20% { transform: rotate(15deg); } 40% { transform: rotate(-10deg); } 60% { transform: rotate(5deg); } 80% { transform: rotate(-5deg); } 100% { transform: rotate(0deg); } }
.wooplus-popup.anim-tada { animation: wooplus-tada 1s ease both; }
@keyframes wooplus-tada { 0% { transform: scale(1); } 10%,20% { transform: scale(0.9) rotate(-3deg); } 30%,50%,70%,90% { transform: scale(1.1) rotate(3deg); } 40%,60%,80% { transform: scale(1.1) rotate(-3deg); } 100% { transform: scale(1) rotate(0); } }
.wooplus-popup.anim-spin { transform: scale(0.8) rotate(-180deg); opacity: 0; transition: transform 0.6s ease, opacity 0.6s ease; }
.wooplus-popup.anim-spin.show { transform: scale(1) rotate(0); opacity: 1; }
.wooplus-popup.anim-light-speed { transform: translateX(100%) skewX(-30deg); opacity: 0; animation: wooplus-light-speed-in 0.7s ease-out forwards; }
@keyframes wooplus-light-speed-in { 0% { transform: translateX(100%) skewX(-30deg); opacity: 0; } 60% { transform: translateX(-10%) skewX(20deg); opacity: 1; } 80% { transform: translateX(0%) skewX(-5deg); } 100% { transform: translateX(0%) skewX(0deg); } }

/* Rotating border animation using pseudo element */
.wooplus-popup.anim-border-rotate {
    position: relative;
    overflow: hidden;
}
.wooplus-popup.anim-border-rotate::before {
    content: "";
    position: absolute;
    top: -4px;
    left: -4px;
    right: -4px;
    bottom: -4px;
    border: 2px solid transparent;
    border-radius: inherit;
    background: linear-gradient(60deg, #fbbf24, #3b82f6, #10b981, #ec4899) border-box;
    mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
    mask-composite: xor;
    animation: wooplus-border-rotate 4s linear infinite;
}
@keyframes wooplus-border-rotate {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Timer display styles introduced in v1.6.2 */
.wooplus-popup-timer {
    font-weight: bold;
    margin-top: 8px;
    text-align: center;
    direction: ltr;
}
.timer-style-boxed {
    padding: 6px 12px;
    border-radius: 6px;
    border: 2px solid currentColor;
    display: inline-block;
}
.timer-style-circle {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    border: 4px solid currentColor;
    font-size: 20px;
    line-height: 1;
}

/* Alignment utility classes for coupon, button and timer elements (v1.8.1) */
.coupon-left,
.button-left,
.timer-left {
    text-align: left;
}
.coupon-center,
.button-center,
.timer-center {
    text-align: center;
}
.coupon-right,
.button-right,
.timer-right {
    text-align: right;
}

/* Click count text */
.wooplus-click-count {
    font-size: 13px;
    color: #6b7280;
    margin-top: 4px;
    text-align: center;
}

/* Form fields inside popup */
.wooplus-popup-form {
    display: block;
    margin-top: 8px;
}
.wooplus-popup-form .wooplus-form-group {
    margin-bottom: 8px;
}
.wooplus-popup-form input,
.wooplus-popup-form textarea {
    width: 100%;
    padding: 6px;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    font-family: inherit;
    font-size: 14px;
}
.wooplus-popup-form button.wooplus-form-submit {
    width: 100%;
    padding: 8px;
    background: #10b981;
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    cursor: pointer;
}
/* Featured image */
.wooplus-popup-image {
    width: 100%;
    height: auto;
    margin-bottom: 12px;
    border-radius: 8px;
}

/* Body/content area */
.wooplus-popup-body {
    margin-bottom: 12px;
}

/* Coupon code display */
.wooplus-popup-coupon {
    background: #fef3c7;
    color: #b45309;
    padding: 8px 12px;
    border-radius: 8px;
    text-align: center;
    margin-top: 12px;
    margin-bottom: 8px;
    cursor: pointer;
    font-weight: bold;
    display: block;
}

/* Countdown timer */
.wooplus-popup-timer {
    font-size: 20px;
    font-weight: bold;
    text-align: center;
    margin-top: 12px;
    margin-bottom: 8px;
    color: #10b981;
    display: block;
}

/* Button */
.wooplus-popup-button {
    padding: 8px 12px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
    text-align: center;
    display: block;
    text-decoration: none;
    margin-top: 12px;
    margin-left: auto;
    margin-right: auto;
    color: #fff;
}

/* Gradient button styles introduced in v3.0.0.  Each class applies a
   colourful linear gradient and white text.  Administrators can
   assign these styles via the "button_style" option in the popup
   builder. */
.wooplus-btn-style1 { background: linear-gradient(to right, #f6d365, #fda085); color: #ffffff; }
.wooplus-btn-style2 { background: linear-gradient(to right, #a1c4fd, #c2e9fb); color: #ffffff; }
.wooplus-btn-style3 { background: linear-gradient(to right, #d4fc79, #96e6a1); color: #ffffff; }
.wooplus-btn-style4 { background: linear-gradient(to right, #a18cd1, #fbc2eb); color: #ffffff; }
.wooplus-btn-style5 { background: linear-gradient(to right, #f093fb, #f5576c); color: #ffffff; }
.wooplus-btn-style6 { background: linear-gradient(to right, #4e54c8, #8f94fb); color: #ffffff; }
.wooplus-btn-style7 { background: linear-gradient(to right, #ff7e5f, #feb47b); color: #ffffff; }
.wooplus-btn-style8 { background: linear-gradient(to right, #56ccf2, #2f80ed); color: #ffffff; }
.wooplus-btn-style9 { background: linear-gradient(to right, #fc6076, #ff9a44, #ef9d43, #e75516); color: #ffffff; }
.wooplus-btn-style10 { background: linear-gradient(to right, #834d9b, #d04ed6); color: #ffffff; }

/* Font variants */
.wooplus-font-vazirmatn {
    font-family: 'Vazirmatn', sans-serif !important;
}
.wooplus-font-default {
    font-family: inherit !important;
}

/* Email form */
.wooplus-popup-form {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.wooplus-popup-input {
    padding: 8px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-family: inherit;
    font-size: 14px;
}
.wooplus-popup-submit {
    padding: 8px;
    border: none;
    border-radius: 6px;
    background: #3b82f6;
    color: #fff;
    cursor: pointer;
    font-size: 14px;
}
.wooplus-popup-thanks {
    font-size: 14px;
    text-align: center;
    color: #10b981;
    margin-top: 8px;
}

/* Template styles */
/* Default template: white background (inherits) */
.wooplus-default { }
/* A selection of coloured templates.  These classes apply subtle background and border colours
   to differentiate templates.  Additional templates will cycle these styles. */
.wooplus-template1 { background-color: #f0f9ff; border: 1px solid #bae6fd; }
.wooplus-template2 { background-color: #fdf2f8; border: 1px solid #fbcfe8; }
.wooplus-template3 { background-color: #fefce8; border: 1px solid #fde68a; }
.wooplus-template4 { background-color: #ecfdf5; border: 1px solid #bbf7d0; }
.wooplus-template5 { background-color: #fef2f2; border: 1px solid #fecaca; }
.wooplus-template6 { background-color: #f3f4f6; border: 1px solid #d1d5db; }
.wooplus-template7 { background-color: #f0fdf4; border: 1px solid #bbf7d0; }
.wooplus-template8 { background-color: #f5f3ff; border: 1px solid #ddd6fe; }
.wooplus-template9 { background-color: #fff7ed; border: 1px solid #fed7aa; }
.wooplus-template10 { background-color: #fef2e7; border: 1px solid #fdba74; }
/* Fallback: cycle template colours every 10 variations */
/* Gradient templates introduced in v3.0.0.  These classes apply
   colourful gradient backgrounds to popups for templates 11–20.  The
   same style repeats for every 20 templates beyond 20 via the
   repeating selectors.  Each template pairs with a Farsi name in the
   admin dropdown for easy selection. */
.wooplus-template11, .wooplus-template21, .wooplus-template31, .wooplus-template41 { background: linear-gradient(to right, #f6d365, #fda085); color: #000; }
.wooplus-template12, .wooplus-template22, .wooplus-template32, .wooplus-template42 { background: linear-gradient(to right, #a1c4fd, #c2e9fb); color: #000; }
.wooplus-template13, .wooplus-template23, .wooplus-template33, .wooplus-template43 { background: linear-gradient(to right, #d4fc79, #96e6a1); color: #000; }
.wooplus-template14, .wooplus-template24, .wooplus-template34, .wooplus-template44 { background: linear-gradient(to right, #a18cd1, #fbc2eb); color: #000; }
.wooplus-template15, .wooplus-template25, .wooplus-template35, .wooplus-template45 { background: linear-gradient(to right, #f093fb, #f5576c); color: #000; }
.wooplus-template16, .wooplus-template26, .wooplus-template36, .wooplus-template46 { background: linear-gradient(to right, #4e54c8, #8f94fb); color: #fff; }
.wooplus-template17, .wooplus-template27, .wooplus-template37, .wooplus-template47 { background: linear-gradient(to right, #ff7e5f, #feb47b); color: #000; }
.wooplus-template18, .wooplus-template28, .wooplus-template38, .wooplus-template48 { background: linear-gradient(to right, #56ccf2, #2f80ed); color: #fff; }
.wooplus-template19, .wooplus-template29, .wooplus-template39, .wooplus-template49 { background: linear-gradient(to right, #fc6076, #ff9a44, #ef9d43, #e75516); color: #000; }
.wooplus-template20, .wooplus-template30, .wooplus-template40, .wooplus-template50 { background: linear-gradient(to right, #834d9b, #d04ed6); color: #fff; }

/* Extend template classes up to 100 by repeating the 20‑style cycle.  Each
   group of 20 uses the same colour scheme. */
.wooplus-template51, .wooplus-template61, .wooplus-template71, .wooplus-template81, .wooplus-template91 { background-color: #f0f9ff; border: 1px solid #bae6fd; }
.wooplus-template52, .wooplus-template62, .wooplus-template72, .wooplus-template82, .wooplus-template92 { background-color: #fdf2f8; border: 1px solid #fbcfe8; }
.wooplus-template53, .wooplus-template63, .wooplus-template73, .wooplus-template83, .wooplus-template93 { background-color: #fefce8; border: 1px solid #fde68a; }
.wooplus-template54, .wooplus-template64, .wooplus-template74, .wooplus-template84, .wooplus-template94 { background-color: #ecfdf5; border: 1px solid #bbf7d0; }
.wooplus-template55, .wooplus-template65, .wooplus-template75, .wooplus-template85, .wooplus-template95 { background-color: #fef2f2; border: 1px solid #fecaca; }
.wooplus-template56, .wooplus-template66, .wooplus-template76, .wooplus-template86, .wooplus-template96 { background-color: #f3f4f6; border: 1px solid #d1d5db; }
.wooplus-template57, .wooplus-template67, .wooplus-template77, .wooplus-template87, .wooplus-template97 { background-color: #f0fdf4; border: 1px solid #bbf7d0; }
.wooplus-template58, .wooplus-template68, .wooplus-template78, .wooplus-template88, .wooplus-template98 { background-color: #f5f3ff; border: 1px solid #ddd6fe; }
.wooplus-template59, .wooplus-template69, .wooplus-template79, .wooplus-template89, .wooplus-template99 { background-color: #fff7ed; border: 1px solid #fed7aa; }
.wooplus-template60, .wooplus-template70, .wooplus-template80, .wooplus-template90, .wooplus-template100 { background-color: #fef2e7; border: 1px solid #fdba74; }

/* Modern templates introduced in v1.5.1.  These provide a fresh look with
   larger padding, subtle gradients and refined typography.  Administrators
   can select these templates via the "مدرن" and "مدرن ۲" options. */
.wooplus-modern {
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 16px 40px rgba(0,0,0,0.15);
    padding: 32px;
}
.wooplus-modern .wooplus-popup-icon {
    font-size: 40px;
    margin-bottom: 12px;
    color: inherit;
}
.wooplus-modern .wooplus-popup-image {
    border-radius: 12px;
    margin-bottom: 16px;
}
.wooplus-modern .wooplus-popup-button {
    font-size: 16px;
    padding: 10px 16px;
    border-radius: 8px;
}

.wooplus-modern2 {
    background: linear-gradient(135deg, #fda085, #f6d365);
    border-radius: 16px;
    box-shadow: 0 16px 40px rgba(0,0,0,0.15);
    padding: 32px;
    color: #ffffff;
}
.wooplus-modern2 .wooplus-popup-icon {
    font-size: 40px;
    margin-bottom: 12px;
    color: #ffffff;
}
.wooplus-modern2 .wooplus-popup-image {
    border-radius: 12px;
    margin-bottom: 16px;
}
.wooplus-modern2 .wooplus-popup-button {
    font-size: 16px;
    padding: 10px 16px;
    border-radius: 8px;
    background: rgba(255,255,255,0.2);
    color: #ffffff;
}

/* Additional animation classes */
.wooplus-popup.anim-bounce {
    transform: translateY(-40px);
    opacity: 0;
    animation: wooplus-bounce-in 0.6s ease forwards;
}
.wooplus-popup.anim-bounce.show {
    opacity: 1;
    animation: wooplus-bounce-in 0.6s ease forwards;
}
@keyframes wooplus-bounce-in {
    0% { opacity: 0; transform: translateY(-60px); }
    60% { opacity: 1; transform: translateY(10px); }
    100% { opacity: 1; transform: translateY(0); }
}

.wooplus-popup.anim-flip {
    transform: perspective(600px) rotateY(90deg);
    transition: transform 0.6s ease, opacity 0.6s ease;
}
.wooplus-popup.anim-flip.show {
    transform: perspective(600px) rotateY(0);
    opacity: 1;
}

.wooplus-popup.anim-rotate {
    transform: rotate(-180deg);
    transition: transform 0.5s ease, opacity 0.5s ease;
}
.wooplus-popup.anim-rotate.show {
    transform: rotate(0);
    opacity: 1;
}

.wooplus-popup.anim-flip-x {
    transform: perspective(600px) rotateX(90deg);
    transition: transform 0.6s ease, opacity 0.6s ease;
}
.wooplus-popup.anim-flip-x.show {
    transform: perspective(600px) rotateX(0);
    opacity: 1;
}

.wooplus-popup.anim-flip-y {
    transform: perspective(600px) rotateY(90deg);
    transition: transform 0.6s ease, opacity 0.6s ease;
}
.wooplus-popup.anim-flip-y.show {
    transform: perspective(600px) rotateY(0);
    opacity: 1;
}

/* Positioning helpers */
.wooplus-top-left { top: 20px; left: 20px; }
.wooplus-top { top: 20px; left: 50%; transform: translateX(-50%); }
.wooplus-top-right { top: 20px; right: 20px; }
.wooplus-left { top: 50%; left: 20px; transform: translateY(-50%); }
.wooplus-center { top: 50%; left: 50%; transform: translate(-50%, -50%); }
.wooplus-right { top: 50%; right: 20px; transform: translateY(-50%); }
.wooplus-bottom-left { bottom: 20px; left: 20px; }
.wooplus-bottom { bottom: 20px; left: 50%; transform: translateX(-50%); }
.wooplus-bottom-right { bottom: 20px; right: 20px; }

/* Override rules for fullscreen popups.  When the wooplus-fullscreen class
   is applied the popup should fill the viewport and ignore positional
   transforms applied by alignment classes (e.g. .wooplus-center).  We
   explicitly set top, left, right and bottom values and reset transform
   so that the popup occupies the full screen regardless of other
   classes.  The !important flag ensures these properties take
   precedence over alignment rules defined above. */
.wooplus-popup.wooplus-fullscreen {
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    transform: none !important;
    margin: 0 !important;
    padding: 20px;
    overflow-y: auto;
}

/* Ensure the overlay can intercept clicks.  Without pointer-events
   explicitly set to auto the overlay may not block interactions with
   underlying content on some themes. */
.wooplus-popup-overlay {
    pointer-events: auto;
}

/* Animations */
.wooplus-popup.anim-fade {
    transition: opacity 0.3s ease;
}
.wooplus-popup.anim-fade.show {
    opacity: 1;
}
.wooplus-popup.anim-slide {
    transform: translateY(40px);
    transition: transform 0.4s ease, opacity 0.4s ease;
}
.wooplus-popup.anim-slide.show {
    transform: translateY(0);
    opacity: 1;
}
.wooplus-popup.anim-zoom-in {
    transform: scale(0.8);
    transition: transform 0.3s ease, opacity 0.3s ease;
}
.wooplus-popup.anim-zoom-in.show {
    transform: scale(1);
    opacity: 1;
}
.wooplus-popup.anim-zoom-out {
    transform: scale(1.2);
    transition: transform 0.3s ease, opacity 0.3s ease;
}
.wooplus-popup.anim-zoom-out.show {
    transform: scale(1);
    opacity: 1;
}

/* === Template variations added in v1.9.1 === */
/* Festival template: vibrant gradient with warm colours */
.wooplus-festival {
    background: linear-gradient(135deg, #fbbf24, #ec4899);
    color: #ffffff;
    border-radius: 18px;
    box-shadow: 0 12px 32px rgba(0,0,0,0.2);
    padding: 32px;
}
.wooplus-festival .wooplus-popup-icon {
    color: #ffffff;
}
.wooplus-festival .wooplus-popup-button {
    background: rgba(255,255,255,0.2);
    color: #ffffff;
    border-radius: 8px;
}

/* Valentine template: romantic pink/red gradient */
.wooplus-valentine {
    background: linear-gradient(135deg, #f43f5e, #fda4af);
    color: #ffffff;
    border-radius: 18px;
    box-shadow: 0 12px 32px rgba(0,0,0,0.2);
    padding: 32px;
}
.wooplus-valentine .wooplus-popup-icon {
    color: #ffffff;
}
.wooplus-valentine .wooplus-popup-button {
    background: rgba(255,255,255,0.2);
    color: #ffffff;
    border-radius: 8px;
}

/* Sale template: bold yellow and red gradient */
.wooplus-sale {
    background: linear-gradient(135deg, #fde047, #ef4444);
    color: #1f2937;
    border-radius: 18px;
    box-shadow: 0 12px 32px rgba(0,0,0,0.2);
    padding: 32px;
}
.wooplus-sale .wooplus-popup-icon {
    color: #b91c1c;
}
.wooplus-sale .wooplus-popup-button {
    background: #ef4444;
    color: #ffffff;
    border-radius: 8px;
}

/* Birthday template: cheerful blue/purple gradient */
.wooplus-birthday {
    background: linear-gradient(135deg, #60a5fa, #a855f7);
    color: #ffffff;
    border-radius: 18px;
    box-shadow: 0 12px 32px rgba(0,0,0,0.2);
    padding: 32px;
}
.wooplus-birthday .wooplus-popup-icon {
    color: #ffffff;
}
.wooplus-birthday .wooplus-popup-button {
    background: rgba(255,255,255,0.2);
    color: #ffffff;
    border-radius: 8px;
}