/* ===================================================================
   DOMAIN ZERO PROTOCOL - ADMIN ACCESS WARNING MODAL
   Production Version with API Integration

   Security: SEC-ADMIN-CLICK-001 / Phase 5 (Production Redesign)
   Tier: 2 (Standard)
   WCAG: 2.2 AA Compliant
   CSP: Compliant (no inline styles/handlers)

   Date: 2026-02-03
   Replaces: Previous yellow/orange/red theme with gold/green/red
   =================================================================== */

/* ===================================================================
   CSS CUSTOM PROPERTIES (THEME SYSTEM)
   =================================================================== */
:root {
  /* Color System - Gold/Green/Red Progressive Lockout */
  --dzp-bg-primary: #000000;
  --dzp-bg-secondary: #12121a;
  --dzp-bg-overlay: #000000;
  --dzp-border: rgba(255, 255, 255, 0.08);
  --dzp-border-bright: rgba(255, 255, 255, 0.15);
  --dzp-text-primary: #ffffff;
  --dzp-text-secondary: rgba(255, 255, 255, 0.8);
  --dzp-text-muted: rgba(255, 255, 255, 0.5);

  /* Alert Level Colors - Progressive System */
  --dzp-alert-caution: #ffb400;          /* Strike 1: Gold */
  --dzp-alert-caution-dark: #d49500;
  --dzp-alert-lockout: #00b347;          /* Strike 2: Green */
  --dzp-alert-lockout-dark: #008030;
  --dzp-alert-critical: #dc143c;         /* Strike 3: Red */
  --dzp-alert-critical-dark: #8b0000;

  /* Badge Glow Colors */
  --dzp-badge-glow: rgba(255, 180, 0, 0.6);

  /* Location Block Colors - Green/Black/Gold (Professional Jamaica Theme) */
  --location-green: #00b347;
  --location-green-dark: #008030;
  --location-gold: #ffb400;
  --location-gold-dark: #d49500;
  --location-glow: rgba(0, 179, 71, 0.4);

  /* Typography - System Font Stack (Privacy-First) */
  --font-display: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, 'Roboto', 'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'SF Mono', 'Monaco', 'Consolas', 'Liberation Mono', 'Courier New', monospace;
}

/* ===================================================================
   MODAL OVERLAY & CONTAINER
   =================================================================== */
.admin-access-warning-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--dzp-bg-overlay);
  backdrop-filter: blur(8px);
  z-index: 100000;
  padding: 20px;
  overflow-y: auto;
}

.admin-access-warning-overlay[data-visible="true"] {
  display: flex;
  align-items: center;
  justify-content: center;
}

