/* Modern Modal Dialog for Cart Operations */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(7, 2, 12, 0.78);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  opacity: 0;
  visibility: hidden;
  transition: all 0.2s ease;
}

.modal-overlay.show {
  opacity: 1;
  visibility: visible;
}

.modal-dialog {
  background: linear-gradient(145deg, #160b20 0%, #0d0714 100%);
  border-radius: 16px;
  border: 1px solid rgba(192, 132, 252, 0.22);
  box-shadow: 0 25px 55px rgba(0, 0, 0, 0.62), 0 0 28px rgba(168, 85, 247, 0.16);
  max-width: 400px;
  width: 90%;
  max-height: 90vh;
  overflow-y: auto;
  transform: scale(0.95);
  transition: transform 0.2s ease;
}

.modal-overlay.show .modal-dialog {
  transform: scale(1);
}

.modal-header {
  padding: 24px 24px 16px;
  border-bottom: 1px solid rgba(192, 132, 252, 0.18);
}

.modal-title {
  font-size: 20px;
  font-weight: 700;
  color: #f5edff;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 12px;
}

.modal-body {
  padding: 16px 24px 24px;
}

.modal-message {
  font-size: 16px;
  line-height: 1.5;
  color: #cbb9da;
  margin: 0;
}

.modal-actions {
  display: flex;
  gap: 12px;
  margin-top: 24px;
}

.modal-btn {
  flex: 1;
  padding: 12px 16px;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: center;
}

.modal-btn-secondary {
  background: #21122e;
  color: #b9a8ca;
  border: 1px solid #4a315d;
}

.modal-btn-secondary:hover {
  background: #2b1839;
  border-color: #795493;
}

.modal-btn-danger {
  background: #ef4444;
  color: white;
}

.modal-btn-danger:hover {
  background: #dc2626;
}

.modal-btn-primary {
  background: linear-gradient(135deg, #6d28d9, #a855f7);
  color: white;
}

.modal-btn-primary:hover {
  background: linear-gradient(135deg, #7e22ce, #c084fc);
}

.modal-icon {
  font-size: 24px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
}

.modal-icon.danger {
  background: rgba(239, 68, 68, 0.10);
  color: #ef4444;
}

.modal-icon.warning {
  background: rgba(245, 158, 11, 0.10);
  color: #f59e0b;
}

.modal-icon.success {
  background: rgba(34, 197, 94, 0.10);
  color: #22c55e;
}

.modal-icon.info {
  background: rgba(168, 85, 247, 0.14);
  color: #c084fc;
}

/* Mobile responsive */
@media (max-width: 640px) {
  .modal-dialog {
    margin: 16px;
    max-width: none;
    width: auto;
  }
  
  .modal-header,
  .modal-body {
    padding-left: 20px;
    padding-right: 20px;
  }
  
  .modal-actions {
    flex-direction: column;
  }
  
  .modal-btn {
    flex: none;
  }
}

/* ===== CART LOGIN MODAL — PURPLE THEME OVERRIDE ===== */
#cartLoginModal .modal-body > div[style*="background: #f8fafc"]{
  background:linear-gradient(145deg,rgba(38,19,58,.84),rgba(16,8,26,.92)) !important;
  border:1px solid rgba(192,132,252,.14);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025);
}
#cartLoginModal .modal-body > div[style*="background: #f8fafc"] p{
  color:#c8bad6 !important;
}
#cartLoginModal .modal-body > div[style*="background: #f8fafc"] strong{
  color:#f3e8ff !important;
}
#cartLoginModal #cartLoginConfirm{
  background:linear-gradient(135deg,#5b21b6,#7c3aed) !important;
  border-color:#8b5cf6 !important;
  color:#fff !important;
  box-shadow:0 6px 18px rgba(91,33,182,.28),0 0 14px rgba(139,92,246,.16);
}
#cartLoginModal #cartRegisterBtn{
  background:linear-gradient(135deg,#a855f7,#c084fc) !important;
  border-color:#d8b4fe !important;
  color:#160922 !important;
  box-shadow:0 6px 18px rgba(168,85,247,.28),0 0 16px rgba(192,132,252,.16);
}


