/*
Theme Name: Waggy
Theme URI: https://templatesjungle.com/
Author: TemplatesJungle
Author URI: https://templatesjungle.com/
Description: Waggy is specially designed product packaged for eCommerce pet store websites.
Version: 1.1
*/

/*--------------------------------------------------------------
This is main CSS file that contains custom style rules used in this template
--------------------------------------------------------------*/

/*------------------------------------*\
    Table of contents
\*------------------------------------*/

/*------------------------------------------------

CSS STRUCTURE:

1. VARIABLES

2. GENERAL TYPOGRAPHY
  2.1 General Styles
  2.2 Floating & Alignment
  2.3 Forms
  2.4 Lists
  2.5 Code
  2.6 Tables
  2.7 Spacing
  2.8 Utilities
  2.9 Misc
    - Row Border
    - Zoom Effect
  2.10 Buttons
    - Button Sizes
    - Button Shapes
    - Button Color Scheme
    - Button Aligns
  2.11 Section
    - Hero Section
    - Section Title
    - Section Paddings
    - Section Margins
    - Section Bg Colors
    - Content Colors
    - Content Borders

3. EXTENDED TYPOGRAPHY
  3.1 Blockquote / Pullquote
  3.2 Text Highlights

4. CONTENT ELEMENTS
  4.1 Tabs
  4.2 Accordions
  4.3 Brand Carousel
  4.4 Category Carousel

5. BLOG STYLES
  5.1 Blog Single Post
  5.2 About Author
  5.3 Comments List
  5.4 Comments Form3

6. SITE STRUCTURE
  6.1 Header
    - Header Menu
    - Nav Sidebar
  6.2 Billboard
  6.3 About Us Section
  6.4 Video Section
  6.5 Selling Products Section
  6.6 Quotation Section
  6.7 Latest Blogs Section
  6.8 Newsletter Section
  6.9 Instagram Section
  6.10 Footer
    - Footer Top
    - Footer Bottom

7. OTHER PAGES
  7.1 Product detail
  7.2 Shop page

    
/*--------------------------------------------------------------
/** 1. VARIABLES
--------------------------------------------------------------*/
:root {
  /* widths for rows and containers
     */
  --header-height: 160px;
  --header-height-min: 80px;
}

/* on mobile devices below 600px
 */
@media screen and (max-width: 600px) {
  :root {
    --header-height: 100px;
    --header-height-min: 80px;
  }
}

/* Theme Colors */
:root {
  /* =====================================================
     PRINCIPAL: Soft Sky Blue  -> backgrounds, fills, UI
     ACCENT:    Warm Cream     -> prices, stars, specials
     ===================================================== */
  --color-principal: #e4f0fc;       /* PRINCIPAL - main brand blue */
  --color-principal-mid: #a8cef5;   /* medium blue - borders */
  --color-principal-dark: #2e7fd4;  /* deep blue - text, icons */
  --color-principal-darker: #1a5fa0; /* darkest blue - hover */

  --color-accent: #fefad5;          /* ACCENT - warm yellow detail */
  --color-accent-mid: #f5dfa0;      /* medium yellow - accent borders */
  --color-accent-dark: #c79a10;     /* deep amber - accent text */

  /* Neutrals */
  --dark-color: #1a1a2e;
  --light-dark-color: #5a5a72;
  --light-color: #ffffff;
  --grey-color: #e0e0e0;
  --light-grey-color: #f4f8fd;      /* very light blue-tinted white */

  /* Legacy aliases */
  --accent-color: #2e7fd4;
  --primary-color: #2e7fd4;
  --light-primary-color: #e4f0fc;
}

/* Fonts */
:root {
  --body-font: 'Outfit', sans-serif;
  --heading-font: 'Outfit', sans-serif;
  --secondary-font: 'Outfit', sans-serif;
}


body {
  --bs-link-color: #2e7fd4;
  --bs-link-hover-color: #1a5fa0;

  --bs-link-color-rgb: 46, 127, 212;
  --bs-link-hover-color-rgb: 26, 95, 160;

  --bs-light-rgb: 228, 240, 252;  /* blue-tinted light */

  --bs-font-sans-serif: 'Outfit', sans-serif;
  --bs-body-font-family: var(--bs-font-sans-serif);
  --bs-body-font-size: 1rem;
  --bs-body-font-weight: 400;
  --bs-body-line-height: 2;
  --bs-body-color: #1a1a2e;

  /* Bootstrap primary = deep blue (used by .text-primary, .badge, etc.) */
  --bs-primary: #2e7fd4;
  --bs-primary-rgb: 46, 127, 212;

  --bs-primary-bg-subtle: #e4f0fc;
  --bs-border-color: #cde0f7;

  --bs-secondary-rgb: 228, 240, 252;
  --bs-success-rgb: 228, 240, 252;
  --bs-danger-rgb: 249, 235, 231;
  --bs-warning-rgb: 254, 250, 213;  /* yellow-tinted for warnings */
  --bs-info-rgb: 228, 240, 252;
}

/* ---------------------------------------------------
   PRIMARY BUTTON  (PRINCIPAL = blue)
   Background : #e4f0fc  (soft blue fill)
   Text       : #1a5fa0  (deep blue, readable)
   Border     : #a8cef5  (soft blue ring)
   Hover bg   : #fefad5  (yellow accent = action signal)
   Hover text : #7a5800  (dark amber, readable on yellow)
   --------------------------------------------------- */
