/* ============================================================
   Dubuz Mobile App — Premium Polish Layer
   ------------------------------------------------------------
   Native app feel (Alibaba / Temu quality) for the mobile web
   view (max-width 767px). Desktop (>=768px) & admin untouched.

   Tokens: this file loads RIGHT BEFORE theme-system.css so the
   admin theme system re-points legacy vars and wins. All colors
   here resolve through theme-system tokens at runtime:

     --color-primary        brand accent (theme/mode aware)
     --color-on-primary     white text on primary
     --color-primary-light  soft primary tint (active tiles/bg)
     --color-primary-ring   focus/active ring
     --color-surface        card / nav surfaces
     --color-surface-hover  subtle hover surface
     --color-bg             page background
     --color-text / --color-text-muted
     --color-border
     --color-shadow / --color-shadow-hover

   8px spacing grid | 150-300ms transitions | SVG icons only
   ============================================================ */

/* ---- 0. Global mobile tap behaviour ----------------------- */
html,
body {
  -webkit-tap-highlight-color: transparent !important;
  tap-highlight-color: transparent;
}
a, button, [role="button"] {
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
}
@media (max-width: 767px) {
  /* Kill stray blue/cyan touch outlines on mobile */
  a:focus, button:focus, [role="button"]:focus {
    outline: none !important;
  }
}

/* ============================================================
   1. TOPBAR — native chrome polish
   ============================================================ */
@media (max-width: 767px) {
  .al-topbar {
    height: calc(var(--al-topbar-height) + var(--al-safe-top));
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
    box-shadow: 0 1px 8px var(--color-shadow);
  }

  /* Create button uses the theme primary token */
  .al-topbar-btn--create {
    background: var(--color-primary);
    color: var(--color-on-primary);
  }
  .al-topbar-btn--create svg {
    stroke: var(--color-on-primary);
  }
  .al-topbar-btn--create:active {
    background: var(--color-primary-hover);
  }

  /* Uniform 40px icon buttons, gentle press feedback */
  .al-topbar-btn {
    color: var(--color-text);
    transition: background 0.15s ease, transform 0.15s ease;
  }
  .al-topbar-btn:active {
    background: var(--color-surface-hover);
    transform: scale(0.94);
  }
  .al-topbar-btn svg {
    width: 22px;
    height: 22px;
  }

  /* Location pill uses neutral tokens */
  .al-location-pill {
    background: var(--color-surface-hover);
    border: 1px solid var(--color-border);
    color: var(--color-text);
    min-height: 30px;
  }
  .al-location-pill:active {
    background: var(--color-bg);
    transform: scale(0.97);
  }
  .al-location-pill svg {
    width: 14px;
    height: 14px;
    color: var(--color-primary);
  }

  .al-topbar-badge {
    background: var(--color-primary);
    border-color: var(--color-surface);
  }
}

/* ============================================================
   2. BOTTOM NAV — active pill indicator + press feedback
   ============================================================ */
@media (max-width: 767px) {
  .al-bottom-nav {
    background: var(--color-surface);
    border-top: 1px solid var(--color-border);
    box-shadow: 0 -2px 12px var(--color-shadow);
  }

  .al-nav-item {
    min-height: 48px;
    gap: 2px;
  }

  /* Rounded pill behind the active icon */
  .al-nav-item.active::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 42%;
    transform: translate(-50%, -50%);
    width: 46px;
    height: 26px;
    border-radius: 999px;
    background: var(--color-primary-light);
    transition: background 0.2s ease, transform 0.2s ease;
    pointer-events: none;
    z-index: 0;
  }
  .al-nav-item.active svg {
    position: relative;
    z-index: 1;
  }

  .al-nav-item {
    color: var(--color-text-muted);
    transition: color 0.2s ease;
  }
  .al-nav-item.active {
    color: var(--color-primary);
  }
  .al-nav-item.active .al-nav-label {
    color: var(--color-primary);
    font-weight: 700;
  }
  .al-nav-label {
    font-size: 10px;
    color: var(--color-text-muted);
  }

  /* Press feedback on the whole tab */
  .al-nav-item:active svg {
    transform: scale(0.88);
  }

  /* Sell FAB — keep prominent, primary tokens */
  .al-sell-fab {
    background: var(--color-primary);
    box-shadow: 0 4px 14px var(--color-primary-ring);
  }
  .al-sell-fab svg {
    stroke: var(--color-on-primary);
  }
  .al-sell-fab:active {
    transform: scale(0.92);
    box-shadow: 0 2px 8px var(--color-primary-ring);
  }
}

