/*
Theme Name: Tinyblooom
Theme URI: http://tinybloom.com
Author: TinyBloom
Version: 1.0
*/


.woocommerce-message,
.woocommerce-error,
.woocommerce-info {
    display: none !important;
}

/* CONTACT FORM 7 PRIMARY FOCUS & DESIGN */

/* Changes focus border and shadow to Primary Color */
.wpcf7-form input:focus,
.wpcf7-form textarea:focus {
    border-color: #E11D48 !important;
    /* Your Primary Color */
    box-shadow: 0 0 0 2px rgba(225, 29, 72, 0.1) !important;
    outline: none !important;
}

/* Styles the validation error message below inputs */
.wpcf7-not-valid-tip {
    color: #E11D48 !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    margin-top: 5px !important;
}

/* Styles the general response output (Error/Success boxes) */
.wpcf7-response-output {
    margin: 20px 0 0 0 !important;
    padding: 15px 20px !important;
    border-radius: 8px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    border-width: 1px !important;
}

/* Success State styling */
.wpcf7-mail-sent-ok {
    background-color: #f0fdf4 !important;
    border-color: #bbf7d0 !important;
    color: #15803d !important;
}

/* Error State styling (matches your image_e92975.png) */
.wpcf7-validation-errors,
.wpcf7-acceptance-missing,
.wpcf7-mail-sent-ng {
    background-color: #fef2f2 !important;
    border-color: #fecaca !important;
    color: #b91c1c !important;
}

.woocommerce form .form-row-first,
.woocommerce form .form-row-last {
    width: 50%;
}



/* Style the Labels */
.woocommerce-checkout label {
    color: #111827 !important;
    font-weight: 400 !important;
    display: block;
    margin-bottom: 5px;
}

/* Style the Input Borders */
.woocommerce-checkout input[type="text"],
.woocommerce-checkout input[type="email"],
.woocommerce-checkout input[type="tel"],
.woocommerce-checkout input[type="password"],
.woocommerce-checkout select,
.woocommerce-checkout textarea {
    border: 1px solid #dedede !important;
    border-radius: 4px !important;
    padding: 12px !important;
    background-color: #fff !important;
    width: 100% !important;
    transition: box-shadow 0.2s ease-in-out;
}

/* Focus State (Optional but recommended) */
.woocommerce-checkout input:focus {
    outline: none !important;
    box-shadow: 0 0 5px rgba(237, 48, 90, 0.3) !important;
    border-color: #333333 !important;
    /* Changes border on click */
}

/* Placeholder Styling */
::placeholder {
    color: #a1a1a1 !important;
    opacity: 1;
}

.woocommerce table.shop_table {
    border: 0px;
}




/* Optional: Add a small error message style */
.error-text {
    color: #ef4444;
    font-size: 0.875rem;
    margin-top: 4px;
    display: block;
}

.field-error-state {
    border-color: #dc2626 !important;
    /* Red-600 */
    background-color: #fef2f2 !important;
    /* Red Tint */
    box-shadow: 0 0 0 1px #dc2626 !important;
}

/* Hide default WooCommerce focus ring when in error state */
.field-error-state:focus {
    outline: none !important;
    box-shadow: 0 0 0 1px #dc2626 !important;
}


.input-error-state {
    border: 1px solid #dc2626 !important;
    background-color: #fef2f2 !important;
    box-shadow: 0 0 0 1px #dc2626 !important;
}

/* Make the library fit your Tailwind input height */
.iti {
    width: 100%;
}

.iti__country-list {
    border-radius: 12px;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    border: 1px solid #e2e8f0;
}

.woocommerce-checkout input[type="tel"] {
    padding-left: 100px !important;
}



/* Force the Red Tint and Border from your images */
.input-error-state {
    border: 1px solid #dc2626 !important;
    /* Red border */
    background-color: #fef2f2 !important;
    /* Soft red background tint */
    box-shadow: 0 0 0 1px #dc2626 !important;
}


/* Ensure the exclamation mark icon is positioned correctly inside the box */
#phone-right-icon {
    right: 12px;
    top: 40px;
    /* Adjust based on your label height */
}

.woocommerce-checkout input[type="tel"] {
    padding-left: 40px !important;
}

.woocommerce-checkout input[type="email"] {
    padding-left: 40px !important;
}


