/* ==========================================================================
   LAUNDRY CENTRAL — MASTER RESPONSIVE STYLESHEET
   Covers: 4K (2560px+) → Desktop (1440px) → Laptop (1200px) → Tablet (980px)
           → Mobile L (768px) → Mobile M (480px) → Mobile S (360px) → XS (320px)
   ========================================================================== */

/* ── GLOBAL FOUNDATION ────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

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

body {
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
}

img, video, svg, iframe {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Prevent any element from causing horizontal scroll */
.container,
.main-page-wrapper,
.classiads-hero,
.section,
.card-grid,
.rate-grid,
.estimator-grid {
  max-width: 100%;
}

/* ── 4K / ULTRA-WIDE (2560px+) ───────────────────────────────────────────── */
@media (min-width: 2560px) {
  .container { max-width: 1800px; }
  .main-page-wrapper { max-width: 1800px; }
  .classiads-title { font-size: 6rem; }
  .hero-brand-title { font-size: 6rem; }
  .classiads-products-grid { grid-template-columns: repeat(5, 1fr); }
}

/* ── LARGE SCREENS (1440px - 2559px) ─────────────────────────────────────── */
@media (min-width: 1440px) {
  .container { max-width: 1360px; }
  .classiads-products-grid { grid-template-columns: repeat(4, 1fr); }
  .estimator-grid { grid-template-columns: repeat(4, 1fr); }
  .classiads-quick-features { grid-template-columns: repeat(4, 1fr); }
}

