/* --- Digital Coupon Template --- */
.coupon-overlay-wrap {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    z-index: 10;
}

.coupon-card {
    background: #ffffff;
    width: 100%;
    max-width: 260px; /* Modal mein zyada bada nahi hoga */
    border-radius: 12px;
    position: relative;
    text-align: center;
    box-shadow: 0 10px 25px rgba(0,0,0,0.2);
    overflow: hidden;
    border: 2px dashed #e74c3c;
}

/* Modal ke liye scaling (Agar parent modal class ho) */
.status-modal-content .coupon-card {
    max-width: 320px; /* Full mode mein thoda bada */
    transform: scale(1.1);
}

.coupon-header {
    background: #e74c3c;
    color: white;
    font-size: 10px;
    font-weight: 900;
    padding: 5px;
    letter-spacing: 1px;
}

.coupon-body {
    padding: 15px 10px;
}

.coupon-value {
    color: #e74c3c;
    font-size: 28px;
    font-weight: 900;
    margin: 0;
}

.coupon-value small {
    font-size: 12px;
    margin-left: 2px;
}

.coupon-text {
    font-size: 11px;
    color: #666;
    margin: 5px 0 12px;
    line-height: 1.2;
}

.coupon-code {
    font-size: 12px;
    font-weight: bold;
    color: #333;
}

.code-box {
    background: #f8f9fa;
    border: 1px dashed #ccc;
    padding: 3px 8px;
    color: #e74c3c;
    border-radius: 4px;
    margin-left: 5px;
}

.coupon-footer {
    padding: 10px;
    background: #fff5f5;
}

.claim-btn {
    background: #e74c3c;
    color: white;
    border: none;
    padding: 6px 15px;
    border-radius: 50px;
    font-size: 10px;
    font-weight: bold;
    cursor: pointer;
    width: 100%;
    transition: 0.3s;
}

/* Punch Holes Design */
.coupon-card .hole {
    position: absolute;
    width: 20px;
    height: 20px;
    background: rgba(0,0,0,0.1); /* Image ke piche ka color blend karne ke liye */
    border-radius: 50%;
    top: 50%;
    transform: translateY(-50%);
    z-index: 11;
}

/* Yeh holes card ke sides ko cut dikhayenge */
.coupon-card .hole.left { left: -12px; box-shadow: inset -5px 0 5px rgba(0,0,0,0.05); }
.coupon-card .hole.right { right: -12px; box-shadow: inset 5px 0 5px rgba(0,0,0,0.05); }

/* --- Discount Circle Template --- */

/* 1. The Floating Badge */
.discount-badge {
    position: absolute;
    top: 15%;        /* Feed aur Modal dono mein balanced rehta hai */
    right: 15px;
    width: 65px;
    height: 65px;
    background: linear-gradient(135deg, #ff416c, #ff4b2b);
    color: white;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 15px rgba(255, 65, 108, 0.4);
    z-index: 99;
    border: 2px solid white;
    animation: badge-float 3s ease-in-out infinite; /* Halki movement */
}

/* Modal mein badge ko thoda bada dikhayenge */
.status-modal-content .discount-badge {
    width: 90px;
    height: 90px;
    top: 70px;
    right: 25px;
    border-width: 3px;
}

.discount-percentage {
    font-size: 18px;
    font-weight: 900;
    line-height: 1;
}

.status-modal-content .discount-percentage {
    font-size: 26px;
}

.discount-off-text {
    font-size: 9px;
    font-weight: bold;
    text-transform: uppercase;
}

.status-modal-content .discount-off-text {
    font-size: 12px;
}

/* 2. Bottom Heading Pill */
.discount-heading-wrap {
    position: absolute;
    bottom: 25px;
    width: 100%;
    text-align: center;
    z-index: 98;
}

/* Modal mein heading ko footer se upar shift karenge */
.status-modal-content .discount-heading-wrap {
    bottom: 150px; 
}

.discount-heading-pill {
    background: white;
    color: #ff416c;
    padding: 6px 18px;
    border-radius: 50px;
    font-weight: 800;
    font-size: 12px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.15);
    display: inline-block;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.status-modal-content .discount-heading-pill {
    font-size: 16px;
    padding: 10px 25px;
}

/* Floating Animation */
@keyframes badge-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

/* --- Scratch Card Template --- */

.scratch-overlay-wrap {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(0, 0, 0, 0.2); /* Image ke upar halka contrast */
}

.scratch-box {
    background: linear-gradient(145deg, #2c3e50, #000000);
    border: 3px solid #f1c40f; /* Gold border for "Win" feeling */
    border-radius: 20px;
    padding: 25px 20px;
    text-align: center;
    width: 100%;
    max-width: 240px;
    box-shadow: 0 15px 35px rgba(0,0,0,0.4);
    position: relative;
    overflow: hidden;
}

/* Modal View Scaling */
.status-modal-content .scratch-box {
    max-width: 300px;
    padding: 40px 30px;
}

.scratch-box i {
    font-size: 32px;
    color: #f1c40f;
    margin-bottom: 15px;
    display: block;
}

.status-modal-content .scratch-box i {
    font-size: 48px;
}

.scratch-box h3 {
    color: #f1c40f;
    margin: 0 0 8px;
    font-size: 18px;
    font-weight: 900;
    letter-spacing: 1px;
}

.status-modal-content .scratch-box h3 {
    font-size: 24px;
}

.scratch-box p {
    color: #ecf0f1;
    font-size: 11px;
    margin-bottom: 20px;
    opacity: 0.9;
}

.status-modal-content .scratch-box p {
    font-size: 14px;
}

/* Scratch Button */
.scratch-btn {
    background: #f1c40f;
    color: #000;
    border: none;
    padding: 10px 20px;
    border-radius: 50px;
    font-weight: 900;
    font-size: 11px;
    cursor: pointer;
    width: 100%;
    text-transform: uppercase;
    transition: 0.3s;
    box-shadow: 0 4px 10px rgba(241, 196, 15, 0.3);
}

.status-modal-content .scratch-btn {
    padding: 15px 25px;
    font-size: 14px;
}

.scratch-btn:active {
    transform: scale(0.95);
}

/* Animations */
.animate-tap {
    animation: tap-pulse 1.5s infinite;
}

@keyframes tap-pulse {
    0% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.2); opacity: 0.7; }
    100% { transform: scale(1); opacity: 1; }
}