.dzp-modal-container {
  position: relative;
  width: 100%;
  max-width: 780px; /* User request 20260203: Increased from 600px */
  max-height: 112vh; /* User request 20260203: Increased from 83vh to 112vh */
  overflow-y: auto; /* Allow scrolling if content exceeds height */
  background: linear-gradient(135deg, var(--dzp-bg-primary) 0%, var(--dzp-bg-secondary) 100%);
  border: 2px solid var(--dzp-border-bright);
  border-radius: 12px;
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.6),
    0 0 0 1px rgba(255, 255, 255, 0.05) inset,
    0 0 64px rgba(255, 180, 0, 0.15);
  animation: modalSlideIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes modalSlideIn {
  from {
    opacity: 0;
    transform: translateY(-30px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Scanlines Effect (Cyberpunk Aesthetic) */
.dzp-scanlines {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: repeating-linear-gradient(
    0deg,
    transparent 0px,
    rgba(255, 255, 255, 0.03) 1px,
    transparent 2px,
    transparent 4px
  );
  pointer-events: none;
  z-index: 1;
  border-radius: 12px;
  opacity: 0.6;
}

.dzp-modal-content {
  position: relative;
  z-index: 2;
  padding: 40px 32px;
}

/* ===================================================================
   CLOSE BUTTON (HIDDEN - User must acknowledge with "I Understand")
   =================================================================== */
.dzp-close-btn {
  display: none !important; /* Fix #3: Remove X button - user must click "I Understand" */
  position: absolute;
  top: 16px;
  right: 16px;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--dzp-border);
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.3s ease;
  z-index: 3;
  color: var(--dzp-text-secondary);
  font-size: 18px;
}

.dzp-close-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: var(--dzp-border-bright);
  color: var(--dzp-text-primary);
  transform: rotate(90deg);
}

.dzp-close-btn:active {
  transform: rotate(90deg) scale(0.95);
}

/* ===================================================================
   HEXAGON SECURITY BADGE
   =================================================================== */
.dzp-badge-container {
  position: relative;
  width: 80px;
  height: 80px;
  margin: 0 auto 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.dzp-badge-hexagon {
  position: relative;
  width: 80px;
  height: 80px;
  background: linear-gradient(135deg, var(--dzp-alert-caution) 0%, var(--dzp-alert-caution-dark) 100%);
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: hexagonPulse 3s ease-in-out infinite;
  z-index: 2;
}

@keyframes hexagonPulse {
  0%, 100% {
    transform: scale(1) rotate(0deg);
  }
  50% {
    transform: scale(1.08) rotate(2deg);
  }
}

.dzp-badge-inner {
  width: 72px;
  height: 72px;
  background: var(--dzp-bg-primary);
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  color: var(--dzp-alert-caution);
}

.dzp-badge-glow {
  position: absolute;
  width: 110px;
  height: 110px;
  background: radial-gradient(circle, var(--dzp-badge-glow) 0%, transparent 70%);
  animation: glowPulse 2s ease-in-out infinite;
  z-index: 1;
}

@keyframes glowPulse {
  0%, 100% {
    opacity: 0.5;
    transform: scale(1);
  }
  50% {
    opacity: 0.8;
    transform: scale(1.2);
  }
}

/* ===================================================================
   STATE CONTAINERS
   =================================================================== */
.dzp-state {
  display: block;
}

.dzp-state[hidden] {
  display: none;
}

/* ===================================================================
   ALERT LEVEL INDICATOR
   =================================================================== */
.dzp-alert-level {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  background: rgba(255, 180, 0, 0.1);
  border: 1px solid var(--dzp-alert-caution);
  border-radius: 6px;
  margin-bottom: 18px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  animation: levelPulse 1.5s ease-in-out infinite;
}

@keyframes levelPulse {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(255, 180, 0, 0.4);
  }
  50% {
    box-shadow: 0 0 0 6px rgba(255, 180, 0, 0);
  }
}

.dzp-alert-level[data-level="caution"] {
  color: var(--dzp-alert-caution);
  background: rgba(255, 180, 0, 0.1);
  border-color: var(--dzp-alert-caution);
}

.dzp-alert-level[data-level="lockout"] {
  color: var(--dzp-alert-lockout);
  background: rgba(0, 179, 71, 0.1);
  border-color: var(--dzp-alert-lockout);
  animation: levelPulseLockout 1.5s ease-in-out infinite;
}

@keyframes levelPulseLockout {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(0, 179, 71, 0.4);
  }
  50% {
    box-shadow: 0 0 0 6px rgba(0, 179, 71, 0);
  }
}

.dzp-alert-level[data-level="blocked"] {
  color: var(--dzp-alert-critical);
  background: rgba(0, 155, 58, 0.15);
  border-color: var(--dzp-alert-critical);
  animation: levelPulseCritical 1s ease-in-out infinite;
}

@keyframes levelPulseCritical {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(0, 155, 58, 0.5);
  }
  50% {
    box-shadow: 0 0 0 8px rgba(0, 155, 58, 0);
  }
}

.dzp-alert-icon {
  font-size: 14px;
}

/* ===================================================================
   TITLE & SUBTITLE
   =================================================================== */
