/**
 * =============================================================================
 * css/OP05_temi.css - TEMI GRAFICI del Doodle "Trova la data" (prefisso OP05T_)
 * Usato da doodle/OP05_landing.php (scelta del tema e anteprima),
 * OP05_data.php (testata a tema per chi risponde) e OP05_gestione.php.
 * Ogni tema e' una classe .OP05T_<tema> che imposta le variabili:
 *   --t1 colore principale, --t2 colore d'accento, --tbg sfondo della testata,
 *   --tsf sfondo leggero della pagina, --ttx colore del testo sulla testata.
 * Temi ed emoji in includes/OP05_temi.php. Mobile first; le decorazioni sono
 * aria-hidden e non intercettano i clic.
 * =============================================================================
 */
.OP05T_classico   { --t1: #15476c; --t2: #007bff; --tbg: linear-gradient(135deg, #15476c 0%, #1f6fa8 100%); --tsf: #f4f7fb; --ttx: #ffffff; }
.OP05T_natale     { --t1: #a3141f; --t2: #1e6b3a; --tbg: linear-gradient(135deg, #a3141f 0%, #c62828 55%, #1e6b3a 100%); --tsf: #fbf3f2; --ttx: #ffffff; }
.OP05T_capodanno  { --t1: #1b1f4a; --t2: #d9a52b; --tbg: radial-gradient(circle at 20% 20%, #3a3f8f 0%, #1b1f4a 55%, #0d0f2b 100%); --tsf: #f3f3f9; --ttx: #ffe9a8; }
.OP05T_compleanno { --t1: #d63384; --t2: #ffb703; --tbg: linear-gradient(135deg, #ff7eb6 0%, #d63384 60%, #ffb703 100%); --tsf: #fff4f9; --ttx: #ffffff; }
.OP05T_festa      { --t1: #6f42c1; --t2: #fd7e14; --tbg: linear-gradient(135deg, #6f42c1 0%, #b14fd1 50%, #fd7e14 100%); --tsf: #f7f3fd; --ttx: #ffffff; }
.OP05T_viaggio    { --t1: #0b7fab; --t2: #f4a259; --tbg: linear-gradient(180deg, #4fc3f7 0%, #0b7fab 65%, #f4d58d 100%); --tsf: #f1f9fd; --ttx: #ffffff; }
.OP05T_cena       { --t1: #7b2d26; --t2: #c9a227; --tbg: linear-gradient(135deg, #5a1f1a 0%, #7b2d26 60%, #a8452f 100%); --tsf: #fbf6f2; --ttx: #fff3d6; }
.OP05T_sport      { --t1: #198754; --t2: #ffc107; --tbg: linear-gradient(135deg, #0f6b3f 0%, #198754 60%, #2fb06a 100%); --tsf: #f1faf5; --ttx: #ffffff; }
.OP05T_emoticon   { --t1: #c77700; --t2: #ff6f3c; --tbg: radial-gradient(circle at 30% 30%, #fff36b 0%, #ffd23f 45%, #ffa62b 100%); --tsf: #fffbea; --ttx: #5a3800; }
.OP05T_matrimonio { --t1: #9c6b7a; --t2: #c9a227; --tbg: linear-gradient(135deg, #f6e6ea 0%, #e9c9d3 55%, #d8b4c0 100%); --tsf: #fdf8f9; --ttx: #5b3a45; }

/* ---------- testata a tema ---------- */
.OP05T_testata { position: relative; overflow: hidden; background: var(--tbg); color: var(--ttx); border-radius: 18px; padding: 34px 20px 28px;
                 text-align: center; margin-bottom: 18px; box-shadow: 0 6px 20px rgba(0, 0, 0, .12); }
.OP05T_sticker { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; width: 84px; height: 84px;
                 border-radius: 50%; background: rgba(255, 255, 255, .92); font-size: 46px; line-height: 1; box-shadow: 0 4px 14px rgba(0, 0, 0, .18);
                 margin-bottom: 10px; transform: rotate(-6deg); }
.OP05T_titolo { position: relative; z-index: 1; font-size: 2rem; font-weight: 800; margin: 4px 0 6px; color: inherit; word-break: break-word;
                text-shadow: 0 2px 6px rgba(0, 0, 0, .18); }
.OP05T_sotto { position: relative; z-index: 1; margin: 0 auto; max-width: 640px; opacity: .95; font-size: 1.02rem; }
.OP05T_matrimonio .OP05T_titolo, .OP05T_matrimonio .OP05T_sotto, .OP05T_emoticon .OP05T_titolo, .OP05T_emoticon .OP05T_sotto { text-shadow: none; }
.OP05T_decori { position: absolute; inset: 0; pointer-events: none; }
.OP05T_deco { position: absolute; font-size: 34px; opacity: .55; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .15)); }
.OP05T_d0 { top: 10px; left: 4%; transform: rotate(-14deg); }
.OP05T_d1 { top: 18px; right: 5%; transform: rotate(12deg); font-size: 40px; }
.OP05T_d2 { bottom: 12px; left: 9%; transform: rotate(10deg); }
.OP05T_d3 { bottom: 8px; right: 12%; transform: rotate(-8deg); font-size: 30px; }
.OP05T_d4 { top: 46%; left: 17%; transform: rotate(18deg); font-size: 26px; opacity: .4; }
.OP05T_d5 { top: 42%; right: 21%; transform: rotate(-16deg); font-size: 26px; opacity: .4; }
.OP05T_capodanno .OP05T_deco, .OP05T_natale .OP05T_deco { opacity: .7; }

/* ---------- pagina dei partecipanti a tema ---------- */
.OP05T_pagina { background: var(--tsf); border-radius: 18px; padding: 14px; }
.OP05T_pagina .OP05D_tab thead th { background: color-mix(in srgb, var(--t1) 10%, #ffffff); color: var(--t1); }
.OP05T_pagina .OP05D_tab th.OP05D_migliore .OP05D_th_data::after { color: var(--t2); }
.OP05T_pagina .AN05V_chiude, .OP05T_pagina .OP05D_istr { color: var(--t1); }
.OP05T_info { list-style: none; padding: 0; margin: -6px 0 14px; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 10px; }
.OP05T_info li { background: #fff; border: 1px solid color-mix(in srgb, var(--t1) 25%, #ffffff); color: var(--t1); border-radius: 999px; padding: 4px 12px; font-size: .85rem; }

/* ---------- selettore del tema (creazione e gestione) ---------- */
.OP05T_temi { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; margin-bottom: 12px; }
.OP05T_tema { border: 2px solid transparent; border-radius: 12px; background: var(--tbg); color: var(--ttx); padding: 10px 6px; cursor: pointer;
              display: flex; flex-direction: column; align-items: center; gap: 4px; font-weight: 700; font-size: .85rem; min-height: 78px;
              box-shadow: 0 2px 6px rgba(0, 0, 0, .1); transition: transform .12s; }
.OP05T_tema:hover { transform: translateY(-2px); }
.OP05T_tema:focus-visible, .OP05T_st:focus-visible { outline: 3px solid rgba(0, 123, 255, .45); outline-offset: 2px; }
.OP05T_tema.OP05T_on { border-color: #ffffff; box-shadow: 0 0 0 3px #ff9900, 0 4px 10px rgba(0, 0, 0, .18); }
.OP05T_tema_em { font-size: 28px; line-height: 1; }
.OP05T_stickers { display: flex; flex-wrap: wrap; gap: 8px; }
.OP05T_st { width: 52px; height: 52px; border-radius: 12px; border: 2px solid #e3e8ee; background: #fff; font-size: 28px; line-height: 1; cursor: pointer; padding: 0; }
.OP05T_st.OP05T_on { border-color: #ff9900; background: #fff4e0; transform: scale(1.06); }
.OP05T_anteprima { margin-top: 14px; }
.OP05T_anteprima .OP05T_testata { margin-bottom: 0; padding: 24px 16px 20px; }
.OP05T_anteprima .OP05T_titolo { font-size: 1.4rem; }
.OP05T_nota { font-size: .85rem; color: #6c757d; margin: 0 0 10px; }

@media (max-width: 640px) {
    .OP05T_titolo { font-size: 1.5rem; }
    .OP05T_sticker { width: 68px; height: 68px; font-size: 38px; }
    .OP05T_deco { font-size: 26px; }
    .OP05T_d4, .OP05T_d5 { display: none; }
}
.OP05T_h3 { font-size: 1rem; font-weight: 700; color: #15476c; margin: 18px 0 4px; }

/* faccine come sticker principale */
.OP05T_facce_t { margin: 10px 0 6px; }
.OP05T_facce .OP05T_st { width: 44px; height: 44px; font-size: 24px; }

/* ---------- emoticon nei testi e reazioni (prefisso OP05E_) ---------- */
.OP05E_campo { position: relative; display: flex; align-items: flex-start; gap: 6px; }
.OP05E_campo > .form-control { flex: 1 1 auto; }
.OP05E_btn { flex: 0 0 38px; height: 38px; border: 1px solid #ced4da; border-radius: 8px; background: #fff; font-size: 20px; line-height: 1; cursor: pointer; padding: 0; }
.OP05E_btn:hover { border-color: #ff9900; background: #fff8ec; }
.OP05E_pop { position: absolute; z-index: 30; top: 100%; right: 0; margin-top: 6px; width: min(340px, 90vw); background: #fff; border: 1px solid #e3e8ee;
             border-radius: 12px; box-shadow: 0 8px 24px rgba(21, 71, 108, .18); padding: 8px; display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px; }
.OP05E_em { border: 0; background: transparent; font-size: 22px; line-height: 1; padding: 6px 0; border-radius: 8px; cursor: pointer; }
.OP05E_em:hover, .OP05E_em:focus-visible { background: #fff4e0; outline: none; }
.OP05E_griglia { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.OP05E_griglia .OP05E_em { font-size: 30px; padding: 8px 0; border: 1px solid #eef1f5; }
.OP05E_griglia .OP05E_nessuna { grid-column: 1 / -1; font-size: .9rem; color: #6c757d; }
.OP05E_reaz { font-size: 1.15rem; margin-right: 6px; vertical-align: middle; }
.OP05E_reaz_btn { border: 1px dashed #c9d4e0; background: #fff; border-radius: 999px; min-width: 34px; height: 30px; font-size: 1.1rem; line-height: 1;
                  margin-right: 6px; cursor: pointer; vertical-align: middle; padding: 0 6px; }
.OP05E_reaz_btn.OP05E_vuota { font-size: .85rem; color: #6c757d; }
.OP05E_reaz_btn:hover { border-color: #ff9900; background: #fff8ec; }