/* Scratch Card Texture (Optional extra touch) */
.scratch-box::before {
    content: '';
    position: absolute;
    inset: 0;
    background: url('https://www.transparenttextures.com/patterns/carbon-fibre.png');
    opacity: 0.1;
    pointer-events: none;
}

/* --- Product Showcase Template --- */

.product-overlay-wrap {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 15px;
    z-index: 10;
}

/* 1. New Tag (Top Left) */
.new-tag {
    background: #f1c40f;
    color: #000;
    padding: 4px 12px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 1px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    display: inline-block;
}

.status-modal-content .new-tag {
    font-size: 12px;
    padding: 6px 15px;
}

/* 2. Info Box (Bottom Section) */
.product-info-box {
    background: linear-gradient(transparent, rgba(0,0,0,0.85) 40%);
    padding: 40px 15px 15px;
    margin: 0 -15px; /* Edge to edge coverage */
    color: white;
}

.status-modal-content .product-info-box {
    padding-bottom: 25px;
}

.brand-name {
    font-size: 10px;
    text-transform: uppercase;
    color: #f1c40f;
    margin: 0 0 4px;
    font-weight: bold;
    letter-spacing: 1px;
}

.status-modal-content .brand-name {
    font-size: 13px;
}

.product-name {
    font-size: 18px;
    font-weight: 800;
    margin: 0 0 5px;
    line-height: 1.2;
}

.status-modal-content .product-name {
    font-size: 26px;
    margin-bottom: 10px;
}

.product-price {
    font-size: 16px;
    font-weight: 900;
    color: #fff;
}

.status-modal-content .product-price {
    font-size: 22px;
}

/* 3. Actions (Buy Button) */
.product-actions {
    background: rgba(0,0,0,0.85); /* Box ke saath seamless match */
    padding: 10px 15px 15px;
    margin: 0 -15px -15px;
}

.status-modal-content .product-actions {
    padding: 15px 20px;
    margin-bottom: 140px; /* Safe zone for modal buttons */
    background: transparent; /* Modal mein button alag dikhega */
}

.buy-btn {
    width: 100%;
    background: white;
    color: #000;
    border: none;
    padding: 10px;
    border-radius: 6px;
    font-weight: 900;
    font-size: 11px;
    cursor: pointer;
    text-transform: uppercase;
    transition: 0.3s;
}

.status-modal-content .buy-btn {
    padding: 15px;
    font-size: 14px;
    background: #f1c40f; /* Modal mein thoda standout color */
}

.buy-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(241, 196, 15, 0.4);
}

/* --- New Arrival Template --- */

/* Parent container (jis par overflow:hidden hona chahiye) */
.new-arrival-container {
    position: absolute;
    inset: 0;
    overflow: hidden; /* Ribbon ko bahar jane se rokne ke liye */
    z-index: 90;
}

.new-arrival-ribbon {
    position: absolute;
    top: 0;
    left: 0;
    background: #2ed573;
    color: white;
    padding: 8px 0;
    font-weight: 900;
    text-align: center;
    z-index: 99;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
    text-transform: uppercase;
    letter-spacing: 1px;
    
    /* Rotation Logic */
    width: 180px;
    transform: rotate(-45deg) translate(-50px, -10px);
    transform-origin: center;
}

/* Modal View Scaling */
.status-modal-content .new-arrival-ribbon {
    width: 250px; /* Badi screen par bada ribbon */
    font-size: 18px;
    padding: 12px 0;
    transform: rotate(-45deg) translate(-75px, -15px);
}

.new-arrival-ribbon span {
    font-size: 12px;
}

.status-modal-content .new-arrival-ribbon span {
    font-size: 18px;
}

/* Optional: Ribbon Glow effect for New Arrivals */
.new-arrival-ribbon::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
    animation: ribbon-shimmer 3s infinite;
}

@keyframes ribbon-shimmer {
    0% { left: -100%; }
    20% { left: 100%; }
    100% { left: 100%; }
}
/* --- Sold Out Template --- */

.sold-out-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.6); /* Thoda dark background */
    backdrop-filter: blur(3px);      /* Image ko halka blur karega */
    -webkit-backdrop-filter: blur(3px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 98;
}

