/*
Theme Name: YetiCart
Theme URI: https://www.mamagroup.net/yeti-cart/
Author: Mama Group
Author URI: https://www.mamagroup.net
Description: Custom WordPress theme developed by Mama Group. Designed for professional, modern, and scalable websites using Bootstrap 5.
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: mamagroup-theme
Tags: bootstrap, responsive, modern, custom-theme, multipurpose

Copyright (c) 2025 Mama Group.
All rights reserved. This theme is distributed under the terms of the GNU General Public License (GPL), but the Mama Group name, logo, brand identity, and any proprietary designs or content are protected under applicable intellectual property laws and may not be reused without explicit written permission.
*/


/* Ensure the pointer (hand) cursor appears on hover and click */
a {
  cursor: pointer;
  text-decoration: none;
}

/* Typography */
body {
  font-family: 'Poppins', sans-serif;
}

/* Additional styling for a smooth hover effect */
a:hover {
  opacity: 0.8; /* Optional: Makes the hover effect smoother */
}

/* ===========================
   DESKTOP HEADER 
=========================== */
.mgnav-bar .category-links a,
.mgnav-bar .dropdown-toggle {
  font-size: 1.125rem;
  font-weight: 500;
  color: #ffffff;
  white-space: nowrap;
}

.mgnav-bar .dropdown-toggle {
  background: transparent;
  border: none;
}

.mobile-logo img {
  max-height: 30px;
  height: auto;
  width: auto;
}

/* Hide Desktop Header on Mobile */
@media (max-width: 991.98px) {
  .main-header,
  .mgnav-bar,
  .topbar {
    display: none !important;
  }
}

/* Desktop Dropdown Hover */
@media (min-width: 992px) {
  .mgnav-bar .dropdown {
    position: relative;
  }

  .mgnav-bar .dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 9999;
    min-width: 200px;
    background-color: #ffffff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transition: opacity 0.2s ease, visibility 0.2s ease;
    opacity: 0;
    visibility: hidden;
    padding: 0.5rem 0;
  }

  .mgnav-bar .dropdown:hover > .dropdown-menu {
    display: block;
    opacity: 1;
    visibility: visible;
  }

  .mgnav-bar .dropdown-menu a {
    padding: 0.5rem 1rem;
    color: #212529;
    font-size: 1rem;
    text-decoration: none;
    display: block;
    transition: background-color 0.2s;
  }

  .mgnav-bar .dropdown-menu a:hover {
    background-color: #f8f9fa;
  }

  .mgnav-bar .dropdown-toggle::after {
    display: none;
  }
}

/* ===========================
   STICKY HEADER
=========================== */
@media (min-width: 992px) {
  .mgnav-bar.sticky-desktop {
    position: sticky;
    top: 0px; /* Offset equal to height of main header */
    z-index: 1010;
    background-color: inherit;
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.05);
  }
}


/* ===========================
   MOBILE DRAWER 
=========================== */
.mobile-drawer__menu,
.mobile-drawer__menu ul,
.mobile-drawer__menu li {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* MAIN NAV ITEMS */
.mobile-drawer__menu > li {
  position: relative;
  border-bottom: 1px solid #eee;
}

.mobile-drawer__menu > li > a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem 0.5rem;
  font-weight: 600;
  text-decoration: none;
  color: #062b60;
  background-color: #fff;
  transition: background 0.2s ease;
}

.mobile-drawer__menu > li > a:hover {
  background-color: #f0f0f0;
  color: #de0c1f;
}

/* TOGGLE ICON */
.mobile-drawer__menu .menu-item-has-children > a::after {
  content: '+';
  font-weight: bold;
  margin-left: auto;
  color: #999;
  transition: transform 0.3s ease;
}

.mobile-drawer__menu .menu-item-has-children.open > a::after {
  content: '–';
  color: #de0c1f;
}

