/*
 * property-forms-mobile.css
 * ArtEmis — Ανάθεση / Αναζήτηση Ακινήτου — Mobile Responsiveness (≤ 768 px)
 *
 * Applies ONLY on screens ≤ 768 px.
 * Desktop layout in anathesi.html / anazitisi.html is completely unchanged.
 *
 * Depends on CSS custom properties defined in anathesi.html / anazitisi.html:
 *   --gold, --ink, --ink2, --ink3, --bd, --bd2, --s, --s2, --gb, --gg, --r
 */

/* ── Copy reference button: hidden on desktop, shown on mobile ── */
#copy-ref-btn { display: none; }

@media (max-width: 768px) {

  /* ── Global: 16px prevents iOS auto-zoom on focus ── */
  .inp, .sel, .phone-inp, .textarea { font-size: 16px !important; }

  /* Remove 300 ms tap delay on all interactive elements */
  button, .sc2, .ropt, .bopt, .chk-opt, .yn-opt,
  .app-toggle, .rb-btn, .bnx, .bbk, .sn { touch-action: manipulation; }

  /* ── Brand header ── */
  .brand     { padding: 10px 14px; }
  .brand img { height: 34px; }
  .back-site { display: none; }

  /* ── Stepper: hide text labels, show only number circles ── */
  .stepper { padding: 10px 14px; }
  .stxt,
  .sn.active .stxt,
  .sn.done   .stxt { display: none !important; }
  .sn { flex: none; }

  /* ── Stepper: bigger tap target + touch feedback for clickable steps
        (only .sn.done / .sn.active are clickable — see form JS) ── */
  .sn.done, .sn.active { padding: 10px; margin: -10px; }
  .sn.done:active .sc, .sn.active:active .sc {
    transform: scale(0.92) !important;
    box-shadow: 0 0 0 4px rgba(212, 175, 55, .28) !important;
  }

  /* ── Panel body: padding-bottom clears the fixed nav bar ── */
  .panel.on > .body { padding-bottom: 84px !important; }

  /* ── Fixed footer navigation ── */
  .ftr {
    position:   fixed   !important;
    bottom:     0       !important;
    left:       0       !important;
    right:      0       !important;
    max-width:  none    !important;
    padding:    10px 14px !important;
    background: rgba(12, 27, 22, 0.97) !important;
    backdrop-filter:         blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    border-top: 1px solid rgba(255, 255, 255, .12) !important;
    z-index:    100 !important;
  }
  .bbk, .bnx { min-height: 44px !important; }

  /* ── Typography ── */
  .tit { font-size: 19px !important; }
  .sub { font-size: 13px !important; }
  .ey  { font-size: 10px !important; }

  /* ── 2-col / 3-col field rows → single column ── */
  .r2, .r3 { grid-template-columns: 1fr !important; gap: 10px !important; }

  /* ── 2-col / 3-col / 4-col option grids → fewer columns ── */
  .g2 { grid-template-columns: 1fr !important; gap: 8px !important; }
  .g3 { grid-template-columns: 1fr !important; gap: 8px !important; }
  .g4 { grid-template-columns: 1fr 1fr !important; gap: 8px !important; }

  /* ── Owner-type buttons: keep 3-col, increase touch height ── */
  #owner-type-btns .sc2 { min-height: 56px !important; }
  #owner-type-btns .slb { font-size: 11px !important; }

  /* ── Feature checklist grid: fewer columns, bigger tap targets ── */
  .feat-grid { grid-template-columns: 1fr 1fr !important; gap: 7px !important; }
  .chk-opt   { min-height: 44px !important; }

  /* ── Radio / budget / condition cards ── */
  .ropt, .bopt { min-height: 52px !important; align-items: center; }

  /* ── Text inputs / selects ── */
  .inp      { min-height: 48px !important; padding: 10px 12px !important; }
  .sel      { min-height: 48px !important; padding: 10px 12px !important; }
  .phone-wrap { min-height: 48px; }
  .cc-btn   { min-height: 48px !important; padding: 0 10px !important; }

  /* ── WhatsApp / Viber toggle buttons ── */
  .app-toggle     { width: 34px !important; height: 34px !important; }
  .app-toggle svg { width: 17px !important; height: 17px !important; }

  /* ── Yes / No toggles: full width, taller ── */
  .yn-toggle { width: 100%; }
  .yn-opt    { min-height: 52px !important; font-size: 15px !important; flex: 1; }

  /* ── Parking card (anathesi) ── */
  .parking-card { padding: 12px 14px !important; }

  /* ── Expenses checklist (anathesi) ── */
  .expense-checkbox-item { min-height: 44px !important; }

  /* ── Confirmation / success screen ── */
  .okbox   { padding: 32px 16px !important; }
  .ok-ref  { display: block !important; text-align: center; }
  .ok-ref span {
    font-size:   20px  !important;
    font-weight: 700   !important;
    display:     block !important;
    margin-top:  6px   !important;
  }
  .ok-meta { flex-direction: column !important; align-items: center !important; gap: 8px !important; }
  #copy-ref-btn { display: inline-flex !important; }

  /* ── Restore-progress banner: stack vertically on mobile ── */
  .restore-banner { flex-wrap: wrap; padding: 10px 14px; gap: 8px; }
}