/* =============================================================
   SAFARI / iOS COMPATIBILITY FIXES
   Targets: Safari on iPhone & iPad Pro (iOS 14+, macOS Safari)
   ============================================================= */

/* ── 1. Dashboard modal: Safari ignores display:none → flex
        transitions. Fix: use visibility + opacity instead.    ── */
.modal-overlay {
  display: -webkit-flex !important;
  display: flex !important;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  -webkit-transition: opacity 0.3s ease, visibility 0.3s ease;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  /* Prevent iOS scroll leak behind overlay */
  -webkit-overflow-scrolling: touch;
}

.modal-overlay.active {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}

/* ── 2. Modal container: Safari needs explicit flex sizing     ── */
.modal-container {
  -webkit-flex-direction: column;
  flex-direction: column;
  /* Fix iOS overscroll inside modal body */
  -webkit-overflow-scrolling: touch;
}

.modal-body {
  -webkit-overflow-scrolling: touch;
  overflow-y: auto;
}

/* ── 3. Proposal nav: sticky needs -webkit- prefix             ── */
.proposal-nav {
  position: -webkit-sticky;
  position: sticky;
}

/* ── 4. Hero video fallback for iOS (autoplay allowed only
        when muted + playsinline, already set in HTML)          ── */
.hero-bg-video {
  /* On iOS the video may not cover perfectly without these */
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  /* iOS Safari transform fix for video positioning */
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

/* ── 5. aspect-ratio fallback for Safari < 15 (already has
        min-height, but ensure padding-top trick as backup)     ── */
@supports not (aspect-ratio: 3 / 4) {
  .portrait-placeholder-card {
    padding-top: calc(4 / 3 * 100%);
    height: 0;
    overflow: hidden;
    position: relative;
  }
  .portrait-placeholder-card > * {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
  }
  .landscape-placeholder-card {
    padding-top: calc(2 / 3 * 100%);
    height: 0;
    overflow: hidden;
    position: relative;
  }
  .landscape-placeholder-card > * {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
  }
}

/* ── 6. Canvas touch-action for signature on Safari iOS        ── */
#prop-sig-canvas {
  -ms-touch-action: none;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
}

/* ── 7. Form inputs: prevent iOS auto-zoom on focus
        (triggered when font-size < 16px)                       ── */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
input[type="number"],
input[type="date"],
select,
textarea {
  font-size: max(16px, 1em);
}

/* Override back to original size visually after preventing zoom */
.form-control-custom,
.form-control {
  font-size: 16px !important;
}

/* ── 8. iOS Safari safe area insets for iPhone X+ notch        ── */
@supports (padding: max(0px)) {
  .proposal-nav {
    padding-left: max(5%, env(safe-area-inset-left));
    padding-right: max(5%, env(safe-area-inset-right));
  }
  .next-steps-banner {
    padding-left: max(5%, env(safe-area-inset-left));
    padding-right: max(5%, env(safe-area-inset-right));
  }
}

/* ── 9. iPad Pro (1024px) specific layout fixes               ── */
@media only screen and (min-device-width: 1024px) and (max-device-width: 1366px) and (-webkit-min-device-pixel-ratio: 2) {
  /* iPad Pro portrait/landscape — ensure proper grid layout */
  .form-split-layout {
    display: -webkit-grid;
    display: grid;
    -webkit-grid-template-columns: 1fr 1fr;
    grid-template-columns: 1fr 1fr;
  }
  .steps-timeline-grid {
    display: -webkit-grid;
    display: grid;
    -webkit-grid-template-columns: repeat(2, 1fr);
    grid-template-columns: repeat(2, 1fr);
  }
  /* Ensure modal fits screen on iPad Pro */
  .modal-container {
    max-width: 90vw;
    max-height: 85vh;
  }
}

/* ── 10. Flex -webkit- prefixes for older Safari              ── */
.section-hero,
.hero-overlay-content,
.package-document-card,
.package-card-header,
.package-card-body,
.package-card-footer,
.form-image-column,
.form-details-column,
.custom-proposal-form,
.form-group-single,
.testimonial-slider-wrap,
.approved-status-column,
.proposal-sig-checkbox-group,
.proposal-sig-tabs,
.client-modal-icon {
  display: -webkit-flex;
  display: flex;
}

.section-hero {
  -webkit-flex-direction: column;
  flex-direction: column;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: center;
  justify-content: center;
}

.hero-overlay-content {
  -webkit-flex-direction: column;
  flex-direction: column;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: center;
  justify-content: center;
}

/* ── 11. Prevent body scroll when modal is open (iOS)         ── */
body.modal-open {
  overflow: hidden;
  /* Prevent bounce effect behind modal on iOS */
  -webkit-overflow-scrolling: auto;
}

/* ── 12. Fix -webkit-sticky for iOS Safari                    ── */
.proposal-nav {
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

/* ── 13. Acceptance modal: ensure flex display on iOS         ── */
#acceptance-modal {
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: center;
  justify-content: center;
}

/* ── 14. Signature clear button — min tap target for iOS      ── */
#prop-sig-clear-btn,
.proposal-sig-tab-btn,
.slider-nav-btn,
.faq-trigger {
  min-height: 44px;
  min-width: 44px;
}

.proposal-sig-tab-btn {
  min-height: 44px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

/* ── 15. Dashboard responsive fixes for iPad                  ── */
@media (max-width: 1024px) {
  .dashboard-header {
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    gap: 12px;
  }
  .user-controls {
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    gap: 8px;
  }
  .dashboard-actions {
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    gap: 12px;
  }
  .dashboard-actions > div {
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
  }
}

@media (max-width: 768px) {
  .dashboard-container {
    padding: 20px 16px;
  }
  .dashboard-header {
    -webkit-flex-direction: column;
    flex-direction: column;
    -webkit-align-items: flex-start;
    align-items: flex-start;
    gap: 16px;
    padding-bottom: 16px;
    margin-bottom: 20px;
  }
  .dashboard-actions {
    -webkit-flex-direction: column;
    flex-direction: column;
    -webkit-align-items: flex-start;
    align-items: flex-start;
    gap: 12px;
  }
  .proposals-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  /* Modal full screen on mobile */
  .modal-container {
    max-width: 100vw;
    max-height: 100vh;
    height: 100%;
    border-radius: 0;
    width: 100%;
  }
  .modal-footer {
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    gap: 10px;
  }
  .modal-footer .btn {
    -webkit-flex: 1 1 auto;
    flex: 1 1 auto;
    min-width: 120px;
    text-align: center;
    -webkit-justify-content: center;
    justify-content: center;
  }
  /* Proposal card actions stack better */
  .proposal-card-actions {
    -webkit-flex-direction: column;
    flex-direction: column;
    gap: 8px;
  }
  .proposal-card-actions .btn {
    width: 100%;
    text-align: center;
    -webkit-justify-content: center;
    justify-content: center;
  }
}