.woocommerce-privacy-policy-text {
    font-size: 11px;
}



/* --- Modern Card Container --- */
#checkout-payment-wrapper {
    background: transparent;
    padding: 0;
}

.woocommerce-checkout-payment {
    background: transparent !important;
}

/* --- Transform List into Interactive Cards --- */
.woocommerce-checkout-payment ul.payment_methods {
    display: flex;
    flex-direction: column;
    gap: 12px;
    /* Spacing between cards */
    list-style: none !important;
    padding: 0 !important;

}

.woocommerce-checkout-payment ul.payment_methods li {
    border: 1.5px solid #e2e8f0 !important;
    /* Soft border */
    padding: 16px 20px !important;
    background: #ffffff !important;
    transition: all 0.2s ease-in-out;
    cursor: pointer;
    margin-bottom: 0 !important;
}

/* Hover State */
.woocommerce-checkout-payment ul.payment_methods li:hover {
    border-color: #cbd5e1;
}

/* ACTIVE/SELECTED CARD STATE */
.woocommerce-checkout-payment ul.payment_methods li:has(input:checked) {
    border-color: #f43f5e !important;
    /* Brand Pink/Red */
    background: #fffafa !important;
    /* Ultra-light brand tint */
    box-shadow: 0 4px 12px rgba(244, 63, 94, 0.08);
}


.woocommerce-checkout-payment ul.payment_methods li label {
    font-weight: 700 !important;
    font-size: 15px !important;
    color: #0f172a !important;
    cursor: pointer;
    display: inline-block;
    vertical-align: middle;
}

/* Description Box - Minimalist Look (No backgrounds or arrows) */
.woocommerce-checkout-payment div.payment_box {
    background: transparent !important;
    padding: 8px 0 0 30px !important;
    /* Align under the text */
    margin: 0 !important;
    border: none !important;
    font-size: 13px;
    color: #64748b;
    line-height: 1.5;
}

/* Hide Arrow Indicators Permanently */
.woocommerce-checkout-payment div.payment_box::before,
.woocommerce-checkout-payment div.payment_box::after {
    display: none !important;
    content: none !important;
}

/* --- Premium Place Order Button --- */
#place_order {
    width: 100% !important;
    background: #f43f5e !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    padding: 16px !important;
    border-radius: 16px !important;
    font-size: 17px !important;
    border: none !important;
    margin-top: 24px !important;
    box-shadow: 0 10px 15px -3px rgba(244, 63, 94, 0.3) !important;
    transition: transform 0.2s ease;
}

#place_order:hover {
    transform: translateY(-2px);
    background: #e11d48 !important;
}


/* --- Global Radio & Checkbox Theme Color --- */
input[type="radio"],
input[type="checkbox"] {
    accent-color: #f43f5e !important;
    /* Your primary pink theme color */
}

/* Ensure WooCommerce specific elements follow the theme */
.woocommerce-checkout input[type="radio"]:checked,
.woocommerce-checkout input[type="checkbox"]:checked {
    accent-color: #f43f5e !important;
}

/* --- Card-Based Payment Style (Restored & Updated) --- */
.woocommerce-checkout-payment ul.payment_methods li:has(input:checked) {
    border-color: #f43f5e !important;
    background: #fffafa !important;
    box-shadow: 0 4px 12px rgba(244, 63, 94, 0.08);
}

.woocommerce-terms-and-conditions-checkbox-text {
    font-size: 12px;
}

.h-full-imp {
    height: 100% !important;
}

#mobile-slider {
    touch-action: pan-y;
    /* Only allow vertical panning (page scroll) */
    overflow: hidden;
}

.swiper-slide {
    /* Prevents image dragging from breaking the swipe */
    user-select: none;
    -webkit-user-drag: none;
    display: flex !important;
}

.tb-logo {
    height: 40px !important;
}

.woocommerce-checkout #payment div.form-row {
    padding: 0em !important;
    padding-top: 1rem !important;
}


/* Hero Swiper Aspect Ratio & Dimensions to prevent CLS */
.hero-swiper {
    aspect-ratio: 1100 / 1292;
    width: 100%;
    height: auto;
}

@media (min-width: 768px) {
    .hero-swiper {
        aspect-ratio: 1920 / 900;
    }
}

