/**
 * Mithaas Sections CSS
 * Custom styles for homepage shortcode sections
 */

/* ==========================================================================
   Fonts & Variables
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@300..700&display=swap');

:root {
    --mithaas-bg-cream: #FFF7EB;
    --mithaas-orange: #EA6F25;
    --mithaas-brown-dark: #560A04;
    --mithaas-brown-light: #9E7748;
    --mithaas-gold: #E2C589;
    --mithaas-border: #643717;
}

/* ==========================================================================
   Base Styles
   ========================================================================== */
.mithaas-section { font-family: "VAG Rounded Next", Arial, sans-serif; }
.mithaas-section *, .mithaas-section *:before, .mithaas-section *:after { box-sizing: border-box; }
.mithaas-section img { border: 0; max-width: 100%; height: auto; vertical-align: middle; }
.mithaas-section ul, .mithaas-section ol { list-style: none; margin: 0; padding: 0; }
.mithaas-section .container { max-width: calc(100% - 48px); margin: 0 auto; }
.mithaas-section .text-center { text-align: center; }

/* Heading styles */
.mithaas-section .heading-2 {
    font-family: "VAG Rounded Next", Sans-serif;
    font-size: 48px;
    font-weight: 600;
    line-height: 1.4em;
    color: var(--mithaas-brown-dark);
    margin-bottom: 80px;
}

.mithaas-section .heading-3 {
    font-family: Jua;
	font-weight: 400;
	font-style: Regular;
	font-size: 18px;
	leading-trim: NONE;
	line-height: 150%;
	letter-spacing: 0%;
	text-align: center;

}