.dzp-title {
  font-family: var(--font-display);
  font-weight: 700;
  margin-bottom: 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.dzp-title-prefix {
  font-size: 14px;
  color: var(--dzp-text-secondary);
  letter-spacing: 2px;
  text-transform: uppercase;
}

.dzp-title-main {
  font-size: 32px;
  color: var(--dzp-text-primary);
  letter-spacing: 1px;
  text-transform: uppercase;
  background: linear-gradient(135deg, #ffffff 0%, rgba(255, 255, 255, 0.8) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.dzp-subtitle {
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--dzp-text-secondary);
  margin-bottom: 20px;
  line-height: 1.6;
}

/* ===================================================================
   DZP PROTOCOL NOTICE
   =================================================================== */
.dzp-protocol-notice {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: rgba(255, 180, 0, 0.05);
  border: 1px solid rgba(255, 180, 0, 0.3);
  border-left: 3px solid var(--dzp-alert-caution);
  border-radius: 4px;
  margin-bottom: 14px;
}

.dzp-protocol-notice.critical {
  background: rgba(220, 20, 60, 0.1);
  border-color: rgba(220, 20, 60, 0.4);
  border-left-color: var(--dzp-alert-critical);
  animation: criticalBlink 1.5s ease-in-out infinite;
}

@keyframes criticalBlink {
  0%, 100% {
    border-left-color: var(--dzp-alert-critical);
  }
  50% {
    border-left-color: transparent;
  }
}

.dzp-protocol-icon {
  font-size: 18px;
  color: var(--dzp-alert-caution);
  flex-shrink: 0;
}

.dzp-protocol-notice.critical .dzp-protocol-icon {
  color: var(--dzp-alert-critical);
  animation: iconSpin 3s linear infinite;
}

@keyframes iconSpin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.dzp-protocol-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.dzp-protocol-text strong {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--dzp-text-primary);
}

.dzp-protocol-text span {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--dzp-text-secondary);
}

/* ===================================================================
   STRIKE COUNTER
   =================================================================== */
.dzp-strike-counter {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--dzp-border);
  border-radius: 6px;
  padding: 12px;
  margin-bottom: 14px;
}

.dzp-strike-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--dzp-border);
}

.dzp-strike-number {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: var(--dzp-alert-caution);
}

.dzp-strike-status {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.8px;
  color: var(--dzp-text-muted);
  text-transform: uppercase;
  background: rgba(255, 255, 255, 0.05);
  padding: 3px 8px;
  border-radius: 3px;
}

.dzp-strike-message {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--dzp-text-secondary);
  line-height: 1.5;
}

/* ===================================================================
   WARNING TEXT
   =================================================================== */
.dzp-warning-text {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: rgba(255, 180, 0, 0.08);
  border-left: 3px solid var(--dzp-alert-caution);
  border-radius: 4px;
  margin-bottom: 14px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--dzp-text-secondary);
}

.dzp-warning-text.critical {
  background: rgba(220, 20, 60, 0.12);
  border-left-color: var(--dzp-alert-critical);
  color: var(--dzp-alert-critical);
}

.dzp-warning-text i {
  font-size: 16px;
  color: var(--dzp-alert-caution);
}

.dzp-warning-text.critical i {
  color: var(--dzp-alert-critical);
}

/* ===================================================================
   COUNTDOWN TIMER
   =================================================================== */
.dzp-timer-container {
  margin-bottom: 14px;
}

.dzp-timer-label {
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--dzp-text-muted);
  margin-bottom: 10px;
  text-align: center;
}

.dzp-timer {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
}

.dzp-timer-unit {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  min-width: 60px;
}

.dzp-timer-value {
  font-family: var(--font-display);
  font-size: 40px;
  font-weight: 700;
  color: var(--dzp-alert-lockout);
  background: rgba(0, 179, 71, 0.1);
  border: 2px solid var(--dzp-alert-lockout);
  border-radius: 8px;
  padding: 12px 16px;
  min-width: 80px;
  text-align: center;
  animation: timerPulse 1s ease-in-out infinite;
}

@keyframes timerPulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.03);
  }
}

