/* mobile.css — Capacitor / phone-first fixes for Bokfirma */

/* ─── 1. Prevent iOS auto-zoom on input focus (font-size must be ≥16px) ─── */
input, select, textarea,
.form-control, .form-select, .form-control-sm, .form-select-sm {
  font-size: 16px !important;
}

/* ─── 2. Touch targets: minimum 44×44px per Apple/Google guidelines ─── */
.btn {
  min-height: 44px;
  min-width: 44px;
}
.form-select,
.form-control {
  min-height: 44px;
}

/* ─── 3. Fix iOS fixed-background bug (causes flickering / blank areas) ─── */
@media (max-width: 991px) {
  html:not([data-bs-theme="dark"]) body.oci-app,
  [data-bs-theme="light"] body {
    background-attachment: scroll;
  }
}

/* ─── 4. Hero: reduce padding on phones ─── */
@media (max-width: 767px) {
  .hero-shell {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
  }
  .hero-copy #heroTitle {
    font-size: 1.35rem;
  }
}

/* ─── 5. Nav: shrink action buttons on very small screens ─── */
@media (max-width: 420px) {
  #buyLink span,
  #cancelLink span,
  #unlockBtn span {
    display: none;
  }
  #buyLink::after  { content: "★"; }
  #cancelLink::after { content: "✕"; }
  #unlockBtn::after  { content: "🔑"; }
  .oci-nav .btn {
    padding-left: 0.6rem;
    padding-right: 0.6rem;
  }
}

/* ─── 6. Items table: horizontal scroll on small screens ─── */
@media (max-width: 767px) {
  #itemsTable {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
  }
  #itemsTable td,
  #itemsTable th {
    white-space: nowrap;
  }
}

/* ─── 7. Preview panel: hide on mobile, show "Preview" toggle ─── */
@media (max-width: 991px) {
  .preview-col {
    display: none;
  }
  .preview-col.mobile-visible {
    display: block;
    margin-top: 1rem;
  }
  #previewFrame {
    height: 75vh !important;
  }
}

/* ─── 8. Floating preview button (mobile only) ─── */
#mobilePreviewToggle {
  display: none;
}
@media (max-width: 991px) {
  #mobilePreviewToggle {
    display: flex;
    position: fixed;
    bottom: 1.25rem;
    right: 1.25rem;
    z-index: 1050;
    border-radius: 999px;
    padding: 0.65rem 1.2rem;
    font-weight: 600;
    box-shadow: 0 4px 16px rgba(14, 165, 233, 0.35);
    align-items: center;
    gap: 0.4rem;
    min-height: 48px;
  }
}

/* ─── 9. Card max-width: full-width on phones ─── */
@media (max-width: 575px) {
  .card:not(.h-100) {
    max-width: 100%;
  }
}

/* ─── 10. Action buttons row: stack on phones ─── */
@media (max-width: 480px) {
  .d-flex.flex-wrap.gap-2.mt-3 .btn {
    flex: 1 1 calc(50% - 0.5rem);
  }
}

/* ─── 11. Safe area insets for notched phones (iPhone X+, Android cutouts) ─── */
body {
  padding-bottom: env(safe-area-inset-bottom);
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}
#mobilePreviewToggle {
  bottom: calc(1.25rem + env(safe-area-inset-bottom));
  right: calc(1.25rem + env(safe-area-inset-right));
}