/*
Theme Name: Healthy Eats BD
Theme URI: https://healthyeatsbd.com/
Author: Square Tech IT
Author URI: https://squaretechit.com/
Description: SquareTechIT is a forward-thinking IT solutions provider that stands as your gateway to tech excellence. With a strong commitment to innovation and a deep understanding of technology's ever-evolving landscape, we are dedicated to helping businesses and individuals achieve their digital goals.
Version: 1.0
Requires at least: 6
Tested up to: 6.8.1
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: healthyeatsbd
tags: Web Developer, Custom Web Development, CMS Development, Wordpress Plugin Developers
This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
*/

/* Common CSS */

:root {
    /*
     * Design tokens. Everything visual that recurs across the site should read
     * from here rather than hardcode a value.
     */

    /* Surfaces: warm off-white page, lighter card surface, soft beige panels. */
    --hebd-bg: #FAF7F2;
    --hebd-surface: #FFFDF9;
    --hebd-soft: #F5E9D9;
    --hebd-soft-tint: #F8F1E7;
    --hebd-line: #E9E1D5;

    /* Brand greens. --primary-color is the existing Healthy Eats button green and
       stays the identity colour; the brighter organic green is for accents. */
    --hebd-primary: #2E7046;
    --hebd-primary-bright: #35A24B;
    --hebd-primary-dark: #1E5A34;

    /* Text. */
    --hebd-text: #1F2A22;
    --hebd-text-muted: #6B7568;

    /* Card shadow: soft and low-opacity, a touch stronger on hover. */
    --hebd-shadow-card: 0 1px 2px rgba(31, 42, 34, .05), 0 8px 22px -14px rgba(31, 42, 34, .22);
    --hebd-shadow-card-hover: 0 2px 4px rgba(31, 42, 34, .06), 0 16px 30px -16px rgba(31, 42, 34, .30);

    /*
     * Type. The reference face is Gotham Medium, which is licensed and not
     * available to this project, so Montserrat (its closest open equivalent) is
     * used for Latin text. Neither covers Bengali, so Hind Siliguri follows in
     * every stack: browsers fall back per glyph, which keeps mixed Bangla/English
     * titles rendering naturally. To adopt Gotham later, add its licensed
     * @font-face and put it first in --hebd-font-latin.
     */
    --hebd-font-latin: "Montserrat";
    --hebd-font-body: var(--hebd-font-latin), "Hind Siliguri", system-ui, -apple-system, "Segoe UI", sans-serif;
    --hebd-font-heading: var(--hebd-font-latin), "Hind Siliguri", system-ui, -apple-system, "Segoe UI", sans-serif;

    /* Layout: large desktops get up to 1920px, with gutters that scale. */
    --hebd-container-max: 1920px;
    --hebd-gutter: clamp(16px, 3.2vw, 64px);

    /*
     * Vertical rhythm. One scale for every band on the page: the space around a
     * section, the space under its heading, and the space above the row of
     * carousel dots and its See All button. Sections used to stack a 48px
     * utility margin on each of those, which left a blank screen between one
     * carousel and the next.
     */
    --hebd-section-space: clamp(32px, 3.4vw, 46px);
    --hebd-heading-space: clamp(20px, 1.8vw, 28px);
    --hebd-control-space: 14px;

    /* Existing theme tokens, kept for the rules that already use them. */
    --primary-color: rgb(46, 112, 70);
    --secondery-color: rgb(97, 158, 67);
    --tertiary-color: rgba(42, 67, 28, 1);
    --theme-white: rgba(255, 255, 255, 1);
    --theme-gray: #838383;

    /* Referenced by older rules but never defined, so they resolved to nothing. */
    --black-text-color: var(--hebd-text);
    --green-text-color: var(--hebd-primary);
    --primary-zero-color: var(--hebd-primary);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    overflow-x: hidden;
}

/* hero section css  */
/* card style for store and arrival  */
main .card-container .medium-card-container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

main .card-container .arrivals-card {
    gap: 5px;
}

main .card-container .medium-card-container .card {
    width: 100%;
    padding: 10px;
    border-radius: 12px;
    border: none;
    background: #FFF;
    position: relative;
    text-align: center;
}

main .card-container .medium-card-container .store-card {
    border: 1px solid #E4E5E5;
}

main .card-container .medium-card-container .card .card-img img {
    width: 100%;
}

main .card-container .medium-card-container .card .price {
    color: var(--primary-color);
    font-family: var(--hebd-font-body);
    font-size: 16px;
    font-weight: 500;
    letter-spacing: -0.4px;
}

main .card-container .hover-icon {
    padding: 5px 15px;
    border-radius: 5px;
    background: #FFF;
    opacity: 0;
    position: absolute;
    top: 25px;
    right: 15px;
    transition: opacity 0.2s, transform 0.5s;
    cursor: pointer;
}

main .card-container .card:hover .hover-icon {
    opacity: 1;
    transform: translateX(-10px);
}

/* Base type: everything inherits the body face unless a rule says otherwise. */
body {
    font-family: var(--hebd-font-body);
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--hebd-font-heading);
}