[data-strike="3"] .dzp-timer-value {
  color: var(--dzp-alert-critical);
  border-color: var(--dzp-alert-critical);
  background: rgba(220, 20, 60, 0.12);
  animation: timerPulseCritical 0.8s ease-in-out infinite;
}

@keyframes timerPulseCritical {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(220, 20, 60, 0.4);
  }
  50% {
    transform: scale(1.05);
    box-shadow: 0 0 0 8px rgba(220, 20, 60, 0);
  }
}

.dzp-timer-unit-label {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--dzp-text-muted);
}

.dzp-timer-separator {
  font-family: var(--font-display);
  font-size: 36px;
  font-weight: 700;
  color: var(--dzp-text-muted);
  margin: 0 4px;
}

/* Extended Timer (7-day) */
.dzp-timer-extended .dzp-timer-unit {
  min-width: 70px;
}

.dzp-timer-extended .dzp-timer-value {
  font-size: 36px;
  padding: 10px 16px;
  min-width: 75px;
}

/* ===================================================================
   CONSEQUENCES SYSTEM
   =================================================================== */
.dzp-consequences {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--dzp-border);
  border-radius: 6px;
  padding: 12px;
  margin-bottom: 16px;
}

.dzp-consequences-title {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--dzp-text-primary);
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.dzp-consequences-title i {
  font-size: 13px;
  color: var(--dzp-alert-caution);
}

.dzp-consequences-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.dzp-consequence {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid transparent;
  border-radius: 4px;
  transition: all 0.3s ease;
}

.dzp-consequence.active {
  background: rgba(255, 180, 0, 0.08);
  border-color: var(--dzp-alert-caution);
  animation: consequenceGlow 2s ease-in-out infinite;
}

@keyframes consequenceGlow {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(255, 180, 0, 0.3);
  }
  50% {
    box-shadow: 0 0 0 4px rgba(255, 180, 0, 0);
  }
}

[data-strike="2"] .dzp-consequence.active {
  background: rgba(0, 179, 71, 0.08);
  border-color: var(--dzp-alert-lockout);
  animation: consequenceGlowLockout 2s ease-in-out infinite;
}

@keyframes consequenceGlowLockout {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(0, 179, 71, 0.3);
  }
  50% {
    box-shadow: 0 0 0 4px rgba(0, 179, 71, 0);
  }
}

[data-strike="3"] .dzp-consequence.active {
  background: rgba(220, 20, 60, 0.1);
  border-color: var(--dzp-alert-critical);
  animation: consequenceGlowCritical 1.5s ease-in-out infinite;
}

@keyframes consequenceGlowCritical {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(220, 20, 60, 0.4);
  }
  50% {
    box-shadow: 0 0 0 6px rgba(220, 20, 60, 0);
  }
}

.dzp-consequence.complete {
  opacity: 0.6;
}

.dzp-consequence-marker {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--dzp-border);
  border-radius: 4px;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  color: var(--dzp-text-muted);
}

.dzp-consequence.active .dzp-consequence-marker {
  background: var(--dzp-alert-caution);
  border-color: var(--dzp-alert-caution);
  color: #ffffff;
}

[data-strike="2"] .dzp-consequence.active .dzp-consequence-marker {
  background: var(--dzp-alert-lockout);
  border-color: var(--dzp-alert-lockout);
}

[data-strike="3"] .dzp-consequence.active .dzp-consequence-marker {
  background: var(--dzp-alert-critical);
  border-color: var(--dzp-alert-critical);
}

.dzp-consequence.complete .dzp-consequence-marker {
  background: rgba(34, 197, 94, 0.15);
  border-color: rgba(34, 197, 94, 0.4);
  color: #22c55e;
}

.dzp-consequence-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.dzp-consequence-content strong {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  color: var(--dzp-text-primary);
}

.dzp-consequence-content span {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--dzp-text-muted);
}

/* ===================================================================
   ACTION BUTTONS
   =================================================================== */
.dzp-actions {
  display: flex;
  justify-content: center;
  margin-top: 16px;
}