/* ============================================================
   3. CATEGORY STRIP — premium icon-tile rail
   ============================================================ */
@media (max-width: 767px) {
  .al-category-strip {
    background: var(--color-bg);
    border-bottom: 1px solid var(--color-border);
    padding: 10px 12px;
  }

  .al-category-inner {
    gap: 8px;
  }

  .al-category-item {
    width: 64px;
    gap: 6px;
    scroll-snap-align: start;
  }

  .al-category-icon {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    color: var(--color-text);
    box-shadow: 0 1px 2px var(--color-shadow);
    transition: transform 0.15s ease, background 0.2s ease,
                border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
  }
  .al-category-icon svg {
    width: 24px;
    height: 24px;
    stroke-width: 2;
  }
  .al-category-item:active .al-category-icon {
    transform: scale(0.92);
  }

  /* Active tile: soft primary tint + ring */
  .al-category-item.active .al-category-icon {
    background: var(--color-primary-light);
    border-color: var(--color-primary-ring);
    color: var(--color-primary);
    box-shadow: inset 0 0 0 1px var(--color-primary-ring);
  }
  .al-category-item.active .al-category-label {
    color: var(--color-primary);
    font-weight: 700;
  }

  .al-category-label {
    font-size: 11px;
    font-weight: 500;
    color: var(--color-text-muted);
    max-width: 60px;
    line-height: 1.2;
  }
}

/* ============================================================
   4. MARKETPLACE CARDS — native grid + list polish
   ============================================================ */
