/* Otmany Connect Theme */
:root{ --orange:#FF7A00; --green:#2E8B57; --light:#f7f7f7; --text:#1d1d1f; }

.btn-brand{ background:var(--orange); border-color:var(--orange); }
.btn-brand:hover{ background:#ff8f26; border-color:#ff8f26; }

.card-soft{ border:0; box-shadow:0 10px 30px rgba(0,0,0,.06); border-radius:16px; }
.bg-light{ background:#fbfbfb !important; }

/* Statistics section styling */
#statistics .stat-icon {
  width: 100px;
  height: 100px;
  margin: 0 auto;
}

#statistics .stat-circle {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  position: relative;
  box-shadow: 0 8px 25px rgba(0,0,0,0.1);
  transition: all 0.3s ease;
  overflow: hidden;
}

#statistics .stat-circle::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: rgba(255,255,255,0.2);
  z-index: 0;
  transition: all 0.3s ease;
}

#statistics .stat-circle::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: rgba(255,255,255,0.1);
  z-index: -1;
  opacity: 0;
  transition: all 0.3s ease;
}

/* Icon styling - Lucide uniquement */
#statistics .stat-circle i {
  position: relative;
  z-index: 1;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1));
}

#statistics .stat-number {
  font-size: 2.5rem;
  line-height: 1;
  font-weight: 700;
  background: linear-gradient(135deg, currentColor, currentColor);
  -webkit-background-clip: text;
  background-clip: text;
}

#statistics .card {
  border: 1px solid rgba(0,0,0,0.05);
  transition: all 0.3s ease;
}

#statistics .card:hover .stat-circle {
  transform: translateY(-5px) scale(1.1);
  box-shadow: 0 20px 40px rgba(0,0,0,0.2);
}

#statistics .card:hover .stat-circle::before {
  width: 90px;
  height: 90px;
  background: rgba(255,255,255,0.3);
}

#statistics .card:hover .stat-circle::after {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1.1);
}

#statistics .card:hover {
  transform: translateY(-10px);
  box-shadow: 0 25px 50px rgba(0,0,0,0.15);
  border-color: rgba(0,0,0,0.1);
}

#statistics .card:hover .stat-emoji {
  transform: translate(-50%, -50%) scale(1.1);
}

#statistics .card:hover i {
  transform: scale(1.1);
}

/* Couleurs spécifiques pour chaque statistique avec dégradés */
#statistics .bg-success.bg-opacity-10 {
  background: linear-gradient(135deg, rgba(40, 167, 69, 0.15), rgba(25, 135, 84, 0.25)) !important;
  border: 2px solid rgba(40, 167, 69, 0.2);
}

#statistics .bg-primary.bg-opacity-10 {
  background: linear-gradient(135deg, rgba(13, 110, 253, 0.15), rgba(10, 88, 202, 0.25)) !important;
  border: 2px solid rgba(13, 110, 253, 0.2);
}

#statistics .bg-warning.bg-opacity-10 {
  background: linear-gradient(135deg, rgba(255, 193, 7, 0.15), rgba(255, 162, 0, 0.25)) !important;
  border: 2px solid rgba(255, 193, 7, 0.2);
}

#statistics .bg-danger.bg-opacity-10 {
  background: linear-gradient(135deg, rgba(220, 53, 69, 0.15), rgba(187, 45, 59, 0.25)) !important;
  border: 2px solid rgba(220, 53, 69, 0.2);
}

/* Animation pulse pour attirer l'attention */
@keyframes statPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

#statistics .stat-circle:nth-child(1) {
  animation: statPulse 3s infinite;
  animation-delay: 0s;
}

#statistics .stat-circle:nth-child(2) {
  animation: statPulse 3s infinite;
  animation-delay: 0.5s;
}

#statistics .stat-circle:nth-child(3) {
  animation: statPulse 3s infinite;
  animation-delay: 1s;
}

#statistics .stat-circle:nth-child(4) {
  animation: statPulse 3s infinite;
  animation-delay: 1.5s;
}