/* SUBMENU STYLING */
.mobile-drawer__menu .sub-menu {
  display: none;
  background-color: #f8f8f8;
  padding-left: 1.25rem;
  border-left: 2px solid #ddd;
}

.mobile-drawer__menu .menu-item-has-children.open > .sub-menu {
  display: block;
}

/* SUBMENU LINKS */
.mobile-drawer__menu .sub-menu li > a {
  display: block;
  padding: 0.5rem 0.5rem;
  font-size: 0.95rem;
  color: #222;
  font-weight: 400;
  text-decoration: none;
}

.mobile-drawer__menu .sub-menu li > a:hover {
  color: #de0c1f;
  background-color: #eee;
}

/* ACTIVE ITEM */
.mobile-drawer__menu li.current-menu-item > a,
.mobile-drawer__menu li.current-menu-ancestor > a {
  color: #de0c1f !important;
  font-weight: 600;
}


/* =============
HOME - HOME SLIDER
================= */
.home-slider-section {
  position: relative;
}

.home-slider__slide {
  max-height: 70vh;
  overflow: hidden;
}

@media (max-width: 768px) {
  .home-slider__slide {
    max-height: initial;
  }
}

.home-slider__image {
  width: 100%;
  object-fit: cover;
  height: 100%;
}

/* HOME SLIDER (scoped) */
.home-slider-section .swiper-button-prev,
.home-slider-section .swiper-button-next {
  top: 50% !important;
  transform: translateY(-50%) !important;
  background-color: #de0c1f !important;
  border-radius: 50% !important;
  width: 30px !important;
  height: 30px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 10 !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2) !important;
}

.home-slider-section .swiper-button-prev::after,
.home-slider-section .swiper-button-next::after {
  font-size: 15px !important;
  color: #02369c !important;
  transition: transform 0.3s ease !important;
}

.home-slider-section .swiper-button-prev:hover,
.home-slider-section .swiper-button-next:hover {
  transform: translateY(-50%) scale(1.1) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
}

.home-slider-section .swiper-button-prev:hover::after,
.home-slider-section .swiper-button-next:hover::after {
  transform: scale(1.2) !important;
}

/* Pagination (home only) */
.home-slider-section .home-slider__pagination {
  text-align: center !important;
  margin-top: 16px !important;
}
.home-slider-section .swiper-pagination-bullet {
  width: 12px !important;
  height: 12px !important;
  background: #de0c1f !important;
  opacity: 0.5 !important;
  margin: 0 6px !important;
  border-radius: 50% !important;
  transition: all 0.3s ease !important;
}
.home-slider-section .swiper-pagination-bullet:hover {
  opacity: 0.8 !important;
  transform: scale(1.2) !important;
}
.home-slider-section .swiper-pagination-bullet-active {
  background: #02369c !important;
  border: 2px solid #de0c1f !important;
  opacity: 1 !important;
  transform: scale(1.4) !important;
}

/* =======================
HOME: ABOUT US
======================== */
.about-preview__intro p {
  font-size: 1.1rem;
  line-height: 1.6;
}

.about-preview__services h6 {
  font-size: 1rem;
}

.about-preview__services i {
  display: inline-block;
}


/*===========================
 HOME: PRODUCT CATEGORY SWIPER CSS
=========================== */
.product-swiper__prev,
.product-swiper__next {
  background-color: #fff;     
  border-radius: 50% !important;        
  width: 36px !important;              
  height: 36px !important;           
  display: flex;             
  align-items: center;
  justify-content: center;
}

.product-swiper__prev::after,
.product-swiper__next::after {
  color: #02369c;             
  font-size: 15px !important;  
}

/* ==================
WOCOMMERCE CATEGORY CARD
==================== */
.category-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  transition: transform 0.3s ease;
}

.category-card:hover {
  transform: translateY(-4px);
}

.category-card__image {
  position: relative;
  overflow: hidden;
  height: 200px;
}

.category-card__img {
  object-fit: cover;
  height: 100%;
  transition: 0.3s ease;
  width: 100%;
}

