/* Sticky footer styles
-------------------------------------------------- */
html {
  position: relative;
  min-height: 100%;
  font-size: 16px;
}
@media (min-width: 768px) {
  html {
    font-size: 18px;
  }
}
@media (min-width: 1200px) {
  html {
    font-size: 20px;
  }
}

body {
  margin-bottom: 60px; /* Margin bottom by footer height */
  line-height: 1.6;
  font-weight: 400;
}

/* Enhanced text visibility */
h1, h2, h3, h4, h5, h6 {
  font-weight: 600;
  line-height: 1.3;
}

p {
  line-height: 1.7;
}

.text-muted {
  color: #495057 !important; /* Darker muted text for better visibility */
}

/* Let Bootstrap manage container widths by breakpoint */
/* Removed fixed max-width override for .container to give navbar breathing room */

.pricing-header {
  max-width: 700px;
}

.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 60px; /* Set the fixed height of the footer here */
  line-height: 60px; /* Vertically center the text there */
  background-color: #f5f5f5;
}

/* -------------------------------------------------- */
/* Premium Theme Enhancements                         */
/* -------------------------------------------------- */

:root {
  --brand-primary: #4f46e5; /* Indigo 600 */
  --brand-primary-700: #4338ca;
  --brand-secondary: #0ea5e9; /* Sky 500 */
  --brand-success: #10b981; /* Emerald 500 */
  --brand-warning: #f59e0b; /* Amber 500 */
  --brand-danger: #ef4444;  /* Red 500 */

  --text-color: #0f172a;     /* Slate 900 */
  --text-muted: #64748b;     /* Slate 500 */
  --surface: #ffffff;
  --surface-alt: #f8fafc;    /* Slate 50 */
  --border-soft: #e5e7eb;    /* Gray 200 */
}

body {
  color: var(--text-color);
  background-color: var(--surface-alt);
}

