/*
Theme Name: FoodMart
Theme URI: https://templatesjungle.com/
Author: TemplatesJungle
Author URI: https://templatesjungle.com/
Description: FoodMart is specially designed product packaged for eCommerce 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 {
    --accent-color       : #FFC43F;
    --dark-color         : #222222;
    --light-dark-color   : #727272;
    --light-color        : #fff;
    --grey-color         : #dbdbdb;
    --light-grey-color   : #fafafa;
    --primary-color      : #6995B1;
    --light-primary-color   : #eef1f3;
}

/* Fonts */
:root {
    --body-font           : "Open Sans", sans-serif;
    --heading-font        : "Nunito", sans-serif;
}

body {
  --bs-link-color: #333;
  --bs-link-hover-color:#333;

  --bs-link-color-rgb: 40,40,40;
  --bs-link-hover-color-rgb: 0,0,0;

  /* --bs-link-color: #FFC43F;
  --bs-link-hover-color: #FFC43F; */

  --bs-light-rgb: 248, 248, 248;

  --bs-font-sans-serif: "Open Sans", 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: #747474;

  --bs-primary: #FFC43F;
  --bs-primary-rgb: 255, 196, 63;

  --bs-success: #a3be4c;
  --bs-success-rgb: 163, 190, 76;
  
  --bs-primary-bg-subtle: #FFF9EB;
  --bs-success-bg-subtle: #eef5e5;
  
  --bs-border-color: #F7F7F7;

  --bs-secondary-rgb: 230, 243, 251;
  /* --bs-success-rgb: 238, 245, 228; */
  --bs-danger-rgb: 249, 235, 231;
  --bs-warning-rgb: 255, 249, 235;
  --bs-info-rgb: 230, 243, 250;
}
.btn-primary {
  --bs-btn-color: #fff;
  --bs-btn-bg: #ffc43f;
  --bs-btn-border-color: transparent;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #f7a422;
  --bs-btn-hover-border-color: transparent;
  --bs-btn-focus-shadow-rgb: 49,132,253;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #ffc43f;
  --bs-btn-active-border-color: transparent;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #d3d7dd;
  --bs-btn-disabled-border-color: transparent;
}
.btn-outline-primary {
  background-color: #fff; /* white background */
  color: #C5A449;        /* gold text */
  border: 2px solid #C5A449; /* gold border */
  border-radius: 50px;   /* pill shape */
  padding: 10px 25px;
  font-weight: 500;
  transition: all 0.3s ease-in-out;
  display: inline-flex;
  align-items: center;
}

/* Hover effect */
.btn-outline-primary:hover {
  background-color: #C5A449; /* gold background */
  color: #fff;              /* white text */
  border-color: #C5A449;
}

/* Optional: smooth icon & text alignment */
/* Gold Theme Colors */
/* Gold Button Style */
/* Gold Button Style */
/* Gold Button Style */
/* Gold Button */
/* Gold Button */
/* Gold Button */


