/* Brand theme overrides */
:root {
  /* Palette */
  --brand-ink: #223257;          /* Brand navy (headings) */
  --brand-primary: #2F80ED;      /* Sky blue (primary actions) */
  --brand-primary-600: #1E6FE0;  /* Hover shade */
  --brand-primary-700: #195fbe;  /* Active */
  --brand-accent: #8B5CF6;       /* Purple accent */
  --brand-accent-600: #7C3AED;   /* Accent hover */
  --surface: #F6F8FC;            /* Light gray surface */
  --brand-white: #ffffff;

  /* Bootstrap theme variables */
  --bs-primary: var(--brand-primary);
  --bs-secondary: var(--brand-accent);
  --bs-link-color: var(--brand-primary);
  --bs-link-hover-color: var(--brand-primary-600);
}

/* Base */
body { color: #1f2937; }
h1,h2,h3,h4,h5,h6 { color: var(--brand-ink); }
.bg-surface { background: var(--surface); }

/* Buttons */
.btn-primary {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--brand-primary);
  --bs-btn-border-color: var(--brand-primary);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--brand-primary-600);
  --bs-btn-hover-border-color: var(--brand-primary-600);
  --bs-btn-focus-shadow-rgb: 47, 128, 237;
  --bs-btn-active-bg: var(--brand-primary-700);
  --bs-btn-active-border-color: var(--brand-primary-700);
}
.btn-outline-primary {
  --bs-btn-color: var(--brand-primary);
  --bs-btn-border-color: var(--brand-primary);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--brand-primary);
  --bs-btn-hover-border-color: var(--brand-primary);
  --bs-btn-focus-shadow-rgb: 47, 128, 237;
}
.btn-secondary {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--brand-accent);
  --bs-btn-border-color: var(--brand-accent);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--brand-accent-600);
  --bs-btn-hover-border-color: var(--brand-accent-600);
  --bs-btn-focus-shadow-rgb: 139, 92, 246;
}
.btn-outline-secondary {
  --bs-btn-color: var(--brand-accent);
  --bs-btn-border-color: var(--brand-accent);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--brand-accent);
  --bs-btn-hover-border-color: var(--brand-accent);
  --bs-btn-focus-shadow-rgb: 139, 92, 246;
}

/* Text, backgrounds, borders */
.text-primary { color: var(--brand-primary) !important; }
.bg-primary { background-color: var(--brand-primary) !important; }
.border-primary { border-color: var(--brand-primary) !important; }
.link-primary { color: var(--brand-primary) !important; }
.link-primary:hover { color: var(--brand-primary-600) !important; }

/* Form focus */
.form-control:focus, .form-select:focus {
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 .25rem rgba(47, 128, 237, .15);
}

/* Navbar active link */
.navbar .nav-link.active, .navbar .dropdown-item.active { color: var(--brand-primary) !important; }
.navbar .dropdown-item:hover { color: var(--brand-primary); }

/* Pagination */
.pagination .page-link { color: var(--brand-primary); }
.pagination .page-item.active .page-link { background-color: var(--brand-primary); border-color: var(--brand-primary); }

/* Badges */
.badge.bg-primary { background-color: var(--brand-primary) !important; }
.badge.bg-secondary { background-color: var(--brand-accent) !important; }

/* Image helpers */
.img-cover { width: 100%; height: 100%; object-fit: cover; }
.img-ar-16x9 { aspect-ratio: 16/9; }
.img-ar-4x3 { aspect-ratio: 4/3; }
.img-ar-1x1 { aspect-ratio: 1/1; }

