/* ================================
   CHOPSMO DESIGN SYSTEM - QUICK REFERENCE GUIDE
   ================================
   
   🎨 BUTTON CUSTOMIZATION AREAS:
   - Button Colors: Lines 180-350 (.btn-primary, .btn-outline, etc.)
   - Button Shapes: Line 180 (.btn border-radius)
   - Button Sizes: Lines 280-320 (.btn-large, padding)
   - Button Hover Effects: Lines 220-350 (:hover states)
   
   🌈 COLOR CUSTOMIZATION AREAS:
   - Primary Colors: Lines 4-15 (--primary-50 to --primary-900)
   - Background Colors: Lines 90-95 (--bg-gradient-*)
   - Text Colors: Lines 60-70 (--dark-color, --gray-color)
   - Status Colors: Lines 75-80 (success, warning, danger)
   
   📱 BACKGROUND CUSTOMIZATION AREAS:
   - Page Backgrounds: Lines 140-145 (body background)
   - Section Backgrounds: Lines 700+ (.hero, .features, etc.)
   - Card Backgrounds: Lines 800+ (.feature-card, etc.)
   
   ⚡ QUICK EDIT ZONES:
   - Change ALL button colors: Modify --primary-color (Line 25)
   - Change ALL backgrounds: Modify --bg-gradient-primary (Line 90)
   - Change button roundness: Modify --border-radius (Line 110)
   ================================ */

