/* =========================================================
   Premium OTP Auth Modal (v2.1.1 - Updated with Waving Hand Icon)
   Optimized for: daeimg.ir
   ========================================================= */

.is-hidden {
  display: none !important;
}

#otp-modal {
  direction: rtl;

  /* Color Palette */
  --otp-bg: #ffffff;
  --otp-text: #0f172a;       /* Slate 900 */
  --otp-muted: #64748b;      /* Slate 500 */
  --otp-border: #e2e8f0;     /* Slate 200 */
  --otp-soft-border: rgba(226, 232, 240, 0.9);
  --otp-primary: var(--secondary-color, #c40316); /* Brand Red */
  --otp-primary-2: #e11d48;  /* Vibrant secondary red */
  --otp-primary-soft: rgba(196, 3, 22, 0.08);
  --otp-danger: #dc2626;     /* Red 600 */

  /* Shadows & Borders */
  --otp-shadow: 0 30px 80px rgba(15, 23, 42, 0.18);
  --otp-shadow-soft: 0 12px 30px rgba(15, 23, 42, 0.08);
  --otp-radius-xl: 24px;
  --otp-radius-lg: 18px;
  --otp-radius-md: 14px;
  --otp-radius-sm: 12px;

  /* Transitions & Timing */
  --otp-backdrop: rgba(15, 23, 42, 0.55);
  --otp-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --otp-t-fast: 0.18s;
  --otp-t-base: 0.22s;
  --otp-t-slow: 0.32s;

  /* Typography */
  --otp-fs-xs: clamp(1.1rem, 0.4vw + 1rem, 1.2rem);
  --otp-fs-sm: clamp(1.25rem, 0.5vw + 1.1rem, 1.35rem);
  --otp-fs-md: clamp(1.35rem, 0.6vw + 1.2rem, 1.5rem);
  --otp-fs-lg: clamp(1.5rem, 0.8vw + 1.3rem, 1.7rem);
  --otp-fs-xl: clamp(1.7rem, 1.2vw + 1.4rem, 2.1rem);

  /* Icons */
  --otp-icon-wave: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 64 64" stroke="white" stroke-width="3"><title>Waving Hand</title><path d="M32 8C24.4 8 18 14.4 18 22v10c0 1.1.9 2 2 2s2-.9 2-2V22c0-5.5 4.5-10 10-10s10 4.5 10 10v18c0 1.1.9 2 2 2s2-.9 2-2V22c0-7.6-6.4-14-14-14z"/><path d="M40 24c0-1.1-.9-2-2-2s-2 .9-2 2v16c0 1.1.9 2 2 2s2-.9 2-2V24zM28 24c0-1.1-.9-2-2-2s-2 .9-2 2v16c0 1.1.9 2 2 2s2-.9 2-2V24zM34 18c-1.1 0-2 .9-2 2v20c0 1.1.9 2 2 2s2-.9 2-2V20c0-1.1-.9-2-2-2z" opacity="0.9"/><circle cx="32" cy="48" r="4" opacity="0.7"/><path d="M28 52c0 2.2 1.8 4 4 4s4-1.8 4-4" stroke-linecap="round" stroke-linejoin="round" opacity="0.6"/></svg>');
}

/* =========================
   Modal Shell & Structure
   ========================= */
#otp-modal.modal {
  backdrop-filter: blur(6px);
}

#otp-modal .modal-content,
#otp-modal .modal-content.auth-modal__main__content {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: var(--otp-radius-xl);
  background:
    radial-gradient(circle at top right, rgba(196, 3, 22, 0.05), transparent 32%),
    radial-gradient(circle at top left, rgba(225, 29, 72, 0.04), transparent 28%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), #fff);
  box-shadow: var(--otp-shadow);
}

#otp-modal .modal-content::before { /* Top gradient line */
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--otp-primary), var(--otp-primary-2));
  z-index: 2;
}

#otp-modal .modal-dialog {
  max-width: 540px;
  margin: 1.25rem auto;
  opacity: 0;
  will-change: transform, opacity;
  transform: translateY(24px) scale(0.96);
  transition: opacity var(--otp-t-slow) ease,
              transform var(--otp-t-slow) var(--otp-ease);
}

#otp-modal.show .modal-dialog {
  opacity: 1;
  transform: translateY(0) scale(1);
}

#otp-modal .modal-body {
  padding: 0;
}

#otp-modal .auth-modal__main--wrapper {
  position: relative;
  padding: 32px 30px 26px;
  max-height: 88vh;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(100, 116, 139, 0.35) transparent;
}

