/* Template styles.css applied to root pages */

/* AGGRESSIVE BOOTSTRAP OVERRIDES - Load this last */

/* Template base styles - Force Template font and colors everywhere */
body,
html,
* {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  line-height: 1.6 !important;
  color: var(--gray-900) !important;
}

/* Restore Font Awesome font-family (prevent global override from breaking icons) */
.fa-solid, .fas { font-family: "Font Awesome 6 Free" !important; font-weight: 900 !important; font-style: normal !important; }
.fa-regular, .far { font-family: "Font Awesome 6 Free" !important; font-weight: 400 !important; font-style: normal !important; }
.fa-brands, .fab { font-family: "Font Awesome 6 Brands" !important; font-weight: 400 !important; font-style: normal !important; }

/* Template Header Styles */
.header {
    /* Frosted glass effect */
    background: rgba(255, 255, 255, 0.6) !important;
    -webkit-backdrop-filter: saturate(180%) blur(12px) !important;
    backdrop-filter: saturate(180%) blur(12px) !important;
    border-bottom: 1px solid rgba(48, 107, 172, 0.15) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08) !important;
    padding: 1rem 0 !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 1000 !important;
}

.header-content {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
}

.logo-section {
    display: flex !important;
    align-items: center !important;
}

/* Constrain header logo image size */
.logo {
    height: 48px !important;
    width: auto !important;
    display: inline-block !important;
}

.logo-text {
    color: var(--primary) !important;
    font-weight: 700 !important;
    font-size: 1.8rem !important;
    text-decoration: none !important;
}

.logo-text:hover {
    color: var(--primary-hover) !important;
    text-decoration: none !important;
}

.nav {
    display: flex !important;
    align-items: center !important;
    gap: 2rem !important;
}

.nav-link {
    color: var(--gray-700) !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    transition: color 0.3s ease !important;
    padding: 0.5rem 0 !important;
}

.nav-link:hover {
    color: var(--primary) !important;
    text-decoration: none !important;
}

.header-actions {
    display: flex !important;
    align-items: center !important;
    gap: 1rem !important;
}

/* Mobile Menu Styles */
.mobile-menu-toggle {
    display: none !important;
    flex-direction: column !important;
    background: none !important;
    border: none !important;
    cursor: pointer !important;
    padding: 0.5rem !important;
}

.mobile-menu-toggle span {
    width: 25px !important;
    height: 3px !important;
    background-color: var(--gray-700) !important;
    margin: 3px 0 !important;
    transition: 0.3s !important;
    border-radius: 2px !important;
}

.mobile-menu-toggle.open span:nth-child(1) {
    transform: rotate(-45deg) translate(-5px, 6px) !important;
}

.mobile-menu-toggle.open span:nth-child(2) {
    opacity: 0 !important;
}

.mobile-menu-toggle.open span:nth-child(3) {
    transform: rotate(45deg) translate(-5px, -6px) !important;
}

.mobile-nav {
    display: none !important;
    flex-direction: column !important;
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: 0 !important;
    background: white !important;
    border-top: 1px solid rgba(48, 107, 172, 0.1) !important;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1) !important;
    padding: 1rem !important;
    z-index: 1000 !important;
}

.mobile-nav.open {
    display: flex !important;
}

.mobile-nav-link {
    color: var(--gray-700) !important;
    text-decoration: none !important;
    padding: 0.75rem 0 !important;
    border-bottom: 1px solid var(--gray-100) !important;
    font-weight: 500 !important;
}

.mobile-nav-link:hover {
    color: var(--primary) !important;
    text-decoration: none !important;
}

.mobile-search {
    margin: 1rem 0 !important;
}

.mobile-cta {
    margin-top: 1rem !important;
    align-self: flex-start !important;
}

/* Responsive Styles */
@media (max-width: 991px) {
    .nav {
        display: none !important;
    }
    
    .mobile-menu-toggle {
        display: flex !important;
    }
    
    .header-actions .nav-link span {
        display: none !important;
    }
}

/* Color variables from Template */
:root {
  --primary: #306bac;
  --primary-hover: #2558a0;
  --light-blue: #98b9f2;
  --purple-blue: #918ef4;
  --dark-navy: #141b41;
  --blue-50: #eff6ff;
  --indigo-50: #eef2ff;
  --blue-100: #dbeafe;
  --gray-50: #f9fafb;
  --gray-100: #f3f4f6;
  --gray-600: #4b5563;
  --gray-700: #374151;
  --gray-900: #111827;

  /* Bootstrap mappings */
  --bs-primary: var(--primary);
  --bs-primary-rgb: 48, 107, 172;
  --bs-link-color: var(--primary);
  --bs-link-hover-color: var(--primary-hover);
}