.dzp-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 24px;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.dzp-btn::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  transform: translate(-50%, -50%);
  transition: width 0.4s ease, height 0.4s ease;
}

.dzp-btn:hover::before {
  width: 300px;
  height: 300px;
}

.dzp-btn-text {
  position: relative;
  z-index: 1;
}

.dzp-btn-icon {
  position: relative;
  z-index: 1;
  font-size: 16px;
}

.dzp-btn-acknowledge {
  background: linear-gradient(135deg, var(--dzp-alert-caution) 0%, var(--dzp-alert-caution-dark) 100%);
  color: #ffffff;
  box-shadow: 0 4px 16px rgba(255, 180, 0, 0.3);
}

.dzp-btn-acknowledge:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 24px rgba(255, 180, 0, 0.4);
}

.dzp-btn-acknowledge:active {
  transform: translateY(0);
}

.dzp-btn-close {
  background: rgba(255, 255, 255, 0.05);
  color: var(--dzp-text-primary);
  border: 1px solid var(--dzp-border-bright);
}

.dzp-btn-close:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: var(--dzp-text-primary);
  transform: translateY(-2px);
}

.dzp-btn-close:active {
  transform: translateY(0);
}

/* ===================================================================
   RESPONSIVE DESIGN
   =================================================================== */
@media (max-width: 768px) {
  .dzp-modal-content {
    padding: 32px 24px;
  }

  .dzp-badge-hexagon {
    width: 64px;
    height: 64px;
  }

  .dzp-badge-inner {
    width: 58px;
    height: 58px;
    font-size: 24px;
  }

  .dzp-title-prefix {
    font-size: 14px;
  }

  .dzp-title-main {
    font-size: 28px;
  }

  .dzp-timer-value {
    font-size: 36px;
    padding: 10px 14px;
    min-width: 70px;
  }

  .dzp-timer-unit {
    min-width: 65px;
  }

  .dzp-timer-extended .dzp-timer-value {
    font-size: 28px;
    padding: 8px 12px;
    min-width: 60px;
  }

  .dzp-timer-extended .dzp-timer-unit {
    min-width: 55px;
  }

  .dzp-timer-separator {
    font-size: 28px;
  }

  .dzp-btn {
    padding: 12px 24px;
    font-size: 13px;
  }
}

@media (max-width: 480px) {
  .admin-access-warning-overlay {
    padding: 12px;
  }

  .dzp-modal-content {
    padding: 28px 20px;
  }

  .dzp-title-main {
    font-size: 24px;
  }

  .dzp-timer {
    gap: 4px;
  }

  .dzp-timer-unit {
    min-width: 55px;
  }

  .dzp-timer-value {
    font-size: 28px;
    padding: 8px 10px;
    min-width: 60px;
  }

  .dzp-timer-extended .dzp-timer-value {
    font-size: 22px;
    padding: 6px 8px;
    min-width: 50px;
  }

  .dzp-timer-extended .dzp-timer-unit {
    min-width: 48px;
  }

  .dzp-consequence {
    gap: 12px;
    padding: 12px;
  }

  .dzp-consequence-marker {
    width: 28px;
    height: 28px;
    font-size: 12px;
  }

  .dzp-protocol-notice {
    flex-direction: column;
    text-align: center;
    gap: 12px;
  }
}

/* ===================================================================
   ACCESSIBILITY ENHANCEMENTS
   =================================================================== */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Focus visible for keyboard navigation */
.dzp-btn:focus-visible,
.dzp-close-btn:focus-visible {
  outline: 3px solid var(--dzp-alert-caution);
  outline-offset: 2px;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .dzp-modal-container {
    border-width: 3px;
  }

  .dzp-alert-level,
  .dzp-protocol-notice,
  .dzp-consequence {
    border-width: 2px;
  }
}

/* Screen reader only content */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* ===================================================================
   LOCATION BLOCK MODAL - JAMAICA-ONLY ENFORCEMENT
   =================================================================== */