/* ChopSmo - Original Sharp Green Color System */
:root {
    /* 🎨 PRIMARY COLOR PALETTE - MAIN BRAND COLORS 
       ===============================================
       💡 EDIT THESE TO CHANGE THE ENTIRE SITE COLOR SCHEME
       💡 These colors control buttons, links, highlights, and accents
       =============================================== */
    --primary-50: #F1F8E9;          /* 🌱 Lightest green - subtle backgrounds */
    --primary-100: #DCEDC8;         /* 🌱 Light green - card hover states */
    --primary-200: #C5E1A5;         /* 🌱 Soft green - accent backgrounds */
    --primary-300: #AED581;         /* 🌱 Medium light green - secondary buttons */
    --primary-400: #9CCC65;         /* 🌱 Balanced green - active states */
    --primary-500: #8BC34A;         /* 🌱 Core brand green - main elements */
    --primary-600: #7CB342;         /* 🌱 Rich green - primary buttons */
    --primary-700: #689F38;         /* 🌱 Deep green - hover effects */
    --primary-800: #558B2F;         /* 🌱 Dark green - pressed states */
    --primary-900: #33691E;         /* 🌱 Deepest green - text on light backgrounds */
    
    /* 🖤 BLACK & DARK COLOR SYSTEM
       ===============================================
       💡 EDIT THESE TO CHANGE TEXT AND DARK ELEMENT COLORS
       💡 These control text readability and contrast
       =============================================== */
    --black: #000000;                /* ⚫ Pure black - high contrast text */
    --black-soft: #0D0D0D;          /* ⚫ Soft black - main text color */
    --black-light: #1A1A1A;         /* ⚫ Light black - card backgrounds */
    --black-medium: #333333;        /* ⚫ Medium black - secondary text */
    --black-alpha-05: rgba(0, 0, 0, 0.05);   /* ⚫ Very subtle shadows */
    --black-alpha-10: rgba(0, 0, 0, 0.1);    /* ⚫ Light shadows */
    --black-alpha-20: rgba(0, 0, 0, 0.2);    /* ⚫ Medium shadows */
    --black-alpha-30: rgba(0, 0, 0, 0.3);    /* ⚫ Strong shadows */
    --black-alpha-50: rgba(0, 0, 0, 0.5);    /* ⚫ Heavy overlays */
    --black-alpha-70: rgba(0, 0, 0, 0.7);    /* ⚫ Modal backgrounds */
    
    /* 🎯 MAIN SEMANTIC COLORS - THESE CONTROL THE OVERALL LOOK
       ===============================================
       💡 CHANGE THESE FOR INSTANT SITE-WIDE COLOR UPDATES
       💡 These are the most important colors to customize
       =============================================== */
    --primary-color: #228B22;                    /* 🔥 MAIN BUTTON COLOR - Primary buttons, links, highlights */
    --primary-light: #32CD32;                    /* 🔥 BUTTON HOVER COLOR - Bright effects and accents */
    --primary-lighter: #90EE90;                  /* 🔥 SUBTLE HIGHLIGHTS - Light backgrounds and borders */
    --primary-accent: #006400;                   /* 🔥 DARK ACCENT COLOR - Button borders and text */
    --primary-dark: #013220;                     /* 🔥 DEEP COLOR - Pressed states and dark text */
    
    /* 🇨🇲 CAMEROON FLAG COLORS - SPECIAL THEME COLORS
       ===============================================
       💡 EDIT THESE FOR CAMEROON-SPECIFIC BRANDING
       💡 Used for special buttons and accent elements
       =============================================== */
    --cameroon-green: #228B22;                   /* 🇨🇲 Cameroon flag green */
    --cameroon-red: #DC143C;                     /* 🇨🇲 Cameroon flag red - error/danger buttons */
    --cameroon-yellow: #FFD700;                  /* 🇨🇲 Cameroon flag yellow - warning/accent buttons */
    
    /* 🌈 SHARP ACCENT COLORS - ALTERNATIVE BUTTON COLORS
       ===============================================
       💡 EDIT THESE FOR ALTERNATIVE BUTTON STYLES
       💡 Use these for secondary actions and special buttons
       =============================================== */
    --accent-orange: #FF6B35;                    /* 🧡 Bold orange - CTA buttons and highlights */
    --accent-green: #32CD32;                     /* 💚 Lime green - success buttons */
    --accent-purple: #8A2BE2;                    /* 💜 Blue violet - special feature buttons */
    
    /* 📄 NEUTRAL GRAY PALETTE - BACKGROUNDS AND BORDERS
       ===============================================
       💡 EDIT THESE TO CHANGE PAGE BACKGROUNDS AND BORDERS
       💡 These create the overall page structure and spacing
       =============================================== */
    --gray-50: #FAFBFC;             /* 📄 Very light background - page backgrounds */
    --gray-100: #F5F7FA;            /* 📄 Light background - card backgrounds */
    --gray-200: #E4E7EB;            /* 📄 Soft border light - subtle borders */
    --gray-300: #D1D5DB;            /* 📄 Border - form borders and dividers */
    --gray-400: #9CA3AF;            /* 📄 Border dark - strong borders */
    --gray-500: #6B7280;            /* 📄 Text light - secondary text */
    --gray-600: #4B5563;            /* 📄 Text medium - body text */
    --gray-700: #374151;            /* 📄 Text - main text color */
    --gray-800: #1F2937;            /* 📄 Text dark - headings */
    --gray-900: #111827;            /* 📄 Text darkest - high contrast text */
    
    /* Semantic Neutral Mapping - Sharp & Bold */
    --dark-color: #1F2937;                      /* Sharp dark text */
    --dark-secondary: #374151;                  /* Secondary sharp text */
    --gray-color: #6B7280;                      /* Muted text */
    --gray-light: var(--gray-400);              /* Light borders */
    --gray-lighter: var(--gray-200);            /* Subtle borders */
    --light-color: var(--gray-50);              /* Light backgrounds */
    --white-color: #FFFFFF;                     /* Pure white */
    
    /* 🎯 STATUS COLORS - FEEDBACK AND ALERTS
       ===============================================
       💡 EDIT THESE TO CHANGE SUCCESS/ERROR/WARNING COLORS
       💡 Used for form validation, alerts, and status messages
       =============================================== */
    --success-color: #22C55E;                   /* ✅ Green success - success buttons and messages */
    --warning-color: #F59E0B;                   /* ⚠️ Amber warning - warning buttons and alerts */
    --danger-color: #EF4444;                    /* ❌ Red danger - error buttons and messages */
    --info-color: var(--primary-color);         /* ℹ️ Blue info - info buttons and notices */
    
    /* Sharp Green Color System - Uniform Colors */
    --gradient-primary: var(--primary-color);
    --gradient-primary-soft: var(--primary-50);
    --gradient-background: var(--primary-50);
    --gradient-hero: var(--primary-color);
    --gradient-card: var(--white-color);
    
    /* Sharp Shadow System */
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.08);
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.10);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.12);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.15);
    --shadow-xl: 0 16px 32px rgba(0, 0, 0, 0.18);
    --shadow-primary: 0 4px 14px rgba(34, 139, 34, 0.30);
    --shadow-primary-lg: 0 8px 24px rgba(34, 139, 34, 0.35);
    --shadow-primary-xl: 0 16px 40px rgba(34, 139, 34, 0.40);
    
    /* Button Shadow System - Sharp */
    --box-shadow: var(--shadow-md);
    --box-shadow-hover: var(--shadow-primary-lg);
    
    /* Background Colors - Uniform Green Theme */
    --bg-gradient-primary: var(--primary-50);
    --bg-gradient-secondary: var(--white-color);
    --bg-gradient-accent: var(--primary-color);
    
    /* 📐 BORDER RADIUS - BUTTON AND CARD ROUNDNESS
       ===============================================
       💡 EDIT THESE TO CHANGE HOW ROUND/SHARP ELEMENTS ARE
       💡 Affects buttons, cards, forms, and all rounded corners
       =============================================== */
    --radius-sm: 6px;               /* 📐 Small radius - small buttons and tags */
    --radius-md: 12px;              /* 📐 Medium radius - DEFAULT for buttons and cards */
    --radius-lg: 16px;              /* 📐 Large radius - big cards and sections */
    --radius-xl: 24px;              /* 📐 Extra large radius - hero sections */
    --radius-full: 50px;            /* 📐 Full radius - circular buttons and avatars */
    
    /* ⚡ TRANSITIONS - ANIMATION SPEED
       ===============================================
       💡 EDIT THESE TO CHANGE HOW FAST ANIMATIONS ARE
       💡 Affects button hovers, page transitions, and all animations
       =============================================== */
    --transition-fast: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);     /* ⚡ Fast - quick button responses */
    --transition-normal: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);    /* ⚡ Normal - DEFAULT transition speed */
    --transition-slow: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);      /* ⚡ Slow - smooth page changes */
    --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);           /* ⚡ Main transition - used everywhere */
    --border-radius: 12px;          /* 📐 DEFAULT BORDER RADIUS - change this to affect most elements */
    
    /* Typography */
    --font-family-primary: 'Poppins', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-family-secondary: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    
    /* Font Sizes */
    --text-xs: 0.75rem;    /* 12px */
    --text-sm: 0.875rem;   /* 14px */
    --text-base: 1rem;     /* 16px */
    --text-lg: 1.125rem;   /* 18px */
    --text-xl: 1.25rem;    /* 20px */
    --text-2xl: 1.5rem;    /* 24px */
    --text-3xl: 1.875rem;  /* 30px */
    --text-4xl: 2.25rem;   /* 36px */
    --text-5xl: 3rem;      /* 48px */
    
    /* Spacing */
    --space-1: 0.25rem;    /* 4px */
    --space-2: 0.5rem;     /* 8px */
    --space-3: 0.75rem;    /* 12px */
    --space-4: 1rem;       /* 16px */
    --space-5: 1.25rem;    /* 20px */
    --space-6: 1.5rem;     /* 24px */
    --space-8: 2rem;       /* 32px */
    --space-10: 2.5rem;    /* 40px */
    --space-12: 3rem;      /* 48px */
    --space-16: 4rem;      /* 64px */
    --space-20: 5rem;      /* 80px */
    
    /* Additional Accent Color for backward compatibility */
    --accent-color: var(--primary-accent);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* 🌐 GLOBAL PAGE BACKGROUND SETUP
   ===============================================
   💡 EDIT 'background' PROPERTY TO CHANGE ENTIRE SITE BACKGROUND
   💡 Current: Light green gradient background
   =============================================== */