.sold-out-stamp {
    border: 5px solid #ff4757; /* Red color for Sold Out */
    color: #ff4757;
    padding: 15px 30px;
    font-size: 28px;
    font-weight: 900;
    transform: rotate(-15deg);
    text-transform: uppercase;
    letter-spacing: 2px;
    border-radius: 8px;
    position: relative;
    box-shadow: 0 0 15px rgba(255, 71, 87, 0.3);
    background: rgba(255, 255, 255, 0.05); /* Transparent inner */
}

/* Modal View: Stamp ko bada aur aggressive dikhayenge */
.status-modal-content .sold-out-stamp {
    font-size: 52px;
    border-width: 8px;
    padding: 25px 50px;
    transform: rotate(-15deg) scale(1.1);
}

/* Grunge/Rough Texture (Optional: Isse stamp real lagega) */
.sold-out-stamp::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(45deg, transparent 45%, rgba(255,255,255,0.2) 50%, transparent 55%);
    background-size: 5px 5px;
    pointer-events: none;
}

/* Animation: Stamp entry effect */
.status-modal-content .sold-out-overlay {
    animation: fadeIn 0.4s ease-out;
}

.status-modal-content .sold-out-stamp {
    animation: stampIn 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes stampIn {
    from { transform: rotate(-15deg) scale(3); opacity: 0; }
    to { transform: rotate(-15deg) scale(1.1); opacity: 1; }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
/* --- Master Offer Template --- */

.combined-offer-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 15px;
    z-index: 90;
}

/* 1. Top Sub-heading Badge */
.offer-sub-badge {
    align-self: flex-start;
    background: #ff4757;
    color: white;
    padding: 5px 15px;
    border-radius: 4px;
    font-weight: 900;
    font-size: 11px;
    letter-spacing: 1.5px;
    box-shadow: 0 4px 10px rgba(255,71,87,0.3);
    text-transform: uppercase;
}

.status-modal-content .offer-sub-badge {
    font-size: 14px;
    padding: 8px 20px;
    margin-top: 10px;
}

/* 2. Center Value Circle */
.offer-center-circle {
    align-self: center;
    width: 100px;
    height: 100px;
    background: rgba(255,255,255,0.95);
    border: 4px solid #ff4757;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 25px rgba(0,0,0,0.25);
    z-index: 92;
    transition: transform 0.3s ease;
}

.status-modal-content .offer-center-circle {
    width: 140px;
    height: 140px;
    border-width: 6px;
    /* Modal mein thoda upar shift taaki bottom card ke liye jagah bane */
    transform: translateY(-20px);
}

.offer-circle-text {
    color: #2f3542;
    font-size: 9px;
    font-weight: bold;
    text-transform: uppercase;
}

.status-modal-content .offer-circle-text {
    font-size: 12px;
}

.offer-circle-value {
    color: #ff4757;
    font-size: 24px;
    font-weight: 900;
    line-height: 1;
    margin: 2px 0;
}

.status-modal-content .offer-circle-value {
    font-size: 36px;
}

/* 3. Bottom Information Card */
.offer-bottom-card {
    background: rgba(0,0,0,0.8);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    padding: 15px;
    border-radius: 12px;
    text-align: center;
    border: 1px solid rgba(255,255,255,0.2);
    box-shadow: 0 -5px 20px rgba(0,0,0,0.3);
}

.status-modal-content .offer-bottom-card {
    margin-bottom: 140px; /* Call/WhatsApp buttons safety */
    padding: 25px 20px;
    border-radius: 20px;
}

.offer-main-heading {
    color: #ffa502;
    margin: 0;
    font-size: 16px;
    font-weight: 900;
    text-transform: uppercase;
    line-height: 1.2;
}

.status-modal-content .offer-main-heading {
    font-size: 22px;
    margin-bottom: 8px;
}

.offer-description {
    color: #ffffff;
    margin: 6px 0 12px;
    font-size: 12px;
    opacity: 0.95;
    line-height: 1.4;
}

.status-modal-content .offer-description {
    font-size: 15px;
    margin-bottom: 20px;
}

/* 4. Action Button */
.offer-grab-btn {
    background: #ff4757;
    color: white;
    border: none;
    padding: 8px 25px;
    border-radius: 50px;
    font-weight: 800;
    font-size: 11px;
    text-transform: uppercase;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(255,71,87,0.4);
    transition: 0.3s;
}

.status-modal-content .offer-grab-btn {
    padding: 12px 40px;
    font-size: 14px;
}

.offer-grab-btn:active {
    transform: scale(0.95);
}

/* --- Service Showcase Template --- */

.service-overlay-wrap {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 15px;
    z-index: 90;
}

/* 1. Verified Badge (Top Left) */
.service-verified-badge {
    align-self: flex-start;
    background: #3498db;
    color: white;
    padding: 6px 15px;
    border-radius: 50px;
    font-weight: 800;
    font-size: 10px;
    display: flex;
    align-items: center;
    gap: 6px;
    box-shadow: 0 4px 10px rgba(52, 152, 219, 0.3);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.status-modal-content .service-verified-badge {
    font-size: 13px;
    padding: 8px 18px;
    margin-top: 10px;
}

/* 2. Service Info Card (Bottom) */
.service-info-card {
    background: white;
    border-radius: 15px;
    padding: 15px;
    box-shadow: 0 -5px 20px rgba(0,0,0,0.15);
    border-bottom: 5px solid #3498db;
    transition: transform 0.3s ease;
}

.status-modal-content .service-info-card {
    margin-bottom: 140px; /* Safe zone for modal action buttons */
    padding: 25px 20px;
    border-radius: 20px;
}

.service-title {
    margin: 0;
    color: #2c3e50;
    font-size: 18px;
    font-weight: 800;
    line-height: 1.2;
}

.status-modal-content .service-title {
    font-size: 24px;
}

/* 3. Ratings Stars */
.service-stars {
    color: #f1c40f;
    font-size: 11px;
    margin: 6px 0;
    display: flex;
    gap: 2px;
}

.status-modal-content .service-stars {
    font-size: 15px;
    margin: 10px 0;
}

.service-desc {
    margin: 8px 0;
    color: #34495e;
    font-size: 12px;
    line-height: 1.5;
}

.status-modal-content .service-desc {
    font-size: 15px;
    margin: 12px 0 20px;
}

/* 4. Footer Section (Speciality & Button) */
.service-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 10px;
    border-top: 1px solid #eee;
    padding-top: 10px;
}

.status-modal-content .service-footer {
    margin-top: 15px;
    padding-top: 15px;
}

.service-speciality {
    color: #27ae60;
    font-weight: 800;
    font-size: 11px;
    text-transform: uppercase;
}

.status-modal-content .service-speciality {
    font-size: 14px;
}

.service-book-btn {
    background: #3498db;
    color: white;
    border: none;
    padding: 8px 18px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    cursor: pointer;
    transition: 0.3s;
}

.status-modal-content .service-book-btn {
    padding: 12px 25px;
    font-size: 14px;
}

.service-book-btn:hover {
    background: #2980b9;
    box-shadow: 0 4px 12px rgba(52, 152, 219, 0.4);
}

/* --- Flash Sale Template --- */

.flash-overlay-wrap {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 15px;
    z-index: 90;
}

/* 1. Live Indicator Badge */
.flash-live-badge {
    align-self: flex-start;
    background: #e74c3c;
    color: white;
    padding: 5px 15px;
    border-radius: 4px;
    font-weight: 900;
    font-size: 10px;
    display: flex;
    align-items: center;
    gap: 8px;
    letter-spacing: 1px;
    box-shadow: 0 4px 10px rgba(231, 76, 60, 0.3);
}

.flash-live-dot {
    width: 8px;
    height: 8px;
    background: white;
    border-radius: 50%;
    animation: flash-blink 1s infinite;
}

.status-modal-content .flash-live-badge {
    font-size: 13px;
    padding: 8px 18px;
    margin-top: 10px;
}

/* 2. Central Discount Box */
.flash-center-content {
    align-self: center;
    text-align: center;
}

.flash-discount-card {
    background: white;
    color: #e74c3c;
    padding: 10px 25px;
    border-radius: 15px;
    display: inline-block;
    box-shadow: 0 10px 25px rgba(0,0,0,0.3);
    transform: scale(1.1);
}

.status-modal-content .flash-discount-card {
    padding: 20px 40px;
    transform: scale(1.3);
}

.flash-value {
    margin: 0;
    font-size: 32px;
    font-weight: 900;
    line-height: 1;
}

.status-modal-content .flash-value {
    font-size: 48px;
}

.flash-label {
    margin: 0;
    font-size: 9px;
    font-weight: 800;
    text-transform: uppercase;
}

/* 3. Bottom Progress Section */
.flash-bottom-card {
    background: white;
    padding: 15px;
    border-radius: 15px;
    box-shadow: 0 -5px 20px rgba(0,0,0,0.2);
}

.status-modal-content .flash-bottom-card {
    margin-bottom: 140px; /* Safe zone */
    padding: 25px 20px;
}

.flash-progress-container {
    width: 100%;
    height: 8px;
    background: #eee;
    border-radius: 10px;
    margin-bottom: 8px;
    overflow: hidden;
}

.flash-progress-bar {
    height: 100%;
    background: #e74c3c;
    transition: width 1s ease-in-out;
}

.flash-claimed-text {
    font-size: 10px;
    color: #666;
    font-weight: bold;
    margin-bottom: 12px;
    text-align: center;
}

.status-modal-content .flash-claimed-text {
    font-size: 13px;
}

/* 4. Animations */
@keyframes flash-blink {
    0% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.4; transform: scale(0.8); }
    100% { opacity: 1; transform: scale(1); }
}