/* card css end  */
.bg-unread {
    background-color: var(--green-text-color);
}

.pading {
    padding: 0px 0px;
}

.product-title {
    color: var(--black-text-color);
    font-family: var(--hebd-font-heading);
    font-size: 14px;
    line-height: 24px;
    height: 70px;
}

.price {
    color: var(--primary-color);
    font-family: var(--hebd-font-body);
    font-size: 16px;
    font-weight: 500;
    letter-spacing: -0.4px;
}


.card-btn,
.simple-btn {
    display: block !important;
    padding: 10px !important;
    color: #FFF;
    font-size: 13px;
    text-align: center;
    border: none;
    border-radius: 4px;
    background: var(--primary-color);
    font-weight: 600;
    text-transform: uppercase;
    position: relative;
    overflow: hidden;
    white-space: nowrap;
    width: 150px;
    margin: 0 auto;
}

.card-btn:hover,
.simple-btn:hover {
    background: var(--secondery-color);
}

.card-btn::after {
    position: absolute;
    transition: opacity 0.4s, transform 0.2s;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.card-btn::after {
    content: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23ffffff' class='bi bi-eye-fill' viewBox='0 0 16 16'%3E%3Cpath d='M10.5 8a2.5 2.5 0 1 1-5 0 2.5 2.5 0 0 1 5 0'/%3E%3Cpath d='M0 8s3-5.5 8-5.5S16 8 16 8s-3 5.5-8 5.5S0 8 0 8m8 3.5a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7'/%3E%3C/svg%3E");
    opacity: 0;
    transform: translate(-50%, -50%) translateY(10px);
    background: var(--secondery-color);
    width: 100%;
    height: 100%;
}

.card-btn:hover::before {
    opacity: 0;
    transform: translate(-50%, -50%) translateY(-10px);
}

.card-btn:hover::after {
    opacity: 1;
}

.raf-tag {
    text-decoration: none;
    color: #000;
}

.hover-icon {
    padding: 10px;
    border-radius: 5px;
    background: #FFF;
    opacity: 0;
    position: absolute;
    top: 25px;
    right: 15px;
    transition: opacity 0.2s, transform 0.5s;
    cursor: pointer;
}

.card:hover .hover-icon {
    opacity: 1;
    transform: translateX(-10px);
}

.see-all {
    padding: 23px 59px;
    border-radius: 8px;
    background: #276B41;
    color: #FFF;
    font-family: var(--hebd-font-body);
    font-size: 30px;
    font-weight: 600;
    margin: 0 auto;
    border: none;
}

.fixed-img {
    height: 100%;
    width: 100%;
    object-fit: cover !important;
}

input:focus {
    box-shadow: none !important;
}

.section-text {
    font-size: 14px;
    font-weight: 400;
    line-height: 22px;
    font-family: var(--hebd-font-body);
    color: rgb(119, 119, 119);
}

/* botton nav bar css  */
.bottom-nav {
    display: none;
}

.bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: var(--nav-height);
    background: #ffffff;
    border-top: 1px solid #EAEAEA;
    z-index: 1000;
    padding: 8px 0;
}

.bottom-nav .nav-items {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #333333;
    text-decoration: none;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.2;
    position: relative;
    transition: color 0.2s ease;
    cursor: pointer;
}

.nav-items:hover,
.nav-items.active {
    color: var(--primary-zero-color);
}

