/* ==========================================================================
   True Black OLED (#000000) & Apple HIG Design Tokens
   Styles for user_login.html
   ========================================================================== */

:root, [data-theme="black"], [data-theme="dark"], body {
  --bg-canvas: #000000 !important;
  --bg-base: #030304 !important;
  --bg-surface: #070709 !important;
  --bg-surface-elevated: #0d0d10 !important;
  --card-bg: rgba(14, 14, 18, 0.72) !important;
  --card-bg-hover: rgba(22, 22, 28, 0.85) !important;
  --card-bg-active: rgba(30, 30, 38, 0.95) !important;
  --card-bg-selected: rgba(38, 38, 48, 0.98) !important;
  --border-subtle: rgba(255, 255, 255, 0.08) !important;
  --border-medium: rgba(255, 255, 255, 0.15) !important;
  --border-active: rgba(255, 255, 255, 0.28) !important;
  --border-glow: rgba(99, 102, 241, 0.4) !important;
  --text-primary: #f5f5f7 !important;
  --text-secondary: #a1a1a6 !important;
  --text-tertiary: #71717a !important;
  --text-muted: #52525b !important;
  --shadow-card: 0 10px 30px -10px rgba(0, 0, 0, 0.9), 0 0 1px 1px rgba(255, 255, 255, 0.08);
  --shadow-card-hover: 0 20px 40px -15px rgba(0, 0, 0, 0.95), 0 0 1px 1px rgba(255, 255, 255, 0.15);
  --backdrop-blur: blur(20px) saturate(190%);

  color-scheme: dark;
  --bg: #000000;
  --panel: rgba(17, 17, 21, 0.9);
  --line: rgba(255, 255, 255, 0.1);
  --text: #ffffff;
  --muted: #a1a1aa;
  --accent: #ffffff;
  --accent-strong: #e4e4e7;
  --cyan: #ffffff;
  font-family: 'Vazirmatn', -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", sans-serif;
}

