/*!
Theme Name: SnapTik
Theme URI: https://snaptik.lu/
Author: SnapTik Team
Author URI: https://snaptik.lu/
Description: Modern TikTok Video Downloader Theme
Version: 2.0.0
Tested up to: 6.4
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: snaptik
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

SnapTik is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Arial, Helvetica, sans-serif;
    line-height: 1.6;
    background-color: #f5f9fa;
    color: #2c3e50;
}

.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
}

a {
    text-decoration: none;
    color: #16a085;
}

a:hover {
    text-decoration: underline;
}

/* ===== Header Styles ===== */
header {
    background: linear-gradient(135deg, #ffffff 0%, #e8f5f3 100%);
    box-shadow: 0 2px 8px rgba(22, 160, 133, 0.15);
    padding: 10px 0;
    position: sticky;
    top: 0;
    z-index: 100;
}

nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo a {
    font-size: 20px;
    font-weight: bold;
    color: #16a085;
    text-decoration: none;
}

.nav-links {
    display: flex;
    gap: 20px;
    align-items: center;
}

.nav-links a {
    color: #444;
    text-decoration: none;
    font-weight: 500;
    font-size: 14px;
}

.nav-links a:hover {
    color: #16a085;
}

/* Dropdown */
.dropdown {
    position: relative;
    display: inline-block;
}

.dropbtn {
    color: #444;
    font-weight: 500;
    padding: 0;
    background-color: transparent;
    border: none;
    cursor: pointer;
    font-family: inherit;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 5px;
}

.language-dropdown .dropbtn {
    color: #444;
}

.language-dropdown .dropbtn i.fas.fa-globe {
    color: #3498db;
    margin-right: 5px;
}

.dropdown-content {
    display: none;
    position: absolute;
    right: 0;
    background-color: white;
    min-width: 160px;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
    z-index: 1;
    border-radius: 4px;
    overflow: hidden;
}

.dropdown-content a {
    color: #444;
    padding: 8px 16px;
    text-decoration: none;
    display: block;
    font-weight: normal;
    font-size: 14px;
}

.dropdown-content a:hover {
    background-color: #f9f9f9;
}

.dropdown-content a.active {
    background-color: #16a085;
    color: white;
}

.dropdown:hover .dropdown-content {
    display: block;
}

.dropdown:hover .dropbtn {
    color: #16a085;
}

/* ===== Hero Section ===== */
.hero {
    background: linear-gradient(135deg, #11998e 0%, #38ef7d 50%, #3498db 100%);
    color: white;
    padding: 70px 0;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.hero::before {
    content: "";
    position: absolute;
    top: -10%;
    left: -10%;
    width: 120%;
    height: 120%;
    background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 70%);
    animation: pulse 8s infinite alternate;
}

@keyframes pulse {
    0% {
        transform: scale(1);
        opacity: 0.5;
    }
    100% {
        transform: scale(1.1);
        opacity: 0.8;
    }
}

.hero h1 {
    font-size: 38px;
    margin-bottom: 20px;
    font-weight: 700;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    position: relative;
}

.hero p {
    font-size: 20px;
    max-width: 700px;
    margin: 0 auto 30px;
    opacity: 0.9;
    position: relative;
}

/* ===== Download Form ===== */
.download-form {
    background-color: white;
    border-radius: 12px;
    padding: 25px;
    margin-top: -30px;
    position: relative;
    z-index: 1;
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 50px;
    transform: translateY(0);
    transition: transform 0.3s ease;
}

.download-form:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}


.url-input-container {
    margin-bottom: 20px;
}

.input-wrapper {
    position: relative;
    display: flex;
}

.url-input-container input {
    flex: 1;
    width: 100%;
    padding: 15px 90px 15px 20px; /* Padding right for buttons */
    border: 1px solid #e1e1e1;
    border-radius: 8px;
    font-size: 16px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05) inset;
    transition: all 0.3s ease;
}

.url-input-container input:focus {
    border-color: #16a085;
    box-shadow: 0 0 0 3px rgba(22, 160, 133, 0.2);
    outline: none;
}

.url-input-container .action-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: transparent;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    width: 40px;
    color: #666;
    transition: color 0.2s ease;
}

