/* El Shideed — Bundled CSS (auto-generated) */
/* Generated: 2026-10-12 21:42:27 */

/* ═══ mobile-fixes.css ═══ */
/* ============================================================
   El Shideed — Mobile Responsive Fixes v4 (Marquee-proof)
   ============================================================ */

/* ─── 1) HARD CLAMP: both html AND body ─── */
html {
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: hidden !important;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  position: relative;
}
body {
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: hidden !important;
  position: relative;
}

/* ─── 2) KILL THE MARQUEE OVERFLOW (the real culprit) ─── */
/* Any element that clips AND contains a transformed child needs
   position:relative + contain:paint to properly clip on mobile. */

section:has(.animate-marquee),
section:has(.marquee-container),
.marquee-container,
.overflow-hidden:has(.animate-marquee) {
  position: relative !important;
  overflow: hidden !important;
  width: 100% !important;
  max-width: 100vw !important;
  contain: layout paint !important;
}

/* Belt-and-suspenders: all .overflow-hidden elements get containment */
.overflow-hidden {
  position: relative;
  contain: paint;
}

/* The marquee itself: prevent it from contributing to document width */
.animate-marquee {
  will-change: transform;
  backface-visibility: hidden;
  transform: translateZ(0);
}

/* ─── 3) Mobile-specific: safer marquee on small screens ─── */
@media (max-width: 767px) {
  /* Option A: keep but constrain */
  .animate-marquee {
    /* Limit speed and keep within bounds */
    max-width: none;
  }
  /* If the marquee still causes issues, uncomment to hide it: */
  /*
  section:has(.animate-marquee),
  section:has(.marquee-container) {
    display: none !important;
  }
  */
}

/* ─── 4) Hero 100vh → dvh ─── */
.hero-viewport {
  min-height: calc(100vh  - 80px);
  min-height: calc(100svh - 80px);
  min-height: calc(100dvh - 80px);
}
@supports (height: 100dvh) {
  .hero-viewport { min-height: calc(100dvh - 80px); }
}
@media (max-width: 767px) {
  .hero-viewport { min-height: auto !important; padding-top: 1rem !important; }
}

/* ─── 5) Safe-area insets ─── */
#waFabWrap {
  bottom: calc(16px + env(safe-area-inset-bottom, 0px)) !important;
  right:  calc(16px + env(safe-area-inset-right,  0px)) !important;
}
#scrollToTopBtn {
  bottom: calc(88px + env(safe-area-inset-bottom, 0px)) !important;
  right:  calc(16px + env(safe-area-inset-right,  0px)) !important;
}

/* ─── 6) iOS zoom prevention ─── */
@media (max-width: 767px) {
  input, select, textarea { font-size: 16px !important; }
}

/* ─── 7) Typography clamping ─── */
@media (max-width: 640px) {
  h1 { font-size: clamp(1.5rem, 6.5vw, 2rem) !important; line-height: 1.2 !important; }
  h2 { font-size: clamp(1.25rem, 5vw, 1.75rem) !important; }
  h3 { font-size: clamp(1rem, 4vw, 1.25rem) !important; }
  .text-\[10px\] { font-size: 11px !important; }
  .text-\[11px\] { font-size: 12px !important; }
}

