/* ════════════════════════════════════════════════════════════
   FONT PRESETS PANEL  — Fotor-style UI
   ════════════════════════════════════════════════════════════ */

/* ── Header ── */
.fp-header {
    text-align: center;
    margin-bottom: 28px;
    padding: 8px 0 0;
}
.fp-header h1 {
    font-family: 'Orbitron', sans-serif;
    font-size: 16px;
    font-weight: 900;
    letter-spacing: 3px;
    background: linear-gradient(135deg, #7c6af7, #c77dff, #4fc3f7);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 6px;
    text-transform: uppercase;
}
.fp-header p {
    color: #6b6b80;
    font-size: 10px;
    letter-spacing: 0.8px;
}

/* ── Search ── */
.fp-search-bar {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
}
.fp-search-input {
    width: 100%;
    background: #16161e;
    border: 1px solid #2a2a38;
    color: #e8e8f0;
    padding: 9px 18px;
    border-radius: 999px;
    font-size: 12px;
    outline: none;
    transition: border-color 0.2s;
    font-family: inherit;
}
.fp-search-input:focus { border-color: #7c6af7; }
.fp-search-input::placeholder { color: #6b6b80; }

/* ── Category tabs ── */
.fp-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 24px;
}
.fp-tab {
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.5px;
    cursor: pointer;
    border: 1px solid #2a2a38;
    background: transparent;
    color: #6b6b80;
    transition: all 0.2s;
    text-transform: uppercase;
    font-family: inherit;
}
.fp-tab:hover, .fp-tab.active {
    background: #7c6af7;
    border-color: #7c6af7;
    color: #fff;
}

/* ── Section title ── */
.fp-section-title {
    font-family: 'Orbitron', sans-serif;
    font-size: 10px;
    letter-spacing: 2.5px;
    color: #6b6b80;
    text-transform: uppercase;
    margin: 28px 0 14px;
    padding-bottom: 8px;
    border-bottom: 1px solid #2a2a38;
}

/* ── Grid ── */
.fp-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 4px;
}

/* ── Card ── */
.fp-card {
    background: #16161e;
    border: 1px solid #2a2a38;
    border-radius: 14px;
    padding: 20px 12px 14px;
    cursor: pointer;
    transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    position: relative;
    overflow: hidden;
}
.fp-card:hover {
    transform: translateY(-2px);
    border-color: #7c6af7;
    box-shadow: 0 6px 24px rgba(124, 106, 247, 0.18);
}
.fp-card.active {
    border-color: #7c6af7;
    box-shadow: 0 0 0 2px rgba(124, 106, 247, 0.25);
}

/* ── Preview box ── */
.fp-preview {
    width: 100%;
    height: 68px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: #0a0a10;
    overflow: hidden;
    pointer-events: none;
}

/* ── Card label ── */
.fp-label {
    font-size: 10px;
    color: #6b6b80;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    text-align: center;
    font-weight: 600;
}

/* ── Apply button ── */
.fp-apply-btn {
    font-size: 10px;
    background: rgba(124, 106, 247, 0.12);
    color: #7c6af7;
    border: 1px solid rgba(124, 106, 247, 0.3);
    padding: 4px 12px;
    border-radius: 999px;
    cursor: pointer;
    transition: all 0.2s;
    font-family: inherit;
    font-weight: 600;
}
.fp-apply-btn:hover,
.fp-card:hover .fp-apply-btn {
    background: #7c6af7;
    color: #fff;
}

/* ── No results ── */
.fp-noresults {
    text-align: center;
    color: #6b6b80;
    padding: 40px 0;
    font-size: 12px;
    display: none;
}

/* ═══════════════════════════════════════════
   TEXT STYLE CLASSES (applied in preview + on canvas)
   ═══════════════════════════════════════════ */

/* FOTOR CLASSICS */
.s-plain         { font-family:'Bebas Neue',sans-serif; color:#fff; letter-spacing:2px; }
.s-shadow        { font-family:'Anton',sans-serif; color:#fff; text-shadow:4px 4px 0 #000,6px 6px 0 rgba(0,0,0,.4); }
.s-outline       { font-family:'Bebas Neue',sans-serif; color:transparent; -webkit-text-stroke:2px #fff; letter-spacing:2px; }
.s-gradient      { font-family:'Anton',sans-serif; background:linear-gradient(135deg,#f7971e,#ffd200); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.s-neon-blue     { font-family:'Orbitron',sans-serif; color:#00f0ff; text-shadow:0 0 8px #00f0ff,0 0 20px #00f0ff,0 0 40px #00c8ff; }
.s-neon-pink     { font-family:'Orbitron',sans-serif; color:#ff2d78; text-shadow:0 0 8px #ff2d78,0 0 20px #ff2d78,0 0 40px #ff0055; }
.s-neon-green    { font-family:'Orbitron',sans-serif; color:#39ff14; text-shadow:0 0 8px #39ff14,0 0 24px #39ff14,0 0 48px #00ff00; }
.s-retro-chrome  { font-family:'Bebas Neue',sans-serif; background:linear-gradient(180deg,#f0f0f0 0%,#aaa 40%,#fff 50%,#888 100%); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; letter-spacing:2px; }
.s-gold          { font-family:'Cinzel',serif; background:linear-gradient(180deg,#f9d423,#e65c00,#f9d423); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.s-comic         { font-family:'Bungee',cursive; color:#fff; -webkit-text-stroke:2px #111; text-shadow:3px 3px 0 #f7d006,5px 5px 0 #e65100; }
.s-stencil       { font-family:'Fjalla One',sans-serif; color:#e8e8d0; letter-spacing:3px; opacity:0.85; text-transform:uppercase; }
.s-handwritten   { font-family:'Pacifico',cursive; color:#fff; }
.s-brush         { font-family:'Permanent Marker',cursive; color:#fff; }
.s-vintage       { font-family:'Special Elite',cursive; color:#c8a96e; text-shadow:1px 1px 0 rgba(0,0,0,.5); }
.s-retro-pop     { font-family:'Fredoka One',cursive; color:#ff6b6b; -webkit-text-stroke:2px #1a1a2e; }
.s-glitch        { font-family:'Orbitron',sans-serif; color:#fff; animation:glitch 2s infinite; }
.s-3d-block      { font-family:'Anton',sans-serif; color:#fff; text-shadow:1px 1px 0 #bbb,2px 2px 0 #999,3px 3px 0 #777,4px 4px 0 #555,5px 5px 0 #333,6px 6px 8px rgba(0,0,0,.5); }
.s-ice           { font-family:'Raleway',sans-serif; font-weight:900; background:linear-gradient(135deg,#a8edea,#fed6e3,#b8f2e6); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.s-fire          { font-family:'Anton',sans-serif; background:linear-gradient(0deg,#ff0000,#ff6600,#ffcc00); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; text-shadow:0 0 30px rgba(255,100,0,.6); }
.s-galaxy        { font-family:'Orbitron',sans-serif; background:linear-gradient(135deg,#667eea,#764ba2,#f093fb,#4facfe); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.s-holographic   { font-family:'Bebas Neue',sans-serif; background:linear-gradient(135deg,#f093fb 0%,#f5576c 15%,#4facfe 30%,#00f2fe 45%,#43e97b 60%,#f6d365 80%,#f093fb 100%); background-size:200%; -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; animation:holoshift 3s linear infinite; }
.s-stamp         { font-family:'Fjalla One',sans-serif; color:rgba(220,50,50,.9); border:3px solid rgba(220,50,50,.8); padding:3px 8px; border-radius:4px; transform:rotate(-6deg); letter-spacing:2px; opacity:.9; }
.s-typewriter    { font-family:'VT323',monospace; color:#00ff41; letter-spacing:3px; }
.s-pixel         { font-family:'Press Start 2P',cursive; color:#fff; text-shadow:2px 2px 0 #7c6af7; }
.s-mono-neon     { font-family:'Monoton',cursive; color:#fff; text-shadow:0 0 10px #fff,0 0 20px #4fc3f7; }

/* CONTEMPORARY */
.s-aurora        { font-family:'Raleway',sans-serif; font-weight:900; background:linear-gradient(135deg,#43e97b,#38f9d7,#4facfe,#a855f7); background-size:300%; -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; animation:aurora 4s ease infinite; }
.s-glassmorphic  { font-family:'Exo 2',sans-serif; font-weight:900; color:rgba(255,255,255,.9); text-shadow:0 2px 20px rgba(255,255,255,.3),0 0 40px rgba(124,106,247,.5); }
.s-duotone       { font-family:'Anton',sans-serif; background:linear-gradient(135deg,#fc4a1a,#f7b733); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; filter:contrast(1.2); }
.s-grunge        { font-family:'Special Elite',cursive; color:#c8a96e; text-shadow:0 0 2px #000,1px -1px 2px rgba(200,169,110,.5); letter-spacing:2px; opacity:.85; }
.s-luxury        { font-family:'Cinzel',serif; color:#d4af37; letter-spacing:5px; text-shadow:0 2px 4px rgba(0,0,0,.5); }
.s-brutalist     { font-family:'Bebas Neue',sans-serif; color:#000; background:#fff; padding:2px 8px; letter-spacing:0; }
.s-vaporwave     { font-family:'Orbitron',sans-serif; background:linear-gradient(90deg,#ff71ce,#01cdfe,#05ffa1,#b967ff); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; letter-spacing:3px; }
.s-frosted       { font-family:'Raleway',sans-serif; font-weight:900; color:rgba(255,255,255,.7); text-shadow:0 1px 3px rgba(0,0,0,.4),0 0 20px rgba(255,255,255,.2); }
.s-y2k           { font-family:'Fredoka One',cursive; color:#ff2d78; -webkit-text-stroke:1px #000; text-shadow:2px 2px 0 #00f0ff; }
.s-editorial     { font-family:'Playfair Display',serif; font-weight:900; color:#f0f0e8; font-style:italic; letter-spacing:-1px; }
.s-cyberpunk     { font-family:'Orbitron',sans-serif; color:#ffd700; text-shadow:0 0 6px #ffd700,2px 2px 0 #ff2d78; letter-spacing:2px; }
.s-halftone-pop  { font-family:'Black Han Sans',sans-serif; color:#ff3860; -webkit-text-stroke:1px #000; letter-spacing:1px; }
.s-depth-blur    { font-family:'Anton',sans-serif; color:#fff; text-shadow:0 4px 15px rgba(255,255,255,.15),0 8px 30px rgba(124,106,247,.25),0 16px 60px rgba(79,195,247,.15); }
.s-sand-stone    { font-family:'Fjalla One',sans-serif; color:#d4956a; text-shadow:1px 1px 0 #8b5e3c,2px 2px 0 rgba(80,40,10,.3); letter-spacing:2px; }
.s-rainbow-warp  { font-family:'Bungee',cursive; background:linear-gradient(90deg,#ff0000,#ff8c00,#ffe600,#00ff00,#00cfff,#a855f7); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.s-mono-bold     { font-family:'Russo One',sans-serif; color:#f0f0f0; letter-spacing:0; line-height:1; }
.s-outlined-glow { font-family:'Orbitron',sans-serif; color:transparent; -webkit-text-stroke:1.5px #7c6af7; text-shadow:0 0 12px rgba(124,106,247,.6),0 0 30px rgba(124,106,247,.3); }
.s-retro-label   { font-family:'Staatliches',sans-serif; color:#1a1a1a; background:#f5e642; padding:2px 10px; border-radius:3px; letter-spacing:3px; }
.s-dark-gothic   { font-family:'Cinzel',serif; color:#8b0000; text-shadow:0 0 8px rgba(139,0,0,.8),0 2px 4px #000; letter-spacing:3px; }
.s-pastel-dream  { font-family:'Pacifico',cursive; background:linear-gradient(135deg,#ffecd2,#fcb69f,#a1c4fd,#c2e9fb); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.s-scifi         { font-family:'Orbitron',sans-serif; color:#00f0ff; letter-spacing:5px; text-transform:uppercase; text-shadow:0 0 4px #00f0ff,0 0 14px rgba(0,240,255,.4); }

/* Animations */
@keyframes glitch {
    0%,95%,100% { text-shadow:none; color:#fff; }
    96%  { text-shadow:-2px 0 #ff2d78, 2px 0 #00f0ff; }
    97%  { text-shadow: 2px 0 #ff2d78,-2px 0 #00f0ff; }
    98%  { text-shadow:-3px 0 cyan; }
}
@keyframes holoshift { to { background-position: 200% center; } }
@keyframes aurora {
    0%,100% { background-position: 0% 50%; }
    50%     { background-position: 100% 50%; }
}