/*
 * quote-mobile.css
 * ArtEmis BuildFlow — Mobile Responsiveness (≤ 768 px)
 *
 * Applies ONLY on screens ≤ 768 px.
 * Desktop layout in quote.html is completely unchanged.
 *
 * Depends on CSS custom properties defined in quote.html:
 *   --gold, --ink, --ink2, --ink3, --bd, --s2, --gb, --gg, --r, --navy
 */

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

/* ══════════════════════════════════════════════════════════════
   MOBILE RESPONSIVENESS  (≤ 768 px only)
══════════════════════════════════════════════════════════════ */
@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, .ccard, .bopt, .wh, .yn-opt,
  .cnt-btn, .app-toggle, .sel-all-btn, .rb-btn,
  .add-btn, .rrd, .bnx, .bbk, .sn { touch-action: manipulation; }

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

  /* ── 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 quote.html 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; }

  /* ── 4-col financing grid → 2 × 2 ── */
  .g4 { grid-template-columns: 1fr 1fr !important; gap: 8px !important; }

  /* ── 3-col budget grid → single column ── */
  .g3 { grid-template-columns: 1fr !important; gap: 8px !important; }

  /* ── 2-col condition / occupation cards → single column ── */
  .g2 { grid-template-columns: 1fr !important; gap: 8px !important; }

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

  /* ── Work categories: single column ── */
  .wgrid        { grid-template-columns: 1fr !important; gap: 8px !important; }
  .witem > .wh  { min-height: 52px !important; }

  /* ── Sub-panels: suppress inline expansion on mobile ──
        Content is shown in the bottom sheet instead.       ── */
  .witem .sp {
    max-height:     0    !important;
    padding:        0    !important;
    pointer-events: none !important;
    overflow:       hidden !important;
  }
  /* Exception: "Επιπλέον εργασίες" — no sheet, expands inline */
  .witem#w-extra .sp {
    max-height:     5000px            !important;
    padding:        10px 12px 12px   !important;
    pointer-events: auto             !important;
    overflow:       visible          !important;
  }

  /* ── Budget options ── */
  .bopt { min-height: 52px !important; }

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

  /* ── Text inputs ── */
  .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; }

  /* Show only flag + dial code inside the CC button on mobile */
  .cc-btn .cc-name { display: none !important; }

  /* ── Counter +/− buttons ── */
  .cnt-btn { width: 44px !important; height: 44px !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; }

  /* ── File upload drop zone ── */
  .dropzone { min-height: 120px !important; padding: 20px 16px !important; }

  /* ── File preview: single-column horizontal cards ── */
  .file-preview-grid { grid-template-columns: 1fr !important; }
  .fpreview {
    aspect-ratio:   unset        !important;
    flex-direction: row          !important;
    padding:        10px 12px   !important;
    gap:            10px;
    min-height:     64px;
  }
  .fpreview img {
    width:       50px !important;
    height:      50px !important;
    position:    relative !important;
    border-radius: 6px;
    flex-shrink: 0;
    object-fit:  cover;
  }
  .fpreview-overlay {
    position:   relative !important;
    bottom:     auto     !important;
    background: none     !important;
    flex:       1        !important;
    padding:    0        !important;
  }
  .fpreview-name { color: var(--ink2) !important; background: none !important; font-size: 11px !important; }
  .fpreview-rm   { position: absolute !important; top: 6px !important; right: 6px !important; }
  .fpreview-size { position: relative !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; }

  /* ── Scroll-to-top floating button (Step 3 — Εργασίες) ── */
  .scroll-top-btn {
    position:    fixed;
    bottom:      76px;
    right:       14px;
    width:       40px;
    height:      40px;
    border-radius: 50%;
    background:  var(--gold);
    color:       #fff;
    border:      none;
    font-size:   18px;
    cursor:      pointer;
    z-index:     150;
    box-shadow:  0 3px 10px rgba(0, 0, 0, .4);
    display:     none;
    align-items: center;
    justify-content: center;
    touch-action: manipulation;
    line-height: 1;
    font-family: 'Inter', sans-serif;
  }

  /* ── Mobile bottom-sheet overlay ── */
  .mobile-sheet-overlay {
    position: fixed;
    inset:    0;
    background: rgba(0, 0, 0, .55);
    z-index:  200;
    display:  none;
  }
  .mobile-sheet-overlay.open { display: block; }

  /* ── Mobile bottom sheet panel ── */
  .mobile-sheet {
    position:      fixed;
    bottom:        0;
    left:          0;
    right:         0;
    background:    #1a3a2a;
    border-radius: 20px 20px 0 0;
    z-index:       201;
    max-height:    82vh;
    flex-direction: column;
    transform:     translateY(100%);
    transition:    transform .32s cubic-bezier(.4, 0, .2, 1);
    display:       none;
  }
  .mobile-sheet.open { display: flex; transform: translateY(0); }

  .mobile-sheet-handle {
    width:         36px;
    height:        4px;
    background:    rgba(255, 255, 255, .22);
    border-radius: 2px;
    margin:        12px auto 2px;
    flex-shrink:   0;
  }
  .mobile-sheet-hdr {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    padding:         10px 16px;
    border-bottom:   .5px solid var(--bd);
    flex-shrink:     0;
  }
  .mobile-sheet-ttl { font-size: 15px; font-weight: 600; color: var(--ink); }
  .mobile-sheet-x {
    background:   none;
    border:       none;
    color:        var(--ink3);
    font-size:    20px;
    cursor:       pointer;
    padding:      2px 6px;
    line-height:  1;
    touch-action: manipulation;
  }
  .mobile-sheet-body {
    flex:                    1;
    overflow-y:              auto;
    padding:                 14px 16px 4px;
    -webkit-overflow-scrolling: touch;
  }
  /* Sub-panel content moved into the sheet — override suppression */
  .mobile-sheet-body .sp {
    max-height:     none    !important;
    padding:        0       !important;
    pointer-events: auto    !important;
    overflow:       visible !important;
    display:        block   !important;
  }
  .mobile-sheet-ftr {
    padding:      10px 16px;
    border-top:   .5px solid var(--bd);
    flex-shrink:  0;
  }

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