/* =========================================================
   WebsiteOnCall — main stylesheet (modern theme)
   ========================================================= */

:root {
  --brand-primary: #2C244B;
  --brand-primary-dark: #1c1730;
  --brand-secondary: #2C244B;
  --brand-accent: #F5C813;
  --brand-success: #16a34a;
  --ink: #2C244B;
  --ink-muted: #6b6480;
  --surface: #ffffff;
  --surface-alt: #f6f4fb;
  --border-soft: #e7e3f2;
  --radius-lg: 1.25rem;
  --radius-md: 0.9rem;
  --shadow-soft: 0 10px 30px -12px rgba(44, 36, 75, 0.25);
  --shadow-card: 0 2px 14px rgba(44, 36, 75, 0.08);

  /* Re-theme Bootstrap's own variables so every default .btn-*, .text-*,
     .bg-* utility class follows the same two brand colors automatically. */
  --bs-primary: #2C244B;
  --bs-primary-rgb: 44, 36, 75;
  --bs-warning: #F5C813;
  --bs-warning-rgb: 245, 200, 19;
  --bs-dark: #2C244B;
  --bs-dark-rgb: 44, 36, 75;
  --bs-link-color: #2C244B;
  --bs-link-hover-color: #F5C813;
}

.btn-warning, .badge.bg-warning {
  color: #2C244B;
}

body {
  font-family: 'Poppins', 'Segoe UI', Tahoma, sans-serif;
  color: var(--ink);
  background: var(--surface-alt);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* Sticky footer: main content grows to fill the viewport so the footer
   always sits at the bottom of the screen instead of riding up on short
   pages (login, forgot password, etc.) on larger/laptop screens. */
.site-main {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
}
.site-main > * { width: 100%; }
footer { flex-shrink: 0; }

h1, h2, h3, h4, h5, h6, .navbar-brand {
  font-family: 'Poppins', 'Segoe UI', sans-serif;
}

/* ---------- Navbar ---------- */
.site-navbar {
  background: linear-gradient(90deg, var(--brand-primary-dark), var(--brand-primary));
  backdrop-filter: blur(6px);
}

.site-navbar .navbar-brand {
  letter-spacing: 0.3px;
  font-weight: 700;
}

.brand-logo-img {
  height: 65px !important ;
  width: auto;
  object-fit: contain;
}

.site-navbar .nav-link {
  font-weight: 500;
  opacity: 0.92;
  transition: opacity 0.15s ease;
}

.site-navbar .nav-link:hover {
  opacity: 1;
}

/* ---------- Hero ---------- */
.hero-section {
  background: linear-gradient(135deg, var(--brand-primary-dark), var(--brand-secondary));
  background-size: cover;
  background-position: center;
  position: relative;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.3);
  padding: 0.35rem 0.9rem;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 600;
  margin-bottom: 1.1rem;
}

.hero-section h1 {
  letter-spacing: -0.02em;
}

.hero-section .btn-warning {
  box-shadow: 0 10px 25px -8px rgba(245, 200, 19, 0.55);
  border: none;
}

/* ---------- Stats strip ---------- */
.stats-strip {
  background: var(--surface);
  border-bottom: 1px solid var(--border-soft);
  padding: 1.75rem 0;
  box-shadow: var(--shadow-card);
}

.stat-item {
  display: flex;
  flex-direction: column;
}

.stat-num {
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 1.6rem;
  color: var(--brand-primary);
}

.stat-label {
  color: var(--ink-muted);
  font-size: 0.85rem;
  font-weight: 500;
}

/* ---------- Customer dashboard ---------- */
.dashboard-welcome {
  background: linear-gradient(135deg, var(--brand-primary), var(--brand-primary-dark));
  color: #fff;
  border-radius: var(--radius-lg);
  padding: 1.75rem 2rem;
  box-shadow: var(--shadow-soft);
  position: relative;
  overflow: hidden;
}
.dashboard-welcome::after {
  content: "";
  position: absolute;
  top: -40%; right: -10%;
  width: 220px; height: 220px;
  background: radial-gradient(circle, rgba(245,200,19,.25), transparent 70%);
  border-radius: 50%;
}

.dashboard-avatar {
  width: 56px; height: 56px; border-radius: 50%;
  background: rgba(255,255,255,.15);
  border: 2px solid rgba(245,200,19,.7);
  display: flex; align-items: center; justify-content: center;
  font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 1.4rem;
  color: var(--brand-accent);
  flex-shrink: 0;
}