@media (max-width: 767px) {
  /* ---- Grid cards ---- */
  .mp-card {
    background: var(--color-surface);
    border-radius: var(--mobile-card-radius, 16px);
    box-shadow: 0 1px 3px var(--color-shadow);
    transition: box-shadow 0.2s ease, transform 0.15s ease;
  }
  .mp-card:active {
    box-shadow: 0 4px 12px var(--color-shadow-hover);
    transform: scale(0.985);
  }
  .mp-card .classifi-image {
    aspect-ratio: 4 / 3 !important;
  }
  .mp-card .classifi-content {
    padding: 10px 12px 12px !important;
    gap: 4px;
  }
  .mp-card .classifi-price {
    font-size: 16px !important;
    font-weight: 800 !important;
    color: var(--color-primary) !important;
    line-height: 1.2 !important;
  }
  .mp-card .classifi-title {
    font-size: 13px !important;
    font-weight: 500 !important;
    color: var(--color-text) !important;
    line-height: 1.35 !important;
    white-space: normal !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    min-height: 0 !important;
    max-height: none !important;
  }

  /* Bottom meta row: city left, publish date/time on the extreme right */
  .mp-card .classifi-content .mp-card-meta-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: auto;
    padding-top: 8px;
  }
  .mp-card .classifi-content .ad-time {
    font-size: 11px !important;
    font-weight: 500 !important;
    color: var(--color-text-muted) !important;
    margin-left: auto;
    white-space: nowrap;
  }
  .mp-card .classifi-content .classifi-location {
    display: inline-flex !important;
    align-items: center;
    gap: 3px;
    font-size: 11px !important;
    font-weight: 500 !important;
    color: var(--color-text-muted) !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
  }
  .mp-card .classifi-content .classifi-location i {
    font-size: 9px !important;
    color: var(--color-text-muted) !important;
  }

  /* Save heart overlay */
  .grid-save-btn {
    top: 8px;
    right: 8px;
    width: 32px;
    height: 32px;
    background: var(--color-surface);
    color: var(--color-text);
    box-shadow: 0 2px 6px var(--color-shadow-hover);
    border: 1px solid var(--color-border);
    transition: transform 0.15s ease, background 0.15s ease, color 0.15s ease;
  }
  .grid-save-btn:active {
    transform: scale(0.9);
  }
  .grid-save-btn .fa-heart {
    color: var(--color-text-muted);
  }
  .grid-save-btn .fa-solid.fa-heart {
    color: var(--color-danger);
  }

  /* ---- List rows ---- */
  .mp-list-row {
    background: var(--color-surface);
    border-radius: 16px !important;
    padding: 12px !important;
    gap: 12px !important;
    box-shadow: 0 1px 3px var(--color-shadow);
    transition: box-shadow 0.2s ease, transform 0.15s ease;
  }
  .mp-list-row:active {
    box-shadow: 0 4px 12px var(--color-shadow-hover);
    transform: scale(0.985);
  }
  .mp-list-row .mp-list-thumb {
    width: 96px !important;
    height: 96px !important;
    border-radius: 14px !important;
    background: var(--color-bg);
  }
  .mp-list-row .mp-list-thumb img {
    object-fit: cover;
  }
  .mp-list-row .mp-list-price {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: var(--color-primary) !important;
  }
  .mp-list-row .mp-list-title {
    font-size: 14px !important;
    font-weight: 500 !important;
    color: var(--color-text) !important;
    line-height: 1.35 !important;
    white-space: normal !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  .mp-list-row .mp-list-meta {
    font-size: 12px !important;
    font-weight: 500 !important;
    color: var(--color-text-muted) !important;
  }
  .mp-list-row .ad-time {
    font-size: 11px !important;
    color: var(--color-text-muted) !important;
  }

  /* Save heart on list thumb */
  .classifi-box.list {
    position: relative;
  }
  .mp-list-save-btn {
    position: absolute;
    top: 18px;
    left: calc(12px + 96px - 34px);
    z-index: 6;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 1px solid var(--color-border);
    border-radius: 50%;
    background: var(--color-surface);
    color: var(--color-text-muted);
    font-size: 12px;
    line-height: 1;
    box-shadow: 0 1px 4px var(--color-shadow-hover);
    cursor: pointer;
    transition: transform 0.15s ease, color 0.15s ease;
  }
  .mp-list-save-btn:active {
    transform: scale(0.9);
  }
  .mp-list-save-btn .fa-solid.fa-heart {
    color: var(--color-danger);
  }
  [dir="rtl"] .mp-list-save-btn {
    left: auto;
    right: calc(12px + 96px - 34px);
  }

  /* Alibaba product cards (standalone mobile grid) */
  .al-product-card {
    background: var(--color-surface);
    border-radius: 16px;
    box-shadow: 0 1px 3px var(--color-shadow);
  }
  .al-product-card .al-product-price {
    color: var(--color-primary);
  }
  .al-product-card .al-product-title {
    color: var(--color-text);
  }
  .al-product-card .al-product-location {
    color: var(--color-text-muted);
  }
  .al-product-card .al-product-badge {
    background: var(--color-primary);
    color: var(--color-on-primary);
  }
}

/* ============================================================
   5. FILTER CHIPS + BOTTOM SHEETS (marketplace)
   ============================================================ */