.url-input-container .action-btn:hover {
    color: #16a085;
}

.url-input-container .clear-btn {
    right: 45px;
}

.url-input-container .paste-btn {
    right: 5px;
    color: #16a085;
}

.download-btn {
    background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
    color: white;
    border: none;
    padding: 15px 25px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 18px;
    font-weight: bold;
    transition: all 0.3s ease;
    width: 100%;
    box-shadow: 0 4px 10px rgba(17, 153, 142, 0.3);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.download-btn:hover {
    background: linear-gradient(135deg, #0e8678 0%, #2dd365 100%);
    box-shadow: 0 6px 15px rgba(17, 153, 142, 0.4);
    transform: translateY(-2px);
}

/* ===== Info Section ===== */
.info-section {
    padding: 80px 0;
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.info-section::before {
    content: "";
    position: absolute;
    right: -150px;
    top: -150px;
    width: 400px;
    height: 400px;
    background: rgba(17, 153, 142, 0.05);
    border-radius: 50%;
    z-index: -1;
}

.info-section::after {
    content: "";
    position: absolute;
    left: -150px;
    bottom: -150px;
    width: 450px;
    height: 450px;
    background: rgba(52, 152, 219, 0.05);
    border-radius: 50%;
    z-index: -1;
}

.info-section h2 {
    font-size: 32px;
    margin-bottom: 30px;
    color: #16a085;
    text-align: center;
    font-weight: 700;
    position: relative;
    display: block;
    left: 50%;
    transform: translateX(-50%);
}

.info-section h2::after {
    content: "";
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 150px;
    height: 3px;
    background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
}

.info-section h3 {
    font-size: 28px;
    margin-bottom: 28px;
    color: #16a085;
    text-align: center;
    font-weight: 700;
    position: relative;
    display: block;
    left: 50%;
    transform: translateX(-50%);
}

.info-section h3::after {
    content: "";
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 70px;
    height: 3px;
    background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
}

.info-section p {
    margin-bottom: 20px;
    line-height: 1.7;
    color: #555;
}

.info-container {
    background-color: white;
    border-radius: 12px;
    padding: 40px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.07);
    margin-bottom: 40px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: 1px solid #f0f0f0;
}

.info-container:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
}

.app-promo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 40px 0;
}

.app-text {
    flex: 1;
}

.app-image {
    flex: 1;
    text-align: center;
}

.app-image img {
    max-width: 100%;
    height: auto;
}

/* ===== How To Section ===== */
.how-to-section {
    padding: 60px 0;
    background-color: #f9f9f9;
}

.steps {
    margin-top: 30px;
}

.step {
    display: flex;
    margin-bottom: 20px;
}

.step-number {
    background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
    color: white;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 15px;
    flex-shrink: 0;
}

.step-content {
    flex: 1;
}

.step-content h4 {
    margin-bottom: 10px;
}

/* ===== FAQ Section ===== */
.faq-section {
    padding: 60px 0;
}

.faq-container {
    margin-top: 30px;
}

.faq-item {
    margin-bottom: 20px;
}

.faq-question {
    background-color: white;
    padding: 15px;
    cursor: pointer;
    border-radius: 4px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.faq-question h4 {
    margin: 0;
}

.faq-question i {
    transition: transform 0.3s;
}

.faq-answer {
    padding: 15px;
    background-color: #f9f9f9;
    border-radius: 0 0 4px 4px;
    margin-top: 2px;
    display: none;
}

.faq-item.active .faq-question i {
    transform: rotate(180deg);
}

.faq-item.active .faq-answer {
    display: block;
}

/* ===== Video Result Section ===== */
.video-result {
    background-color: white;
    border-radius: 12px;
    padding: 30px;
    margin-top: 25px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    position: relative;
    z-index: 1;
    overflow: hidden;
    border: 1px solid #f0f0f0;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.video-result::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 150px;
    height: 150px;
    background: radial-gradient(circle, rgba(56,239,125,0.1) 0%, rgba(255,255,255,0) 70%);
    z-index: -1;
}

.video-result:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
}