/* Reusable feature cards (used across pages) */
.feature-card { border: 0; box-shadow: 0 8px 24px rgba(0,0,0,.08); transition: transform .2s ease, box-shadow .2s ease; border-radius: 12px; }
.feature-card:hover { transform: translateY(-4px); box-shadow: 0 12px 28px rgba(0,0,0,.12); }
.feature-icon { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 12px; background:#eef2ff; color:var(--brand-primary); }

/* Simple page hero */
.hero-simple { position:relative; min-height: 48vh; height:48vh; background-size:cover; background-position:center; }
@media (min-width: 992px){ .hero-simple{ min-height:62vh; height:62vh; } }
.hero-simple::after{ content:""; position:absolute; inset:0; background:linear-gradient(0deg,rgba(20,24,50,.50),rgba(20,24,50,.25)); }
.hero-simple .container{ position:relative; z-index:2; }

/* Footer brand */
.footer-brand img{ height:28px; width:auto; }

/* ============================================================
   PRO UI DESIGN SYSTEM
   ============================================================ */

/* Gradient text + section headings */
.text-gradient {
  background: linear-gradient(90deg, var(--brand-primary), var(--brand-accent));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: var(--brand-primary);
}
.section-title { font-weight: 700; color: var(--brand-ink); }
.section-subtitle { color: #64748b; }
.section-eyebrow {
  display: inline-block; font-size: .75rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--brand-primary);
  background: rgba(47,128,237,.08); padding: .35rem .9rem; border-radius: 999px; margin-bottom: .75rem;
}

/* Scroll reveal (hidden only when JS present) */
.reveal { transition: opacity .6s ease, transform .6s ease; }
.has-js .reveal { opacity: 0; transform: translateY(24px); }
.has-js .reveal.reveal-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .has-js .reveal, .reveal.reveal-visible { opacity: 1; transform: none; transition: none; }
}

/* Cards */
.card { border-color: rgba(34,50,87,.08); }
.card-lift { transition: transform .25s ease, box-shadow .25s ease; }
.card-lift:hover { transform: translateY(-6px); box-shadow: 0 18px 40px rgba(34,50,87,.14); }
.card-img-zoom { overflow: hidden; }
.card-img-zoom img { transition: transform .5s ease; }
.card-img-zoom:hover img { transform: scale(1.06); }
.shadow-soft { box-shadow: 0 8px 24px rgba(34,50,87,.08); }

/* Buttons */
.btn-primary { --bs-btn-box-shadow: 0 6px 16px rgba(47,128,237,.25); }
.btn-outline-primary { --bs-btn-box-shadow: 0 6px 16px rgba(47,128,237,.15); }
.btn-rounded { border-radius: 999px; }
.btn-soft-primary {
  --bs-btn-color: var(--brand-primary-600); --bs-btn-bg: rgba(47,128,237,.10);
  --bs-btn-border-color: rgba(47,128,237,.10); --bs-btn-focus-shadow-rgb: 47,128,237;
  --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--brand-primary); --bs-btn-hover-border-color: var(--brand-primary);
  --bs-btn-active-color: #fff; --bs-btn-active-bg: var(--brand-primary-700); --bs-btn-active-border-color: var(--brand-primary-700);
}
.btn-soft-success {
  --bs-btn-color: #15803d; --bs-btn-bg: rgba(22,163,74,.10);
  --bs-btn-border-color: rgba(22,163,74,.10); --bs-btn-focus-shadow-rgb: 22,163,74;
  --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #16a34a; --bs-btn-hover-border-color: #16a34a;
  --bs-btn-active-color: #fff; --bs-btn-active-bg: #15803d; --bs-btn-active-border-color: #15803d;
}
.btn-soft-danger {
  --bs-btn-color: #dc2626; --bs-btn-bg: rgba(239,68,68,.10);
  --bs-btn-border-color: rgba(239,68,68,.10); --bs-btn-focus-shadow-rgb: 239,68,68;
  --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #ef4444; --bs-btn-hover-border-color: #ef4444;
  --bs-btn-active-color: #fff; --bs-btn-active-bg: #dc2626; --bs-btn-active-border-color: #dc2626;
}

