/* EduPress — Presence check modal
   Depends on edupress-frontend.css for CSS custom properties
------------------------------------------------------------*/

/* ── Backdrop + dialog ── */
.ep-presence-modal {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ep-presence-modal[hidden] { display: none !important; }

.ep-presence-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(26, 26, 46, 0.65);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  animation: ep-fade-in 0.2s ease;
}

.ep-presence-modal__dialog {
  position: relative;
  background: #fff;
  border-radius: var(--ep-radius-lg, 20px);
  box-shadow: 0 24px 64px rgba(108, 99, 255, 0.22);
  padding: 2.5rem 2rem;
  width: min(460px, 90vw);
  text-align: center;
  animation: ep-presence-pop .28s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.ep-presence-modal__header { margin-bottom: 1rem; }
.ep-presence-modal__header .ep-h2 { margin: 0; font-size: 1.35rem; }

.ep-presence-modal__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
  margin-bottom: 1.5rem;
}
.ep-presence-modal__body p { margin: 0; color: var(--ep-text-muted, #6b7280); }

/* ── SVG countdown ring ── */
.ep-presence-timer {
  position: relative;
  width: 100px;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ep-presence-timer__ring {
  width: 100px;
  height: 100px;
  position: absolute;
  inset: 0;
}

.ep-presence-timer__track {
  stroke: var(--ep-border, #e5e7eb);
}

.ep-presence-timer__progress {
  stroke: var(--ep-primary, #6C63FF);
  stroke-linecap: round;
  transition: stroke-dashoffset 1s linear, stroke .3s ease;
}

.ep-presence-timer__progress--warn   { stroke: var(--ep-warning, #d69e2e); }
.ep-presence-timer__progress--danger { stroke: var(--ep-danger, #e53e3e); }

.ep-presence-timer__count {
  font-family: var(--ep-font-display, 'Poppins', sans-serif);
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--ep-text, #1a1a2e);
  position: relative;
  z-index: 1;
  line-height: 1;
}

/* ── Footer button ── */
.ep-presence-modal__footer { display: flex; justify-content: center; }
.ep-presence-modal__footer .ep-btn { min-width: 180px; }

/* ── Result message ── */
.ep-presence-modal__result {
  margin-top: 1rem;
  font-size: .9375rem;
  font-weight: 500;
}
.ep-presence-modal__result[hidden] { display: none !important; }
.ep-presence-modal__result--success { color: var(--ep-success, #38a169); }
.ep-presence-modal__result--error   { color: var(--ep-danger,  #e53e3e); }

/* ── Pulse animation on the confirm button when time is low ── */
@keyframes ep-presence-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(229,62,62,.4); }
  50%       { box-shadow: 0 0 0 10px rgba(229,62,62,0); }
}
.ep-presence-modal__footer .ep-btn--danger {
  animation: ep-presence-pulse 1.2s ease infinite;
}

@keyframes ep-presence-pop {
  from { opacity: 0; transform: scale(.88) translateY(24px); }
  to   { opacity: 1; transform: scale(1)   translateY(0); }
}

@keyframes ep-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}