/**
 * assets/css/big-modal.css
 * ---------------------------------------------------------------
 * "বড় অ্যাকশন" পপআপ — Toast থেকে আলাদা একটা সিস্টেম। ছোট অ্যাকশনে
 * (Save/Delete ইত্যাদি) আগের Toast-ই থাকছে অপরিবর্তিত — এটা শুধু বড়
 * অ্যাকশনের জন্য (Login সফল, অর্ডার প্লেস, বড় সেটিংস বদল ইত্যাদি) —
 * মাঝখানে একটা সুন্দর, অ্যানিমেটেড, আইকন+টাইটেল+বাটনসহ মোডাল।
 */

.big-modal-overlay {
  position: fixed; inset: 0; z-index: 10000;
  display: flex; align-items: center; justify-content: center;
  background: rgba(15, 36, 25, 0.45);
  backdrop-filter: blur(3px);
  padding: 20px;
  opacity: 0;
  animation: bigModalFadeIn 0.25s ease forwards;
}
.big-modal-overlay.closing { animation: bigModalFadeOut 0.2s ease forwards; }

.big-modal-box {
  background: #FFFFFF;
  border-radius: 20px;
  padding: 36px 32px 30px;
  width: 100%;
  max-width: 380px;
  text-align: center;
  box-shadow: var(--popup-shadow, 0 24px 60px rgba(15, 36, 25, 0.28));
  transform: scale(0.9) translateY(10px);
  opacity: 0;
  animation: bigModalPopIn 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) 0.05s forwards;
  position: relative;
}

.big-modal-close {
  position: absolute; top: 14px; right: 14px;
  width: 30px; height: 30px; border-radius: 50%; border: none;
  background: rgba(0,0,0,0.05); color: #647A6F; font-size: 15px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s ease;
}
.big-modal-close:hover { background: rgba(0,0,0,0.1); }

.big-modal-icon {
  width: 76px; height: 76px; border-radius: 50%; margin: 0 auto 20px;
  display: flex; align-items: center; justify-content: center;
  animation: bigModalIconPop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.15s both;
}
.big-modal-icon.success { background: #E4F6EC; color: #1E9E5A; }
.big-modal-icon.error   { background: #FDEDED; color: #D14343; }
.big-modal-icon.info    { background: #EAF2FF; color: #2563EB; }
.big-modal-icon svg { width: 38px; height: 38px; }
.big-modal-icon .big-modal-checkmark {
  stroke-dasharray: 40; stroke-dashoffset: 40;
  animation: bigModalCheckDraw 0.4s ease 0.35s forwards;
}

.big-modal-title { font-family: var(--font-display, inherit); font-size: 20px; font-weight: 800; color: #14241B; margin-bottom: 6px; }
.big-modal-subtitle { font-size: 14px; color: #647A6F; margin-bottom: 24px; line-height: 1.5; }

.big-modal-buttons { display: flex; flex-direction: column; gap: 10px; }
.big-modal-btn {
  display: block; width: 100%; padding: 13px 20px; border-radius: 999px;
  font-size: 14.5px; font-weight: 700; border: none; cursor: pointer;
  text-decoration: none; text-align: center;
  box-shadow: var(--popup-btn-shadow, 0 4px 14px rgba(15, 92, 53, 0.12));
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.big-modal-btn-primary { background: var(--popup-btn-color, #14241B); color: #fff; }
.big-modal-btn-outline { background: transparent; color: #14241B; border: 1.5px solid #DCEEE2; box-shadow: none; }
.big-modal-btn:hover { transform: translateY(-1px) scale(1.02); filter: brightness(1.05); }
.big-modal-btn:active { transform: scale(0.97); }

.big-modal-countdown { font-size: 12.5px; color: #647A6F; margin-top: 16px; }

@keyframes bigModalFadeIn { to { opacity: 1; } }
@keyframes bigModalFadeOut { to { opacity: 0; } }
@keyframes bigModalPopIn { to { transform: scale(1) translateY(0); opacity: 1; } }
@keyframes bigModalIconPop { from { transform: scale(0); } to { transform: scale(1); } }
@keyframes bigModalCheckDraw { to { stroke-dashoffset: 0; } }

@media (prefers-reduced-motion: reduce) {
  .big-modal-overlay, .big-modal-box, .big-modal-icon, .big-modal-icon .big-modal-checkmark {
    animation: none !important; opacity: 1 !important; transform: none !important; stroke-dashoffset: 0 !important;
  }
}