/* Location Badge - Different from Strike Badge */
.dzp-lockout-badge.location {
  background: linear-gradient(135deg, #0b5345 0%, #16a085 100%);
  border-color: #1abc9c;
  box-shadow: 0 4px 20px rgba(26, 188, 156, 0.3);
}

/* Alert Level - Info Style */
.dzp-alert-level.info {
  color: #3498db;
  background: rgba(52, 152, 219, 0.1);
  border-color: #3498db;
}

/* Detected Location Info */
.dzp-location-info {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--dzp-border);
  border-left: 3px solid #3498db;
  border-radius: 6px;
  margin: 16px 0;
}

.dzp-location-info i {
  color: #3498db;
  font-size: 18px;
}

.dzp-location-info span {
  color: var(--dzp-text-secondary);
  font-size: 14px;
}

/* Info Box - Browsing Allowed Notice */
.dzp-info-box {
  background: rgba(34, 197, 94, 0.05);
  border: 1px solid rgba(34, 197, 94, 0.2);
  border-left: 3px solid #22c55e;
  border-radius: 6px;
  padding: 16px;
  margin: 16px 0;
}

.dzp-info-box h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 8px 0;
  color: #22c55e;
  font-size: 16px;
  font-weight: 600;
}

.dzp-info-box h3 i {
  font-size: 18px;
}

.dzp-info-box p {
  margin: 0;
  color: var(--dzp-text-secondary);
  font-size: 14px;
  line-height: 1.6;
}

/* Jamaica Flag */
.dzp-jamaica-flag {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  margin: 20px 0;
  font-family: 'Source Sans Pro', sans-serif;
  font-size: 24px;
  font-weight: 900;
  letter-spacing: 2px;
}