.flash-btn {
    width: 100%;
    background: #1a1a1a;
    color: white;
    border: none;
    padding: 12px;
    border-radius: 8px;
    font-weight: 900;
    font-size: 12px;
    text-transform: uppercase;
    cursor: pointer;
}

/* --- Spotlight Template --- */

.spotlight-overlay-wrap {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 15px;
    z-index: 90;
}

/* 1. Floating Crown Icon (Top) */
.spotlight-crown {
    align-self: center;
    background: #f1c40f;
    color: white;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    box-shadow: 0 6px 15px rgba(241, 196, 15, 0.4);
    border: 3px solid white;
    z-index: 92;
    animation: spotlight-float 3s ease-in-out infinite;
}

.status-modal-content .spotlight-crown {
    width: 85px;
    height: 85px;
    font-size: 40px;
    margin-top: 20px;
}

/* 2. Spotlight Info Card (Bottom) */
.spotlight-card {
    background: white;
    border-radius: 20px;
    padding: 20px;
    text-align: center;
    box-shadow: 0 -10px 30px rgba(0,0,0,0.15);
    border-top: 5px solid #f1c40f;
    position: relative;
}

.status-modal-content .spotlight-card {
    margin-bottom: 140px; /* Safe zone for footer */
    padding: 30px 25px;
}