/* ===== INDEX COMPONENT: PREMIUM POPUP ===== */
.popup-overlay { 
  --popup-black: #050308; 
  --popup-dark: #0d0714; 
  --popup-panel: #161020; 

  --popup-purple: #8b5cf6; 
  --popup-purple-dark: #5b21b6; 
  --popup-purple-soft: #c084fc; 
  --popup-lavender: #eadcff; 
  --popup-violet: #7c3aed; 
  --popup-silver: #c7c2d1; 

  --popup-white: #ffffff; 
  --popup-text: #ddd4ea; 
  --blade-cut: 10px; 
}
.popup-overlay { 
  position: fixed; 
  inset: 0; 
  width: 100vw; 
  height: 100vh; 
  display: flex; 
  justify-content: center; 
  align-items: center; 
  padding: 18px; 

  background: rgba(4,2,8,0.82); 

  backdrop-filter: blur(4px); 
  -webkit-backdrop-filter: blur(4px); 

  z-index: 9999; 
} 

.popup-container { 
  position: relative; 
  width: 100%; 
  max-width: 420px; 
  overflow: hidden; 
  padding: 8px 8px 18px; 

  color: var(--popup-text); 
  text-align: center; 

  background: 
    radial-gradient(
      circle at top right,
      rgba(139,92,246,.24),
      transparent 31%
    ),
    radial-gradient(
      circle at bottom left,
      rgba(91,33,182,.15),
      transparent 37%
    ),
    radial-gradient(
      circle at center,
      rgba(192,132,252,.025),
      transparent 60%
    ),
    linear-gradient(
      145deg,
      #050308 0%,
      #11091a 45%,
      #07040c 100%
    ); 

  border: 1px solid rgba(192,132,252,.32); 
  border-radius: 18px; 

  box-shadow: 
    0 25px 60px rgba(0,0,0,.82),
    0 0 22px rgba(139,92,246,.22),
    0 0 42px rgba(124,58,237,.10),
    inset 0 1px 0 rgba(255,255,255,.04); 

  animation: purplePopupIn .6s ease; 
} 

.popup-container::before { 
  content: ""; 
  position: absolute; 
  top: 0; 
  left: -180%; 

  width: 220px; 
  height: 100%; 

  background: linear-gradient(
    90deg,
    transparent,
    rgba(192,132,252,.08),
    rgba(139,92,246,.22),
    rgba(234,220,255,.12),
    transparent
  ); 

  transform: skewX(-25deg); 
  filter: blur(1px);

  animation: purplePopupShine 6s linear infinite; 

  pointer-events: none; 
} 

@keyframes purplePopupShine { 
  0% { 
    left: -180%; 
    opacity: 0; 
  } 

  20% { 
    opacity: .45; 
  } 

  45% { 
    opacity: .9; 
  } 

  100% { 
    left: 180%; 
    opacity: 0; 
  } 
} 

@keyframes purplePopupIn { 
  from { 
    opacity: 0; 
    transform: scale(.92) translateY(10px); 
  } 

  to { 
    opacity: 1; 
    transform: scale(1) translateY(0); 
  } 
} 

.popup-container::after { 
  content: ""; 
  position: absolute; 
  top: 0; 
  left: 0; 

  width: 5px; 
  height: 100%; 

  z-index: 3; 

  background: linear-gradient(
    to bottom,
    var(--popup-purple-dark),
    var(--popup-violet),
    var(--popup-purple-soft),
    var(--popup-violet),
    var(--popup-purple-dark)
  ); 

  box-shadow: 
    0 0 10px rgba(139,92,246,.7),
    0 0 18px rgba(192,132,252,.35); 
} 

@keyframes streetPopupIn { 
  from { 
    opacity: 0; 
    transform: translateY(18px) scale(0.96); 
  } 

  to { 
    opacity: 1; 
    transform: translateY(0) scale(1); 
  } 
} 

.popup-image { 
  border-radius: 14px; 

  border: 1px solid rgba(192,132,252,.28); 

  box-shadow: 
    0 0 16px rgba(139,92,246,.16),
    0 8px 24px rgba(0,0,0,.35); 
} 

