/* ===================================
   THEME VARIABLES (fallback defaults —
   overridden per-request by inline :root
   values from config/config.php theme.*)
=================================== */
:root {
  --theme-primary: #0d6efd;
  --theme-secondary: #212529;
  --theme-accent: #f59e0b;
  --theme-font: 'Poppins', sans-serif;
  --theme-radius: 0.5rem;
  --theme-transition: 0.2s ease-in-out;
}

html, body {
  height: 100%;
}

body {
  font-family: var(--theme-font);
  color: #2b2f33;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--theme-font);
  font-weight: 600;
  letter-spacing: -0.01em;
}

/* ===================================
   ACCESSIBILITY
=================================== */
.skip-link {
  position: absolute;
  top: -3rem;
  left: 1rem;
  background: #fff;
  color: #000;
  padding: 0.5rem 1rem;
  border-radius: var(--theme-radius);
  z-index: 2000;
  transition: top var(--theme-transition);
}

.skip-link:focus {
  top: 1rem;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 2px solid var(--theme-primary);
  outline-offset: 2px;
}

/* ===================================
   BUTTONS
=================================== */
.btn {
  border-radius: var(--theme-radius);
  font-weight: 500;
  transition: transform var(--theme-transition), box-shadow var(--theme-transition), filter var(--theme-transition);
}

.btn:hover {
  transform: translateY(-1px);
}

.btn-primary {
  background-color: var(--theme-primary);
  border-color: var(--theme-primary);
}

.btn-accent {
  background-color: var(--theme-accent);
  border-color: var(--theme-accent);
  color: #212529;
}

.btn-accent:hover,
.btn-accent:focus {
  filter: brightness(0.92);
  color: #212529;
}

/* ===================================
   CARDS
=================================== */
.card {
  border-radius: var(--theme-radius);
  border: 1px solid rgba(0, 0, 0, 0.06);
  transition: transform var(--theme-transition), box-shadow var(--theme-transition);
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 0.75rem 1.5rem rgba(0, 0, 0, 0.08) !important;
}

/* ===================================
   FORMS
=================================== */
.form-control,
.form-select {
  border-radius: var(--theme-radius);
  padding: 0.65rem 0.9rem;
  border-color: #dee2e6;
}

.form-control:focus,
.form-select:focus {
  border-color: var(--theme-primary);
  box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.15);
}

.form-label {
  font-weight: 500;
  margin-bottom: 0.4rem;
}

/* ===================================
   TABLES
=================================== */
.table thead {
  background-color: var(--theme-secondary);
  color: #fff;
}

.table-hover tbody tr:hover {
  background-color: rgba(13, 110, 253, 0.04);
}

/* ===================================
   ALERTS
=================================== */
.alert {
  border-radius: var(--theme-radius);
  border-left: 4px solid transparent;
}

