/*
Theme Name: Hello Elementor Child
Theme URI: https://elementor.com/hello-theme/
Template: hello-elementor
Author: Elementor Team
Description: Deep Black Professional Skin for Tshepho Piano Lessons.
Version: 3.4.7
*/

/* === GLOBAL BRAND OVERRIDES (FORCE BLACK & RED) === */

/* Force Black Background on Everything */
body, html {
    background-color: #000000 !important;
    color: #ffffff !important;
}

/* Kill "Default Blue" and "Default Gray" Links */
a {
    color: inherit;
    text-decoration: none;
    transition: all 0.3s ease;
}

a:hover {
    color: #ff3131 !important;
}

/* Force Buttons to Brand Red */
button, 
input[type="submit"], 
.elementor-button,
.btn-brand {
    background-color: #ff3131 !important;
    color: #ffffff !important;
    border-radius: 9999px !important; /* Rounded look across site */
    border: none !important;
}

button:hover {
    background-color: #cc2020 !important;
    transform: translateY(-1px);
}

/* === SONG TUTORIAL & TOOL WRAPPERS (REPLACING GRAY WITH BLACK) === */

.song-tutorial-wrapper { 
    max-width: 1200px; 
    margin: 0 auto; 
    padding: 40px 20px; 
}

/* Stat Items (Was Gray, Now Black) */
.stat-item { 
    background: #111111 !important; /* Deep Surface */
    color: #ff3131 !important; /* Red Text */
    padding: 8px 18px; 
    border-radius: 50px; 
    font-size: 0.85rem; 
    font-weight: 800; 
    border: 1px solid #222 !important;
}

/* Utility Bar (Was Gray, Now Black) */
.song-utility-bar { 
    background: #0a0a0a !important; 
    padding: 25px; 
    border-radius: 16px; 
    display: flex; 
    flex-wrap: wrap; 
    justify-content: space-between; 
    align-items: center; 
    gap: 20px; 
    margin-bottom: 50px; 
    border: 1px solid #1a1a1a !important; 
}

/* Tab Navigation */
.tab-nav { 
    border-bottom: 1px solid #1a1a1a; 
    margin-bottom: 30px; 
    display: flex; 
    gap: 30px; 
}

.tab-btn { 
    background: none; 
    border: none; 
    padding: 15px 0; 
    font-size: 1rem; 
    font-weight: 700;
    text-transform: uppercase;
    cursor: pointer; 
    color: #555555; /* Dimmed */
    border-bottom: 3px solid transparent; 
}

.tab-btn.active { 
    color: #ff3131 !important; 
    border-bottom: 3px solid #ff3131 !important; 
}

/* Form Inputs (Ensuring dark mode across all plugins) */
input[type="text"], 
input[type="email"], 
input[type="password"], 
textarea, 
select {
    background-color: #000000 !important;
    color: #ffffff !important;
    border: 1px solid #222222 !important;
    padding: 12px !important;
    border-radius: 8px !important;
}

input:focus {
    border-color: #ff3131 !important;
}

/* === BREADCRUMB HOVER FIX === */
.back-link:hover {
    color: #ff3131 !important;
}