.btn-outline-light {
  --bs-btn-color: #747474;
  --bs-btn-border-color: #EFEFEF;
  --bs-btn-hover-color: #000;
  --bs-btn-hover-bg: #EFEFEF;
  --bs-btn-hover-border-color: #EFEFEF;
  --bs-btn-focus-shadow-rgb: 248,249,250;
  --bs-btn-active-color: #000;
  --bs-btn-active-bg: #EFEFEF;
  --bs-btn-active-border-color: #EFEFEF;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #EFEFEF;
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: #EFEFEF;
  --bs-gradient: none;
}
.btn-warning {
  --bs-btn-color: #747474;
  --bs-btn-bg: #FCF7EB;
  --bs-btn-border-color: #FCF7EB;
  --bs-btn-hover-color: #747474;
  --bs-btn-hover-bg: #FFECBE;
  --bs-btn-hover-border-color: #FFECBE;
  --bs-btn-focus-shadow-rgb: 217,164,6;
  --bs-btn-active-color: #000;
  --bs-btn-active-bg: #FFECBE;
  --bs-btn-active-border-color: #FFECBE;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #000;
  --bs-btn-disabled-bg: #FCF7EB;
  --bs-btn-disabled-border-color: #FCF7EB;
}
.btn-success {
  --bs-btn-color: #222;
  --bs-btn-bg: #EEF5E4;
  --bs-btn-border-color: #EEF5E4;
  --bs-btn-hover-color: #222;
  --bs-btn-hover-bg: #9de3c2;
  --bs-btn-hover-border-color: #9de3c2;
  --bs-btn-focus-shadow-rgb: 60,153,110;
  --bs-btn-active-color: #222;
  --bs-btn-active-bg: #9de3c2;
  --bs-btn-active-border-color: #9de3c2;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #222;
  --bs-btn-disabled-bg: #EEF5E4;
  --bs-btn-disabled-border-color: #EEF5E4;
}
.btn-danger {
  --bs-btn-color: #222;
  --bs-btn-bg: #FFEADA;
  --bs-btn-border-color: #FFEADA;
  --bs-btn-hover-color: #222;
  --bs-btn-hover-bg: #ecc9af;
  --bs-btn-hover-border-color: #ecc9af;
  --bs-btn-focus-shadow-rgb: 60,153,110;
  --bs-btn-active-color: #222;
  --bs-btn-active-bg: #ecc9af;
  --bs-btn-active-border-color: #ecc9af;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #222;
  --bs-btn-disabled-bg: #FFEADA;
  --bs-btn-disabled-border-color: #FFEADA;
}
body {
  letter-spacing: 0.03em;
}
h1,h2,h3,h4,h5,h6 {
  font-family: var(--heading-font);
  color: var(--dark-color);
  font-weight: 700;
}
.display-1,
.display-2,
.display-3,
.display-4,
.display-5,
.display-6 {
  font-weight: 700;
}
.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);
}
.nav-pills .nav-link {
  --bs-nav-pills-link-active-color: #111;
  --bs-nav-pills-link-active-bg: #f1f1f1;
}