.bottom-nav .nav-items svg {
    width: 24px;
    height: 24px;
    margin-bottom: 4px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.cart-badge {
    position: absolute;
    top: -4px;
    right: 40%;
    background: var(--primary-zero-color);
    color: white;
    border-radius: 50%;
    width: 16px;
    height: 16px;
    font-size: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.info-text {
    font-size: 14px;
    font-weight: 400;
    line-height: 22px;
    font-family: var(--hebd-font-body);
    color: rgb(51, 51, 51);
}

.section-title {
    font-size: 22px;
    font-weight: 600;
    line-height: 30px;
    font-family: var(--hebd-font-heading);
    line-height: 30px;
    color: rgb(36, 36, 36);
}

.normal-text {
    font-size: 14px;
    font-weight: 400;
    font-family: var(--hebd-font-body);
    line-height: 22.4px;
    color: rgb(122, 122, 122);
}

.bold-text {
    color: rgb(255, 255, 255);
    font-family: var(--hebd-font-body);
    font-size: 14px;
    font-weight: 600;
    line-height: 16px;
}

/* lendig page css  */

.text-warning {
    color: var(--yellow) !important;
}

.cards {
    background-color: #278855;
}

.lending-order-btn {
    color: white;
    padding: 25px 90px;
    border: 12px solid white;
    font-size: 2rem;
    background-color: #216F48;
    border-color: #ffffff;
    font-weight: 600;
    letter-spacing: 0.5px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    margin: 0 auto;
    display: flex;
    justify-content: center;
}

.horizental {
    border: 1px solid #CCCCCC;
}

@media screen and (max-width:1024px) {
    .bottom-nav {
        display: block;
    }
}

/* Comments CSS */
.comment-list {
    list-style: none;
    padding: 0;
}

.comment-body {
    background: #f8f9fa;
    border-radius: 8px;
    padding: 15px;
}

.comment-author {
    font-weight: bold;
}

.comment-form label {
    font-weight: 500;
}

.comment-form input,
.comment-form textarea {
    border: 1px solid #ccc;
    border-radius: 6px;
}

.comment-form input:required:invalid,
.comment-form textarea:required:invalid {
    border-color: red;
}

/* Buttons CSS */

.see-btn,
.comments-btn {
    padding: 10px 39px;
    border-radius: 8px;
    background: var(--primary-color) !important;
    color: #fff !important;
    font-family: var(--hebd-font-body);
    font-size: 20px;
    font-weight: 500;
    line-height: 34px;
    margin: 0 auto;
    border: none;
    text-decoration: none;
}

.see-btn:hover,
.comments-btn:hover {
    background-color: var(--secondery-color) !important;
    color: #fff;
}

/* Swiper CSS */

/*
 * Carousel arrows. These used to be full-height, fully transparent 27px columns
 * revealed only on :hover, so they were invisible on load and unreachable on
 * touch, while their tall hit area covered the edge of every card.
 */
main .swiper-button-next,
main .swiper-button-prev {
    width: 40px;
    height: 40px;
    top: 50%;
    margin-top: 0;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: #fff;
    border: 1px solid #e2e8e4;
    box-shadow: 0 2px 10px -4px rgba(16, 40, 26, .45);
    color: #136532;
    opacity: 1;
    pointer-events: auto;
    transition: background-color .18s ease, color .18s ease, border-color .18s ease, opacity .18s ease;
}

main .swiper-button-next:hover,
main .swiper-button-prev:hover {
    background-color: #136532;
    border-color: #136532;
    color: #fff;
}

main .swiper-button-next:focus-visible,
main .swiper-button-prev:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(19, 101, 50, .25);
}

main .swiper-button-next::after,
main .swiper-button-prev::after {
    font-size: 15px;
    font-weight: 700;
}

/* Swiper adds this when the carousel has nothing left to scroll to. */
main .swiper-button-next.swiper-button-lock,
main .swiper-button-prev.swiper-button-lock,
main .swiper-button-next.swiper-button-disabled,
main .swiper-button-prev.swiper-button-disabled {
    opacity: 0;
    pointer-events: none;
}

main .swiper-button-next {
    right: -6px;
    left: auto;
}

main .swiper-button-prev {
    left: -6px;
    right: auto;
}

main .swiper-pagination .swiper-pagination-bullet {
    height: 10px;
    width: 10px;
    background: #000;
    border: 2px solid #000;
}

/* Product Quantity Wrapper */

.quantity-wrapper .quantity {
    margin-right: 0 !important;
}

.quantity-wrapper button,
.quantity-wrapper .quantity input {
    border: 2px solid rgba(0, 0, 0, 0.1) !important;
    padding: 10px !important;
    display: flex;
    align-items: center;
    justify-content: center;
}

.quantity-wrapper button.quantity-minus {
    border-bottom-right-radius: 0;
    border-top-right-radius: 0;
    border-right: none !important;
}

.quantity-wrapper button.quantity-plus {
    border-bottom-left-radius: 0;
    border-top-left-radius: 0;
    border-left: none !important;
}

.quantity-wrapper button.quantity-minus:hover,
.quantity-wrapper button.quantity-plus:hover {
    background: var(--primary-color);
    color: #fff;
}

.quantity-wrapper input::-webkit-outer-spin-button,
.quantity-wrapper input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.quantity-wrapper input {
    -moz-appearance: textfield;
    border-left: none;
    border-right: none;
}

.quantity-wrapper input:focus {
    box-shadow: none;
    outline: none;
}

.select2-container.select2-container--open .select2-dropdown--below,
.select2-search__field,
.select2-container .select2-dropdown,
.select2-container .select2-selection {
    border: 2px solid rgba(0, 0, 0, 0.1) !important;
}

.select2-container .select2-dropdown,
.select2-container .select2-selection {
    text-align: left;
    padding: 5px;
}

.select2-selection__rendered {
    font-size: 14px;
    color: rgba(0, 0, 0, 0.5) !important;
}

.form-control {
    border: 2px solid rgba(0, 0, 0, 0.105) !important;
    padding: 0 15px !important;
    max-width: 100% !important;
    width: 100% !important;
    min-height: 42px !important;
    border-radius: 5px !important;
    background-color: transparent !important;
    box-shadow: none !important;
    color: inherit !important;
    vertical-align: middle !important;
    font-size: 14px !important;
    transition: border-color .5s ease;
}

.form-control:focus {
    border-color: var(--primary-color);
    box-shadow: none;
    color: rgba(0, 0, 0, 0.5);
}

.multiple-product-cart-form .quantity-wrapper .quantity,
.multiple-product-cart-form .quantity-wrapper .quantity input {
    width: 100%;
}