@media (max-width: 767px) {
  /* Sheet surface + polish */
  .mp-sheet {
    background: var(--color-surface) !important;
  }
  .mp-sheet-handle {
    background: var(--color-border);
  }
  .mp-sheet-header {
    border-bottom: 1px solid var(--color-border);
  }
  .mp-sheet-header h3 {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: var(--color-text) !important;
  }
  .mp-sheet-close {
    background: var(--color-surface-hover);
    color: var(--color-text-muted);
  }
  .mp-sheet-body {
    padding: 8px 12px 16px !important;
  }

  /* Option rows: more padding, rounded, active tint */
  .mp-sheet-option {
    padding: 14px 12px !important;
    border-radius: 12px !important;
    color: var(--color-text) !important;
    font-size: 14px !important;
    margin-bottom: 2px;
    transition: background 0.15s ease, color 0.15s ease;
  }
  .mp-sheet-option:active {
    background: var(--color-surface-hover);
  }
  .mp-sheet-option.is-active {
    background: var(--color-primary-light) !important;
    color: var(--color-primary) !important;
    font-weight: 600 !important;
  }
  .mp-sheet-option i.fa-check {
    color: var(--color-primary);
  }
  .mp-sheet-option .mp-sheet-chevron {
    color: var(--color-text-muted);
  }

  /* Search inputs inside sheets */
  .mp-sheet-search {
    width: 100%;
    height: 44px;
    margin-bottom: 12px;
    padding: 0 14px;
    border: 1px solid var(--color-border) !important;
    border-radius: 12px !important;
    background: var(--color-surface-hover) !important;
    color: var(--color-text) !important;
    font-size: 14px !important;
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
  }
  .mp-sheet-search:focus {
    border-color: var(--color-primary) !important;
    background: var(--color-surface) !important;
    box-shadow: 0 0 0 3px var(--color-primary-ring);
  }
  .mp-sheet-search::placeholder {
    color: var(--color-text-muted);
  }

  .mp-cat-back {
    color: var(--color-primary);
  }

  .mp-loc-section-label {
    color: var(--color-text-muted);
  }

  /* Radius pills */
  .mp-radius-pill {
    padding: 10px 16px !important;
    border: 1px solid var(--color-border) !important;
    background: var(--color-surface) !important;
    color: var(--color-text) !important;
    font-size: 13px !important;
    transition: all 0.15s ease;
  }
  .mp-radius-pill:active {
    transform: scale(0.96);
  }
  .mp-radius-pill.is-active {
    background: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
    color: var(--color-on-primary) !important;
  }

  .mp-sheet-footer {
    background: var(--color-surface) !important;
    border-top: 1px solid var(--color-border) !important;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px)) !important;
  }
  .mp-sheet-overlay {
    background: rgba(15, 23, 42, 0.5) !important;
  }
}

/* ============================================================
   6. BUTTONS — primary / secondary / outline press polish
   ============================================================ */
@media (max-width: 767px) {
  /* Primary buttons → theme token + white text + press scale */
  .al-sticky-btn--primary,
  .al-compose-btn,
  .al-auth-submit,
  .btn-primary,
  .wow-btn-create-post,
  .mp-sheet-footer button[style*="--color-primary"],
  .mp-sheet-footer .btn-primary {
    background: var(--color-primary) !important;
    color: var(--color-on-primary) !important;
    transition: background 0.15s ease, transform 0.12s ease, box-shadow 0.15s ease;
    box-shadow: 0 2px 8px var(--color-primary-ring);
  }
  .al-sticky-btn--primary:active,
  .al-compose-btn:active,
  .al-auth-submit:active,
  .btn-primary:active,
  .wow-btn-create-post:active {
    background: var(--color-primary-hover) !important;
    transform: scale(0.97);
  }

  /* Secondary / outline → neutral tokens */
  .al-sticky-btn--outline,
  .btn-outline-primary,
  .btn-secondary {
    background: var(--color-surface-hover) !important;
    color: var(--color-text) !important;
    border: 1px solid var(--color-border) !important;
  }
}

/* ============================================================
   7. PULL-TO-REFRESH + misc native details
   ============================================================ */
@media (max-width: 767px) {
  .pull-indicator {
    color: var(--color-text-muted);
    background: var(--color-bg);
  }

  /* Softer scrollbar-free feel */
  ::-webkit-scrollbar {
    width: 0;
    height: 0;
  }

  /* Smooth surface color transitions when toggling theme/mode */
  .al-topbar,
  .al-bottom-nav,
  .al-category-strip,
  .mp-card,
  .mp-list-row,
  .al-product-card,
  .mp-sheet {
    transition: background-color 0.25s ease, border-color 0.25s ease,
                box-shadow 0.25s ease, color 0.25s ease;
  }
}