/* ============================================================
 * Fabavio self-serve ads — page styles (2026-09-24, v=20260924t)
 * Loaded directly (not minified): /css/fb-ads.css?v=20260924t
 * ============================================================ */

/* ---------- Ads manager pages ---------- */
.fbads-page { max-width: 720px; margin: 0 auto; padding: 16px 16px 96px; color: #e8eaed; }
.fbads-header { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.fbads-back { font-size: 30px; line-height: 1; color: #e8eaed; text-decoration: none; width: 36px; }
.fbads-title { font-size: 20px; font-weight: 700; margin: 0; flex: 1; }

.fbads-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    padding: 9px 16px; border-radius: 999px; font-weight: 600; font-size: 14px;
    text-decoration: none; border: 1px solid transparent; cursor: pointer; white-space: nowrap; }
.fbads-btn-primary { background: #1877f2; color: #fff; }
.fbads-btn-primary:hover { background: #1466d6; color: #fff; }
.fbads-btn-primary:disabled { opacity: .55; cursor: wait; }
.fbads-btn-ghost { background: rgba(255,255,255,.08); color: #e8eaed; border-color: rgba(255,255,255,.14); }
.fbads-btn-danger-ghost { background: transparent; color: #ff8a80; border-color: rgba(255,138,128,.35); }
.fbads-btn-block { display: flex; width: 100%; margin-top: 12px; padding: 13px; font-size: 16px; }

.fbads-alert { padding: 12px 14px; border-radius: 12px; margin-bottom: 14px; font-size: 14px; }
.fbads-alert-success { background: rgba(46,160,67,.15); border: 1px solid rgba(46,160,67,.4); color: #7ee787; }
.fbads-alert-error { background: rgba(248,81,73,.12); border: 1px solid rgba(248,81,73,.4); color: #ff9d97; }

.fbads-walletbar { display: flex; align-items: center; justify-content: space-between; gap: 12px;
    background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.09);
    border-radius: 14px; padding: 12px 14px; margin-bottom: 18px; }
.fbads-wallet-label { font-size: 12px; color: #9aa0a6; }
.fbads-wallet-amount { font-size: 20px; font-weight: 700; }

.fbads-sec-head { font-size: 16px; font-weight: 700; margin: 22px 0 10px; }
.fbads-empty { background: rgba(255,255,255,.04); border: 1px dashed rgba(255,255,255,.15);
    border-radius: 14px; padding: 22px; text-align: center; color: #9aa0a6; }

.fbads-cards { display: grid; gap: 12px; }
.fbads-card { background: rgba(255,255,255,.045); border: 1px solid transparent;
    border-radius: 16px; padding: 14px; }
.fbads-card-slim { padding: 12px 14px; }
.fbads-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.fbads-card-name { font-weight: 700; font-size: 15px; }
.fbads-card-sub { font-size: 13px; color: #9aa0a6; margin-top: 2px; }
.fbads-muted { color: #9aa0a6; font-weight: 400; }
.fbads-pill { font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: 999px; text-transform: uppercase; letter-spacing: .4px; }
.fbads-pill-live { background: rgba(46,160,67,.2); color: #7ee787; }
.fbads-pill-approved { background: rgba(24,119,242,.2); color: #79b8ff; }
.fbads-pill-paused { background: rgba(210,153,34,.2); color: #e3b341; }
.fbads-pill-completed { background: rgba(154,160,166,.2); color: #c4c7c5; }
.fbads-pill-ended { background: rgba(154,160,166,.2); color: #c4c7c5; }
.fbads-pill-rejected { background: rgba(248,81,73,.2); color: #ff9d97; }
.fbads-pill-pending { background: rgba(210,153,34,.2); color: #e3b341; }
.fbads-pill-scheduled { background: rgba(24,119,242,.2); color: #79b8ff; }

.fbads-stats { display: flex; gap: 18px; flex-wrap: wrap; margin-bottom: 8px; }
.fbads-stat { display: flex; flex-direction: column; }
.fbads-stat-v { font-size: 17px; font-weight: 700; }
.fbads-stat-l { font-size: 11px; color: #9aa0a6; }
.fbads-card-meta { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; color: #9aa0a6; margin-bottom: 10px; }
.fbads-card-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.fbads-card-actions form { margin: 0; }
.fbads-fineprint { font-size: 12px; color: #9aa0a6; margin-top: 20px; line-height: 1.55; }

/* ---------- Forms ---------- */
.fbads-form { display: grid; gap: 14px; }
.fbads-field { display: grid; gap: 6px; }
.fbads-label { font-size: 13px; font-weight: 600; color: #c4c7c5; }
.fbads-field input[type="text"], .fbads-field input[type="url"],
.fbads-field input[type="number"], .fbads-field textarea {
    background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14);
    border-radius: 12px; padding: 11px 13px; color: #e8eaed; font-size: 15px; width: 100%; }
.fbads-field input:focus { outline: none; border-color: #1877f2; }
.fbads-hint { font-size: 12px; color: #9aa0a6; }
.fbads-err { font-size: 13px; color: #ff9d97; }
.fbads-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.fbads-radios { display: grid; gap: 8px; }
.fbads-radio { display: flex; gap: 10px; align-items: flex-start; cursor: pointer;
    background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1);
    border-radius: 12px; padding: 11px 13px; font-size: 14px; }
.fbads-radio input { margin-top: 2px; accent-color: #1877f2; }

.fbads-upload { border: 1px dashed rgba(255,255,255,.25); border-radius: 14px;
    padding: 20px; text-align: center; background: rgba(255,255,255,.03); }
.fbads-upload input[type="file"] { margin-bottom: 10px; color: #c4c7c5; }
.fbads-upload-hint { font-size: 13px; color: #9aa0a6; }
.fbads-upload-preview { margin-top: 10px; }
.fbads-upload-progress { height: 6px; background: rgba(255,255,255,.1); border-radius: 999px; margin-top: 10px; overflow: hidden; }
.fbads-upload-bar { height: 100%; width: 0; background: #1877f2; border-radius: 999px; transition: width .2s; }

.fbads-boost-target { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.09);
    border-radius: 14px; padding: 12px 14px; margin-bottom: 16px; }
.fbads-boost-target-title { font-weight: 700; font-size: 15px; }
.fbads-boost-target-sub { font-size: 13px; color: #9aa0a6; margin-top: 4px; }

.fbads-packages { display: grid; gap: 10px; }
.fbads-package { display: flex; gap: 12px; cursor: pointer; background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.1); border-radius: 14px; padding: 13px 14px; }
.fbads-package input { margin-top: 3px; accent-color: #1877f2; }
.fbads-package:has(input:checked) { border-color: #1877f2; background: rgba(24,119,242,.12); }
.fbads-package-premium { border-color: rgba(210,153,34,.45); }
.fbads-package-name { font-weight: 700; font-size: 15px; }
.fbads-package-desc { font-size: 13px; color: #9aa0a6; margin: 4px 0; }
.fbads-package-meta { font-size: 13px; font-weight: 600; }

.fbads-boost-target { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.09);
    border-radius: 14px; padding: 12px 14px; margin-bottom: 16px; }

/* ---------- Sponsored feed cards ---------- */
.fbads-sponsored-post { border: 1px solid rgba(255,255,255,.1); border-radius: 16px; overflow: hidden;
    background: rgba(255,255,255,.03); margin: 0; }
.fbads-sponsored-top { border-color: rgba(210,153,34,.5); }
.fbads-sponsored-head { display: flex; align-items: center; gap: 8px; padding: 10px 14px; }
.fbads-sponsored-pill { font-size: 10px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase;
    background: rgba(24,119,242,.18); color: #79b8ff; border: 1px solid rgba(24,119,242,.45);
    padding: 3px 9px; border-radius: 999px; }
.fbads-sponsored-sub { font-size: 12px; color: #9aa0a6; }
.fbads-sponsored-link { display: block; text-decoration: none; color: inherit; }
.fbads-sponsored-media { width: 100%; max-height: 420px; object-fit: cover; display: block; background: #000; }
.fbads-sponsored-body { padding: 12px 14px 14px; }
.fbads-sponsored-headline { font-size: 15px; font-weight: 600; margin-bottom: 2px; }
.fbads-sponsored-advertiser { font-size: 12px; color: #9aa0a6; margin-bottom: 10px; }
.fbads-sponsored-cta { display: inline-block; background: #1877f2; color: #fff; font-weight: 700;
    font-size: 14px; padding: 9px 20px; border-radius: 999px; }

/* ---------- Sponsored reels slide ---------- */
.fbads-reel-slide { position: relative; }
.fbads-reel-cta { position: absolute; left: 12px; right: 12px; bottom: 86px; z-index: 5;
    display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.fbads-reel-headline { font-size: 14px; font-weight: 600; text-shadow: 0 1px 6px rgba(0,0,0,.7); }
.fbads-reel-btn { background: #1877f2; color: #fff; font-weight: 700; font-size: 13px;
    padding: 8px 18px; border-radius: 999px; text-decoration: none; white-space: nowrap; }
.fbads-reel-pill { position: absolute; top: 14px; left: 12px; z-index: 5; }