.btn-primary {
  padding: 1.2rem 3rem;
  --bs-btn-color: #1a5fa0;
  --bs-btn-bg: #e4f0fc;
  --bs-btn-border-color: #a8cef5;
  --bs-btn-hover-color: #7a5800;
  --bs-btn-hover-bg: #fefad5;
  --bs-btn-hover-border-color: #f5dfa0;
  --bs-btn-focus-shadow-rgb: 46, 127, 212;
  --bs-btn-active-color: #1a5fa0;
  --bs-btn-active-bg: #cce3fa;
  --bs-btn-active-border-color: #a8cef5;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(46, 127, 212, 0.1);
  --bs-btn-disabled-color: #8aafcc;
  --bs-btn-disabled-bg: #e4f0fc;
  --bs-btn-disabled-border-color: #c5ddf7;
}

/* ---------------------------------------------------
   OUTLINE PRIMARY BUTTON  (PRINCIPAL = blue border)
   Text/Border : #2e7fd4  (deep blue)
   Hover fill  : #e4f0fc  (blue fill on hover)
   --------------------------------------------------- */
.btn-outline-primary {
  transition: all 0.3s ease-in;
  padding: 1.2rem 3rem;
  letter-spacing: 0.02375rem;
  --bs-btn-color: #2e7fd4;
  --bs-btn-border-color: #2e7fd4;
  --bs-btn-hover-color: #1a5fa0;
  --bs-btn-hover-bg: #e4f0fc;
  --bs-btn-hover-border-color: #2e7fd4;
  --bs-btn-focus-shadow-rgb: 46, 127, 212;
  --bs-btn-active-color: #1a5fa0;
  --bs-btn-active-bg: #e4f0fc;
  --bs-btn-active-border-color: #2e7fd4;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(46, 127, 212, 0.1);
  --bs-btn-disabled-color: #8aafcc;
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: #a8cef5;
  --bs-gradient: none;
}

.btn-outline-dark {
  transition: all 0.3s ease-in;
  padding: 1.2rem 3rem;
  letter-spacing: 0.02375rem;
  text-transform: uppercase;
  --bs-btn-color: #41403E;
  --bs-btn-border-color: #41403E;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #41403E;
  --bs-btn-hover-border-color: #41403E;
  --bs-btn-focus-shadow-rgb: 33, 37, 41;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #41403E;
  --bs-btn-active-border-color: #41403E;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #41403E;
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: #41403E;
  --bs-gradient: none;
}

.btn-dark {
  padding: 1.2rem 3rem;
  font-size: 1.1875rem;
  text-transform: uppercase;
  --bs-btn-color: #fff;
  --bs-btn-bg: #41403E;
  --bs-btn-border-color: #41403E;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #363533;
  --bs-btn-hover-border-color: #363533;
  --bs-btn-focus-shadow-rgb: 66, 70, 73;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #41403E;
  --bs-btn-active-border-color: #41403E;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #41403E;
  --bs-btn-disabled-border-color: #41403E;
}

@media screen and (max-width:991px) {

  .btn-primary,
  .btn-outline-primary,
  .btn-outline-dark,
  .btn-dark {
    padding: 0.6rem 1.5rem;
    font-size: 1rem;
  }
}

body {
  letter-spacing: 0.01625rem;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--heading-font);
  color: var(--bs-body-color);
  font-weight: 400;
  text-transform: capitalize;
}

a {
  text-decoration: none;
}

.breadcrumb.text-white {
  --bs-breadcrumb-divider-color: #fff;
  --bs-breadcrumb-item-active-color: var(--bs-primary);
}

.dropdown-menu {
  --bs-dropdown-link-active-bg: var(--bs-primary);
}

.secondary-font {
  font-family: var(--secondary-font);
  font-weight: 300;
}

/*----------------------------------------------*/
/* 6. SITE STRUCTURE */
/*----------------------------------------------*/
/* 6.1 Header
--------------------------------------------------------------*/
/* Preloader */
.preloader-wrapper {
  width: 100%;
  height: 100vh;
  margin: 0 auto;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 111;
  background: #fff;
}

.preloader-wrapper .preloader {
  margin: 20% auto 0;
  transform: translateZ(0);
}

.preloader:before,
.preloader:after {
  content: '';
  position: absolute;
  top: 0;
}

.preloader:before,
.preloader:after,
.preloader {
  border-radius: 50%;
  width: 2em;
  height: 2em;
  animation: animation 1.2s infinite ease-in-out;
}

.preloader {
  animation-delay: -0.16s;
}

.preloader:before {
  left: -3.5em;
  animation-delay: -0.32s;
}

.preloader:after {
  left: 3.5em;
}

@keyframes animation {

  0%,
  80%,
  100% {
    box-shadow: 0 2em 0 -1em var(--accent-color);
  }

  40% {
    box-shadow: 0 2em 0 0 var(--accent-color);
  }
}


/* search bar style  */
.search-bar {
  border: 1px solid #EAEAEA;
}

.search-bar ::placeholder {
  font-family: var(--secondary-font);
}