body {
    font-family: 'Inter', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    line-height: 1.6;
    color: var(--dark-color);
    background: var(--bg-gradient-primary);      /* 🌐 MAIN SITE BACKGROUND COLOR */
    font-weight: 400;
    letter-spacing: 0.01em;
}

a {
    text-decoration: none;
    color: var(--dark-color);
    transition: var(--transition);
}

ul {
    list-style: none;
}

img {
    width: 100%;
    height: auto;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* 🔘 MAIN BUTTON STYLES - CORE BUTTON DESIGN
   ===============================================
   💡 EDIT THESE PROPERTIES TO CHANGE ALL BUTTON APPEARANCE
   💡 This affects every button on the site
   =============================================== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 24px;                          /* 🔘 BUTTON SIZE - increase for bigger buttons */
    border: none;
    border-radius: var(--border-radius);         /* 🔘 BUTTON ROUNDNESS - controlled by --border-radius */
    cursor: pointer;
    font-size: 15px;                             /* 🔘 BUTTON TEXT SIZE */
    font-weight: 600;                            /* 🔘 BUTTON TEXT WEIGHT - 400=normal, 600=semi-bold, 700=bold */
    font-family: inherit;
    transition: var(--transition);               /* 🔘 BUTTON ANIMATION SPEED */
    text-transform: none;                        /* 🔘 TEXT CASE - change to 'uppercase' for ALL CAPS */
    letter-spacing: 0.025em;                     /* 🔘 LETTER SPACING */
    position: relative;
    overflow: hidden;
    text-decoration: none;
    min-height: 44px;                            /* 🔘 MINIMUM BUTTON HEIGHT - touch-friendly */
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    white-space: nowrap;
}

.btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.5s;
}

.btn:hover::before {
    left: 100%;
}

/* 🔥 PRIMARY BUTTON - MAIN ACTION BUTTONS
   ===============================================
   💡 EDIT THESE TO CHANGE THE MAIN BUTTON APPEARANCE
   💡 These are the most important buttons (Submit, Save, etc.)
   =============================================== */
.btn-primary {
    background: var(--primary-color);           /* 🔥 BUTTON BACKGROUND COLOR */
    color: var(--white-color);                  /* 🔥 BUTTON TEXT COLOR */
    box-shadow: var(--box-shadow-hover);        /* 🔥 BUTTON SHADOW */
    border: 1px solid var(--primary-dark);     /* 🔥 BUTTON BORDER COLOR */
    font-weight: 600;                           /* 🔥 BUTTON TEXT BOLDNESS */
    position: relative;
    overflow: hidden;
}

.btn-primary::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(145deg, transparent 0%, rgba(255, 255, 255, 0.1) 50%, transparent 100%);
    transform: translateX(-100%);
    transition: transform 0.6s ease;
}

.btn-primary:hover::before {
    transform: translateX(100%);
}

.btn-primary::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: width 0.3s ease, height 0.3s ease;
}

.btn-primary:hover::after {
    width: 300px;
    height: 300px;
}

.btn-primary:hover {
    background: var(--primary-dark);            /* 🔥 BUTTON HOVER BACKGROUND COLOR */
    transform: translateY(-2px);                /* 🔥 BUTTON HOVER LIFT EFFECT - increase for more lift */
    box-shadow: var(--shadow-primary-xl);       /* 🔥 BUTTON HOVER SHADOW */
    border-color: var(--primary-accent);        /* 🔥 BUTTON HOVER BORDER COLOR */
}

/* 🔲 OUTLINE BUTTON - SECONDARY ACTION BUTTONS
   ===============================================
   💡 EDIT THESE TO CHANGE OUTLINE/GHOST BUTTON APPEARANCE
   💡 These are secondary buttons (Cancel, Back, etc.)
   =============================================== */
.btn-outline {
    background-color: transparent;               /* 🔲 OUTLINE BUTTON BACKGROUND - transparent by default */
    border: 2px solid var(--primary-color);     /* 🔲 OUTLINE BUTTON BORDER COLOR AND THICKNESS */
    color: var(--primary-color);                /* 🔲 OUTLINE BUTTON TEXT COLOR */
    box-shadow: var(--shadow-sm);               /* 🔲 OUTLINE BUTTON SHADOW */
    font-weight: 500;                           /* 🔲 OUTLINE BUTTON TEXT WEIGHT */
}

.btn-outline:hover {
    background: var(--primary-color);           /* 🔲 OUTLINE BUTTON HOVER BACKGROUND */
    color: var(--white-color);                  /* 🔲 OUTLINE BUTTON HOVER TEXT COLOR */
    transform: translateY(-2px);                /* 🔲 OUTLINE BUTTON HOVER LIFT EFFECT */
    box-shadow: var(--box-shadow-hover);        /* 🔲 OUTLINE BUTTON HOVER SHADOW */
    border-color: var(--primary-accent);        /* 🔲 OUTLINE BUTTON HOVER BORDER COLOR */
}

/* ⚫ BLACK ACCENT BUTTON - DARK THEME BUTTONS
   ===============================================
   💡 EDIT THESE FOR DARK/BLACK THEMED BUTTONS
   💡 Use for premium or special actions
   =============================================== */
