/* ============================================================
   Kegalle Marketplace — Mobile 10/10 Enhancement Layer
   Stacks on top of kurulla-main.css / kurulla-utilities.css
============================================================ */

/* ── iOS zoom prevention (critical: < 16px input triggers zoom) ── */
input, select, textarea, button {
  font-size: max(16px, 1em);
}
@media (min-width: 761px) {
  input, select, textarea, button {
    font-size: inherit;
  }
}

/* ── Universal touch target: 44 × 44 px minimum ──────────────── */
@media (max-width: 760px) {
  .k-btn,
  .k-btn-primary,
  .k-btn-outline,
  .k-btn-sm { min-height: 44px !important; }

  .k-filter-option label {
    min-height: 40px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 0;
  }

  .k-filter-option input[type="checkbox"],
  .k-filter-option input[type="radio"] {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
  }

  .k-drawer-link { min-height: 50px; padding: 14px 20px; }
}

/* ── Listings toolbar: wrap properly on mobile ────────────────── */
@media (max-width: 760px) {
  .k-listings-toolbar {
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px 0 12px;
  }
  .k-listings-count {
    flex-basis: 100%;
    font-size: 13px;
    padding-bottom: 2px;
  }
  .k-sort-row {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 1;
    min-width: 0;
  }
  .k-sort-label { font-size: 12px; white-space: nowrap; }
  .k-sort-select {
    flex: 1;
    min-width: 0;
    height: 38px;
    font-size: 13px;
    border-radius: 8px;
  }
  .k-save-search-btn {
    height: 38px;
    font-size: 12px;
    padding: 0 10px;
    white-space: nowrap;
    flex-shrink: 0;
  }
}