.container, .container-fluid, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
  --bs-gutter-x: 3rem;
}
/*----------------------------------------------*/
/* 6. SITE STRUCTURE */
/*----------------------------------------------*/
/* 6.1 Header
--------------------------------------------------------------*/
 .preloader-wrapper {
    width: 100%;
    height: 100vh;
    background: radial-gradient(circle at center, #ece8e8, #e7e5e5);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
    flex-direction: column;
  }

  .ripple-loader {
    position: relative;
    width: 140px;
    height: 140px;
  }

.ripple-loader span {
  position: absolute;
  inset: 0;
  border: 3px solid #FFD700; /* Gold ring */
  border-radius: 50%;
  opacity: 0;
  animation: ripple 10s linear infinite;
}

.ripple-loader span:nth-child(1) {
  animation-delay: 0s;
}

.ripple-loader span:nth-child(2) {
  animation-delay: 3.33s; /* 1/3 of 10s */
}

.ripple-loader span:nth-child(3) {
  animation-delay: 6.66s; /* 2/3 of 10s */
}

@keyframes ripple {
  0% {
    transform: scale(0.2);
    opacity: 1;
    box-shadow: 0 0 10px rgba(255, 215, 0, 0.6);
  }
  100% {
    transform: scale(2.5);
    opacity: 0;
    box-shadow: 0 0 30px rgba(255, 215, 0, 0.2);
  }
}
  /* Centered logo */
  .ripple-logo {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 60px;  /* Adjust size */
    height: 60px;
    transform: translate(-50%, -50%);
    object-fit: contain;
    filter: drop-shadow(0 0 6px rgba(255, 215, 0, 0.8));
  }

:root {
  --gold: #b69121;  /* metallic gold */
  --black: #000000;
}

/* Business name (h3) text color */
.product-item h3 {
  color: var(--gold);
}

/* “Add Review” link */
.product-item a.nav-link.add-review-btn {
  background-color: var(--gold);
  color: var(--black);
  display: inline-flex;
  align-items: center;
  padding: 4px 8px;
  border-radius: 3px;
  font-weight: 600;
  margin-left: 8px;
  text-decoration: none;
  border: 1px solid var(--gold);
}

/* Optional hover effect */
.product-item a.nav-link.add-review-btn:hover {
  background-color: #CFA932;  /* slightly darker gold */
  border-color: #CFA932;
  color: var(--black);
}

/* If the link includes a SVG or icon, keep it black for contrast */
.product-item a.nav-link.add-review-btn svg,
.product-item a.nav-link.add-review-btn i {
  fill: var(--black);
  margin-left: 4px;
}



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

/* *** Start editing below this line *** */
.container-fluid {
  max-width: 1600px;
}
.banner-blocks {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: repeat(2, 1fr);
  grid-gap: 2rem;
}
.block-1 { grid-area: 1 / 1 / 3 / 8; }
.block-2 { grid-area: 1 / 8 / 2 / 13; }
.block-3 { grid-area: 2 / 8 / 3 / 13; }

@media screen and (max-width:1140px) {
  .banner-blocks {
    grid-template-columns: 1fr;
    grid-template-rows: repeat(4, 1fr);
  }
  .block-1 { grid-area: 1 / 1 / 3 / 2; }
  .block-2 { grid-area: 3 / 1 / 4 / 2; }
  .block-3 { grid-area: 4 / 1 / 5 / 2; }
  
}

/* banner ad */
.banner-ad {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
}
.banner-ad.blue {
  background: #e6f3fb;
}
.banner-ad .swiper-pagination {
  bottom: 40px;
  left: 0;
  right: 0;
}
.banner-ad .swiper-pagination .swiper-pagination-bullet {
  width: 16px;
  height: 16px;
  margin: 4px;
  background: #FFF;
  opacity: 1;
  transition: background 0.3s ease-out;
}
.banner-ad .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active{
  background: #FFC43F;
}
.banner-ad .swiper-slide {
  min-height: 630px;
  display: flex;
}
/* .banner-ad .banner-content {
  padding: 52px;
}
.banner-ad.large .banner-content {
  padding: 90px;
} */
.banner-ad .banner-content .categories {
  font-family: 'Garamond';
  font-size: 37px;
  text-transform: capitalize;
  color: var(--dark-color);
}
.banner-ad .banner-content .sale {
  position: relative;
  display: inline-block;
}
.banner-ad .banner-content .sale:before {
  content: '';
  width: 80px;
  border-bottom: 1px solid #111;
  position: absolute;
  bottom: 6px;
}
.banner-ad .banner-content .sale:after {
  content: 'SALE';
  font-family: var(--body-font);
  position: absolute;
  font-size: 11px;
  line-height: 15px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: #252525;
  bottom: 0;
  right: 0;
}
.banner-ad .banner-content .banner-title {
  letter-spacing: 0.02em;
  font-size: 33px;
}
.banner-ad.large .banner-content .categories {
  color: var(--accent-color);
}
.banner-ad.large .banner-content .banner-title {
  font-size: 54px;
}

/* Swiper carousel */
.swiper-prev,
.swiper-next {
  width: 38px;
  height: 38px;
  line-height: 38px;
  background: #F1F1F1;
  color: #222222;
  padding: 0;
  text-align: center;
  border-radius: 10px;
  --bs-btn-border-color: transparent;
  --bs-btn-active-bg: #ec9b22;
  --bs-btn-active-border-color: transparent;
  --bs-btn-hover-bg: #FFC43F;
  --bs-btn-hover-border-color: transparent;
  --bs-btn-disabled-color: #ccc;
  --bs-btn-disabled-bg: #eaeaea;
  --bs-btn-disabled-border-color: #eaeaea
}
.swiper-prev:hover,
.swiper-next:hover {
  background: #FFC43F;
}
.btn-link {
  margin-right: 30px;
  font-weight: 600;
  font-size: 16px;
  line-height: 22px;
  text-align: right;
  text-transform: capitalize;
  color: #787878;
}
/* category carousel */
.category-carousel .category-item {
  background: #FFFFFF;
  border: 1px solid #FBFBFB;
  box-shadow: 0px 5px 22px rgba(0, 0, 0, 0.04);
  border-radius: 16px;
  text-align: center;
  padding: 60px 20px;
  margin: 20px 0;
  transition: box-shadow 0.3s ease-out, transform 0.3s ease-out;
}
.category-carousel .category-item:hover {
  transform: translate3d(0,-10px,0);
  box-shadow: 0px 21px 44px rgba(0, 0, 0, 0.08);
}
.category-carousel .category-item .category-title {
  font-weight: 600;
  font-size: 20px;
  line-height: 27px;
  letter-spacing: 0.02em;
  text-transform: capitalize;
  color: #222222;
  margin-top: 20px;
}

/* brand carousel */
.brand-carousel .brand-item {
  background: #FFFFFF;
  border: 1px solid #FBFBFB;
  box-shadow: 0px 5px 22px rgba(0, 0, 0, 0.04);
  border-radius: 16px;
  padding: 16px;
}
.brand-carousel .brand-item img {
  width: 100%;
  border-radius: 12px;
}
.brand-carousel .brand-item .brand-details {
  margin-left: 15px;
}
.brand-carousel .brand-item .brand-title {
  margin: 0;
}

/* product tabs */
.product-tabs .nav-tabs {
  justify-content: flex-end;
  border: none;
  
  --bs-nav-link-hover-color: #111;
  --bs-nav-link-color: #555;
  --bs-nav-tabs-link-border-color: #fff;
  --bs-nav-tabs-link-hover-border-color: transparent;
  --bs-nav-tabs-link-active-border-color: #fff;
}
.product-tabs .nav-tabs .nav-link.active, 
.product-tabs .nav-tabs .nav-item.show .nav-link {
  /* border: none; */
  border-bottom: 3px solid var(--accent-color);
}

/* product-grid */
/* .product-grid {
  gap: 25px;
} */
.product-item {
  position: relative;
  padding: 16px;
  background: #FFFFFF;
  border: 1px solid #FBFBFB;
  box-shadow: 0px 5px 22px rgba(0, 0, 0, 0.04);
  border-radius: 16px;
  margin-bottom: 30px;
  transition: box-shadow 0.3s ease-out;
}
.product-item:hover {
  box-shadow: 0px 21px 44px rgba(0, 0, 0, 0.08);
}
.product-item h3 {
  display: block;
  width: 100%;
  font-weight: 600;
  font-size: 18px;
  line-height: 25px;
  text-transform: capitalize;
  color: #333333;
  margin: 0;
}
.product-item figure {
  background: #F9F9F9;
  border-radius: 12px;
  text-align: center;
}
.product-item figure img {
  max-height: 210px;
  height: auto;
}
.product-item .btn-wishlist {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 50px;
  height: 50px;
  border-radius: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: 1px solid #d8d8d8;
  transition: all 0.3s ease-out;
}
.product-item .btn-wishlist:hover {
  background: rgb(240, 56, 56);
  color: #fff;
}
.product-item .qty {
  font-weight: 400;
  font-size: 13px;
  line-height: 18px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #9D9D9D;
}
.product-item .rating {
  font-weight: 600;
  font-size: 13px;
  line-height: 18px;
  text-transform: capitalize;
  color: #222222;
}
.product-item .rating iconify-icon {
  color: #FFC43F;
}
.product-item .price {
  display: block;
  width: 100%;
  font-weight: 600;
  font-size: 22px;
  line-height: 30px;
  text-transform: capitalize;
  color: #222222;
}
.product-item .product-qty {
  width: 85px;
}
.product-item .btn-link {
  text-decoration: none;
}
.product-item #quantity {
  height: auto;
  width: 28px;
  text-align: center;
  border: none;
  margin: 0;
  padding: 0;
}
.product-item .btn-number {
  width: 26px;
  height: 26px;
  line-height: 1;
  text-align: center;
  background: #FFFFFF;
  border: 1px solid #E2E2E2;
  border-radius: 6px;
  color: #222;
  padding: 0;
}