.form-control:focus {
  color: var(--bs-body-color);
  background-color: var(--bs-body-bg);
  border-color: #86b7fe;
  outline: 0;
  box-shadow: none;
}


/* nav bar style  */
.navbar-nav .nav-link.active,
.navbar-nav .nav-link.show,
.nav-link:focus,
.nav-link:hover {
  color: var(--accent-color);
}

/* category style */
iconify-icon.category-icon {
  color: #e4f0fc99;
  font-size: 100px;
  transition: all 0.3s ease-in;

}

a.categories-item:hover iconify-icon.category-icon {
  color: #e4f0fc;
}


/* banner style */
.swiper-pagination-bullet {
  border: 1px solid var(--bs-body-color);
  background-color: transparent;
  opacity: 1;
  width: var(--swiper-pagination-bullet-width, var(--swiper-pagination-bullet-size, 15px));
  height: var(--swiper-pagination-bullet-height, var(--swiper-pagination-bullet-size, 15px));
}

.swiper-pagination-bullet.swiper-pagination-bullet-active {
  background-color: var(--bs-body-color);
  background: var(--bs-body-color);
}

.swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet,
.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
  margin: 0 var(--swiper-pagination-bullet-horizontal-gap, 8px);
}



/* pet clothing */
.card {
  --bs-card-inner-border-radius: none;
  --bs-card-bg: transparent;
  background-color: transparent;
  border: none;
}

a.btn-cart {
  border-radius: 0.25rem;
  border: 1px solid rgba(65, 64, 62, 0.20);
}

a.btn-wishlist {

  border-radius: 0.25rem;
  border: 1px solid rgba(65, 64, 62, 0.20);
}


/* pet foodies style  */
button.filter-button {
  letter-spacing: 0.02125rem;
  border: none;
  border-bottom: 2px solid #D9D9D8;
  background: transparent;
  text-transform: uppercase;
  font-size: 1.0625rem;
  transition: all 0.3s ease-in;
}

button.filter-button.active,
button.filter-button:hover {
  border-bottom: 2px solid #e4f0fc;
}

/* testimonial style  */
.testimonial-content {
  color: #908F8D;
}

iconify-icon.quote-icon {
  color: #F7EEE4;
  font-size: 14rem;
}


/* register form  */
.form-control {
  color: #908F8D;
  line-height: normal;
  letter-spacing: 0.02125rem;
  text-transform: capitalize;
  border-radius: 0.25rem;
  border: 1px solid rgba(65, 64, 62, 0.20);
  background: #FFF;
  display: flex;
  padding: 1.25rem 0rem 1.25rem 1.25rem;
  align-items: center;
  gap: 0.375rem;
  align-self: stretch;
}

.form-control:focus {
  border-color: #41403E;
}


/* blog style */
.blog-paragraph {
  color: #908F8D;
  font-size: 1rem;
  font-weight: 400;
  line-height: normal;
  font-family: var(--secondary-font);
}

.blog-read {
  color: #908F8D;
  font-size: 1rem;
  letter-spacing: 0.02rem;
  text-transform: uppercase;
}

a.blog-read {
  border-bottom: 3px solid #D9D9D8;
  transition: all 0.3s ease-in;
}

a.blog-read:hover {
  border-bottom: 3px solid #8a8a8a;
}


/* services style  */
.service-icon {
  font-size: 30px;
  border-radius: 3.125rem;
  border: 1px solid #D9D9D8;
  padding: 1.25rem;
}


/* insta style  */
.instagram-item:hover:before,
.instagram-item:hover .icon-overlay {
  opacity: 1;
  cursor: pointer;
}

.icon-overlay {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  align-items: center;
  font-size: 3rem;
  cursor: pointer;
  opacity: 0;
  -moz-transition: 0.8s ease;
  -webkit-transition: 0.8s ease;
  transition: 0.8s ease;
}


/* footer style */
iconify-icon.social-icon {
  color: #CACACA;
  font-size: 1.125rem;
  padding: 0.75rem;
  border-radius: 4.375rem;
  border: 1px solid #D9D9D8;
  box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.03);
  transition: all 0.5s ease;
}

li.social:hover iconify-icon.social-icon {
  color: #FFF;
  border: 1px solid #e4f0fc;
  background: #e4f0fc;
}

iconify-icon.send-icon {
  cursor: pointer;
  font-size: 1.125rem;
  padding: 0.75rem;
  border-radius: 4.375rem;
  color: #FFF;
  border: 1px solid #e4f0fc;
  background: #e4f0fc;
}


@media screen and (max-width: 991px) {

  /* offcanvas menu */
  .offcanvas-body .nav-item {
    font-weight: 700;
    border-bottom: 1px solid #d1d1d1;
  }

  .offcanvas-body .filter-categories {
    width: 100%;
    margin-bottom: 20px !important;
    border: 1px solid #d1d1d1 !important;
    padding: 14px;
    border-radius: 8px;
  }

  /* dropdown-menu */
  .dropdown-menu {
    padding: 0;
    border: none;
    line-height: 1.4;
    font-size: 0.9em;
  }

  .dropdown-menu a {
    padding-left: 0;
  }

  .dropdown-toggle::after {
    position: absolute;
    right: 0;
    top: 21px;
  }
}


