/*
 * =============================================
 * THE HALAL VILLAGE - EDUCATION THEME
 * =============================================
 *
 * Theme Name:         THV Education
 * Version:            2.0.0
 * Theme URI:          https://thehalalvillage.nl/
 * Description:        Custom WordPress theme for The Halal Village Education platform
 * Author:             The Halal Village
 * Author URI:         https://thehalalvillage.nl/
 * Text Domain:        thv-education
 *
 * Design System Colors:
 * - Primary Navy:     #1B3A5D
 * - Accent Cyan:      #00C4CC
 * - Background Cream: #F7F5EF
 * - Badge Green:      #22C55E
 * - Text Gray:        #6B7280
 *
 */

/* =============================================
   Global Utility Classes
   ============================================= */

/* Text Colors */
.text-navy { color: #1B3A5D !important; }
.text-cyan { color: #00C4CC !important; }
.text-gray { color: #6B7280 !important; }
.text-white { color: #FFFFFF !important; }
.text-green { color: #22C55E !important; }

/* Background Colors */
.bg-navy { background-color: #1B3A5D !important; }
.bg-cyan { background-color: #00C4CC !important; }
.bg-cream { background-color: #F7F5EF !important; }
.bg-white { background-color: #FFFFFF !important; }
.bg-green { background-color: #22C55E !important; }

/* Font Families */
.font-futura { font-family: "futura-pt", sans-serif !important; }
.font-adelle { font-family: "adelle", serif !important; }

/* Font Weights */
.fw-400 { font-weight: 400 !important; }
.fw-500 { font-weight: 500 !important; }
.fw-600 { font-weight: 600 !important; }
.fw-700 { font-weight: 700 !important; }

/* Border Radius */
.rounded-sm { border-radius: 8px !important; }
.rounded-md { border-radius: 12px !important; }
.rounded-lg { border-radius: 16px !important; }
.rounded-full { border-radius: 9999px !important; }

/* Shadows */
.shadow-sm { box-shadow: 0 2px 8px rgba(27, 58, 93, 0.06) !important; }
.shadow-md { box-shadow: 0 4px 16px rgba(27, 58, 93, 0.1) !important; }
.shadow-lg { box-shadow: 0 8px 24px rgba(27, 58, 93, 0.12) !important; }

/* =============================================
   Typography
   ============================================= */
h1, h2, h3, h4, h5, h6 {
    font-family: "futura-pt", sans-serif;
    color: #1B3A5D;
    font-weight: 700;
    margin: 0 0 0.5rem 0;
    line-height: 1.3;
}

p {
    font-family: "adelle", serif;
    color: #6B7280;
    line-height: 1.6;
    margin: 0 0 1rem 0;
}

a {
    color: #00C4CC;
    text-decoration: none;
    transition: color 0.2s ease;
}

a:hover {
    color: #1B3A5D;
}

/* =============================================
   Form Elements
   ============================================= */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="url"],
textarea,
select {
    font-family: "adelle", serif;
    font-size: 16px;
    padding: 12px 16px;
    border: 2px solid #D9D9D9;
    border-radius: 8px;
    background: #FFFFFF;
    color: #1B3A5D;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

input:focus,
textarea:focus,
select:focus {
    outline: none;
    border-color: #00C4CC;
    box-shadow: 0 0 0 3px rgba(0, 196, 204, 0.1);
}

/* =============================================
   Cards
   ============================================= */
.card {
    background: #FFFFFF;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(27, 58, 93, 0.06);
    overflow: hidden;
}

.card-body {
    padding: 1.5rem;
}

/* =============================================
   Animations
   ============================================= */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes slideUp {
    from { 
        opacity: 0;
        transform: translateY(20px);
    }
    to { 
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fadeIn {
    animation: fadeIn 0.3s ease forwards;
}

.animate-slideUp {
    animation: slideUp 0.4s ease forwards;
}

/* =============================================
   MemberPress Registration & Checkout Styles
   ============================================= */

/* Main Form Container */
.mp_wrapper {
    margin: 0 auto 2rem auto;
    padding: 2rem;
    background: #FFFFFF;
    border-radius: 16px;
    box-shadow: 0 4px 24px rgba(27, 58, 93, 0.08);
}

/* Page Background for MemberPress pages */
.mepr-membership-register-form,
.single-memberpressproduct {
    background-color: #F7F5EF;
}

/* Form Header - Subscription Terms */
.mp_wrapper .mepr_price_cell,
.mp_wrapper .mepr-product-price {
    font-family: "futura-pt", sans-serif;
    font-size: 1.25rem;
    font-weight: 700;
    color: #1B3A5D;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid #F7F5EF;
}

/* Form Labels */
.mp_wrapper label,
.mp_wrapper .mepr-form-label {
    display: block;
    font-family: "futura-pt", sans-serif;
    font-size: 0.9rem;
    font-weight: 600;
    color: #1B3A5D;
    margin-bottom: 0.5rem;
    letter-spacing: 0.02em;
}

/* Required Field Asterisk */
.mp_wrapper .mepr-form-required,
.mp_wrapper .cc-required {
    color: #00C4CC;
    margin-left: 2px;
}

/* Form Inputs */
.mp_wrapper input[type="text"],
.mp_wrapper input[type="email"],
.mp_wrapper input[type="password"],
.mp_wrapper input[type="tel"],
.mp_wrapper input[type="url"],
.mp_wrapper input[type="number"],
.mp_wrapper input[type="date"],
.mp_wrapper select,
.mp_wrapper textarea {
    width: 100%;
    padding: 14px 16px;
    font-family: "adelle", serif;
    font-size: 16px;
    color: #1B3A5D;
    background: #FFFFFF;
    border: 2px solid #E5E7EB;
    border-radius: 10px;
    transition: all 0.2s ease;
    box-sizing: border-box;
    -webkit-appearance: none;
    appearance: none;
}

.mp_wrapper input[type="text"]:focus,
.mp_wrapper input[type="email"]:focus,
.mp_wrapper input[type="password"]:focus,
.mp_wrapper input[type="tel"]:focus,
.mp_wrapper input[type="url"]:focus,
.mp_wrapper input[type="number"]:focus,
.mp_wrapper input[type="date"]:focus,
.mp_wrapper select:focus,
.mp_wrapper textarea:focus {
    outline: none;
    border-color: #00C4CC;
    box-shadow: 0 0 0 4px rgba(0, 196, 204, 0.1);
}

.mp_wrapper input::placeholder {
    color: #9CA3AF;
}

/* Form Row Spacing */
.mp_wrapper .mp-form-row,
.mp_wrapper .mepr-form-row {
    margin-bottom: 1.25rem;
}

/* Coupon Link */
.mp_wrapper .mepr-has-coupon-link,
.mp_wrapper a.mepr-coupon-link {
    display: inline-block;
    font-family: "futura-pt", sans-serif;
    font-size: 0.9rem;
    font-weight: 600;
    color: #00C4CC;
    text-decoration: none;
    margin: 0.75rem 0 1.5rem;
    transition: color 0.2s ease;
}

.mp_wrapper a.mepr-coupon-link:hover {
    color: #1B3A5D;
}

/* Coupon Input Field */
.mp_wrapper .mepr-coupon-code-field {
    margin-bottom: 1.5rem;
}

/* Payment Methods Section */
.mp_wrapper .mepr_payment_method {
    margin: 1.5rem 0 !important;
    padding: 1.25rem !important;
    background-color: #F7F5EF !important;
    border-radius: 12px !important;
    border: none !important;
}

.mp_wrapper .mepr-payment-methods-wrapper h4,
.mp_wrapper .mepr_payment_methods_heading {
    font-family: "futura-pt", sans-serif;
    font-size: 1rem;
    font-weight: 700;
    color: #1B3A5D;
    margin-bottom: 1rem;
    letter-spacing: 0.02em;
}

/* Payment Method Radio Buttons */
.mp_wrapper .mepr-payment-method {
    display: flex;
    align-items: center;
    padding: 1rem;
    background: #FFFFFF;
    border-radius: 10px;
    margin-bottom: 0.75rem;
    border: 2px solid transparent;
    transition: all 0.2s ease;
    cursor: pointer;
}

.mp_wrapper .mepr-payment-method:hover {
    border-color: #E5E7EB;
}

.mp_wrapper .mepr-payment-method:last-child {
    margin-bottom: 0;
}

.mp_wrapper .mepr-payment-method input[type="radio"] {
    width: 20px;
    height: 20px;
    margin: 0;
    accent-color: #00C4CC;
    cursor: pointer;
    flex-shrink: 0;
}

.mp_wrapper .mepr-payment-method .mepr-payment-method-label-text {
    font-family: "futura-pt", sans-serif;
    font-size: 0.95rem;
    font-weight: 500;
    color: #1B3A5D;
    padding-left: 12px;
}

.mp_wrapper .mepr-payment-method .mepr-payment-method-icon {
    margin-left: auto;
    padding-left: 12px;
}

.mp_wrapper .mepr-payment-method .mepr-payment-method-icon img {
    height: 24px !important;
    width: auto;
}

/* Selected Payment Method */
.mp_wrapper .mepr-payment-method.selected,
.mp_wrapper .mepr-payment-method:has(input:checked) {
    border-color: #00C4CC;
    background: rgba(0, 196, 204, 0.03);
}

/* Payment Method Description */
.mp_wrapper .mepr-payment-method .mepr-payment-method-desc-text {
    font-family: "adelle", serif;
    font-size: 0.85rem;
    color: #6B7280;
    margin-top: 0.75rem;
    padding: 0.75rem;
    background: #F7F5EF;
    border-radius: 8px;
}

/* Submit Button */
.mp_wrapper input[type="submit"],
.mp_wrapper button[type="submit"],
.mp_wrapper .mepr-submit {
    display: inline-block;
    width: auto;
    min-width: 160px;
    padding: 14px 32px;
    font-family: "futura-pt", sans-serif;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #FFFFFF;
    background-color: #00C4CC;
    border: none;
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-top: 1rem;
}

.mp_wrapper input[type="submit"]:hover,
.mp_wrapper button[type="submit"]:hover,
.mp_wrapper .mepr-submit:hover {
    background-color: #00B3BA;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 196, 204, 0.3);
}

.mp_wrapper input[type="submit"]:active,
.mp_wrapper button[type="submit"]:active,
.mp_wrapper .mepr-submit:active {
    transform: translateY(0);
}

/* Checkbox Styling */
.mp_wrapper input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: #00C4CC;
    cursor: pointer;
}

.mp_wrapper .mepr-form-checkbox-label {
    font-family: "adelle", serif;
    font-size: 0.9rem;
    color: #6B7280;
    cursor: pointer;
}

/* Custom Checkbox Fields */
.mp_wrapper .mepr_custom_field {
    margin-bottom: 1rem;
}

.mp_wrapper .mepr_custom_field label {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    cursor: pointer;
}

/* Validation Error Messages */
.mp_wrapper .mepr-form-has-errors,
.mp_wrapper .mepr-validation-error {
    font-family: "adelle", serif;
    font-size: 0.85rem;
    color: #DC2626 !important;
    margin-top: 0.35rem;
}

/* Success Messages */
.mp_wrapper .cc-success {
    font-family: "adelle", serif;
    font-size: 0.85rem;
    color: #22C55E !important;
}

/* Terms & Privacy Links */
.mp_wrapper .mepr-terms-link,
.mp_wrapper .mepr-privacy-link {
    color: #00C4CC;
    text-decoration: none;
    font-weight: 500;
}

.mp_wrapper .mepr-terms-link:hover,
.mp_wrapper .mepr-privacy-link:hover {
    color: #1B3A5D;
    text-decoration: underline;
}

/* Password Strength Meter */
.mp_wrapper .mepr-password-strength-meter {
    margin-top: 0.5rem;
    padding: 0.5rem;
    border-radius: 6px;
    font-family: "futura-pt", sans-serif;
    font-size: 0.8rem;
}

/* Price Summary Box */
.mp_wrapper .mepr-price-summary {
    background: #F7F5EF;
    padding: 1.25rem;
    border-radius: 12px;
    margin: 1.5rem 0;
}

.mp_wrapper .mepr-price-summary .mepr-price-summary-row {
    display: flex;
    justify-content: space-between;
    font-family: "adelle", serif;
    color: #6B7280;
    padding: 0.5rem 0;
    border-bottom: 1px solid #E5E7EB;
}

.mp_wrapper .mepr-price-summary .mepr-price-summary-row:last-child {
    border-bottom: none;
    font-family: "futura-pt", sans-serif;
    font-weight: 700;
    color: #1B3A5D;
    font-size: 1.1rem;
}

/* Card Input Icons */
.mp_wrapper .mepr-cc-field-wrapper {
    position: relative;
}

.mp_wrapper .mepr-cc-field-wrapper .mepr-cc-icon {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
}

/* Loading State */
.mp_wrapper .mepr-loading-gif,
.mp_wrapper .mepr-ajax-loading {
    display: inline-block;
    margin-left: 10px;
    vertical-align: middle;
}

/* Responsive Styles */
@media screen and (max-width: 768px) {
    .mp_wrapper {
        padding: 1.5rem;
        margin: 1rem;
        border-radius: 12px;
    }
    
    .mp_wrapper .mepr_payment_method {
        padding: 1rem !important;
    }
    
    .mp_wrapper .mepr-payment-method {
        padding: 0.85rem;
    }
    
    .mp_wrapper input[type="submit"],
    .mp_wrapper button[type="submit"],
    .mp_wrapper .mepr-submit {
        width: 100%;
        text-align: center;
    }
}

/* Remove default WordPress form styling conflicts */
.mp_wrapper input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]),
.mp_wrapper select,
.mp_wrapper textarea {
    box-shadow: none !important;
}

/* Password visibility toggle button styling */
.mp_wrapper .mepr-password-toggle {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: #6B7280;
    cursor: pointer;
    padding: 4px;
}

.mp_wrapper .mepr-password-toggle:hover {
    color: #1B3A5D;
}

/* Membership selection styling (for group pages) */
.mepr-membership-options {
    display: grid;
    gap: 1rem;
}

.mepr-membership-option {
    background: #FFFFFF;
    border: 2px solid #E5E7EB;
    border-radius: 12px;
    padding: 1.5rem;
    transition: all 0.2s ease;
    cursor: pointer;
}

.mepr-membership-option:hover {
    border-color: #00C4CC;
}

.mepr-membership-option.selected {
    border-color: #00C4CC;
    background: rgba(0, 196, 204, 0.03);
}

.mepr-membership-option .mepr-membership-title {
    font-family: "futura-pt", sans-serif;
    font-size: 1.1rem;
    font-weight: 700;
    color: #1B3A5D;
    margin-bottom: 0.5rem;
}

.mepr-membership-option .mepr-membership-price {
    font-family: "futura-pt", sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    color: #00C4CC;
}

/* =============================================
   Legacy Support (deprecated - will be removed)
   ============================================= */
/* Old module styles kept for backward compatibility */
.modules-container-legacy .module-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    color: #3a4346;
}