/*
Theme Name: FOREST GREEN THEME
Author: Launchpad Studio
Description: A minimalist, high-end directory theme.
Version: 1.4
*/

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root {
    --bg-main: #f5f6f2; 
    --sidebar-bg: #e6ebe0; 
    --card-bg: #ffffff;
    --primary-dark: #053b28; 
    --primary-light: #6a8c76;
    --text-main: #1a1a1a;
    --text-muted: #6b7264;
    --accent-red: #d34a4a;
    --radius-card: 28px;
    --radius-pill: 50px;
    --shadow-soft: 0 15px 40px rgba(0,0,0,0.03);
}

body { background-color: var(--bg-main); color: var(--text-main); font-family: 'Inter', sans-serif; margin: 0; padding: 0; -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4 { color: var(--text-main); font-weight: 700; letter-spacing: -0.03em; }
img { max-width: 100%; height: auto; border-radius: 16px; }

/* Global UI Elements */
.nk-card { background: var(--card-bg); border-radius: var(--radius-card); padding: 40px; box-shadow: var(--shadow-soft); margin-bottom: 30px; }
.nk-button { background: var(--primary-dark); color: white; border: none; border-radius: var(--radius-pill); padding: 14px 28px; font-weight: 600; font-size: 0.9rem; cursor: pointer; transition: 0.3s; text-decoration: none; display: inline-block; text-align: center; }
.nk-button:hover { opacity: 0.9; transform: translateY(-1px); }
.nk-badge { background: var(--primary-dark); color: white; font-size: 0.7rem; font-weight: 700; padding: 6px 16px; border-radius: var(--radius-pill); text-transform: uppercase; letter-spacing: 0.1em; display: inline-block; }
.nk-badge.alert { background: var(--accent-red); }

/* Layout Grid & Responsiveness */
.nk-container { max-width: 1400px; margin: 0 auto; padding: 40px; box-sizing: border-box; }
.nk-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 40px; }

/* Dashboard Layout */
.nk-dashboard-layout { display: flex; min-height: 100vh; background-color: var(--bg-main); }
.nk-sidebar { width: 280px; background: var(--sidebar-bg); padding: 40px 24px; flex-shrink: 0; border-right: 1px solid rgba(0,0,0,0.03); box-sizing: border-box; }
.nk-sidebar-nav ul { list-style: none; padding: 0; margin: 0; }
.nk-sidebar-nav ul li { margin-bottom: 8px; }
.nk-sidebar-nav ul li a { display: flex; align-items: center; padding: 14px 20px; color: var(--text-main); text-decoration: none; font-weight: 600; font-size: 0.95rem; border-radius: 14px; transition: 0.2s; }
.nk-sidebar-nav ul li a:hover { background: rgba(255,255,255,0.5); }
.nk-sidebar-nav ul li a.active, .nk-sidebar-nav ul li a[href*="my-account"] { background: var(--primary-dark); color: white; }
.nk-content { flex-grow: 1; padding: 40px; max-width: 1200px; margin: 0 auto; box-sizing: border-box; width: 100%; }