/*--------------------------------------------------------------
faqs section style start
--------------------------------------------------------------*/
.accordion-button:not(.collapsed) {
  color: var(--body-text-color);
  background-color: transparent;
  box-shadow: none;
}

.accordion {
  --bs-accordion-color: var(--light-text-color);
  --bs-accordion-bg: none;
  --bs-accordion-btn-color: var(--body-text-color);
}

.accordion-button:not(.collapsed)::after {
  background-image: url('https://api.iconify.design/eva/arrow-down-fill.svg?color=%2341403e');

}

.accordion-button::after {
  background-image: url('https://api.iconify.design/eva/arrow-down-fill.svg?color=%2341403e');
}

.accordion-button:focus {
  z-index: 3;
  border-color: none;
  box-shadow: none;
}

/*--------------------------------------------------------------
Account section style start
--------------------------------------------------------------*/
.nav-tabs .nav-item.show .nav-link,
.nav-tabs .nav-link.active {
  color: var(--accent-color);
}


/*--------------------------------------------------------------
Blog section style start
--------------------------------------------------------------*/
/* ------ Pagination ------*/
.pagination .page-numbers {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  color: var(--bs-body-color);
  padding: 0 10px;
  line-height: 1.4;
  transition: 0.9s all;
  border-radius: 8px;
}

.pagination .page-numbers:hover,
.pagination .page-numbers.current {
  color: var(--accent-color);
}

iconify-icon.pagination-arrow {
  color: var(--bs-body-color);
  transition: 0.9s all;
}

iconify-icon.pagination-arrow:hover {
  color: var(--accent-color);
}


/*--------------------------------------------------------------
Single Product section style start
--------------------------------------------------------------*/
.nav-pills .nav-link.active,
.nav-pills .show>.nav-link {
  color: var(--light-color);
  background-color: var(--accent-color);
}


/*--------------------------------------------------------------
  RESPONSIVE OVERHAUL & UX POLISH
--------------------------------------------------------------*/

/* Prevent horizontal overflow on all devices */
html, body {
  overflow-x: hidden;
}

/* Product card hover effects */
.product-card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  border-radius: 12px;
}

.product-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.1);
}

.product-card img {
  transition: transform 0.4s ease;
}

.product-card:hover img {
  transform: scale(1.03);
}

/* Discount badge */
.discount-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 10;
  background: #e03131;
  color: #fff;
  font-family: var(--secondary-font);
  font-weight: 700;
  font-size: 0.85rem;
  padding: 4px 10px;
  border-radius: 6px;
  letter-spacing: 0.02rem;
}

/* New product badge */
.new-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 10;
  background: #e4f0fc;
  color: #fff;
  font-family: var(--secondary-font);
  font-weight: 700;
  font-size: 0.75rem;
  padding: 4px 10px;
  border-radius: 6px;
  text-transform: uppercase;
  letter-spacing: 0.05rem;
}

/* Cart quantity controls */
.cart-qty-btn {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid #dee2e6;
  background: #f8f9fa;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-weight: 700;
  font-size: 0.9rem;
  transition: all 0.2s ease;
  color: #333;
}

.cart-qty-btn:hover {
  background: #e4f0fc;
  color: #fff;
  border-color: #e4f0fc;
}

/* Empty cart state */
.empty-cart-message {
  text-align: center;
  padding: 40px 20px;
}

.empty-cart-message iconify-icon {
  font-size: 3rem;
  color: #dee2e6;
  margin-bottom: 10px;
}


/*--------------------------------------------------------------
  MOBILE RESPONSIVE (max-width: 768px)
--------------------------------------------------------------*/
@media screen and (max-width: 768px) {
  /* Scale down large headings */
  .display-1 {
    font-size: 2.2rem !important;
  }

  .display-3 {
    font-size: 1.6rem !important;
  }

  /* Reduce category icon size */
  iconify-icon.category-icon {
    font-size: 55px;
  }

  /* Tighter product card buttons */
  .product-card .btn-primary,
  .product-card .btn-outline-dark {
    padding: 0.5rem 0.8rem !important;
    font-size: 0.8rem;
  }

  .product-card .btn-primary h5 {
    font-size: 0.75rem !important;
  }

  /* Reduce product image height on mobile */
  .product-card img.product-img {
    height: 180px !important;
  }

  /* Compact card body */
  .product-card .card-title {
    font-size: 1rem;
  }

  .product-card .secondary-font {
    font-size: 0.9rem;
  }

  /* Banner text adjustments */
  .banner-title {
    font-size: 1.8rem !important;
  }

  /* Section padding reduction */
  .section-header {
    flex-direction: column;
    text-align: center;
    gap: 10px;
  }

  /* Footer spacing */
  #footer .footer-menu {
    margin-bottom: 30px;
  }

  /* Service cards stacking */
  #service .card {
    text-align: center;
  }
}


/*--------------------------------------------------------------
  SMALL MOBILE (max-width: 480px)
--------------------------------------------------------------*/
@media screen and (max-width: 480px) {
  .display-1 {
    font-size: 1.8rem !important;
  }

  .display-3 {
    font-size: 1.3rem !important;
  }

  iconify-icon.category-icon {
    font-size: 40px;
  }

  #categories h5 {
    font-size: 0.7rem;
  }

  /* Hide wishlist button on very small screens to save space */
  .product-card .add-to-wishlist-btn {
    display: none;
  }

  /* Make add to cart full width */
  .product-card .add-to-cart-btn {
    width: 100%;
  }
}