/* Webkit Scrollbar Styling */
#otp-modal .auth-modal__main--wrapper::-webkit-scrollbar {
  width: 7px;
}
#otp-modal .auth-modal__main--wrapper::-webkit-scrollbar-thumb {
  background: rgba(100, 116, 139, 0.28);
  border-radius: 20px;
}

#otp-modal .login__section, #otp-modal .login__section--inner {
  padding: 0;
}
#otp-modal .login__section .container,
#otp-modal .row,
#otp-modal [class*="col-"] {
  padding: 0;
}

/* =========================
   Close Button
   ========================= */
#otp-modal .auth-modal__header, /* Header wrapper for positioning */
#otp-modal .modal-header.auth-modal__header {
  position: absolute;
  inset-block-start: 16px;
  inline-end: 16px;
  z-index: 20;
  padding: 0;
  border: 0;
}

#otp-modal .auth-modal__close--btn {
  width: 2.85rem;
  height: 2.85rem;
  min-width: 2.85rem;
  padding: 0 !important;
  border: 1px solid var(--otp-soft-border);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  color: var(--otp-text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--otp-fs-xs);
  line-height: 1;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.08);
  backdrop-filter: blur(8px);
  transition:
    transform var(--otp-t-base) ease,
    background-color var(--otp-t-base) ease,
    border-color var(--otp-t-base) ease,
    color var(--otp-t-base) ease,
    box-shadow var(--otp-t-base) ease;
}

#otp-modal .auth-modal__close--btn:hover {
  background: var(--otp-primary);
  border-color: var(--otp-primary);
  color: #fff;
  transform: rotate(90deg) scale(1.04);
  box-shadow: 0 12px 26px rgba(196, 3, 22, 0.24);
}

#otp-modal .auth-modal__close--btn:focus-visible {
  outline: 2px solid var(--otp-primary);
  outline-offset: 2px;
}

/* =========================
   Main Auth Card Styles
   ========================= */
#otp-modal .account__login, /* General login styles */
#otp-modal .auth-otp__card { /* Specific OTP card styles */
  width: 100%;
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}

/* =========================
   Header / Hero Section with Waving Hand Icon
   ========================= */
#otp-modal .account__login--header,
#otp-modal .auth-otp__header {
  position: relative;
  margin-bottom: 26px;
  padding: 8px 34px 0;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Icon Box Container */
#otp-modal .auth-otp__icon-box,
#otp-modal .account__login--icon-box {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 74px;
  height: 74px;
  margin: 0 auto 16px;
  border-radius: 22px;
  background:
    radial-gradient(circle at 35% 35%, rgba(255, 255, 255, 0.75), transparent 42%),
    linear-gradient(135deg, var(--otp-primary), var(--otp-primary-2));
  box-shadow:
    0 14px 30px rgba(196, 3, 22, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.4);
  animation: otp-box-float 3.2s ease-in-out infinite;
}

/* Waving Hand SVG within the Icon Box */
#otp-modal .auth-otp__icon-box::after,
#otp-modal .account__login--icon-box::after {
  content: "";
  display: block;
  width: 46px;
  height: 46px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12C2 17.52 6.48 22 12 22C17.52 22 22 17.52 22 12C22 6.48 17.52 2 12 2ZM12 20C7.59 20 4 16.41 4 12C4 7.59 7.59 4 12 4C16.41 4 20 7.59 20 12C20 16.41 16.41 20 12 20Z' fill='white'/%3E%3Cpath d='M8.5 9.5C8.5 8.67 9.17 8 10 8C10.83 8 11.5 8.67 11.5 9.5C11.5 10.33 10.83 11 10 11C9.17 11 8.5 10.33 8.5 9.5ZM12.5 9.5C12.5 8.67 13.17 8 14 8C14.83 8 15.5 8.67 15.5 9.5C15.5 10.33 14.83 11 14 11C13.17 11 12.5 10.33 12.5 9.5Z' fill='white'/%3E%3Cpath d='M15.5 14.5C15.5 15.88 13.88 17 12 17C10.12 17 8.5 15.88 8.5 14.5H15.5Z' fill='white'/%3E%3C/svg%3E");  background-repeat: no-repeat; 
  background-position: center;
  background-size: contain;
  filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.12));
  animation: otp-wave-hand 2s ease-in-out infinite;
}

/* Animation: Gentle bounce for the icon box */
@keyframes otp-box-float {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-4px) scale(1.02); }
}