.btn-black {
    background: var(--black);                   /* ⚫ BLACK BUTTON BACKGROUND */
    color: var(--white-color);                  /* ⚫ BLACK BUTTON TEXT COLOR */
    box-shadow: var(--box-shadow-black);        /* ⚫ BLACK BUTTON SHADOW */
    border: 2px solid var(--black-alpha-20);   /* ⚫ BLACK BUTTON BORDER */
    font-weight: 700;                           /* ⚫ BLACK BUTTON TEXT WEIGHT */
}

.btn-black:hover {
    background: var(--black-light);             /* ⚫ BLACK BUTTON HOVER BACKGROUND */
    transform: translateY(-4px);                /* ⚫ BLACK BUTTON HOVER LIFT - more dramatic */
    box-shadow: var(--shadow-black-heavy);      /* ⚫ BLACK BUTTON HOVER SHADOW */
    border-color: var(--black);                 /* ⚫ BLACK BUTTON HOVER BORDER */
}

/* Enhanced Outline with Bold Black */
.btn-outline-black {
    background-color: transparent;
    border: 2px solid var(--black-soft);
    color: var(--black-soft);
    box-shadow: var(--shadow-sm);
    font-weight: 600;
}

.btn-outline-black:hover {
    background: var(--black);
    color: var(--white-color);
    transform: translateY(-4px);
    box-shadow: var(--box-shadow-black);
    border-color: var(--black);
}

/* 🟡 ACCENT BUTTON - SPECIAL HIGHLIGHT BUTTONS
   ===============================================
   💡 EDIT THESE FOR SPECIAL CALL-TO-ACTION BUTTONS
   💡 Use for premium features or important actions
   =============================================== */
.btn-accent {
    background: var(--cameroon-yellow);         /* 🟡 ACCENT BUTTON BACKGROUND - bright yellow */
    color: var(--black-soft);                   /* 🟡 ACCENT BUTTON TEXT COLOR - dark text */
    box-shadow: var(--shadow-primary-lg);       /* 🟡 ACCENT BUTTON SHADOW */
    border: 2px solid var(--black-alpha-10);   /* 🟡 ACCENT BUTTON BORDER */
    font-weight: 700;                           /* 🟡 ACCENT BUTTON TEXT WEIGHT */
}

.btn-accent:hover {
    background: var(--primary-accent);          /* 🟡 ACCENT BUTTON HOVER BACKGROUND */
    color: var(--white-color);                  /* 🟡 ACCENT BUTTON HOVER TEXT COLOR */
    transform: translateY(-4px);                /* 🟡 ACCENT BUTTON HOVER LIFT */
    box-shadow: var(--shadow-primary-xl);       /* 🟡 ACCENT BUTTON HOVER SHADOW */
    border-color: var(--black-alpha-20);        /* 🟡 ACCENT BUTTON HOVER BORDER */
}

/* 📏 LARGE BUTTON SIZE VARIANT
   ===============================================
   💡 EDIT THESE FOR BIGGER BUTTONS
   💡 Use for hero sections and important CTAs
   =============================================== */
.btn-large {
    padding: 16px 32px;                         /* 📏 LARGE BUTTON SIZE - bigger padding */
    font-size: 16px;                            /* 📏 LARGE BUTTON TEXT SIZE */
    border-radius: var(--border-radius-lg);     /* 📏 LARGE BUTTON ROUNDNESS */
}

/* 🏠 SITE HEADER/NAVIGATION BAR STYLING
   ===============================================
   💡 EDIT THESE TO CHANGE THE TOP NAVIGATION APPEARANCE
   💡 Controls header background, borders, and positioning
   =============================================== */
header {
    background: rgba(255, 255, 255, 0.98);      /* 🏠 HEADER BACKGROUND COLOR - semi-transparent white */
    backdrop-filter: blur(20px);                /* 🏠 HEADER BLUR EFFECT - glassmorphism */
    box-shadow: 
        0 4px 20px var(--black-alpha-10),       /* 🏠 HEADER SHADOW */
        0 0 0 1px rgba(34, 139, 34, 0.1),       /* 🏠 HEADER SUBTLE BORDER */
        inset 0 1px 0 rgba(255, 255, 255, 0.8); /* 🏠 HEADER INNER HIGHLIGHT */
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 1000;
    border-bottom: 4px solid var(--primary-color); /* 🏠 HEADER BOTTOM ACCENT BORDER */
}

nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 0;
    position: relative;
    gap: 20px;
    min-height: 60px;
}

.nav-left {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
}

.nav-center {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
}

.nav-right {
    display: flex;
    align-items: center;
    gap: 15px;
    flex: 0 0 auto;
    justify-content: flex-end;
}

.logo {
    display: flex;
    align-items: center;
    font-size: 28px;
    font-weight: 700;
    color: var(--primary-color);
    text-decoration: none;
    transition: var(--transition-normal);
    position: relative;
}

.logo::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--gradient-primary);
    transition: width 0.3s ease;
    border-radius: 1px;
}

.logo:hover::after {
    width: 100%;
}

.logo:hover {
    transform: scale(1.02);
}

.logo i {
    margin-right: 12px;
    font-size: 32px;
    color: var(--primary-color);
    filter: drop-shadow(0 2px 4px rgba(74, 144, 226, 0.2));
    animation: logoGlow 4s ease-in-out infinite alternate;
}

@keyframes logoGlow {
    0% { 
        filter: drop-shadow(0 2px 4px rgba(74, 144, 226, 0.2));
    }
    100% { 
        filter: drop-shadow(0 2px 6px rgba(74, 144, 226, 0.4));
    }
}

.logo span {
    color: var(--dark-color);
}

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

.nav-links li {
    margin-left: 32px;
}

.nav-links a {
    font-weight: 800;
    font-size: 15px;
    color: var(--black-soft);
    transition: var(--transition-normal);
    padding: 12px 20px;
    border-radius: var(--radius-sm);
    position: relative;
    text-decoration: none;
    text-shadow: 0 1px 2px var(--black-alpha-05);
    background: transparent;
}

