/*
Theme Name: Snaptik
Theme URI: https://snaptik.bunnydv.com
Author: BunnyDV
Description: Theme Snaptik - Tải video TikTok/Facebook/Instagram không watermark miễn phí!
Version: 3.0.1
License: GPL-2.0+
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: snaptik
*/

/* --- Color Palette --- */
:root {
    --color-primary: #7c3aed; /* Purple */
    --color-secondary: #ec4899; /* Pink */
    --color-hero-bg: linear-gradient(180deg, #7c3aed 0%, #a855f7 100%);
    --color-section-purple: #7c3aed;
}

body {
    background-color: #ffffff;
    overflow-x: hidden;
}

/* --- Hero Section --- */
.hero-gradient {
    background: linear-gradient(135deg, #7c3aed 0%, #a855f7 30%, #ec4899 70%, #f43f5e 100%);
}

.search-bar-container {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.search-bar-container:focus-within {
    background: #ffffff;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
}

/* Fix Autofill Blue Background */
input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus {
    -webkit-text-fill-color: #111827;
    -webkit-box-shadow: 0 0 0px 1000px #ffffff inset;
    transition: background-color 5000s ease-in-out 0s;
}


.btn-download {
    background: linear-gradient(to right, #ec4899, #f43f5e);
    box-shadow: 0 4px 15px rgba(236, 72, 153, 0.3);
}

/* --- How-to Section --- */
.step-card-dark { background-color: #0b1221; color: white; }
.step-card-purple { background-color: #5b21b6; color: white; }
.step-card-white { background-color: #ffffff; color: #1e293b; }

.yellow-card {
    background-color: #ffcc00; /* Standard yellow from screenshot */
}

/* --- Key Features Section --- */
.bg-purple-main {
    background-color: #7c3aed;
}

/* --- FAQ Card --- */
.faq-overlay-card {
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(20px);
    border: 1px solid #eef2f6;
}

/* Result Card Transitions */
#snaptik-result-wrapper {
    transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.animate-spin {
    animation: spin 1s linear infinite;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}


/* --- Team Overlap --- */
.team-overlap-img {
    border: 3px solid #fff;
    margin-left: -15px;
    transition: transform 0.2s;
}
.team-overlap-img:first-child { margin-left: 0; }
.team-overlap-img:hover { transform: translateY(-5px) scale(1.1); z-index: 10; }

/* --- Footer --- */
.footer-text-muted { color: #94a3b8; }
.footer-link:hover { color: #7c3aed; }

/* --- Fonts & Utils --- */
.font-inter { font-family: 'Inter', sans-serif; }
@keyframes pulse-slow {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}
.animate-pulse-slow { animation: pulse-slow 3s ease-in-out infinite; }

/* --- Post & Page Styling --- */
.prose a {
    text-decoration: none;
    color: #7c3aed;
    font-weight: 700;
}
.prose a:hover {
    text-decoration: underline;
}

/* Tag badges in single.php */
article .mt-12 a {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    background-color: #f3f4f6;
    color: #4b5563;
    font-size: 11px;
    font-weight: 700;
    border-radius: 9999px;
    margin-right: 0.5rem;
    margin-bottom: 0.5rem;
    transition: all 0.2s;
    text-transform: uppercase;
    letter-spacing: 0.025em;
}
article .mt-12 a:hover {
    background-color: #7c3aed;
    color: white;
    text-decoration: none;
    transform: translateY(-2px);
    box-shadow: 0 4px 6px -1px rgba(124, 58, 237, 0.2);
}