/* Overlay (appears only on hover) */
.category-card__overlay {
  position: absolute;
  inset: 0;
  background-color: rgba(0, 102, 204, 0.8); /* 80% blue */
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}

.category-card:hover .category-card__overlay {
  opacity: 1;
}

.category-card__desc {
  font-size: 0.9rem;
  line-height: 1.4;
  max-width: 90%;
  color: #fff;
}

.category-card__content {
  padding: 1rem;
  text-align: center;
  background: #fff;
}

.category-card__content h6 {
  font-size: 1rem;
  font-weight: 600;
  margin: 0;
}

/* =======================
   HOME : BRANDS SLIDER
=========================== */
.brand-slider__circle {
  width: 150px;
  height: 150px;
  border-radius: 10%;
  overflow: hidden;
  background-color: #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s ease;
}

.brand-slider__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.brand-slider__slide {
  flex-shrink: 0;
  text-align: center;
}

.brand-slider__circle:hover {
  transform: scale(1.05);
}

@media (max-width: 576px) {
  .brand-slider__circle {
    width: 60px;
    height: 60px;
  }
}

/* =====================
   BLOG CARD
===================== */

.blog-section {
  position: relative;
  background-color: #fff;
}

.blog-section::before {
  content: none; /* Removes any overlay if present */
}

.blog-section .container {
  position: relative;
  z-index: 1;
}

/* Blog Card Styling */
.blog-card {
  border-radius: 8px;
  overflow: hidden;
  transition: box-shadow 0.3s ease;
  background-color: #fff;
}

.blog-card:hover {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

/* Thumbnail Image */
.blog-card .blog-img {
  display: block;
  height: 220px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transition: transform 0.3s ease;
}

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

/* Category Badge */
.blog-card .badge {
  font-size: 0.75rem;
  padding: 0.35rem 0.6rem;
  border-radius: 0.25rem;
}

/* Post Title Link */
.blog-card .card-title a {
  transition: color 0.3s ease;
}

.blog-card .card-title a:hover {
  color: #dc3545; /* Bootstrap danger color for hover effect */
}

/* Responsive Image Height for Small Devices */
@media (max-width: 576px) {
  .blog-card .blog-img {
    height: 160px;
  }
}

/* ===========================
   CONTACT FORM : CONTACT US
=========================== */
/* Contact Form 7 - Custom Styles */
.wpcf7-form label {
  font-weight: 600;
  color: black;
  display: block;
  margin-bottom: 5px;
}

.wpcf7-form input,
.wpcf7-form textarea {
  width: 100%;
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 10px;
  font-size: 1rem;
}

.wpcf7-form textarea {
  resize: none;
}

.wpcf7-submit {
  background-color: #f06525;
  color: white;
  padding: 10px;
  border: none;
  font-size: 1.2rem;
  font-weight: 600;
  cursor: pointer;
  transition: 0.3s;
}

.wpcf7-submit:hover {
  background-color: #0056b3;
}

.wpcf7-form br {
  display: none;
}

/* ===========================
   SINGLE BLOG PAGE
=========================== */
/* Social Share Sticky (Desktop & Tablet) */
.social-share {
  position: fixed;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 1000;
}

/* Social Share Section (Mobile) - Placed at the End */
.social-share-mobile {
  position: sticky;
  bottom: 0;
  left: 12px;
  width: 100%;
  padding: 15px 0;
  text-align: center;
  z-index: 999;
}

/* Social Icon Buttons */
.social-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 45px;
  height: 45px;
  border-radius: 50%;
  font-size: 18px;
  color: white;
  transition: all 0.3s ease-in-out;
}