.video-info {
    display: flex;
    flex: 1;
    min-width: 300px;
    max-width: 60%;
    padding-right: 20px;
    margin-bottom: 20px;
}

.video-thumbnail {
    width: 150px;
    height: 150px;
    margin-right: 20px;
    overflow: hidden;
    border-radius: 8px;
    flex-shrink: 0;
}

.video-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.video-details {
    flex: 1;
}

.video-title {
    font-size: 14px;
    margin-bottom: 10px;
    max-height: 50px;
    overflow: hidden;
    padding: 5px;
}

.video-author {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
}

.author-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    overflow: hidden;
    margin-right: 10px;
}

.author-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.download-options {
    flex: 1;
    min-width: 250px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.download-option {
    text-align: center;
    margin-bottom: 0;
}

.download-option h4 {
    display: none; /* Hide the download option title */
}

.download-option-btn {
    background: linear-gradient(135deg, #3498db 0%, #2980b9 100%);
    color: white;
    border: none;
    padding: 14px 0;
    border-radius: 4px;
    cursor: pointer;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    text-decoration: none;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.download-option-btn.mp3 {
    background: linear-gradient(135deg, #27ae60 0%, #229954 100%);
}

.download-option-btn i {
    margin-right: 8px;
}

.download-option-btn:hover {
    background: linear-gradient(135deg, #2874a6 0%, #1f618d 100%);
    text-decoration: none;
}

/* ===== Social Share ===== */
.social-share {
    margin-top: 30px;
    text-align: center;
}

.social-share h4 {
    margin-bottom: 15px;
}

.share-buttons {
    display: flex;
    justify-content: center;
    gap: 10px;
}

.share-button {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    text-decoration: none;
}

.share-button.facebook {
    background: linear-gradient(135deg, #3b5998 0%, #2d4373 100%);
}

.share-button.twitter {
    background: linear-gradient(135deg, #1da1f2 0%, #1a8cd8 100%);
}

.share-button.reddit {
    background: linear-gradient(135deg, #ff4500 0%, #e63e00 100%);
}

.share-button.whatsapp {
    background: linear-gradient(135deg, #25d366 0%, #20bd5a 100%);
}

.share-button.telegram {
    background: linear-gradient(135deg, #0088cc 0%, #0077b3 100%);
}

/* ===== Footer ===== */
footer {
    background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);
    color: white;
    padding: 50px 0 20px;
}

.footer-content {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-bottom: 40px;
}

.footer-logo {
    flex: 1;
    min-width: 250px;
    margin-bottom: 20px;
}

.footer-logo h3 {
    margin-bottom: 15px;
}

.footer-links {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
}

.footer-col h4 {
    margin-bottom: 15px;
    color: #38ef7d;
}

.footer-col ul {
    list-style: none;
}

.footer-col ul li {
    margin-bottom: 10px;
}

.footer-col ul li a {
    color: #ccc;
    text-decoration: none;
}

.footer-col ul li a:hover {
    color: white;
}

.footer-bottom {
    padding-top: 20px;
    border-top: 1px solid #555;
    text-align: center;
    font-size: 14px;
    color: #ccc;
}

.footer-bottom p {
    margin-bottom: 10px;
}

/* ===== Alert Messages ===== */
.alert {
    padding: 15px;
    margin-bottom: 20px;
    border-radius: 4px;
}

.alert-danger {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

.alert-success {
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

/* ===== Loading Spinner ===== */
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* ===== Responsive Styles ===== */
@media (max-width: 768px) {
    .app-promo {
        flex-direction: column;
    }
    
    .app-text {
        margin-bottom: 20px;
    }
    
    .video-info {
        max-width: 100%;
        padding-right: 0;
    }
    
    .video-result {
        flex-direction: column;
    }
    
    .video-thumbnail {
        width: 45%;
        height: auto;
        margin-right: 0;
        margin-bottom: 20px;
    }
    
    .download-form {
        padding: 20px;
    }
    
    /* Preserve the input layout on mobile */
    .url-input-container input {
        padding-right: 90px;
    }
    
    .download-options {
        min-width: 100%;
    }
}

/* Mobile Menu Styles */
.mobile-menu-toggle {
    display: none;
    font-size: 22px;
    color: #444;
    cursor: pointer;
}

.mobile-menu {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: white;
    z-index: 999;
    overflow-y: auto;
    padding: 20px;
    transform: translateX(-100%);
    transition: transform 0.3s ease-in-out;
}

.mobile-menu.active {
    transform: translateX(0);
}

.mobile-menu-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 20px;
    border-bottom: 1px solid #eee;
    margin-bottom: 20px;
}

.mobile-logo a {
    font-size: 20px;
    font-weight: bold;
    color: #4158D0;
    text-decoration: none;
}

.mobile-close {
    font-size: 22px;
    color: #444;
    cursor: pointer;
}

.mobile-menu-links {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.mobile-menu-links a {
    color: #444;
    text-decoration: none;
    font-size: 16px;
    padding: 10px 0;
    border-bottom: 1px solid #eee;
}

.mobile-language-selector {
    margin-top: 20px;
}

.mobile-language-title {
    font-size: 16px;
    color: #444;
    margin-bottom: 15px;
    font-weight: bold;
}

.mobile-language-title i {
    color: #2cc7ff;
    margin-right: 5px;
}

.mobile-language-options {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.mobile-language-options a {
    padding: 10px;
    border-radius: 4px;
    border: none;
    text-align: left;
}

.mobile-language-options a.active {
    background-color: #2cc7ff;
    color: white;
}

@media (max-width: 768px) {
    .mobile-menu-toggle {
        display: block;
    }
    
    .nav-links {
        display: none;
    }
}

@media (max-width: 576px) {
    .hero h1 {
        font-size: 28px;
    }
    
    .hero p {
        font-size: 16px;
    }
    
    .footer-content {
        flex-direction: column;
    }
    
    .footer-links {
        flex-direction: column;
        gap: 20px;
    }
}

/* ===== Post Content Image Fixes ===== */
.entry-content img,
.post-content img,
.home-content img,
article img,
.content img {
    max-width: 100%;
    height: auto;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.entry-content figure,
.post-content figure,
.home-content figure,
article figure,
.content figure {
    max-width: 100%;
    margin: 1em auto;
}

.entry-content figure img,
.post-content figure img,
.home-content figure img,
article figure img,
.content figure img {
    width: 100%;
    height: auto;
}

/* WordPress alignment classes */
.aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.alignleft {
    float: left;
    margin-right: 1em;
    margin-bottom: 1em;
}

.alignright {
    float: right;
    margin-left: 1em;
    margin-bottom: 1em;
}

.wp-caption {
    max-width: 100%;
}

.wp-caption img {
    max-width: 100%;
    height: auto;
}

.wp-caption-text,
figcaption {
    text-align: center;
    font-style: italic;
    color: #666;
    margin-top: 0.5em;
    font-size: 0.9em;
}

/* ===== Table Styles ===== */
.entry-content table,
.post-content table,
.home-content table,
article table,
.content table {
    width: 100%;
    max-width: 100%;
    border-collapse: collapse;
    margin: 1.5em 0;
    overflow-x: auto;
    display: block;
}

.entry-content table,
.post-content table,
.home-content table,
article table,
.content table {
    display: table;
}

.entry-content table th,
.entry-content table td,
.home-content table th,
.post-content table th,
.post-content table td,
article table th,
article table td,
.content table th,
.content table td {
    border: 1px solid #ddd;
    padding: 12px 15px;
    text-align: left;
}

.entry-content table th,
.post-content table th,
.home-content table th,
article table th,
.content table th {
    background-color: #f8f9fa;
    font-weight: bold;
    color: #333;
}

.entry-content table tr:nth-child(even),
.post-content table tr:nth-child(even),
.home-content table tr:nth-child(even),
article table tr:nth-child(even),
.content table tr:nth-child(even) {
    background-color: #f9f9f9;
}

.entry-content table tr:hover,
.post-content table tr:hover,
.home-content table tr:hover,
article table tr:hover,
.content table tr:hover {
    background-color: #f1f1f1;
}

/* Responsive tables */
@media (max-width: 768px) {
    .entry-content table,
    .post-content table,
    .home-content table,
    article table,
    .content table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
    }
}