/*--------------------------------------------------------------
  ADMIN DASHBOARD MOBILE
--------------------------------------------------------------*/
.admin-mobile-header {
  background: #343a40;
  padding: 12px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.admin-mobile-header h5 {
  color: #fff;
  margin: 0;
}

.admin-mobile-header .btn {
  color: #fff;
  font-size: 1.5rem;
  padding: 0;
  line-height: 1;
}

/* Status badges */
.status-badge {
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 600;
  font-family: var(--secondary-font);
  text-transform: capitalize;
}

.status-pending {
  background: #fff3cd;
  color: #856404;
}

  padding: 4px 10px;
  border-radius: 6px;
  letter-spacing: 0.02rem;
}

/* New product badge */
.new-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 10;
  background: #e4f0fc;
  color: #fff;
  font-family: var(--secondary-font);
  font-weight: 700;
  font-size: 0.75rem;
  padding: 4px 10px;
  border-radius: 6px;
  text-transform: uppercase;
  letter-spacing: 0.05rem;
}

/* Cart quantity controls */
.cart-qty-btn {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid #dee2e6;
  background: #f8f9fa;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-weight: 700;
  font-size: 0.9rem;
  transition: all 0.2s ease;
  color: #333;
}

.cart-qty-btn:hover {
  background: #e4f0fc;
  color: #fff;
  border-color: #e4f0fc;
}

/* Empty cart state */
.empty-cart-message {
  text-align: center;
  padding: 40px 20px;
}

.empty-cart-message iconify-icon {
  font-size: 3rem;
  color: #dee2e6;
  margin-bottom: 10px;
}


/*--------------------------------------------------------------
  MOBILE RESPONSIVE (max-width: 768px)
--------------------------------------------------------------*/
@media screen and (max-width: 768px) {
  /* Scale down large headings */
  .display-1 {
    font-size: 2.2rem !important;
  }

  .display-3 {
    font-size: 1.6rem !important;
  }

  /* Reduce category icon size */
  iconify-icon.category-icon {
    font-size: 55px;
  }

  /* Tighter product card buttons */
  .product-card .btn-primary,
  .product-card .btn-outline-dark {
    padding: 0.5rem 0.8rem !important;
    font-size: 0.8rem;
  }

  .product-card .btn-primary h5 {
    font-size: 0.75rem !important;
  }

  /* Reduce product image height on mobile */
  .product-card img.product-img {
    height: 180px !important;
  }

  /* Compact card body */
  .product-card .card-title {
    font-size: 1rem;
  }

  .product-card .secondary-font {
    font-size: 0.9rem;
  }

  /* Banner text adjustments */
  .banner-title {
    font-size: 1.8rem !important;
  }

  /* Section padding reduction */
  .section-header {
    flex-direction: column;
    text-align: center;
    gap: 10px;
  }

  /* Footer spacing */
  #footer .footer-menu {
    margin-bottom: 30px;
  }

  /* Service cards stacking */
  #service .card {
    text-align: center;
  }
}


/*--------------------------------------------------------------
  SMALL MOBILE (max-width: 480px)
--------------------------------------------------------------*/
@media screen and (max-width: 480px) {
  .display-1 {
    font-size: 1.8rem !important;
  }

  .display-3 {
    font-size: 1.3rem !important;
  }

  iconify-icon.category-icon {
    font-size: 40px;
  }

  #categories h5 {
    font-size: 0.7rem;
  }

  /* Hide wishlist button on very small screens to save space */
  .product-card .add-to-wishlist-btn {
    display: none;
  }

  /* Make add to cart full width */
  .product-card .add-to-cart-btn {
    width: 100%;
  }
}


/*--------------------------------------------------------------
  ADMIN DASHBOARD MOBILE
--------------------------------------------------------------*/
.admin-mobile-header {
  background: #ffffff;
  padding: 12px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

.admin-mobile-header h5 {
  color: #222222;
  margin: 0;
  font-weight: 700;
}

.admin-mobile-header .btn {
  color: #222222;
  font-size: 1.5rem;
  padding: 0;
  line-height: 1;
}

/* Status badges */
.status-badge {
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 600;
  font-family: var(--secondary-font);
  text-transform: capitalize;
}

.status-pending {
  background: #fff3cd;
  color: #856404;
}

.status-processing {
  background: #cce5ff;
  color: #004085;
}

.status-shipped {
  background: #e4f0fc;
  color: #1a5fa0;
}

.status-delivered {
  background: #d1ecf1;
  color: #2e7fd4;
}

.status-cancelled {
  background: #f8d7da;
  color: #721c24;
}

/* --------------------------------------------------------------
   PREMIUM ADMIN DASHBOARD STYLES
-------------------------------------------------------------- */

body.admin-dashboard-body {
  background-color: #F8F9FA !important;
  color: #333;
}

/* Harmonic Light Sidebar */
.admin-sidebar {
  background-color: #ffffff !important;
  min-height: 100vh;
  box-shadow: 2px 0 15px rgba(0,0,0,0.03);
  padding-top: 2rem;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  border-right: 1px solid #f1f3f5;
}

.admin-sidebar h3 {
  color: #222222 !important;
  font-weight: 700;
  letter-spacing: 0.5px;
}

.admin-sidebar a, #adminSidebar a {
  color: #727272 !important;
  text-decoration: none;
  padding: 14px 24px;
  display: flex;
  align-items: center;
  font-size: 16px;
  font-weight: 600;
  transition: all 0.3s ease;
  border-left: 4px solid transparent;
  margin-bottom: 2px;
}