/* Individual Colors */
.facebook { background: #1877F2; }
.messenger { background: #0084FF; }
.viber { background: #7C4DFF; }
.whatsapp { background: #25D366; }
.telegram { background: #0088CC; }
.email { background: #D44638; }

/* Hover Effect */
.social-icon:hover {
  opacity: 0.8;
  transform: scale(1.1);
}

/* Mobile Visibility */
@media (max-width: 768px) {
  .social-share {
      display: none; /* Hide Desktop Sticky Share */
  }
  .social-share-mobile {
      display: flex;
  }
}

/* ===========================
   FOOTER
=========================== */

/* ===========================
   FLOATING CHAT BUTTON
=========================== */
/* Floating Chat Button */
.chat-bubble {
  position: fixed;
  bottom: 80px; /* Adjusted to stay above footer */
  right: 20px;
  z-index: 1100; /* Higher than the footer */
}

/* Chat Toggle Button */
.chat-toggle {
  width: 60px;
  height: 60px;
  background: #f06524;
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
  cursor: pointer;
  transition: all 0.3s ease-in-out;
}

.chat-toggle:hover {
  background: #d3541f;
}

/* Hidden Chat Options */
.chat-options {
  position: absolute;
  bottom: 70px;
  right: 5px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
}

/* Show Chat Options */
.chat-options.show {
  opacity: 1;
  visibility: visible;
}

/* Chat Icon Styles */
.chat-icon {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  color: white;
  text-decoration: none;
  transition: all 0.3s ease-in-out;
}

/* Icon Colors */
.messenger { background: #0084FF; }
.whatsapp { background: #25D366; }
.viber { background: #7360F2; }
.email { background: #D44638; }
.maps { background: #FF5733; }
.phone { background: #0b2d6b; } /* Blue color for landline */

/* Hover Effects */
.chat-icon:hover {
  opacity: 0.8;
}

/* Mobile Fix: Prevent Chat Bubble from Overlapping Footer */
@media (max-width: 768px) {
  .chat-bubble {
    bottom: 100px; /* Moves it slightly up in mobile */
  }
}

/* === RECENTLY VIEWED === */
.card img {
  max-height: 120px;
  object-fit: contain;
}


/* ==== FOOTER TOP === */
:root {
  --happy-red: #a01822;
  --happy-blue: #1a3d7c;
}

/* Team card appearance */
.team-card {
  transition: all 0.3s ease;
  border-radius: 10px;
  background-color: #ffffff;
  overflow: hidden;
}

.team-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
}

/* Remove square layout */
.team-image-wrapper {
  width: 100%;
  overflow: hidden;
}

/* Full responsive image */
.team-img {
  width: 100%;
  height: auto;
  object-fit: cover;
  display: block;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}

/* Toggle button */
.team-toggle-btn {
  border-color: var(--happy-blue);
  color: var(--happy-blue);
  transition: all 0.3s ease;
}

.team-toggle-btn:hover {
  background-color: var(--happy-blue);
  color: #fff;
}


/* === FOOTER FEATURES === */
.bg-dark-blue {
  background-color: #1a3d7c;
}

.text-brand {
  color: #a01822;
}

.rounded-pill {
  border-radius: 50rem;
}

@media (max-width: 576px) {
  .rounded-pill {
    border-radius: 0 !important;
  }
}

/* === MAIN FOOTER === */
:root {
  --happy-red: #a01822;
  --happy-blue: #1a3d7c;
}

.text-brand {
  color: var(--happy-red);
}

footer a {
  color: inherit;
  text-decoration: none;
}
footer a:hover {
  text-decoration: underline;
}

footer .form-control:focus {
  box-shadow: none;
  border-color: var(--happy-red);
}

footer .btn-danger {
  background-color: var(--happy-red);
  border-color: var(--happy-red);
}

footer .btn-danger:hover {
  background-color: #8f131c;
  border-color: #8f131c;
}

footer .shadow-sm {
  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.05);
}

/* === SEARCH === */
.ajax-search-results {
  max-height: 300px;
  overflow-y: auto;
  z-index: 9999;
  border: 1px solid #e1e1e1;
  top: 100%;
  left: 0;
}
.ajax-search-results li:hover {
  background-color: #f8f9fa;
}