/* ── Filter toggle button: mobile-friendly ────────────────────── */
@media (max-width: 1100px) {
  .k-filter-toggle-btn {
    width: 100%;
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 700;
    border-radius: 12px;
    border: 1.5px solid var(--k-border, #E5E8EF);
    background: var(--k-surface, #fff);
    color: var(--k-text-primary, #111);
    cursor: pointer;
    margin-bottom: 14px;
    transition: background .15s, border-color .15s;
  }
  .k-filter-toggle-btn:hover,
  .k-filter-toggle-btn.open {
    border-color: var(--k-primary, #1B5E20);
    color: var(--k-primary, #1B5E20);
    background: var(--k-primary-xlight, #E8F5E9);
  }
}

/* ── Content section: less padding on mobile ──────────────────── */
@media (max-width: 760px) {
  .k-content-section { padding-top: 16px !important; padding-bottom: 28px !important; }
  .k-page-title { font-size: 20px !important; margin-bottom: 4px; }
  .k-page-subtitle { font-size: 13px; margin-bottom: 14px; }
  .k-search-header { padding: 14px 16px; border-radius: 12px; }
  .k-search-header h1 { font-size: 17px; }
  .k-search-suggestions { gap: 6px; margin-top: 10px; }
  .k-search-chip { font-size: 12px; padding: 5px 10px; }
}

/* ── Deals hero: stack on mobile ──────────────────────────────── */
@media (max-width: 760px) {
  .k-deals-hero { padding: 28px 0 24px; }
  .k-deals-hero .container { flex-direction: column; gap: 18px; }
  .k-deals-hero-content { min-width: 0; }
  .k-deals-hero h1 { font-size: 24px; line-height: 1.2; }
  .k-deals-hero p { font-size: 14px; }
  .k-deals-stats { flex-wrap: wrap; gap: 10px 20px; }
}

/* ── Flash deals: 2-col grid on mobile ────────────────────────── */
@media (max-width: 760px) {
  .k-flash-deals-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }
  .k-flash-deal-card { border-radius: 12px; }
}
@media (max-width: 380px) {
  .k-flash-deals-grid { grid-template-columns: 1fr !important; }
}

/* ── Store profile: full-width actions on mobile ──────────────── */
@media (max-width: 760px) {
  .k-store-actions {
    flex-direction: column;
    width: 100%;
    gap: 8px;
    margin-top: 12px;
  }
  .k-store-actions .k-btn {
    width: 100%;
    justify-content: center;
    min-height: 46px;
  }
  /* Store info rows */
  .k-info-row { padding: 10px 0; gap: 10px; }
  .k-info-val { word-break: break-word; }
  /* Store stat grid */
  .k-store-stat-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ── Review grid: single column on mobile ─────────────────────── */
@media (max-width: 760px) {
  .k-review-grid { grid-template-columns: 1fr !important; gap: 12px !important; }
}

/* ── Scrollable tabs — no scrollbar visible ───────────────────── */
@media (max-width: 760px) {
  .k-product-tabs,
  .k-store-nav-tabs-inner,
  .classified-tabs-inner,
  .k-tabs {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
  }
  .k-product-tabs::-webkit-scrollbar,
  .k-store-nav-tabs-inner::-webkit-scrollbar,
  .classified-tabs-inner::-webkit-scrollbar,
  .k-tabs::-webkit-scrollbar { display: none; }

  .k-product-tab,
  .classified-tab {
    flex-shrink: 0;
    white-space: nowrap;
  }
}

/* ── Listing detail: full-width contact buttons ───────────────── */
@media (max-width: 760px) {
  .k-contact-grid { grid-template-columns: 1fr !important; gap: 8px !important; }
  .k-sticky-contactbar a { font-size: 13px; gap: 4px; }
}

/* ── Auth page: tighter padding on mobile ─────────────────────── */
@media (max-width: 760px) {
  .k-auth-card { padding: 24px 18px !important; }
  .k-auth-form-group { gap: 14px; }
}

/* ── Footer: extra bottom padding for mobile nav ──────────────── */
@media (max-width: 760px) {
  .k-footer { padding-bottom: 80px; }
}

/* ── Price range inputs: side-by-side on mobile ───────────────── */
@media (max-width: 760px) {
  .k-price-range {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  .k-price-range input { min-width: 0; }
}

/* ── Home page: container padding for very small screens ──────── */
@media (max-width: 380px) {
  .container,
  .k-container,
  .kg-container {
    width: calc(100% - 20px) !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .k-main { padding: 10px 12px; }
  .k-section-title { font-size: 15px !important; }
  .k-listing-body { padding: 8px 8px 10px; }
  .k-listing-title { font-size: 12px; min-height: 2em; }
  .k-grid-5, .k-grid-4 { gap: 8px !important; }
  .k-store-card-v2 { padding: 10px 8px; }
}

/* ── Dark mode mobile ─────────────────────────────────────────── */
@media (max-width: 760px) {
  [data-theme="dark"] .k-filter-toggle-btn { background: var(--k-surface); }
  @media (prefers-color-scheme: dark) {
    .k-filter-toggle-btn { background: var(--k-surface); }
  }
}

/* ── Horizontal scroll containers: snap + hide scrollbar ──────── */
@media (max-width: 760px) {
  .k-carousel,
  .k-stores-carousel {
    scroll-behavior: smooth;
    scrollbar-width: none;
  }
  .k-carousel::-webkit-scrollbar,
  .k-stores-carousel::-webkit-scrollbar { display: none; }
}

/* ── Back-to-top & WhatsApp: above mobile nav ─────────────────── */
@media (max-width: 760px) {
  .k-back-top { bottom: 72px !important; }
  .k-whatsapp-btn { bottom: 76px !important; left: 14px !important; }
}

/* ── Skeleton loading cards: correct aspect on mobile ─────────── */
@media (max-width: 760px) {
  .k-skel-img { aspect-ratio: 4/3; height: auto !important; }
  .k-skel-card { border-radius: 12px; overflow: hidden; }
}

/* ── Blog list: full-width image on mobile ────────────────────── */
@media (max-width: 760px) {
  .blog-list-card { flex-direction: column; }
  .blog-list-img { width: 100%; height: 180px; }
  .blog-detail-title { font-size: 22px; line-height: 1.3; }
}

/* ── Classified page: compact on mobile ───────────────────────── */
@media (max-width: 760px) {
  .classified-hero { padding: 20px 0 16px; }
  .classified-hero h1 { font-size: 20px; }
  .classified-list-card { gap: 0; border-radius: 12px; }
  .classified-list-img { height: 160px; min-height: 0; border-radius: 12px 12px 0 0; }
  .classified-list-info { padding: 12px; }
  .classified-list-title { font-size: 15px; }
}

/* ── "Post Free Ad" mobile button: always visible ─────────────── */
@media (max-width: 760px) {
  .k-mobile-post-btn {
    display: inline-flex !important;
    align-items: center;
    min-height: 36px;
    padding: 0 14px;
    border-radius: 8px;
    background: var(--k-primary, #1B5E20);
    color: #fff !important;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    flex-shrink: 0;
  }
}

/* ── Smooth page transitions ──────────────────────────────────── */
@media (prefers-reduced-motion: no-preference) {
  .k-listing-card { transition: transform .18s ease, box-shadow .18s ease; }
}

/* ── Safe area insets ─────────────────────────────────────────── */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  .k-mobile-nav {
    padding-bottom: calc(4px + env(safe-area-inset-bottom));
  }
  .k-sticky-contactbar {
    padding-bottom: calc(10px + env(safe-area-inset-bottom));
  }
}

/* ============================================================
   LIGHT THEME — Override @media(prefers-color-scheme:dark) rules
   so users with OS dark mode still see light theme when
   data-theme="light" is set (the site default).
   ============================================================ */

/* Offer / safety boxes */
:root[data-theme="light"] .k-offer-accepted-box { background: #f0fdf4; border-color: #bbf7d0; }
:root[data-theme="light"] .k-offer-rejected-box  { background: #fef2f2; border-color: #fecaca; }
:root[data-theme="light"] .k-next-steps-box      { background: #eff6ff; border-color: #bfdbfe; }
:root[data-theme="light"] .k-safety-reminder     { background: #fffbeb; border-color: #fde68a; }

/* Community band */
:root[data-theme="light"] .k-community-band { background: #f8fafc; border-color: #e2e8f0; }

/* Category grid / list */
:root[data-theme="light"] .k-cat-grid-simple-item { background: #fff; border-color: #e2e8f0; }
:root[data-theme="light"] .k-cat-list-count       { background: #f8fafc; }

/* Empty / sparse states */
:root[data-theme="light"] .k-empty-state-box { background: #f8fafc; border-color: #e2e8f0; }
:root[data-theme="light"] .k-sparse-nudge    { background: #eff6ff; border-color: #bfdbfe; }

/* How It Works section */
:root[data-theme="light"] .k-how-it-works { background: #fff; border-color: #e2e8f0; }

/* Listing card backgrounds */
:root[data-theme="light"] .k-listing-card  { background: #fff; }

/* ============================================================
   UX / USER-FRIENDLY POLISH — 10/10
   ============================================================ */

/* ── Global smooth scroll ─────────────────────────────────────── */
html { scroll-behavior: smooth; }

/* ── Improved focus rings — visible for keyboard users ───────── */
:focus-visible {
  outline: 3px solid #2563eb;
  outline-offset: 2px;
  border-radius: 4px;
}
button:focus-visible, a:focus-visible { outline-offset: 3px; }

/* ── Card hover lift ──────────────────────────────────────────── */
@media (hover: hover) {
  .k-listing-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(0,0,0,.10);
  }
}

/* ── Scroll-to-top button ─────────────────────────────────────── */
#k-scroll-top {
  position: fixed;
  bottom: 88px;   /* clears mobile nav bar */
  right: 16px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--k-primary, #2563eb);
  color: #fff;
  border: none;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(37,99,235,.35);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transform: translateY(12px);
  transition: opacity .2s, transform .2s;
  z-index: 9000;
}
#k-scroll-top.k-scroll-top-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
@media (min-width: 761px) {
  #k-scroll-top { bottom: 32px; }
}

/* ── Selection color ──────────────────────────────────────────── */
::selection { background: #bfdbfe; color: #1e3a8a; }

/* ── Tap-highlight removal (mobile) ──────────────────────────── */
* { -webkit-tap-highlight-color: transparent; }
a, button { -webkit-tap-highlight-color: transparent; }

/* ── Image lazy-load fade-in ─────────────────────────────────── */
img[loading="lazy"] {
  opacity: 0;
  transition: opacity .3s;
}
img[loading="lazy"].k-img-loaded { opacity: 1; }

/* ── Search bar — wider, more prominent ──────────────────────── */
@media (max-width: 760px) {
  .k-search-wrap { width: 100%; }
  .k-search-input { font-size: 16px; padding: 11px 14px; border-radius: 10px 0 0 10px; }
  .k-search-btn   { min-height: 44px; min-width: 44px; border-radius: 0 10px 10px 0; }
}

/* ── WhatsApp share button — Sri Lanka context ────────────────── */
.k-wa-share {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: #25D366;
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 10px 16px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: background .15s;
}
.k-wa-share:hover { background: #128C7E; color: #fff; }
.k-wa-share svg  { flex-shrink: 0; }

/* ── Copy-link button ─────────────────────────────────────────── */
.k-copy-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--k-surface2, #f8fafc);
  border: 1px solid var(--k-border, #e2e8f0);
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 500;
  color: var(--k-text, #1a2b1b);
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.k-copy-link:hover { background: var(--k-surface, #fff); border-color: var(--k-primary, #2563eb); }

/* ── Listing share row ────────────────────────────────────────── */
.k-listing-share-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 16px;
}

/* ── Toast improvement — higher z than mobile nav ─────────────── */
#k-toast-wrap { z-index: 9999 !important; }

/* ── Empty-state call-to-action refinement ────────────────────── */
.k-empty-state-box .k-btn {
  margin-top: 16px;
}

/* ── Section heading consistency ─────────────────────────────── */
.k-section-heading {
  font-size: clamp(18px, 3.5vw, 22px);
  font-weight: 800;
  color: var(--k-text, #1a2b1b);
  margin: 0 0 4px;
  line-height: 1.25;
}

/* ── Breadcrumb — better mobile wrapping ─────────────────────── */
@media (max-width: 600px) {
  .k-breadcrumb { font-size: 12px; flex-wrap: wrap; }
}

/* ── Root token: --k-text alias (utils use var(--k-text) fallback #1a2b1b) ── */
:root { --k-text: #1a2b1b; }
:root[data-theme="dark"] { --k-text: #E2E8F0; }

/* ── Search submit button — enforce 44px touch target ────────────────────── */
.k-search-btn,
button.k-search-btn,
form .k-search-btn {
  min-height: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* ============================================================
   TOUCH TARGETS — remaining small elements brought to 44px
   ============================================================ */

/* Dark mode toggle — 28px → 44px */
.k-dark-toggle {
  min-height: 44px !important;
  min-width: 44px !important;
  padding: 0 10px !important;
}

/* Logo link — 32px → 44px hit area */
.k-logo {
  min-height: 44px;
  display: inline-flex !important;
  align-items: center !important;
}

/* Mobile "Post Ad" nav button — 36px → 44px */
.k-mobile-post-btn {
  height: 44px !important;
  min-height: 44px !important;
  padding: 0 16px !important;
}

/* Drawer close button — 36px → 44px */
.k-drawer-close {
  width: 44px !important;
  height: 44px !important;
}

/* Carousel prev/next buttons — 34px → 44px (desktop & mobile) */
.k-carousel-side-btn {
  width: 44px !important;
  height: 44px !important;
  font-size: 20px !important;
}

/* Sort / filter select dropdowns — 32px → 44px */
.k-sort-select,
.k-filter-select,
select.k-form-select {
  min-height: 44px !important;
  height: 44px !important;
}

/* Filter clear link — expand tap area */
.k-filter-clear,
.k-deals-filter-clear {
  min-height: 36px;
  display: inline-flex !important;
  align-items: center !important;
  padding: 4px 8px;
}

/* sr-only utility (screen-reader only labels) */
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0,0,0,0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* ============================================================
   TABLET STICKY NAVBAR FIX (761px – 1100px)
   kurulla-main.css @media(max-width:1100px) sets
   .k-navbar { position: relative } which kills sticky.
   Restore sticky for the full tablet range here.
   ============================================================ */
@media (min-width: 761px) and (max-width: 1100px) {
  /* Restore sticky to navbar — main CSS overrides it with position:relative */
  .k-navbar {
    position: sticky !important;
    top: 0 !important;
    z-index: 100;
  }

  /* Keep subnav pinned immediately below the navbar */
  .k-subnav {
    position: sticky !important;
    top: var(--k-nav-height, 64px) !important;
    z-index: 99;
  }

  /* Ensure navbar inner keeps a defined height at tablet */
  .k-navbar-inner {
    height: var(--k-nav-height, 64px);
    align-items: center;
  }

  /* Logo: keep it vertically centred and readable */
  .k-navbar .k-logo {
    flex-shrink: 0;
  }

  /* Search bar: fill available space between logo and hamburger */
  .k-search-wrap {
    flex: 1 1 0;
    min-width: 0;
    max-width: none;
  }
}