.app-bg {
  background: linear-gradient(180deg, #f8fafc 0%, #f3f4f6 100%);
}

/* Navbar */
.navbar-elevated {
  background: linear-gradient(90deg, rgba(15, 23, 42, 0.92), rgba(30, 41, 59, 0.92));
  backdrop-filter: saturate(140%) blur(8px);
  -webkit-backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.navbar-elevated .navbar-brand,
.navbar-elevated .nav-link {
  color: #e5e7eb !important;
  opacity: 0.92;
}

.navbar-elevated .nav-link:hover,
.navbar-elevated .navbar-brand:hover {
  color: #ffffff !important;
  opacity: 1;
}

.navbar-elevated .dropdown-menu {
  border-radius: 0.75rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 10px 30px rgba(2, 6, 23, 0.15);
}

/* Prevent navbar links from wrapping awkwardly */
.navbar .navbar-nav .nav-link {
  white-space: nowrap;
}

/* Responsive account dropdown: full-width on small screens */
@media (max-width: 991.98px) {
  .navbar .dropdown.position-static .dropdown-menu {
    left: 0 !important;
    right: 0 !important;
    transform: none !important;
    margin-top: 0.25rem;
    width: 100% !important;
  }

  .navbar .dropdown.position-static .dropdown-header {
    white-space: normal;
    word-break: break-word;
  }
}

/* Compact account dropdown on large screens */
@media (min-width: 992px) {
  /* Override Bootstrap's position-static so the menu anchors to the toggle */
  .navbar .dropdown.position-static {
    position: relative !important;
  }

  .navbar .dropdown.position-static .dropdown-menu {
    left: auto !important;
    right: 0 !important;
    transform: none !important;
    width: auto !important;           /* ignore w-100 from markup */
    min-width: 18rem;                 /* sensible desktop width */
    max-width: 24rem;                 /* prevent overly wide menu */
  }

  .navbar .dropdown.position-static .dropdown-header {
    white-space: nowrap;
    max-width: 22rem;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/* Cards */
.card {
  border-radius: 1rem;
  border: 1px solid #eaeef3;
}

.card-premium {
  box-shadow: 0 8px 24px rgba(2, 6, 23, 0.06);
}

.card .card-header {
  border-bottom: 1px solid rgba(2, 6, 23, 0.06);
}

/* Auth cards */
.auth-card {
  max-width: 680px;
}

.auth-card .card-body {
  padding: clamp(1.5rem, 3vw, 3rem);
}

.auth-intro-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(79, 70, 229, 0.1), rgba(14, 165, 233, 0.1));
  color: var(--brand-primary);
}

/* Buttons */
.btn-primary {
  background-color: var(--brand-primary);
  border-color: var(--brand-primary);
  box-shadow: 0 6px 16px rgba(79, 70, 229, 0.25);
}

.btn-primary:hover {
  background-color: var(--brand-primary-700);
  border-color: var(--brand-primary-700);
}

.btn-outline-primary {
  color: var(--brand-primary);
  border-color: var(--brand-primary);
}

.btn-outline-primary:hover {
  background-color: rgba(79, 70, 229, 0.08);
  border-color: var(--brand-primary);
  color: var(--brand-primary);
}

.btn-success { background-color: var(--brand-success); border-color: var(--brand-success); }
.btn-info { background-color: var(--brand-secondary); border-color: var(--brand-secondary); }
.btn-danger { background-color: var(--brand-danger); border-color: var(--brand-danger); }
.btn-warning { background-color: var(--brand-warning); border-color: var(--brand-warning); }

/* Form controls */
.form-control, .form-select {
  border-radius: 0.75rem;
  border-color: var(--border-soft);
}

.form-control:focus, .form-select:focus, .form-check-input:focus {
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 0.2rem rgba(79, 70, 229, 0.15);
}

.form-text { color: var(--text-muted); }

/* Badges */
.badge {
  border-radius: 0.5rem;
}

.badge.bg-success { background-color: rgba(16, 185, 129, 0.15) !important; color: #065f46 !important; }
.badge.bg-info { background-color: rgba(14, 165, 233, 0.15) !important; color: #075985 !important; }
.badge.bg-warning { background-color: rgba(245, 158, 11, 0.15) !important; color: #92400e !important; }
.badge.bg-danger { background-color: rgba(239, 68, 68, 0.15) !important; color: #7f1d1d !important; }

/* Toasts */
.toast.text-bg-success { background-color: #0f766e !important; color: #fff; }
.toast.text-bg-danger { background-color: #7f1d1d !important; color: #fff; }
.toast.text-bg-warning { background-color: #854d0e !important; color: #fff; }

/* Section helpers */
.page-section { padding: 2rem 0; }
.shadow-soft { box-shadow: 0 10px 30px rgba(2, 6, 23, 0.08) !important; }

/* Softer primary gradient */
.bg-gradient-primary {
  background: linear-gradient(45deg, #4f46e5, #0ea5e9) !important;
}

/* Links */
a { color: var(--brand-primary); }
a:hover { color: var(--brand-primary-700); }

/* Tables */
.table thead { border-top-left-radius: 1rem; border-top-right-radius: 1rem; }
.table thead th { border-bottom: none; }

/* Footer */
.footer-elevated {
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-top: 1px solid rgba(2, 6, 23, 0.06);
}

/* -------------------------------------------------- */
/* Collapsible hero                                   */
/* -------------------------------------------------- */
.hero-section.hero-collapsible {
  min-height: 70vh;
  display: flex;
  align-items: center;
  padding: clamp(2rem, 4vw, 5rem) 0;
  transition: min-height 0.4s ease, padding 0.4s ease, box-shadow 0.3s ease;
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.08);
}

.hero-section.hero-collapsible.hero-shrink {
  min-height: 28vh;
  padding: 1.25rem 0;
  box-shadow: 0 6px 18px rgba(2, 6, 23, 0.08);
}