button, a, input, .google-button {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
button:active, a:active, .primary-button:active, .secondary-button:active, .google-button:active {
  transform: scale(0.98) !important;
  transition: transform 0.08s ease !important;
}

* { box-sizing: border-box; }
html { min-height: 100%; background: #000000 !important; -webkit-text-size-adjust: 100%; }
body { margin: 0; min-height: 100vh; min-height: 100svh; min-height: 100dvh; overflow-x: hidden; background: #000000 !important; }
body.auth-page {
  position: relative;
  display: grid;
  place-items: center;
  padding: max(22px, env(safe-area-inset-top)) max(18px, env(safe-area-inset-right)) max(22px, env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left));
  color: var(--text-primary);
  background: #000000 !important;
  -webkit-font-smoothing: antialiased;
}

.ambient, .ambient-one, .ambient-two {
  display: none !important;
}

.auth-shell {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(280px, .88fr) minmax(390px, 1.12fr);
  width: min(100%, 1000px);
  min-height: 650px;
  overflow: hidden;
  background: var(--card-bg);
  border: 1px solid var(--border-subtle);
  border-radius: 28px;
  box-shadow: var(--shadow-card);
  -webkit-backdrop-filter: var(--backdrop-blur);
  backdrop-filter: var(--backdrop-blur);
}

.brand-panel {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 48px 42px;
  background: #09090b;
  border-left: 1px solid var(--border-subtle);
}

.brand-lockup { display: flex; align-items: center; gap: 11px; direction: ltr; }
.brand-mark {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 13px;
  color: #000000;
  background: #ffffff;
  font-size: 1.25rem;
  font-weight: 850;
  box-shadow: none;
}
.brand-logo-image { padding: 4px; object-fit: contain; background: #fff; }
.brand-name { color: #fff; font-size: 1.18rem; font-weight: 800; letter-spacing: -.04em; }
.brand-copy { margin-top: auto; margin-bottom: auto; padding: 72px 0 42px; }
.eyebrow, .heading-kicker { display: block; color: var(--text-secondary); font-size: .67rem; font-weight: 800; letter-spacing: .18em; }
.brand-copy h1 { margin: 15px 0 18px; color: #fff; font-size: clamp(2.3rem, 4vw, 3.55rem); line-height: 1.12; letter-spacing: -.07em; }
.brand-copy h1 em { color: #ffffff; font-style: normal; text-decoration: underline; text-underline-offset: 4px; }
.brand-copy p { max-width: 280px; margin: 0; color: var(--text-secondary); font-size: .92rem; line-height: 2; }
.feature-list { display: grid; gap: 15px; color: var(--text-secondary); font-size: .8rem; }
.feature-item { display: flex; align-items: center; gap: 11px; }
.feature-icon {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 1px solid var(--border-subtle);
  border-radius: 9px;
  color: #ffffff;
  background: rgba(255, 255, 255, .06);
  font-size: 1rem;
}
.brand-footer, .form-footer { color: var(--text-tertiary); font-size: .7rem; }
.status-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-left: 6px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, .15);
}

.form-panel {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: min(100%, 440px);
  margin: 0 auto;
  padding: 48px 54px;
}
.mobile-brand { display: none; }
.form-heading { margin-bottom: 29px; }
.form-heading h2 { margin: 9px 0 7px; color: var(--text-primary); font-size: clamp(1.65rem, 3vw, 2.05rem); letter-spacing: -.055em; }
.form-heading p { margin: 0; color: var(--text-secondary); font-size: .82rem; line-height: 1.8; }

.notice {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: -8px 0 18px;
  padding: 11px 13px;
  border: 1px solid;
  border-radius: 13px;
  font-size: .76rem;
  line-height: 1.7;
}
.notice-icon {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  font-size: .7rem;
  font-weight: 800;
}
.notice.error { border-color: rgba(255, 255, 255, .2); color: #ffffff; background: rgba(255, 255, 255, .06); }
.notice.error .notice-icon { color: #000000; background: #ffffff; }
.notice.ok { border-color: rgba(255, 255, 255, .2); color: #ffffff; background: rgba(255, 255, 255, .06); }
.notice.ok .notice-icon { color: #000000; background: #ffffff; }

.auth-form { display: grid; gap: 17px; }
.field { display: grid; gap: 8px; }
label { color: var(--text-secondary); font-size: .76rem; font-weight: 650; }
.label-hint { margin-right: 5px; color: var(--text-tertiary); font-size: .67rem; font-weight: 400; }

input, button, .google-button {
  width: 100%;
  min-height: 52px;
  border-radius: 14px;
  font: inherit;
  -webkit-tap-highlight-color: transparent;
}

input {
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid var(--border-subtle);
  outline: 0;
  padding: 0 15px;
  color: var(--text-primary);
  background: var(--bg-surface);
  font-size: .84rem;
  transition: border-color .22s ease, box-shadow .22s ease, background-color .22s ease;
}
input::placeholder { color: var(--text-tertiary); }
input:focus {
  border-color: #ffffff;
  background: var(--bg-surface-elevated);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, .2);
}

button { appearance: none; -webkit-appearance: none; border: 0; cursor: pointer; }
.primary-button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 17px 0 20px;
  color: #000000;
  background: #ffffff;
  font-size: .86rem;
  font-weight: 750;
  box-shadow: none;
  border-radius: 16px;
  transition: transform 0.22s ease, background-color 0.22s ease;
}
.primary-button span:last-child { direction: ltr; font-size: 1.2rem; transition: transform .22s ease; }
.secondary-button {
  border: 1px solid var(--border-subtle);
  color: var(--text-secondary);
  background: var(--bg-surface);
  font-size: .78rem;
  transition: background-color 0.22s ease, border-color 0.22s ease;
}
.google-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 15px;
  border: 1px solid var(--border-subtle);
  color: var(--text-primary);
  background: var(--bg-surface);
  text-decoration: none;
  font-size: .8rem;
  font-weight: 650;
  transition: background-color 0.22s ease, border-color 0.22s ease;
}
.google-mark { color: #fff; font-family: Arial, sans-serif; font-size: 1.1rem; font-weight: 900; }
.instagram-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 15px;
  border-radius: var(--radius-sm, 16px);
  padding: 13px 18px;
  background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
  color: #ffffff !important;
  text-decoration: none;
  font-size: .8rem;
  font-weight: 700;
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s ease, box-shadow 0.2s ease;
  box-shadow: 0 4px 16px rgba(220, 39, 67, 0.25);
}
.instagram-button:hover {
  opacity: 0.95;
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(220, 39, 67, 0.35);
}
.instagram-button:active {
  transform: scale(0.98);
}
.or-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 24px;
  color: var(--text-tertiary);
  font-size: .7rem;
}
.or-divider::before, .or-divider::after { content: ""; height: 1px; flex: 1; background: var(--border-subtle); }
.switch { margin: 22px 0 0; color: var(--text-tertiary); text-align: center; font-size: .76rem; }
.switch a { color: #ffffff; text-decoration: underline; font-weight: 700; }
.form-footer { display: flex; align-items: center; justify-content: center; gap: 5px; margin-top: 34px; }
.lock-icon { color: var(--text-tertiary); font-size: .9rem; }

@media (hover: hover) {
  .primary-button:hover { background: #e4e4e7; transform: translateY(-1px); }
  .primary-button:hover span:last-child { transform: translateX(-4px); }
  .secondary-button:hover, .google-button:hover { border-color: rgba(255, 255, 255, .3); background: var(--bg-surface-elevated); }
  .switch a:hover { color: #ffffff; opacity: 0.8; }
}

@media (max-width: 760px) {
  body.auth-page { place-items: start center; }
  .auth-shell { display: block; width: min(100%, 500px); min-height: 0; border-radius: 24px; }
  .brand-panel { display: none; }
  .form-panel { width: 100%; padding: 30px max(22px, 7vw) 25px; }
  .mobile-brand { display: flex; margin-bottom: 43px; }
  .form-heading { margin-bottom: 25px; }
}

@media (max-width: 380px) {
  .form-panel { padding-right: 18px; padding-left: 18px; }
  .mobile-brand { margin-bottom: 32px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

@supports (-webkit-touch-callout: none) {
  input, button, .google-button { font-size: 16px; }
  input { min-height: 54px; }
}




/* Shared phone safeguards. This file is appended to every page stylesheet. */
@media (max-width: 700px) {
  html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }

  html, body {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-x: hidden;
  }

  img, picture, video, canvas, svg {
    max-width: 100%;
  }

  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  select,
  textarea {
    font-size: 16px !important; /* prevents Safari's focus-zoom */
  }

  button, a, input, select, textarea {
    touch-action: manipulation;
  }

  pre, code {
    max-width: 100%;
    overflow-wrap: anywhere;
  }

  pre {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .overflow-x-auto, .overflow-x-scroll, [class*="overflow-x-auto"], [class*="overflow-x-scroll"] {
    max-width: 100%;
    -webkit-overflow-scrolling: touch;
  }

  #modal-overlay > *, [role="dialog"] {
    max-width: calc(100vw - 2rem);
    max-height: calc(100dvh - 2rem);
  }
}

/* ==========================================================================
   Package B: Apple HIG & Mobile UX Refinement (PRD 1.2 / MOBILE_UX_SKILL)
   ========================================================================== */

/* 1. Touch-First Target Size & Thumb Zone Layout */
button, a, .chip, input, select, [role="button"] {
  min-height: 44px;
}

/* 2. Horizontal Snap Chips for Categories & Filters */
.mobile-chip-bar,
.category-chips,
.am-categories-grid,
.am-category-chips,
.industry-category-list,
.nexus-category-list {
  display: flex !important;
  gap: 8px !important;
  overflow-x: auto !important;
  scroll-snap-type: x mandatory !important;
  -webkit-overflow-scrolling: touch !important;
  padding: 8px 12px !important;
  scrollbar-width: none !important;
}
.mobile-chip-bar::-webkit-scrollbar,
.category-chips::-webkit-scrollbar,
.am-categories-grid::-webkit-scrollbar,
.am-category-chips::-webkit-scrollbar,
.industry-category-list::-webkit-scrollbar,
.nexus-category-list::-webkit-scrollbar {
  display: none !important;
}
.mobile-chip-bar .chip,
.mobile-chip-bar > *,
.category-chips > *,
.industry-category,
.nexus-category,
.am-category-chip,
.am-category-item {
  scroll-snap-align: start !important;
  flex-shrink: 0 !important;
  padding: 8px 16px !important;
  border-radius: 9999px !important;
  font-size: 14px !important;
  white-space: nowrap !important;
}

/* 3. Mobile Product Grid & Uniform Aspect Ratios (< 640px) */
@media (max-width: 639.98px) {
  .product-grid,
  .catalog-grid,
  .am-products-grid,
  .industry-product-grid,
  .industry-catalog-grid,
  .nexus-product-grid,
  .nexus-catalog-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    padding: 10px !important;
  }

  .product-card,
  .catalog-card,
  .am-product-card,
  .industry-product-card,
  .industry-catalog-card,
  .nexus-product-card,
  .nexus-catalog-card {
    display: flex !important;
    flex-direction: column !important;
    border-radius: 16px !important;
    overflow: hidden !important;
  }

  .product-card img,
  .catalog-image img,
  .am-product-img-container img,
  .am-product-card img,
  .industry-product-image img,
  .industry-catalog-image img,
  .nexus-product-image img,
  .nexus-catalog-image img {
    width: 100% !important;
    aspect-ratio: 1 / 1 !important;
    object-fit: cover !important;
  }

  .product-card .title,
  .catalog-copy h3,
  .catalog-card h3,
  .am-product-title,
  .industry-product-copy h3,
  .industry-catalog-copy h2,
  .nexus-product-copy h3,
  .nexus-catalog-copy h2 {
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    font-size: 13px !important;
    line-height: 1.4 !important;
    min-height: 36px !important;
  }
}

/* 4. Floating Action Buttons (FAB) Collision Fix */
@media (max-width: 639.98px) {
  .whatsapp-floating-btn,
  .whatsapp-fab,
  .support-fab,
  .direct-support-fab,
  #whatsapp-floating-btn,
  [data-fab="whatsapp"],
  .floating-contact,
  .am-fab-whatsapp {
    position: fixed !important;
    bottom: 20px !important;
    right: 20px !important;
    z-index: 998 !important;
  }

  .ai-assistant-widget,
  .ai-floating-btn,
  .ai-fab,
  #ai-assistant-bubble,
  #ai-chat-fab,
  [data-fab="ai"],
  .floating-ai-btn,
  .am-fab-ai {
    position: fixed !important;
    bottom: 85px !important;
    right: 20px !important;
    z-index: 997 !important;
  }
}

/* 5. Sticky Bottom Purchase Bar (Product Details View) */
.sticky-buy-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  background: rgba(18, 18, 24, 0.95);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  z-index: 990;
  padding-bottom: max(12px, env(safe-area-inset-bottom));
}

@media (min-width: 641px) {
  .sticky-buy-bar.mobile-only {
    display: none !important;
  }
}

/* 6. Bottom Sheet Drawer (Cart & Checkout Modal on Screens < 640px) */
@media (max-width: 640px) {
  .modal-dialog,
  .checkout-modal,
  .cart-drawer,
  .bottom-sheet,
  .modal-sheet,
  .industry-modal-card,
  .nexus-modal-card {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    border-radius: 24px 24px 0 0 !important;
    transform: translateY(0) !important;
    animation: slideUp 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
  }
}
@keyframes slideUp {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}