/* Override Bootstrap background colors */
.bg-light,
.bg-light *,
section.bg-light {
  background: linear-gradient(135deg, var(--blue-50) 0%, var(--indigo-50) 100%) !important;
}

/* Override Bootstrap container and layout classes */
.container,
.container-fluid {
  max-width: 1280px !important;
  margin: 0 auto !important;
  padding: 0 1rem !important;
}

/* Force Template hero styling */
.hero,
section.hero,
.full-height-hero {
  position: relative !important;
  padding: 3rem 0 !important;
  overflow: hidden !important;
  background: linear-gradient(135deg, var(--blue-50) 0%, var(--indigo-50) 100%) !important;
}

@media (min-width: 768px) {
  .hero,
  section.hero,
  .full-height-hero {
    padding: 5rem 0 !important;
  }
}

/* Override Bootstrap text colors completely */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.hero-title {
  color: var(--gray-900) !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
}

.text-muted {
  color: var(--gray-600) !important;
}

.text-primary,
.text-primary * {
  color: var(--primary) !important;
}

.text-dark,
.text-dark * {
  color: var(--dark-navy) !important;
}

.text-success,
.text-success * {
  color: var(--primary) !important;
}

/* Override Bootstrap success colors with Template primary */
.btn-success,
.btn-success:not(:disabled):not(.disabled),
.btn.btn-success,
a.btn-success {
  background-color: var(--primary) !important;
  border-color: var(--primary) !important;
  color: white !important;
}

.btn-success:hover,
.btn-success:focus,
.btn-success:active,
.btn.btn-success:hover,
a.btn-success:hover {
  background-color: var(--primary-hover) !important;
  border-color: var(--primary-hover) !important;
  color: white !important;
}

.bg-primary { background-color: var(--primary) !important; }

/* Links */
a { color: var(--primary); text-decoration: none; }
a:hover, a:focus { color: var(--primary-hover); text-decoration: none; }

/* Buttons - Template style */
.btn {
  padding: 0.5rem 1rem !important;
  border: none !important;
  border-radius: 0.375rem !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  transition: all 0.2s !important;
  text-decoration: none !important;
  display: inline-block !important;
  text-align: center !important;
}

.btn-primary,
.btn-primary:not(:disabled):not(.disabled),
.btn.btn-primary,
a.btn-primary {
  background-color: var(--primary) !important;
  border-color: var(--primary) !important;
  color: white !important;
  border-radius: 0.375rem !important;
  font-weight: 500 !important;
  transition: all 0.2s !important;
  padding: 0.5rem 1rem !important;
  text-decoration: none !important;
  display: inline-block !important;
  text-align: center !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary:not(:disabled):not(.disabled):hover,
.btn-primary:not(:disabled):not(.disabled):focus,
.btn-primary:not(:disabled):not(.disabled):active,
.btn.btn-primary:hover,
.btn.btn-primary:focus,
.btn.btn-primary:active,
a.btn-primary:hover,
a.btn-primary:focus {
  background-color: var(--primary-hover) !important;
  border-color: var(--primary-hover) !important;
  color: white !important;
  box-shadow: 0 0 0 0.2rem rgba(48, 107, 172, 0.25) !important;
  text-decoration: none !important;
}

.btn-large {
  padding: 0.75rem 2rem !important;
  font-size: 1rem !important;
}

/* Cart page specific styles */
.cart-product-image { 
  width: 80px; 
  height: 80px; 
  object-fit: cover; 
  margin-right: 12px; 
}
.cart-product-placeholder { 
  width: 80px; 
  height: 80px; 
}
.quantity-form .input-group { 
  max-width: 150px; 
}

/* Checkout page specific styles */
.model-preview { 
  width: 100%; 
  height: 150px; 
  background-color: #f0f0f0; 
  border-radius: 4px; 
  position: relative; 
}
.order-item { 
  display: grid; 
  grid-template-columns: 100px 1fr auto; 
  gap: 15px; 
  padding: 15px 0; 
  border-bottom: 1px solid #ddd; 
}
.product-image { 
  width: 100px; 
}

/* Essential page loading and layout styles */
#page-wrapper { 
  opacity: 0; 
  transition: opacity 0.3s ease-in-out;
}
#page-wrapper.loaded { 
  opacity: 1; 
}