.admin-sidebar a iconify-icon, #adminSidebar a iconify-icon {
  font-size: 22px;
  margin-right: 12px;
  transition: transform 0.3s ease;
}

.admin-sidebar a:hover, .admin-sidebar a.active,
#adminSidebar a:hover, #adminSidebar a.active {
  color: #e4f0fc !important;
  background-color: #fefad5;
  border-left: 4px solid #e4f0fc;
}

.admin-sidebar a:hover iconify-icon, #adminSidebar a:hover iconify-icon {
  transform: translateX(3px);
}

/* Dashboard Main Content */
.dashboard-content {
  padding: 1.5rem 3rem 3rem 3rem;
  min-height: 100vh;
}

/* Soft Shadow Stat Cards */
.stat-card {
  background: #ffffff;
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
  border: 1px solid rgba(0,0,0,0.02);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  position: relative;
  overflow: hidden;
}

.stat-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

.stat-card iconify-icon {
  font-size: 2.5rem;
  color: #e4f0fc;
  opacity: 0.9;
}

.stat-card h5 {
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 600;
  color: #6c757d;
  margin-top: 10px;
}

.stat-card h3 {
  font-size: 2rem;
  font-weight: 700;
  color: #212529;
}

/* Modern Tables */
.card.border-0.shadow-sm {
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05) !important;
  overflow: hidden;
}

.table-modern {
  border-collapse: separate !important;
  border-spacing: 0;
  margin: 0;
}

.table-modern thead th {
  border-bottom: none;
  background-color: #F8F9FA;
  color: #495057;
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.85rem;
  letter-spacing: 0.5px;
  padding: 1rem 1.5rem;
}

.table-modern tbody td {
  padding: 1rem 1.5rem;
  vertical-align: middle;
  border-bottom: 1px solid #f1f3f5;
  color: #495057;
  font-size: 0.95rem;
  transition: background-color 0.2s ease;
}

.table-modern tbody tr:hover td {
  background-color: #f8f9fa;
}

.table-modern tbody tr:last-child td {
  border-bottom: none;
}

/* Fade-in Animation for Sections */
.fade-in-section {
  animation: fadeIn 0.4s ease-in-out;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Admin Dashboard Specific Typography */
.dashboard-content h2 {
  font-weight: 700;
  color: #212529;
  letter-spacing: -0.5px;
}

/* Button Refinements */
.dashboard-content .btn-primary {
  background-color: #e4f0fc;
  border-color: #e4f0fc;
  border-radius: 8px;
  font-weight: 600;
  padding: 0.6rem 1.2rem;
  box-shadow: 0 4px 10px rgba(229, 241, 253, 0.2);
}

.dashboard-content .btn-primary:hover {
  background-color: #1a5fa0;
  transform: translateY(-1px);
  box-shadow: 0 6px 15px rgba(229, 241, 253, 0.3);
}

.dashboard-content .btn-outline-primary {
  color: #e4f0fc;
  border-color: #e4f0fc;
  border-radius: 6px;
}

.dashboard-content .btn-outline-primary:hover {
  background-color: #e4f0fc;
  color: white;
}

/* Default Chart Size (Desktop) */
.chart-container {
  position: relative;
  height: 350px;
  width: 100%;
}

@media screen and (max-width: 768px) {
  .dashboard-content {
    /* Add a clean 80px space below the fixed navbar so it doesn't overlap the text */
    padding: 80px 15px 25px 15px !important;
  }
  
  .admin-mobile-header {
    margin-bottom: 0 !important;
  }

  /* Compact Chart Size (Mobile) */
  .chart-container {
    height: 220px;
  }
  
  /* Reduce huge text sizes on mobile dashboard */
  .stat-card h3 {
    font-size: 1.5rem;
  }
  
  .dashboard-content h2 {
    font-size: 1.5rem;
    margin-top: 0 !important;
    margin-bottom: 1rem !important;
    line-height: 1.2;
  }
}

/*--------------------------------------------------------------
Mobile Responsive Table Cards
--------------------------------------------------------------*/
@media (max-width: 768px) {
  .table-responsive .table-modern thead {
    display: none;
  }
  .table-responsive .table-modern tbody tr {
    display: block;
    margin-bottom: 1rem;
    border: 1px solid rgba(0,0,0,0.1);
    border-radius: 8px;
    padding: 10px;
    background: #fff;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
  }
  .table-responsive .table-modern tbody td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(0,0,0,0.05);
    padding: 10px 5px !important;
    text-align: right;
  }
  .table-responsive .table-modern tbody td:last-child {
    border-bottom: none;
  }
  .table-responsive .table-modern tbody td::before {
    content: attr(data-label);
    font-weight: 700;
    color: var(--light-text-color);
    text-align: left;
    margin-right: 15px;
  }
  .table-responsive .table-modern tbody td select, 
  .table-responsive .table-modern tbody td button {
    margin-left: auto;
  }
}