/* ─── 8) Section padding ─── */
@media (max-width: 767px) {
  section[id]:not(#home) { padding-top: 3rem !important; padding-bottom: 3rem !important; }
  .container {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
    max-width: 100% !important;
    width: 100% !important;
  }
  h1, h2, h3, h4, p, li, span {
    overflow-wrap: break-word;
    word-break: break-word;
  }
}

/* ─── 9) Grid safety ─── */
@media (max-width: 400px) {
  .grid.grid-cols-2 { grid-template-columns: 1fr 1fr !important; }
  .hero-viewport .w-72.h-72 { width: 15rem !important; height: 15rem !important; }
}

/* ─── 10) Universal safety net ─── */
*, *::before, *::after { box-sizing: border-box; }
img, video, iframe, svg, canvas {
  max-width: 100% !important;
  height: auto;
}

/* ─── 11) RTL base ─── */
[dir="rtl"] { overflow-x: hidden !important; }

/* ─── 12) A11y ─── */
:focus-visible { outline: 2px solid #D4AF37; outline-offset: 2px; }

/* ═══ navbar.css ═══ */
/* ============================================================
   El Shideed — Collapsible Navbar
   ============================================================ */

/* ─── Section container ─── */
.nav-section {
  margin-bottom: 6px;
  border-radius: 14px;
  overflow: hidden;
  background: rgba(8, 18, 38, 0.3);
  border: 1px solid transparent;
  transition: border-color .3s ease, background .3s ease;
}
.nav-section.is-active {
  border-color: rgba(212, 175, 55, 0.25);
  background: rgba(8, 18, 38, 0.55);
}
.nav-section.is-open {
  background: rgba(8, 18, 38, 0.65);
}

/* ─── Section header (clickable) ─── */
.nav-section-header {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 14px;
  background: transparent;
  border: 0;
  color: #F0F5FF;
  font-size: 13.5px;
  font-weight: 800;
  cursor: pointer;
  text-align: right;
  transition: background .2s ease;
  -webkit-tap-highlight-color: transparent;
  font-family: inherit;
}
.nav-section-header:hover,
.nav-section-header:focus-visible {
  background: rgba(212, 175, 55, 0.06);
  outline: none;
}

.nav-section-icon {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  background: rgba(18, 38, 70, 0.7);
  border: 1px solid rgba(18, 38, 70, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #D4AF37;
  font-size: 12px;
  flex-shrink: 0;
  transition: all .25s ease;
}
.nav-section.is-active .nav-section-icon,
.nav-section.is-open .nav-section-icon {
  background: rgba(212, 175, 55, 0.15);
  border-color: rgba(212, 175, 55, 0.35);
  color: #F1D279;
}
.nav-section-label {
  flex: 1;
  min-width: 0;
  text-align: right;
}
.nav-section-badge {
  background: rgba(212, 175, 55, 0.15);
  color: #D4AF37;
  font-size: 10px;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 8px;
  flex-shrink: 0;
}
.nav-section-chev {
  color: rgba(161, 177, 204, 0.5);
  font-size: 11px;
  transition: transform .35s cubic-bezier(0.16, 1, 0.3, 1), color .25s ease;
  flex-shrink: 0;
}
.nav-section.is-open .nav-section-chev {
  transform: rotate(-90deg);
  color: #D4AF37;
}

/* ─── Section body (collapsible) ─── */
.nav-section-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height .45s cubic-bezier(0.16, 1, 0.3, 1);
}
.nav-section.is-open .nav-section-body {
  max-height: 800px;
}
.nav-section-body-inner {
  padding: 2px 8px 10px;
}

/* ─── Individual link ─── */
.nav-link-item {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 12px;
  border-radius: 10px;
  color: #A1B1CC;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition: all .2s ease;
  -webkit-tap-highlight-color: transparent;
  position: relative;
}
.nav-link-item:hover,
.nav-link-item:focus-visible {
  background: rgba(212, 175, 55, 0.08);
  color: #F0F5FF;
  outline: none;
}
.nav-link-item.is-active {
  background: linear-gradient(90deg, rgba(212, 175, 55, 0.16), rgba(212, 175, 55, 0.02));
  color: #D4AF37;
  font-weight: 800;
}
.nav-link-item.is-active::before {
  content: '';
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 60%;
  background: #D4AF37;
  border-radius: 3px 0 0 3px;
  box-shadow: 0 0 10px rgba(212, 175, 55, 0.55);
}
.nav-link-item-icon {
  width: 26px;
  height: 26px;
  border-radius: 7px;
  background: rgba(18, 38, 70, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  color: #A1B1CC;
  flex-shrink: 0;
  transition: all .2s ease;
}
.nav-link-item.is-active .nav-link-item-icon,
.nav-link-item:hover .nav-link-item-icon {
  background: rgba(212, 175, 55, 0.15);
  color: #D4AF37;
}
.nav-link-item-text {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.nav-link-item-chev {
  color: rgba(161, 177, 204, 0.35);
  font-size: 10px;
  transition: transform .2s ease, color .2s ease;
  flex-shrink: 0;
}
.nav-link-item:hover .nav-link-item-chev {
  color: #D4AF37;
  transform: translateX(-3px);
}

/* ─── Quick actions at top ─── */
.nav-quick-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(18, 38, 70, 0.6);
}

/* ─── Admin logout row ─── */
.nav-user-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: rgba(18, 38, 70, 0.4);
  border-radius: 12px;
  margin: 12px 12px 0;
  border: 1px solid rgba(18, 38, 70, 0.8);
}
.nav-user-avatar {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: linear-gradient(135deg, #D4AF37, #F1D279);
  color: #030811;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 13px;
  flex-shrink: 0;
}
.nav-user-info { flex: 1; min-width: 0; }
.nav-user-info strong {
  display: block;
  color: #F0F5FF;
  font-size: 12.5px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.nav-user-info span {
  display: block;
  color: #A1B1CC;
  font-size: 10.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.nav-user-logout {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  background: rgba(220, 38, 38, 0.15);
  color: #f87171;
  border: 1px solid rgba(220, 38, 38, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  text-decoration: none;
  transition: all .2s ease;
  flex-shrink: 0;
}
.nav-user-logout:hover,
.nav-user-logout:active {
  background: #dc2626;
  color: #fff;
}

/* ═══ mobile-menu.css ═══ */
/* ============================================================
   El Shideed — Professional Mobile Menu
   ============================================================ */

/* ─── Backdrop overlay ─── */
.mm-overlay {
  position: fixed;
  inset: 0;
  z-index: 999;
  background: rgba(3, 8, 17, 0.72);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
  opacity: 0;
  visibility: hidden;
  transition: opacity .35s ease, visibility .35s ease;
}
.mm-overlay.mm-open {
  opacity: 1;
  visibility: visible;
}

/* ─── Drawer ─── */
.mm-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 88%;
  max-width: 380px;
  background: linear-gradient(180deg, #081226 0%, #030811 100%);
  border-left: 1px solid rgba(212, 175, 55, 0.18);
  box-shadow: -20px 0 60px rgba(0, 0, 0, 0.55);
  display: flex;
  flex-direction: column;
  transform: translateX(102%);
  transition: transform .42s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
  z-index: 1000;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.mm-drawer.mm-open {
  transform: translateX(0);
}

/* ─── Header (logo + close) ─── */
.mm-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px;
  border-bottom: 1px solid rgba(18, 38, 70, 0.6);
  background: rgba(8, 18, 38, 0.5);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  flex-shrink: 0;
}
.mm-head-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}
.mm-head-brand img,
.mm-head-brand .brand-fallback {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  border: 1px solid rgba(212, 175, 55, 0.25);
  background: #081226;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #D4AF37;
  font-size: 18px;
  flex-shrink: 0;
}
.mm-head-brand img { object-fit: contain; padding: 6px; }
.mm-head-brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}
.mm-head-brand-text strong {
  color: #F0F5FF;
  font-size: 15px;
  font-weight: 800;
}
.mm-head-brand-text span {
  color: #D4AF37;
  font-size: 9px;
  letter-spacing: 3px;
  font-weight: 700;
  margin-top: 3px;
}

.mm-close {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: rgba(18, 38, 70, 0.6);
  border: 1px solid rgba(18, 38, 70, 0.8);
  color: #F0F5FF;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  cursor: pointer;
  transition: all .2s ease;
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
}
.mm-close:active {
  transform: scale(0.94);
  background: rgba(212, 175, 55, 0.2);
  color: #D4AF37;
}

/* ─── Quick actions (call + whatsapp) ─── */
.mm-quick {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(18, 38, 70, 0.6);
  flex-shrink: 0;
}
.mm-quick a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 10px;
  border-radius: 12px;
  font-size: 12.5px;
  font-weight: 800;
  text-decoration: none;
  transition: all .2s ease;
  -webkit-tap-highlight-color: transparent;
}
.mm-quick a:active { transform: scale(0.97); }
.mm-quick-call {
  background: linear-gradient(135deg, #D4AF37, #F1D279);
  color: #030811;
  box-shadow: 0 6px 18px rgba(212, 175, 55, 0.25);
}
.mm-quick-wa {
  background: rgba(34, 197, 94, 0.12);
  color: #4ade80;
  border: 1px solid rgba(34, 197, 94, 0.35);
}
.mm-quick i { font-size: 14px; }

/* ─── Nav list (scrollable) ─── */
.mm-nav {
  flex: 1 1 auto;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: 12px 12px 8px;
  scrollbar-width: thin;
  scrollbar-color: rgba(212, 175, 55, 0.35) transparent;
}
.mm-nav::-webkit-scrollbar { width: 4px; }
.mm-nav::-webkit-scrollbar-thumb {
  background: rgba(212, 175, 55, 0.35);
  border-radius: 4px;
}

/* Section label */
.mm-section {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 10px 6px;
  color: rgba(161, 177, 204, 0.55);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 2.5px;
  text-transform: uppercase;
}
.mm-section::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(to left, transparent, rgba(212, 175, 55, 0.25));
}

/* Nav links */
.mm-link {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 13px 14px;
  border-radius: 12px;
  color: #F0F5FF;
  font-size: 14.5px;
  font-weight: 700;
  text-decoration: none;
  transition: all .22s ease;
  position: relative;
  -webkit-tap-highlight-color: transparent;
  opacity: 0;
  transform: translateX(24px);
}
.mm-drawer.mm-open .mm-link {
  animation: mmSlideIn .5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.mm-drawer.mm-open .mm-link:nth-child(1) { animation-delay: .08s; }
.mm-drawer.mm-open .mm-link:nth-child(2) { animation-delay: .12s; }
.mm-drawer.mm-open .mm-link:nth-child(3) { animation-delay: .16s; }
.mm-drawer.mm-open .mm-link:nth-child(4) { animation-delay: .20s; }
.mm-drawer.mm-open .mm-link:nth-child(5) { animation-delay: .24s; }
.mm-drawer.mm-open .mm-link:nth-child(6) { animation-delay: .28s; }
.mm-drawer.mm-open .mm-link:nth-child(7) { animation-delay: .32s; }
.mm-drawer.mm-open .mm-link:nth-child(8) { animation-delay: .36s; }
.mm-drawer.mm-open .mm-link:nth-child(9) { animation-delay: .40s; }
.mm-drawer.mm-open .mm-link:nth-child(10) { animation-delay: .44s; }

@keyframes mmSlideIn {
  to { opacity: 1; transform: translateX(0); }
}

.mm-link:active,
.mm-link.mm-active {
  background: linear-gradient(90deg, rgba(212, 175, 55, 0.14), rgba(212, 175, 55, 0.03));
}
.mm-link.mm-active {
  color: #D4AF37;
}
.mm-link.mm-active::before {
  content: '';
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 60%;
  background: #D4AF37;
  border-radius: 3px 0 0 3px;
  box-shadow: 0 0 12px rgba(212, 175, 55, 0.6);
}

.mm-link-icon {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: rgba(18, 38, 70, 0.7);
  border: 1px solid rgba(18, 38, 70, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #D4AF37;
  font-size: 13px;
  flex-shrink: 0;
  transition: all .22s ease;
}
.mm-link.mm-active .mm-link-icon,
.mm-link:active .mm-link-icon {
  background: rgba(212, 175, 55, 0.15);
  border-color: rgba(212, 175, 55, 0.4);
}

.mm-link-text {
  flex: 1;
  min-width: 0;
}
.mm-link-chev {
  color: rgba(161, 177, 204, 0.35);
  font-size: 11px;
  transition: transform .22s ease, color .22s ease;
  flex-shrink: 0;
}
.mm-link:active .mm-link-chev {
  color: #D4AF37;
  transform: translateX(-3px);
}

/* Contact info in nav */
.mm-contact {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  border-radius: 12px;
  background: rgba(8, 18, 38, 0.5);
  border: 1px solid rgba(18, 38, 70, 0.7);
  text-decoration: none;
  margin: 4px 0;
  transition: all .2s ease;
  -webkit-tap-highlight-color: transparent;
}
.mm-contact:active {
  border-color: rgba(212, 175, 55, 0.4);
  background: rgba(8, 18, 38, 0.8);
}
.mm-contact-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  flex-shrink: 0;
}
.mm-contact-icon.green {
  background: rgba(34, 197, 94, 0.15);
  color: #4ade80;
}
.mm-contact-icon.gold {
  background: rgba(212, 175, 55, 0.15);
  color: #D4AF37;
}
.mm-contact-info {
  flex: 1;
  min-width: 0;
  line-height: 1.3;
}
.mm-contact-info strong {
  display: block;
  color: #F0F5FF;
  font-size: 12.5px;
  font-weight: 800;
  margin-bottom: 2px;
}
.mm-contact-info span {
  display: block;
  color: #D4AF37;
  font-size: 11px;
  font-family: ui-monospace, monospace;
  direction: ltr;
  text-align: right;
  letter-spacing: 0.3px;
}

/* ─── Footer (social + copyright) ─── */
.mm-foot {
  padding: 14px 16px;
  border-top: 1px solid rgba(18, 38, 70, 0.6);
  background: rgba(2, 5, 11, 0.6);
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.mm-socials {
  display: flex;
  justify-content: center;
  gap: 10px;
}
.mm-socials a {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: rgba(18, 38, 70, 0.6);
  border: 1px solid rgba(18, 38, 70, 0.9);
  color: #D4AF37;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  text-decoration: none;
  transition: all .2s ease;
  -webkit-tap-highlight-color: transparent;
}
.mm-socials a:active {
  background: #D4AF37;
  color: #030811;
  transform: scale(0.94);
}
.mm-copy {
  text-align: center;
  color: rgba(161, 177, 204, 0.5);
  font-size: 10.5px;
  letter-spacing: 0.3px;
}

/* ─── Body scroll lock ─── */
body.mm-locked {
  overflow: hidden !important;
  position: fixed !important;
  width: 100% !important;
  /* Compensate for scrollbar loss on desktop */
  left: 0;
  right: 0;
}

/* ─── Hide old menu remnants ─── */
#mobileMenuOverlay,
#mobileMenuContent {
  display: none !important;
}

/* ─── Small phones ─── */
@media (max-width: 360px) {
  .mm-drawer { width: 92%; }
  .mm-link { font-size: 14px; padding: 12px 12px; }
  .mm-link-icon { width: 32px; height: 32px; }
}

/* ═══ password-ui.css ═══ */
/* ============================================================
   El Shideed — Password & Auth UI
   ============================================================ */

.pw-wrap { position: relative; }
.pw-wrap input { padding-left: 3rem; }

.pw-toggle {
  position: absolute;
  top: 50%;
  left: 0.75rem;
  transform: translateY(-50%);
  width: 2.25rem;
  height: 2.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  color: #A1B1CC;
  cursor: pointer;
  border-radius: 0.5rem;
  transition: color .2s ease, background .2s ease;
  -webkit-tap-highlight-color: transparent;
  padding: 0;
}
.pw-toggle:hover { color: #D4AF37; }
.pw-toggle:active { background: rgba(212,175,55,0.1); }
.pw-toggle i { font-size: 0.95rem; }

/* Strength meter */
.pw-strength-wrap { margin-top: 0.75rem; }
.pw-meter {
  height: 6px;
  background: rgba(18,38,70,0.8);
  border-radius: 6px;
  overflow: hidden;
}
.pw-meter-bar {
  height: 100%;
  width: 0;
  background: #dc2626;
  transition: width .3s ease, background .3s ease;
  border-radius: 6px;
}
.pw-meter-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 0.4rem;
  font-size: 0.7rem;
  color: #A1B1CC;
}
.pw-meter-label {
  font-weight: 700;
  transition: color .3s ease;
}

/* Requirements checklist */
.pw-checks {
  margin-top: 0.6rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.3rem 0.75rem;
  font-size: 0.7rem;
}
.pw-check {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  color: #A1B1CC;
  transition: color .2s ease;
}
.pw-check i {
  font-size: 0.7rem;
  transition: color .2s ease;
}
.pw-check.pw-check-ok { color: #22c55e; }
.pw-check.pw-check-ok i { color: #22c55e; }
.pw-check.pw-check-no i { color: #6b7280; }

/* Match hint */
.pw-match-hint {
  display: block;
  margin-top: 0.4rem;
  font-size: 0.72rem;
  font-weight: 600;
  min-height: 1em;
  transition: color .2s ease;
}

/* Mobile tweaks */
@media (max-width: 480px) {
  .pw-checks { grid-template-columns: 1fr; }
  .pw-toggle { width: 2.5rem; height: 2.5rem; }
}

/* ═══ a11y.css ═══ */
/* ═══════════════════════════════════════════════════════════
   Accessibility Fixes
   ═══════════════════════════════════════════════════════════ */

/* ─── Contrast fixes (WCAG AA 4.5:1) ─── */
.text-darkText { color: #C5D0E3 !important; }
.text-darkText\/60 { color: #A8B4C7 !important; }
.text-darkText\/40 { color: #8B96A8 !important; }
.text-darkText\/50 { color: #9BA8BE !important; }

/* Tech marquee — increase contrast significantly */
.font-mono.text-darkText\/40,
span[class*="text-darkText\/40"] {
  color: #B0BCCF !important;
}

/* Phone numbers + small text */
a[href^="tel:"] span,
a[href^="tel:"] .font-mono {
  color: #F0F5FF !important;
}

/* Footer bottom text */
footer p[class*="text-darkText\/60"],
footer span[class*="text-darkText\/60"] {
  color: #B8C4D6 !important;
}

/* Package note */
p[class*="text-darkText\/60"] {
  color: #B0BCCF !important;
}

/* ─── Focus indicators (visible) ─── */
:focus-visible {
  outline: 3px solid #D4AF37 !important;
  outline-offset: 3px !important;
  border-radius: 6px;
}
button:focus-visible, a:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid #D4AF37 !important;
  outline-offset: 3px !important;
}

/* ─── Touch targets (min 44px) ─── */
@media (hover: none) and (pointer: coarse) {
  button,
  a[role="button"],
  input[type="submit"],
  input[type="checkbox"],
  input[type="radio"],
  select {
    min-height: 44px;
  }
  /* Icon buttons — ensure 44px hit area */
  button[class*="w-8"], button[class*="w-9"], button[class*="w-10"],
  a[class*="w-8"], a[class*="w-9"], a[class*="w-10"] {
    min-width: 44px;
    min-height: 44px;
  }
  /* Increase padding around small clickable icons */
  .copy-btn { min-width: 44px !important; min-height: 44px !important; }
}

/* ─── Screen reader only ─── */
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
.sr-only-focusable:focus,
.sr-only-focusable:active {
  position: static !important;
  width: auto !important;
  height: auto !important;
  padding: inherit !important;
  margin: inherit !important;
  overflow: visible !important;
  clip: auto !important;
  white-space: normal !important;
}

/* ─── Form labels visible ─── */
label[for], .form-label {
  color: #E0E8F5 !important;
  font-weight: 600;
}

/* ─── Select/dropdown readable ─── */
select option {
  background: #081226;
  color: #F0F5FF;
  padding: 8px;
}

/* ─── Checkbox larger for touch ─── */
input[type="checkbox"] {
  width: 20px;
  height: 20px;
  cursor: pointer;
}

/* ─── Prevent automatic zoom in iOS ─── */
@media (max-width: 767px) {
  input, select, textarea { font-size: 16px !important; }
}

/* ─── Semantic landmarks — visual only ─── */
main { display: block; }
nav { display: block; }
aside { display: block; }

/* ─── Mobile menu — remove role conflicts ─── */
.mm-drawer[role="dialog"] {
  /* keeps dialog semantics but adds landmark fallback */
}