/**
 * Mobile Pro - UI UX Pro Max Design System
 * Medical Beauty & Wellness Industry
 * Style: Soft UI Evolution
 * Target: Professional, Elegant, Trustworthy
 */

/* ============================================
   DESIGN SYSTEM TOKENS
   ============================================ */

:root {
    /* Color Palette - Medical Beauty */
    --color-primary: #E8B4B8;      /* Soft Pink */
    --color-secondary: #A8D5BA;    /* Sage Green */
    --color-accent: #D4AF37;       /* Gold */
    --color-bg: #FFF5F5;           /* Warm White */
    --color-text: #2D3436;         /* Charcoal */
    --color-text-muted: #475569;   /* Slate 600 */
    --color-border: #E5E7EB;       /* Gray 200 */

    /* Spacing Scale */
    --space-xs: 0.5rem;    /* 8px */
    --space-sm: 0.75rem;   /* 12px */
    --space-md: 1rem;      /* 16px */
    --space-lg: 1.5rem;    /* 24px */
    --space-xl: 2rem;      /* 32px */
    --space-2xl: 3rem;     /* 48px */

    /* Typography Scale */
    --font-size-xs: 0.75rem;    /* 12px */
    --font-size-sm: 0.875rem;   /* 14px */
    --font-size-base: 1rem;     /* 16px - WCAG minimum */
    --font-size-lg: 1.125rem;   /* 18px */
    --font-size-xl: 1.25rem;    /* 20px */
    --font-size-2xl: 1.5rem;    /* 24px */
    --font-size-3xl: 1.875rem;  /* 30px */

    /* Shadows - Soft UI */
    --shadow-sm: 0 2px 8px rgba(232, 180, 184, 0.1);
    --shadow-md: 0 4px 16px rgba(232, 180, 184, 0.15);
    --shadow-lg: 0 8px 24px rgba(232, 180, 184, 0.2);

    /* Border Radius */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 24px;

    /* Transitions - 150-300ms per UX guidelines */
    --transition-fast: 150ms ease-in-out;
    --transition-base: 200ms ease-in-out;
    --transition-slow: 300ms ease-in-out;

    /* Z-index Scale */
    --z-base: 1;
    --z-dropdown: 10;
    --z-sticky: 20;
    --z-fixed: 30;
    --z-modal: 50;
    --z-menu: 999;
}

/* ============================================
   MOBILE-FIRST BASE STYLES
   ============================================ */

@media (max-width: 768px) {

    /* Body & Typography */
    body {
        font-size: var(--font-size-base) !important;
        line-height: 1.6 !important;
        color: var(--color-text) !important;
        background-color: var(--color-bg) !important;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }

    /* Accessibility: Focus States */
    *:focus-visible {
        outline: 2px solid var(--color-accent);
        outline-offset: 2px;
    }

    /* Accessibility: Reduced Motion */
    @media (prefers-reduced-motion: reduce) {
        *,
        *::before,
        *::after {
            animation-duration: 0.01ms !important;
            animation-iteration-count: 1 !important;
            transition-duration: 0.01ms !important;
        }
    }
    /* Navigation - Professional Mobile Menu */
    .sc_layouts_menu_mobile_button_burger {
        display: flex !important;
        position: fixed !important;
        top: var(--space-md) !important;
        right: var(--space-md) !important;
        z-index: var(--z-menu) !important;
        width: 48px !important;
        height: 48px !important;
        background: white !important;
        border-radius: var(--radius-md) !important;
        box-shadow: var(--shadow-md) !important;
        cursor: pointer !important;
    }

    /* Cards - Soft UI Style */
    .sc_services_item,
    .sc_team_item,
    .post_item,
    .article-card {
        background: white !important;
        border-radius: var(--radius-lg) !important;
        padding: var(--space-lg) !important;
        margin-bottom: var(--space-lg) !important;
        box-shadow: var(--shadow-sm) !important;
        transition: all var(--transition-base) !important;
        border: 1px solid var(--color-border) !important;
        cursor: pointer !important;
    }

    .sc_services_item:hover,
    .sc_team_item:hover,
    .post_item:hover,
    .article-card:hover {
        transform: translateY(-4px);
        box-shadow: var(--shadow-lg) !important;
        border-color: var(--color-primary) !important;
    }

    /* Buttons - Touch Optimized */
    .sc_button,
    .cta-button {
        display: inline-block !important;
        padding: var(--space-md) var(--space-xl) !important;
        background: var(--color-accent) !important;
        color: white !important;
        font-size: var(--font-size-base) !important;
        font-weight: 600 !important;
        border-radius: var(--radius-md) !important;
        border: none !important;
        cursor: pointer !important;
        transition: all var(--transition-base) !important;
        min-height: 48px !important;
        touch-action: manipulation !important;
    }

    .sc_button:hover,
    .cta-button:hover {
        background: #C19A2E !important;
        transform: translateY(-2px);
        box-shadow: var(--shadow-md) !important;
    }

    /* Grid Layouts */
    .sc_services_columns_wrap,
    .sc_team_columns_wrap,
    .posts_container {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: var(--space-lg) !important;
        padding: var(--space-md) !important;
    }

    /* Forms */
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    textarea {
        width: 100% !important;
        padding: var(--space-md) !important;
        font-size: var(--font-size-base) !important;
        border: 1px solid var(--color-border) !important;
        border-radius: var(--radius-sm) !important;
        min-height: 48px !important;
    }

    input:focus,
    textarea:focus {
        outline: none !important;
        border-color: var(--color-primary) !important;
        box-shadow: 0 0 0 3px rgba(232, 180, 184, 0.1) !important;
    }

    /* Responsive - Large Mobile */
    @media (min-width: 480px) {
        .sc_services_columns_wrap,
        .sc_team_columns_wrap,
        .posts_container {
            grid-template-columns: repeat(2, 1fr) !important;
        }
    }

} /* End mobile styles */