/* Global mobile/touch improvements for Ziva5 pages */
html,
body {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

body {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  overflow-wrap: break-word;
}

img,
video,
canvas,
svg,
iframe {
  max-width: 100%;
}

/* Prevent hidden horizontal overflow from long content */
pre,
code,
.table-wrap,
table {
  max-width: 100%;
}

.table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Better focus visibility for touch/keyboard */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[role="button"]:focus-visible {
  outline: 3px solid rgba(26, 115, 232, 0.35);
  outline-offset: 2px;
}

/* Tabs and action groups should not force page overflow */
.tabs,
.top-actions,
.actions,
.header-actions,
.header-tools,
.profile-actions,
.hero-stats,
.chips,
.tags {
  flex-wrap: wrap;
  max-width: 100%;
}

@media (max-width: 980px) {
  .container,
  .wrap,
  .topbar-inner,
  .header-row,
  .modal-content,
  .panel {
    max-width: 100%;
  }

  .container,
  .wrap {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  .tabs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }

  .tabs .tab,
  .top-actions > *,
  .actions > * {
    flex: 0 0 auto;
  }
}

@media (max-width: 860px) {
  html {
    font-size: 16px;
  }

  body {
    font-size: 1rem;
    line-height: 1.75;
  }

  p,
  li,
  label,
  .muted,
  .notice,
  .subline {
    font-size: 0.95rem !important;
    line-height: 1.8;
  }

  h1 {
    font-size: clamp(1.25rem, 5.4vw, 1.65rem) !important;
    line-height: 1.45;
  }

  h2 {
    font-size: clamp(1.12rem, 4.8vw, 1.4rem) !important;
    line-height: 1.5;
  }

  h3,
  h4 {
    font-size: clamp(1rem, 4.4vw, 1.2rem) !important;
    line-height: 1.55;
  }

  button,
  .btn,
  a.btn,
  .tab,
  [role="button"],
  input[type="button"],
  input[type="submit"],
  input[type="reset"] {
    min-height: 44px;
    min-width: 44px;
    padding: 10px 14px !important;
    font-size: 0.95rem !important;
    line-height: 1.35;
  }

  input,
  select,
  textarea {
    width: 100%;
    min-height: 44px;
    font-size: 16px !important;
    line-height: 1.45;
  }

  textarea {
    min-height: 104px;
  }

  .grid,
  .grid-2,
  .grid-3,
  .split,
  .row,
  .taxonomy-wrap,
  .home-layout,
  .portfolio-media-actions-row,
  .portfolio-grid,
  .portfolio-card-grid,
  .filters {
    grid-template-columns: 1fr !important;
  }

  .search-box,
  .home-quick-links,
  .hero-content,
  .service-main,
  .cust-info,
  .booking-info,
  .item,
  .panel,
  .card,
  .modal-content,
  .portfolio-card,
  .service-item,
  .form-row > * {
    min-width: 0 !important;
  }

  .modal {
    padding: 10px !important;
  }

  .modal-content {
    max-height: 92vh;
    border-radius: 14px;
  }

  /* Keep Persian datepicker layout untouched on mobile */
  .datepicker-container,
  .datepicker-plot-area {
    max-width: none !important;
  }

  .datepicker-plot-area table {
    display: table !important;
    width: 100% !important;
    overflow: visible !important;
  }

  .datepicker-plot-area th,
  .datepicker-plot-area td {
    display: table-cell !important;
  }

  .datepicker-plot-area button,
  .datepicker-plot-area [class*="pwt-btn"],
  .datepicker-plot-area input,
  .datepicker-plot-area select,
  .datepicker-plot-area textarea {
    min-height: unset !important;
    min-width: unset !important;
    padding: 0 !important;
    font-size: inherit !important;
    line-height: inherit !important;
  }
}

@media (max-width: 520px) {
  .container,
  .wrap {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  .topbar-inner,
  .header-row,
  .top,
  .brand {
    gap: 8px !important;
  }

  .top-actions,
  .actions {
    width: 100%;
  }

  .top-actions > .btn,
  .actions > .btn,
  .actions > button,
  .top-actions > button {
    flex: 1 1 calc(50% - 6px);
  }
}