.dzp-jamaica-flag .flag-green {
  background: linear-gradient(135deg, #009B3A 0%, #00FF7F 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  padding: 0 4px;
}

.dzp-jamaica-flag .flag-yellow {
  background: linear-gradient(135deg, #FCD116 0%, #FFD700 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  padding: 0 4px;
}

.dzp-jamaica-flag .flag-black {
  background: linear-gradient(135deg, #000000 0%, #333333 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  padding: 0 4px;
}

.dzp-jamaica-flag .flag-text {
  margin-left: 12px;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 1px;
  color: var(--dzp-text-muted);
}

/* Continue Browsing Button */
.dzp-btn-continue-browsing {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 14px 24px;
  background: linear-gradient(135deg, #16a085 0%, #1abc9c 100%);
  color: #ffffff;
  font-size: 16px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  border: 2px solid #1abc9c;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.dzp-btn-continue-browsing:hover {
  background: linear-gradient(135deg, #1abc9c 0%, #2ecc71 100%);
  border-color: #2ecc71;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(26, 188, 156, 0.4);
}

.dzp-btn-continue-browsing i {
  font-size: 18px;
}

/* ===================================================================
   LOCATION BLOCK MODAL SPECIFIC STYLING
   DZP Professional Design - Green/Black/Gold (Jamaica Theme)
   Date: 2026-02-04
   Updated: 2026-02-04 (Professional consistency with Strike 2 structure)
   Designer: Nobara Kugisaki
   =================================================================== */

.location-block-modal .dzp-modal-container {
  max-width: 540px;
}

/* Hexagon Badge with Glow - Jamaica Gold Theme - Professional Large Size */
.location-block-modal .dzp-badge-container.location-badge {
  width: 120px;
  height: 120px;
  margin: 0 auto 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.location-block-modal .dzp-hexagon-badge {
  position: relative;
  width: 120px;
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.location-block-modal .dzp-hexagon-badge .hexagon-glow {
  position: absolute;
  width: 160px;
  height: 160px;
  background: radial-gradient(circle, var(--location-glow) 0%, transparent 70%);
  animation: glowPulse 2s ease-in-out infinite;
  z-index: 1;
}

.location-block-modal .dzp-hexagon-badge .hexagon-shape {
  position: relative;
  width: 120px;
  height: 120px;
  background: linear-gradient(135deg, var(--location-gold) 0%, var(--location-gold-dark) 100%);
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 48px;
  color: #000000;
  animation: hexagonPulse 3s ease-in-out infinite;
  z-index: 2;
  border: 3px solid var(--location-gold);
}

/* Status Badge - Green Professional Style - Enhanced */
.location-block-modal .dzp-alert-level[data-level="boundary"] {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 20px;
  background: rgba(0, 179, 71, 0.15);
  border: 2px solid var(--location-green);
  border-radius: 24px;
  margin-bottom: 24px;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  animation: levelPulseLockout 2s ease-in-out infinite;
}

.location-block-modal .dzp-alert-level[data-level="boundary"] i {
  color: var(--location-green);
  font-size: 13px;
}

.location-block-modal .dzp-alert-level[data-level="boundary"] span {
  color: var(--location-green);
  font-weight: 700;
}

/* Info Box - Professional Green/Gold Styling - Enhanced Spacing */
.location-block-modal .dzp-info-box {
  background: linear-gradient(135deg, rgba(0, 179, 71, 0.08) 0%, rgba(0, 128, 48, 0.08) 100%);
  border: 1px solid rgba(0, 179, 71, 0.3);
  border-left: 4px solid var(--location-green);
  border-radius: 8px;
  padding: 20px 24px;
  margin: 24px 0;
  box-shadow: 0 4px 12px rgba(0, 179, 71, 0.1);
}

.location-block-modal .dzp-info-box h3 {
  color: var(--location-gold);
  font-weight: 700;
  font-size: 14px;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.location-block-modal .dzp-info-box h3 i {
  color: var(--location-gold);
  font-size: 18px;
}

.location-block-modal .dzp-info-box p {
  color: rgba(255, 255, 255, 0.85);
  font-size: 14px;
  line-height: 1.7;
  margin: 0;
}

/* Continue Browsing Button - Professional Green */
.location-block-modal .dzp-btn-continue-browsing {
  background: linear-gradient(135deg, var(--location-green) 0%, var(--location-green-dark) 100%);
  border: 2px solid var(--location-green);
  color: #ffffff;
  font-weight: 700;
  padding: 12px 32px;
  border-radius: 8px;
  font-size: 14px;
  letter-spacing: 1px;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.3s ease;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  justify-content: center;
  margin-top: 24px;
  box-shadow: 0 4px 16px rgba(0, 179, 71, 0.3);
}

.location-block-modal .dzp-btn-continue-browsing:hover {
  background: linear-gradient(135deg, #00d45a 0%, var(--location-green) 100%);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 179, 71, 0.5);
  border-color: #00d45a;
}

.location-block-modal .dzp-btn-continue-browsing:active {
  transform: translateY(0);
  box-shadow: 0 3px 10px rgba(0, 179, 71, 0.3);
}

.location-block-modal .dzp-btn-continue-browsing i {
  font-size: 16px;
}

/* Jamaica Flag - Professional Green/Gold Styling */
.location-block-modal .dzp-jamaica-flag {
  border: 2px solid rgba(255, 180, 0, 0.3);
  background: linear-gradient(135deg, rgba(255, 180, 0, 0.05) 0%, rgba(0, 179, 71, 0.05) 100%);
  box-shadow: 0 4px 12px rgba(0, 179, 71, 0.15);
  border-radius: 8px;
  padding: 16px;
  margin: 20px 0;
  text-align: center;
}

.location-block-modal .dzp-jamaica-flag .flag-text {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--location-gold);
  margin-top: 8px;
}

/* DZP Footer Signature - Professional Green/Gold */
.location-block-modal .dzp-footer-signature {
  border-top: 1px solid rgba(0, 179, 71, 0.2);
  padding-top: 16px;
  margin-top: 24px;
  text-align: center;
}

.location-block-modal .dzp-footer-signature i {
  color: var(--location-green);
  font-size: 12px;
  margin-right: 6px;
}

.location-block-modal .dzp-footer-signature small {
  color: rgba(255, 255, 255, 0.6);
  font-size: 11px;
  letter-spacing: 0.5px;
}