/**
 * ====================================================================
 * Pavo Admin Dashboard - Typography Component Styles
 * Copyright © 2024 RefineThemes.com
 * Author: Saleem Raza
 * Founder: RefineThemes.com
 * License: MIT
 * ====================================================================
 */

:root {
            --primary: #6366f1;
            --secondary: #8b5cf6;
            --success: #10b981;
            --danger: #ef4444;
            --warning: #f59e0b;
            --info: #3b82f6;
            --dark: #1e293b;
            --light: #f8fafc;
        }
        
        .typography-container {
            width: 100%;
            margin: 0 auto;
        }
        
        .header {
            text-align: center;
            margin-bottom: 10px;
            padding: 20px;
            border-bottom: 2px solid #eee;
            background: linear-gradient(90deg, #010101, #535353);
        }
        
        .header h1 {
            font-family: 'Playfair Display', serif;
            font-weight: 700;
            font-size: 2.5rem;
            margin-bottom: 20px;
            background: linear-gradient(90deg, #6366f1, #8b5cf6);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
        }
        
        .header p {
            font-family: 'Poppins', sans-serif;
            font-size: 1.2rem;
            color: #666;
        }
        
        .typography-section {
            margin-bottom: 60px;
            background: white;
            border-radius: 12px;
            padding: 30px;
            box-shadow: 0 5px 15px rgba(0,0,0,0.05);
        }
        
        .section-title {
            font-family: 'Montserrat', sans-serif;
            font-weight: 700;
            font-size: 1.8rem;
            margin-bottom: 30px;
            color: var(--dark);
            border-left: 5px solid var(--primary);
            padding-left: 15px;
        }
        
        .typography-example {
            margin-bottom: 40px;
        }
        
        .typography-label {
            font-family: 'Source Sans Pro', sans-serif;
            font-size: 0.9rem;
            color: #666;
            margin-bottom: 10px;
            text-transform: uppercase;
            letter-spacing: 1px;
        }
        
        /* Custom Typography Styles */
        .modern-serif {
            font-family: 'Playfair Display', serif;
            font-weight: 700;
            font-size: 2.5rem;
            line-height: 1.2;
            color: var(--dark);
        }
        
        .minimal-sans {
            font-family: 'Roboto', sans-serif;
            font-weight: 300;
            font-size: 1.8rem;
            letter-spacing: 1px;
            color: #444;
        }
        
        .bold-condensed {
            font-family: 'Oswald', sans-serif;
            font-weight: 700;
            font-size: 2.2rem;
            text-transform: uppercase;
            letter-spacing: 2px;
            color: var(--dark);
        }
        
        .elegant-script {
            font-family: 'Lora', serif;
            font-weight: 700;
            font-size: 2.4rem;
            font-style: italic;
            color: #333;
        }
        
        .tech-mono {
            font-family: 'Space Mono', monospace;
            font-weight: 700;
            font-size: 1.8rem;
            color: var(--dark);
        }
        
        .gradient-text {
            background: linear-gradient(90deg, #6366f1, #8b5cf6);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
            font-weight: 800;
        }
        
        .outline-text {
            color: white;
            -webkit-text-stroke: 2px var(--primary);
            text-stroke: 2px var(--primary);
            font-weight: 900;
        }
        
        .shadow-text {
            text-shadow: 3px 3px 0 rgba(0,0,0,0.1);
            font-weight: 800;
        }
        
        .letter-spacing-wide {
            letter-spacing: 5px;
        }
        
        .letter-spacing-tight {
            letter-spacing: -1px;
        }
        
        .text-3d {
            color: #fff;
            text-shadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0,0,0,0.1), 0 0 5px rgba(0,0,0,0.1), 0 1px 3px rgba(0,0,0,0.3), 0 3px 5px rgba(0,0,0,0.2), 0 5px 10px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.2), 0 20px 20px rgba(0,0,0,0.15);
        }
        
        .text-gradient-rainbow {
            background: linear-gradient(to right, #ff0000, #ff7f00, #ffff00, #00ff00, #0000ff, #4b0082, #9400d3);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
            font-weight: 800;
        }
        
        .text-underline-animated {
            display: inline-block;
            position: relative;
        }
        
        .text-underline-animated::after {
            content: '';
            position: absolute;
            width: 100%;
            transform: scaleX(0);
            height: 3px;
            bottom: -5px;
            left: 0;
            background-color: var(--primary);
            transform-origin: bottom right;
            transition: transform 0.25s ease-out;
        }
        
        .text-underline-animated:hover::after {
            transform: scaleX(1);
            transform-origin: bottom left;
        }
        
        .text-stroke-light {
            color: transparent;
            -webkit-text-stroke: 1px white;
            text-stroke: 1px white;
        }
        
        .text-stroke-dark {
            color: transparent;
            -webkit-text-stroke: 1px var(--dark);
            text-stroke: 1px var(--dark);
        }
        
        .text-emboss {
            color: #202020;
            background-color: #f8f9fa;
            text-shadow: 1px 1px 1px rgba(255,255,255,0.6), -1px -1px 1px rgba(0,0,0,0.1);
        }
        
        .text-deboss {
            color: #f8f9fa;
            background-color: #202020;
            text-shadow: -1px -1px 1px rgba(255,255,255,0.2), 1px 1px 1px rgba(0,0,0,0.6);
        }
        
        .text-neon {
            color: #fff;
            text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px var(--primary), 0 0 20px var(--primary);
            animation: neonGlow 1.5s ease-in-out infinite alternate;
        }
        
        @keyframes neonGlow {
            from {
                text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px var(--primary), 0 0 20px var(--primary);
            }
            to {
                text-shadow: 0 0 10px #fff, 0 0 15px var(--primary), 0 0 20px var(--primary), 0 0 25px var(--primary);
            }
        }
        
        .text-flicker {
            animation: flicker 3s infinite alternate;
        }
        
        @keyframes flicker {
            0%, 18%, 22%, 25%, 53%, 57%, 100% {
                text-shadow: 0 0 4px #fff, 0 0 11px #fff, 0 0 19px #fff, 0 0 40px var(--primary), 0 0 80px var(--primary);
            }
            20%, 24%, 55% {       
                text-shadow: none;
            }
        }
        
        .text-rotate {
            display: inline-block;
            transform: rotate(-5deg);
        }
        
        .text-skew {
            display: inline-block;
            transform: skewX(-10deg);
        }
        
        .text-scale {
            display: inline-block;
            transition: transform 0.3s;
        }
        
        .text-scale:hover {
            transform: scale(1.1);
        }
        
        .text-clip-path {
            background: linear-gradient(90deg, #6366f1, #8b5cf6);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
            position: relative;
            z-index: 1;
        }
        
        .text-clip-path::before {
            content: attr(data-text);
            position: absolute;
            -webkit-text-stroke: 2px var(--primary);
            text-stroke: 2px var(--primary);
            z-index: -1;
            color: transparent;
        }
        
        .text-multiline-shadow {
            text-shadow: 1px 1px 0 var(--primary), 2px 2px 0 var(--secondary), 3px 3px 0 var(--success);
        }
        
        .text-background-pattern {
            background-image: linear-gradient(45deg, #f3ec78, #af4261);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
        }
        
        .text-animated-gradient {
            background: linear-gradient(90deg, #6366f1, #8b5cf6, #ec4899, #f59e0b);
            background-size: 300% 300%;
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
            animation: gradient 5s ease infinite;
        }
        
        @keyframes gradient {
            0% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
            100% { background-position: 0% 50%; }
        }
        
        .text-border {
            color: white;
            text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
        }
        
        .text-double-border {
            color: white;
            text-shadow: 0 0 2px #000, 0 0 2px #000, 0 0 2px #000, 0 0 2px #000, 0 0 2px #000;
        }
        
        .text-soft-shadow {
            text-shadow: 0 2px 4px rgba(0,0,0,0.2);
        }
        
        .text-hard-shadow {
            text-shadow: 2px 2px 0 rgba(0,0,0,0.2);
        }
        
        .text-blur {
            color: transparent;
            text-shadow: 0 0 8px rgba(0,0,0,0.5);
        }
        
        .text-blur-light {
            color: transparent;
            text-shadow: 0 0 4px rgba(255,255,255,0.8);
        }
        
        .text-mirror {
            display: inline-block;
            position: relative;
        }
        
        .text-mirror::after {
            content: attr(data-text);
            position: absolute;
            top: 100%;
            left: 0;
            transform: scaleY(-1);
            opacity: 0.3;
            background: linear-gradient(to bottom, rgba(255,255,255,0.3) 0%, rgba(255,255,255,0) 100%);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
        }
        
        .text-cutout {
            background-color: var(--dark);
            color: white;
            padding: 5px 10px;
            position: relative;
        }
        
        .text-cutout::before {
            content: attr(data-text);
            position: absolute;
            color: var(--dark);
            -webkit-text-stroke: 2px white;
            text-stroke: 2px white;
            left: 5px;
            top: 5px;
        }
        
        .text-highlight {
            background: linear-gradient(120deg, rgba(99,102,241,0.3) 0%, rgba(99,102,241,0.3) 100%);
            background-repeat: no-repeat;
            background-size: 100% 30%;
            background-position: 0 88%;
        }
        
        .text-underline-wave {
            display: inline;
            background-image: url("data:image/svg+xml;charset=utf8,%3Csvg id='squiggle-link' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:ev='http://www.w3.org/2001/xml-events' viewBox='0 0 20 4'%3E%3Cstyle type='text/css'%3E.squiggle{animation:shift .3s linear infinite;}@keyframes shift {from {transform:translateX(0);}to {transform:translateX(-20px);}}%3C/style%3E%3Cpath fill='none' stroke='%236366f1' stroke-width='2' class='squiggle' d='M0,3.5 c 5,0,5,-3,10,-3 s 5,3,10,3 c 5,0,5,-3,10,-3 s 5,3,10,3'/%3E%3C/svg%3E");
            background-position: 0 100%;
            background-size: auto 6px;
            background-repeat: repeat-x;
            text-decoration: none;
            padding-bottom: 6px;
        }
        
        .text-stamp {
            display: inline-block;
            padding: 5px 10px;
            background-color: #f8f9fa;
            border: 3px solid var(--dark);
            color: var(--dark);
            font-family: 'Space Mono', monospace;
            font-weight: 700;
            transform: rotate(-5deg);
            box-shadow: 3px 3px 0 rgba(0,0,0,0.2);
        }
        
        .text-bubble {
            display: inline-block;
            padding: 8px 15px;
            background-color: var(--primary);
            color: white;
            border-radius: 20px;
            font-weight: 500;
            position: relative;
        }
        
        .text-bubble::after {
            content: '';
            position: absolute;
            bottom: -8px;
            left: 20px;
            border-width: 10px 10px 0;
            border-style: solid;
            border-color: var(--primary) transparent;
        }
        
        .text-typewriter {
            overflow: hidden;
            border-right: 3px solid var(--primary);
            white-space: nowrap;
            animation: typing 3.5s steps(40, end), blink-caret 0.75s step-end infinite;
        }
        
        @keyframes typing {
            from { width: 0 }
            to { width: 100% }
        }
        
        @keyframes blink-caret {
            from, to { border-color: transparent }
            50% { border-color: var(--primary) }
        }
        
        .text-jumping span {
            display: inline-block;
            animation: jump 0.5s ease infinite alternate;
        }
        
        .text-jumping span:nth-child(2) { animation-delay: 0.1s; }
        .text-jumping span:nth-child(3) { animation-delay: 0.2s; }
        .text-jumping span:nth-child(4) { animation-delay: 0.3s; }
        .text-jumping span:nth-child(5) { animation-delay: 0.4s; }
        
        @keyframes jump {
            0% { transform: translateY(0); }
            100% { transform: translateY(-10px); }
        }
        
        .text-shaking {
            display: inline-block;
            animation: shake 0.5s ease infinite;
        }
        
        @keyframes shake {
            0%, 100% { transform: translateX(0); }
            25% { transform: translateX(-5px); }
            75% { transform: translateX(5px); }
        }
        
        .text-floating {
            display: inline-block;
            animation: float 3s ease-in-out infinite;
        }
        
        @keyframes float {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-10px); }
        }
        
        .text-breathing {
            animation: breathe 4s ease-out infinite;
        }
        
        @keyframes breathe {
            0%, 100% { transform: scale(1); }
            50% { transform: scale(1.05); }
        }