/* Admin Night Mode Overrides */





/* Mobile UI Enhancements */
@media (max-width: 991px) {
    .mobile-scroll-x { display: flex !important; flex-wrap: nowrap !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch; padding-bottom: 10px; scroll-snap-type: x mandatory; }
    .mobile-scroll-x > * { scroll-snap-align: start; flex: 0 0 auto; margin-right: 15px; }
    .mobile-scroll-x::-webkit-scrollbar { height: 0px; display: none; }
    .sticky-mobile-cta { position: fixed !important; bottom: 0 !important; left: 0 !important; width: 100% !important; background: #fff; padding: 15px; box-shadow: 0 -4px 12px rgba(0,0,0,0.1); z-index: 1030; display: flex; align-items: center; justify-content: space-between; border-top-left-radius: 16px; border-top-right-radius: 16px; margin-bottom: 0 !important; }
    #offcanvasCart { width: 100% !important; }
    .navbar-brand img { height: 35px !important; }
}

@media (max-width: 991px) { .py-5 { padding-top: 2rem !important; padding-bottom: 2rem !important; } .my-5 { margin-top: 2rem !important; margin-bottom: 2rem !important; } .p-5 { padding: 1.5rem !important; } }

/* Search Auto-Complete Dropdown */
.search-bar form {
  position: relative;
}

.search-autocomplete-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(0,0,0,0.1);
  border-radius: 0 0 12px 12px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.1);
  z-index: 9999;
  max-height: 400px;
  overflow-y: auto;
  margin-top: 5px;
  padding: 0;
  list-style: none;
  display: none;
  text-align: left;
}

.search-autocomplete-dropdown.active {
  display: block;
}

.search-autocomplete-item {
  display: flex;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(0,0,0,0.05);
  cursor: pointer;
  transition: background 0.2s;
  text-decoration: none;
  color: #333;
}

.search-autocomplete-item:last-child {
  border-bottom: none;
  border-radius: 0 0 12px 12px;
}

.search-autocomplete-item:hover {
  background: rgba(0,0,0,0.03);
}

.search-autocomplete-img {
  width: 40px;
  height: 40px;
  object-fit: cover;
  border-radius: 6px;
  margin-right: 12px;
  flex-shrink: 0;
}