.nav-links a::before {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 50%;
    width: 0;
    height: 4px;
    background: var(--primary-color);
    transition: all 0.3s ease;
    transform: translateX(-50%);
    border-radius: 2px;
}

.nav-links a::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(34, 139, 34, 0.05);
    border-radius: var(--radius-sm);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.nav-links a:hover::after {
    opacity: 1;
}

.nav-links a:hover::before {
    width: 80%;
}

.nav-links a:hover {
    color: var(--primary-accent);
    transform: translateY(-2px);
    box-shadow: 
        var(--shadow-sm),
        0 0 20px rgba(34, 139, 34, 0.1);
    text-shadow: 0 2px 4px var(--black-alpha-10);
}

.nav-links a:hover::before {
    width: 80%;
}

.nav-links a.active {
    color: var(--primary-color);
    background: rgba(34, 139, 34, 0.1);
}

.nav-links a.active::before {
    width: 80%;
}

.auth-buttons {
    display: flex;
    gap: 15px;
    align-items: center;
}

.auth-buttons .btn {
    text-decoration: none;
    color: inherit;
}

/* Hide mobile menu button on desktop */
.mobile-menu-btn {
    display: none;
}

/* Language Switcher Styling */
.language-switcher {
    display: flex;
    gap: 8px;
    align-items: center;
}

.lang-btn {
    padding: 6px 12px;
    border: 1px solid var(--border-color);
    background: var(--white-color);
    color: var(--dark-color);
    border-radius: var(--border-radius-sm);
    cursor: pointer;
    font-size: 12px;
    transition: var(--transition);
    white-space: nowrap;
    min-height: 32px;
    display: flex;
    align-items: center;
}

.lang-btn:hover {
    border-color: var(--primary-color);
    color: var(--primary-color);
}

.lang-btn.active {
    background: var(--primary-color);
    color: var(--white-color);
    border-color: var(--primary-color);
}

/* Mobile-specific styles moved to media query */

/* Only show mobile menu elements on mobile screens */
@media (max-width: 768px) {
    /* Hide desktop navigation elements on mobile */
    .nav-links,
    .auth-buttons,
    .language-switcher {
        display: none !important;
    }
    
    /* Show mobile menu button on mobile */
    .mobile-menu-btn {
        display: flex !important;
    }
    
    /* Adjust nav layout for mobile */
    nav {
        min-height: 50px;
        padding: 12px 0;
    }
    
    .nav-left {
        flex: 1;
    }
    
    .nav-center {
        display: none;
    }
    
    .nav-right {
        justify-content: flex-end;
        gap: 10px;
        flex: 0 0 auto;
    }
    
    /* Logo adjustments for mobile */
    .logo {
        font-size: 24px;
    }
    
    .logo i {
        font-size: 28px;
    }
    
    /* Mobile Menu Button - Enhanced for touch */
    .mobile-menu-btn {
        display: block;
        font-size: 24px;
        cursor: pointer;
        background: none;
        border: none;
        color: var(--primary-color);
        padding: 12px 16px;
        border-radius: var(--radius-md);
        transition: var(--transition-normal);
        z-index: 1001;
        position: relative;
        min-width: 44px;
        min-height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
        touch-action: manipulation;
        -webkit-tap-highlight-color: transparent;
    }

    .mobile-menu-btn:hover {
        background: rgba(76, 175, 80, 0.1);
        transform: scale(1.05);
    }

    .mobile-menu-btn.active {
        background: var(--primary-color);
        color: white;
    }

    /* Mobile Menu Overlay */
    .mobile-menu-overlay {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5);
        z-index: 1000;
        opacity: 0;
        transition: opacity 0.3s ease;
    }

    /* Mobile Menu */
    .mobile-menu {
        display: none;
        position: fixed;
        top: 0;
        right: -300px;
        width: 280px;
        height: 100%;
        background: var(--white-color);
        z-index: 1001;
        padding: 80px 0 20px;
        box-shadow: -4px 0 20px rgba(0, 0, 0, 0.1);
        transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        overflow-y: auto;
    }

    .mobile-menu-overlay.active {
        display: block;
        opacity: 1;
    }

    .mobile-menu.active {
        display: block;
        right: 0;
    }

    .mobile-menu-header {
        padding: 0 24px 24px;
        border-bottom: 1px solid var(--gray-lighter);
        margin-bottom: 20px;
    }

    .mobile-menu-header .logo {
        font-size: 24px;
        justify-content: flex-start;
    }

    .mobile-nav-links {
        padding: 0;
        margin: 0;
    }

    .mobile-nav-links li {
        border-bottom: 1px solid var(--primary-100);
    }

    .mobile-nav-links a {
        display: flex;
        align-items: center;
        padding: 18px 24px;
        font-size: 16px;
        font-weight: 600;
        color: var(--black-soft);
        text-decoration: none;
        transition: var(--transition-normal);
        border-left: 4px solid transparent;
        position: relative;
    }

    .mobile-nav-links a:hover,
    .mobile-nav-links a.active {
        background: var(--primary-50);
        color: var(--primary-color);
        border-left-color: var(--primary-color);
        transform: translateX(4px);
        box-shadow: var(--shadow-sm);
    }

    .mobile-nav-links a i {
        margin-right: 14px;
        font-size: 20px;
        width: 24px;
        text-align: center;
        color: var(--primary-color);
    }

    .mobile-auth-section {
        padding: 24px;
        margin-top: auto;
        border-top: 1px solid var(--gray-lighter);
    }

    .mobile-auth-buttons {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    .mobile-auth-buttons .btn {
        width: 100%;
        justify-content: center;
        padding: 16px 20px;
        font-size: 16px;
        font-weight: 700;
        border-radius: var(--radius-md);
        box-shadow: var(--shadow-md);
    }

    .mobile-user-info {
        display: flex;
        align-items: center;
        padding: 16px 0;
        margin-bottom: 16px;
        border-radius: var(--radius-md);
        background: rgba(76, 175, 80, 0.05);
    }

    .mobile-user-avatar {
        width: 48px;
        height: 48px;
        border-radius: 50%;
        background: var(--primary-color);
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        font-size: 20px;
        margin-right: 12px;
    }

    .mobile-user-details h4 {
        font-size: 14px;
        font-weight: 600;
        color: var(--dark-color);
        margin-bottom: 2px;
    }

    .mobile-user-details p {
        font-size: 12px;
        color: var(--gray-color);
    }

    /* Close button for mobile menu - Enhanced for touch */
    .mobile-menu-close {
        position: absolute;
        top: 16px;
        right: 16px;
        background: none;
        border: none;
        font-size: 24px;
        color: var(--gray-color);
        cursor: pointer;
        padding: 12px;
        border-radius: var(--radius-md);
        transition: var(--transition-normal);
        min-width: 44px;
        min-height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
        touch-action: manipulation;
        -webkit-tap-highlight-color: transparent;
    }

    .mobile-menu-close:hover {
        background: rgba(0, 0, 0, 0.1);
        color: var(--dark-color);
    }
}