/* 3D Container sizing for index.php */
#3dContainer {
  width: 500px;
  height: 500px;
}
#tumbler-canvas {
  width: 500px !important;
  height: 500px !important;
}

/* Hero section layout */
.full-height-hero {
  height: 100vh;
  display: flex;
  align-items: center;
}

/* Inputs focus ring */
.form-control:focus,
.form-select:focus,
.btn:focus,
a:focus {
  outline: none !important;
  box-shadow: 0 0 0 0.2rem rgba(48, 107, 172, 0.25) !important;
}

/* Hero button width override (loads after demo1-integration.css) */
.hero a.btn-primary,
.hero .btn.btn-primary,
.hero a.btn-primary.btn-large,
.hero .btn.btn-primary.btn-large {
  width: auto !important;
  display: inline-block !important;
  white-space: nowrap !important;
  padding: 0.6rem 1.25rem !important; /* keep narrower padding */
}

/* Cards - Template feature-card style */
.card {
  border: 1px solid var(--blue-100) !important;
  border-radius: 0.5rem !important;
  background: white !important;
  transition: box-shadow 0.2s !important;
}

.card:hover {
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1) !important;
}

.card .card-img-top,
.card img { 
  border-top-left-radius: 0.5rem !important; 
  border-top-right-radius: 0.5rem !important; 
}

/* Navbar text harmonization */
.navbar-light .navbar-nav .nav-link { color: var(--gray-700); }
.navbar-light .navbar-nav .nav-link:hover,
.navbar-light .navbar-nav .nav-link:focus { color: var(--primary); }

/* Sections */
section.bg-white { background: #fff; }
section.bg-light,
.bg-light { background: var(--gray-50) !important; }

/* Utility rounding to match template */
.rounded,
.rounded-3 { border-radius: 0.5rem !important; }

/* Optional gradient helpers if needed */
.brand-gradient-1 { background: linear-gradient(135deg, var(--light-blue) 0%, var(--primary) 100%); }
.brand-gradient-2 { background: linear-gradient(135deg, var(--purple-blue) 0%, var(--dark-navy) 100%); }

/* Tables and badges */
.table thead th { border-bottom-color: var(--blue-100); }
.badge.bg-primary { background-color: var(--primary) !important; }

/* Placeholder tile used for missing images */
.placeholder-tile {
  background-color: #ffffff;
  border: 1px dashed var(--blue-100);
  border-radius: 0.5rem;
}

/* Footer overrides */
#tempaltemo_footer {
  padding: 4.5rem 0 !important; /* thicker space inside top & bottom */
}
#tempaltemo_footer,
#tempaltemo_footer * {
  color: #ffffff !important;
}
#tempaltemo_footer a:hover {
  color: var(--blue-100) !important;
  text-decoration: none !important;
}

/* Footer layout */
#tempaltemo_footer .footer-grid {
  display: grid !important;
  grid-template-columns: 1.5fr 1fr 1fr 1fr !important;
  gap: 2rem !important;
}

@media (max-width: 991px) {
  #tempaltemo_footer .footer-grid {
    grid-template-columns: 1fr 1fr !important;
  }
}

@media (max-width: 575px) {
  #tempaltemo_footer .footer-grid {
    grid-template-columns: 1fr !important;
  }
}

#tempaltemo_footer .footer-logo-img {
  height: 42px !important;
  width: auto !important;
  margin-right: 10px !important;
  vertical-align: middle !important;
}

#tempaltemo_footer .footer-logo-text {
  font-weight: 700 !important;
  font-size: 1.1rem !important;
  margin-left: 8px !important;
}

#tempaltemo_footer .footer-title {
  font-weight: 700 !important;
  margin-bottom: 0.75rem !important;
}

#tempaltemo_footer .footer-links a {
  display: inline-block !important;
  margin-right: 12px !important;
  margin-bottom: 8px !important;
  color: #e5e7eb !important;
}

#tempaltemo_footer .social-links {
  display: flex !important;
  gap: 10px !important;
}

#tempaltemo_footer .newsletter-form .input-group .form-control {
  height: 44px !important;
}

/* Footer bottom row */
#tempaltemo_footer .footer-bottom {
  margin-top: 2rem;
  opacity: 0.95;
  font-size: 0.875rem; /* reduce text size */
  line-height: 1.4;
}

/* Utility: remove text decoration */
a.no-decoration,
a.no-decoration:hover,
a.no-decoration:focus {
  text-decoration: none !important;
}