/* Hide inactive slides in hero-swiper before Swiper initializes to prevent vertical stack CLS */
.hero-swiper:not(.swiper-initialized) .swiper-slide:not(:first-child) {
    display: none !important;
}

.myCategorySwiper {
    height: 250px;
}

/* 2. Force every slide to be the same height */
.myCategorySwiper .swiper-slide {
    height: 100%;
}

/* Prevent category swiper layout shift before JS initializes */
.myCategorySwiper:not(.swiper-initialized) .swiper-wrapper {
    display: flex;
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
}

.myCategorySwiper:not(.swiper-initialized) .swiper-slide {
    flex-shrink: 0;
    width: 80%;
    /* approximate mobile view width */
}

@media (min-width: 1024px) {
    .myCategorySwiper:not(.swiper-initialized) .swiper-slide {
        width: 30%;
        /* approximate desktop view width */
    }
}

.satisfy-regular {
    font-family: "Satisfy", cursive;
    font-weight: 400;
    font-style: normal;
}

.anton-regular {
    font-family: "Anton", sans-serif;
    font-weight: 400;
    font-style: normal;
}

.wishlist-icon.text-red-500 {
    color: #f43f5e !important;
    /* Tailwind red-500 */
}



/* Chrome Image Quality - let browser use default high-quality scaling */
img {
    image-rendering: -webkit-optimize-contrast;
}

/* Banner Shimmer & Fade-in */
.shimmer-placeholder {
    background: #f6f7f8;
    background-image: linear-gradient(to right, #f6f7f8 0%, #edeef1 20%, #f6f7f8 40%, #f6f7f8 100%);
    background-repeat: no-repeat;
    background-size: 200% 100%;
    animation: shimmer 1.5s linear infinite forwards;
}

@keyframes shimmer {
    0% {
        background-position: -200% 0;
    }

    100% {
        background-position: 200% 0;
    }
}

.hero-banner-img {
    opacity: 0;
    filter: blur(10px);
    transition: opacity 0.8s ease-out, filter 0.8s ease-out;
    will-change: opacity, filter;
}

.hero-banner-img.loaded {
    opacity: 1 !important;
    filter: blur(0) !important;
}

@keyframes fadeIn {
    0% {
        opacity: 0.5;
    }

    100% {
        opacity: 1;
    }
}


.grecaptcha-badge {
    visibility: hidden !important;
}



/* ==========================================================================
   ૧૦૦% ABSOLUTE OVERLAY CUSTOM SCROLLBAR (NO SPACE TAKEN)
   ========================================================================== */

/* ==========================================================================
   GHOST SCROLLING (NO SCROLLBAR, COMPLETELY HIDDEN BUT SCROLLING WORKS)
   ========================================================================== */

html,
body {
    /* ૧. Firefox માટે સ્ક્રોલબાર ગાયબ કરવાનો કોડ */
    scrollbar-width: none;

    /* ૨. Internet Explorer અને જૂના Edge માટે */
    -ms-overflow-style: none;
}

/* ૩. Chrome, Safari, Opera અને નવા Edge માટે સ્ક્રોલબાર સંપૂર્ણ ગાયબ */
::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    background: transparent !important;
}

/* સેફ્ટી માટે જો કોઈ ચોક્કસ કન્ટેનરમાં સ્ક્રોલબાર આવતો હોય તો તેને પણ ગાયબ કરવા માટે */
.scroll-container,
#page,
#wrapper {
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.scroll-container::-webkit-scrollbar,
#page::-webkit-scrollbar,
#wrapper::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
}

/* Product gallery images - use browser default quality scaling */

/* Mobile bottom bar padding offset for body to prevent content overlay */
@media (max-width: 1023px) {
    body {
        padding-bottom: 60px !important;
    }
}

@media (max-width: 1023px) {
    .joinchat {
        display: none !important;
    }
}

.razorpay-logo {
    width: 100px !important;
}

@media (max-width: 1023px) {
  .girl-product-swiper .swiper-wrapper,
  .women-product-swiper .swiper-wrapper {
    display: grid !important;
    transform: none !important;
  }
  .girl-product-swiper .swiper-slide:nth-child(n+7),
  .women-product-swiper .swiper-slide:nth-child(n+7) {
    display: none !important;
  }
}