/* Mobile Performance and iOS Safe Area Optimizations */
@media (max-width: 768px) {
    /* Hardware acceleration for smoother animations */
    .mobile-menu, .mobile-menu-overlay {
        transform: translateZ(0);
        will-change: transform, opacity;
    }
    
    /* iOS Safe Area Support */
    .mobile-menu {
        padding-top: max(80px, env(safe-area-inset-top));
        padding-bottom: max(20px, env(safe-area-inset-bottom));
    }
    
    /* Prevent zoom on input focus for iOS */
    input, select, textarea {
        font-size: 16px;
    }
    
    /* Smooth scrolling for mobile */
    html {
        scroll-behavior: smooth;
        -webkit-overflow-scrolling: touch;
    }
    
    /* Better touch handling */
    .mobile-nav-links a,
    .mobile-auth-buttons .btn,
    .mobile-menu-btn,
    .mobile-menu-close {
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }
    
    /* Optimize button performance */
    .mobile-menu-btn,
    .mobile-menu-close,
    .mobile-auth-buttons .btn {
        backface-visibility: hidden;
        transform: translateZ(0);
    }
}

/* 🦸 HERO SECTION - MAIN LANDING AREA
   ===============================================
   💡 EDIT THESE TO CHANGE THE MAIN LANDING SECTION APPEARANCE
   💡 This is the first thing visitors see
   =============================================== */
.hero {
    padding: 160px 0 90px;                      /* 🦸 HERO SECTION SPACING - top/bottom padding */
    background: var(--primary-50);              /* 🦸 HERO BACKGROUND COLOR - light green */
    position: relative;
    overflow: hidden;
}

.hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        radial-gradient(circle at 20% 30%, rgba(34, 139, 34, 0.03) 0%, transparent 50%),
        radial-gradient(circle at 80% 70%, rgba(34, 139, 34, 0.02) 0%, transparent 50%);
    z-index: 0;
}

.hero .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    z-index: 1;
}

.hero-content {
    flex: 1;
    padding-right: 50px;
}

.hero-image {
    flex: 1;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: 
        var(--shadow-xl),
        0 0 0 4px rgba(34, 139, 34, 0.1),
        inset 0 0 0 2px rgba(255, 255, 255, 0.8);
    border: 4px solid var(--primary-color);
    position: relative;
}

.hero-image::after {
    content: '';
    position: absolute;
    top: -4px;
    left: -4px;
    right: -4px;
    bottom: -4px;
    background: var(--primary-color);
    border-radius: var(--radius-lg);
    z-index: -1;
    animation: borderGlow 3s ease-in-out infinite alternate;
}

@keyframes borderGlow {
    0% { box-shadow: 0 0 20px rgba(34, 139, 34, 0.3); }
    100% { box-shadow: 0 0 40px rgba(34, 139, 34, 0.6); }
}

.hero h1 {
    font-size: 52px;
    margin-bottom: 25px;
    line-height: 1.2;
    color: var(--black-soft);
    font-weight: 900;
    text-shadow: 
        0 3px 6px var(--black-alpha-10),
        0 0 20px rgba(34, 139, 34, 0.1);
    letter-spacing: -0.5px;
}

.hero p {
    font-size: 20px;
    color: var(--dark-secondary);
    margin-bottom: 35px;
    font-weight: 500;
    line-height: 1.6;
    text-shadow: 0 1px 2px var(--black-alpha-05);
}

.hero-buttons .btn {
    margin-right: 15px;
}

/* ⭐ FEATURES SECTION - FEATURE CARDS AREA
   ===============================================
   💡 EDIT THESE TO CHANGE FEATURE CARDS SECTION
   💡 Controls the "Why Choose Us" section styling
   =============================================== */
.features {
    padding: 80px 0;                            /* ⭐ FEATURES SECTION SPACING */
}

.features h2 {
    text-align: center;
    font-size: 38px;
    margin-bottom: 60px;
    color: var(--black-soft);
    font-weight: 800;
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
}

/* 🃏 FEATURE CARD STYLING - INDIVIDUAL FEATURE CARDS
   ===============================================
   💡 EDIT THESE TO CHANGE HOW FEATURE CARDS LOOK
   💡 Controls background, shadows, borders, and hover effects
   =============================================== */