/* Animation: Waving effect for the hand icon */
@keyframes otp-wave-hand {
  0%, 100% { transform: rotate(0deg); }
  10%, 30%, 50% { transform: rotate(14deg); }
  20%, 40% { transform: rotate(-8deg); }
  60%, 80% { transform: rotate(10deg); }
  70%, 90% { transform: rotate(-6deg); }
}

#otp-modal .account__login--header__title,
#otp-modal .auth-otp__title {
  margin-bottom: 10px;
  font-size: clamp(1.8rem, 2.2vw, 2.2rem);
  font-weight: 900;
  line-height: 1.45;
  letter-spacing: -0.02em;
  color: var(--otp-text);
}

#otp-modal .account__login--header__desc,
#otp-modal .auth-otp__desc {
  max-width: 390px;
  margin: 0 auto;
  font-size: var(--otp-fs-sm);
  line-height: 1.95;
  color: var(--otp-muted);
}

#otp-modal .auth-otp__phone { /* For displaying the phone number */
  display: inline-block;
  direction: ltr;
  color: var(--otp-primary);
  font-weight: 800;
}

/* =========================
   Form Layout & Elements
   ========================= */
#otp-modal .account__login--inner,
#otp-modal .auth-otp__inner {
  width: 100%;
}

#otp-modal .auth-otp__group + .auth-otp__group {
  margin-top: 16px;
}

#otp-modal .auth-otp__label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  font-size: var(--otp-fs-sm);
  font-weight: 700;
  color: var(--otp-text);
}

#otp-modal .auth-otp__label::before { /* Decorative dot for labels */
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--otp-primary), var(--otp-primary-2));
  box-shadow: 0 0 0 4px var(--otp-primary-soft);
}

/* =========================
   Input Fields
   ========================= */
#otp-modal .account__login--input,
#otp-modal .auth-otp__input {
  width: 100%;
  height: clamp(50px, 3vw + 42px, 56px);
  padding-inline: 16px;
  border: 1px solid var(--otp-border);
  border-radius: var(--otp-radius-md);
  background: rgba(255, 255, 255, 0.96);
  color: var(--otp-text);
  font-size: var(--otp-fs-md);
  font-weight: 600;
  outline: none;
  box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.02);
  transition:
    border-color var(--otp-t-base) ease,
    box-shadow var(--otp-t-base) ease,
    background-color var(--otp-t-base) ease,
    transform var(--otp-t-fast) ease;
}

#otp-modal .account__login--input::placeholder,
#otp-modal .auth-otp__input::placeholder {
  color: #94a3b8;
  font-weight: 500;
}

#otp-modal .account__login--input:hover,
#otp-modal .auth-otp__input:hover {
  border-color: #cbd5e1;
}

#otp-modal .account__login--input:focus,
#otp-modal .auth-otp__input:focus {
  border-color: var(--otp-primary);
  background: #fff;
  transform: translateY(-1px);
  box-shadow:
    0 0 0 4px var(--otp-primary-soft),
    0 10px 24px rgba(196, 3, 22, 0.08);
}

#otp-modal .account__login--input.is-invalid,
#otp-modal .auth-otp__input.is-invalid {
  border-color: var(--otp-danger);
}

#otp-modal .account__login--input.is-invalid:focus,
#otp-modal .auth-otp__input.is-invalid:focus {
  box-shadow: 0 0 0 4px rgba(220, 38, 38, 0.12);
}

/* Specific input for OTP code */
#otp-modal .auth-otp__code-input,
#otp-modal .account__login--input.text-center {
  direction: ltr;
  text-align: center;
  padding-inline: 10px;
  font-size: var(--otp-fs-lg);
  font-weight: 800;
  letter-spacing: 0.42em; /* Adjust letter spacing for code input */
}

/* =========================
   Buttons (Primary CTA)
   ========================= */
#otp-modal .auth-otp__submit,
#otp-modal .account__login--btn.primary__btn,
#otp-modal .primary__btn {
  position: relative;
  width: 100%;
  min-height: clamp(50px, 3vw + 42px, 56px);
  padding-inline: 18px;
  border: 0;
  border-radius: var(--otp-radius-md);
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: #fff;
  font-size: var(--otp-fs-md);
  font-weight: 800;
  background: linear-gradient(135deg, var(--otp-primary), var(--otp-primary-2));
  box-shadow:
    0 16px 32px rgba(196, 3, 22, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.22);
  transition:
    transform var(--otp-t-base) ease,
    box-shadow var(--otp-t-base) ease,
    opacity var(--otp-t-base) ease,
    filter var(--otp-t-base) ease;
}