/* cart */
.cart .product-qty {
  min-width: 130px;
}

/* floating image */
.image-float {
  margin-top: -140px;
  margin-bottom: -140px;
}
@media screen and (max-width:991px) {
  .image-float {
    margin: 0;
  }
}
 /* post item */
.post-item .post-meta {
  font-size: 0.8rem;
  line-height: 1;
}
.post-item .post-meta svg {
  margin-right: 5px;
}

@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;
  }
}

/* single product */
/* product-thumbnail-slider */
.product-thumbnail-slider {
  height: 740px;
}
@media screen and (max-width:992px) {
  .product-thumbnail-slider {
    margin-top: 20px;
    height: auto;
  }
}
@media screen and (min-width:992px) {
  .product-thumbnail-slider {
    height: 520px;
  }
}
/* Dropdown grid layout */
/* Grid layout for the dropdown */
.dropdown-menu.dropdown-grid {
  display: none; /* hidden by default */
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); /* dynamic columns */
  gap: 10px 15px; /* vertical 10px, horizontal 15px */
  padding: 8px 12px;
  min-width: 450px;
  border-radius: 6px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  background-color: #fff;
  font-family: 'Open Sans', Arial, sans-serif;
  font-size: 14px;
}

/* Show grid when dropdown active */
.dropdown-menu.dropdown-grid.show {
  display: grid !important;
}

