/* ===========================================
   glass.css — iOS 26 Subtle Glass Design System
   Shared across all public pages
   =========================================== */

/* --- Glass Variables --- */
:root {
  /* Glass backgrounds */
  --glass-bg: rgba(255, 255, 255, 0.72);
  --glass-bg-light: rgba(255, 255, 255, 0.5);
  --glass-bg-heavy: rgba(255, 255, 255, 0.85);

  /* Glass borders */
  --glass-border: rgba(255, 255, 255, 0.35);
  --glass-border-subtle: rgba(0, 0, 0, 0.06);

  /* Blur levels */
  --glass-blur-sm: 8px;
  --glass-blur-md: 16px;
  --glass-blur-lg: 24px;

  /* Glass shadows */
  --glass-shadow: 0 4px 24px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
  --glass-shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.04);
  --glass-shadow-hover: 0 8px 32px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.06);

  /* Glass glow (primary tint) */
  --glass-glow: 0 0 0 1px rgba(255, 107, 53, 0.08);
}

/* Dark mode glass */
@media (prefers-color-scheme: dark) {
  :root {
    --glass-bg: rgba(30, 30, 40, 0.72);
    --glass-bg-light: rgba(30, 30, 40, 0.5);
    --glass-bg-heavy: rgba(30, 30, 40, 0.85);
    --glass-border: rgba(255, 255, 255, 0.1);
    --glass-border-subtle: rgba(255, 255, 255, 0.05);
    --glass-shadow: 0 4px 24px rgba(0, 0, 0, 0.2), 0 1px 2px rgba(0, 0, 0, 0.15);
    --glass-shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.3), 0 2px 4px rgba(0, 0, 0, 0.2);
    --glass-shadow-hover: 0 8px 32px rgba(0, 0, 0, 0.35), 0 2px 4px rgba(0, 0, 0, 0.2);
    --glass-glow: 0 0 0 1px rgba(255, 107, 53, 0.15);
  }
}

/* --- Glass Card --- */
.glass-card {
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(var(--glass-blur-md));
  backdrop-filter: blur(var(--glass-blur-md));
  border: 1px solid var(--glass-border);
  border-radius: 16px;
  box-shadow: var(--glass-shadow);
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.glass-card:hover {
  box-shadow: var(--glass-shadow-hover);
  transform: translateY(-2px);
}

/* --- Glass Card (no hover lift) --- */
.glass-card-static {
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(var(--glass-blur-md));
  backdrop-filter: blur(var(--glass-blur-md));
  border: 1px solid var(--glass-border);
  border-radius: 16px;
  box-shadow: var(--glass-shadow);
}

/* --- Glass Header (sticky nav) --- */
.glass-header {
  background: var(--glass-bg-heavy);
  -webkit-backdrop-filter: blur(var(--glass-blur-lg));
  backdrop-filter: blur(var(--glass-blur-lg));
  border-bottom: 1px solid var(--glass-border-subtle);
  box-shadow: 0 1px 8px rgba(0, 0, 0, 0.04);
}

/* --- Glass Modal --- */
.glass-modal {
  background: var(--glass-bg-heavy);
  -webkit-backdrop-filter: blur(var(--glass-blur-lg));
  backdrop-filter: blur(var(--glass-blur-lg));
  border: 1px solid var(--glass-border);
  border-radius: 20px;
  box-shadow: var(--glass-shadow-lg);
}

/* --- Glass Toast --- */
.glass-toast {
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(var(--glass-blur-md));
  backdrop-filter: blur(var(--glass-blur-md));
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  box-shadow: var(--glass-shadow);
}

/* --- Glass Badge / Tag --- */
.glass-badge {
  background: var(--glass-bg-light);
  -webkit-backdrop-filter: blur(var(--glass-blur-sm));
  backdrop-filter: blur(var(--glass-blur-sm));
  border: 1px solid var(--glass-border);
  border-radius: 20px;
  padding: 0.25rem 0.75rem;
  font-size: 0.8rem;
  font-weight: 500;
}

/* --- Glass Input --- */
.glass-input {
  background: var(--glass-bg-light);
  -webkit-backdrop-filter: blur(var(--glass-blur-sm));
  backdrop-filter: blur(var(--glass-blur-sm));
  border: 1px solid var(--glass-border-subtle);
  border-radius: 12px;
  padding: 0.75rem 1rem;
  font-size: 0.95rem;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.glass-input:focus {
  outline: none;
  border-color: rgba(255, 107, 53, 0.4);
  box-shadow: var(--glass-glow);
}

/* --- Glass Section (full-width background) --- */
.glass-section {
  background: var(--glass-bg-light);
  -webkit-backdrop-filter: blur(var(--glass-blur-sm));
  backdrop-filter: blur(var(--glass-blur-sm));
  border-top: 1px solid var(--glass-border-subtle);
  border-bottom: 1px solid var(--glass-border-subtle);
}

/* --- Glass Button --- */
.glass-btn {
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(var(--glass-blur-sm));
  backdrop-filter: blur(var(--glass-blur-sm));
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  padding: 0.6rem 1.2rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.glass-btn:hover {
  background: var(--glass-bg-heavy);
  box-shadow: var(--glass-shadow);
}

/* ===========================
   Small Screen Optimizations
   iPhone SE: 375px
   iPhone 13: 390px
   iPhone 15/16: 393px
   =========================== */

@media (max-width: 393px) {
  /* Tighter spacing on small phones */
  .container,
  .page-container {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  /* Smaller headings */
  h1, .page-title {
    font-size: 1.5rem !important;
  }

  h2, .section-title {
    font-size: 1.25rem !important;
  }

  /* Cards use full width */
  .glass-card,
  .glass-card-static {
    border-radius: 12px;
  }

  /* Buttons stack on very small screens */
  .btn-group {
    flex-direction: column;
    gap: 0.5rem;
  }
}

@media (max-width: 375px) {
  /* iPhone SE / older small phones */
  .container,
  .page-container {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }

  h1, .page-title {
    font-size: 1.35rem !important;
  }

  /* Reduce glass blur on low-end devices for performance */
  .glass-card,
  .glass-card-static,
  .glass-header {
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
  }
}

/* Safe area utilities */
.safe-top {
  padding-top: env(safe-area-inset-top, 0px);
}

.safe-bottom {
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

.safe-x {
  padding-left: env(safe-area-inset-left, 0px);
  padding-right: env(safe-area-inset-right, 0px);
}