/* Button Shimmer Effect */
#otp-modal .auth-otp__submit::before,
#otp-modal .account__login--btn.primary__btn::before,
#otp-modal .primary__btn::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 20%, rgba(255, 255, 255, 0.22), transparent 80%);
  transform: translateX(-120%);
  transition: transform 0.7s ease;
}

#otp-modal .auth-otp__submit:hover,
#otp-modal .account__login--btn.primary__btn:hover,
#otp-modal .primary__btn:hover {
  transform: translateY(-2px);
  filter: saturate(1.05);
  box-shadow:
    0 20px 38px rgba(196, 3, 22, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.28);
}

#otp-modal .auth-otp__submit:hover::before,
#otp-modal .account__login--btn.primary__btn:hover::before,
#otp-modal .primary__btn:hover::before {
  transform: translateX(120%);
}

#otp-modal .auth-otp__submit:active,
#otp-modal .account__login--btn.primary__btn:active,
#otp-modal .primary__btn:active {
  transform: translateY(0);
}

#otp-modal .auth-otp__submit:focus-visible,
#otp-modal .account__login--btn.primary__btn:focus-visible,
#otp-modal .primary__btn:focus-visible {
  outline: 2px solid #fff;
  outline-offset: -4px;
}

#otp-modal .auth-otp__submit:disabled,
#otp-modal .account__login--btn.primary__btn:disabled,
#otp-modal .primary__btn:disabled {
  cursor: not-allowed;
  opacity: 0.7;
  transform: none;
  box-shadow: none;
  filter: grayscale(0.08);
}

/* =========================
   Alerts / Error Messages
   ========================= */
#otp-modal .auth-otp__error,
#otp-modal .alert.alert-danger {
  margin-bottom: 0;
  padding: 12px 14px;
  border: 1px solid rgba(220, 38, 38, 0.12);
  border-radius: var(--otp-radius-sm);
  background: linear-gradient(180deg, rgba(254, 242, 242, 0.95), rgba(254, 226, 226, 0.92));
  color: #b91c1c; /* Red 700 */
  font-size: var(--otp-fs-sm);
  font-weight: 600;
  line-height: 1.9;
}

/* =========================
   Step 2 Actions (Edit/Resend/Timer)
   ========================= */
#otp-modal .auth-otp__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 18px;
  padding-top: 4px;
}

/* Link buttons (Edit Phone, Resend Code) */
#otp-modal .auth-otp__link,
#otp-modal .btn.btn-link.auth-otp__link,
#otp-modal #otp-step2 .btn-link,
#otp-modal #otp-resend-btn {
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--otp-primary);
  font-size: var(--otp-fs-sm);
  font-weight: 700;
  line-height: 1.9;
  text-decoration: none;
  transition: color var(--otp-t-fast) ease, opacity var(--otp-t-fast) ease;
}

#otp-modal .auth-otp__link:hover,
#otp-modal .btn.btn-link.auth-otp__link:hover,
#otp-modal .auth-otp__link:focus-visible,
#otp-modal .btn.btn-link.auth-otp__link:focus-visible,
#otp-modal #otp-step2 .btn-link:hover,
#otp-modal #otp-step2 .btn-link:focus-visible {
  color: var(--otp-primary-2);
  text-decoration: underline;
}

#otp-modal .auth-otp__link:focus-visible,
#otp-modal .btn.btn-link.auth-otp__link:focus-visible,
#otp-modal #otp-step2 .btn-link:focus-visible {
  outline: 2px solid var(--otp-primary);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Timer Wrapper */
#otp-modal .auth-otp__timer,
#otp-modal #otp-timer-wrapper {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border: 1px solid var(--otp-border);
  border-radius: 999px; /* Pill shape */
  background: rgba(248, 250, 252, 0.95);
  color: var(--otp-muted);
  font-size: var(--otp-fs-xs);
  font-weight: 700;
  line-height: 1.8;
  white-space: nowrap;
}

#otp-modal .auth-otp__timer::before,
#otp-modal #otp-timer-wrapper::before { /* Timer icon (clock) */
  content: "⏱";
  font-size: var(--otp-fs-xs);
  line-height: 1;
}

#otp-modal #otp-timer { /* The countdown number */
  min-width: 18px;
  text-align: center;
  color: var(--otp-text);
  font-weight: 900;
}

