/* ═══════════════════════════════════════════════════════════ JAYAGURU SPICES — coupon-fix.css Add AFTER cart.css in ═══════════════════════════════════════════════════════════ */ /* ── SPARKLE PARTICLE ── */ @keyframes jgSparkleOut { 0% { transform: translate(-50%, -50%) scale(1); opacity: 1; } 100% { transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(0); opacity: 0; } } .jg-sparkle-particle { will-change: transform, opacity; line-height: 1; } /* ── PRICE COUNT-DOWN TICK ── */ @keyframes priceTick { 0% { transform: scale(1.18); color: #F5C800; } 100% { transform: scale(1); color: inherit; } } .price-tick { animation: priceTick 0.08s ease-out; } /* ── PRICE AFTER COUPON (green glow) ── */ @keyframes priceSuccess { 0% { text-shadow: 0 0 0px rgba(46,125,50,0); } 40% { text-shadow: 0 0 18px rgba(46,125,50,0.6); } 100% { text-shadow: 0 0 0px rgba(46,125,50,0); } } .price-coupon-active { color: #2E7D32 !important; animation: priceSuccess 1s ease-out forwards; } [data-theme="dark"] .price-coupon-active { color: #66BB6A !important; } /* ── PROMO NOTE above Buy Now ── */ .jg-promo-note { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-bottom: 14px; padding: 11px 15px; background: linear-gradient(135deg, rgba(212,160,23,0.12), rgba(232,98,26,0.08)); border: 1.5px solid rgba(212,160,23,0.45); border-radius: 12px; font-size: 0.8rem; line-height: 1.5; color: var(--c-text); animation: promoNoteIn 0.4s cubic-bezier(0.34, 1.4, 0.64, 1) both; } @keyframes promoNoteIn { from { transform: translateY(-6px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } .jg-promo-tag { display: flex; align-items: center; gap: 5px; } .jg-promo-tag strong { display: inline-block; background: linear-gradient(135deg, #D4A017, #E8621A); color: #fff; border-radius: 6px; padding: 1px 8px; font-size: 0.78rem; font-weight: 900; letter-spacing: 0.5px; font-family: 'DM Sans', sans-serif; } .jg-promo-ship strong { color: #2E7D32; font-weight: 800; } [data-theme="dark"] .jg-promo-ship strong { color: #66BB6A; } .jg-promo-sep { color: var(--c-muted); font-weight: 700; } @media (max-width: 480px) { .jg-promo-note { flex-direction: column; gap: 5px; padding: 10px 12px; font-size: 0.77rem; } .jg-promo-sep { display: none; } } /* ── CART DISCOUNT ROW ── */ .cart-discount-val { color: #2E7D32; font-weight: 800; } [data-theme="dark"] .cart-discount-val { color: #66BB6A; } #cart-discount-row { display: none; /* shown by JS when coupon applied */ } /* ── COUPON INPUT POLISH ── */ .coupon-widget { position: relative; } .coupon-input-row input:focus { border-color: #D4A017; box-shadow: 0 0 0 3px rgba(212,160,23,0.15); outline: none; } .coupon-input-row button { white-space: nowrap; min-width: 68px; transition: background 0.2s, transform 0.15s; } .coupon-input-row button:active { transform: scale(0.96); } /* ── COMBO DETAIL PRICE ANIMATION ── */ @keyframes strikeThrough { from { text-decoration-color: transparent; } to { text-decoration-color: currentColor; } } .combo-detail-mrp-strike { text-decoration: line-through; color: var(--c-muted); font-size: 1rem; } .combo-detail-mrp-strike.strike-animate { animation: strikeThrough 0.4s ease-out 0.2s both; } @keyframes pricePop { 0% { transform: scale(0.8); opacity: 0; } 60% { transform: scale(1.15); } 100% { transform: scale(1); opacity: 1; } } .combo-price-animate.price-pop { animation: pricePop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) 0.1s both; } @keyframes pillPop { 0% { transform: scale(0); opacity: 0; } 60% { transform: scale(1.1); } 100% { transform: scale(1); opacity: 1; } } .combo-detail-save-pill { display: inline-flex; align-items: center; background: linear-gradient(135deg, #2E7D32, #43A047); color: #fff; border-radius: 20px; padding: 3px 12px; font-size: 0.78rem; font-weight: 800; letter-spacing: 0.3px; } .combo-detail-save-pill.pill-pop { animation: pillPop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) 0.3s both; } .combo-detail-price-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 12px 0 4px; } .combo-detail-price { font-size: 2rem; font-weight: 900; line-height: 1; } .combo-detail-price-sub { font-size: 0.78rem; color: var(--c-muted); margin: 0 0 12px; } /* ── SAVINGS BADGE (injected next to price after coupon) ── */ @keyframes badgeSlideIn { from { transform: translateX(-8px) scale(0.85); opacity: 0; } to { transform: translateX(0) scale(1); opacity: 1; } } .jg-savings-badge { display: inline-flex; align-items: center; background: linear-gradient(135deg, #2E7D32, #43A047); color: #fff; border-radius: 20px; padding: 3px 12px 3px 9px; font-size: 0.78rem; font-weight: 800; letter-spacing: 0.2px; font-family: 'DM Sans', sans-serif; animation: badgeSlideIn 0.35s cubic-bezier(0.34, 1.4, 0.64, 1) both; margin-left: 8px; vertical-align: middle; white-space: nowrap; } /* combo price row flex alignment when badge is added */ .combo-detail-price-row { flex-wrap: wrap; row-gap: 6px; } @media (max-width: 480px) { .jg-savings-badge { font-size: 0.72rem; padding: 3px 9px 3px 7px; } }