.feature-card {
    background: var(--white-color);             /* 🃏 CARD BACKGROUND COLOR */
    padding: 40px 35px;                         /* 🃏 CARD INNER SPACING */
    border-radius: var(--radius-lg);            /* 🃏 CARD CORNER ROUNDNESS */
    text-align: center;
    box-shadow: 
        var(--shadow-lg),                       /* 🃏 CARD SHADOW */
        inset 0 1px 0 rgba(255, 255, 255, 0.8); /* 🃏 CARD INNER HIGHLIGHT */
    transition: var(--transition-normal);       /* 🃏 CARD ANIMATION SPEED */
    border: 3px solid transparent;              /* 🃏 CARD BORDER - invisible by default */
    position: relative;
    overflow: hidden;
    background-clip: padding-box;
}

.feature-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 6px;                                /* 🃏 CARD TOP ACCENT BAR HEIGHT */
    background: var(--primary-color);           /* 🃏 CARD TOP ACCENT BAR COLOR */
}

.feature-card::after {
    content: '';
    position: absolute;
    top: -3px;
    left: -3px;
    right: -3px;
    bottom: -3px;
    background: var(--primary-color);
    border-radius: var(--radius-lg);
    z-index: -1;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.feature-card:hover::after {
    opacity: 1;
}

.feature-card:hover {
    transform: translateY(-15px) scale(1.03);   /* 🃏 CARD HOVER LIFT AND SCALE EFFECT */
    box-shadow: 
        var(--shadow-xl),                       /* 🃏 CARD HOVER SHADOW */
        0 25px 50px rgba(34, 139, 34, 0.2),     /* 🃏 CARD HOVER COLORED SHADOW */
        inset 0 1px 0 rgba(255, 255, 255, 0.9); /* 🃏 CARD HOVER INNER HIGHLIGHT */
    background: var(--primary-50);              /* 🃏 CARD HOVER BACKGROUND COLOR */
}

.feature-icon {
    font-size: 52px;
    color: var(--primary-color);
    margin-bottom: 30px;
    filter: 
        drop-shadow(0 4px 8px var(--black-alpha-20)) 
        drop-shadow(0 0 12px rgba(34, 139, 34, 0.3));
    animation: iconPulse 3s ease-in-out infinite;
    text-shadow: 0 0 15px rgba(34, 139, 34, 0.5);
}

@keyframes iconPulse {
    0%, 100% { 
        transform: scale(1); 
        filter: 
            drop-shadow(0 4px 8px var(--black-alpha-20)) 
            drop-shadow(0 0 12px rgba(34, 139, 34, 0.3));
        text-shadow: 0 0 15px rgba(34, 139, 34, 0.5);
    }
    50% { 
        transform: scale(1.08); 
        filter: 
            drop-shadow(0 4px 8px var(--black-alpha-20)) 
            drop-shadow(0 0 20px rgba(34, 139, 34, 0.6));
        text-shadow: 0 0 25px rgba(34, 139, 34, 0.8);
    }
}

.feature-card h3 {
    font-size: 24px;
    margin-bottom: 18px;
    color: var(--black-soft);
    font-weight: 700;
}

.feature-card p {
    color: var(--dark-secondary);
    font-weight: 500;
    line-height: 1.6;
}

/* Enhanced How It Works Section */
.how-it-works {
    padding: 80px 0;
    background: var(--primary-50);
    position: relative;
}

.how-it-works::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="50" cy="50" r="1" fill="%2300FF00" opacity="0.15"/></svg>');
    background-size: 20px 20px;
    z-index: 0;
}

.how-it-works h2 {
    text-align: center;
    font-size: 38px;
    margin-bottom: 60px;
    color: var(--black-soft);
    font-weight: 800;
    position: relative;
    z-index: 1;
}

.steps {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.step {
    display: flex;
    align-items: flex-start;
    gap: 20px;
}

.step-number {
    background-color: var(--primary-color);
    color: var(--white-color);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 20px;
    flex-shrink: 0;
}

.step-content h3 {
    font-size: 22px;
    margin-bottom: 10px;
}

.step-content p {
    color: var(--gray-color);
}

/* Testimonials Section */
.testimonials {
    padding: 80px 0;
}

.testimonials h2 {
    text-align: center;
    font-size: 36px;
    margin-bottom: 60px;
    color: var(--dark-color);
}

.testimonial-slider {
    position: relative;
    max-width: 800px;
    margin: 0 auto;
}

.testimonial {
    display: none;
    background-color: var(--white-color);
    padding: 40px;
    border-radius: 10px;
    box-shadow: var(--box-shadow);
    text-align: center;
}

.testimonial.active {
    display: block;
}

.testimonial-content p {
    font-size: 18px;
    font-style: italic;
    color: var(--dark-color);
    margin-bottom: 30px;
}

.testimonial-author {
    display: flex;
    align-items: center;
    justify-content: center;
}

.testimonial-author img {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    margin-right: 15px;
    object-fit: cover;
}

.testimonial-author span {
    font-weight: 600;
    font-size: 18px;
}

slider-controls {
    position: absolute;
    top: 50%;
    width: 100%;
    display: flex;
    justify-content: space-between;
    transform: translateY(-50%);
}

.slider-controls button {
    background-color: var(--primary-color);
    color: var(--white-color);
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
}

.slider-controls button:hover {
    background-color: var(--primary-dark);
}

.slider-dots {
    display: flex;
    justify-content: center;
    margin-top: 30px;
}

.dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: #ccc;
    margin: 0 5px;
    cursor: pointer;
    transition: var(--transition);
}

.dot.active {
    background-color: var(--primary-color);
}

/* CTA Section */
.cta {
    padding: 80px 0;
    background-color: var(--primary-color);
    color: var(--white-color);
    text-align: center;
}

.cta h2 {
    font-size: 36px;
    margin-bottom: 20px;
}