/* Dropdown items flex for icon + text */
.dropdown-menu.dropdown-grid .dropdown-item {
  display: flex;
  align-items: center;   /* vertically center icon + text */
  white-space: nowrap;
  color: #333;
  padding: 6px 10px;
  border-radius: 4px;
  transition: background-color 0.2s ease, color 0.2s ease;
  cursor: pointer;
}

/* Hover style */
.dropdown-menu.dropdown-grid .dropdown-item:hover {
  background-color: #f0f4f8;
  color: #007bff;
  text-decoration: none;
}

/* Icon styling */
.dropdown-item i {
  color: #555;
  min-width: 20px;       /* reserve space for icon */
  margin-right: 10px;    /* space between icon and text */
  font-size: 16px;
  text-align: center;
}



@media screen and (min-width:1200px) {
  .product-thumbnail-slider {
    height: 740px;
  }
}
.modal-content {
      background: #fff;
      padding: 30px 40px 30px;
      max-width: 460px;
      margin: auto;
      color: #222;
      text-align: center;
      position: relative;
    }

    /* Modal header */
    .modal-header {
      border-bottom: none;
      padding-bottom: 0;
      flex-direction: column;
      align-items: center;
      text-align: center;
    }

    .modal-header h2 {
      font-weight: 700;
      font-size: 2.3rem;
      margin-bottom: 0.3rem;
      color: #222;
    }

    .modal-header p {
      font-weight: 500;
      font-size: 1rem;
      color: #0c0c0c;
      margin-bottom: 1.5rem;
    }

    /* Professional golden close button */
    .modal-close-btn {
      position: absolute;
      top: 20px;
      right: 20px;
      width: 30px;
      height: 30px;
      cursor: pointer;
      background: transparent;
      border: none;
      outline: none;
      padding: 0;
      z-index: 1051;
    }

    .modal-close-btn::before,
    .modal-close-btn::after {
      content: '';
      position: absolute;
      left: 14px;
      top: 6px;
      width: 2.5px;
      height: 18px;
      background-color: #FFD700;
      border-radius: 2px;
      transition: background-color 0.3s ease;
    }

    .modal-close-btn::before {
      transform: rotate(45deg);
    }

    .modal-close-btn::after {
      transform: rotate(-45deg);
    }

    .modal-close-btn:hover::before,
    .modal-close-btn:hover::after {
      background-color: #f8f8f7;
    }

    /* Inputs: clean no border, golden background */
   /* General form control styles */

