/*
Theme Name: HomePack Solutions
Theme URI: https://homepacksolutions.com
Author: Nelka Digital
Author URI: https://nelkadigital.com
Description: Professional Home Services WordPress Theme with Admin Panel, Lead Management, SEO-optimized City Pages, and Dynamic Service Management.
Version: 1.0.0
License: GNU General Public License v2 or later
Text Domain: homepack
Tags: home-services, booking, lead-management, seo-optimized, responsive
*/

/* ============================================================
   MAIN STYLES - SAME DESIGN AS ORIGINAL STATIC SITE
   ============================================================ */

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

* { box-sizing: border-box; }
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: 40px; }
.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 */
.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; }
.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 */
.hero { height: 260px; 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); } }

/* SEARCH */
.search-wrapper { position: relative; }
.search-box { background: white; border-radius: 50px; padding: 3px; width: 280px; display: flex; box-shadow: 0 4px 10px rgba(0,0,0,0.3); height: 38px; 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; }
#suggestions { position: absolute; top: 100%; left: 0; right: 0; background: white; border-radius: 10px; box-shadow: 0 8px 20px rgba(0,0,0,0.15); z-index: 100; display: none; max-height: 200px; overflow-y: auto; }
#suggestions div { padding: 10px 15px; cursor: pointer; font-size: 13px; border-bottom: 1px solid #f1f1f1; }
#suggestions div:hover { background: #f0f4ff; }

/* SECTION HEADER */
.section-header { padding: 25px 20px 10px; }
.section-header h2 { font-size: 18px; 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 */
.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); margin: 0 auto; }
.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; white-space: normal; }