.cta p {
    font-size: 18px;
    margin-bottom: 30px;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

/* 🔽 FOOTER SECTION - BOTTOM SITE AREA
   ===============================================
   💡 EDIT THESE TO CHANGE FOOTER APPEARANCE
   💡 Controls bottom section with links and info
   =============================================== */
footer {
    background-color: var(--dark-color);        /* 🔽 FOOTER BACKGROUND COLOR - dark gray */
    color: var(--white-color);                  /* 🔽 FOOTER TEXT COLOR - white */
    padding: 60px 0 20px;                       /* 🔽 FOOTER SPACING */
}

.footer-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 40px;
    margin-bottom: 40px;
}

.footer-about .logo {
    margin-bottom: 20px;
    color: var(--white-color);
}

.footer-about p {
    margin-bottom: 20px;
    color: #bbb;
}

.social-links {
    display: flex;
    gap: 15px;
}

.social-links a {
    color: var(--white-color);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
}

.social-links a:hover {
    background-color: var(--primary-color);
}

.footer-links h3 {
    font-size: 20px;
    margin-bottom: 20px;
    color: var(--white-color);
}

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

.footer-links ul li a {
    color: #bbb;
    transition: var(--transition);
}

.footer-links ul li a:hover {
    color: var(--primary-color);
    padding-left: 5px;
}

.footer-newsletter h3 {
    font-size: 20px;
    margin-bottom: 20px;
    color: var(--white-color);
}

.footer-newsletter p {
    color: #bbb;
    margin-bottom: 20px;
}

.newsletter-form {
    display: flex;
}

.newsletter-form input {
    flex: 1;
    padding: 12px;
    border: none;
    border-radius: 5px 0 0 5px;
    font-size: 16px;
}

.newsletter-form button {
    border-radius: 0 5px 5px 0;
}

.footer-bottom {
    text-align: center;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    color: #bbb;
    font-size: 14px;
}

/* Language Switcher Styles - Fixed positioning */
.language-switcher {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-left: 15px;
    z-index: 1002;
}

.lang-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border: 1px solid var(--gray-lighter);
    background: var(--white-color);
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
    color: var(--gray-color);
    cursor: pointer;
    transition: all 0.3s ease;
    white-space: nowrap;
    min-height: 32px;
}

.lang-btn:hover {
    background: var(--primary-light);
    border-color: var(--primary-color);
    color: var(--primary-color);
    transform: scale(1.05);
}

.lang-btn.active {
    background: var(--primary-color);
    color: var(--white-color);
    border-color: var(--primary-color);
}

.lang-btn.active:hover {
    background: var(--primary-dark);
}

/* Mobile Language Switcher */
@media (max-width: 768px) {
    .language-switcher {
        position: fixed;
        top: var(--spacing-lg);
        right: var(--spacing-lg);
        z-index: 1001;
        background: var(--white-color);
        padding: var(--spacing-sm);
        border-radius: var(--border-radius-md);
        box-shadow: var(--shadow-md);
        flex-direction: column;
        gap: var(--spacing-xs);
    }
    
    .lang-btn {
        width: 100%;
        justify-content: center;
        padding: var(--spacing-sm);
    }
}

/* Fade transition for content changes */
.fade-transition {
    opacity: 0;
    transition: opacity var(--transition-normal);
}

.fade-transition.show {
    opacity: 1;
}

/* Responsive Styles */
@media (max-width: 992px) {
    .hero .container {
        flex-direction: column;
    }
    
    .hero-content {
        padding-right: 0;
        margin-bottom: 40px;
        text-align: center;
    }
    
    .hero-buttons {
        display: flex;
        justify-content: center;
    }
    
    .hero-image {
        max-width: 600px;
    }
}

@media (max-width: 768px) {
    /* Fix button responsiveness */
    .btn {
        padding: 14px 20px;
        font-size: 16px;
        min-height: 48px;
        width: 100%;
        max-width: 280px;
    }
    
    .btn-sm {
        padding: 10px 16px;
        font-size: 14px;
        min-height: 40px;
    }
    
    .btn-large {
        padding: 16px 24px;
        font-size: 18px;
        min-height: 52px;
    }
    
    /* Enhanced Mobile Button Responsiveness - Global Fix */
    /* Ensure all buttons are touch-friendly */
    .btn, button, .action-btn, .action-card {
        min-height: 48px;
        touch-action: manipulation;
        -webkit-tap-highlight-color: transparent;
        user-select: none;
    }
    
    /* Fix auth buttons in navigation */
    .auth-buttons .btn {
        padding: 12px 20px;
        font-size: 14px;
        min-height: 44px;
    }
    
    /* Recipe page button fixes */
    .recipe-card {
        touch-action: manipulation;
        cursor: pointer;
    }
    
    .recipe-card:active {
        transform: scale(0.98);
    }
    
    /* Form buttons */
    .form-group .btn {
        width: 100%;
        padding: 14px 20px;
        font-size: 16px;
        margin-top: 10px;
    }
    
    /* Search and filter buttons */
    .search-filters .btn {
        padding: 10px 16px;
        font-size: 14px;
        margin: 5px;
        flex: 1;
        min-width: 120px;
    }
    
    /* Modal and popup buttons */
    .modal .btn {
        width: 100%;
        margin: 5px 0;
    }
    
    /* Card action buttons */
    .card .btn {
        width: 100%;
        margin-top: 10px;
    }
    
    /* Navigation button improvements */
    .pagination .btn {
        min-width: 44px;
        min-height: 44px;
        padding: 10px;
    }
}

@media (max-width: 480px) {
    /* Extra small screens - even more touch-friendly */
    .btn {
        padding: 16px 20px;
        font-size: 16px;
        min-height: 52px;
    }
    
    .btn-sm {
        padding: 12px 16px;
        font-size: 14px;
        min-height: 44px;
    }
    
    .btn-large {
        padding: 18px 24px;
        font-size: 18px;
        min-height: 56px;
    }
}