/* ---------- Dashboard stat cards (mirrors admin panel styling) ---------- */
.user-stat-card {
  background: #fff;
  border-radius: 0.9rem;
  box-shadow: 0 2px 14px rgba(30, 27, 46, 0.06);
  padding: 1.1rem;
  text-align: center;
  transition: transform 0.15s ease;
  height: 100%;
}
.user-stat-card:hover { transform: translateY(-3px); }
.user-stat-icon {
  width: 42px; height: 42px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 0.5rem; font-size: 1.05rem;
}
.user-stat-card h4 {
  font-family: 'Poppins', sans-serif; font-weight: 700;
  margin-bottom: 0.15rem; color: #1e1b2e;
}
.user-stat-card small { color: #6b7280 !important; }

.dashboard-business-card {
  border-radius: 1.1rem;
  overflow: hidden;
  border: 1px solid var(--border-soft);
  transition: box-shadow .2s, transform .2s;
}
.dashboard-business-card:hover {
  box-shadow: 0 14px 30px -14px rgba(44,36,75,.28);
}

.dashboard-business-card .card-header {
  background: linear-gradient(90deg, var(--brand-primary), var(--brand-primary-dark));
  color: #fff;
  border-bottom: none;
  padding: 1rem 1.25rem;
}
.dashboard-business-card .card-header .fa-briefcase { color: var(--brand-accent) !important; }

/* ---------- Full Website / Domain project boxes ---------- */
.project-box {
  background: #faf9ff;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  padding: 0.9rem 1rem;
}

.progress-steps {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.progress-steps .step {
  font-size: 0.72rem;
  font-weight: 600;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  background: #eceaf5;
  color: var(--ink-muted);
}

.progress-steps .step.done {
  background: var(--brand-primary);
  color: #fff;
}

/* ---------- Mobile polish for dashboard ---------- */
@media (max-width: 576px) {
  .dashboard-welcome { padding: 1.25rem 1.35rem; border-radius: 1rem; }
  .dashboard-welcome h2 { font-size: 1.35rem; }
  .dashboard-avatar { width: 46px; height: 46px; font-size: 1.15rem; }
  .user-stat-card { padding: 0.85rem; }
  .user-stat-card h4 { font-size: 1.1rem; }
  .dashboard-business-card { border-radius: 0.9rem; }
  .dashboard-business-card .card-header { padding: 0.85rem 1rem; font-size: 0.95rem; }
  .dashboard-business-card .card-body { padding: 1rem; }
  .project-box { padding: 0.75rem 0.85rem; }
  .project-box .btn { width: 100%; }
  .dashboard-business-card .table { font-size: 0.82rem; }
}

/* ---------- Generic cards / sections ---------- */
.card {
  border: none;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
}

section.py-5 h2 {
  font-weight: 700;
  letter-spacing: -0.01em;
}

.rounded-4.border.shadow-sm {
  border: 1px solid var(--border-soft) !important;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.rounded-4.border.shadow-sm:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-soft);
}

/* ---------- Category cards (homepage) ---------- */
.category-card {
  background: var(--surface);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  padding: 1.1rem 0.75rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.category-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-soft);
}

.category-card-img {
  width: 100%;
  max-width: 92px;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 0.75rem;
  margin-bottom: 0.35rem;
}

/* ---------- Buttons ---------- */
.btn-primary {
  background: var(--brand-primary);
  border-color: var(--brand-primary);
}

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

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

/* ---------- Form focus states in brand color ---------- */
.form-control:focus, .form-select:focus {
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 0.25rem rgba(44, 36, 75, 0.15);
}

.card-header {
  background: var(--surface-alt);
  border-bottom: 1px solid var(--border-soft);
}

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

/* ---------- Footer ---------- */
footer {
  background: linear-gradient(90deg, var(--brand-primary-dark), #1e1b2e) !important;
}

footer a {
  color: #fff;
  text-decoration: none;
}

/* ---------- Misc ---------- */
code {
  background: #f1f3f5;
  padding: 2px 6px;
  border-radius: 4px;
}

.badge {
  font-weight: 600;
  letter-spacing: 0.01em;
}

/* ---------- Mobile responsiveness ---------- */
@media (max-width: 767.98px) {
  .hero-section h1 {
    font-size: 2rem;
  }
  .hero-section .lead {
    font-size: 1rem;
  }
  section.py-5 {
    padding-top: 2.25rem !important;
    padding-bottom: 2.25rem !important;
  }
  .category-card-img {
    max-width: 64px;
  }
}

@media (max-width: 575.98px) {
  .hero-section {
    text-align: center;
  }
  .hero-section h1 {
    font-size: 1.65rem;
  }
  .btn-lg {
    width: 100%;
  }
}