/* Styling for specific form elements */
select.form-controller {
  appearance: none; /* Remove default dropdown arrow */
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12"><path fill="%23333" d="M6 9l4-5H2z"/></svg>'); /* Custom arrow */
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 30px; /* Space for arrow */
}

/* Textarea specific adjustments */
textarea.form-controller {
  resize: vertical; /* Allow vertical resize only */
  min-height: 100px;
}

    /* Login button */
    #loginbtn,#regiterbutton{
      background:  #b69121;
      color: #fff;
      font-weight: 700;
      border: none;
      border-radius: 8px;
      padding: 14px 0;
      font-size: 1.15rem;
      width: 100%;
      cursor: pointer;
      transition: background 0.3s ease;
      margin-top: 15px;
    }

    #loginbtn:hover,#regiterbutton:hover {
      background:  #f1ce04;
    }
    

    /* Forgot password link */
    .forgot-password-link {
      color: #bfa22f;
      cursor: pointer;
      text-decoration: underline;
      font-weight: 600;
      display: inline-block;
      margin-top: 15px;
    }

    .forgot-password-link:hover {
      color: #ffd700;
    }

    /* Sign up button */
   .sign-up-btn, .sign-in-btn {
    background: none;
    border: none;
    color: #bfa22f;
    text-decoration: underline;
    font-weight: 600;
    cursor: pointer;
    padding: 0;
    font-size: 1rem;
    margin-top: 15px;
}

.sign-up-btn:hover, 
.sign-in-btn:hover {
    color: #ffd700;
}
   /*
Theme Name: FoodMart
Theme URI: https://templatesjungle.com/
Author: TemplatesJungle
Author URI: https://templatesjungle.com/
Description: FoodMart is specially designed product packaged for eCommerce store websites.
Version: 1.1
*/

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

/* (Previous table of contents remains unchanged) */

/*------------------------------------*\
    2.3 Forms
\*------------------------------------*/
.form-group {
  margin-bottom: 1.5rem;
  position: relative;
}

.form-control {
  display: block;
  width: 100%;
  padding: 12px 16px;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: var(--dark-color);
  background-color: var(--light-color);
  border: 1px solid var(--grey-color);
  border-radius: 8px;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
  font-family: var(--body-font);
}

.form-control:focus {
  outline: none;
  border-color: var(--accent-color);
  box-shadow: 0 0 8px rgba(255, 196, 63, 0.3);
}

.form-control::placeholder {
  color: var(--light-dark-color);
  opacity: 0.7;
}

/* Label styling */
.form-group label {
  display: block;
  margin-bottom: 0.5rem;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--dark-color);
  font-family: var(--body-font);
}

/* Form control states */
.form-control:disabled,
.form-control[readonly] {
  background-color: var(--light-grey-color);
  border-color: var(--grey-color);
  opacity: 0.7;
  cursor: not-allowed;
}

/* Invalid state with black border */
.form-control:invalid:focus {
  border-color: var(--black);
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
}

/* Valid state with accent color */
.form-control:valid:focus {
  border-color: var(--accent-color);
  box-shadow: 0 0 8px rgba(255, 196, 63, 0.3);
}

/* Select dropdown */
select.form-control {
  appearance: none;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12"><path fill="%23333" d="M6 9l4-5H2z"/></svg>');
  background-repeat: no-repeat;
  background-position: right 16px center;
  padding-right: 40px;
}

/* Textarea */
textarea.form-control {
  resize: vertical;
  min-height: 120px;
}

/* Form group with icon */
.form-group.has-icon {
  position: relative;
}

.form-group.has-icon .form-control {
  padding-left: 44px;
}

.form-group.has-icon .icon {
  position: absolute;
  top: 50%;
  left: 16px;
  transform: translateY(-50%);
  color: var(--light-dark-color);
  font-size: 1.2rem;
}

/* Form group error message */
.form-group .error-message {
  display: none;
  color: var(--black);
  font-size: 0.85rem;
  margin-top: 0.25rem;
  font-family: var(--body-font);
}

.form-group.invalid .error-message {
  display: block;
}