/* Gradient Hero */
.nk-gradient-hero { background: linear-gradient(135deg, var(--primary-dark) 0%, #688e73 100%); border-radius: var(--radius-card); padding: 70px 50px; color: white; margin-bottom: 40px; box-shadow: 0 20px 40px rgba(5, 59, 40, 0.15); }
.nk-gradient-hero h1 { color: white; margin-top: 16px; font-size: 3.5rem; line-height: 1.1; }

/* Auto-Card Logic for Standard Pages (Issue #2 Fix) */
/* If using standard WP Editor, make top level items into cards */
.nk-page-builder-area > p, .nk-page-builder-area > h2, .nk-page-builder-area > h3, .nk-page-builder-area > ul, .nk-page-builder-area > .wp-block-group, .nk-page-builder-area > div:not(.elementor) { background: var(--card-bg); border-radius: var(--radius-card); padding: 40px; box-shadow: var(--shadow-soft); margin-bottom: 30px; box-sizing: border-box; }
/* If Elementor is active, strip this so Elementor can handle its own sections */
body.elementor-page .nk-page-builder-area > * { background: transparent; padding: 0; box-shadow: none; border-radius: 0; margin-bottom: 0; }

/* --- WOOCOMMERCE DEEP STYLING (Issue #1 Fix) --- */
.woocommerce a { text-decoration: none; }
.woocommerce .woocommerce-info, .woocommerce .woocommerce-error, .woocommerce .woocommerce-message { background: white; border-top: none; border-radius: 12px; box-shadow: var(--shadow-soft); color: var(--text-main); padding: 20px 20px 20px 60px; margin-bottom: 30px; position: relative; box-sizing: border-box; width: 100%; }

.woocommerce .woocommerce-info::before, .woocommerce .woocommerce-error::before, .woocommerce .woocommerce-message::before { top: 20px; left: 20px; }
.woocommerce button.button, .woocommerce a.button { background-color: var(--primary-dark) !important; color: white !important; border-radius: var(--radius-pill) !important; padding: 12px 24px !important; font-weight: 600 !important; font-family: 'Inter', sans-serif !important; border: none !important; text-align: center; }
.woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea { border-radius: 12px !important; border: 1px solid #d1d5cb !important; padding: 16px !important; background: #fafafa !important; font-family: 'Inter', sans-serif; width: 100%; box-sizing: border-box; }
.woocommerce-MyAccount-navigation { width: 100% !important; float: none !important; margin-bottom: 30px; }
.woocommerce-MyAccount-navigation ul { list-style: none; padding: 0; display: flex; gap: 10px; flex-wrap: wrap; }
.woocommerce-MyAccount-navigation ul li a { text-decoration: none; color: var(--text-main); font-weight: 600; display: block; padding: 12px 24px; border-radius: var(--radius-pill); background: var(--card-bg); box-shadow: 0 6px 16px rgba(0,0,0,0.08); font-size: 0.9rem; transition: all 0.3s ease; }
.woocommerce-MyAccount-navigation ul li.is-active a { background: var(--primary-dark); color: white; }
.woocommerce-MyAccount-content { width: 100% !important; float: none !important; }


/* WooCommerce Shop Grid & Products */
.woocommerce ul.products { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.woocommerce ul.products::before, .woocommerce ul.products::after { display: none !important; }
.woocommerce ul.products li.product { background: var(--card-bg); border-radius: 20px; padding: 20px; text-align: left; border: 1px solid #f0f0f0; transition: transform 0.3s; display: flex; flex-direction: column; width: 100% !important; margin: 0 !important; box-sizing: border-box; }
.woocommerce ul.products li.product:hover { transform: translateY(-5px); box-shadow: var(--shadow-soft); }
.woocommerce-loop-product__title { font-size: 1.2rem !important; color: var(--text-main) !important; margin: 15px 0 10px 0 !important; font-weight: 700 !important; }
.woocommerce span.price { color: var(--primary-dark) !important; font-weight: 700 !important; font-size: 1.1rem !important; margin-bottom: 20px; display: block; }
.woocommerce ul.products li.product .button { margin-top: auto; width: 100%; box-sizing: border-box; }
.woocommerce nav.woocommerce-pagination ul { border: none !important; margin-top: 40px !important; }
.woocommerce nav.woocommerce-pagination ul li { border: none !important; }
.woocommerce nav.woocommerce-pagination ul li a, .woocommerce nav.woocommerce-pagination ul li span { background: var(--card-bg) !important; border-radius: 12px !important; margin: 0 5px; padding: 12px 20px !important; color: var(--text-main); font-weight: 600; box-shadow: var(--shadow-soft); border: none !important; }
.woocommerce nav.woocommerce-pagination ul li span.current { background: var(--primary-dark) !important; color: white !important; }

/* --- WOOCOMMERCE CHECKOUT 2-COLUMN LAYOUT & ERROR HANDLING --- */
@media (min-width: 992px) {
    .woocommerce form.checkout {
        display: grid;
        grid-template-columns: 1.2fr 1fr;
        column-gap: 60px; /* Clean, sleek spacing */
        row-gap: 0; /* Forces elements to sit flush, removing empty spaces */
        align-items: start;
    }
    
    /* Force Error messages to top, spanning both columns */
    .woocommerce-NoticeGroup-checkout,
    .woocommerce-error,
    .woocommerce-message,
    .woocommerce-info {
        grid-column: 1 / -1;
        width: 100%;
        margin-bottom: 30px;
    }

    /* Left Column: Billing Details (Spans multiple rows so it doesn't push right column down) */
    .woocommerce-checkout #customer_details {
        grid-column: 1;
        grid-row: 2 / 4; 
        width: 100% !important;
        float: none !important;
        margin: 0;
    }
    .woocommerce-checkout .col2-set {
        width: 100% !important;
    }
    .woocommerce-checkout .col2-set .col-1, 
    .woocommerce-checkout .col2-set .col-2 {
        width: 100% !important;
        float: none !important;
        margin-bottom: 20px;
    }

    /* Right Column Top: Order Heading */
    #order_review_heading {
        grid-column: 2;
        grid-row: 2;
        margin-top: 0;
        margin-bottom: 15px;
    }

    /* Right Column Bottom: Order Table/Payment */
    .woocommerce-checkout #order_review {
        grid-column: 2;
        grid-row: 3;
        background: var(--bg-main);
        padding: 40px;
        border-radius: var(--radius-card);
        box-sizing: border-box;
        margin: 0;
    }
}
/* --- MOBILE RESPONSIVENESS (Issue #3 & #4 Fix) --- */
@media (max-width: 992px) {
    .nk-grid { grid-template-columns: 1fr; gap: 30px; }
}

@media (max-width: 768px) {
    .nk-container { padding: 20px; }
    .nk-gradient-hero { padding: 40px 24px; }
    .nk-gradient-hero h1 { font-size: 2.5rem; }
    
    /* Mobile Dashboard Overrides */
    .nk-dashboard-layout { flex-direction: column; }
    .nk-sidebar { width: 100%; padding: 20px; border-right: none; border-bottom: 1px solid rgba(0,0,0,0.05); }
    .nk-sidebar-nav ul { display: flex; overflow-x: auto; gap: 10px; padding-bottom: 10px; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
    .nk-sidebar-nav ul::-webkit-scrollbar { display: none; }
    .nk-sidebar-nav ul li { margin-bottom: 0; }
    .nk-sidebar-nav ul li a { white-space: nowrap; padding: 10px 16px; }
    .nk-content { padding: 20px; }
    
    .nk-card { padding: 24px; }
    
    /* Mobile Woo Navigation */
    .woocommerce-MyAccount-navigation ul { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 10px; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
    .woocommerce-MyAccount-navigation ul::-webkit-scrollbar { display: none; }
    .woocommerce-MyAccount-navigation ul li a { white-space: nowrap; }
}

@media (max-width: 480px) {
    /* Force 1 column and standard spacing */
    .woocommerce ul.products, .woocommerce ul.products[class] { grid-template-columns: 1fr !important; gap: 24px !important; }
    
    /* Ensure the product card stretches completely across the container */
    .woocommerce ul.products li.product { width: 100% !important; padding: 24px !important; margin: 0 !important; box-sizing: border-box !important; }
    
    /* Restore standard title size for full-width cards */
    .woocommerce-loop-product__title { font-size: 1.2rem !important; }
}

/* --- META BOX SETTING FUNCTIONALITY --- */
/* 1. Container Widths */
.nk-layout-full-width .nk-container { max-width: 100%; padding-left: 0; padding-right: 0; }
.nk-layout-narrow .nk-container { max-width: 800px; }

/* 2. Unboxed Content (Removes white cards/shadows from blocks) */
.nk-style-unboxed .nk-page-builder-area > p, 
.nk-style-unboxed .nk-page-builder-area > h2, 
.nk-style-unboxed .nk-page-builder-area > h3, 
.nk-style-unboxed .nk-page-builder-area > ul, 
.nk-style-unboxed .nk-page-builder-area > div:not(.elementor) { background: transparent; box-shadow: none; padding: 0; }

/* 3. Transparent Header Overlay */
.nk-transparent-header .nk-main-header { background: transparent !important; position: absolute; width: 100%; box-sizing: border-box; }

/* 4. Disable Mobile Header */
@media (max-width: 768px) {
    .nk-disable-mobile-header .nk-main-header { display: none !important; }
}

/* --- GLOBAL BUTTON HOVER EFFECTS --- */
button, 
input[type="button"], 
input[type="submit"], 
.button, 
.btn, 
.elementor-button {
    transition: all 0.3s ease !important;
}

button:hover, 
input[type="button"]:hover, 
input[type="submit"]:hover, 
.button:hover, 
.btn:hover, 
.elementor-button:hover {
    transform: translateY(-1px) !important;
    opacity: 0.9 !important;
}
/* === FIX CHECKOUT ORDER SPACING (FOREST GREEN THEME) === */

/* Remove excessive space under "Your order" */
.woocommerce-checkout #order_review_heading {
    margin-bottom: 8px !important;
}

/* Remove top gap before order box */
.woocommerce-checkout #order_review {
    margin-top: 0 !important;
    padding-top: 32px !important;   /* ← This is the fix */
}

/* Optional: tighten heading globally for Woo sections */
.woocommerce-checkout h3 {
    margin-top: 0;
}
/* --- NEW KISUMU ANIMATION ENGINE --- */
@keyframes nkFadeUp {
    0% { opacity: 0; transform: translateY(30px); }
    100% { opacity: 1; transform: translateY(0); }
}

@keyframes nkFloat {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-8px); }
    100% { transform: translateY(0px); }
}

