:root {
    --primary: #2563eb;
    --green-bg: #dcfce7;
    --green-text: #166534;
    --yellow-coupon: #fde047;
}

body { margin: 0; padding: 0; font-family: 'Poppins', sans-serif; background: #fff; overflow-x: hidden; }

/* HEADER & NAV */
.header { background: white; padding: 5px 15px; box-shadow: 0 2px 5px rgba(0,0,0,0.05); position: sticky; top: 0; z-index: 1000; }
.top-bar { display: flex; justify-content: space-between; align-items: center; }
.logo-text { font-size: 18px; font-weight: 700; color: var(--primary); }
.rect-logo { height: 24px; }
.nav { display: flex; gap: 12px; overflow-x: auto; padding: 5px 0; scrollbar-width: none; }
.nav a { text-decoration: none; color: #64748b; font-size: 12px; font-weight: 600; white-space: nowrap; }
.nav a.active { color: var(--primary); }

/* TEASER SECTION */
.teaser-section { height: 32px; background: #0f172a; position: relative; overflow: hidden; display: flex; align-items: center; }
.car-group { position: absolute; display: flex; align-items: center; left: -600px; animation: drive 10s linear infinite; }
.moving-car { height: 18px; margin-left: 8px; }
.teaser-text { color: #fff; font-size: 9px; font-weight: 700; white-space: nowrap; }
.highlight { color: #fbbf24; }
@keyframes drive { 0% { left: -600px; } 100% { left: 100%; } }

/* HERO SECTION - COMPACT & ALIGNED */
.hero { 
    height: 260px; /* Reduced height */
    position: relative; 
    display: flex; 
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    padding-top: 15px;
    color: white; 
    text-align: center;
}

.hero-bg { 
    position: absolute; 
    top: 0; left: 0; 
    width: 100%; height: 100%; 
    background-size: cover; 
    background-position: center; 
    z-index: -1; 
    filter: brightness(0.4); 
    background-image: url('https://images.unsplash.com/photo-1584622650111-993a426fbf0a?q=80&w=1200');
}

.hero-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    z-index: 10;
}

.discount-tag {
    background: var(--green-bg);
    color: var(--green-text);
    padding: 3px 10px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 600;
}
.coupon {
    background: var(--yellow-coupon);
    color: #000;
    padding: 1px 5px;
    border-radius: 3px;
    margin-left: 4px;
    cursor: pointer;
    font-weight: 800;
}

.hero-title {
    font-size: 24px;
    margin: 5px 0;
    font-weight: 700;
    opacity: 0;
    animation: glowPop 0.8s ease-out forwards;
}

@keyframes glowPop {
    0% { opacity: 0; transform: translateY(10px); }
    100% { opacity: 1; transform: translateY(0); text-shadow: 0 0 10px rgba(255,255,255,0.5); }
}

/* SLIM SEARCH BOX */
.search-box { 
    background: white; 
    border-radius: 50px; 
    padding: 3px; 
    width: 250px; 
    display: flex; 
    box-shadow: 0 4px 10px rgba(0,0,0,0.3); 
    height: 34px; /* Slim height */
    overflow: hidden;
}
.search-box input { border: none; outline: none; flex: 1; font-size: 13px; padding-left: 12px; color: #333; background: transparent; }
.search-box button { background: var(--primary); color: white; border: none; padding: 0 15px; border-radius: 50px; font-weight: 600; cursor: pointer; font-size: 12px; }



/* SECTION HEADER (Pehle wala design) */
.section-header {
    padding: 25px 20px 10px;
}
.section-header h2 {
    font-size: 18px; /* Bada size */
    font-weight: 700;
    color: #1e293b;
    margin: 0;
    position: relative;
}
.section-header h2::after {
    content: '';
    display: block;
    width: 40px;
    height: 3px;
    background: var(--primary);
    margin-top: 4px;
    border-radius: 2px;
}

/* SLIDER IMPROVEMENTS */
.slider-container {
    overflow-x: auto;
    white-space: nowrap;
    cursor: grab;
    scrollbar-width: none;
    touch-action: pan-y;
    padding: 10px 0;
}
.slider-container::-webkit-scrollbar { display: none; }

.slider-track {
    display: flex;
    gap: 15px;
    width: max-content;
    padding: 0 20px;
}

.cat { text-align: center; width: 85px; flex-shrink: 0; }
.circle-outer {
    width: 65px; height: 65px;
    border-radius: 50%;
    border: 2px solid #f1f5f9;
    display: flex; justify-content: center; align-items: center;
    background: #fff;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
}
.circle { width: 52px; height: 52px; border-radius: 50%; overflow: hidden; }
.circle img { width: 100%; height: 100%; object-fit: cover; }
.cat p { font-size: 11px; margin-top: 8px; font-weight: 600; color: #475569; }


/* MAINTENANCE CARDS GRID */
.cards-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    padding: 10px 15px 30px;
}

.card {
    background: white;
    border-radius: 10px;
    overflow: hidden;
    border: 1.5px solid #f1f5f9;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* Smooth Pop effect */
    position: relative;
}

.card img { width: 100%; height: 90px; object-fit: cover; }
.card p { padding: 8px; font-size: 11px; font-weight: 600; text-align: center; margin: 0; color: #333; }

/* POP-UP + GLOW EFFECT */
.active-pop {
    transform: scale(1.08); /* Pop-up (Zoom in) */
    border-color: var(--primary);
    box-shadow: 0 8px 20px rgba(37, 99, 235, 0.3);
    z-index: 5;
}




.manual-slider {
    display: flex;
    overflow-x: auto;
    gap: 12px;
    padding: 10px 15px 35px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}
.manual-slider::-webkit-scrollbar { display: none; }

.booked-card {
    min-width: 145px; /* Perfect for 2.5 cards on mobile */
    max-width: 145px;
    background: white;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.06);
    overflow: hidden;
    flex-shrink: 0;
    border: 1px solid #f1f5f9;
    display: flex;
    flex-direction: column;
}

.img-box { position: relative; height: 90px; }
.img-box img { width: 100%; height: 100%; object-fit: cover; }

.big-green-tag {
    position: absolute;
    top: 0; left: 0; right: 0;
    background: #16a34a;
    color: white;
    font-size: 8px;
    font-weight: 800;
    text-align: center;
    padding: 4px 0;
    z-index: 2;
}

.discount-tag {
    position: absolute;
    top: 6px; left: 6px;
    background: #f43f5e;
    color: white;
    font-size: 8px;
    font-weight: 700;
    padding: 2px 5px;
    border-radius: 3px;
}
.discount-tag.free { background: #000; }

.info-box { padding: 10px; flex-grow: 1; }
.rating { font-size: 10px; font-weight: 700; color: #444; margin-bottom: 3px; }
.rating span { color: #94a3b8; font-weight: 400; font-size: 8px; }

.info-box h3 { 
    font-size: 11px; 
    margin: 0; 
    font-weight: 700; 
    color: #000; 
    height: 32px; 
    line-height: 1.2;
    overflow: hidden;
}

.pricing { margin: 6px 0; font-size: 12px; }
.old-price { text-decoration: line-through; color: #94a3b8; font-size: 10px; }
.new-price { color: #000; font-weight: 800; }

.black-btn {
    width: 100%;
    padding: 8px;
    background: #000;
    color: #fff;
    border: none;
    border-radius: 5px;
    font-size: 10px;
    font-weight: 700;
    cursor: pointer;
}



/* PROMO SECTION STYLES - FIXED */
.promo-container {
    padding: 15px 20px;
    background: #fff;
    /* Extra bottom padding to ensure button visibility on all screens */
    padding-bottom: 30px; 
}

.promo-wrapper {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1; /* Keep it Square */
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 8px 25px rgba(0,0,0,0.18);
}

.promo-bg {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background-size: cover;
    background-position: center;
    transition: background-image 1s ease-in-out; /* Smooth Fade Transition */
    z-index: 1;
}

.promo-overlay {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    /* Dark gradient for text and price contrast */
    background: linear-gradient(to bottom, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0.6) 60%, rgba(0,0,0,0.85) 100%);
    display: flex;
    flex-direction: column;
    /* This ensures content is on top and button is at the bottom */
    justify-content: space-between; 
    padding: 25px; /* Spacing from edges */
    color: white;
    z-index: 2;
    padding-bottom: 20px; /* Specific padding for button safety */
}

/* TOP CONTENT */
.promo-text-content {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.new-tag {
    background: #16a34a; /* Professional Green */
    color: white;
    padding: 5px 12px;
    font-size: 11px;
    font-weight: 800;
    width: max-content;
    border-radius: 4px;
    letter-spacing: 0.5px;
}

.promo-overlay h2 {
    font-size: clamp(24px, 6vw, 30px); /* Responsive Size */
    margin: 0;
    font-weight: 800;
    line-height: 1.1;
    text-shadow: 2px 2px 10px rgba(0,0,0,0.5);
}

.price-badge {
    font-size: 16px;
    margin-top: 5px;
}

.price-badge span {
    font-weight: 800;
    color: #fbbf24; /* Yellow Price */
}

/* BOOK NOW BUTTON - FULLY VISIBLE & STYLED */
.book-now-promo {
    background: #fff;
    color: #000;
    border: none;
    padding: 14px;
    border-radius: 8px;
    font-weight: 700;
    font-size: 15px;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(0,0,0,0.4);
    margin-bottom: 5px; /* Extra bottom safety margin */
}

.book-now-promo:active { transform: scale(0.96); }

/* PROMO SECTION - RIGHT ALIGNED BUTTON FIX */
.promo-container {
    padding: 15px 20px 30px;
    background: #fff;
}

.promo-wrapper {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 8px 25px rgba(0,0,0,0.15);
}

.promo-bg {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background-size: cover;
    background-position: center;
    transition: background-image 1s ease-in-out;
    z-index: 1;
}

.promo-overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(to bottom, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.85) 100%);
    display: flex;
    flex-direction: column;
    justify-content: space-between; 
    padding: 20px;
    color: white;
    z-index: 2;
}

.promo-top-content {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.new-tag {
    background: #16a34a;
    color: white;
    padding: 4px 10px;
    font-size: 9px;
    font-weight: 800;
    width: max-content;
    border-radius: 3px;
}

.promo-overlay h2 {
    font-size: 24px;
    margin: 0;
    font-weight: 800;
}

.price-badge { font-size: 14px; }
.price-badge span { font-weight: 800; color: #fbbf24; }

/* FLOATING WHITE BUTTON ON RIGHT CORNER */
.promo-action-area {
    display: flex;
    justify-content: flex-end; /* Pushes button to the right */
    width: 100%;
    padding-bottom: 10px; /* Adjust this to move it up or down */
}

.book-now-float {
    background: #fff;
    color: #000;
    border: none;
    padding: 10px 20px;
    border-radius: 6px;
    font-weight: 700;
    font-size: 13px;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    /* Isse button image ke corner se thoda gap bana ke rakhega */
    margin-right: 5px; 
    transition: 0.2s;
}

.book-now-float:active {
    transform: scale(0.95);
    background: #f1f1f1;
}

/* --- SEASONAL ULTRA FIXED HEIGHT & ANIMATION --- */
.seasonal-promo-container { 
    padding: 10px 15px 30px; /* Safe padding */
    background: #fff;
}

.seasonal-wrapper {
    position: relative;
    width: 100%;
    /* Tight mobile height ratio for full visibility */
    aspect-ratio: 4 / 5; 
    border-radius: 12px;
    overflow: hidden;
}

.seasonal-bg {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background-size: cover;
    background-position: center;
    transition: background-image 0.8s ease-in-out;
    z-index: 1;
}

/* --- LEFT SLIDING TAGS ANIMATION --- */
.fixed-tags-container {
    position: absolute;
    top: 20px; left: 0;
    display: flex;
    flex-direction: column;
    gap: 7px;
    z-index: 10;
}
.step-tag {
    background: #fbbf24;
    color: #000;
    padding: 6px 12px;
    font-size: 10px;
    font-weight: 700;
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
    box-shadow: 3px 3px 10px rgba(0,0,0,0.3);
    width: max-content;
    /* Initial state for animation */
    opacity: 0;
    transform: translateX(-100%); 
    animation: tagSlideLeft 0.5s ease-out forwards;
}

/* Sequential Delay for Tags */
.step-tag.tag1 { animation-delay: 0.2s; }
.step-tag.tag2 { animation-delay: 0.4s; }
.step-tag.tag3 { animation-delay: 0.6s; }

@keyframes tagSlideLeft {
    0% { opacity: 0; transform: translateX(-100%); }
    100% { opacity: 1; transform: translateX(0); }
}

.seasonal-overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(to bottom, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.85) 100%);
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: flex-end; /* Text to the bottom but safe */
    padding: 20px;
    padding-bottom: 25px; /* Spacing from edges to keep button safe */
}

.seasonal-content-box {
    display: flex;
    flex-direction: column;
    gap: 8px; /* Tight gap */
}

.seasonal-badge { background: #f43f5e; color: white; font-size: 9px; padding: 4px 10px; border-radius: 3px; width: max-content; margin-bottom: 5px; }

.glow-msg { display: none; }
.glow-msg.active { display: block; animation: popUp 0.4s ease; }

.glow-msg h1 { font-size: 24px; margin: 0; font-weight: 800; color: #fff; line-height: 1.1; }
.glow-msg p { font-size: 13px; margin: 3px 0; color: #cbd5e1; }

@keyframes popUp {
    0% { opacity: 0; transform: translateY(10px); }
    100% { opacity: 1; transform: translateY(0); }
}

/* --- EXPLORE NOW: BOTTOM-RIGHT FLOATING BUTTON --- */
.floating-btn-wrapper {
    display: flex;
    justify-content: flex-end; /* Button ko right side dhakelta hai */
    width: 100%;
    padding-top: 10px;
    padding-bottom: 5px; /* Niche se safe margin taaki kate nahi */
}

.explore-btn-float {
    background: #fff;
    color: #000;
    border: none;
    padding: 10px 18px; /* Compact size */
    border-radius: 6px;
    font-weight: 800;
    font-size: 13px;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(0,0,0,0.4);
    transition: transform 0.2s ease;
    
    /* Corner alignment logic */
    margin-right: 5px; 
    align-self: flex-end;
}

.explore-btn-float:active {
    transform: scale(0.95);
    background: #f1f1f1;
}

/* CLEANING GRID: 4x2 FORCE FIX */
.cleaning-grid-fixed {
    display: grid;
    /* Force exactly 4 columns */
    grid-template-columns: repeat(4, 1fr); 
    /* Force rows to wrap after 4 items */
    grid-template-rows: auto auto; 
    gap: 15px 5px; /* Rows ke beech 15px, columns ke beech 5px */
    padding: 20px 10px;
    background: #fff;
    width: 100%;
    box-sizing: border-box;
}

.clean-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.clean-box {
    width: 65px; /* Mobile par perfect size */
    height: 65px;
    background: #f1f5f9;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid #e2e8f0;
    margin-bottom: 8px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
}

.clean-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.clean-item p {
    font-size: 10px;
    font-weight: 700;
    color: #0f172a;
    margin: 0;
    line-height: 1.2;
    /* Text wrap allow kiya hai taaki lamba naam bhi aa jaye */
    width: 75px; 
}

.clean-item span {
    font-size: 8px;
    color: #16a34a; /* Urban Company Green */
    font-weight: 600;
    margin-top: 3px;
    display: block;
}



/* VERTICAL BOOKING STYLES */
.vertical-book-container {
    padding: 10px 20px 40px;
    background: #f8fafc;
}

.book-row {
    display: flex;
    align-items: center;
    background: #fff;
    border-radius: 15px;
    margin-bottom: 20px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0,0,0,0.06);
    border: 1px solid #f1f5f9;
}

/* Reverse class for alternate images (Right side) */
.book-row.reverse {
    flex-direction: row-reverse;
}

.book-img {
    width: 40%;
    height: 120px;
}

.book-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.book-details {
    width: 60%;
    padding: 15px;
}

.book-details h3 {
    font-size: 15px;
    margin: 0;
    font-weight: 800;
    color: #0f172a;
}

.book-details p {
    font-size: 11px;
    color: #64748b;
    margin: 5px 0 12px;
}

.book-now-small {
    background: #000;
    color: #fff;
    border: none;
    padding: 8px 15px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    transition: 0.2s;
}

.book-now-small:active {
    transform: scale(0.95);
    background: #334155;
}


/* --- MINI FLOATING CALL BUTTON --- */
.mini-call-float {
    position: fixed;
    bottom: 30px;
    right: 0; /* Corner se ekdum touch */
    z-index: 10000;
    display: flex;
    flex-direction: column;
    align-items: flex-end; /* Right side chipka rahega */
    cursor: pointer;
    /* Pop-up effect animation */
    animation: soft-pop 3s infinite ease-in-out;
}

.call-icon-circle {
    width: 45px; /* Size chota kiya */
    height: 45px;
    background: #0087FF; /* Truecaller Blue */
    border-radius: 50% 0 0 50%; /* Right side se flat (screen se touch) */
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: -2px 4px 12px rgba(0, 135, 255, 0.4);
    /* Glow effect */
    animation: glow-pulse 2s infinite;
}

.care-tag {
    background: rgba(0, 0, 0, 0.7);
    color: white;
    font-size: 8px;
    padding: 2px 8px;
    border-radius: 4px;
    margin-bottom: 4px;
    margin-right: 5px;
    font-weight: 700;
    text-transform: uppercase;
    white-space: nowrap;
}

/* Glow Animation */
@keyframes glow-pulse {
    0% { box-shadow: 0 0 0 0 rgba(0, 135, 255, 0.7); }
    70% { box-shadow: 0 0 0 10px rgba(0, 135, 255, 0); }
    100% { box-shadow: 0 0 0 0 rgba(0, 135, 255, 0); }
}

/* Dhere-dhere pop-up (Up/Down movement) */
@keyframes soft-pop {
    0%, 100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-8px) scale(1.05); }
}

.mini-call-float:active {
    transform: scale(0.9);
}



/* --- POP-UP SCREEN CENTER LOGIC --- */
.popup-overlay {
    position: fixed; /* Screen par fix rahega */
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.85); /* Dark background */
    backdrop-filter: blur(5px); /* Piche ka area blur */
    display: none; /* JS se flex hoga */
    justify-content: center;
    align-items: center;
    z-index: 99999; /* Sabse upar */
}

.popup-content {
    width: 85%;
    max-width: 320px;
    background: white;
    border-radius: 25px;
    position: relative;
    overflow: hidden;
    animation: popupScale 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes popupScale {
    from { transform: scale(0.7); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

/* Slide Styles */
.popup-slide { display: none; padding: 30px 20px; text-align: center; }
.popup-slide.active { display: block; }

.sticker-bg { background: #FFC107; } /* Yellow Background for Girl Sticker */

.girl-sticker {
    width: 120px;
    margin-bottom: 15px;
}

.popup-slide h2 { font-size: 22px; font-weight: 800; margin: 10px 0; color: #000; }
.popup-slide p { font-size: 14px; color: #333; }

/* Close/Cut Button */
.close-popup {
    position: absolute;
    top: 15px;
    right: 15px;
    background: rgba(0,0,0,0.2);
    border: none;
    color: #000;
    font-size: 24px;
    font-weight: bold;
    cursor: pointer;
    z-index: 100;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    line-height: 30px;
}

/* Rotating Clock */
.rotating-clock {
    font-size: 50px;
    display: inline-block;
    animation: rotateFull 2s linear infinite;
}

@keyframes rotateFull {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}



/* --- FIXED SALON GRID & IMAGE SIZE --- */
.salon-container { padding: 15px; background: #fff; }

.salon-tabs {
    display: flex;
    background: #f1f5f9;
    padding: 4px;
    border-radius: 12px;
    margin-bottom: 20px;
}

.tab-btn {
    flex: 1; padding: 10px; border: none; background: transparent;
    font-weight: 800; cursor: pointer; border-radius: 10px;
}

.tab-btn.active { background: #fff; color: #000; box-shadow: 0 4px 10px rgba(0,0,0,0.1); }

.salon-content { display: none; }
.salon-content.active { display: block; animation: fadeIn 0.3s ease; }

.salon-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* Mobile par 2 column fixed */
    gap: 12px;
}

.salon-card {
    background: #fff;
    border: 1px solid #f1f5f9;
    border-radius: 15px;
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
}

/* IMAGE BOX FIX - Isse size nahi bigdega */
.s-img-container {
    width: 100%;
    height: 100px; /* Sabhi images ki height fixed */
    overflow: hidden;
    background: #eee;
}

.s-img-container img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Image ko box mein fit karega bina stretch kiye */
}

.s-info { padding: 10px; }
.s-info h4 { font-size: 12px; margin: 0; font-weight: 700; color: #1e293b; }
.s-info p { font-size: 11px; color: #16a34a; font-weight: 800; margin-top: 4px; }

.add-btn {
    position: absolute;
    bottom: 8px; right: 8px;
    width: 26px; height: 26px;
    background: #fff; border: 1px solid #ddd;
    border-radius: 6px; font-weight: bold;
}

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }


/* --- WHATSAPP NOTIFICATION STYLE --- */
.wa-notify-wrapper {
    position: fixed;
    top: -150px; /* Shuru me screen ke upar chhupa rahega */
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    max-width: 350px;
    background: #fff;
    border-radius: 15px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.2);
    z-index: 999999;
    padding: 12px;
    transition: top 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.wa-notify-wrapper.show {
    top: 20px; /* 5 second baad yahan aa jayega */
}

.wa-notify-content {
    display: flex;
    align-items: center;
    gap: 12px;
}

.wa-avatar {
    width: 45px;
    height: 45px;
    border-radius: 50%; /* Gol Photo */
    object-fit: cover;
    border: 1px solid #eee;
}

.wa-mid { flex: 1; }
.wa-mid b { font-size: 14px; color: #25D366; } /* WhatsApp Green Color */
.wa-mid p { font-size: 12px; margin: 2px 0 0; color: #555; }

.wa-close {
    background: none;
    border: none;
    font-size: 22px;
    color: #999;
    cursor: pointer;
}

.wa-actions {
    margin-top: 10px;
    border-top: 1px solid #f1f1f1;
    padding-top: 8px;
    text-align: right;
}

.wa-btn-explore {
    background: #25D366;
    color: white;
    border: none;
    padding: 6px 15px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: bold;
    cursor: pointer;

}


/* --- MINI POP-UP (NO BLUR & FAST) --- */
.popup-overlay-mini {
    position: fixed;
    top: 0; left: 0;
    width: 100vw; height: 100vh;
    background: rgba(0, 0, 0, 0.4); /* Transparent dark, NO BLUR */
    display: none; /* JS se flex hoga */
    justify-content: center;
    align-items: center;
    z-index: 99999;
}

.popup-content-mini {
    width: 260px; /* Ekdum compact size */
    background: white;
    border-radius: 20px;
    position: relative;
    padding: 25px 15px;
    text-align: center;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
    animation: popupPop 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes popupPop {
    from { transform: scale(0.5); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

.rotating-clock-mini {
    font-size: 50px; /* Size chota kiya */
    display: inline-block;
    margin-bottom: 10px;
    animation: rotateClock 2s linear infinite;
}

@keyframes rotateClock {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.popup-slide-mini h2 { 
    font-size: 18px; 
    font-weight: 800; 
    margin: 5px 0; 
    color: #f43f5e; 
}

.popup-slide-mini p { 
    font-size: 13px; 
    color: #334155; 
    line-height: 1.4;
    margin: 0;
}

/* Close Button (Cut) */
.close-popup-mini {
    position: absolute;
    top: 8px; right: 10px;
    background: transparent;
    border: none;
    color: #999;
    font-size: 20px;
    font-weight: bold;
    cursor: pointer;
}


/* --- GOOGLE REVIEWS STYLES --- */
.google-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 20px;
}
.g-brand-logo { width: 70px; }

.reviews-container {
    overflow-x: auto;
    padding: 10px 20px 30px;
    background: #fff;
    -webkit-overflow-scrolling: touch;
}
.reviews-wrapper {
    display: flex;
    gap: 15px;
    /* Manual scroll option or auto-animation */
}
.review-card {
    min-width: 260px;
    background: #fff;
    padding: 15px;
    border-radius: 12px;
    border: 1px solid #f1f5f9;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}
.r-top { display: flex; align-items: center; gap: 10px; position: relative; }
.r-avatar { width: 35px; height: 35px; border-radius: 50%; }
.r-name-box b { font-size: 13px; display: block; }
.r-badge { font-size: 10px; color: #64748b; }
.g-icon-card { width: 15px; position: absolute; top: 0; right: 0; }
.r-stars { color: #fbbf24; margin: 10px 0; font-size: 14px; }
.r-text { font-size: 12px; color: #475569; line-height: 1.4; }

/* --- REFERRAL BOX --- */
.referral-section { padding: 20px; background: #fff; }
.ref-card {
    background: #f8fafc; /* Subtle Grey */
    border-radius: 15px;
    padding: 25px;
    text-align: center;
    border: 1px dashed #cbd5e1;
}
.ref-gift-icon { font-size: 40px; margin-bottom: 10px; }
.ref-card h3 { font-size: 16px; color: #1e293b; margin-bottom: 5px; }
.ref-card p { font-size: 13px; color: #64748b; }
.ref-now-btn {
    margin-top: 15px;
    background: #000; color: #fff; border: none;
    padding: 10px 25px; border-radius: 8px; font-weight: 700;
}

/* --- FOOTER --- */
.site-footer {
    background: #fff;
    padding: 40px 20px 20px;
    border-top: 1px solid #f1f5f9;
    text-align: center;
}
.footer-logo-text { font-size: 20px; font-weight: 900; letter-spacing: 1px; margin-bottom: 10px; }
.footer-about { font-size: 11px; color: #94a3b8; line-height: 1.6; max-width: 320px; margin: 0 auto 25px; }

.footer-contact-grid { margin-bottom: 30px; }
.f-contact-item { font-size: 12px; margin-bottom: 8px; color: #334155; }
.f-contact-item a { color: #000; font-weight: 700; text-decoration: none; }

.footer-legal { border-top: 1px solid #f1f5f9; padding-top: 20px; }
.footer-legal p { font-size: 10px; color: #cbd5e1; margin-bottom: 5px; }
.dev-credits { font-size: 9px; color: #94a3b8; text-transform: uppercase; letter-spacing: 0.5px; }
.dev-credits span { color: #64748b; font-weight: 800; }




.search-wrapper {
    position: relative;
    width: 200px;
    font-family: Arial, sans-serif;
}

.search-box {
    display: flex;
}

#search-input {
    height: 28px;
    padding: 4px 6px;
    font-size: 13px;
    border: 1px solid #ccc;
    border-right: none;
    outline: none;
    background: #fff;
    color: #000;   /* ✅ TEXT BLACK */
}

#search-btn {
    height: 28px;
    padding: 0 8px;
    font-size: 12px;
    border: 1px solid #ccc;
    background: #007bff;
    color: #fff;
    cursor: pointer;
}

#suggestions {
    position: absolute;
    top: 28px;
    left: 0;
    width: 100%;
    background: #fff;
    border: 1px solid #ccc;
    border-top: none;
    display: none;
    z-index: 9999;
}

#suggestions div {
    padding: 6px;
    font-size: 13px;
    color: #000;      /* ✅ TEXT BLACK FIX */
    background: #fff; /* ✅ FORCE WHITE BG */
    cursor: pointer;
}

#suggestions div:hover {
    background: #f2f2f2;
}