.alert-success { border-left-color: #198754; }
.alert-danger  { border-left-color: #dc3545; }
.alert-warning { border-left-color: #ffc107; }
.alert-info    { border-left-color: #0dcaf0; }

/* ===================================
   BADGES
=================================== */
.badge {
  font-weight: 500;
  padding: 0.45em 0.75em;
  border-radius: 50rem;
}

/* ===================================
   PAGINATION
=================================== */
.pagination .page-link {
  color: var(--theme-secondary);
  border-radius: var(--theme-radius);
  margin: 0 0.15rem;
  border: 1px solid #dee2e6;
}

.pagination .page-item.active .page-link {
  background-color: var(--theme-primary);
  border-color: var(--theme-primary);
}

/* ===================================
   TOP BAR
=================================== */
.topbar {
  background-color: var(--theme-secondary);
  color: rgba(255, 255, 255, 0.8);
}

.topbar-link {
  color: rgba(255, 255, 255, 0.8) !important;
  text-decoration: none;
  transition: color var(--theme-transition);
}

.topbar-link:hover {
  color: #fff !important;
}

/* ===================================
   HEADER / MEGA MENU
=================================== */
.main-navbar {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}

.navbar-brand {
  letter-spacing: 0.5px;
  font-size: 1.35rem;
}

.navbar-brand:hover {
  opacity: 0.9;
}

.nav-icon-btn {
  padding: 0.25rem 0.5rem;
}

.mega-menu {
  left: 0;
  right: 0;
  margin-top: 0;
  border-radius: 0 0 var(--theme-radius) var(--theme-radius);
}

.mega-menu-title {
  font-weight: 600;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--theme-secondary);
  margin-bottom: 0.75rem;
}

.mega-menu-link {
  display: block;
  padding: 0.35rem 0;
  color: #495057;
  text-decoration: none;
  font-size: 0.9rem;
  transition: color var(--theme-transition), padding-left var(--theme-transition);
}

.mega-menu-link:hover {
  color: var(--theme-primary);
  padding-left: 0.25rem;
}

@media (min-width: 992px) {
  .dropdown-menu.mega-menu {
    position: absolute;
    display: block;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity var(--theme-transition), transform var(--theme-transition), visibility var(--theme-transition);
  }

  .dropdown.position-static:hover .dropdown-menu.mega-menu,
  .dropdown-menu.mega-menu.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
}

/* ===================================
   BREADCRUMBS
=================================== */
.breadcrumb-bar {
  background-color: #f8f9fa;
}

.breadcrumb {
  --bs-breadcrumb-divider: '/';
}

.breadcrumb-item a {
  color: #495057;
  text-decoration: none;
}

.breadcrumb-item a:hover {
  text-decoration: underline;
}

/* ===================================
   FOOTER
=================================== */
.site-footer {
  background-color: var(--theme-secondary);
}

.newsletter-section {
  background-color: rgba(255, 255, 255, 0.05);
}

.footer-link {
  color: rgba(255, 255, 255, 0.65);
  text-decoration: none;
  transition: color var(--theme-transition);
}

.footer-link:hover {
  color: #fff;
  text-decoration: underline;
}

.footer-social-icon {
  width: 2.25rem;
  height: 2.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.08);
  color: #fff;
  transition: background-color var(--theme-transition);
}

.footer-social-icon:hover {
  background-color: var(--theme-primary);
  color: #fff;
}

/* ===================================
   BACK TO TOP
=================================== */
.back-to-top {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity var(--theme-transition), transform var(--theme-transition), visibility var(--theme-transition);
  z-index: 1040;
}

.back-to-top.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* ===================================
   PAGE LOADER
=================================== */
.page-loader {
  position: fixed;
  inset: 0;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
  transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
}

.page-loader.loaded {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.loader-spinner {
  width: 3rem;
  height: 3rem;
  border: 0.3rem solid #e9ecef;
  border-top-color: var(--theme-primary);
  border-radius: 50%;
  animation: theme-spin 0.8s linear infinite;
}

@keyframes theme-spin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .loader-spinner {
    animation-duration: 1.6s;
  }
}

/* ===================================
   SCROLL REVEAL ANIMATIONS
=================================== */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ===================================
   LAZY IMAGES
=================================== */
img[loading="lazy"] {
  opacity: 0;
  transition: opacity 0.4s ease-in-out;
}

img[loading="lazy"].is-loaded {
  opacity: 1;
}

/* ===================================
   ERROR PAGES
=================================== */
.error-page {
  min-height: 60vh;
  display: flex;
  align-items: center;
}

.error-code {
  font-size: clamp(4rem, 12vw, 8rem);
  font-weight: 800;
  color: var(--theme-primary);
  line-height: 1;
}

.error-code.is-danger {
  color: #dc3545;
}

/* ===================================
   SHARE BUTTONS
=================================== */
.share-btn {
  width: 2.5rem;
  height: 2.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background-color: #f1f3f5;
  color: var(--theme-secondary);
  padding: 0;
  border: none;
  transition: background-color var(--theme-transition), color var(--theme-transition);
}

.share-btn:hover,
.share-btn:focus-visible {
  background-color: var(--theme-primary);
  color: #fff;
}

/* ===================================
   PRODUCT GALLERY
=================================== */
.product-thumb {
  background: none;
  cursor: pointer;
  transition: border-color var(--theme-transition);
}

.product-thumb:hover,
.product-thumb:focus-visible {
  border-color: var(--theme-primary) !important;
}

/* ===================================
   CUSTOM INQUIRY FORM
=================================== */
.form-control-color {
  width: 3.5rem;
  height: calc(2.5rem + 2px);
  padding: 0.35rem;
}

.reference-preview-thumb {
  width: 70px;
  height: 70px;
  object-fit: cover;
  margin-right: 0.5rem;
  margin-bottom: 0.5rem;
}