/*
Theme Name: Hello Elementor Child Pro
Description: Advanced Child Theme with Elementor & WooCommerce Support
Author: Your Name
Template: hello-elementor
Version: 2.0
*/

/* ===== GLOBAL FONT FIX (ELEMENTOR) ===== */
:root {
    --e-global-typography-primary-font-family: 'Outfit';
    --e-global-typography-text-font-family: 'Poppins';
}

/* ===== BASE TYPOGRAPHY ===== */
body {
    font-family: 'Poppins', sans-serif !important;
    font-weight: 400 !important;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Outfit', sans-serif !important;
    font-weight: 600 !important;
}

/* ===== WOOCOMMERCE ===== */
.custom-woocommerce-wrapper {
    padding: 20px;
}

.woocommerce ul.products li.product {
    border: 1px solid #eee;
    padding: 15px;
    transition: 0.3s;
}

.woocommerce ul.products li.product:hover {
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.button {
    background: #000;
    color: #fff;
}

/* ===== HOW IT WORKS ===== */
.ecg-how-it-works {
    background: linear-gradient(135deg, #0B1F3A, #07101f);
    padding: 80px 20px;
    text-align: center;
    color: #fff;
}

.ecg-title {
    font-size: 36px;
    margin-bottom: 10px;
}

.ecg-subtitle {
    color: #cbd5e1;
    margin-bottom: 50px;
}

.ecg-steps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 25px;
    position: relative;
}

.ecg-step {
    background: #111827;
    padding: 30px;
    border-radius: 15px;
    transition: 0.3s;
    position: relative;
}

.ecg-step:hover {
    transform: translateY(-10px);
    box-shadow: 0 10px 30px rgba(0, 229, 255, 0.3);
}

.ecg-icon {
    font-size: 30px;
    margin-bottom: 15px;
    color: #00E5FF;
}

.ecg-step h3 {
    font-size: 18px;
    margin-bottom: 10px;
}

.ecg-step p {
    font-size: 14px;
    color: #9ca3af;
}

/* ===== RESPONSIVE ===== */
@media(max-width: 768px) {
    .ecg-steps {
        grid-template-columns: 1fr;
    }
}

/* ===== FORM STYLING ===== */
span.copy {
    color: #f5f5f5 !important;
}

.nf-field-label {
    display: none !important;
}

div#nf-form-1-cont {
    background: #111827 !important;
    padding: 30px;
    border-radius: 12px;
    border: 1px solid rgba(0, 229, 255, 0.2);
}

.field-wrap button,
.field-wrap input[type=button],
.field-wrap input[type=submit],
.field-wrap > div input[type=checkbox] {
    width: 100% !important;
    background: linear-gradient(90deg, #00E5FF, #007CF0);
    border: none;
    color: #000;
    font-weight: bold;
    border-radius: 6px;
    cursor: pointer;
}

.label-above .nf-field-element,
.label-below .nf-field-element {
    margin: 0;
    width: 100%;
    font-size: 15px !important;
    font-family: 'Poppins', sans-serif !important;
}

.nf-error .ninja-forms-field,
.nf-error.listimage-wrap .nf-field-element ul {
    border: 1px solid #e80000 !important;
    background: #1f2933 !important;
}

.nf-form-fields-required {
    color: #DBD3D3 !important;
}

div#nf-field-4-wrap {
    width: 100% !important;
    background: linear-gradient(90deg, #00E5FF, #007CF0);
    border: none;
    color: #000;
    font-weight: bold;
    border-radius: 6px;
    cursor: pointer;
}

input[type=date],
input[type=email],
input[type=number],
input[type=password],
input[type=search],
input[type=tel],
input[type=text],
input[type=url],
select,
textarea {
    border: 1px solid #666;
    border-radius: 3px;
    padding: .5rem 1rem;
    transition: all .3s;
    width: 100%;
    background: #1f2933 !important;
}

.nf-field-element textarea {
    line-height: 1.5;
    height: 120px;
    max-height: 100px !important;
    resize: vertical;
}

.nf-field-element input,
.nf-field-element select,
.nf-field-element textarea {
    color: #fff !important;
    font-size: 15px !important;
    font-family: 'Poppins', sans-serif !important;
}

.ninja-forms-form-wrap *,
.ninja-forms-form-wrap:after,
.ninja-forms-form-wrap:before {
    box-sizing: border-box;
    color: #fff !important;
    font-size: 15px !important;
    font-family: 'Poppins', sans-serif !important;
}

/* ===== MENU OVERLAY ===== */
.elementskit-menu-overlay {
    background: rgba(0,0,0,0.4) !important;
}