.clk-btn-sgp { 
  position: relative; 
  z-index: 3; 

  width: 100%; 

  display: grid; 
  grid-template-columns: repeat(2,minmax(0,1fr)); 
  gap: 12px; 

  padding: 18px; 

  font-family: "Segoe UI",Arial,sans-serif; 
} 

.clk-btn-sgp a { 
  position: relative; 
  overflow: hidden; 

  display: flex; 
  align-items: center; 
  justify-content: center; 

  min-height: 50px; 
  padding: 13px 12px; 

  color: var(--popup-white); 

  text-align: center; 
  text-decoration: none; 
  text-transform: uppercase; 

  font-size: 13px; 
  font-weight: 900; 
  letter-spacing: 1.2px; 

  border-radius: 7px 15px 7px 15px; 

  clip-path: polygon(
    var(--blade-cut) 0,
    100% 0,
    100% calc(100% - var(--blade-cut)),
    calc(100% - var(--blade-cut)) 100%,
    0 100%,
    0 var(--blade-cut)
  ); 

  transition: 
    transform 0.22s ease,
    border-color 0.22s ease,
    box-shadow 0.22s ease,
    filter 0.22s ease; 
} 

.clk-btn-sgp a::after { 
  content: ""; 
  position: absolute; 
  inset: 0; 

  pointer-events: none; 

  background: linear-gradient(
    110deg,
    transparent 25%,
    rgba(255,255,255,0.22) 48%,
    transparent 70%
  ); 

  transform: translateX(-140%); 
  transition: transform 0.45s ease; 
} 

.clk-btn-sgp a:hover::after { 
  transform: translateX(140%); 
} 

.clk-btn-sgp a:hover { 
  transform: translateY(-3px); 
  filter: brightness(1.12); 
} 

/* LOGIN */

.login { 
  color: var(--popup-purple-soft) !important; 

  background: 
    linear-gradient(
      145deg,
      rgba(139,92,246,.13),
      rgba(91,33,182,.18)
    ),
    #09050f; 

  border: 1px solid rgba(192,132,252,.42); 

  box-shadow: 
    0 8px 18px rgba(0,0,0,.55),
    0 0 14px rgba(139,92,246,.18),
    inset 0 0 12px rgba(192,132,252,.07); 

  transition: all .25s ease; 
} 

.login:hover { 
  color: var(--popup-lavender) !important; 

  background: linear-gradient(
    145deg,
    rgba(139,92,246,.24),
    rgba(91,33,182,.30)
  ); 

  border-color: var(--popup-purple-soft); 

  transform: translateY(-2px); 

  box-shadow: 
    0 10px 24px rgba(0,0,0,.65),
    0 0 20px rgba(139,92,246,.35),
    0 0 30px rgba(192,132,252,.18); 
} 

/* REGISTER */

.register { 
  color: #180c28 !important; 

  background: linear-gradient(
    135deg,
    #eadcff 0%,
    #c084fc 38%,
    #8b5cf6 68%,
    #5b21b6 100%
  ); 

  border: 1px solid rgba(216,180,254,.62); 

  text-shadow: 
    0 1px 0 rgba(255,255,255,.42); 

  box-shadow: 
    0 8px 18px rgba(0,0,0,.55),
    0 0 20px rgba(139,92,246,.34),
    0 0 32px rgba(192,132,252,.16); 

  transition: all .25s ease; 
} 

.register:hover { 
  color: #10061c !important; 

  transform: translateY(-2px) scale(1.03); 

  border-color: #eadcff; 

  background: linear-gradient(
    135deg,
    #f5edff 0%,
    #d8b4fe 35%,
    #a855f7 68%,
    #7c3aed 100%
  ); 

  box-shadow: 
    0 12px 25px rgba(0,0,0,.65),
    0 0 28px rgba(139,92,246,.46),
    0 0 45px rgba(192,132,252,.26); 
} 

.clk-btn-sgp a span { 
  position: relative; 
  z-index: 2; 
} 

/* TABLE */

