/* ============================================================
   iPhone 15 Pro Preview Frame
   Logical resolution: 393 × 852pt
   Frame adds bezels, notch (Dynamic Island), and home indicator.
   ============================================================ */

.phone-preview-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: sticky;
    top: 1rem;
}

/* ── The phone chassis ───────────────────────────────────── */
.phone-frame {
    position: relative;
    width: 290px;          /* scaled-down width (~0.74x of 393) */
    height: 628px;         /* scaled-down height (~0.74x of 852) */
    border-radius: 40px;
    background: #1a1a1a;
    padding: 12px;
    box-shadow:
        0 0 0 2px #333,           /* inner ring */
        0 0 0 4px #1a1a1a,        /* chassis edge */
        0 8px 40px rgba(0,0,0,.25),
        0 2px 10px rgba(0,0,0,.15);
    /* Titanium-like subtle gradient */
    background: linear-gradient(145deg, #2a2a2e, #1a1a1c);
}

/* ── The screen area ─────────────────────────────────────── */
.phone-screen {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 30px;
    overflow: hidden;
    background: #000;
}

/* ── Dynamic Island (notch) ──────────────────────────────── */
.phone-screen::before {
    content: "";
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    width: 84px;
    height: 22px;
    background: #1a1a1a;
    border-radius: 14px;
    z-index: 10;
}

/* ── Home indicator bar ──────────────────────────────────── */
.phone-screen::after {
    content: "";
    position: absolute;
    bottom: 6px;
    left: 50%;
    transform: translateX(-50%);
    width: 100px;
    height: 4px;
    background: rgba(255,255,255,.25);
    border-radius: 2px;
    z-index: 10;
}

/* ── The iframe fills the screen ─────────────────────────── */
.phone-screen iframe {
    width: 393px;            /* actual iPhone 15 Pro logical width */
    height: 852px;           /* actual iPhone 15 Pro logical height */
    border: none;
    border-radius: 30px;

    /* Scale down to fit within the frame */
    transform: scale(0.678);
    transform-origin: top left;
}

/* ── Side buttons (volume + power) ───────────────────────── */
.phone-frame::before {
    /* Power button — right side */
    content: "";
    position: absolute;
    right: -3px;
    top: 140px;
    width: 3px;
    height: 52px;
    background: linear-gradient(to bottom, #444, #333);
    border-radius: 0 2px 2px 0;
}

.phone-frame::after {
    /* Volume rocker — left side */
    content: "";
    position: absolute;
    left: -3px;
    top: 120px;
    width: 3px;
    height: 44px;
    background: linear-gradient(to bottom, #444, #333);
    border-radius: 2px 0 0 2px;
    box-shadow: 0 40px 0 0 #3a3a3a;  /* second volume button */
}

/* ── Status bar overlay (time/signal) ────────────────────── */
.phone-status-bar {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 38px;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    padding: 0 20px 4px;
    z-index: 11;
    color: #fff;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif;
    font-size: 10px;
    font-weight: 600;
    pointer-events: none;
}

.phone-status-bar .status-left {
    flex: 1;
}

.phone-status-bar .status-right {
    flex: 1;
    text-align: right;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 4px;
}

/* ── Preview navigation / label ──────────────────────────── */
.phone-preview-label {
    margin-top: .75rem;
    font-size: .75rem;
    color: #888;
    text-align: center;
}

.phone-preview-actions {
    margin-top: .5rem;
    display: flex;
    gap: .5rem;
    justify-content: center;
}

.phone-preview-callout {
    margin-top: .75rem;
    max-width: 260px;
    font-size: .7rem;
    line-height: 1.4;
    color: #777;
    text-align: center;
}

.phone-preview-callout .bi-info-circle {
    margin-right: .25rem;
}

/* ── Responsive: hide on small screens ───────────────────── */
/* Hiding is handled by Bootstrap utility classes in the view. */