/* ==========================================================================
   EMED BIOTECHNOLOGY — Verify Page Specific Styles
   Extends style.css for the product verification page
   ========================================================================== */

/* Form card for code input */
.verify-form-card{
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  overflow: hidden;
  transition: box-shadow var(--dur, 0.4s) var(--ease, cubic-bezier(0.16, 1, 0.3, 1));
  max-width: 480px;
  margin-inline: auto;
}
.verify-form-card:hover{
  box-shadow: var(--shadow-lg);
}
.verify-form-card__body{
  padding: 40px 32px;
}
@media (max-width: 560px){
  .verify-form-card__body{ padding: 28px 20px; }
}

/* Result card — base */
.verify-result{
  padding: 48px 32px;
  border-radius: var(--radius-lg);
  text-align: center;
  max-width: 480px;
  margin-inline: auto;
}
@media (max-width: 560px){
  .verify-result{ padding: 36px 22px; }
}

.verify-result__icon{
  margin-bottom: 20px;
  display: flex;
  justify-content: center;
}
.verify-result__icon svg{
  width: 80px;
  height: 80px;
}
.verify-result__title{
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 12px;
}
.verify-result__message{
  font-size: 0.95rem;
  max-width: 440px;
  margin-inline: auto;
  line-height: 1.6;
}
.verify-result__date{
  margin-top: 18px;
  font-size: 0.82rem;
  font-weight: 500;
  opacity: 0.75;
}

/* Success — green */
.verify-card--success{
  background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
  border: 1px solid #a7f3d0;
  color: #065f46;
  transition: transform var(--dur,0.4s) var(--ease,cubic-bezier(0.16,1,0.3,1)), box-shadow var(--dur,0.4s) var(--ease,cubic-bezier(0.16,1,0.3,1));
}
.verify-card--success:hover{
  transform: scale(1.02);
  box-shadow: 0 16px 36px rgba(5, 150, 105, 0.2);
}
.verify-card--success .verify-result__icon svg{ color: #059669; }
.verify-card--success .verify-result__title{ color: #065f46; }
.verify-card--success .verify-result__message{ color: #047857; }
.verify-card--success .verify-result__date{ color: #059669; }

/* Invalid / Duplicate — red */
.verify-card--invalid,
.verify-card--duplicate{
  background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
  border: 1px solid #fecaca;
  color: #991b1b;
  transition: transform var(--dur,0.4s) var(--ease,cubic-bezier(0.16,1,0.3,1)), box-shadow var(--dur,0.4s) var(--ease,cubic-bezier(0.16,1,0.3,1));
}
.verify-card--invalid:hover,
.verify-card--duplicate:hover{
  transform: scale(1.02);
  box-shadow: 0 16px 36px rgba(220, 38, 38, 0.2);
}
.verify-card--invalid .verify-result__icon svg,
.verify-card--duplicate .verify-result__icon svg{ color: #dc2626; }
.verify-card--invalid .verify-result__title,
.verify-card--duplicate .verify-result__title{ color: #991b1b; }
.verify-card--invalid .verify-result__message,
.verify-card--duplicate .verify-result__message{ color: #b91c1c; }

/* Error — amber */
.verify-card--error{
  background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
  border: 1px solid #fde68a;
  color: #92400e;
  transition: transform var(--dur,0.4s) var(--ease,cubic-bezier(0.16,1,0.3,1)), box-shadow var(--dur,0.4s) var(--ease,cubic-bezier(0.16,1,0.3,1));
}
.verify-card--error:hover{
  transform: scale(1.02);
  box-shadow: 0 16px 36px rgba(217, 119, 6, 0.2);
}
.verify-card--error .verify-result__icon svg{ color: #d97706; }
.verify-card--error .verify-result__title{ color: #92400e; }
.verify-card--error .verify-result__message{ color: #b45309; }

/* Dark mode support for verify page */
@media (prefers-color-scheme: dark){
  .verify-card--success{
    background: linear-gradient(135deg, #022c22 0%, #064e3b 100%);
    border-color: #065f46;
  }
  .verify-card--success .verify-result__title{ color: #a7f3d0; }
  .verify-card--success .verify-result__message{ color: #6ee7b7; }
  .verify-card--success .verify-result__date{ color: #6ee7b7; }
  .verify-card--success .verify-result__icon svg{ color: #34d399; }

  .verify-card--invalid,
  .verify-card--duplicate{
    background: linear-gradient(135deg, #450a0a 0%, #7f1d1d 100%);
    border-color: #991b1b;
  }
  .verify-card--invalid .verify-result__title,
  .verify-card--duplicate .verify-result__title{ color: #fca5a5; }
  .verify-card--invalid .verify-result__message,
  .verify-card--duplicate .verify-result__message{ color: #fecaca; }
  .verify-card--invalid .verify-result__icon svg,
  .verify-card--duplicate .verify-result__icon svg{ color: #f87171; }

  .verify-card--error{
    background: linear-gradient(135deg, #451a03 0%, #78350f 100%);
    border-color: #92400e;
  }
  .verify-card--error .verify-result__title{ color: #fcd34d; }
  .verify-card--error .verify-result__message{ color: #fde68a; }
  .verify-card--error .verify-result__icon svg{ color: #fbbf24; }
}

/* --------------------------------------------------------------------------
   Modal (replaces JS alert)
   -------------------------------------------------------------------------- */
.modal-overlay{
  position: fixed; inset: 0; z-index: 8000;
  background: rgba(16,20,31,0.55);
  backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; visibility: hidden;
  transition: opacity 0.4s cubic-bezier(0.16,1,0.3,1), visibility 0.4s cubic-bezier(0.16,1,0.3,1);
}
.modal-overlay.is-visible{ opacity: 1; visibility: visible; }
.modal-box{
  background: #fff;
  border-radius: var(--radius-lg);
  padding: 40px 36px 32px;
  max-width: 380px; width: 90%;
  text-align: center;
  box-shadow: var(--shadow-lg);
  transform: translateY(20px) scale(0.96);
  transition: transform 0.4s cubic-bezier(0.16,1,0.3,1);
}
.modal-overlay.is-visible .modal-box{ transform: translateY(0) scale(1); }
.modal-icon{
  width: 64px; height: 64px;
  background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 18px;
  color: #d97706;
}
.modal-icon svg{ width: 32px; height: 32px; }
.modal-title{
  font-family: var(--font-heading);
  font-size: 1.2rem; font-weight: 700;
  color: var(--color-dark);
  margin-bottom: 8px;
}
.modal-message{
  font-size: 0.92rem;
  color: var(--color-text);
  margin-bottom: 24px;
  line-height: 1.5;
}
.modal-close{
  min-width: 75px;
}

/* Nav verify badge */
.nav-verify{
  color: var(--color-primary) !important;
  font-weight: 700 !important;
}