.info-table { 
  position: relative; 
  z-index: 3; 

  width: calc(100% - 36px); 
  margin: 2px auto 18px; 

  color: var(--popup-text); 

  background: rgba(9,5,15,0.94); 

  border-collapse: separate; 
  border-spacing: 0; 

  overflow: hidden; 

  border: 1px solid rgba(139,92,246,.28); 
  border-radius: 12px; 

  font-size: 13px; 

  box-shadow: 
    0 8px 20px rgba(0,0,0,.45),
    0 0 16px rgba(139,92,246,.07); 
} 

.info-table th { 
  padding: 13px 10px; 

  color: #160923; 

  background: linear-gradient(
    135deg,
    var(--popup-lavender),
    var(--popup-purple-soft),
    var(--popup-purple),
    var(--popup-purple-dark)
  ); 

  border: 0; 

  font-size: 13px; 
  font-weight: 900; 
  letter-spacing: 0.8px; 
  text-transform: uppercase; 

  text-shadow: 
    0 1px 0 rgba(255,255,255,0.42); 
} 

.info-table td { 
  padding: 11px 12px; 

  color: var(--popup-text); 
  text-align: left; 

  border-bottom: 1px solid rgba(139,92,246,.14); 

  transition: background .2s ease; 
} 

.info-table tr:last-child td { 
  border-bottom: none; 
} 

.info-table tr:hover td { 
  background: rgba(139,92,246,.08); 
} 

.popup-footer { 
  position: relative; 
  z-index: 3; 

  padding: 4px 20px 8px; 

  color: #aaa0ba; 

  font-size: 12px; 
  line-height: 1.6; 
  text-align: center; 
} 

.luxury-border { 
  position: absolute; 
  inset: 9px; 

  z-index: 4; 
  pointer-events: none; 

  border: 1px solid rgba(192,132,252,.13); 

  border-radius: 7px 20px 7px 20px; 

  box-shadow: 
    inset 0 0 16px rgba(139,92,246,.025); 
} 

.gold-particle { 
  display: none; 
} 

/* CLOSE BUTTON */

.close-btn { 
  position: absolute; 
  top: 12px; 
  right: 12px; 

  z-index: 10; 

  width: 34px; 
  height: 34px; 

  display: flex; 
  align-items: center; 
  justify-content: center; 

  cursor: pointer; 

  background: rgba(8,4,13,.90); 

  border: 1px solid rgba(192,132,252,.62); 

  border-radius: 9px 4px 9px 4px; 

  box-shadow: 
    0 0 12px rgba(139,92,246,.28),
    inset 0 0 8px rgba(192,132,252,.05); 

  transition: 
    transform 0.22s ease,
    background 0.22s ease,
    border-color 0.22s ease,
    box-shadow .22s ease; 
} 

.close-btn:hover { 
  transform: rotate(90deg); 

  background: var(--popup-purple-dark); 
  border-color: var(--popup-purple-soft); 

  box-shadow: 
    0 0 15px rgba(139,92,246,.45),
    0 0 25px rgba(192,132,252,.20); 
} 

.close-btn::before,
.close-btn::after { 
  content: ""; 

  position: absolute; 

  width: 16px; 
  height: 2px; 

  background: var(--popup-lavender); 

  border-radius: 3px; 

  box-shadow: 
    0 0 5px rgba(216,180,254,.30); 
} 

.close-btn::before { 
  transform: rotate(45deg); 
} 

.close-btn::after { 
  transform: rotate(-45deg); 
} 

@media (max-width:480px) { 

  .popup-overlay { 
    padding: 12px; 
  } 

  .popup-container { 
    max-width: 355px; 
    border-radius: 8px 20px 8px 20px; 
  } 

  .clk-btn-sgp { 
    grid-template-columns: 1fr; 
    gap: 10px; 
    padding: 14px; 
  } 

  .clk-btn-sgp a { 
    min-height: 47px; 
    padding: 12px; 
    font-size: 12px; 
  } 

  .info-table { 
    width: calc(100% - 28px); 
    font-size: 12px; 
  } 

  .info-table th,
  .info-table td { 
    padding: 10px; 
  } 

  .popup-footer { 
    padding-right: 16px; 
    padding-left: 16px; 
    font-size: 11px; 
  } 

  .close-btn { 
    width: 30px; 
    height: 30px; 
  } 
} 