/* Wave text effect */
.mithaas-section .coffee_txt { color: var(--mithaas-orange); position: relative; }
.mithaas-section .wave-text.star { position: relative; }
.mithaas-section .wave-text.star::before {
    content: "";
    background-image: url(https://mithaasofindore.com/wp-content/uploads/2025/12/star-graphics.svg);
    width: 15px;
    height: 21px;
    display: block;
    position: absolute;
    top: 0;
    right: -20px;
    background-size: cover;
    background-position: top center;
    background-repeat: no-repeat;
}
.mithaas-section .wave-text::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -5px;
    width: 100%;
    height: 12px;
    background-repeat: repeat-x;
    background-size: 32px 12px;
    background-image: url("data:image/svg+xml,%3Csvg width='32' height='12' viewBox='0 0 32 12' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 6 Q4 0 8 6 T16 6 T24 6 T32 6' fill='none' stroke='%23EA6F25' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* ==========================================================================
   Hero Banner Section
   ========================================================================== */
.mithaas-hero .banner_sec figure {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}
.mithaas-hero .banner_sec .mobile-hero { display: none; }
.mithaas-hero .banner_sec .desktop-hero {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
}

/* ==========================================================================
   Marquee Section
   ========================================================================== */
.mithaas-hero .marqee_txt {
    overflow: hidden;
    white-space: nowrap;
    position: relative;
    padding: 100px 0 60px 0;
    width: 100%;
    background-color: var(--mithaas-bg-cream);
}
.mithaas-hero .marquee-content {
    display: flex;
    gap: 60px;
    width: max-content;
    animation: mithaas-marquee 15s linear infinite;
}
.mithaas-hero .marqee_txt ul {
    display: flex;
    gap: 60px;
    align-items: center;
    flex-shrink: 0;
}
.mithaas-hero .marqee_txt ul li {
    display: flex;
    gap: 20px;
    align-items: center;
}
.mithaas-hero .marqee_txt ul li img { min-width: 24px; }
.mithaas-hero .marqee_txt ul li p {
    font-family: "Fredoka One", sans-serif;
    font-weight: 400;
    font-size: 32px;
    line-height: 39px;
    white-space: nowrap;
    color: transparent;
    -webkit-text-stroke: 1px var(--mithaas-orange);
    text-stroke: 1px var(--mithaas-orange);
}

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

/* ==========================================================================
   Why People Enjoy Section
   ========================================================================== */
.mithaas-why-enjoy { background-color: var(--mithaas-bg-cream); }
.mithaas-why-enjoy .why-people-enjoy { padding-top: 115px; padding-bottom: 190px; }
.mithaas-why-enjoy .why-people-enjoy h2 { text-align: center; }
.mithaas-why-enjoy .why-people-enjoy-listing { display: flex; justify-content: center; }
.mithaas-why-enjoy .why-people-enjoy-listing .item { width: calc(100% / 4 - 45px); padding: 0 45px; }
.mithaas-why-enjoy .list-main { text-align: center; }
.mithaas-why-enjoy .list-main p {
    font-family: 'Fredoka', sans-serif;
    font-weight: 500;
    font-size: 18px;
    line-height: 150%;
    color: var(--mithaas-brown-light);
    opacity: 0.8;
    max-width: 220px;
    margin: 0 auto;
}

/* Icon blob wrapper */
.mithaas-why-enjoy .mithaas-ic { position: relative; margin-bottom: 30px !important; }
.mithaas-why-enjoy .mithaas-ic img { position: relative; z-index: 3;}
.mithaas-why-enjoy .blob-wrapper { display: flex; align-items: center; justify-content: center; }
.mithaas-why-enjoy .inner_border,
.mithaas-why-enjoy .outer_border {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 0;
    transition: all 0.3s ease;
}
.mithaas-why-enjoy .blob-wrapper .icon {
    width: 190px;
    height: 190px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: transparent;
}
.mithaas-why-enjoy .inner_border { z-index: 1; }

/* Hover effects */
.mithaas-why-enjoy .item:hover .outer_border { transform: translate(-50%, -50%) rotate(-90deg); }
.mithaas-why-enjoy .item:hover .outer_border svg path { stroke: var(--mithaas-gold); stroke-width: 1.5px; }
.mithaas-why-enjoy .item:hover .inner_border { transform: translate(-50%, -50%) rotate(30deg) scale(1.1); }
.mithaas-why-enjoy .item:hover .inner_border svg path { stroke: var(--mithaas-gold); stroke-width: 1.5px; }
.mithaas-why-enjoy .item:hover .mithaas-ic img { filter: brightness(0) saturate(100%) invert(20%) sepia(30%) saturate(1500%) hue-rotate(10deg); }

/* ==========================================================================
   Our Signature Specialties Section
   ========================================================================== */
.our-signature-sec {
    background: linear-gradient(180deg, #FF9556 0%, #E7722C 100%);
    padding-block: 105px;
    position: relative;
}
.our-signature-sec:before {
    content: '';
    display: block;
    left: 0;
    top: 7px;
    width: 100%;
    height: 98px;
    position: absolute;
    background: url(../images/top-border-area.svg) no-repeat center center / cover;
    z-index: 0;
}
.our-signature-sec:after {
    content: '';
    display: block;
    left: 0;
    bottom: 7px;
    width: 100%;
    height: 98px;
    position: absolute;
    background: url(../images/bottom-border-area.svg) no-repeat center center / cover;
    z-index: 0;
}
.our-signature-sec .heading-2 { color: #fff; margin-bottom: 60px; }
.our-signature-sec .wave-text.star.white-txt:before,
.our-signature-sec .wave-text.star.white-txt:after {color: #fff !important; filter: brightness(0) invert(1); }

.our-signature-sec .wave-text.star.white-txt{
	color : #ffffff !important;
}

/* Product listing */
.our-signature-sec .product-listing-block { display: flex; gap: 16px; flex-wrap: wrap; justify-content: center; }
.our-signature-sec .product-listing-block li { width: calc(25% - 12px); max-width: 360px; flex-shrink: 0; }
.our-signature-sec .product-img {
    padding: 10px;
    margin-bottom: 15px;
    transition: all 0.5s ease;
    position: relative;
    z-index: 1;
    background: url(../images/main-img-bg.svg) no-repeat center center / contain;
    width: 250px;
    height: 250px;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    align-items: center;
    justify-content: center;
}
.our-signature-sec .product-img img {
    width: 210px;
    height: 210px;
    transition: all 0.5s ease;
    object-fit: cover;
    border-radius: 50%;
}
.our-signature-sec .product-content {
    position: relative;
    width: 100%;
    height: 360px;
    padding: 20px;
    background-color: transparent;
    transition: all 0.5s ease;
    overflow: hidden;
    box-sizing: border-box;
}
.our-signature-sec .product-content .heading-3 {
    color: #FFF7EB;
    transition: all 0.5s ease;
    text-align: center;
}
.our-signature-sec .product-content p {
    font-family: 'Fredoka', sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 150%;
    text-align: center;
    color: #914D00;
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    transform: translateY(20px);
    transition: opacity 0.5s ease, max-height 0.5s ease, transform 0.5s ease;
}

/* Product card hover */
.our-signature-sec .product-content:hover p { opacity: 1; max-height: 150px; transform: translateY(0); width: 250px; margin: 0 auto; }
.our-signature-sec .product-content:hover { background: #FFDCA6; border: 1px dashed #FFDCA6; border-radius: 24px; }
.our-signature-sec .product-content:hover .product-img { background: transparent; width: 228px; height: 116px; margin: 0 auto 15px; padding: 0; overflow: hidden; border-radius: 161.702px; }
.our-signature-sec .product-content:hover .product-img img { width: 100%; height: 100%; max-height: 116px; object-fit: cover; object-position: center; border-radius: 161.702px; }
.our-signature-sec .product-content:hover .product-img:before { content: ''; position: absolute; top: 50%; left: 50%; width: 100%; height: 100%; background: #E86E25; mix-blend-mode: color; opacity: 0.5; transform: translate(-50%,-50%); border-radius: 161.702px; }
.our-signature-sec .product-content:hover .heading-3 { color: #1E1E1E; margin-bottom: 24px; font-size: 16px; }

/* View all button */
.our-signature-sec .view-all { margin-block: auto; }
.our-signature-sec .view-all a {
    border: 1px dashed #FFDCA5;
    border-radius: 58px;
    color: #ffffff;
    padding: 60px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-family: 'Fredoka', sans-serif;
}
.our-signature-sec .view-all img { margin-bottom: 16px; }

/* Hidden products - revealed on View All click */
.our-signature-sec .product-content.product-hidden {
    display: none;
}


/* ==========================================================================
   Responsive Styles
   ========================================================================== */

/* Mobile hero image */
@media (max-width: 767px) {
    .mithaas-hero .banner_sec { padding-top: 50px; }
    .mithaas-hero .banner_sec .mobile-hero { display: block; width: 100%; max-width: 100%; height: auto; object-fit: contain; margin: 0 auto; }
    .mithaas-hero .banner_sec .desktop-hero { display: none; }

    /* Why People Enjoy */
    .mithaas-why-enjoy .why-people-enjoy { padding-top: 60px; padding-bottom: 80px; }
    .mithaas-why-enjoy .heading-2 { font-size: 28px; margin-bottom: 100px; }
    .mithaas-why-enjoy .why-people-enjoy-listing { flex-wrap: wrap; gap: 80px; }
    .mithaas-why-enjoy .why-people-enjoy-listing .item { width: 100%; padding: 0; cursor: pointer; }
    .mithaas-why-enjoy .list-main p { max-width: 320px; }

    /* Disable hover on mobile */
    .mithaas-why-enjoy .item:hover .outer_border { transform: translate(-50%, -50%) rotate(0deg); }
    .mithaas-why-enjoy .item:hover .inner_border { transform: translate(-50%, -50%) rotate(0deg) scale(1); }
    .mithaas-why-enjoy .item:hover .mithaas-ic img { filter: none; }

    /* Active state for tap */
    .mithaas-why-enjoy .item.active .outer_border { transform: translate(-50%, -50%) rotate(-90deg) !important; }
    .mithaas-why-enjoy .item.active .outer_border svg path { stroke: var(--mithaas-gold) !important; stroke-width: 1.5px !important; }
    .mithaas-why-enjoy .item.active .inner_border { transform: translate(-50%, -50%) rotate(30deg) scale(1.1) !important; }
    .mithaas-why-enjoy .item.active .inner_border svg path { stroke: var(--mithaas-gold) !important; stroke-width: 1.5px !important; }
    .mithaas-why-enjoy .item.active .mithaas-ic img { filter: brightness(0) saturate(100%) invert(20%) sepia(30%) saturate(1500%) hue-rotate(10deg) !important; }

    /* Signature Section Mobile */
    .our-signature-sec { padding-block: 50px; }
    .our-signature-sec:before { height: 50px; top: 0; }
    .our-signature-sec:after { height: 50px; bottom: 0; }
    .our-signature-sec .heading-2 { font-size: 28px; margin-bottom: 40px; padding: 0 15px; }
    .our-signature-sec .product-listing-block { gap: 40px; flex-direction: column; align-items: center; }
    .our-signature-sec .product-listing-block li { width: 100%; max-width: 290px; }
    .our-signature-sec .product-content { width: 290px; height: 360px; padding: 20px; border-radius: 24px; cursor: pointer; }
    .our-signature-sec .product-img { padding: 20px; margin-bottom: 10px; width: 250px; height: 250px; margin-left: auto; margin-right: auto; }

    /* Disable hover on mobile products */
    .our-signature-sec .product-content:hover { background-color: transparent; }
    .our-signature-sec .product-content:hover p { opacity: 0; max-height: 0; transform: translateY(20px); }
    .our-signature-sec .product-content:hover .heading-3 { color: #FFF7EB; margin-bottom: 0; }

    /* Active/Tapped state for products */
    .our-signature-sec .product-content.active { background: #FFDCA6 !important; border: 1px dashed #FFDCA6 !important; border-radius: 24px; }
    .our-signature-sec .product-content.active p { opacity: 1 !important; max-height: 150px !important; transform: translateY(0) !important; width: 250px; margin: 0 auto; }
    .our-signature-sec .product-content.active .heading-3 { color: #1E1E1E; margin-bottom: 24px; font-size: 16px; }
    .our-signature-sec .product-content.active .product-img { background: transparent !important; width: 228px; height: 116px; margin: 0 auto 15px; padding: 0; overflow: hidden; border-radius: 161.702px; }
    .our-signature-sec .product-content.active .product-img img { width: 100%; height: 100%; max-height: 116px; object-fit: cover; object-position: center; border-radius: 161.702px !important; }

    /* View all mobile */
    .our-signature-sec .view-all { max-width: 180px; margin: 20px auto 0; }
    .our-signature-sec .view-all a { padding: 40px 30px; font-size: 14px; border-radius: 50px; }
	
	/* Hide ALL product-hidden items */
    .our-signature-sec .product-content.product-hidden {
        display: none;
    }

    /* Also hide items after 4, even if PHP didn’t mark them */
    .our-signature-sec .product-content:nth-of-type(n+5):not(.view-all) {
        display: none;
    }
	
}

/* Tablet */
@media (min-width: 768px) and (max-width: 991px) {
    .mithaas-why-enjoy .why-people-enjoy { padding-top: 80px; padding-bottom: 120px; }
    .mithaas-why-enjoy .heading-2 { font-size: 36px; margin-bottom: 50px; }
    .mithaas-why-enjoy .why-people-enjoy-listing { flex-wrap: wrap; gap: 30px; justify-content: center; }
    .mithaas-why-enjoy .why-people-enjoy-listing .item { width: calc(50% - 30px); padding: 0 15px; cursor: pointer; }
    .mithaas-why-enjoy .blob-wrapper .icon { width: 150px; height: 150px; }
    .mithaas-why-enjoy .inner_border svg { width: 145px; height: 157px; }
    .mithaas-why-enjoy .outer_border svg { width: 152px; height: 152px; }

    .our-signature-sec { padding-block: 60px; }
    .our-signature-sec .heading-2 { font-size: 36px; margin-bottom: 40px; }
    .our-signature-sec .product-listing-block li { width: calc(50% - 16px); max-width: 290px; }
    .our-signature-sec .product-content { height: 360px; cursor: pointer; }
	
}

/* Desktop */
@media (min-width: 992px) and (max-width: 1199px) {
    .our-signature-sec { padding-block: 40px; }
    .our-signature-sec .product-listing-block li { width: calc(33.333% - 16px); max-width: 280px; }
}


/*  */

/* Mobile only */
/* @media (max-width: 767px) {
  .product-listing-block .product-content {
    display: none;
  }

  .product-listing-block .product-content:nth-child(-n+4) {
    display: block;
  }
} */

.our-signature-sec.show-all-products .product-content.product-hidden {
    display: block;
}
.our-signature-sec.show-all-products .view-all {
    display: none;
}