/* =========================
   Helper spacing utilities (optional, can be removed if Bootstrap spacing is used)
   ========================= */
#otp-modal .mb-3 { margin-bottom: 1rem !important; }
#otp-modal .mt-3 { margin-top: 1rem !important; }
#otp-modal .mt-4 { margin-top: 1.25rem !important; }
#otp-modal .mb-25 { margin-bottom: 25px !important; } /* Custom spacing */

/* =========================
   Responsive Breakpoints
   ========================= */
@media only screen and (max-width: 767px) { /* Mobile */
  #otp-modal .modal-dialog {
    max-width: none;
    margin: 0.85rem;
  }
  #otp-modal .modal-content,
  #otp-modal .modal-content.auth-modal__main__content {
    border-radius: 20px;
  }
  #otp-modal .auth-modal__main--wrapper {
    padding: 24px 16px 18px;
    max-height: 90vh;
  }
  #otp-modal .auth-modal__header,
  #otp-modal .modal-header.auth-modal__header {
    inset-block-start: 12px;
    inline-end: 12px;
  }
  #otp-modal .auth-modal__close--btn {
    width: 2.55rem;
    height: 2.55rem;
    min-width: 2.55rem;
  }
  #otp-modal .account__login--header,
  #otp-modal .auth-otp__header {
    padding: 8px 18px 0;
    margin-bottom: 22px;
  }
  #otp-modal .auth-otp__icon-box,
  #otp-modal .account__login--icon-box {
    width: 64px;
    height: 64px;
    margin-bottom: 14px;
    border-radius: 18px;
  }
  #otp-modal .auth-otp__icon-box::after,
  #otp-modal .account__login--icon-box::after {
    width: 40px;
    height: 40px;
  }
  #otp-modal .account__login--header__title,
  #otp-modal .auth-otp__title {
    font-size: 1.7rem;
  }
  #otp-modal .account__login--header__desc,
  #otp-modal .auth-otp__desc {
    font-size: 1.3rem;
    line-height: 1.9;
  }
  #otp-modal .auth-otp__code-input,
  #otp-modal .account__login--input.text-center {
    letter-spacing: 0.28em; /* Adjust for mobile */
  }
  #otp-modal .auth-otp__actions {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  #otp-modal .auth-otp__link,
  #otp-modal .btn.btn-link.auth-otp__link,
  #otp-modal .auth-otp__timer,
  #otp-modal #otp-timer-wrapper,
  #otp-modal #otp-resend-btn {
    width: 100%;
    justify-content: center;
    text-align: center;
  }
}

@media only screen and (max-width: 420px) { /* Smaller Mobile */
  #otp-modal .modal-dialog {
    margin: 0.6rem;
  }
  #otp-modal .auth-modal__main--wrapper {
    padding: 22px 14px 16px;
  }
  #otp-modal .account__login--header,
  #otp-modal .auth-otp__header {
    padding-inline: 10px;
  }
  #otp-modal .account__login--header__title,
  #otp-modal .auth-otp__title {
    font-size: 1.5rem;
  }
  #otp-modal .auth-otp__icon-box,
  #otp-modal .account__login--icon-box {
    width: 58px;
    height: 58px;
  }
  #otp-modal .auth-otp__icon-box::after,
  #otp-modal .account__login--icon-box::after {
    width: 36px;
    height: 36px;
  }
  #otp-modal .auth-otp__code-input,
  #otp-modal .account__login--input.text-center {
    letter-spacing: 0.18em; /* Further adjust for smaller screens */
  }
}

/* =========================
   Reduced Motion Accessibility
   ========================= */
@media (prefers-reduced-motion: reduce) {
  #otp-modal .modal-dialog,
  #otp-modal .auth-modal__close--btn,
  #otp-modal .account__login--input,
  #otp-modal .auth-otp__input,
  #otp-modal .auth-otp__submit,
  #otp-modal .account__login--btn.primary__btn,
  #otp-modal .primary__btn,
  #otp-modal .auth-otp__icon-box,
  #otp-modal .account__login--icon-box,
  #otp-modal .auth-otp__icon-box::after,
  #otp-modal .account__login--icon-box::after {
    transition: none !important;
    animation: none !important;
  }
  #otp-modal .auth-otp__submit::before,
  #otp-modal .account__login--btn.primary__btn::before,
  #otp-modal .primary__btn::before {
    display: none; /* Disable shimmer effect */
  }
}