/*
Theme Name: Happy Department Store
Theme URI: https://www.mamagroup.net 
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 */
}

/* ===========================
   HEADER DESIGN - Happy Store
=========================== */

.topbar {
  font-size: 0.875rem;
  background-color: #123f71;
}

.topbar a {
  color: #ffffff;
  text-decoration: none;
}
.topbar a:hover {
  color: #ffdedc; /* Accent red */
}

.main-header {
  background-color: #f8f9fa;
}

.btn-success {
  background-color: #123f71;
  border: none;
}
.btn-success:hover {
  background-color: #dd2a1e;
}

.btn-outline-success {
  border-color: #2A448D;
  color: #2A448D;
}
.btn-outline-success:hover {
  background-color: #2A448D;
  color: white;
}

/* Menu mgNav Bar */
.mgnav-bar {
  background-color: #b22222;
  padding: 0.75rem 0;
}
.mgnav-bar a {
  color: #fff;
  text-decoration: none;
  margin-right: 1.25rem;
  font-weight: 500;
}
.mgnav-bar a:hover {
  color: #ffd700;
}

/* Hide full desktop header on mobile and tablet */
@media (max-width: 991.98px) {
  .main-header,.mgnav-bar, .topbar {
    display: none !important;
  }
  .topbar {
    display: none !important;
  }
}

/* ===========================
   STICKY HEADER
=========================== */
/* Sticky Header on Desktop */
@media (min-width: 992px) {
  .sticky-desktop {
    position: sticky;
    top: 0;
    z-index: 1020; /* Above dropdowns, below modals */
    background-color: #fff;
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.05);
  }
}

/* ===========================
   MENU CATEGORY DRAWER 
=========================== */

.category-menu > li {
  border-bottom: 1px solid #f1f1f1;
  padding: 0.5rem 0;
}

.category-menu a {
  text-decoration: none;
  display: block;
  transition: all 0.2s ease;
}

.category-menu a:hover {
  color: #dd2a1e;
}

/* Desktop submenu hover */
@media (min-width: 992px) {
  .sub-cat-list,
  .tertiary-cat-list {
    display: none;
  }

  .main-cat:hover > .d-lg-block .sub-cat-list,
  .sub-cat-list li:hover > .tertiary-cat-list {
    display: block;
  }
}

/* Optional: Spacing and visual tweaks */
.sub-cat-list a,
.tertiary-cat-list a {
  font-size: 0.9rem;
  color: #555;
}

/* ===========================
   HOME - SLIDER 
=========================== */
.carousel-section .carousel-item img {
  width: 100%;
  height: auto;           
  object-fit: contain;  
  display: block;
  max-height: 100vh;      
}

/* Mobile: Responsive height */
@media (max-width: 768px) {
  .carousel-section .carousel-item img {
    width: 100%;
    height: auto;
    object-fit: contain;
    max-height: 40vh;      
  }
}


/* === Product Showcase: Grid A === */
.product-showcase--grid-a {
  padding: 3rem 0;
  background-color: #ffffff;
}

.product-showcase--grid-a .product-showcase__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
}

.product-showcase--grid-a .product-showcase__title {
  font-size: 1.75rem;
  font-weight: 700;
  margin: 0;
}

.product-showcase--grid-a .product-showcase__link {
  font-weight: 600;
  text-decoration: none;
  color: #FF5733;
  border-bottom: 2px solid #FF5733;
  transition: color 0.3s ease, border-color 0.3s ease;
}

.product-showcase--grid-a .product-showcase__link:hover {
  color: #c63d1e;
  border-color: #c63d1e;
}

.product-showcase--grid-a .product-showcase__grid {
  row-gap: 1.5rem;
  column-gap: 1.5rem;
}

.product-showcase--grid-a .product-showcase__item {
  transition: transform 0.3s ease;
}

.product-showcase--grid-a .product-showcase__item:hover {
  transform: translateY(-4px);
}


/* ========================
   INFO SECTION
======================== */
.info-section {
  background-color: #fffcee;
}

.info-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1rem;
}

.info-icon {
  max-width: 80px;
  height: auto;
  transition: transform 0.3s ease;
}

.info-icon:hover {
  transform: scale(1.05);
}

.info-title {
  font-weight: 600;
  font-size: 1.25rem; /* Adjustable */
}

.info-text {
  font-size: 1rem; /* Adjustable */
  color: #555;
  margin-top: 0.5rem;
}

/*===========================
 HOME: FAQ
=========================== */
.mama-group-faq {
  background-color: #f5f5f5;
}

.accordion-button {
  font-size: 1rem;
}

.accordion-button i {
  width: 20px;
}

/* ===========================
   HOME : SHOP BY CATEGORY
=========================== */

.category-circle {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  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.2s ease;
}

.category-circle img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.categorySwiper .swiper-slide {
  width: auto;
  flex-shrink: 0;
  text-align: center;
}

.category-circle:hover {
  transform: scale(1.05);
}

/* Responsive image size for mobile */
@media (max-width: 576px) {
  .category-circle {
    width: 60px;
    height: 60px;
  }
}

/* Toggle visibility using media queries */
.category-carousel,
.category-grid {
  display: none;
}

@media (max-width: 991.98px) {
  .category-carousel {
    display: block;
  }
}

@media (min-width: 992px) {
  .category-grid {
    display: block;
  }
}


/* =====================
   ALL PRODUCTS LINK
===================== */
.all-products-link {
  color: #9d2322; /* Default link color */
  border-bottom: 2px solid #9d2322;
  padding-bottom: 2px;
  transition: color 0.3s ease, border-color 0.3s ease;
}

.all-products-link:hover {
  color: #123f71; /* Hover color */
  border-color: #123f71;
}

/* =====================
   SWIPER SLIDE HEIGHT FIX
===================== */
.swiper-slide {
  height: auto !important;
  display: flex;
}



/* =======================
   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;
}

/* ===========================
   PAGE :  LANGUAGE
=========================== */
.language-section {
  background-color: #fafcff; /* Dark blue background */
}

.accordion-button {
  font-size: 1rem;
}

.accordion-button i {
  width: 20px;
}

/* ===========================
   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;
}

/* ===========================
   STICKY NAVIGATION
=========================== */
.mobile-sticky-nav {
  z-index: 1055;
}
.mobile-sticky-nav i {
  color: #1D3A75; /* Adjust to Happy blue or use #dd2a1e for red */
}
.mobile-sticky-nav small {
  font-size: 0.75rem;
  color: #555;
}
.mobile-sticky-nav .badge {
  font-size: 0.65rem;
  padding: 2px 6px;
}


/* ===========================
   TEMPLATE PARTS - SECTION/ABOUT/STORE
=========================== */
.store-toggle {
  cursor: pointer;
  transition: transform 0.2s ease;
}
.store-toggle:hover {
  transform: scale(1.01);
}
.store-toggle.active {
  border-left: 5px solid #b21824;
  background-color: #fff3f3;
}