/* ============================================================
   TextTV Sync Pro — Frontend Styles v2.1.0
   Used by Elementor widgets AND built-in templates
   ============================================================ */

/* ── Variables ─────────────────────────────────────────────── */
:root {
    --ttv-bg:        #0f1117;
    --ttv-bg2:       #1a1d27;
    --ttv-bg3:       #23263a;
    --ttv-border:    #2a2d3a;
    --ttv-text:      #e2e8f0;
    --ttv-muted:     #8892a4;
    --ttv-accent:    #00d4ff;
    --ttv-radius:    10px;
    --ttv-font:      'Courier New', Courier, monospace;
}

/* ── Archive / Category grid ───────────────────────────────── */
.ttv-archive-wrap          { max-width: 1200px; margin: 0 auto; padding: 32px 20px; }
.ttv-archive-header        { margin-bottom: 32px; padding-bottom: 20px; border-bottom: 1px solid var(--ttv-border); }
.ttv-archive-title         { font-size: 28px; font-weight: 800; color: var(--ttv-text); margin: 0 0 6px; font-family: var(--ttv-font); }
.ttv-archive-subtitle      { color: var(--ttv-muted); font-size: 14px; }
.ttv-archive-meta          { display: flex; gap: 20px; align-items: center; margin-top: 12px; flex-wrap: wrap; }
.ttv-archive-badge         { display: inline-block; padding: 3px 14px; border-radius: 20px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: #fff; }

.ttv-posts-grid            { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 20px; }

/* ── Post Card (archive) ───────────────────────────────────── */
.ttv-card                  { background: var(--ttv-bg); border: 1px solid var(--ttv-border); border-radius: var(--ttv-radius); overflow: hidden; transition: transform .2s, box-shadow .2s; display: flex; flex-direction: column; font-family: var(--ttv-font); }
.ttv-card:hover            { transform: translateY(-3px); box-shadow: 0 8px 30px rgba(0,0,0,.4); }
.ttv-card-top              { height: 4px; }
.ttv-card-body             { padding: 20px; flex: 1; }
.ttv-card-num              { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--ttv-muted); margin-bottom: 6px; }
.ttv-card-title            { font-size: 16px; font-weight: 700; color: var(--ttv-text); margin-bottom: 10px; line-height: 1.4; }
.ttv-card-excerpt          { font-size: 13px; color: var(--ttv-muted); line-height: 1.7; }
.ttv-card-foot             { padding: 14px 20px; border-top: 1px solid var(--ttv-border); display: flex; justify-content: space-between; align-items: center; }
.ttv-card-date             { font-size: 11px; color: var(--ttv-muted); }
.ttv-card-link             { font-size: 12px; font-weight: 600; text-decoration: none; padding: 4px 12px; border-radius: 5px; color: #fff; transition: opacity .2s; }
.ttv-card-link:hover       { opacity: .85; }
.ttv-card-breaking         { display: inline-block; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; background: #e74c3c; color: #fff; padding: 2px 8px; border-radius: 4px; margin-bottom: 6px; }

/* ── Single post layout ────────────────────────────────────── */
.ttv-single-wrap           { max-width: 900px; margin: 0 auto; padding: 40px 20px; font-family: var(--ttv-font); }
.ttv-single-hero           { background: var(--ttv-bg); border: 1px solid var(--ttv-border); border-radius: var(--ttv-radius); padding: 30px; margin-bottom: 24px; }
.ttv-single-hero-top       { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; }
.ttv-single-page-num       { font-size: 48px; font-weight: 900; line-height: 1; }
.ttv-single-hero-info      { flex: 1; }
.ttv-single-title          { font-size: 22px; font-weight: 800; color: var(--ttv-text); margin: 0 0 6px; }
.ttv-single-excerpt        { font-size: 14px; color: var(--ttv-muted); line-height: 1.7; }
.ttv-single-meta-bar       { display: flex; gap: 16px; flex-wrap: wrap; padding-top: 16px; border-top: 1px solid var(--ttv-border); }
.ttv-single-meta-item      { font-size: 12px; color: var(--ttv-muted); }
.ttv-single-meta-item strong { color: var(--ttv-text); }

.ttv-single-content-box    { background: var(--ttv-bg); border: 1px solid var(--ttv-border); border-radius: var(--ttv-radius); padding: 24px; margin-bottom: 20px; }
.ttv-single-section-title  { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--ttv-muted); margin-bottom: 14px; }
.ttv-single-lines          { list-style: decimal; padding-left: 22px; margin: 0; }
.ttv-single-lines li        { font-size: 14px; color: var(--ttv-text); padding: 5px 0; border-bottom: 1px solid var(--ttv-border); line-height: 1.6; }
.ttv-single-lines li:last-child { border-bottom: none; }
.ttv-single-plain-pre      { background: var(--ttv-bg2); border-radius: 6px; padding: 16px; font-size: 13px; color: #a0aec0; white-space: pre-wrap; word-break: break-word; margin: 0; line-height: 1.7; }

.ttv-single-nav            { display: flex; gap: 12px; margin-bottom: 20px; }
.ttv-single-nav a          { flex: 1; display: flex; align-items: center; gap: 8px; padding: 14px 18px; background: var(--ttv-bg); border: 1px solid var(--ttv-border); border-radius: var(--ttv-radius); text-decoration: none; color: var(--ttv-muted); font-size: 13px; transition: border-color .2s, color .2s; }
.ttv-single-nav a:hover    { color: var(--ttv-text); border-color: var(--ttv-accent); }
.ttv-single-nav .ttv-nav-num { font-size: 20px; font-weight: 800; }
.ttv-single-nav .ttv-nav-label { font-size: 10px; text-transform: uppercase; letter-spacing: .06em; }
.ttv-single-nav .ttv-nav-prev { justify-content: flex-start; }
.ttv-single-nav .ttv-nav-next { justify-content: flex-end; text-align: right; }

.ttv-source-link           { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; text-decoration: none; color: var(--ttv-muted); border: 1px solid var(--ttv-border); border-radius: 6px; padding: 6px 14px; transition: color .2s, border-color .2s; }
.ttv-source-link:hover     { color: var(--ttv-accent); border-color: var(--ttv-accent); }

/* ── Elementor Widget: TextTV Pages List ──────────────────── */
.ttv-widget-wrap           { font-family: var(--ttv-font); }
.ttv-widget-header         { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.ttv-widget-title          { font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--ttv-muted); }
.ttv-widget-viewall        { font-size: 12px; font-weight: 600; text-decoration: none; color: var(--ttv-accent); }
.ttv-widget-list           { display: flex; flex-direction: column; gap: 10px; }
.ttv-widget-item           { background: var(--ttv-bg); border: 1px solid var(--ttv-border); border-radius: var(--ttv-radius); overflow: hidden; display: flex; flex-direction: column; transition: border-color .2s; }
.ttv-widget-item:hover     { border-color: currentColor; }
.ttv-widget-item-top       { height: 3px; }
.ttv-widget-item-body      { padding: 14px 16px; }
.ttv-widget-item-num       { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--ttv-muted); margin-bottom: 4px; }
.ttv-widget-item-title     { font-size: 15px; font-weight: 700; color: var(--ttv-text); margin-bottom: 6px; }
.ttv-widget-item-excerpt   { font-size: 12px; color: var(--ttv-muted); line-height: 1.6; }
.ttv-widget-item-foot      { padding: 10px 16px; border-top: 1px solid var(--ttv-border); display: flex; justify-content: space-between; align-items: center; }
.ttv-widget-item-date      { font-size: 11px; color: var(--ttv-muted); }
.ttv-widget-item-link      { font-size: 11px; font-weight: 600; text-decoration: none; padding: 3px 10px; border-radius: 4px; color: #fff; }

/* ── Elementor Widget: Single Page View ──────────────────── */
.ttv-page-widget           { font-family: var(--ttv-font); background: var(--ttv-bg); border: 1px solid var(--ttv-border); border-radius: var(--ttv-radius); overflow: hidden; }
.ttv-page-widget-top       { height: 4px; }
.ttv-page-widget-body      { padding: 24px; }
.ttv-page-widget-num       { font-size: 36px; font-weight: 900; line-height: 1; margin-bottom: 8px; }
.ttv-page-widget-title     { font-size: 18px; font-weight: 700; color: var(--ttv-text); margin-bottom: 8px; }
.ttv-page-widget-excerpt   { font-size: 13px; color: var(--ttv-muted); line-height: 1.7; margin-bottom: 16px; }
.ttv-page-widget-lines     { list-style: decimal; padding-left: 20px; margin: 0; }
.ttv-page-widget-lines li  { font-size: 13px; color: var(--ttv-text); padding: 4px 0; border-bottom: 1px solid var(--ttv-border); }
.ttv-page-widget-lines li:last-child { border-bottom: none; }
.ttv-page-widget-meta      { display: flex; gap: 16px; flex-wrap: wrap; padding-top: 14px; border-top: 1px solid var(--ttv-border); margin-top: 16px; font-size: 11px; color: var(--ttv-muted); }

/* ── Elementor Widget: Breaking News Ticker ──────────────── */
.ttv-ticker-wrap           { background: var(--ttv-bg); border: 1px solid var(--ttv-border); border-radius: var(--ttv-radius); overflow: hidden; font-family: var(--ttv-font); }
.ttv-ticker-label          { display: inline-flex; align-items: center; padding: 10px 16px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: #fff; white-space: nowrap; }
.ttv-ticker-track-wrap     { overflow: hidden; padding: 10px 0; }
.ttv-ticker-track          { display: flex; gap: 40px; animation: ttv-ticker 30s linear infinite; white-space: nowrap; }
.ttv-ticker-track:hover    { animation-play-state: paused; }
.ttv-ticker-item           { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ttv-text); text-decoration: none; flex-shrink: 0; }
.ttv-ticker-item-num       { font-weight: 700; }
.ttv-ticker-sep            { color: var(--ttv-border); }
@keyframes ttv-ticker {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* ── Elementor Widget: Stats Bar ─────────────────────────── */
.ttv-stats-bar             { display: flex; gap: 12px; flex-wrap: wrap; font-family: var(--ttv-font); }
.ttv-stat-box              { flex: 1; min-width: 120px; background: var(--ttv-bg); border: 1px solid var(--ttv-border); border-radius: var(--ttv-radius); padding: 16px; text-align: center; }
.ttv-stat-num              { font-size: 28px; font-weight: 900; line-height: 1; margin-bottom: 4px; }
.ttv-stat-label            { font-size: 11px; text-transform: uppercase; letter-spacing: .07em; color: var(--ttv-muted); }

/* ── Pagination ───────────────────────────────────────────── */
.ttv-pagination            { display: flex; gap: 8px; justify-content: center; padding: 24px 0; flex-wrap: wrap; }
.ttv-pagination a,
.ttv-pagination span       { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 8px; border: 1px solid var(--ttv-border); font-size: 13px; font-family: var(--ttv-font); text-decoration: none; color: var(--ttv-muted); transition: all .2s; }
.ttv-pagination a:hover    { color: var(--ttv-text); border-color: var(--ttv-accent); }
.ttv-pagination .current   { background: var(--ttv-accent); border-color: var(--ttv-accent); color: #000; font-weight: 700; }

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 640px) {
    .ttv-posts-grid        { grid-template-columns: 1fr; }
    .ttv-single-nav        { flex-direction: column; }
    .ttv-stats-bar         { flex-direction: column; }
    .ttv-single-page-num   { font-size: 36px; }
}