/**
 * Admin nav: hidden by default, shown only when auth.js removes "hidden" (user.role === "admin")
 */
.admin-only { display: none !important; }
.admin-only:not(.hidden) { display: inline-flex !important; }

/**
 * Mobile global refinement – under 768px
 * Spacing, typography, button sizing only. No layout changes.
 */
@media (max-width: 767px) {
  /* 7. No horizontal overflow */
  body {
    overflow-x: hidden;
  }

  /* 1. Reduce vertical spacing between sections by ~35% */
  main {
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
  }
  section.py-16 {
    padding-top: 2.5rem !important;
    padding-bottom: 2.5rem !important;
  }
  .py-16 { padding-top: 2.5rem !important; padding-bottom: 2.5rem !important; }
  .py-10 { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; }
  .py-8 { padding-top: 1.25rem !important; padding-bottom: 1.25rem !important; }
  .py-6 { padding-top: 1rem !important; padding-bottom: 1rem !important; }
  .py-4 { padding-top: 0.75rem !important; padding-bottom: 0.75rem !important; }
  .mt-10 { margin-top: 1.5rem !important; }
  .mt-8 { margin-top: 1.25rem !important; }
  .mt-6 { margin-top: 1rem !important; }
  .mt-4 { margin-top: 0.75rem !important; }
  .mb-6 { margin-bottom: 1rem !important; }
  .mb-4 { margin-bottom: 0.75rem !important; }
  .gap-10 { gap: 1.5rem !important; }
  .gap-6 { gap: 1rem !important; }
  .gap-4 { gap: 0.75rem !important; }
  .gap-3 { gap: 0.5rem !important; }
  .space-y-6 > * + * { margin-top: 1rem !important; }
  .space-y-4 > * + * { margin-top: 0.75rem !important; }
  .space-y-3 > * + * { margin-top: 0.6rem !important; }

  /* 6. Reduce excessive white space under hero */
  section.relative.overflow-hidden .py-16 {
    padding-top: 2rem !important;
    padding-bottom: 2rem !important;
  }
  #kako-radi {
    padding-top: 2rem !important;
  }

  /* 2. Reduce h1 size (10–15%) */
  h1 {
    font-size: 1.5rem !important;
    line-height: 1.25 !important;
  }
  .text-5xl, .text-6xl { font-size: 2rem !important; line-height: 1.2 !important; }
  .text-4xl { font-size: 1.75rem !important; line-height: 1.25 !important; }
  .text-3xl { font-size: 1.5rem !important; line-height: 1.25 !important; }
  .text-2xl { font-size: 1.35rem !important; line-height: 1.25 !important; }

  /* 3. Reduce line-height for headings */
  h2, h3 {
    line-height: 1.3 !important;
  }
  .text-xl { line-height: 1.3 !important; }
  .text-lg { line-height: 1.35 !important; }
  .leading-tight { line-height: 1.25 !important; }

  /* 4. Card padding 16px */
  .card,
  .feature-card,
  .glass[class*="rounded"] {
    padding: 16px !important;
  }
  div.bg-white.rounded-2xl,
  div.bg-white.rounded-xl,
  div[class*="rounded-2xl"].border,
  div[class*="rounded-xl"].border.bg-white {
    padding: 16px !important;
  }
  .p-6 { padding: 16px !important; }
  .p-5 { padding: 16px !important; }

  /* 5. Buttons: min-height 48px, full width, border-radius 14px */
  .btn-primary,
  .btn-secondary,
  button[type="submit"]:not([class*="h-"]),
  .btn,
  a.btn-primary,
  a.btn-secondary,
  .nav-cta--block,
  #mobileUserNav a:not(.admin-only),
  #mobileGuestNav a:not(.admin-only),
  #mobileUserNav button,
  #mobileGuestNav button,
  .if-guest .btn-primary,
  .if-guest .btn-secondary,
  .if-guest a[href="/register.html"],
  .if-guest a[href="/login.html"],
  .if-auth .btn-primary,
  .if-auth .btn-secondary,
  .if-auth a[href="/loads.html"],
  .if-auth a[href="/profile.html"] {
    min-height: 48px !important;
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 14px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 12px 16px !important;
  }
  .flex-wrap.gap-3 > a,
  .flex-wrap.gap-3 > button {
    flex: 1 1 100% !important;
    min-width: 100% !important;
  }

  /* ========== HERO + NAV POLISH (mobile app landing) ========== */

  /* 1) NAV / Header */
  nav.glass .mx-auto > div:first-child {
    min-height: auto !important;
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 0 !important;
  }
  nav.glass img[alt="Drumo"] {
    height: 28px !important;
    width: 28px !important;
  }
  #mobileMenuBtn {
    padding: 0.5rem 0.75rem !important;
  }

  /* 2) HERO – reduce top padding above hero content */
  #hero .mx-auto.max-w-7xl {
    padding-top: 1rem !important;
    padding-bottom: 1.5rem !important;
  }
  #hero .grid.lg\:grid-cols-2 {
    gap: 1rem !important;
    display: flex !important;
    flex-direction: column !important;
  }
  /* Hero left column: text + CTAs */
  #hero .grid.lg\:grid-cols-2 > div:first-child {
    order: 1;
    max-width: 100%;
  }
  /* Hero feature box (right column) – below CTAs */
  #hero .grid.lg\:grid-cols-2 > div:last-child {
    order: 2;
  }
  /* Limit hero text width, center or left-align */
  #hero h1,
  #hero .text-lg {
    max-width: 22rem;
  }
  /* CTA directly under subtitle with minimal gap – only when not hidden */
  #hero .if-guest:not(.hidden),
  #hero .if-auth:not(.hidden) {
    margin-top: 1rem !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0.5rem !important;
  }
  /* Stack: primary first, secondary second (DOM order already correct) */
  #hero .if-guest:not(.hidden) a,
  #hero .if-auth:not(.hidden) a {
    width: 100% !important;
    margin: 0 !important;
  }
  /* Small text below CTAs – reduce gap */
  #hero .mt-6.text-sm {
    margin-top: 1rem !important;
  }

  /* 3) HERO feature box – single column, below CTAs, reduced padding */
  #hero .glass.rounded-\[16px\] {
    padding: 12px !important;
  }
  #hero .glass .grid.sm\:grid-cols-2 {
    grid-template-columns: 1fr !important;
    gap: 0.75rem !important;
  }
  #hero .glass .p-4 {
    padding: 0.75rem !important;
  }
  #hero .glass .mt-4.grid {
    margin-top: 0.75rem !important;
    padding-top: 0.75rem !important;
  }

  /* 4) Logo strip / marquee – hide on mobile if present */
  .marquee,
  [class*="logo-strip"],
  [class*="logoStrip"] {
    display: none !important;
  }

  /* ========== OFFERS / MESSAGING – mobile chat UI ========== */

  /* Main: full height, no footer when chat overlay open */
  body:has(#mobileChatArea:not(.hidden)) > footer {
    display: none !important;
  }

  /* Chat bubbles: 85% max-width on mobile */
  .chat-bubble-in,
  .chat-bubble-out {
    max-width: 85% !important;
  }

  /* Input bar: thumb-friendly, min 48px */
  .msg-composer textarea,
  .msg-composer .msg-send-btn {
    min-height: 48px !important;
  }
  .msg-composer form {
    width: 100%;
  }
  .msg-composer textarea {
    flex: 1;
    min-width: 0;
  }
  /* Send button: keep inline, don't force full width */
  .msg-send-btn {
    width: auto !important;
    max-width: none !important;
    flex-shrink: 0;
    padding: 12px 16px !important;
  }

  /* offers chat: white input, circular send button, no solid blue bar */
  .msg-composer textarea {
    background: #fff !important;
    border: 1px solid #E2E8F0 !important;
  }
  .msg-composer form {
    display: flex !important;
    align-items: flex-end !important;
    gap: 8px !important;
  }
  .msg-composer .msg-send-btn {
    width: 48px !important;
    min-width: 48px !important;
    height: 48px !important;
    min-height: 48px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    flex-shrink: 0;
  }

  /* ========== LOADS – filter accordion ========== */
  #filterSection .filter-expand {
    display: flex !important;
    flex-direction: column !important;
  }
  #filterSection .filter-expand.hidden {
    display: none !important;
  }

  /* ========== INDEX – illustrations, Kako radi, CTA ========== */
  #kako-radi .mt-10.grid {
    display: none !important;
  }
  .feature-card img,
  .min-h-\[340px\] img,
  img[alt="App screenshot"] {
    max-height: 220px !important;
    object-fit: cover !important;
  }
  .min-h-\[340px\] {
    min-height: 220px !important;
  }

  /* ========== PROFILE – compact cards, pills, danger accordion ========== */
  .listing-card .listing-title,
  .listing-card .listing-route,
  .listing-card .listing-meta {
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }
  .listing-card .listing-title {
    -webkit-line-clamp: 1 !important;
  }
  .listing-card .listing-route,
  .listing-card .listing-meta:not(.mt-1) {
    -webkit-line-clamp: 1 !important;
  }
  .listing-card .listing-meta.mt-1 {
    -webkit-line-clamp: 2 !important;
  }
  .listing-card .listing-actions .action-btn {
    padding: 4px 10px !important;
    font-size: 12px !important;
    border-radius: 9999px !important;
    min-height: auto !important;
    width: auto !important;
  }
  .profile-danger-accordion summary {
    cursor: pointer;
    padding: 12px 16px;
    font-weight: 600;
  }
  .profile-danger-accordion[open] summary {
    border-bottom: 1px solid rgba(225, 29, 72, 0.2);
  }
  .profile-danger-accordion[open] .profile-danger-chevron {
    transform: rotate(180deg);
  }
  .profile-danger-accordion .profile-danger-content {
    padding: 12px 16px;
  }
  /* Profile info: stacked label/value, tighter */
  #profileInfoCard dl {
    gap: 0.5rem !important;
  }
  #profileInfoCard dl > div {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0.25rem !important;
  }
  #profileInfoCard dl dd {
    text-align: left !important;
  }
  #profileInfoCard .rounded-2xl.border-slate-200 dl > div {
    flex-direction: column !important;
    align-items: flex-start !important;
  }
}