/*
 * preview-styles.css — RaffleTracker Live Phone Preview
 *
 * DEPLOYMENT: Copy this file (unchanged) into:
 *   partner_deploy/preview-styles.css
 *
 * USAGE: In each partner form HTML file, replace the inline
 * preview CSS block with:
 *   <link rel="stylesheet" href="preview-styles.css" />
 *
 * Covers: post_submit.html, post_submit_welcome.html
 * Does NOT apply to: admin_deploy (uses its own preview system)
 *
 * Last synced: May 7, 2026
 * Source truth: partner_deploy/post_submit.html preview CSS block
 */

/* ── Panel & frame ── */
.preview-panel{position:sticky;top:24px;-webkit-overflow-scrolling:touch}
@media(max-width:900px){.preview-panel{position:relative !important;top:auto !important;margin-top:20px;-webkit-transform:translateZ(0)}}
.preview-label{font-size:11px;font-weight:800;color:var(--muted2);text-transform:uppercase;letter-spacing:1.5px;margin-bottom:10px;text-align:center}
.phone-frame-wrap{display:flex;justify-content:center}
.phone-frame{background:var(--bg);border:2px solid rgba(30,41,59,.7);border-radius:28px;padding:12px;box-shadow:0 24px 60px rgba(0,0,0,.5),inset 0 1px 0 rgba(51,65,85,.3);overflow:hidden;width:100%;max-width:340px;box-sizing:border-box}
.phone-notch{width:80px;height:4px;border-radius:4px;background:rgba(30,41,59,.6);margin:0 auto 12px}

/* ── Card preview ── */
.prev-card{background:rgba(15,23,42,.8);border:1.5px solid rgba(30,41,59,.8);border-top-color:rgba(51,65,85,.5);border-left-color:rgba(45,58,77,.4);border-right-color:rgba(12,19,34,.7);border-bottom-color:rgba(7,13,24,.8);border-radius:16px;padding:12px;position:relative;box-shadow:3px 5px 12px rgba(0,0,0,.4);margin-bottom:12px}
.prev-card-flame{position:absolute;top:8px;right:8px}
.prev-card-row{display:flex;gap:10px}
.prev-card-thumb{width:70px;height:70px;border-radius:10px;flex-shrink:0;overflow:hidden;background:rgba(30,41,59,.5);border:1px solid rgba(30,41,59,.6);display:grid;place-items:center}
.prev-card-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.prev-card-info{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center}
.prev-card-title{font-size:14px;font-weight:700;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-height:18px}
.prev-card-prize{font-size:12px;font-weight:600;color:var(--orange);margin-top:2px;min-height:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.prev-card-host{font-size:11px;color:var(--blue);margin-top:1px;text-decoration:underline;min-height:14px}
.prev-card-meta{display:flex;align-items:center;gap:4px;margin-top:4px;font-size:10px;color:var(--muted2)}
.prev-card-end{font-size:10px;color:var(--muted);margin-top:3px;min-height:14px}

/* ── Modal preview ── */
.prev-modal{background:rgba(15,23,42,.95);border:1.5px solid rgba(30,41,59,.8);border-top-color:rgba(51,65,85,.5);border-radius:20px 20px 0 0;padding:14px;box-shadow:0 -8px 30px rgba(0,0,0,.4)}
.prev-modal-title{font-size:15px;font-weight:800;color:var(--text);margin-bottom:4px;min-height:18px;line-height:1.2}
.prev-modal-host-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.prev-modal-host{display:flex;align-items:center;gap:8px}
.prev-modal-logo{width:28px;height:28px;border-radius:50%;background:rgba(30,41,59,.7);display:grid;place-items:center;font-size:10px;font-weight:900;color:var(--orange);overflow:hidden;flex-shrink:0;border:1px solid rgba(30,41,59,.8)}
.prev-modal-logo img{width:100%;height:100%;object-fit:cover}
.prev-modal-host-name{font-size:12px;color:var(--blue);font-weight:600}
.prev-modal-winit{display:flex;align-items:center;gap:4px;padding:6px 12px;background:var(--orange);border-radius:10px;font-size:11px;font-weight:800;color:#fff;position:relative;overflow:hidden;box-shadow:2px 4px 8px rgba(0,0,0,.3)}
.prev-modal-winit::after{content:'';position:absolute;top:0;left:-100%;width:50%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.15),transparent);animation:shimmer 2s ease infinite}
.prev-modal-prize{font-size:11px;font-weight:600;color:var(--orange);margin-bottom:6px;min-height:14px}
.prev-modal-img{width:100%;min-height:80px;max-height:140px;border-radius:12px;overflow:hidden;background:rgba(30,41,59,.4);margin-bottom:6px;display:flex;align-items:center;justify-content:center}
.prev-modal-img img{width:100%;height:100%;object-fit:cover;display:block}

/* ── Gallery preview ── */
.prev-gallery{display:flex;gap:6px;overflow-x:auto;margin-bottom:6px;padding:2px 0}
.prev-gallery-item{width:60px;height:40px;border-radius:6px;background:rgba(30,41,59,.4);flex-shrink:0;overflow:hidden;border:1px solid rgba(30,41,59,.5)}
.prev-gallery-item img{width:100%;height:100%;object-fit:cover;display:block}

/* ── YouTube preview ── */
.prev-modal-yt{width:100%;height:70px;border-radius:10px;overflow:hidden;background:rgba(0,0,0,.6);margin-bottom:6px;display:none;align-items:center;justify-content:center;position:relative}
.prev-modal-yt img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
.prev-modal-yt .yt-play{width:32px;height:32px;border-radius:50%;background:rgba(255,0,0,.85);display:grid;place-items:center;position:relative;z-index:1}
.prev-modal-yt .yt-play span{color:#fff;font-size:12px;margin-left:2px}
.prev-modal-desc{font-size:10px;color:var(--muted);line-height:1.5;margin-bottom:6px;min-height:14px}

/* ── Countdown preview ── */
.prev-countdown{display:flex;gap:6px;margin-bottom:8px}
.prev-cd-block{flex:1;text-align:center;padding:6px 4px;background:rgba(15,23,42,.7);border:1px solid rgba(30,41,59,.6);border-radius:8px}
.prev-cd-num{font-size:16px;font-weight:900;color:var(--orange);line-height:1}
.prev-cd-lbl{font-size:7px;font-weight:800;color:var(--muted2);text-transform:uppercase;letter-spacing:.5px;margin-top:2px}

/* ── Modal bottom bar ── */
.prev-modal-bar{display:flex;align-items:center;justify-content:space-between;padding-top:6px;border-top:1px solid rgba(30,41,59,.6)}
.prev-modal-date{font-size:9px;color:var(--muted);font-weight:600}
.prev-modal-watchers{display:flex;align-items:center;gap:4px;font-size:9px;color:var(--text2);background:rgba(30,41,59,.5);padding:3px 7px;border-radius:999px}

/* ── Hint text ── */
.prev-hint{text-align:center;font-size:10px;color:var(--muted2);margin-top:8px;font-weight:600}