@media (max-width: 768px) {
  #statistics .stat-number {
    font-size: 2rem;
  }
  
  #statistics .stat-circle {
    width: 80px;
    height: 80px;
  }
  
  #statistics .stat-circle::before {
    width: 65px;
    height: 65px;
  }
  
  #statistics .stat-circle::after {
    width: 100px;
    height: 100px;
  }
  
  #statistics .stat-circle i {
    width: 36px !important;
    height: 36px !important;
  }
  
  #statistics .stat-emoji {
    font-size: 36px;
  }
  
  #statistics .card:hover {
    transform: translateY(-5px);
  }
}

/* Promotions section styling */
#promotions {
  position: relative;
  background: linear-gradient(135deg, #28a745 0%, #20c997 50%, #fd7e14 100%);
}

#promotions .backdrop-blur {
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

#promotions .text-white-75 {
  color: rgba(255, 255, 255, 0.75) !important;
}

/* Bigger floating emojis for promo confetti */
.promo-emoji {
  font-size: 1.92rem; /* +20% */
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.12));
}
@media (min-width: 992px) {
  .promo-emoji { font-size: 2.52rem; /* +20% */ }
}

/* Animation flottante pour les éléments décoratifs */
@keyframes float {
  0%, 100% {
    transform: translateY(0px) rotate(0deg);
  }
  33% {
    transform: translateY(-10px) rotate(5deg);
  }
  66% {
    transform: translateY(5px) rotate(-3deg);
  }
}

/* Effet de pulsation pour le badge promotion */
#promotions .badge {
  animation: pulse 2s infinite;
  box-shadow: 0 0 20px rgba(255, 193, 7, 0.3);
}

@keyframes pulse {
  0% {
    transform: scale(1);
    box-shadow: 0 0 20px rgba(255, 193, 7, 0.3);
  }
  50% {
    transform: scale(1.05);
    box-shadow: 0 0 30px rgba(255, 193, 7, 0.5);
  }
  100% {
    transform: scale(1);
    box-shadow: 0 0 20px rgba(255, 193, 7, 0.3);
  }
}

/* Boutons promotions */
#promotions .btn-warning {
  background: linear-gradient(135deg, #ffc107, #ffeb3b);
  border: none;
  box-shadow: 0 8px 25px rgba(255, 193, 7, 0.3);
  transition: all 0.3s ease;
}

#promotions .btn-warning:hover {
  transform: translateY(-3px);
  box-shadow: 0 15px 35px rgba(255, 193, 7, 0.4);
}

#promotions .btn-outline-light:hover {
  background: rgba(255, 255, 255, 0.1);
  transform: translateY(-3px);
}

/* Responsive pour la section promotions */
@media (max-width: 768px) {
  #promotions .display-5 {
    font-size: 2rem;
  }
  
  #promotions .position-absolute.top-0.end-0 {
    display: none !important;
  }
}

/* Promo modal: fireworks canvas and hover effects */
#promoModal .promo-fireworks{
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
#promoModal .promo-layer{ position: relative; z-index: 1; }

/* Hover animations inside promo modal */
#promoModal .btn-warning,
#promoModal .btn-outline-light{
  transition: transform .25s ease, box-shadow .25s ease, background-position .4s ease;
  will-change: transform;
}
#promoModal .btn-warning:hover{
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 12px 28px rgba(255, 193, 7, .35);
}
#promoModal .btn-outline-light:hover{
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 10px 24px rgba(255,255,255,.2);
}

/* Voucher card hover elevate + gift wiggle */
.promo-voucher{ transition: transform .25s ease, box-shadow .25s ease; box-shadow: 0 10px 24px rgba(0,0,0,.12); }
.promo-voucher:hover{ transform: translateY(-4px) rotate(-.5deg); box-shadow: 0 18px 40px rgba(0,0,0,.18); }
.promo-voucher:hover img{ animation: wiggle .6s ease both; }

@keyframes wiggle {
  0% { transform: rotate(0deg); }
  30% { transform: rotate(-3deg); }
  60% { transform: rotate(2deg); }
  100% { transform: rotate(0deg); }
}

