/* awayyy mockups — iPhone frame helper
 * iPhone 14/15 dimensions: 393x852pt, safe area top 59pt + bottom 34pt
 * Aggiornato: support per edge-to-edge photo + floating header/tab-bar
 */

.iphone-frame {
  width: 393px;
  height: 852px;
  background: var(--surface-canvas);
  border-radius: 48px;
  overflow: hidden;
  box-shadow:
    0 0 0 8px #1A1A1A,
    0 0 0 10px #2A2A2A,
    0 30px 80px rgba(0, 0, 0, 0.15);
  margin: 40px auto;
  position: relative;
  display: flex;
  flex-direction: column;
}

/* iPhone notch (Dynamic Island simulation) */
.iphone-frame::before {
  content: '';
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  width: 120px;
  height: 32px;
  background: #000;
  border-radius: var(--r-full);
  z-index: 100;
  pointer-events: none;
}

/* ─────────────────────────────────────────
 * MODE 1 — Standard (sicuro per surface UI)
 * Safe area top + bottom hanno background, content sotto
 * ───────────────────────────────────────── */

.safe-area-top {
  height: 59px;
  flex-shrink: 0;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding: 0 24px 4px;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
  background: var(--surface-canvas);
  z-index: 50;
  position: relative;
}

.safe-area-bottom {
  height: 34px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-canvas);
  z-index: 50;
  position: relative;
}
.safe-area-bottom::after {
  content: '';
  width: 134px;
  height: 5px;
  background: var(--text-primary);
  border-radius: var(--r-full);
}

/* Quando floating tab bar è attivo, il home indicator deve restare sopra il tab bar */
.iphone-frame:has(.floating-tab-bar) .safe-area-bottom {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: transparent;
  z-index: 60; /* sopra il floating tab bar (z-index: 40) */
  pointer-events: none;
}
.iphone-frame:has(.floating-tab-bar) .safe-area-bottom::after {
  background: var(--text-primary);
}

/* Main content scrollable area */
.iphone-content {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  display: flex;
  flex-direction: column;
}

/* ─────────────────────────────────────────
 * MODE 2 — Edge-to-edge photo (foto a tutta schermata)
 * Foto fa da sfondo + safe area è transparent overlay sopra
 * ───────────────────────────────────────── */

.iphone-frame--immersive {
  background: var(--text-primary); /* fallback nero dietro foto */
}

.iphone-frame--immersive .safe-area-top {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  background: transparent;
  color: #FFFFFF; /* status bar text bianco quando sopra foto */
  z-index: 50;
  pointer-events: none;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}

.iphone-frame--immersive .safe-area-bottom {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: transparent;
  z-index: 50;
}
.iphone-frame--immersive .safe-area-bottom::after {
  background: rgba(255, 255, 255, 0.6); /* home indicator semi-trasparente */
}

.iphone-frame--immersive .iphone-content {
  position: absolute;
  inset: 0;
  overflow-y: auto;
}

/* Background photo full-screen (incluso safe area top/bottom) */
.bg-photo-full {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-color: var(--text-primary); /* fallback */
  z-index: 0;
}

/* ─────────────────────────────────────────
 * Floating header (sopra foto o sopra content)
 * Bordi arrotondati matched al device frame
 * ───────────────────────────────────────── */

.floating-header {
  position: absolute;
  top: calc(59px + 8px); /* sotto safe area + 8px */
  left: 8px;
  right: 8px;
  background: var(--surface-raised);
  border-radius: 36px; /* device 48 - margin 8 = 40 (curve parallele) */
  padding: 14px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  z-index: 40;
  transition: all var(--duration-base) var(--easing-default);
}

.floating-header--scrolled {
  /* quando user scrolla, logo+bell spariscono — solo search resta */
  padding: 8px 16px;
}

/* ─────────────────────────────────────────
 * Floating tab bar (bottom navigation)
 * Bordi arrotondati matched al device frame
 * ───────────────────────────────────────── */

.floating-tab-bar {
  position: absolute;
  bottom: 5px;
  left: 5px;
  right: 5px;
  background: var(--surface-raised);
  border-radius: 43px;
  padding: 6px 12px 22px; /* ridotto: meno alto, meno tozzo */
  display: flex;
  box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.12);
  z-index: 40;
}