/* ── STANDARD LAPTOP (1200px - 1439px) ───────────────────────────────────── */
@media (max-width: 1439px) and (min-width: 1200px) {
  .classiads-products-grid { grid-template-columns: repeat(3, 1fr); }
  .estimator-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ── MEDIUM LAPTOP / TABLET LANDSCAPE (980px - 1199px) ───────────────────── */
@media (max-width: 1199px) {
  .classiads-products-grid { grid-template-columns: repeat(3, 1fr); }
  .classiads-quick-features { grid-template-columns: repeat(2, 1fr); }
  .estimator-grid { grid-template-columns: repeat(2, 1fr); }
  .hero-iframe-wrapper { max-width: 220px; }
  .hero-inner-split { gap: 28px; }

  /* About & Contact grids get a bit tighter */
  .about-grid { gap: 40px; }
  .contact-grid { gap: 24px; }

  /* Reduce padding */
  .section { padding: 64px 0; }
  .classiads-hero { margin-top: 20px; margin-bottom: 30px; }
}

/* ── TABLET / SMALL LAPTOP (769px - 980px) ───────────────────────────────── */
@media (max-width: 980px) {

  /* --- Navigation --- */
  .modern-nav-links { display: none; }
  .mobile-menu-toggle { display: flex; }

  /* --- Main Page Layout --- */
  .main-page-wrapper { padding: 16px 16px 80px; }
  .container { width: min(100% - 32px, 1320px); }

  /* --- Hero --- */
  .hero {
    padding: 60px 24px;
    text-align: center;
    margin-top: 16px;
    margin-bottom: 40px;
  }
  .hero-inner { flex-direction: column; align-items: center; gap: 30px; }
  .hero-copy { text-align: center; max-width: 100%; }
  .hero-features { justify-content: center; flex-wrap: wrap; }
  .hero-actions { justify-content: center; }

  /* --- Hero Split Layout --- */
  .hero-inner-split { grid-template-columns: 1fr; gap: 40px; text-align: center; }
  .hero-copy-column { align-items: center; text-align: center; }
  .hero-copy-column .hero-brand-title,
  .hero-copy-column .hero-brand-subtitle { text-align: center; }
  .hero-copy-column .tracking-pill-container { margin: 0 auto 30px; }
  .hero-copy-column .category-pills-row { justify-content: center; }
  .hero-actions-left { justify-content: center; }
  .hero-media-column { width: 100%; }

  /* --- Tracking --- */
  .tracking-hero { margin-left: auto; margin-right: auto; }
  .tracking-center-wrapper { align-items: center; }
  .hero-tracking-display { justify-content: center; width: 100%; }

  /* --- Grids → 1 column --- */
  .contact-grid { grid-template-columns: 1fr; }
  .about-grid { grid-template-columns: 1fr; gap: 32px; }
  .mission-grid { grid-template-columns: 1fr; }
  .mission-card.card-full { grid-column: span 1; }
  .classiads-products-grid { grid-template-columns: repeat(2, 1fr); }
  .classiads-quick-features { grid-template-columns: repeat(2, 1fr); }

  /* --- Booking Grid --- */
  .booking-grid { grid-template-columns: 1fr; gap: 32px; }

  /* --- Section Title Row wrap on tablet --- */
  .section-title-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  /* --- Estimator bar --- */
  .estimator-summary-bar {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
  }
  .summary-info { justify-content: center; flex-wrap: wrap; }
  .estimator-book-btn { justify-content: center; width: 100%; }

  /* --- Footer --- */
  .footer-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-top { flex-direction: column; gap: 30px; text-align: center; }
  .footer-top-right { flex-direction: column; gap: 20px; }

  /* --- About badge position --- */
  .about-badge { left: 24px; }

  /* --- Feedback Carousel --- */
  .feedback-card { width: 360px; }
  .card-left { transform: scale(0.85) translateX(-40%); }
  .card-right { transform: scale(0.85) translateX(40%); }

  /* --- Insta Grid --- */
  .insta-grid { grid-template-columns: repeat(4, 1fr); }

  /* --- App Showcase --- */
  .app-showcase-card { grid-template-columns: 1fr; padding: 30px 20px; }
}

/* ── MOBILE LANDSCAPE / PHABLET (481px - 768px) ─────────────────────────── */
@media (max-width: 768px) {

  /* --- Body spacing for floating dock --- */
  body { padding-bottom: 90px; }

  /* --- Container --- */
  .container { width: min(100% - 28px, 1320px); }
  .main-page-wrapper { padding: 12px 12px 90px; }

  /* --- Section --- */
  .section { padding: 52px 0; }

  /* --- Hero Text Sizes --- */
  .classiads-title { font-size: clamp(2rem, 1.5rem + 3vw, 3rem); }
  .hero-brand-title { font-size: clamp(2rem, 1.5rem + 3vw, 3rem); }
  .classiads-subtitle { font-size: 1rem; }

  /* --- Search Pill on Mobile --- */
  .classiads-search-pill {
    flex-direction: column;
    padding: 8px;
    border-radius: 20px;
    gap: 8px;
  }
  .classiads-search-pill .search-icon { display: none; }
  .classiads-search-pill input {
    width: 100%;
    text-align: center;
    padding: 10px 16px;
  }
  .classiads-search-pill .search-btn {
    width: 100%;
    border-radius: 14px;
    padding: 12px;
  }

  /* --- Category Bar horizontal scroll --- */
  .classiads-category-bar {
    justify-content: flex-start;
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 10px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 16px;
    border-radius: 20px;
  }
  .classiads-category-bar::-webkit-scrollbar { display: none; }

  /* --- Quick Features --- */
  .classiads-quick-features { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .quick-feature-card { padding: 12px 14px; gap: 10px; }

  /* --- Products Grid --- */
  .classiads-products-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }

  /* --- Grids stack --- */
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .premium-services-grid { flex-direction: column; align-items: stretch; }
  .premium-service-card { max-width: 100%; flex: none; }

  /* --- Estimator --- */
  .estimator-grid { grid-template-columns: 1fr; gap: 14px; }
  .estimator-container { padding: 24px 16px; }

  /* --- Footer --- */
  .sleek-footer-top {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .sleek-footer-nav { justify-content: center; gap: 12px; }
  .sleek-footer-bottom {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 10px;
  }
  .footer-grid { grid-template-columns: 1fr; text-align: center; }
  .contact-list li { justify-content: center; }
  .social-links { justify-content: center; }
  .footer-bottom {
    flex-direction: column-reverse;
    gap: 16px;
    text-align: center;
  }
  .footer-bottom-right { text-align: center; }

  /* --- Insta Grid --- */
  .insta-grid { grid-template-columns: repeat(3, 1fr); gap: 10px; }

  /* --- Rate tabs wrap smaller --- */
  .rate-tabs { gap: 8px; }
  .rate-tab-btn { padding: 10px 16px; font-size: 0.85rem; }

  /* --- About Stats 2 cols --- */
  .about-stats { grid-template-columns: repeat(2, 1fr); }
  .about-features { grid-template-columns: 1fr; }

  /* --- Contact card stacks --- */
  .contact-card { padding: 24px 20px; }

  /* --- Legal card --- */
  .legal-card { padding: 30px 20px; }
  .legal-card h1 { font-size: 2rem; }

  /* --- Hero actions --- */
  .hero-actions-centered {
    flex-direction: column;
    align-items: center;
    gap: 10px;
  }
  .badge-link { width: 100%; justify-content: center; max-width: 300px; }

  /* --- Phone frame --- */
  .phone-frame { width: 240px; height: 460px; }

  /* --- Section title row stacks --- */
  .section-title-row { margin: 28px 0 18px; }
  .section-title-row h2 { font-size: 1.3rem; }
  .search-mini-pill { font-size: 0.75rem; padding: 6px 12px; }
}

/* ── MOBILE PORTRAIT (361px - 480px) ─────────────────────────────────────── */
@media (max-width: 480px) {

  /* --- Container --- */
  .container { width: min(100% - 24px, 1320px); }
  .main-page-wrapper { padding: 8px 8px 90px; }

  /* --- Section --- */
  .section { padding: 44px 0; }

  /* --- Typography --- */
  .classiads-title { font-size: clamp(1.8rem, 1.2rem + 4vw, 2.6rem); }
  .hero-brand-title { font-size: clamp(1.8rem, 1.2rem + 4vw, 2.6rem); }
  .hero-title { font-size: 2.2rem; }
  .section-title { font-size: 1.6rem; }
  .classiads-subtitle { font-size: 0.92rem; }
  .hero-text { font-size: 0.9rem; margin-bottom: 8px; }
  .hero-label { padding: 8px 16px; font-size: 11px; margin-bottom: 20px; }

  /* --- Header --- */
  .header-container { padding: 5px 8px; }
  .logo-main-text { font-size: 1.05rem; }
  .logo-sub-tag { font-size: 0.55rem; }
  .modern-logo-link .logo-emblem { width: 36px; height: 36px; font-size: 1.1rem; border-radius: 10px; }

  /* --- Nav items on mobile drawer --- */
  .nav-item { padding: 10px 15px; font-size: 1rem; }
  .nav-links { width: 100%; max-width: 320px; }

  /* --- Hero --- */
  .hero { padding: 60px 0 40px; }
  .hero-inner { padding: 0 12px; }
  .hero-features span,
  .hero-features a { padding: 10px 14px; font-size: 0.72rem; }

  /* --- Hero actions --- */
  .hero-actions { flex-direction: column; align-items: stretch; width: 100%; }
  .badge-link { width: 100%; justify-content: center; }
  .button, .cta-btn { width: 100%; }

  /* --- Product Cards --- */
  .classiads-products-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .product-clay-card { padding: 10px; }
  .product-clay-card .card-img-wrapper { height: 140px; }
  .product-clay-card .card-title { font-size: 0.82rem; }
  .product-clay-card .card-price { font-size: 0.92rem; }

  /* --- Quick Features stack --- */
  .classiads-quick-features { grid-template-columns: 1fr; gap: 10px; }
  .quick-feature-card { padding: 12px; }

  /* --- Category bar --- */
  .classiads-category-bar { gap: 12px; padding: 12px 14px; }
  .cat-icon { width: 40px; height: 40px; }
  .cat-item span { font-size: 0.72rem; }

  /* --- Rate grid --- */
  .rate-grid { grid-template-columns: 1fr; gap: 16px; }
  .compact-rate-list { grid-template-columns: 1fr; }

  /* --- Cart Drawer full-width --- */
  .cart-drawer { width: 100%; right: -100%; }

  /* --- Booking --- */
  .booking-subtitle { font-size: 1.4rem; }
  .service-option { padding: 12px 8px; }
  .services-selector { grid-template-columns: repeat(auto-fill, minmax(min(100px, 100%), 1fr)); }

  /* --- Estimator --- */
  .estimator-container { padding: 20px 12px; }
  .estimator-grid { grid-template-columns: 1fr; gap: 12px; }
  .qty-btn { width: 36px; height: 36px; font-size: 1.1rem; }

  /* --- About stats --- */
  .about-stats { grid-template-columns: repeat(2, 1fr); }

  /* --- Form row --- */
  .form-row { grid-template-columns: 1fr; }

  /* --- Newsletter --- */
  .newsletter-card { padding: 28px 14px; border-radius: 18px; }
  .newsletter-input-group { flex-direction: column; }
  .newsletter-submit { width: 100%; padding: 14px; }

  /* --- Feedback Carousel --- */
  .feedback-carousel { height: auto; }
  .feedback-card {
    position: relative;
    width: 100%;
    transform: none !important;
    opacity: 1 !important;
    filter: none !important;
  }
  .card-side { display: none; }

  /* --- Insta Grid 2 cols --- */
  .insta-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }

  /* --- Floating Dock --- */
  .floating-quick-dock {
    width: min(94%, 380px);
    bottom: 12px;
    padding: 6px 10px;
  }
  .dock-btn { padding: 8px 12px; font-size: 0.78rem; }
  .dock-btn-icon { width: 34px; height: 34px; font-size: 0.95rem; }

  /* --- Tracking search bar --- */
  .tracking-container { flex-direction: column; gap: 8px; padding: 8px; border-radius: 16px; }
  .tracking-container button { padding: 12px; }
  .classiads-search-container { padding: 0 8px; }

  /* --- Search pill button layout --- */
  .classiads-search-pill { border-radius: 16px; }

  /* --- Logo in hero --- */
  .logo-link img { height: 70px; }

  /* --- Card padding --- */
  .card, .feature-card, .service-card { padding: 28px 18px; }
  .rate-item-card { padding: 18px 16px; }

  /* --- Mission grid single col --- */
  .mission-grid { grid-template-columns: 1fr; }
  .mission-card { padding: 22px 16px; }

  /* --- Service tiles 2 col --- */
  .card-grid.small-tiles { grid-template-columns: repeat(2, 1fr); }
}

/* ── SMALL MOBILE (320px - 360px) ────────────────────────────────────────── */
@media (max-width: 360px) {

  /* --- Container tightest --- */
  .container { width: min(100% - 16px, 1320px); }
  .main-page-wrapper { padding: 6px 6px 90px; }

  /* --- Typography minimum sizes --- */
  .classiads-title { font-size: 1.7rem; letter-spacing: -0.03em; }
  .hero-brand-title { font-size: 1.7rem; }
  .hero-title { font-size: 1.9rem; }
  .classiads-subtitle { font-size: 0.85rem; }
  .section-title { font-size: 1.4rem; }
  .section-subtitle { font-size: 11px; }

  /* --- Header compact --- */
  .logo-text-line1,
  .logo-text-line2 { font-size: 1rem; letter-spacing: 0.5px; }
  .logo-tagline { font-size: 0.45rem; }
  .logo-3d-badge { padding: 8px 14px; border-radius: 16px; }
  .logo-link img { height: 56px; }

  /* --- Search pill --- */
  .classiads-search-pill input { font-size: 0.9rem; }
  .classiads-search-pill .search-btn { font-size: 0.9rem; padding: 10px; }

  /* --- Product cards --- */
  .classiads-products-grid { grid-template-columns: 1fr; gap: 12px; }
  .product-clay-card .card-img-wrapper { height: 180px; }

  /* --- Quick features --- */
  .classiads-quick-features { grid-template-columns: 1fr; }

  /* --- Category bar min --- */
  .cat-icon { width: 36px; height: 36px; font-size: 0.9rem; }
  .cat-item span { font-size: 0.65rem; }

  /* --- Floating dock compact --- */
  .floating-quick-dock { width: min(96%, 320px); }
  .dock-btn { padding: 7px 10px; font-size: 0.72rem; }

  /* --- Section title row --- */
  .section-title-row h2 { font-size: 1.15rem; }

  /* --- About stats --- */
  .about-stats { grid-template-columns: repeat(2, 1fr); gap: 10px; }

  /* --- Hero badge --- */
  .hero-stitch-badge { font-size: 0.68rem; padding: 5px 12px; }

  /* --- Buttons --- */
  .button, .cta-btn { padding: 12px 20px; font-size: 0.85rem; }
  .button-accent { padding: 12px 20px; }

  /* --- Card grid minimum --- */
  .card-grid { grid-template-columns: 1fr; }

  /* --- Footer bottom stacks --- */
  .footer-bottom-left { flex-wrap: wrap; gap: 8px; }
}

/* ── PROPOSAL / PRESENTATION RESPONSIVE ─────────────────────────────────── */
/* These rules apply inside proposal.html & presentation.html */
@media (max-width: 768px) {
  .nop {
    padding: 10px 16px;
    gap: 10px;
  }
  .nop .brand { font-size: 0.9rem; }
  .nop .em { width: 28px; height: 28px; font-size: 0.85rem; }
  .nop div:last-child { flex-wrap: wrap; gap: 6px; }
  .btn { padding: 8px 14px; font-size: 0.78rem; }

  .doc-wrapper { padding: 80px 12px 40px; }
  .doc-container { padding: 28px 18px; border-radius: 16px; }

  .hero-title { font-size: 1.7rem !important; }
  .hero-desc { font-size: 0.88rem !important; }

  .grid-2, .grid-3 {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  .sign-box { grid-template-columns: 1fr; gap: 20px; }

  .stat-num { font-size: 1.6rem; }

  .price-amount { font-size: 1.8rem; }
}

@media (max-width: 480px) {
  .doc-container { padding: 20px 12px; border-radius: 12px; }
  .hero-header { padding: 24px 16px; }
  .hero-title { font-size: 1.4rem !important; }
  .sec-title { font-size: 1.1rem; }
}

/* ── PRESENTATION HTML RESPONSIVE ───────────────────────────────────────── */
/* Override slide sizes inside presentation.html on small screens */
@media (max-width: 768px) {
  /* Slides should scroll vertically rather than be fixed-size */
  .slide-deck { overflow-x: auto; scroll-snap-type: x mandatory; }
  .slide { scroll-snap-align: start; min-height: auto; padding: 28px 16px; }
  .slide h1, .slide h2 { font-size: clamp(1.4rem, 3vw, 2.5rem) !important; }
  .slide-grid-2, .slide-grid-3 { grid-template-columns: 1fr !important; }
  .slide-badge-row { flex-wrap: wrap; gap: 8px; }
}

/* ── TOUCH DEVICE OPTIMIZATIONS ─────────────────────────────────────────── */
@media (hover: none) and (pointer: coarse) {
  /* Larger tap targets */
  .nav-item,
  .rate-tab-btn,
  .sub-tab-btn { min-height: 44px; }

  .dock-btn, .dock-btn-icon { min-height: 44px; }
  .add-to-cart-btn-small { width: 36px; height: 36px; }
  .qty-btn { width: 40px; height: 40px; }

  /* Disable hover effects on touch — prevents sticky hover on iOS */
  .service-card:hover,
  .product-clay-card:hover,
  .quick-feature-card:hover,
  .cat-item:hover { transform: none; }

  /* Better scroll for category bar */
  .classiads-category-bar { -webkit-overflow-scrolling: touch; }
  .rate-tabs { -webkit-overflow-scrolling: touch; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .rate-tabs::-webkit-scrollbar { display: none; }
}

/* ── PRINT STYLES ────────────────────────────────────────────────────────── */
@media print {
  body { padding-bottom: 0 !important; }
  .floating-quick-dock,
  .mobile-menu-toggle,
  .whatsapp-float,
  .cart-floating-btn,
  .cart-drawer,
  .mobile-menu-overlay { display: none !important; }

  .hero { padding: 40px !important; }
  .section { padding: 32px 0 !important; }
  .container { max-width: 100% !important; }

  a { text-decoration: underline; }
}

/* ── REDUCED MOTION ──────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .clay-shape { animation: none !important; }
  .pulse-dot { animation: none !important; }
  .newsletter-icon { animation: none !important; }
  .tracking-pill-box:focus-within { transform: none; }
}

/* ── SAFE AREA (iPhone notch / Dynamic Island) ───────────────────────────── */
@supports (padding: max(0px)) {
  .floating-quick-dock {
    bottom: max(16px, env(safe-area-inset-bottom));
    padding-left: max(12px, env(safe-area-inset-left));
    padding-right: max(12px, env(safe-area-inset-right));
  }

  .page-nav.modern-header {
    padding-top: max(10px, env(safe-area-inset-top));
  }

  body { padding-bottom: max(90px, calc(env(safe-area-inset-bottom) + 70px)); }
}

/* ── LANDSCAPE PHONE FIXES ───────────────────────────────────────────────── */
@media (max-height: 500px) and (orientation: landscape) {
  .classiads-hero { margin-top: 10px; margin-bottom: 15px; }
  .classiads-title { font-size: 1.8rem; }
  .hero { padding: 40px 0 20px; min-height: auto; }
  .hero-brand-title { font-size: 1.8rem; }
  .tracking-pill-container { margin-bottom: 16px; }
  .nav-links { padding: 60px 20px 20px; }

  /* Floating dock moves to a corner in landscape */
  .floating-quick-dock {
    bottom: 10px;
    right: 16px;
    left: auto;
    transform: none;
    width: auto;
  }
}

/* ── ACCESSIBILITY: HIGH CONTRAST ───────────────────────────────────────── */
@media (forced-colors: active) {
  .logo-3d-badge, .product-clay-card, .quick-feature-card, .service-tile {
    border: 2px solid ButtonText;
  }
  .button-accent, .dock-btn-primary, .modern-cart-btn {
    forced-color-adjust: none;
    background: Highlight;
    color: HighlightText;
  }
}