/* Soft badges */
.badge-soft-primary   { color: var(--brand-primary-600); background: rgba(47,128,237,.12); }
.badge-soft-secondary { color: var(--brand-accent-600);   background: rgba(139,92,246,.12); }
.badge-soft-success   { color: #15803d; background: rgba(22,163,74,.12); }
.badge-soft-danger    { color: #dc2626; background: rgba(239,68,68,.12); }
.badge-soft-warning   { color: #b45309; background: rgba(245,158,11,.14); }
.badge-soft-info      { color: #0369a1; background: rgba(14,165,233,.12); }

/* Filters */
.filter-card { border: 1px solid rgba(34,50,87,.08); box-shadow: 0 8px 24px rgba(34,50,87,.06); }
.filter-group-title { font-size: .8rem; font-weight: 700; color: var(--brand-ink); letter-spacing: .02em; }
.filter-bar { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.filter-label { font-size: .85rem; color: #64748b; }
.filter-chip {
  display: inline-flex; align-items: center; gap: .35rem; padding: .4rem .9rem; border-radius: 999px;
  background: #fff; border: 1px solid rgba(34,50,87,.14); color: #475569; font-size: .85rem;
  transition: all .2s ease; text-decoration: none;
}
.filter-chip:hover { border-color: var(--brand-primary); color: var(--brand-primary); }
.filter-chip.active { background: var(--brand-primary); border-color: var(--brand-primary); color: #fff; }
.filter-chip.active:hover { background: var(--brand-primary-600); border-color: var(--brand-primary-600); color: #fff; }

/* Active filter chips */
.active-filter-chip {
  display: inline-flex; align-items: center; gap: .4rem; padding: .35rem .85rem; border-radius: 999px;
  background: rgba(47,128,237,.10); color: var(--brand-primary-700);
  border: 1px solid rgba(47,128,237,.18); font-size: .82rem; text-decoration: none;
  transition: background .2s ease, color .2s ease;
}
.active-filter-chip:hover { background: rgba(47,128,237,.20); color: var(--brand-primary-700); }
.active-filter-chip i { font-size: .75rem; }
.active-filter-clear { font-size: .85rem; font-weight: 600; color: #64748b; text-decoration: none; white-space: nowrap; }
.active-filter-clear:hover { color: #dc2626; }

/* Admin tables */
.table-card { border: 0; box-shadow: 0 8px 24px rgba(34,50,87,.08); border-radius: 14px; overflow: hidden; }
.table-card .card-header { background: #fff; border-bottom: 1px solid rgba(34,50,87,.06); }
.admin-table thead th {
  background: var(--surface); color: var(--brand-ink); font-size: .78rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em; border-bottom: 2px solid rgba(34,50,87,.08); white-space: nowrap;
}
.admin-table tbody tr { transition: background .15s ease; }
.admin-table tbody tr:hover { background: rgba(47,128,237,.04); }
.admin-table td { vertical-align: middle; }
.admin-table .table-actions { white-space: nowrap; }

/* Scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #eef2f7; }
::-webkit-scrollbar-thumb { background: #c3cfe0; border-radius: 6px; border: 2px solid #eef2f7; }
::-webkit-scrollbar-thumb:hover { background: var(--brand-primary); }

/* Floating buttons */
.back-to-top, .whatsapp-float {
  position: fixed; z-index: 1045; width: 46px; height: 46px; border-radius: 50%;
  display: grid; place-items: center; text-decoration: none;
  transition: transform .2s ease, opacity .2s ease, box-shadow .2s ease;
}
.back-to-top {
  bottom: 24px; inset-inline-end: 24px; background: var(--brand-ink); color: #fff; border: 0;
  opacity: 0; pointer-events: none; transform: translateY(10px);
  box-shadow: 0 8px 20px rgba(34,50,87,.30);
}
.back-to-top.show { opacity: 1; pointer-events: auto; transform: none; }
.back-to-top:hover { color: #fff; background: var(--brand-primary); transform: translateY(-3px); }
.whatsapp-float {
  bottom: 24px; inset-inline-start: 24px; background: #25D366; color: #fff; font-size: 1.35rem;
  box-shadow: 0 8px 20px rgba(37,211,102,.40);
}
.whatsapp-float:hover { color: #fff; transform: scale(1.08); }
@media (max-width: 575.98px) {
  .whatsapp-float { bottom: 18px; inset-inline-start: 18px; width: 42px; height: 42px; font-size: 1.2rem; }
  .back-to-top { bottom: 18px; inset-inline-end: 18px; width: 42px; height: 42px; }
}

/* Navbar scroll shadow */
.navbar { transition: box-shadow .25s ease, background .25s ease; }
.navbar-scrolled { box-shadow: 0 6px 20px rgba(34,50,87,.10); }

/* Image fallback placeholder */
.img-fallback {
  display: flex; align-items: center; justify-content: center;
  background: var(--surface); color: #94a3b8; font-size: 1.75rem;
}

/* Misc */
.fs-7 { font-size: .85rem; }