.floating-tab-bar .tab {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 6px 0;
  color: var(--text-secondary);
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 500;
  transition: color var(--duration-fast);
}
.floating-tab-bar .tab.active {
  color: var(--text-primary);
}
.floating-tab-bar .tab.active .tab-icon {
  background: var(--accent-primary);
  color: var(--text-on-accent);
}
.floating-tab-bar .tab-icon {
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-md);
  font-size: 14px;
  transition: background var(--duration-fast);
}

/* ─────────────────────────────────────────
 * Floating content card (per Onboarding pattern)
 * Card bianca floating sopra foto bg, bordi matched al device
 * ───────────────────────────────────────── */

.floating-content-card {
  position: absolute;
  bottom: 5px;
  left: 5px;
  right: 5px;
  background: var(--surface-raised);
  border-radius: 43px; /* device 48 - margin 5 = 43 */
  padding: 32px 28px 28px;
  box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.12);
  z-index: 30;
  max-height: 60%;
  overflow-y: auto;
}

/* Status bar mock content */
.status-bar-time { font-family: var(--font-display); font-size: 16px; font-weight: 600; }
.status-bar-icons { display: flex; gap: 6px; align-items: center; font-size: 14px; }

/* Mockup wrapper page styles */
.mockup-page {
  min-height: 100vh;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 0 20px;
}

/* Mockup label outside frame — cliccabile per tornare all'index */
.mockup-label {
  position: fixed;
  top: 20px;
  left: 20px;
  background: var(--surface-raised);
  padding: 8px 14px;
  border-radius: var(--r-md);
  font-family: var(--font-display);
  font-size: var(--fs-label);
  font-weight: 500;
  color: var(--text-secondary);
  box-shadow: var(--shadow-1);
  z-index: 1000;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all var(--duration-fast);
}
.mockup-label:hover, .mockup-label:active {
  color: var(--text-primary);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  transform: translateY(-1px);
}

/* ─────────────────────────────────────────
 * RESPONSIVE — su mobile reale, frame iPhone scompare
 * App prende tutto lo schermo (sembra app nativa)
 * ───────────────────────────────────────── */

@media (max-width: 500px) {
  body {
    background: var(--surface-canvas);
    padding: 0;
    margin: 0;
  }
  .mockup-page {
    padding: 0;
    min-height: 100vh;
    align-items: stretch;
  }
  .iphone-frame {
    width: 100vw;
    height: 100vh;
    height: 100dvh; /* iOS Safari fix per address bar */
    max-width: 100vw;
    border-radius: 0;
    box-shadow: none;
    margin: 0;
  }
  .iphone-frame::before {
    display: none; /* nascondi notch finto, l'iPhone vero ha già il suo */
  }
  /* Status bar finta nascosta — iPhone vero mostra la sua nativa */
  .safe-area-top {
    height: env(safe-area-inset-top, 47px);
    padding: 0;
    background: transparent;
    color: transparent;
    pointer-events: none;
  }
  .safe-area-top * { display: none; }

  .safe-area-bottom {
    height: env(safe-area-inset-bottom, 34px);
    background: transparent;
  }
  .safe-area-bottom::after { display: none; }

  /* Mockup label: piccola in alto destra invece che fixed */
  .mockup-label {
    top: env(safe-area-inset-top, 12px);
    left: auto;
    right: 12px;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    font-size: 11px;
    padding: 6px 10px;
    z-index: 9999;
  }

  /* Adatta floating header/tabbar al safe area iOS reale */
  .home-header {
    top: calc(env(safe-area-inset-top, 47px) + 8px) !important;
  }
  .floating-header {
    top: calc(env(safe-area-inset-top, 47px) + 8px) !important;
  }
  .floating-tab-bar {
    bottom: calc(env(safe-area-inset-bottom, 8px) + 4px) !important;
  }
  .diary-header {
    top: calc(env(safe-area-inset-top, 47px) + 8px) !important;
  }
  .welcome-logo-wrap {
    top: calc(env(safe-area-inset-top, 47px) + 24px) !important;
  }
}

/* Logo image utility */
.logo-img {
  height: 22px;
  width: auto;
  display: block;
}
.logo-img--md { height: 24px; }
.logo-img--lg { height: 32px; }
.logo-img--xl { height: 48px; }