/* =========================================================
   Expert Repair Hub — Base Components
   Buttons, topbar, navbar, forms, accordion, modal, back-to-top
   ========================================================= */

/* Buttons */
.btn { border-radius: 50px; font-weight: 600; padding: 0.7rem 1.65rem; transition: var(--transition); white-space: nowrap; }
.btn-lg { padding: 0.95rem 2.3rem; font-size: 1.02rem; }
.btn-sm { padding: 0.45rem 1.2rem; font-size: 0.85rem; }

.btn-primary { background-color: var(--primary); border-color: var(--primary); box-shadow: var(--shadow-soft); }
.btn-primary:hover, .btn-primary:focus {
  background-color: var(--primary-dark); border-color: var(--primary-dark);
  transform: translateY(-3px); box-shadow: 0 18px 35px -12px rgba(var(--primary-rgb), 0.35);
}

.btn-outline-primary { color: var(--primary); border-color: var(--gray-200); border-width: 2px; }
.btn-outline-primary:hover { background-color: var(--primary); border-color: var(--primary); color: #fff; transform: translateY(-3px); }

.btn-accent { background-color: var(--accent); border-color: var(--accent); color: #fff; box-shadow: 0 14px 30px -12px rgba(var(--accent-rgb), 0.45); }
.btn-accent:hover { background-color: var(--accent-dark); border-color: var(--accent-dark); color: #fff; transform: translateY(-3px); }

.btn-white { background-color: #fff; border-color: #fff; color: var(--primary); }
.btn-white:hover { background-color: var(--primary-light); color: var(--primary-dark); transform: translateY(-3px); }

.btn-outline-white { background-color: transparent; border: 2px solid rgba(255,255,255,0.5); color: #fff; }
.btn-outline-white:hover { background-color: rgba(255,255,255,0.12); border-color: #fff; color: #fff; transform: translateY(-3px); }

/* Topbar */
/* Independent-service disclaimer strip, shown above the topbar on every page */
.disclaimer-bar {
  background: var(--dark);
  color: #d7ece9;
  font-size: 0.78rem;
  text-align: center;
  padding: 0.5rem 1rem;
  line-height: 1.4;
}
.disclaimer-bar .disclaimer-label { color: var(--primary-light); font-weight: 700; }

.topbar { background: var(--primary-darker); color: #cfe0ff; font-size: 0.82rem; padding: 0.45rem 0; }
.topbar a { color: #cfe0ff; }
.topbar a:hover { color: #fff; }
.topbar .topbar-divider { width: 1px; height: 14px; background: rgba(255,255,255,0.2); display: inline-block; }

/* Navbar */
.navbar { padding: 1.1rem 0; background-color: #ffffff; transition: var(--transition); }
.navbar.scrolled { padding: 0.6rem 0; box-shadow: 0 10px 30px -18px rgba(15,23,42,0.25); }

.navbar-brand { display: flex; align-items: center; font-family: 'Poppins', sans-serif; font-weight: 800; font-size: 1.35rem; color: var(--gray-900); }
.navbar-brand .logo-mark {
  width: 44px; height: 44px; border-radius: 13px;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 1.35rem; margin-right: 0.65rem;
  box-shadow: var(--shadow-soft); flex-shrink: 0;
}
.navbar-brand .brand-text-dark { color: var(--primary); }

.navbar-nav .nav-link { font-weight: 600; font-size: 0.92rem; color: var(--gray-700); padding: 0.5rem 0.85rem; position: relative; }
.navbar-nav .nav-link:hover, .navbar-nav .nav-link.active { color: var(--primary); }
.navbar-nav .nav-link.active::after {
  content: ''; position: absolute; left: 0.85rem; right: 0.85rem; bottom: 0.1rem;
  height: 2px; border-radius: 2px; background: var(--accent);
}

.navbar-cta { display: flex; align-items: center; gap: 0.6rem; }
.nav-call-btn {
  display: inline-flex; align-items: center; gap: 0.5rem; font-weight: 700;
  color: var(--primary); border: 2px solid var(--primary-light); border-radius: 50px;
  padding: 0.55rem 1.1rem; font-size: 0.92rem; transition: var(--transition);
}
.nav-call-btn:hover { background: var(--primary-light); transform: translateY(-2px); }

.navbar-toggler { border: none; padding: 0.4rem; }
.navbar-toggler:focus { box-shadow: none; }
.navbar-toggler i { font-size: 1.7rem; color: var(--primary); }

/* Forms */
.form-label { font-weight: 600; color: var(--gray-900); font-size: 0.86rem; margin-bottom: 0.35rem; }
.form-control, .form-select { border-radius: var(--radius-sm); padding: 0.7rem 1rem; border: 1px solid var(--gray-200); font-size: 0.95rem; }
.form-control:focus, .form-select:focus { border-color: var(--primary); box-shadow: 0 0 0 0.2rem rgba(var(--primary-rgb), 0.14); }

/* Accordion (FAQ) */
.accordion-item { border: 1px solid var(--gray-200); border-radius: var(--radius) !important; margin-bottom: 1rem; overflow: hidden; }
.accordion-item:last-child { margin-bottom: 0; }
.accordion-button { font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 1rem; color: var(--gray-900); padding: 1.2rem 1.4rem; background: #fff; }
.accordion-button:not(.collapsed) { color: var(--primary); background: var(--primary-light); box-shadow: none; }
.accordion-button:focus { box-shadow: none; border-color: transparent; }
.accordion-button::after {
  background-image: none; font-family: 'Font Awesome 6 Free'; font-weight: 900;
  content: '\f078'; font-size: 0.95rem; transition: var(--transition);
}
.accordion-button:not(.collapsed)::after { content: '\f077'; color: var(--primary); }
.accordion-body { font-size: 0.92rem; color: var(--gray-600); padding: 0 1.4rem 1.3rem; line-height: 1.7; }

/* Modal */
.modal-content { border-radius: var(--radius-lg); border: none; }
.modal-header { border-bottom: 1px solid var(--gray-200); padding: 1.3rem 1.5rem; }
.modal-body { padding: 1.5rem; }
.modal-title { font-size: 1.15rem; }

/* Back to top */
.back-to-top {
  position: fixed; bottom: 1.75rem; right: 1.75rem; width: 46px; height: 46px;
  border-radius: 50%; background: var(--primary); color: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-md); opacity: 0; visibility: hidden;
  transform: translateY(10px); transition: var(--transition); z-index: 1000; border: none; font-size: 1.1rem;
}
.back-to-top.show { opacity: 1; visibility: visible; transform: translateY(0); }
.back-to-top:hover { background: var(--primary-dark); }

/* Floating WhatsApp */
.floating-whatsapp {
  position: fixed; bottom: 1.75rem; left: 1.75rem; width: 54px; height: 54px;
  border-radius: 50%; background: #25D366; color: #fff; font-size: 1.6rem;
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-md); z-index: 1000; transition: var(--transition);
}
.floating-whatsapp:hover { transform: translateY(-4px); color: #fff; }

/* Promotional banner strip */
.promo-banner {
  background: var(--accent);
  color: #fff;
  padding: 0.65rem 0;
  font-size: 0.88rem;
  font-weight: 600;
  text-align: center;
}
.promo-banner .btn-accent {
  background: #fff;
  border-color: #fff;
  color: var(--accent-dark);
  padding: 0.25rem 0.9rem;
}
.promo-banner .btn-accent:hover { background: var(--accent-light); }

/* Breadcrumb */
.breadcrumb-nav { background: var(--gray-100); padding: 0.85rem 0; }
.breadcrumb { margin-bottom: 0; font-size: 0.85rem; }
.breadcrumb-item + .breadcrumb-item::before { content: '\f105'; font-family: 'Font Awesome 6 Free'; font-weight: 900; color: var(--gray-400); }
.breadcrumb-item a { color: var(--gray-600); font-weight: 600; }
.breadcrumb-item a:hover { color: var(--primary); }
.breadcrumb-item.active { color: var(--primary); font-weight: 600; }

/* Sticky mobile bottom nav */
.mobile-cta-bar {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 999;
  display: flex; background: #fff; box-shadow: 0 -8px 25px -15px rgba(15,23,42,0.3);
}
.mobile-cta-btn {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.2rem;
  text-align: center; padding: 0.55rem 0.25rem; font-weight: 600; font-size: 0.68rem;
  color: var(--gray-600); border-right: 1px solid var(--gray-200);
}
.mobile-cta-btn i { font-size: 1.05rem; color: var(--primary); }
.mobile-cta-btn:last-child { border-right: none; }
.mobile-cta-btn.mobile-cta-primary { background: var(--accent); color: #fff; }
.mobile-cta-btn.mobile-cta-primary i { color: #fff; }

@media (min-width: 992px) {
  .mobile-cta-bar { display: none; }
}
@media (max-width: 991.98px) {
  .floating-whatsapp, .back-to-top { bottom: 5rem; }
}

@media (prefers-reduced-motion: reduce) {
  .btn, .nav-call-btn, .back-to-top, .floating-whatsapp { transition: none !important; }
}