/* 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); 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; }
.active-pop { transform: scale(1.08); border-color: var(--primary); box-shadow: 0 8px 20px rgba(37, 99, 235, 0.3); z-index: 5; }

/* MOST BOOKED SLIDER */
.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: 200px; background: #fff; border-radius: 14px; box-shadow: 0 2px 10px rgba(0,0,0,0.08); overflow: hidden; flex-shrink: 0; border: 1px solid #f1f5f9; }
.booked-card .img-box { position: relative; height: 130px; }
.booked-card .img-box img { width: 100%; height: 100%; object-fit: cover; }
.booked-card .info-box { padding: 10px; }
.booked-card .rating { font-size: 12px; font-weight: 700; color: #f59e0b; }
.booked-card .rating span { color: #94a3b8; font-weight: 400; }
.booked-card h3 { font-size: 13px; font-weight: 700; margin: 4px 0; color: #1e293b; }
.booked-card .pricing { font-size: 13px; margin: 4px 0; }
.old-price { text-decoration: line-through; color: #94a3b8; }
.new-price { color: var(--primary); font-weight: 800; }
.black-btn { background: #0f172a; color: white; border: none; padding: 7px 14px; border-radius: 8px; font-size: 11px; font-weight: 700; cursor: pointer; width: 100%; margin-top: 6px; }

/* DISCOUNT TAGS */
.discount-tag.free { position: absolute; top: 8px; left: 8px; background: #dcfce7; color: #166534; padding: 3px 8px; border-radius: 4px; font-size: 10px; font-weight: 800; }
.discount-tag { position: absolute; top: 8px; left: 8px; background: #fde047; color: #000; padding: 3px 8px; border-radius: 4px; font-size: 10px; font-weight: 800; }
.big-green-tag { position: absolute; top: 8px; left: 8px; background: #16a34a; color: #fff; padding: 3px 8px; border-radius: 4px; font-size: 9px; font-weight: 800; }

/* PROMO CONTAINER */
.promo-container { padding: 20px 15px; }
.promo-wrapper { position: relative; border-radius: 18px; overflow: hidden; height: 200px; }
.promo-bg { position: absolute; inset: 0; background: url('https://images.unsplash.com/photo-1503376780353-7e6692767b70?q=80&w=800') center/cover; filter: brightness(0.5); }
.promo-overlay { position: relative; z-index: 2; padding: 20px; height: 100%; display: flex; flex-direction: column; justify-content: space-between; }
.promo-top-content .new-tag { background: #fde047; color: #000; padding: 3px 8px; border-radius: 4px; font-size: 10px; font-weight: 800; }
.promo-top-content h2 { color: white; font-size: 22px; margin: 8px 0; }
.price-badge { color: #fde047; font-size: 14px; font-weight: 700; }
.price-badge span { font-size: 20px; }
.book-now-float { background: white; color: #000; border: none; padding: 10px 24px; border-radius: 8px; font-weight: 800; font-size: 14px; cursor: pointer; }

/* SEASONAL PROMO */
.seasonal-promo-container { padding: 0 15px 20px; }
.seasonal-wrapper { position: relative; border-radius: 18px; overflow: hidden; height: 260px; }
.seasonal-bg { position: absolute; inset: 0; background: url('https://images.unsplash.com/photo-1556909114-f6e7ad7d3136?q=80&w=800') center/cover; filter: brightness(0.45); }
.seasonal-overlay { position: relative; z-index: 2; padding: 20px; height: 100%; display: flex; justify-content: space-between; }
.fixed-tags-container { display: flex; flex-direction: column; gap: 8px; padding-top: 10px; }
.step-tag { background: rgba(255,255,255,0.15); color: #fff; padding: 8px 12px; border-radius: 8px; font-size: 10px; font-weight: 700; backdrop-filter: blur(4px); border: 1px solid rgba(255,255,255,0.2); }
.seasonal-content-box { text-align: right; display: flex; flex-direction: column; align-items: flex-end; justify-content: center; gap: 12px; }
.seasonal-badge { background: #fde047; color: #000; padding: 4px 10px; border-radius: 4px; font-size: 9px; font-weight: 800; display: inline-block; }
.glow-text-container { position: relative; height: 60px; }
.glow-msg { display: none; color: white; }
.glow-msg.active { display: block; }
.glow-msg h1 { font-size: 16px; margin: 0; }
.glow-msg p { font-size: 11px; margin: 4px 0 0; opacity: 0.8; }
.seasonal-btn-final { background: var(--primary); color: white; border: none; padding: 10px 20px; border-radius: 8px; font-weight: 800; font-size: 12px; cursor: pointer; }

/* CLEANING GRID */
.cleaning-grid-fixed { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; padding: 5px 15px 20px; }
.clean-item { text-align: center; }
.clean-box { width: 100%; aspect-ratio: 1; border-radius: 10px; overflow: hidden; border: 1px solid #f1f5f9; }
.clean-box img { width: 100%; height: 100%; object-fit: cover; }
.clean-item p { font-size: 10px; font-weight: 700; margin: 5px 0 1px; color: #1e293b; }
.clean-item span { font-size: 9px; color: #16a34a; font-weight: 600; }

/* VERTICAL BOOK CONTAINER */
.vertical-book-container { padding: 10px 15px 30px; display: flex; flex-direction: column; gap: 14px; }
.book-row { display: flex; gap: 12px; align-items: center; background: #f8faff; border-radius: 12px; padding: 12px; border: 1px solid #e2e8f0; }
.book-row.reverse { flex-direction: row-reverse; }
.book-img { width: 90px; height: 90px; border-radius: 10px; overflow: hidden; flex-shrink: 0; }
.book-img img { width: 100%; height: 100%; object-fit: cover; }
.book-details h3 { font-size: 14px; font-weight: 700; margin: 0 0 4px; }
.book-details p { font-size: 11px; color: #64748b; margin: 0 0 8px; }
.book-now-small { background: var(--primary); color: white; border: none; padding: 7px 16px; border-radius: 7px; font-size: 11px; font-weight: 700; cursor: pointer; }

/* BEAUTY SALON SECTION */
.salon-container { padding: 0 15px 20px; }
.salon-tabs { display: flex; gap: 10px; margin-bottom: 15px; }
.tab-btn { padding: 8px 20px; border-radius: 20px; border: 1.5px solid #e2e8f0; font-size: 12px; font-weight: 700; cursor: pointer; background: white; }
.tab-btn.active { background: #0f172a; color: white; border-color: #0f172a; }
.salon-content { display: none; }
.salon-content.active { display: block; }
.salon-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.salon-card { border-radius: 12px; overflow: hidden; border: 1px solid #f1f5f9; position: relative; padding-bottom: 15px; }
.s-img-container { height: 120px; overflow: hidden; }
.s-img-container img { width: 100%; height: 100%; object-fit: cover; }
.s-info { padding: 8px 10px 0; }
.s-info h4 { font-size: 13px; font-weight: 700; margin: 0; }
.s-info p { font-size: 12px; color: var(--primary); font-weight: 700; margin: 3px 0; }
.salon-card .add-btn { position: absolute; bottom: 8px; right: 10px; background: white; color: var(--primary); border: 1.5px solid #d1d5db; padding: 4px 14px; border-radius: 6px; font-weight: 800; font-size: 14px; cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,0.1); }

/* CUSTOMER CARE FLOAT */
.mini-call-float { position: fixed; bottom: 60px; right: 15px; background: #16a34a; border-radius: 50px; padding: 8px 14px; display: flex; align-items: center; gap: 8px; cursor: pointer; z-index: 900; box-shadow: 0 4px 15px rgba(22,163,74,0.4); }
.care-tag { font-size: 10px; font-weight: 700; color: white; }
.call-icon-circle { width: 24px; height: 24px; background: rgba(255,255,255,0.2); border-radius: 50%; display: flex; align-items: center; justify-content: center; }

/* REVIEWS */
.google-header { display: flex; align-items: center; gap: 10px; }
.g-brand-logo { height: 22px; }
.reviews-container { overflow-x: auto; scrollbar-width: none; }
.reviews-container::-webkit-scrollbar { display: none; }
.reviews-wrapper { display: flex; gap: 12px; padding: 10px 15px 20px; width: max-content; }
.review-card { min-width: 220px; background: white; border: 1px solid #e2e8f0; border-radius: 14px; padding: 14px; box-shadow: 0 2px 8px rgba(0,0,0,0.05); }
.r-top { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.r-avatar { width: 35px; height: 35px; border-radius: 50%; object-fit: cover; }
.r-name-box b { font-size: 12px; display: block; }
.r-badge { font-size: 9px; color: #3b82f6; font-weight: 600; }
.g-icon-card { height: 16px; margin-left: auto; }
.r-stars { color: #f59e0b; font-size: 13px; }
.r-text { font-size: 11px; color: #475569; line-height: 1.5; margin: 4px 0 0; }

/* REFERRAL */
.referral-section { padding: 10px 15px 20px; }
.ref-card { background: linear-gradient(135deg, #1e40af, #3b82f6); border-radius: 16px; padding: 20px; text-align: center; color: white; }
.ref-gift-icon { font-size: 32px; }
.ref-card h3 { font-size: 16px; margin: 8px 0 4px; }
.ref-card p { font-size: 12px; opacity: 0.9; margin: 0 0 12px; }
.ref-now-btn { background: #fde047; color: #000; border: none; padding: 10px 24px; border-radius: 8px; font-weight: 800; font-size: 13px; cursor: pointer; }

/* FOOTER */
.site-footer { background: #0f172a; color: white; padding: 25px 20px; padding-bottom: 60px; }
.footer-logo-text { font-size: 20px; font-weight: 800; color: #fde047; margin: 0 0 10px; }
.footer-about { font-size: 11px; color: #94a3b8; line-height: 1.7; margin: 0 0 20px; }
.footer-contact-grid { display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; }
.f-contact-item { font-size: 12px; color: #cbd5e1; }
.f-contact-item a { color: #60a5fa; text-decoration: none; font-weight: 600; }
.footer-legal { border-top: 1px solid #1e293b; padding-top: 15px; font-size: 10px; color: #64748b; }
.dev-credits { color: #475569; margin-top: 4px; }
.dev-credits span { color: var(--primary); font-weight: 700; }

/* BOTTOM BAR */
.sleek-bar-container { position: fixed; bottom: 0; left: 0; right: 0; background: #ffffff; z-index: 99999; display: flex; height: 42px; box-shadow: 0 -2px 10px rgba(0,0,0,0.05); border-top: 1px solid #f1f1f1; }
.sleek-btn { flex: 1; display: flex; align-items: center; justify-content: center; text-decoration: none; font-weight: 700; font-size: 11px; letter-spacing: 0.8px; transition: 0.2s; text-transform: uppercase; }
.enq-btn { background: #ffffff; color: #000000; border-right: 1px solid #f1f1f1; gap: 6px; }
.booking-blue-btn { background: #2563eb; color: #ffffff; }
.ws-icon { width: 16px; height: 16px; object-fit: contain; }

/* CITY PAGES */
.city-hero { background: linear-gradient(135deg, #1e40af 0%, #3b82f6 100%); padding: 50px 20px 30px; text-align: center; color: white; }
.city-hero h1 { font-size: 26px; font-weight: 800; margin: 0 0 10px; }
.city-hero p { font-size: 13px; opacity: 0.9; margin: 0; }
.city-services-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 20px 15px; }
.city-service-card { border: 1.5px solid #e2e8f0; border-radius: 12px; overflow: hidden; text-decoration: none; color: inherit; }
.city-service-card img { width: 100%; height: 80px; object-fit: cover; }
.city-service-card .cs-info { padding: 8px; }
.city-service-card .cs-name { font-size: 12px; font-weight: 700; }
.city-service-card .cs-price { font-size: 11px; color: var(--primary); font-weight: 600; }
.city-seo-content { padding: 20px 15px; }
.city-seo-content h2 { font-size: 18px; font-weight: 700; color: #1e293b; }
.city-seo-content p { font-size: 13px; line-height: 1.8; color: #475569; }
.city-seo-content ul { padding-left: 20px; }
.city-seo-content ul li { font-size: 13px; color: #475569; margin-bottom: 6px; line-height: 1.6; }

/* SINGLE SERVICE PAGE */
.service-hero { position: relative; height: 220px; overflow: hidden; }
.service-hero img { width: 100%; height: 100%; object-fit: cover; }
.service-hero-overlay { position: absolute; inset: 0; background: linear-gradient(to bottom, transparent 40%, rgba(0,0,0,0.7)); display: flex; align-items: flex-end; padding: 20px; }
.service-hero-overlay h1 { color: white; font-size: 22px; font-weight: 800; margin: 0; }
.service-back { position: absolute; top: 15px; left: 15px; background: white; width: 35px; height: 35px; border-radius: 50%; display: flex; align-items: center; justify-content: center; text-decoration: none; color: #000; font-size: 16px; box-shadow: 0 2px 8px rgba(0,0,0,0.2); z-index: 10; }
.package-card { display: flex; justify-content: space-between; align-items: flex-start; padding: 20px; border-bottom: 1px solid #f3f4f6; }
.pkg-left { flex: 1; padding-right: 15px; }
.pkg-title { font-size: 16px; font-weight: 700; margin-bottom: 4px; }
.pkg-meta { font-size: 12px; color: #6b7280; display: flex; gap: 10px; margin-bottom: 8px; }
.pkg-price { font-size: 16px; font-weight: 800; color: #000; display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.pkg-price .strike { text-decoration: line-through; color: #9ca3af; font-weight: 400; font-size: 14px; }
.pkg-desc { font-size: 12px; color: #6b7280; line-height: 1.5; }
.pkg-right { width: 100px; height: 100px; flex-shrink: 0; position: relative; }
.pkg-right img { width: 100%; height: 100%; border-radius: 10px; object-fit: cover; }
.pkg-add-btn { position: absolute; bottom: -12px; left: 50%; transform: translateX(-50%); background: #fff; color: var(--primary); border: 1.5px solid #d1d5db; padding: 6px 20px; border-radius: 8px; font-weight: 800; font-size: 13px; box-shadow: 0 4px 12px rgba(0,0,0,0.1); cursor: pointer; white-space: nowrap; }

/* BOOKING FORM MODAL */
.booking-modal { position: fixed; inset: 0; background: rgba(0,0,0,0.6); display: none; justify-content: center; align-items: flex-end; z-index: 9999; }
.booking-modal.active { display: flex; }
.booking-modal-content { background: white; width: 100%; max-width: 500px; padding: 25px; border-radius: 24px 24px 0 0; animation: slideUp 0.4s cubic-bezier(0,0,0.2,1); }
@keyframes slideUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
.booking-modal-content h3 { font-size: 18px; font-weight: 800; margin: 0 0 20px; }
.booking-modal-content input, .booking-modal-content select { width: 100%; padding: 14px; margin-bottom: 12px; border: 1.5px solid #e5e7eb; border-radius: 12px; background: #f9fafb; font-size: 14px; font-family: 'Poppins', sans-serif; outline: none; }
.booking-submit-btn { width: 100%; padding: 16px; background: #000; color: #fff; border: none; border-radius: 12px; font-weight: 800; font-size: 16px; cursor: pointer; }
.booking-modal-close { float: right; font-size: 22px; cursor: pointer; color: #64748b; background: none; border: none; }

/* ADMIN LINK IN FOOTER */
.admin-link { color: #475569; font-size: 10px; text-decoration: none; }

/* NOTIFICATION TOAST */
.toast { position: fixed; top: -100px; left: 20px; right: 20px; background: #0f172a; color: white; padding: 15px 20px; border-radius: 12px; z-index: 99999; transition: 0.5s; font-size: 13px; font-weight: 600; }
.toast.show { top: 15px; }

/* RESPONSIVE */
@media (min-width: 768px) {
    .cards-grid { grid-template-columns: repeat(4, 1fr); }
    .cleaning-grid-fixed { grid-template-columns: repeat(6, 1fr); }
    .salon-grid { grid-template-columns: repeat(3, 1fr); }
    .search-box { width: 400px; }
}

/* ============================================================
   NEW COMPONENTS - LOCATION, FESTIVAL, PRODUCT SHEET
   ============================================================ */

/* LOCATION BAR */
.location-bar { display:flex;justify-content:space-between;align-items:center;padding:8px 15px;background:#fff;border-bottom:1px solid #f1f5f9;position:sticky;top:56px;z-index:999; }
.loc-left { display:flex;align-items:center;gap:6px;cursor:pointer; }
.loc-text { font-size:13px;font-weight:700;color:#1e293b;max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.loc-detect-btn { background:#eff6ff;color:#2563eb;border:1px solid #bfdbfe;border-radius:20px;padding:5px 10px;font-size:10px;font-weight:700;cursor:pointer;white-space:nowrap; }

/* LOCATION MODAL */
.location-modal { position:fixed;bottom:-100%;left:0;right:0;background:#fff;border-radius:24px 24px 0 0;z-index:10000;transition:bottom 0.4s cubic-bezier(0,0,0.2,1);padding:20px;max-height:85vh;overflow-y:auto; }
.location-modal.active { bottom:0; }
.location-modal-bg { position:fixed;inset:0;background:rgba(0,0,0,0.5);z-index:9999;display:none; }
.location-modal-bg.active { display:block; }
.location-modal-content { max-width:500px;margin:0 auto; }
.city-chips { display:flex;flex-wrap:wrap;gap:8px; }
.city-chip { background:#f8faff;border:1.5px solid #e2e8f0;border-radius:20px;padding:8px 16px;font-size:12px;font-weight:700;cursor:pointer;color:#1e293b;transition:all 0.2s; }
.city-chip:hover, .city-chip.selected { background:#2563eb;color:#fff;border-color:#2563eb; }

/* SEARCH BAR (below hero) */
.home-search-bar { padding:12px 15px;position:relative;background:#fff;box-shadow:0 2px 8px rgba(0,0,0,0.06); }
.home-search-bar .search-box { background:#f8faff;border-radius:12px;padding:4px 4px 4px 14px;display:flex;border:1.5px solid #e2e8f0; }
.home-search-bar .search-box input { border:none;outline:none;flex:1;font-size:13px;color:#333;background:transparent;font-family:'Poppins',sans-serif; }
.home-search-bar .search-box button { background:var(--primary);color:white;border:none;padding:10px 14px;border-radius:8px;cursor:pointer;display:flex;align-items:center; }
#suggestions { position:absolute;top:calc(100% - 12px);left:15px;right:15px;background:white;border-radius:12px;box-shadow:0 8px 25px rgba(0,0,0,0.12);z-index:100;display:none;max-height:220px;overflow-y:auto;border:1px solid #f1f5f9; }
#suggestions div { padding:12px 16px;cursor:pointer;font-size:13px;border-bottom:1px solid #f8faff; }
#suggestions div:hover { background:#f0f4ff; }

/* FILTER TABS */
.service-filter-tabs { display:flex;gap:8px;overflow-x:auto;padding:10px 15px;scrollbar-width:none;background:#fff;border-bottom:1px solid #f1f5f9; }
.service-filter-tabs::-webkit-scrollbar { display:none; }
.sft-btn { border:1.5px solid #e2e8f0;background:#fff;border-radius:20px;padding:6px 14px;font-size:11px;font-weight:700;cursor:pointer;white-space:nowrap;transition:all 0.2s;font-family:'Poppins',sans-serif; }
.sft-btn.active { background:#0f172a;color:#fff;border-color:#0f172a; }

/* FESTIVAL HERO */
.festival-hero { position:relative;overflow:hidden; }
.festival-bunting { background:rgba(0,0,0,0.1);text-align:center;padding:4px;font-size:14px; }
.festival-inner { padding:0 15px 15px; }
.festival-cards { display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding-bottom:5px; }
.fql-card { background:rgba(255,255,255,0.15);border-radius:12px;overflow:hidden;border:1px solid rgba(255,255,255,0.2);cursor:pointer;text-align:center; }
.fql-img { height:80px;background-size:cover;background-position:center; }
.fql-card span { display:block;color:white;font-size:10px;font-weight:700;padding:6px 4px;line-height:1.3; }

/* HOME MAINTENANCE - 2 column grid matching screenshot */
.maintenance-grid-new { display:grid;grid-template-columns:1fr 1fr;gap:2px;padding:0 0 20px;background:#f1f5f9; }
.maintenance-card-new { background:#fff;cursor:pointer;overflow:hidden;transition:transform 0.2s; }
.maintenance-card-new:active { transform:scale(0.98); }
.mc-img-wrap { height:120px;overflow:hidden; }
.mc-img-wrap img { width:100%;height:100%;object-fit:cover;transition:transform 0.3s; }
.maintenance-card-new:hover .mc-img-wrap img { transform:scale(1.05); }
.maintenance-card-new p { font-size:12px;font-weight:700;text-align:center;margin:0;padding:10px 8px 12px;color:#1e293b;line-height:1.3; }
@media (min-width:768px) {
    .maintenance-grid-new { grid-template-columns:repeat(4,1fr); }
    .mc-img-wrap { height:100px; }
}

/* PRODUCT DETAIL SHEET */
.product-sheet-overlay { position:fixed;inset:0;background:rgba(0,0,0,0);z-index:8000;display:none;transition:background 0.3s; }
.product-sheet-overlay.active { background:rgba(0,0,0,0.55);display:block; }
.product-sheet { position:fixed;bottom:-100%;left:0;right:0;background:#fff;border-radius:24px 24px 0 0;z-index:8001;transition:bottom 0.4s cubic-bezier(0,0,0.2,1);max-height:92vh;overflow-y:auto;padding-bottom:80px; }
.product-sheet.active { bottom:0; }
.ps-handle { width:40px;height:4px;background:#e2e8f0;border-radius:2px;margin:12px auto 8px;cursor:pointer; }
.ps-close { position:absolute;top:12px;right:15px;background:#f8faff;border:none;width:30px;height:30px;border-radius:50%;font-size:14px;cursor:pointer;color:#64748b;display:flex;align-items:center;justify-content:center; }
.ps-img-wrap { position:relative;height:220px;overflow:hidden; }
.ps-img-wrap img { width:100%;height:100%;object-fit:cover; }
.ps-img-badge { position:absolute;top:12px;left:12px;background:#fde047;color:#000;padding:4px 10px;border-radius:4px;font-size:10px;font-weight:800; }
.ps-body { padding:16px 20px 0; }
.ps-title { font-size:20px;font-weight:800;margin:0 0 8px;color:#1e293b; }
.ps-rating { display:flex;align-items:center;gap:10px;font-size:12px;margin-bottom:10px; }
.ps-rating span:first-child { font-weight:800;color:#f59e0b; }
.ps-rc { color:#94a3b8; }
.ps-avail { color:#16a34a;font-weight:700; }
.ps-price-row { display:flex;align-items:center;gap:10px;margin-bottom:12px; }
.ps-price { font-size:24px;font-weight:800;color:#2563eb; }
.ps-discount-badge { background:#dcfce7;color:#166534;font-size:11px;font-weight:800;padding:3px 8px;border-radius:4px; }
.ps-offers-row { display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px; }
.ps-offer-tag { background:#f0fdf4;color:#16a34a;font-size:10px;font-weight:700;padding:5px 10px;border-radius:20px;border:1px solid #bbf7d0; }
.ps-desc { font-size:13px;color:#475569;line-height:1.7;margin-bottom:16px;padding-bottom:16px;border-bottom:1px solid #f1f5f9; }
.ps-includes h4, .ps-related h4 { font-size:15px;font-weight:800;margin:0 0 10px;color:#1e293b; }
.ps-includes { margin-bottom:16px;padding-bottom:16px;border-bottom:1px solid #f1f5f9; }
#psIncludesList { margin:0;padding:0 0 0 5px;list-style:none; }
#psIncludesList li { font-size:13px;color:#374151;padding:7px 0;border-bottom:1px solid #f8faff;display:flex;align-items:flex-start;gap:8px;line-height:1.5; }
#psIncludesList li::before { content:'✓';color:#16a34a;font-weight:800;flex-shrink:0; }
.ps-related { margin-bottom:10px; }
.ps-related-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:8px; }
.ps-related-item { cursor:pointer;text-align:center;border:1px solid #f1f5f9;border-radius:10px;overflow:hidden;padding-bottom:8px; }
.ps-related-item img { width:100%;height:60px;object-fit:cover; }
.ps-related-item span { font-size:10px;font-weight:700;display:block;margin-top:5px;padding:0 4px;color:#1e293b;line-height:1.3; }
.ps-actions { position:fixed;bottom:0;left:0;right:0;background:#fff;border-top:1px solid #eee;padding:10px 15px;display:grid;grid-template-columns:1fr 1.5fr;gap:10px;z-index:8002;box-shadow:0 -4px 15px rgba(0,0,0,0.08); }
.ps-enquire-btn { background:#fff;color:#000;border:1.5px solid #1e293b;border-radius:12px;padding:14px 12px;font-weight:800;font-size:13px;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:6px;font-family:'Poppins',sans-serif; }
.ps-book-btn { background:#2563eb;color:#fff;border:none;border-radius:12px;padding:14px 12px;font-weight:800;font-size:14px;cursor:pointer;box-shadow:0 4px 15px rgba(37,99,235,0.3);font-family:'Poppins',sans-serif; }

/* BOOKING MODAL UPDATED */
.booking-modal { position:fixed;inset:0;background:rgba(0,0,0,0.6);display:none;justify-content:center;align-items:flex-end;z-index:9999; }
.booking-modal.active { display:flex; }
.booking-modal-content { background:white;width:100%;max-width:500px;padding:25px;border-radius:24px 24px 0 0;animation:slideUp 0.4s cubic-bezier(0,0,0.2,1);max-height:90vh;overflow-y:auto; }
.booking-modal-content h3 { font-size:18px;font-weight:800;margin:0 0 5px; }
.booking-modal-content .bm-service-name { font-size:13px;color:#2563eb;font-weight:700;margin-bottom:18px; }
.booking-modal-content input, .booking-modal-content select, .booking-modal-content textarea { width:100%;padding:13px;margin-bottom:10px;border:1.5px solid #e5e7eb;border-radius:12px;background:#f9fafb;font-size:14px;font-family:'Poppins',sans-serif;outline:none;box-sizing:border-box; }
.booking-modal-content input:focus, .booking-modal-content textarea:focus { border-color:#2563eb;background:#fff; }
.booking-submit-btn { width:100%;padding:16px;background:#000;color:#fff;border:none;border-radius:12px;font-weight:800;font-size:16px;cursor:pointer;font-family:'Poppins',sans-serif; }
.booking-modal-close { float:right;font-size:22px;cursor:pointer;color:#64748b;background:none;border:none;padding:0; }

/* ============================================================
   NEW SECTIONS: OFFER STRIP, KITCHEN, MOBILE, WHY, CITY HUBS
   ============================================================ */

/* OFFER STRIP */
.offer-strip { background:#2563eb;color:white;padding:10px 15px;display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:12px;font-weight:600; }
.offer-strip strong { font-weight:900; }

/* SECTION TAGS */
.section-tag { font-size:10px;font-weight:800;padding:4px 10px;border-radius:20px; }
.section-tag.green { color:#16a34a;background:#dcfce7; }
.section-tag.blue  { color:#2563eb;background:#dbeafe; }

/* KITCHEN BANNER */
.kitchen-banner { margin:0 15px 15px;border-radius:18px;background:linear-gradient(135deg,#1e3a5f 0%,#2563eb 100%);padding:18px;position:relative;overflow:hidden; }
.kb-content { position:relative;z-index:2; }
.kb-badge { display:inline-block;background:#fde047;color:#000;font-size:10px;font-weight:800;padding:3px 10px;border-radius:4px;margin-bottom:8px; }
.kitchen-banner h3 { color:white;font-size:17px;font-weight:800;margin:0 0 5px; }
.kitchen-banner p  { color:rgba(255,255,255,0.8);font-size:11px;margin:0 0 13px; }
.kb-prices { display:flex;gap:8px;flex-wrap:wrap; }
.kb-price-chip { background:rgba(255,255,255,0.15);padding:8px 12px;border-radius:8px;border:1px solid rgba(255,255,255,0.2);cursor:pointer;text-align:center;transition:background 0.2s; }
.kb-price-chip:hover { background:rgba(255,255,255,0.25); }
.kb-amt  { color:#fde047;font-size:15px;font-weight:800; }
.kb-name { color:rgba(255,255,255,0.8);font-size:9px;margin-top:2px; }

/* 4-COL SERVICE GRID */
.services-grid-4 { display:grid;grid-template-columns:repeat(4,1fr);gap:10px;padding:0 15px 20px; }
.svc-card-4 { background:#fff;border:1.5px solid #e2e8f0;border-radius:14px;overflow:hidden;cursor:pointer;transition:all 0.2s; }
.svc-card-4:hover { border-color:#2563eb;box-shadow:0 4px 15px rgba(37,99,235,0.12); }
.sc4-img { height:65px;overflow:hidden; }
.sc4-img img { width:100%;height:100%;object-fit:cover;transition:transform 0.3s; }
.svc-card-4:hover .sc4-img img { transform:scale(1.07); }
.sc4-name { font-size:9px;font-weight:800;color:#1e293b;padding:5px 6px 2px;line-height:1.3; }
.sc4-price { font-size:10px;color:#2563eb;font-weight:700;padding:0 6px 8px; }

/* MOBILE REPAIR GRID */
.mobile-repair-grid { display:grid;grid-template-columns:repeat(2,1fr);gap:10px;padding:0 15px 20px; }
.mobile-card { background:#fff;border:1.5px solid #e2e8f0;border-radius:14px;overflow:hidden;cursor:pointer;display:flex;flex-direction:column;transition:all 0.2s; }
.mobile-card:hover { border-color:#2563eb;box-shadow:0 4px 15px rgba(37,99,235,0.1); }
.mob-icon { font-size:20px;padding:10px 12px 0;line-height:1; }
.mob-img { height:80px;overflow:hidden; }
.mob-img img { width:100%;height:100%;object-fit:cover; }
.mob-info { padding:8px 10px 10px; }
.mob-info h4 { font-size:11px;font-weight:800;margin:0 0 4px;color:#1e293b;line-height:1.3; }
.mob-price { font-size:13px;color:#2563eb;font-weight:800;margin:0 0 8px; }
.mob-book-btn { background:#0f172a;color:white;border:none;padding:6px 14px;border-radius:6px;font-size:11px;font-weight:700;cursor:pointer;font-family:'Poppins',sans-serif; }

/* WHY CHOOSE US */
.why-section { background:#f8faff;margin:0 0 0; }
.why-grid { display:grid;grid-template-columns:repeat(2,1fr);gap:10px;padding:0 15px 25px; }
.why-card { background:#fff;border:1.5px solid #e2e8f0;border-radius:16px;padding:16px 14px;text-align:center; }
.why-card.highlight-card { background:linear-gradient(135deg,#2563eb,#1d4ed8);color:white;border-color:#2563eb;grid-column:1/-1; }
.why-icon { font-size:28px;margin-bottom:8px; }
.why-card h4 { font-size:13px;font-weight:800;margin:0 0 5px;color:#1e293b; }
.why-card.highlight-card h4 { color:white; }
.why-card p { font-size:11px;color:#64748b;margin:0;line-height:1.5; }
.why-card.highlight-card p { color:rgba(255,255,255,0.85); }
.why-book-btn { margin-top:10px;background:white;color:#2563eb;border:none;padding:8px 20px;border-radius:8px;font-weight:800;font-size:12px;cursor:pointer;font-family:'Poppins',sans-serif; }

/* CITY HUBS */
.city-hub-tabs { display:flex;gap:6px;padding:0 15px 12px;overflow-x:auto;scrollbar-width:none; }
.city-hub-tabs::-webkit-scrollbar { display:none; }
.chub-btn { border:1.5px solid #e2e8f0;background:#fff;border-radius:20px;padding:7px 16px;font-size:12px;font-weight:700;cursor:pointer;white-space:nowrap;transition:all 0.2s;font-family:'Poppins',sans-serif; }
.chub-btn.active { background:#2563eb;color:#fff;border-color:#2563eb; }
.city-hub-panel { display:none;margin:0 15px 20px; }
.city-hub-panel.active { display:block; }
.city-hub-hero { height:130px;border-radius:16px 16px 0 0;overflow:hidden;position:relative; }
.chub-overlay { position:absolute;inset:0;background:rgba(15,23,42,0.55);display:flex;flex-direction:column;justify-content:flex-end;padding:15px; }
.chub-overlay h3 { color:white;font-size:18px;font-weight:800;margin:0 0 3px; }
.chub-overlay p  { color:rgba(255,255,255,0.8);font-size:11px;margin:0; }
.area-chips-wrap { background:#fff;border:1px solid #e2e8f0;border-top:none;padding:14px; }
.area-label { font-size:10px;font-weight:800;color:#64748b;margin:0 0 6px;letter-spacing:0.5px; }
.area-chips { display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px; }
.area-chip { background:#f0f4ff;color:#2563eb;font-size:10px;font-weight:700;padding:5px 10px;border-radius:20px;cursor:pointer;border:1px solid #dbeafe;transition:all 0.2s; }
.area-chip:hover { background:#2563eb;color:white; }
.chub-cta { display:flex;gap:8px;padding:12px;background:#f8faff;border:1px solid #e2e8f0;border-top:none;border-radius:0 0 16px 16px; }
.chub-call-btn { flex:1;background:#0f172a;color:white;text-decoration:none;padding:12px;border-radius:10px;font-weight:700;font-size:12px;text-align:center;display:flex;align-items:center;justify-content:center;gap:5px; }
.chub-book-btn { flex:1;background:#2563eb;color:white;border:none;padding:12px;border-radius:10px;font-weight:700;font-size:12px;cursor:pointer;font-family:'Poppins',sans-serif; }

/* SEO FOOTER CONTENT */
.seo-footer-content { background:#f8faff;margin:0;padding:25px 20px; }
.seo-footer-content h2 { font-size:16px;font-weight:800;margin:0 0 10px;color:#1e293b; }
.seo-footer-content p  { font-size:12px;color:#475569;line-height:1.7;margin:0 0 15px; }
.seo-service-links { display:flex;flex-wrap:wrap;gap:8px; }
.seo-service-links a { font-size:10px;color:#2563eb;text-decoration:none;background:#dbeafe;padding:4px 10px;border-radius:20px;font-weight:600; }
.seo-service-links a:hover { background:#2563eb;color:white; }

/* RESPONSIVE */
@media (min-width:480px) {
    .services-grid-4 { grid-template-columns:repeat(4,1fr); }
    .mobile-repair-grid { grid-template-columns:repeat(3,1fr); }
    .why-grid { grid-template-columns:repeat(3,1fr); }
    .why-card.highlight-card { grid-column:auto; }
}
@media (min-width:768px) {
    .services-grid-4 { grid-template-columns:repeat(6,1fr); }
    .mobile-repair-grid { grid-template-columns:repeat(3,1fr); }
    .why-grid { grid-template-columns:repeat(3,1fr); }
}

/* ============================================================
   KHAAS SERVICES + WHY CHOOSE US + CITY COVERAGE
   ============================================================ */

/* Special Offer Strip */
.special-offer-strip { display:flex;align-items:center;gap:12px;background:linear-gradient(135deg,#fde047,#f59e0b);margin:15px;border-radius:14px;padding:14px 16px;cursor:pointer; }
.sos-icon { font-size:28px;flex-shrink:0; }
.sos-text { flex:1; }
.sos-text strong { font-size:13px;color:#000;font-weight:800; }
.sos-text .sos-sub { display:block;font-size:10px;color:#78350f;font-weight:600;margin-top:2px; }
.sos-btn { background:#000;color:#fde047;border:none;border-radius:8px;padding:8px 14px;font-size:11px;font-weight:800;cursor:pointer;white-space:nowrap;font-family:'Poppins',sans-serif; }

/* Why Choose Us */
.why-us-grid { display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:0 15px 20px; }
.wu-item { background:#fff;border:1.5px solid #e2e8f0;border-radius:14px;padding:14px;display:flex;gap:10px;align-items:flex-start; }
.wu-icon { font-size:22px;flex-shrink:0;line-height:1; }
.wu-item strong { font-size:11px;font-weight:800;color:#1e293b;display:block;margin-bottom:3px; }
.wu-item p { font-size:10px;color:#64748b;margin:0;line-height:1.4; }

/* Khaas Services Tabs */
.khaas-section { background:#f8faff; }
.khaas-services-tabs { display:flex;overflow-x:auto;gap:8px;padding:0 15px 12px;scrollbar-width:none; }
.khaas-services-tabs::-webkit-scrollbar { display:none; }
.ks-tab { border:1.5px solid #e2e8f0;background:#fff;border-radius:20px;padding:7px 16px;font-size:11px;font-weight:700;cursor:pointer;white-space:nowrap;transition:all 0.2s;font-family:'Poppins',sans-serif; }
.ks-tab.active { background:#0f172a;color:#fff;border-color:#0f172a; }

/* Khaas Panel */
.ks-panel { display:none;padding:0 15px 15px; }
.ks-panel.active { display:block; }

/* Khaas Service Cards Grid */
.khaas-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:10px; }
@media(min-width:600px){ .khaas-grid { grid-template-columns:repeat(4,1fr); } }
.khaas-card { background:#fff;border-radius:14px;overflow:hidden;border:1.5px solid #f1f5f9;cursor:pointer;transition:all 0.2s;box-shadow:0 2px 8px rgba(0,0,0,0.05); }
.khaas-card:active { transform:scale(0.97); }
.kc-img { height:70px;overflow:hidden; }
.kc-img img { width:100%;height:100%;object-fit:cover; }
.kc-body { padding:8px; }
.kc-icon { font-size:14px; }
.kc-body h4 { font-size:10px;font-weight:800;color:#1e293b;margin:3px 0 4px;line-height:1.3; }
.kc-price { font-size:10px;color:#2563eb;font-weight:700; }

/* City Coverage Section */
.city-coverage-section { background:#fff;padding-bottom:20px; }
.cov-city-tabs { display:flex;gap:0;overflow-x:auto;padding:0 15px;border-bottom:2px solid #f1f5f9;margin-bottom:15px;scrollbar-width:none; }
.cov-city-tabs::-webkit-scrollbar { display:none; }
.cov-tab { border:none;background:none;padding:12px 18px;font-size:12px;font-weight:700;cursor:pointer;white-space:nowrap;color:#64748b;border-bottom:2px solid transparent;margin-bottom:-2px;transition:all 0.2s;font-family:'Poppins',sans-serif; }
.cov-tab.active { color:#2563eb;border-bottom-color:#2563eb; }

.cov-panel { display:none;padding:0 15px; }
.cov-panel.active { display:block; }

.cov-intro { margin-bottom:14px; }
.cov-intro h3 { font-size:16px;font-weight:800;margin:0 0 4px;color:#1e293b; }
.cov-intro p { font-size:12px;color:#64748b;margin:0;line-height:1.5; }

.cov-zones { display:flex;flex-direction:column;gap:14px; }
.cov-zone-title { font-size:11px;font-weight:800;color:#1e293b;margin-bottom:8px;text-transform:uppercase;letter-spacing:0.5px;padding-bottom:5px;border-bottom:1px solid #f1f5f9; }
.cov-areas { display:flex;flex-wrap:wrap;gap:6px; }
.area-tag { background:#eff6ff;color:#1d4ed8;border:1px solid #bfdbfe;border-radius:20px;padding:5px 12px;font-size:11px;font-weight:600;cursor:pointer;transition:all 0.2s; }
.area-tag:active, .area-tag:hover { background:#2563eb;color:#fff;border-color:#2563eb; }
.area-tag.area-upcoming { background:#f0fdf4;color:#166534;border-color:#bbf7d0; }
.area-tag.area-upcoming small { font-size:9px;font-weight:800;background:#166534;color:#fff;padding:1px 5px;border-radius:3px;margin-left:4px; }

.cov-cta { background:linear-gradient(135deg,#1e3a5f,#2563eb);border-radius:14px;padding:16px;margin:16px 0 0;text-align:center; }
.cov-cta p { color:rgba(255,255,255,0.9);font-size:12px;margin:0 0 0;line-height:1.5; }
.cov-cta strong { color:#fde047; }
.cov-cta-btn { padding:10px 20px;border-radius:8px;font-size:12px;font-weight:800;cursor:pointer;text-decoration:none;border:none;font-family:'Poppins',sans-serif;display:inline-block; }
.cov-cta-btn.call-btn { background:#fde047;color:#000; }
.cov-cta-btn.book-btn { background:rgba(255,255,255,0.15);color:#fff;border:1.5px solid rgba(255,255,255,0.4); }

/* ============================================================
   UC-STYLE PRODUCT SHEET — COMPLETE REDESIGN
   ============================================================ */

/* Hide homepage book buttons — only show in popup */
.mob-book-btn,
.book-now-float { display:none !important; }

/* Overlay */
.product-sheet-overlay { position:fixed;inset:0;background:rgba(0,0,0,0);z-index:8000;display:none;transition:background 0.35s; }
.product-sheet-overlay.active { background:rgba(0,0,0,0.6);display:block; }

/* Sheet container */
.product-sheet {
    position:fixed;
    bottom:-100%;
    left:0;right:0;
    background:#fff;
    border-radius:20px 20px 0 0;
    z-index:8001;
    transition:bottom 0.42s cubic-bezier(0.25,0.8,0.25,1);
    max-height:95vh;
    overflow-y:auto;
    padding-bottom:90px;
    -webkit-overflow-scrolling:touch;
}
.product-sheet.active { bottom:0; }

/* Top navigation bar */
.ps-topbar {
    position:sticky;
    top:0;
    background:#fff;
    z-index:10;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:14px 16px 10px;
    border-bottom:1px solid #f1f5f9;
}
.ps-back-btn {
    background:none;border:none;font-size:20px;cursor:pointer;color:#1e293b;
    width:32px;height:32px;display:flex;align-items:center;justify-content:center;
    border-radius:50%;background:#f8fafc;
}
.ps-topbar-title { font-size:14px;font-weight:700;color:#1e293b;flex:1;text-align:center;margin:0 8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.ps-close {
    background:#f8fafc;border:none;width:32px;height:32px;
    border-radius:50%;font-size:14px;cursor:pointer;color:#64748b;
    display:flex;align-items:center;justify-content:center;
}

/* Before/After Image */
.ps-img-wrap { width:100%;height:220px;overflow:hidden;background:#f1f5f9; }
.ps-ba-wrap { display:flex;height:100%;width:100%; }
.ps-ba-half { flex:1;position:relative;overflow:hidden; }
.ps-ba-half img { width:100%;height:100%;object-fit:cover;display:block; }
.ps-ba-label {
    position:absolute;bottom:8px;left:50%;transform:translateX(-50%);
    background:rgba(0,0,0,0.55);color:#fff;
    font-size:10px;font-weight:800;padding:3px 10px;border-radius:20px;
    letter-spacing:0.5px;
}
.ps-ba-label.after { background:rgba(22,163,74,0.85); }

/* Body padding */
.ps-body { padding:16px 16px 0; }

/* Title */
.ps-title { font-size:22px;font-weight:800;color:#0f172a;margin:0 0 6px;line-height:1.2; }

/* Rating */
.ps-rating { margin-bottom:8px; }
.ps-star { font-size:13px;font-weight:700;color:#f59e0b; }
.ps-star span { color:#475569;font-weight:500; }

/* Save badge */
.ps-save-badge {
    display:inline-flex;align-items:center;gap:5px;
    color:#16a34a;font-size:12px;font-weight:700;
    margin-bottom:14px;
}

/* Pricing section */
.ps-pricing-section { margin-bottom:16px; }
.ps-pricing-cards {
    display:flex;
    gap:10px;
    overflow-x:auto;
    padding-bottom:6px;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
}
.ps-pricing-cards::-webkit-scrollbar { display:none; }

/* Each pricing card — UC style */
.ps-price-card {
    min-width:130px;
    flex-shrink:0;
    border:1.5px solid #e2e8f0;
    border-radius:14px;
    padding:14px 12px;
    cursor:pointer;
    background:#fff;
    transition:all 0.2s;
    position:relative;
}
.ps-price-card.selected {
    border-color:#2563eb;
    background:#eff6ff;
    box-shadow:0 0 0 2px rgba(37,99,235,0.15);
}
.ps-price-card-label { font-size:13px;font-weight:700;color:#1e293b;margin-bottom:4px; }
.ps-price-card-per { font-size:10px;color:#16a34a;font-weight:600;margin-bottom:6px; }
.ps-price-card-amount { font-size:20px;font-weight:800;color:#0f172a;margin-bottom:2px; }
.ps-price-card-original { font-size:11px;color:#94a3b8;margin-bottom:4px; }
.ps-price-card-discount {
    font-size:10px;font-weight:800;color:#16a34a;
    background:#dcfce7;padding:2px 7px;border-radius:4px;
    display:inline-block;margin-bottom:10px;
}
.ps-price-card-add {
    width:100%;
    background:none;
    border:1.5px solid #2563eb;
    border-radius:8px;
    color:#2563eb;
    font-size:13px;
    font-weight:700;
    padding:7px 0;
    cursor:pointer;
    font-family:'Poppins',sans-serif;
    transition:all 0.2s;
}
.ps-price-card.selected .ps-price-card-add {
    background:#2563eb;color:#fff;
}

/* UC Promise bar */
.ps-promise-bar {
    display:flex;
    gap:8px;
    flex-wrap:wrap;
    margin-bottom:18px;
    padding:12px;
    background:#f8fafc;
    border-radius:12px;
}
.ps-promise-item {
    font-size:11px;font-weight:700;color:#16a34a;
    display:flex;align-items:center;gap:4px;
    flex:1;min-width:90px;justify-content:center;
}

/* What's included */
.ps-includes { margin-bottom:18px;padding-bottom:18px;border-bottom:1px solid #f1f5f9; }
.ps-includes h4,.ps-related h4 { font-size:15px;font-weight:800;color:#0f172a;margin:0 0 12px; }
.ps-includes ul { margin:0;padding:0;list-style:none; }
.ps-includes ul li {
    font-size:13px;color:#475569;padding:7px 0 7px 22px;
    border-bottom:1px solid #f8fafc;
    position:relative;line-height:1.5;
}
.ps-includes ul li::before { content:'✓';position:absolute;left:0;color:#16a34a;font-weight:800; }

/* Related services */
.ps-related { margin-bottom:16px; }
.ps-related-grid { display:grid;grid-template-columns:repeat(4,1fr);gap:8px; }
@media(max-width:380px) { .ps-related-grid { grid-template-columns:repeat(3,1fr); } }

.ps-related-item {
    cursor:pointer;text-align:center;
    border:1px solid #f1f5f9;border-radius:12px;
    overflow:hidden;padding-bottom:8px;
    transition:box-shadow 0.2s;
    background:#fff;
}
.ps-related-item:active { box-shadow:0 2px 12px rgba(37,99,235,0.15); }
.ps-related-item img { width:100%;height:60px;object-fit:cover;display:block; }
.ps-rel-name { font-size:10px;font-weight:700;display:block;margin-top:6px;padding:0 5px;color:#1e293b;line-height:1.3; }
.ps-rel-price { font-size:10px;color:#2563eb;font-weight:700;display:block;margin-top:2px; }

/* Fixed bottom action bar */
.ps-actions {
    position:fixed;
    bottom:0;left:0;right:0;
    background:#fff;
    border-top:1px solid #e2e8f0;
    padding:10px 16px 14px;
    display:grid;
    grid-template-columns:1fr 1.6fr;
    gap:10px;
    z-index:8002;
    box-shadow:0 -4px 20px rgba(0,0,0,0.08);
}
.ps-enquire-btn {
    background:#fff;color:#1e293b;
    border:1.5px solid #1e293b;
    border-radius:12px;padding:13px 10px;
    font-weight:800;font-size:13px;
    cursor:pointer;text-align:center;
    text-decoration:none;
    display:flex;align-items:center;justify-content:center;gap:6px;
    font-family:'Poppins',sans-serif;
}
.ps-book-btn {
    background:#2563eb;color:#fff;
    border:none;border-radius:12px;
    padding:13px 10px;
    font-weight:800;font-size:14px;
    cursor:pointer;
    box-shadow:0 4px 15px rgba(37,99,235,0.35);
    font-family:'Poppins',sans-serif;
}
.ps-book-btn:active { background:#1d4ed8; }