/* Localsewa v32.8.1 — Customer Homepage Laptop/Desktop Patch
   Scope: large-screen homepage/header/footer only. Mobile/tablet remain governed
   by v32.8 tablet-mobile rules. */

/* Laptop-sized mouse/trackpad devices. */
@media (min-width: 1024px) and (max-width: 1439.98px) and (hover: hover) and (pointer: fine),
       (min-width: 1440px) {
  /* Header: logo left, navigation optically centered, actions pinned right. */
  #root:has(.ls-public-header) .ls-public-header-inner {
    position: relative;
  }

  #root:has(.ls-public-header) .ls-public-main-nav {
    position: absolute;
    left: 50%;
    width: max-content;
    flex: none;
    transform: translateX(-50%);
  }

  /* Header location is redundant on laptop/desktop; homepage already exposes
     service-area context where it is useful. */
  #root:has(.ls-public-header) .ls-public-desktop-actions > :first-child {
    display: none !important;
  }

  #root:has(.ls-public-header) .ls-public-desktop-actions {
    order: 4;
    margin-left: 0 !important;
  }

  #root:has(.ls-public-header) .ls-public-notifications {
    order: 3;
    margin-left: auto !important;
  }

  /* Notification bell should read as an icon, not another boxed header pill. */
  #root:has(.ls-public-header) .ls-public-notifications > button {
    border-color: transparent !important;
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 999px !important;
  }

  #root:has(.ls-public-header) .ls-public-notifications > button:hover {
    background: rgba(255, 255, 255, 0.10) !important;
  }

  /* Cleaner account control at the far-right edge. */
  #root:has(.ls-public-header) .ls-public-desktop-actions [aria-haspopup="menu"] {
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    background: rgba(255, 255, 255, 0.10) !important;
    color: #fff !important;
    box-shadow: none !important;
    backdrop-filter: blur(10px);
  }

  #root:has(.ls-public-header) .ls-public-desktop-actions [aria-haspopup="menu"]:hover {
    background: rgba(255, 255, 255, 0.18) !important;
  }

  /* Popular Services: exactly two rows of five square tiles. */
  #root:has(.ls-customer-home) .ls-home-category-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 16px !important;
  }

  #root:has(.ls-customer-home) .ls-home-category-grid > [data-service-category] {
    aspect-ratio: 1 / 1;
    min-height: 0 !important;
    padding: 16px !important;
  }

  #root:has(.ls-customer-home) .ls-home-category-grid > [data-service-category] > span:first-child {
    width: 48px;
    height: 48px;
  }

  /* Footer is intentionally a large-screen feature. */
  #root:has(.ls-customer-home) .ls-desktop-footer {
    display: block;
  }
}

/* Large desktop gets a little more breathing room without stretching tiles. */
@media (min-width: 1600px) {
  #root:has(.ls-customer-home) .ls-home-category-grid {
    gap: 18px !important;
  }
}