/* Badge subtle tilt on hover */
#promoModal .badge{ transition: transform .25s ease, box-shadow .25s ease; }
#promoModal .badge:hover{ transform: rotate(-2deg) scale(1.03); box-shadow: 0 0 28px rgba(255, 193, 7, 0.5); }

/* Floating FAB group spacing on mobile */
@media (max-width: 576px){
  .fab-group .btn{ padding: .5rem .75rem; }
}

/* OtmanyBot tweaks */
#otmanybot .otb-panel{ backdrop-filter: blur(4px); }
#otmanybot .otb-toggle{ display:inline-flex; align-items:center; justify-content:center; }

/* Hero image placeholder in case not present */
img[alt="Insurance"]{ filter: drop-shadow(0 10px 30px rgba(0,0,0,.1)); }

/* Trophy/anniversary hero card */
.trophy-card{
  background: linear-gradient(180deg, #fff 0%, #fcfcff 100%);
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 20px;
  box-shadow: 0 18px 50px rgba(0,0,0,.08);
}
.trophy-card img{ filter: drop-shadow(0 10px 24px rgba(0,0,0,.12)); }

/* Trophy badges: hover animations */
@media (hover: hover) and (pointer: fine){
  .trophy-card .text-center{ position: relative; overflow: hidden; }
  .trophy-card img{
    transition: transform .35s ease, filter .35s ease;
    will-change: transform;
  }
  .trophy-card .text-center:hover img{
    transform: translateY(-6px) scale(1.04);
    filter: drop-shadow(0 16px 36px rgba(0,0,0,.20));
  }
  /* Shiny sweep on hover */
  .trophy-card .text-center::after{
    content: "";
    position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(115deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.45) 45%, rgba(255,255,255,0) 70%);
    transform: translateX(-120%) rotate(15deg);
    opacity: 0;
  }
  .trophy-card .text-center:hover::after{
    opacity: 1;
    animation: shine .85s ease forwards;
  }
  @keyframes shine{
    to{ transform: translateX(140%) rotate(15deg); }
  }
}