/* Form group layout for inline forms */
.form-group-inline {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.form-group-inline .form-control {
  flex: 1;
}

.form-group-inline label {
  margin-bottom: 0;
  white-space: nowrap;
}

/* Responsive adjustments */
@media screen and (max-width: 600px) {
  .form-group-inline {
    flex-direction: column;
    align-items: stretch;
  }
  
  .form-group-inline .form-control {
    width: 100%;
  }
}

/* Form control sizes */
.form-control-sm {
  padding: 8px 12px;
  font-size: 0.875rem;
  border-radius: 6px;
}

.form-control-lg {
  padding: 16px 20px;
  font-size: 1.25rem;
  border-radius: 10px;
}

/* Form control with gold accent button */
.form-group.has-button {
  display: flex;
  align-items: center;
  gap: 10px;
}

.form-group.has-button .form-control {
  flex: 1;
}

.form-group.has-button .btn {
  padding: 12px 20px;
  font-size: 1rem;
  font-weight: 600;
  background: var(--accent-color);
  color: var(--dark-color);
  border: none;
  border-radius: 8px;
  transition: background 0.3s ease;
}

.form-group.has-button .btn:hover {
  background: #f7a422;
}

/* Existing styles (unchanged) */
:root {
  --header-height: 160px;
  --header-height-min: 80px;
  --accent-color: #FFC43F;
  --dark-color: #222222;
  --light-dark-color: #727272;
  --light-color: #fff;
  --grey-color: #dbdbdb;
  --light-grey-color: #fafafa;
  --primary-color: #6995B1;
  --light-primary-color: #eef1f3;
  --gold: #b69121;
  --black: #000000;
}

body {
  --bs-link-color: #333;
  --bs-link-hover-color: #333;
  --bs-link-color-rgb: 40,40,40;
  --bs-link-hover-color-rgb: 0,0,0;
  --bs-light-rgb: 248, 248, 248;
  --bs-font-sans-serif: "Open Sans", 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: #747474;
  --bs-primary: #FFC43F;
  --bs-primary-rgb: 255, 196, 63;
  --bs-success: #a3be4c;
  --bs-success-rgb: 163, 190, 76;
  --bs-primary-bg-subtle: #FFF9EB;
  --bs-success-bg-subtle: #eef5e5;
  --bs-border-color: #F7F7F7;
  --bs-secondary-rgb: 230, 243, 251;
  --bs-danger-rgb: 249, 235, 231;
  --bs-warning-rgb: 255, 249, 235;
  --bs-info-rgb: 230, 243, 250;
}

@media screen and (max-width: 600px) {
  :root {
    --header-height: 100px;
    --header-height-min: 80px;
  }
}
.invalid-field {
  border-color: #ff4d4d !important;
  box-shadow: 0 0 6px #ff4d4d !important;
}
#loginemailError,
#loginpasswordError,#nameror,#nameeror,#registerpasswordError,#emailError,#registerpasswordError,#confirmPasswordError {
  color: #dc3545 !important;  /* Bootstrap's standard red */
  font-weight: 600;
}
  ul.nav-icons {
    padding: 0;
    margin: 0;
  }
  ul.nav-icons li {
    list-style: none;
  }
  ul.nav-icons li a {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
    border-radius: 50%;
    background: #f8f9fa;
    color: #333;
  }
  ul.nav-icons svg {
    width: 1.5rem;
    height: 1.5rem;
  }
  .notification-badge {
    position: absolute;
    top: 0;
    right: 0;
    background: red;
    color: white;
    border-radius: 50%;
    width: 14px;
    height: 14px;
    font-size: 10px;
    text-align: center;
    line-height: 14px;
    font-weight: bold;
    transform: translate(50%, -50%);
  }
  @media (max-width: 576px) {
    ul.nav-icons li a {
      padding: 4px 6px;
    }
    ul.nav-icons svg {
      width: 1.2rem;
      height: 1.2rem;
    }
    .notification-badge {
      width: 12px;
      height: 12px;
      font-size: 8px;
    }
  }
/* (Remaining existing styles unchanged) */