.search-autocomplete-details {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.search-autocomplete-name {
  font-weight: 600;
  font-size: 0.95rem;
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.search-autocomplete-price {
  font-size: 0.85rem;
  color: #007bff;
  font-weight: 700;
}

.search-autocomplete-empty {
  padding: 20px;
  text-align: center;
  color: #777;
  font-style: italic;
}

.text-primary { color: #222222 !important; }

/* ================================================================
   FINAL DESIGN SYSTEM OVERRIDES
   PRINCIPAL  (#e4f0fc / #2e7fd4)  = dominant blue everywhere
   ACCENT     (#fefad5 / #c79a10)  = yellow only for special details
   ================================================================ */

/* --- TEXT & ICONS -------------------------------------------- */
/* Primary text/icons -> deep readable blue */
.text-primary { color: #2e7fd4 !important; }
a.text-primary:hover { color: #1a5fa0 !important; }
.service-icon { color: #2e7fd4; }

/* Price/product value -> warm amber (accent) */
h3.secondary-font.text-primary,
.secondary-font.text-primary {
  color: #c79a10 !important;
}

/* Star ratings -> warm amber (accent detail) */
.rating iconify-icon,
iconify-icon[icon*="star"] {
  color: #c79a10 !important;
}

/* --- BACKGROUNDS --------------------------------------------- */
/* Alternate section bg -> principal light blue */
.bg-light { background-color: #e4f0fc !important; }

/* Page body background -> very light blue tint */
body { background-color: #f7fbff; }

/* --- BADGES & CHIPS ------------------------------------------ */
/* Main badges -> deep blue (principal) */
.badge.bg-primary,
.badge.rounded-circle.bg-primary {
  background-color: #2e7fd4 !important;
  color: #fff !important;
}

/* "NEW" product badge -> deep blue */
.new-badge {
  background: #2e7fd4 !important;
  color: #fff !important;
}

/* "SALE/DISCOUNT" badge -> amber accent */
.discount-badge {
  background: #c79a10 !important;
  color: #fff !important;
}

/* --- NAVIGATION & LINKS ------------------------------------- */
.nav-link:hover,
.nav-link.active { color: #2e7fd4 !important; }

.nav-tabs .nav-link.active {
  color: #2e7fd4 !important;
  border-color: #2e7fd4 transparent !important;
}

/* --- FORM ELEMENTS ------------------------------------------ */
.form-control:focus,
.form-select:focus {
  border-color: #a8cef5 !important;
  box-shadow: 0 0 0 0.25rem rgba(46, 127, 212, 0.18) !important;
}

/* --- CART & WISHLIST BUTTONS -------------------------------- */
.cart-qty-btn:hover {
  background: #2e7fd4 !important;
  color: #fff !important;
  border-color: #2e7fd4 !important;
}

/* --- STICKY MOBILE CTA ------------------------------------- */
.sticky-mobile-cta { background: #e4f0fc !important; }

/* --- ADMIN SIDEBAR ----------------------------------------- */
.admin-sidebar a:hover, .admin-sidebar a.active,
#adminSidebar a:hover, #adminSidebar a.active {
  color: #2e7fd4 !important;
  background-color: #e4f0fc !important;
  border-left: 4px solid #2e7fd4 !important;
}

/* --- ADMIN STAT CARD ICONS --------------------------------- */
.stat-card iconify-icon { color: #2e7fd4 !important; }

/* --- DASHBOARD BUTTONS ------------------------------------- */
.dashboard-content .btn-primary {
  background-color: #e4f0fc !important;
  border-color: #a8cef5 !important;
  color: #1a5fa0 !important;
}
.dashboard-content .btn-primary:hover {
  background-color: #fefad5 !important;
  border-color: #f5dfa0 !important;
  color: #7a5800 !important;
}
.dashboard-content .btn-outline-primary {
  color: #2e7fd4 !important;
  border-color: #2e7fd4 !important;
}
.dashboard-content .btn-outline-primary:hover {
  background-color: #e4f0fc !important;
  color: #1a5fa0 !important;
}

/* --- ORDER STATUS BADGES ----------------------------------- */
/* Pending -> yellow accent */
.status-pending   { background: #fefad5 !important; color: #7a5800 !important; }
/* Processing -> blue principal */
.status-processing{ background: #e4f0fc !important; color: #1a5fa0 !important; }
/* Shipped -> slightly deeper blue */
.status-shipped   { background: #cce3fa !important; color: #1a5fa0 !important; }
/* Delivered -> deep blue text on blue bg */
.status-delivered { background: #b8d6f7 !important; color: #0d3d6e !important; }
/* Cancelled -> keeps red (danger) */

/* --- ALERT SUCCESS -> blue tint (principal) ----------------- */
.alert-success {
  background-color: #e4f0fc !important;
  border-color: #a8cef5 !important;
  color: #1a5fa0 !important;
}
.bg-success { background-color: #e4f0fc !important; color: #1a5fa0 !important; }
.text-success { color: #2e7fd4 !important; }
.badge.bg-success { background-color: #2e7fd4 !important; color: #fff !important; }

/* --- BTN SUCCESS -> blue principal -------------------------- */
.btn-success {
  background-color: #e4f0fc !important;
  border-color: #a8cef5 !important;
  color: #1a5fa0 !important;
}
.btn-success:hover {
  background-color: #fefad5 !important;
  border-color: #f5dfa0 !important;
  color: #7a5800 !important;
}


/* ============================================================
   TOP INFO BAR
   ============================================================ */
#top-info-bar {
  background-color: rgba(46, 127, 212, 0.75);
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.85rem;
  font-family: var(--body-font);
  padding: 7px 0;
  letter-spacing: 0.02rem;
  z-index: 1100;
  position: relative;
  backdrop-filter: blur(4px);
}

#top-info-bar a {
  color: rgba(255, 255, 255, 0.82);
  text-decoration: none;
  transition: color 0.2s ease;
}

#top-info-bar a:hover {
  color: #fefad5;
}

.top-bar-location {
  display: flex;
  align-items: center;
  gap: 6px;
}

.top-bar-whatsapp {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(255,255,255,0.15);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  transition: background-color 0.25s ease, transform 0.2s ease;
}

.top-bar-whatsapp:hover {
  background-color: #fefad5 !important;
  color: #1a1a2e !important;
  transform: scale(1.1);
}

.top-bar-whatsapp iconify-icon {
  font-size: 1.3rem;
  line-height: 1;
}

@media (max-width: 576px) {
  #top-info-bar .top-bar-location span {
    display: none;
  }
  .top-bar-whatsapp {
    padding: 4px 10px;
    font-size: 0.8rem;
  }
}

/* ============================================================
   TOP BAR MARQUEE TICKER
   ============================================================ */
.top-bar-marquee-wrapper {
  flex: 1;
  overflow: hidden;
  margin: 0 16px;
  position: relative;
}

/* fade edges */
.top-bar-marquee-wrapper::before,
.top-bar-marquee-wrapper::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 30px;
  z-index: 2;
  pointer-events: none;
}
.top-bar-marquee-wrapper::before {
  left: 0;
  background: linear-gradient(to right, rgba(46,127,212,0.75), transparent);
}
.top-bar-marquee-wrapper::after {
  right: 0;
  background: linear-gradient(to left, rgba(46,127,212,0.75), transparent);
}

.top-bar-marquee-track {
  display: flex;
  width: max-content;
  animation: marquee-scroll 22s linear infinite;
  gap: 60px;
  align-items: center;
}

.top-bar-marquee-track:hover {
  animation-play-state: paused;
}

.top-bar-marquee-track span {
  white-space: nowrap;
  font-size: 0.82rem;
  color: rgba(255,255,255,0.88);
  letter-spacing: 0.03rem;
}

.top-bar-marquee-track .marquee-sep {
  color: rgba(255,255,255,0.35);
  font-size: 0.7rem;
}

@keyframes marquee-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}