@media (prefers-reduced-motion:reduce) { 

  .popup-container,
  .popup-container::before,
  .clk-btn-sgp a,
  .close-btn { 
    animation: none; 
    transition: none; 
  } 
}


/* ===== FINAL MODAL THEME OVERRIDE ===== */
/* MODALS: color-only enhancement */
.modal-overlay{
  background:rgba(4,2,8,.82) !important;
  backdrop-filter:blur(7px);
  -webkit-backdrop-filter:blur(7px);
}
.modal-dialog{
  color:var(--ir-p-text) !important;
  background:
    radial-gradient(circle at top right,rgba(168,85,247,.15),transparent 36%),
    linear-gradient(145deg,#160b24,#09040f) !important;
  border:1px solid rgba(192,132,252,.20) !important;
  box-shadow:0 28px 70px rgba(0,0,0,.68),0 0 28px rgba(139,92,246,.14) !important;
}
.modal-header{
  background:linear-gradient(90deg,rgba(91,33,182,.23),rgba(168,85,247,.07)) !important;
  border-bottom-color:rgba(192,132,252,.12) !important;
}
.modal-title{color:#f3e8ff !important;}
.modal-message{color:#c9bad8 !important;}
.modal-icon.info{
  color:#eadcff !important;
  background:linear-gradient(135deg,#5b21b6,#9333ea) !important;
  box-shadow:0 0 14px rgba(168,85,247,.22);
}
.modal-btn-secondary{
  color:#d7c9e5 !important;
  background:#10091a !important;
  border-color:rgba(192,132,252,.18) !important;
}
.modal-btn-secondary:hover{
  color:#fff !important;
  background:#1d0f2e !important;
  border-color:rgba(216,180,254,.34) !important;
}
/* CART LOGIN MODAL inline light box: target only this modal */
#cartLoginModal .modal-body > div[style*="background: #f8fafc"]{
  background:linear-gradient(145deg,rgba(38,19,58,.84),rgba(16,8,26,.92)) !important;
  border:1px solid rgba(192,132,252,.14);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025);
}
#cartLoginModal .modal-body > div[style*="background: #f8fafc"] p{
  color:#c8bad6 !important;
}
#cartLoginModal .modal-body > div[style*="background: #f8fafc"] strong{
  color:#f3e8ff !important;
}
#cartLoginModal #cartLoginConfirm{
  background:linear-gradient(135deg,#5b21b6,#7c3aed) !important;
  border-color:#8b5cf6 !important;
  color:#fff !important;
  box-shadow:0 6px 18px rgba(91,33,182,.28),0 0 14px rgba(139,92,246,.16);
}
#cartLoginModal #cartRegisterBtn{
  background:linear-gradient(135deg,#a855f7,#c084fc) !important;
  border-color:#d8b4fe !important;
  color:#160922 !important;
  box-shadow:0 6px 18px rgba(168,85,247,.28),0 0 16px rgba(192,132,252,.16);
}

/* ===== CART LOGIN STATIC PRESENTATION ===== */
#cartLoginModal .modal-message{margin-bottom:16px;}
#cartLoginModal .modal-body > div:not(.modal-actions){
  background:linear-gradient(145deg,rgba(38,19,58,.84),rgba(16,8,26,.92));
  border:1px solid rgba(192,132,252,.14);
  border-radius:8px;
  padding:12px;
  margin-bottom:20px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025);
}
#cartLoginModal .modal-body > div:not(.modal-actions) p{
  font-size:14px;
  color:#c8bad6;
  margin:0;
  line-height:1.6;
}
#cartLoginModal .modal-body > div:not(.modal-actions) strong{color:#f3e8ff;}
#cartLoginModal #cartLoginConfirm{text-decoration:none;}
#cartLoginModal #cartRegisterBtn{text-decoration:none;}

.popup-overlay .clk-btn-sgp{font-size:20px;}
.popup-overlay .clk-btn-sgp + span,
.popup-overlay .popup-footer span{
  color:#d8b4fe;
}