/* Hero selector card (modern glass + subtle blobs) */
.selector-wrap { margin-top: 1.5rem; }
.selector-card {
  background: rgba(255,255,255,0.85);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.6);
  border-radius: 20px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.08);
  position: relative;
  overflow: hidden;
}
.selector-card .soft-blob {
  position: absolute; width: 220px; height: 220px; border-radius: 50%;
  background: radial-gradient( circle at 30% 30%, rgba(255,122,0,0.12), transparent 60% );
  filter: blur(2px);
}
.selector-card .soft-blob.blob-r { right: -40px; bottom: -40px; background: radial-gradient(circle at 60% 60%, rgba(46,139,87,0.14), transparent 60%); }
.selector-inner { background: rgba(255,255,255,0.9); border: 1px solid rgba(0,0,0,0.06); border-radius: 16px; }
.selector-btn { min-width: 160px; padding: .85rem 1.1rem; border: 1px solid rgba(0,0,0,0.08); border-radius: 12px; background:#fff; transition: all .2s ease; }
.selector-btn:hover{ transform: translateY(-2px); box-shadow: 0 10px 20px rgba(0,0,0,0.06); }
.selector-btn .label { font-weight: 600; }
.selector-wave svg { display:block; width:100%; height:76px; }
.selector-wave .grad-start { stop-color: var(--orange); }
.selector-wave .grad-end { stop-color: var(--green); }

[dir="rtl"] .selector-wave svg { transform: scaleX(-1); }
[dir="rtl"] .selector-btn .label { letter-spacing: 0; }

/* RTL refinements */
[dir="rtl"] .navbar .dropdown-menu { text-align: right; }
[dir="rtl"] .navbar .btn { letter-spacing: 0; }
[dir="rtl"] .card .fw-semibold { letter-spacing: 0; }
[dir="rtl"] .nav-link, [dir="rtl"] .btn { white-space: nowrap; }

/* Icon sizing for globe in language switcher */
.btn.btn-outline-secondary i[data-lucide] { width: 18px; height: 18px; }

/* Simulation: Gift (voucher) card - Magical Design */
.gift-card { 
  position: relative; 
  border: 0;
  border-radius: 20px; 
  background: linear-gradient(145deg, #ffd700, #ff6b35, #f093fb, #f5f7fa);
  background-size: 400% 400%;
  animation: giftGradient 6s ease-in-out infinite;
  padding: 30px; 
  overflow: hidden; 
  transition: all .4s ease;
  box-shadow: 0 15px 45px rgba(255, 107, 53, 0.3), 
              0 5px 15px rgba(255, 215, 0, 0.2),
              inset 0 1px 0 rgba(255,255,255,0.3);
}

.gift-card:hover:not(.revealed) { 
  box-shadow: 0 25px 60px rgba(255, 107, 53, 0.4), 
              0 10px 25px rgba(255, 215, 0, 0.3),
              inset 0 1px 0 rgba(255,255,255,0.4);
  transform: translateY(-5px) scale(1.02); 
}

.gift-card::before {
  content: '';
  position: absolute;
  top: -2px; left: -2px; right: -2px; bottom: -2px;
  background: linear-gradient(45deg, #ff6b35, #ffd700, #f093fb, #ff6b35);
  background-size: 400% 400%;
  animation: giftBorder 4s ease-in-out infinite;
  border-radius: 22px;
  z-index: -1;
  transition: opacity .5s ease;
}

.gift-card.revealed::before {
  opacity: 0;
}

.gift-card.revealed {
  background: linear-gradient(160deg, #fff8e1, #fff);
  box-shadow: 0 10px 40px rgba(0,0,0,0.08);
  cursor: default;
}

@keyframes giftGradient {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

@keyframes giftBorder {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

.gift-header { 
  display:flex; 
  align-items:center; 
  justify-content:center; 
  gap:1rem; 
  color:#8b4513; 
  font-weight:700;
  text-shadow: 0 2px 4px rgba(255,255,255,0.8);
  transition: opacity .3s ease, transform .3s ease;
}

.gift-header img { 
  width:64px; 
  height:64px; 
  filter: drop-shadow(0 4px 8px rgba(0,0,0,.2));
  animation: giftFloat 3s ease-in-out infinite;
}

@keyframes giftFloat {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  50% { transform: translateY(-8px) rotate(2deg); }
}

.gift-box { 
  position: relative; 
  width: 140px; 
  height: 100px; 
  margin: 20px auto; 
  transition: opacity .3s ease, transform .3s ease;
}

.gift-box .box { 
  position:absolute; 
  bottom:0; 
  left:0; 
  right:0; 
  height:75px; 
  background: linear-gradient(145deg, #ffb347, #ffa500);
  border-radius:12px; 
  box-shadow: 0 8px 20px rgba(0,0,0,.2),
              inset 0 2px 0 rgba(255,255,255,0.3),
              inset 0 -2px 0 rgba(0,0,0,0.1);
}

.gift-box .lid { 
  position:absolute; 
  top:0; 
  left:0; 
  right:0; 
  height:35px; 
  background: linear-gradient(145deg, #ff6b35, #ff4500);
  border-radius:12px 12px 6px 6px; 
  transform-origin: top center; 
  transition: transform .8s cubic-bezier(.2,.7,.2,1.2);
  box-shadow: 0 4px 12px rgba(0,0,0,.15),
              inset 0 1px 0 rgba(255,255,255,0.4);
}

.gift-box .ribbon { 
  position:absolute; 
  top:0; 
  left:50%; 
  width:16px; 
  height:100%; 
  background: linear-gradient(145deg, #dc3545, #c82333);
  transform:translateX(-50%); 
  border-radius:8px;
  box-shadow: 0 2px 6px rgba(0,0,0,.1);
}

.gift-box .bow {
  position: absolute;
  top: -8px;
  left: 50%;
  transform: translateX(-50%);
  width: 30px;
  height: 20px;
}

.gift-box .bow::before,
.gift-box .bow::after {
  content: '';
  position: absolute;
  width: 15px;
  height: 15px;
  background: linear-gradient(145deg, #dc3545, #c82333);
  border-radius: 50% 10px 50% 10px;
}

.gift-box .bow::before {
  left: -2px;
  transform: rotate(-45deg);
}

.gift-box .bow::after {
  right: -2px;
  transform: rotate(45deg);
}

.gift-revealed-content { 
  opacity:0; 
  transform: translateY(20px) scale(0.9); 
  transition: all .6s ease .3s; 
  text-align:center;
}

.gift-revealed-content.show { 
  opacity:1; 
  transform: translateY(0) scale(1); 
}

.gift-card.celebrating .gift-box .lid { 
  transform: rotateX(85deg) translateY(-5px); 
}

.gift-cta { 
  display:inline-flex; 
  align-items:center; 
  gap:.7rem; 
  border: 2px solid #ff7a00; 
  color:#fff; 
  background: linear-gradient(145deg, #ff7a00, #ff9500);
  padding:.8rem 1.5rem; 
  border-radius: 50px; 
  transition: all .3s ease;
  font-weight: 600;
  text-shadow: 0 1px 2px rgba(0,0,0,0.2);
  box-shadow: 0 6px 20px rgba(255, 122, 0, 0.3);
}

.gift-cta:hover { 
  background: linear-gradient(145deg, #ff9500, #ffb347);
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(255, 122, 0, 0.4);
}

.gift-amount { 
  font-size: 2.5rem; 
  font-weight: 800; 
  color: #2E8B57;
  text-shadow: 0 2px 4px rgba(46, 139, 87, 0.2);
}

.gift-revealed-content .h4 {
  color: #1d1d1f;
  font-weight: 700;
}
.gift-revealed-content .h4 i {
  color: #ffc107;
  filter: drop-shadow(0 2px 4px rgba(255,193,7,0.4));
}

.gift-revealed-content .small {
  color: #6c757d;
}

.btn-light-green {
  background-color: #e9f5ec;
  color: #2E8B57;
  border: 1px solid #d4ede0;
  border-radius: 50px;
  font-weight: 600;
  transition: all .2s ease;
}
.btn-light-green:hover {
  background-color: #d4ede0;
  color: #2E8B57;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(46, 139, 87, 0.15);
}

/* Enhanced Fireworks Effect */
.gift-card.celebrating::after { 
  content:""; 
  position:absolute; 
  inset:-40px; 
  pointer-events:none; 
  background:
    /* Large fireworks */
    radial-gradient(circle at 15% 15%, #ffd700 0 8px, transparent 8px),
    radial-gradient(circle at 85% 20%, #ff6b35 0 7px, transparent 7px),
    radial-gradient(circle at 25% 85%, #f093fb 0 9px, transparent 9px),
    radial-gradient(circle at 75% 80%, #00ff87 0 6px, transparent 6px),
    radial-gradient(circle at 50% 10%, #ff1744 0 7px, transparent 7px),
    radial-gradient(circle at 10% 50%, #2196f3 0 8px, transparent 8px),
    radial-gradient(circle at 90% 60%, #ff9800 0 6px, transparent 6px),
    /* Medium fireworks */
    radial-gradient(circle at 30% 30%, #9c27b0 0 5px, transparent 5px),
    radial-gradient(circle at 70% 25%, #4caf50 0 4px, transparent 4px),
    radial-gradient(circle at 20% 70%, #ffeb3b 0 5px, transparent 5px),
    radial-gradient(circle at 80% 75%, #e91e63 0 4px, transparent 4px),
    /* Small sparkles */
    radial-gradient(circle at 40% 15%, #00bcd4 0 3px, transparent 3px),
    radial-gradient(circle at 60% 90%, #795548 0 3px, transparent 3px),
    radial-gradient(circle at 15% 40%, #607d8b 0 3px, transparent 3px),
    radial-gradient(circle at 85% 45%, #ff5722 0 3px, transparent 3px);
  animation: fireworks 1.5s ease-out forwards; 
  opacity: 0; 
  z-index: 10;
}

@keyframes fireworks { 
  0% { 
    opacity: 0; 
    transform: scale(0.3) rotate(0deg); 
  }
  15% { 
    opacity: 0.8; 
    transform: scale(0.6) rotate(30deg); 
  }
  30% { 
    opacity: 1; 
    transform: scale(0.9) rotate(60deg); 
  }
  60% { 
    opacity: 1; 
    transform: scale(1.2) rotate(120deg); 
  }
  85% { 
    opacity: 0.7; 
    transform: scale(1.4) rotate(150deg); 
  }
  100% { 
    opacity: 0.2; 
    transform: scale(1.6) rotate(180deg); 
  } 
}

/* Luminous Particles Animation System */
.gift-card.celebrating::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: 
    /* Bright particles layer 1 */
    radial-gradient(circle at 15% 20%, rgba(255, 215, 0, 0.9) 0 2px, transparent 2px),
    radial-gradient(circle at 85% 15%, rgba(255, 107, 53, 0.9) 0 2px, transparent 2px),
    radial-gradient(circle at 25% 80%, rgba(240, 147, 251, 0.9) 0 2px, transparent 2px),
    radial-gradient(circle at 75% 85%, rgba(0, 255, 135, 0.9) 0 2px, transparent 2px),
    radial-gradient(circle at 50% 10%, rgba(255, 23, 68, 0.9) 0 2px, transparent 2px),
    radial-gradient(circle at 10% 55%, rgba(33, 150, 243, 0.9) 0 2px, transparent 2px),
    radial-gradient(circle at 90% 65%, rgba(255, 152, 0, 0.9) 0 2px, transparent 2px),
    /* Bright particles layer 2 */
    radial-gradient(circle at 30% 35%, rgba(156, 39, 176, 0.8) 0 1.5px, transparent 1.5px),
    radial-gradient(circle at 70% 30%, rgba(76, 175, 80, 0.8) 0 1.5px, transparent 1.5px),
    radial-gradient(circle at 20% 75%, rgba(255, 235, 59, 0.8) 0 1.5px, transparent 1.5px),
    radial-gradient(circle at 80% 70%, rgba(233, 30, 99, 0.8) 0 1.5px, transparent 1.5px),
    /* Bright particles layer 3 */
    radial-gradient(circle at 40% 25%, rgba(0, 188, 212, 0.7) 0 1px, transparent 1px),
    radial-gradient(circle at 60% 85%, rgba(121, 85, 72, 0.7) 0 1px, transparent 1px),
    radial-gradient(circle at 15% 45%, rgba(96, 125, 139, 0.7) 0 1px, transparent 1px),
    radial-gradient(circle at 85% 50%, rgba(255, 87, 34, 0.7) 0 1px, transparent 1px);
  animation: luminousParticles 2.5s ease-in-out infinite;
  z-index: 15;
  opacity: 0;
}

@keyframes luminousParticles {
  0% { 
    opacity: 0; 
    transform: scale(0.5) rotate(0deg);
    filter: brightness(1) blur(0px);
  }
  20% { 
    opacity: 0.9; 
    transform: scale(0.8) rotate(45deg);
    filter: brightness(1.3) blur(0.5px);
  }
  40% { 
    opacity: 1; 
    transform: scale(1.1) rotate(90deg);
    filter: brightness(1.5) blur(1px);
  }
  60% { 
    opacity: 1; 
    transform: scale(1.3) rotate(135deg);
    filter: brightness(1.8) blur(0.5px);
  }
  80% { 
    opacity: 0.8; 
    transform: scale(1.5) rotate(180deg);
    filter: brightness(1.2) blur(1px);
  }
  100% { 
    opacity: 0.3; 
    transform: scale(1.8) rotate(225deg);
    filter: brightness(1) blur(2px);
  }
}

/* Floating Luminous Orbs */
.gift-card.celebrating .gift-particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 12;
}

.gift-card.celebrating .gift-particles::before {
  content: '';
  position: absolute;
  top: 20%;
  left: 10%;
  width: 8px;
  height: 8px;
  background: radial-gradient(circle, rgba(255, 215, 0, 1) 0%, rgba(255, 215, 0, 0.3) 70%, transparent 100%);
  border-radius: 50%;
  animation: floatOrb1 3s ease-in-out infinite;
  filter: blur(0.5px);
  box-shadow: 0 0 15px rgba(255, 215, 0, 0.8), 0 0 30px rgba(255, 215, 0, 0.4);
}

.gift-card.celebrating .gift-particles::after {
  content: '';
  position: absolute;
  top: 25%;
  right: 15%;
  width: 6px;
  height: 6px;
  background: radial-gradient(circle, rgba(255, 107, 53, 1) 0%, rgba(255, 107, 53, 0.3) 70%, transparent 100%);
  border-radius: 50%;
  animation: floatOrb2 3.5s ease-in-out infinite 0.5s;
  filter: blur(0.5px);
  box-shadow: 0 0 12px rgba(255, 107, 53, 0.8), 0 0 25px rgba(255, 107, 53, 0.4);
}

@keyframes floatOrb1 {
  0%, 100% { 
    transform: translateY(0px) translateX(0px) scale(1); 
    opacity: 0.8;
    filter: blur(0.5px) brightness(1);
  }
  33% { 
    transform: translateY(-30px) translateX(-20px) scale(1.2); 
    opacity: 1;
    filter: blur(1px) brightness(1.5);
  }
  66% { 
    transform: translateY(-10px) translateX(10px) scale(0.9); 
    opacity: 0.9;
    filter: blur(0.3px) brightness(1.2);
  }
}

@keyframes floatOrb2 {
  0%, 100% { 
    transform: translateY(0px) translateX(0px) scale(1); 
    opacity: 0.8;
    filter: blur(0.5px) brightness(1);
  }
  33% { 
    transform: translateY(-35px) translateX(15px) scale(1.3); 
    opacity: 1;
    filter: blur(1px) brightness(1.6);
  }
  66% { 
    transform: translateY(-15px) translateX(-15px) scale(0.8); 
    opacity: 0.9;
    filter: blur(0.3px) brightness(1.3);
  }
}

/* Additional Twinkling Effect */
.gift-card.celebrating {
  position: relative;
}

.gift-card.celebrating .twinkle-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: 
    radial-gradient(circle at 25% 25%, rgba(255, 255, 255, 0.9) 0 1px, transparent 1px),
    radial-gradient(circle at 75% 30%, rgba(255, 255, 255, 0.7) 0 1px, transparent 1px),
    radial-gradient(circle at 30% 70%, rgba(255, 255, 255, 0.8) 0 1px, transparent 1px),
    radial-gradient(circle at 70% 75%, rgba(255, 255, 255, 0.6) 0 1px, transparent 1px);
  animation: twinkle 1.8s ease-in-out infinite alternate;
  z-index: 20;
}

@keyframes twinkle {
  0% { 
    opacity: 0.3; 
    transform: scale(0.8);
  }
  100% { 
    opacity: 1; 
    transform: scale(1.2);
  }
}

/* Simulation page styling */
.simulation-card{ border-radius: 20px; overflow: hidden; }
.simulation-card .simulation-header{
  background: linear-gradient(135deg, #0d6efd 0%, #20c997 50%, #28a745 100%);
  border-bottom: 0;
  position: relative;
}
.simulation-card .simulation-header::after{
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient( circle at 85% -10%, rgba(255,255,255,.35), transparent 45% );
}
.simulation-card .card-body{ padding: 1.5rem 1.5rem 2rem; }

/* Force two-column layout in simulation form rows */
.sim-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem 1.5rem; /* row gap, column gap */
}
@media (max-width: 576px) {
  .sim-grid-2 { grid-template-columns: 1fr; }
}
.simulation-card .form-control, .simulation-card .form-select{
  border-radius: 12px; border: 1px solid rgba(0,0,0,.08);
  transition: box-shadow .2s ease, border-color .2s ease;
}
.simulation-card .form-control:focus, .simulation-card .form-select:focus{
  border-color: rgba(13, 110, 253, .45);
  box-shadow: 0 0 0 .2rem rgba(13,110,253,.15);
}
.simulation-card .btn{ border-radius: 12px; }
.simulation-card .btn-primary{ box-shadow: 0 10px 24px rgba(13,110,253,.25); }
.simulation-card .btn-success{ box-shadow: 0 10px 24px rgba(25,135,84,.25); }
.simulation-card .alert{ border-radius: 14px; }