@keyframes nkPulseGlow {
    0% { box-shadow: 0 0 0 0 rgba(5, 59, 40, 0.2); }
    70% { box-shadow: 0 0 0 15px rgba(5, 59, 40, 0); }
    100% { box-shadow: 0 0 0 0 rgba(5, 59, 40, 0); }
}

/* Base Animation Classes */
.nk-anim-fade-up { animation: nkFadeUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards; opacity: 0; }
.nk-anim-delay-1 { animation-delay: 0.1s; }
.nk-anim-delay-2 { animation-delay: 0.2s; }
.nk-anim-delay-3 { animation-delay: 0.3s; }

/* Interactive Hover States */
.nk-hover-lift { transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease; }
.nk-hover-lift:hover { transform: translateY(-6px); box-shadow: 0 25px 50px rgba(5, 59, 40, 0.08); border-color: transparent; }

/* Continuous Elements */
.nk-float { animation: nkFloat 5s ease-in-out infinite; }
.nk-pulse { animation: nkPulseGlow 2s infinite; }

/* Clean Step-Based Grid */
.nk-step-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 30px; }
.nk-step-card { background: var(--bg-main); border-radius: 20px; padding: 30px; border: 1px solid rgba(0,0,0,0.03); position: relative; overflow: hidden; }