.spotlight-badge {
    background: #2d3436;
    color: #f1c40f;
    padding: 4px 15px;
    border-radius: 50px;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.status-modal-content .spotlight-badge {
    font-size: 13px;
    padding: 6px 20px;
}

.spotlight-name {
    margin: 12px 0 6px;
    color: #2d3436;
    font-size: 20px;
    font-weight: 800;
    line-height: 1.2;
}

.status-modal-content .spotlight-name {
    font-size: 28px;
    margin-bottom: 10px;
}

/* 3. Gold Stars & Highlight Text */
.spotlight-stars {
    color: #f1c40f;
    font-size: 13px;
    margin-bottom: 8px;
}

.status-modal-content .spotlight-stars {
    font-size: 18px;
}

.spotlight-highlight {
    color: #636e72;
    font-size: 12px;
    margin-bottom: 15px;
    font-style: italic;
}

.status-modal-content .spotlight-highlight {
    font-size: 15px;
    margin-bottom: 25px;
}

/* 4. Action Button */
.spotlight-btn {
    width: 100%;
    background: #000;
    color: #f1c40f;
    border: none;
    padding: 12px;
    border-radius: 10px;
    font-weight: 900;
    font-size: 12px;
    text-transform: uppercase;
    cursor: pointer;
    transition: 0.3s;
}

.status-modal-content .spotlight-btn {
    padding: 16px;
    font-size: 14px;
}

/* Animation */
@keyframes spotlight-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

/* --- Event / Celebration Template --- */

.event-overlay-wrap {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 15px;
    z-index: 90;
}

/* 1. Top-Left Calendar Badge */
.event-date-badge {
    align-self: flex-start;
    background: #e74c3c;
    color: white;
    padding: 10px;
    border-radius: 12px;
    text-align: center;
    min-width: 60px;
    box-shadow: 0 8px 20px rgba(231, 76, 60, 0.4);
    border: 2px solid white;
}

.status-modal-content .event-date-badge {
    min-width: 80px;
    padding: 15px;
    margin-top: 10px;
}

.event-day {
    font-size: 24px;
    font-weight: 900;
    line-height: 1;
}

.status-modal-content .event-day {
    font-size: 36px;
}

.event-month {
    font-size: 10px;
    font-weight: bold;
    text-transform: uppercase;
    margin-top: 2px;
}

.status-modal-content .event-month {
    font-size: 14px;
}

/* 2. Event Info Card (Bottom) */
.event-info-card {
    background: white;
    border-radius: 25px;
    padding: 20px;
    text-align: center;
    box-shadow: 0 -10px 30px rgba(0,0,0,0.2);
    position: relative;
}

.status-modal-content .event-info-card {
    margin-bottom: 140px; /* Safe zone */
    padding: 30px 25px;
}

.event-category {
    color: #6c5ce7;
    font-weight: 800;
    font-size: 10px;
    letter-spacing: 2px;
    display: block;
    margin-bottom: 8px;
    text-transform: uppercase;
}

.status-modal-content .event-category {
    font-size: 14px;
}

.event-title {
    margin: 0;
    color: #2d3436;
    font-size: 20px;
    font-weight: 800;
    line-height: 1.2;
}

.status-modal-content .event-title {
    font-size: 28px;
}

/* 3. Timing / Location Info */
.event-location {
    margin: 10px 0 15px;
    color: #636e72;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.status-modal-content .event-location {
    font-size: 16px;
    margin: 15px 0 25px;
}

/* 4. Action Button (Ticket/Pass) */
.event-ticket-btn {
    width: 100%;
    background: #6c5ce7;
    color: white;
    border: none;
    padding: 12px;
    border-radius: 12px;
    font-weight: 900;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    text-transform: uppercase;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(108, 92, 231, 0.4);
    transition: 0.3s;
}

.status-modal-content .event-ticket-btn {
    padding: 16px;
    font-size: 15px;
}

.event-ticket-btn:hover {
    transform: translateY(-2px);
    background: #5b4cc4;
}

/* --- Hiring / Recruitment Template --- */

.hiring-overlay-wrap {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 15px;
    z-index: 90;
}

/* 1. The Main Recruitment Card */
.hiring-card {
    background: white;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
    border-bottom: 5px solid #22c55e;
    width: 100%;
}

.status-modal-content .hiring-card {
    margin-bottom: 140px; /* Safe zone for modal buttons */
    border-radius: 20px;
}

/* 2. Dark Header (Top Bar) */
.hiring-header {
    background: #1e293b;
    padding: 10px;
    text-align: center;
    color: white;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.status-modal-content .hiring-header {
    font-size: 14px;
    padding: 15px;
}

.hiring-body {
    padding: 15px;
    text-align: center;
}

.status-modal-content .hiring-body {
    padding: 25px 20px;
}

/* 3. Job Title & Salary */
.hiring-title {
    margin: 0;
    color: #1e293b;
    font-size: 20px;
    font-weight: 800;
}

.status-modal-content .hiring-title {
    font-size: 26px;
}

.hiring-salary-badge {
    display: inline-block;
    background: #f1f5f9;
    color: #22c55e;
    padding: 5px 12px;
    border-radius: 6px;
    font-size: 10px;
    font-weight: 800;
    margin: 10px 0;
    border: 1px solid rgba(34, 197, 94, 0.2);
}

.status-modal-content .hiring-salary-badge {
    font-size: 14px;
    padding: 8px 18px;
    margin: 15px 0;
}

/* 4. Content & Button */
.hiring-content {
    margin: 5px 0 15px;
    color: #64748b;
    font-size: 12px;
    line-height: 1.5;
}

.status-modal-content .hiring-content {
    font-size: 15px;
    margin-bottom: 25px;
}

.hiring-footer {
    border-top: 1px dashed #eee;
    padding-top: 12px;
}

.apply-btn {
    width: 100%;
    background: #22c55e;
    color: white;
    border: none;
    padding: 10px;
    border-radius: 8px;
    font-weight: 800;
    font-size: 12px;
    text-transform: uppercase;
    cursor: pointer;
    transition: 0.3s;
}

.status-modal-content .apply-btn {
    padding: 15px;
    font-size: 15px;
    letter-spacing: 1px;
}

.apply-btn:hover {
    background: #16a34a;
    box-shadow: 0 4px 12px rgba(34, 197, 94, 0.3);
}

/* --- Grand Opening Template --- */

.opening-overlay-wrap {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 15px;
    z-index: 90;
}

/* 1. Top Ribbon Badge */
.opening-top-badge {
    align-self: center;
    background: #e74c3c;
    color: white;
    padding: 8px 25px;
    border-radius: 6px;
    font-weight: 900;
    font-size: 11px;
    letter-spacing: 2px;
    border: 1px solid #f1c40f;
    box-shadow: 0 5px 15px rgba(231, 76, 60, 0.4);
    text-transform: uppercase;
}

.status-modal-content .opening-top-badge {
    font-size: 15px;
    padding: 12px 40px;
    margin-top: 20px;
}

/* 2. Middle Invitation Box */
.opening-middle-box {
    align-self: center;
    width: 95%;
    background: rgba(255, 255, 255, 0.95);
    border: 2px solid #f1c40f;
    padding: 25px 15px;
    text-align: center;
    position: relative;
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
}

.status-modal-content .opening-middle-box {
    width: 90%;
    padding: 40px 25px;
}

/* Scissors Icon */
.opening-scissors {
    position: absolute;
    top: -15px;
    left: 50%;
    transform: translateX(-50%);
    background: white;
    padding: 5px 15px;
    color: #e74c3c;
    font-size: 20px;
    border: 1px solid #f1c40f;
    border-radius: 50px;
}

.status-modal-content .opening-scissors {
    font-size: 28px;
    top: -22px;
}

.opening-title {
    margin: 10px 0 5px;
    color: #2c3e50;
    font-size: 20px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.status-modal-content .opening-title {
    font-size: 28px;
}

.opening-desc {
    margin: 8px 0;
    color: #34495e;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.4;
}

.status-modal-content .opening-desc {
    font-size: 16px;
}

/* 3. Bottom Schedule Card */
.opening-bottom-info {
    background: #1a1a1a;
    padding: 15px;
    border-radius: 12px;
    text-align: center;
    color: white;
    border: 1px solid #f1c40f;
}

.status-modal-content .opening-bottom-info {
    margin-bottom: 140px; /* Safe zone for modal buttons */
    padding: 25px;
}

.opening-date-text {
    font-size: 14px;
    font-weight: 900;
    color: #f1c40f;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.status-modal-content .opening-date-text {
    font-size: 20px;
}

.opening-location-text {
    font-size: 11px;
    opacity: 0.9;
    margin-top: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.status-modal-content .opening-location-text {
    font-size: 14px;
}

/* --- Resale / Pre-owned Template --- */

.resale-overlay-wrap {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 15px;
    z-index: 90;
}

/* 1. Pre-owned Tag (Top Right) */
.resale-tag {
    align-self: flex-end;
    background: #e67e22;
    color: white;
    padding: 5px 12px;
    border-radius: 4px;
    font-weight: 800;
    font-size: 10px;
    letter-spacing: 0.5px;
    box-shadow: 0 4px 10px rgba(230, 126, 34, 0.3);
}

.status-modal-content .resale-tag {
    font-size: 13px;
    padding: 8px 18px;
    margin-top: 10px;
}

/* 2. Resale Info Card */
.resale-card {
    background: white;
    border-radius: 15px;
    padding: 15px;
    box-shadow: 0 -5px 25px rgba(0,0,0,0.15);
    border-top: 4px solid #2c3e50;
}

.status-modal-content .resale-card {
    margin-bottom: 140px; /* Safe zone */
    padding: 25px 20px;
    border-radius: 20px;
}

/* 3. Header: Title & Price */
.resale-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.resale-title {
    margin: 0;
    color: #2c3e50;
    font-size: 18px;
    font-weight: 800;
    max-width: 65%;
    line-height: 1.2;
}

.status-modal-content .resale-title {
    font-size: 24px;
}

.resale-price {
    font-size: 20px;
    font-weight: 900;
    color: #27ae60;
}

.status-modal-content .resale-price {
    font-size: 28px;
}

/* 4. Condition & Content */
.resale-condition {
    margin: 0 0 10px;
    color: #e67e22;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
}

.status-modal-content .resale-condition {
    font-size: 14px;
    margin-bottom: 15px;
}

.resale-description-box {
    background: #f8f9fa;
    padding: 10px;
    border-radius: 8px;
    font-size: 11px;
    color: #636e72;
    margin-bottom: 12px;
    line-height: 1.4;
    border-left: 3px solid #ddd;
}

.status-modal-content .resale-description-box {
    font-size: 15px;
    padding: 15px;
    margin-bottom: 25px;
}

/* 5. Chat Button */
.resale-chat-btn {
    width: 100%;
    background: #2c3e50;
    color: white;
    border: none;
    padding: 12px;
    border-radius: 8px;
    font-weight: 800;
    font-size: 12px;
    text-transform: uppercase;
    cursor: pointer;
    transition: 0.3s;
}

.status-modal-content .resale-chat-btn {
    padding: 16px;
    font-size: 14px;
}

.resale-chat-btn:hover {
    background: #1a252f;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

/* --- Rental / Property Template --- */

.rental-overlay-wrap {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    z-index: 90;
}

/* 1. Top-Right Rental Ribbon (Clip-path) */
.rental-price-banner {
    position: absolute;
    top: 0;
    right: 15px;
    background: #3498db;
    color: white;
    padding: 12px 10px 25px;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 88%, 0 100%);
    text-align: center;
    min-width: 70px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    z-index: 95;
}

.status-modal-content .rental-price-banner {
    min-width: 90px;
    padding: 20px 12px 35px;
    right: 25px;
}

.rental-tag-text {
    font-size: 9px;
    font-weight: 800;
    text-transform: uppercase;
    opacity: 0.9;
    letter-spacing: 1px;
}

.rental-price-value {
    font-size: 18px;
    font-weight: 900;
    line-height: 1.2;
    margin: 2px 0;
}

.status-modal-content .rental-price-value {
    font-size: 26px;
}

.rental-duration {
    font-size: 9px;
    opacity: 0.8;
}

/* 2. Bottom Info Section (Gradient Overlay) */
.rental-bottom-info {
    margin-top: auto;
    background: linear-gradient(to top, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.7) 60%, transparent 100%);
    padding: 50px 15px 15px;
    color: white;
}

.status-modal-content .rental-bottom-info {
    padding: 80px 25px 30px;
    margin-bottom: 140px; /* Safe zone for modal buttons */
}

.rental-status-badge {
    background: #27ae60;
    color: white;
    padding: 3px 10px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 900;
    text-transform: uppercase;
}

.rental-title {
    margin: 12px 0 6px;
    font-size: 20px;
    font-weight: 800;
    line-height: 1.2;
}

.status-modal-content .rental-title {
    font-size: 28px;
}

/* 3. Location & Features */
.rental-location {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    margin-bottom: 10px;
    color: #3498db;
    font-weight: 700;
}

.status-modal-content .rental-location {
    font-size: 15px;
    margin-bottom: 15px;
}

.rental-desc {
    margin: 0;
    font-size: 12px;
    opacity: 0.9;
    line-height: 1.5;
}

.status-modal-content .rental-desc {
    font-size: 15px;
}

/* 4. Action Button */
.rental-btn {
    width: 100%;
    background: #3498db;
    color: white;
    border: none;
    padding: 12px;
    border-radius: 8px;
    font-weight: 900;
    font-size: 12px;
    text-transform: uppercase;
    cursor: pointer;
    margin-top: 15px;
    transition: 0.3s;
    box-shadow: 0 4px 15px rgba(52, 152, 219, 0.4);
}

.status-modal-content .rental-btn {
    padding: 16px;
    font-size: 14px;
}

/* --- Normal / Standard Template --- */

.normal-overlay-wrap {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    z-index: 10;
}

.normal-message-box {
    background: rgba(255, 255, 255, 0.85); /* Slightly more transparent */
    backdrop-filter: blur(10px);          /* High-end glass effect */
    -webkit-backdrop-filter: blur(10px);
    padding: 25px 20px;
    border-radius: 24px;
    text-align: center;
    width: 100%;
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
    border: 1px solid rgba(255,255,255,0.4); /* Glass border */
    position: relative;
    overflow: hidden;
}

/* Modal View: Text ko highlight karne ke liye */
.status-modal-content .normal-message-box {
    padding: 40px 30px;
    max-width: 85%;
    border-radius: 30px;
}

.normal-text {
    margin: 0;
    font-size: 15px; /* Feed ke liye perfect */
    font-weight: 700;
    color: #2d3436;
    line-height: 1.5;
    word-wrap: break-word;
}

/* Modal mein bada font */
.status-modal-content .normal-text {
    font-size: 22px;
    font-weight: 800;
    color: #1a1a1a;
}

/* Optional: Decorative Quote Mark */
.normal-message-box::before {
    content: '"';
    position: absolute;
    top: -10px;
    left: 20px;
    font-size: 60px;
    color: rgba(0,0,0,0.05);
    font-family: serif;
}

/* --- Standard Business Template --- */

.standard-overlay-wrap {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    z-index: 90;
}

/* 1. Business Top Header Bar */
.standard-header-bar {
    background: #1976d2; /* Professional Blue */
    color: white;
    padding: 10px 15px;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 1px;
    text-transform: uppercase;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}

.status-modal-content .standard-header-bar {
    font-size: 14px;
    padding: 18px 20px;
}

/* 2. Content Box (Bottom Curve) */
.standard-content-box {
    background: white;
    padding: 20px 15px;
    border-radius: 20px 20px 0 0;
    box-shadow: 0 -8px 25px rgba(0,0,0,0.15);
}

.status-modal-content .standard-content-box {
    padding: 30px 25px 40px;
    margin-bottom: 140px; /* Safe zone for Call/WhatsApp buttons */
    border-radius: 30px 30px 0 0;
}

.standard-content-text {
    font-size: 13px;
    color: #444;
    margin: 0 0 15px;
    line-height: 1.5;
    font-weight: 500;
}

.status-modal-content .standard-content-text {
    font-size: 17px;
    margin-bottom: 25px;
}

/* 3. Contact Detail Row */
.standard-contact-row {
    font-size: 11px;
    font-weight: 800;
    color: #1976d2;
    display: flex;
    align-items: center;
    gap: 8px;
    border-top: 1px solid #eee;
    padding-top: 12px;
}

.status-modal-content .standard-contact-row {
    font-size: 15px;
    padding-top: 18px;
}

.standard-contact-row i {
    font-size: 12px;
}

.status-modal-content .standard-contact-row i {
    font-size: 16px;
}
/* --- Template Specific Dynamic Backgrounds (No-Image Safety) --- */
/* Placeholder Container jab image na ho */
.no-image-placeholder {
    width: 100%; 
    min-height: 250px; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    padding: 30px; 
    text-align: center;
    color: white;
    box-sizing: border-box;
}

.no-image-text {
    font-weight: 800; 
    line-height: 1.4; 
    margin: 0; 
    font-size: 20px;
}

/* Yeh classes ab seedha .content-area par apply hongi */
.content-area.template-bg-flash_sale { background: linear-gradient(135deg, #ff0844 0%, #ffb199 100%); }
.content-area.template-bg-hiring { background: linear-gradient(135deg, #1e293b 0%, #334155 100%); }
/* ... (Baaki saare 17 gradients jo maine upar diye the, unhe .content-area.template-bg- ke saath likh dein) */
/* 1. Normal / Standard (Neutral & Clean) */
.template-bg-normal, .template-bg-standard {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

/* 2. New Arrival (Fresh & Vibrant) */
.template-bg-new_arrival {
    background: linear-gradient(135deg, #00b09b 0%, #96c93d 100%);
}

/* 3. Sold Out (Muted & Professional) */
.template-bg-sold_out {
    background: linear-gradient(135deg, #2c3e50 0%, #4b79a1 100%);
}

/* 4. Master Offer (Urgency & Energy) */
.template-bg-offer {
    background: linear-gradient(135deg, #f83600 0%, #f9d423 100%);
}

/* 5. Service Showcase (Trustworthy Blue) */
.template-bg-service {
    background: linear-gradient(135deg, #2193b0 0%, #6dd5ed 100%);
}

/* 6. Flash Sale (High Urgency Red) */
.template-bg-flash_sale {
    background: linear-gradient(135deg, #ff0844 0%, #ffb199 100%);
}

/* 7. Spotlight (VIP Gold & Luxury) */
.template-bg-spotlight {
    background: linear-gradient(135deg, #bf953f, #fcf6ba, #b38728, #fbf5b7, #aa771c);
}

/* 8. Event (Celebration Purple) */
.template-bg-event {
    background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
}

/* 9. Hiring (Corporate Confidence) */
.template-bg-hiring {
    background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
}

/* 10. Grand Opening (Ceremonial Red) */
.template-bg-opening {
    background: linear-gradient(135deg, #870000 0%, #190a05 100%);
}

/* 11. Resale / Marketplace (Earthbound & Trusted) */
.template-bg-resale {
    background: linear-gradient(135deg, #e67e22 0%, #d35400 100%);
}

/* 12. Rental / Property (Modern Real Estate Blue) */
.template-bg-rental {
    background: linear-gradient(135deg, #2980b9 0%, #2c3e50 100%);
}

/* 13. Coupon (Playful & Rewarding) */
.template-bg-coupon {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}

/* 14. Product Showcase (Sleek & Minimal) */
.template-bg-product {
    background: linear-gradient(135deg, #0f2027 0%, #203a43 50%, #2c5364 100%);
}

/* 15. Feedback / Reviews (Calm & Friendly) */
.template-bg-feedback {
    background: linear-gradient(135deg, #00c6ff 0%, #0072ff 100%);
}

/* 16. Announcement (Attention Grabbing) */
.template-bg-announcement {
    background: linear-gradient(135deg, #f7971e 0%, #ffd200 100%);
}

/* 17. Story / Personal (Warm & Soft) */
.template-bg-story {
    background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%);
}