/**
 * Dr. Yazdani Design System
 * 
 * Comprehensive design system for all custom Elementor widgets.
 * All widgets MUST follow these conventions for consistency.
 *
 * @package DrYazdani
 * @since 1.0.0
 * 
 * TABLE OF CONTENTS:
 * 1. CSS Custom Properties (Design Tokens)
 * 2. Base Widget Styles
 * 3. Typography System
 * 4. Button System
 * 5. Card System
 * 6. Form Elements
 * 7. Icon System
 * 8. Animation System
 * 9. Layout Utilities
 * 10. RTL Support
 * 11. Accessibility
 * 12. Responsive Breakpoints
 * 13. Widget-Specific Base Patterns
 */

/* ==========================================================================
   1. CSS CUSTOM PROPERTIES (DESIGN TOKENS)
   ========================================================================== */

:root {
    /* -------------------------------------------------------------------------
       Colors - Primary Palette
       Sync with Elementor Global Colors
       ------------------------------------------------------------------------- */
    --dryazdani-primary: #D4AF37;           /* Gold - signature color */
    --dryazdani-primary-rgb: 212, 175, 55;  /* RGB for opacity usage */
    --dryazdani-primary-dark: #B8941F;      /* Darker gold for hover */
    --dryazdani-primary-light: #E5C85C;     /* Lighter gold for accents */
    
    --dryazdani-secondary: #2C2C2C;         /* Dark charcoal */
    --dryazdani-secondary-rgb: 44, 44, 44;
    --dryazdani-secondary-light: #3D3D3D;   /* Lighter charcoal */
    
    /* -------------------------------------------------------------------------
       Colors - Text
       ------------------------------------------------------------------------- */
    --dryazdani-text-primary: #333333;      /* Headings, important text */
    --dryazdani-text-body: #717171;         /* Body text */
    --dryazdani-text-muted: #999999;        /* Secondary text */
    --dryazdani-text-light: #CCCCCC;        /* Disabled, placeholder */
    --dryazdani-text-inverse: #FFFFFF;      /* Text on dark backgrounds */
    --dryazdani-text-inverse-rgb: 255, 255, 255; /* RGB for opacity usage */
    
    /* -------------------------------------------------------------------------
       Colors - Background
       ------------------------------------------------------------------------- */
    --dryazdani-bg-white: #FFFFFF;
    --dryazdani-bg-light: #FAFAFA;          /* Light gray sections */
    --dryazdani-bg-off-white: #F5F5F5;      /* Cards, inputs */
    --dryazdani-bg-dark: #1A1A1A;           /* Dark sections */
    --dryazdani-bg-overlay: rgba(0, 0, 0, 0.5);
    --dryazdani-bg-overlay-light: rgba(255, 255, 255, 0.9);
    
    /* -------------------------------------------------------------------------
       Colors - Borders
       ------------------------------------------------------------------------- */
    --dryazdani-border-light: #E5E5E5;
    --dryazdani-border-medium: #CCCCCC;
    --dryazdani-border-dark: #333333;
    --dryazdani-border-gold: var(--dryazdani-primary);
    
    /* -------------------------------------------------------------------------
       Colors - Status
       ------------------------------------------------------------------------- */
    --dryazdani-success: #28A745;
    --dryazdani-warning: #FFC107;
    --dryazdani-error: #DC3545;
    --dryazdani-info: #17A2B8;
    
    /* -------------------------------------------------------------------------
       Typography - Font Families
       ------------------------------------------------------------------------- */
    --dryazdani-font-heading: 'Playfair Display', Georgia, serif;
    --dryazdani-font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    --dryazdani-font-arabic: 'Noto Sans Arabic', 'Cairo', 'Amiri', sans-serif;
    --dryazdani-font-signature: 'Cormorant Garamond', 'Playfair Display', Georgia, serif;
    --dryazdani-font-mono: 'SF Mono', 'Monaco', 'Consolas', monospace;
    
    /* -------------------------------------------------------------------------
       Typography - Font Sizes (Mobile First)
       ------------------------------------------------------------------------- */
    --dryazdani-text-xs: 0.75rem;      /* 12px */
    --dryazdani-text-sm: 0.875rem;     /* 14px */
    --dryazdani-text-base: 1rem;       /* 16px */
    --dryazdani-text-lg: 1.125rem;     /* 18px */
    --dryazdani-text-xl: 1.25rem;      /* 20px */
    --dryazdani-text-2xl: 1.5rem;      /* 24px */
    --dryazdani-text-3xl: 1.875rem;    /* 30px */
    --dryazdani-text-4xl: 2.25rem;     /* 36px */
    --dryazdani-text-5xl: 3rem;        /* 48px */
    --dryazdani-text-6xl: 3.75rem;     /* 60px */
    --dryazdani-text-7xl: 4.5rem;      /* 72px */
    --dryazdani-text-8xl: 5.25rem;     /* 84px */
    --dryazdani-text-9xl: 6rem;     /* 96px */
    
    /* -------------------------------------------------------------------------
       Typography - Font Weights
       ------------------------------------------------------------------------- */
    --dryazdani-font-light: 300;
    --dryazdani-font-normal: 400;
    --dryazdani-font-medium: 500;
    --dryazdani-font-semibold: 600;
    --dryazdani-font-bold: 700;
    
    /* -------------------------------------------------------------------------
       Typography - Line Heights
       ------------------------------------------------------------------------- */
    --dryazdani-leading-none: 1;
    --dryazdani-leading-tight: 1.25;
    --dryazdani-leading-snug: 1.375;
    --dryazdani-leading-normal: 1.5;
    --dryazdani-leading-relaxed: 1.9;
    --dryazdani-leading-loose: 2;
    
    /* -------------------------------------------------------------------------
       Typography - Letter Spacing
       ------------------------------------------------------------------------- */
    --dryazdani-tracking-tighter: -0.05em;
    --dryazdani-tracking-tight: -0.025em;
    --dryazdani-tracking-normal: 0;
    --dryazdani-tracking-wide: 0.025em;
    --dryazdani-tracking-wider: 0.05em;
    --dryazdani-tracking-widest: 0.1em;
    --dryazdani-tracking-ultra-wide: 0.2em;
    
    /* -------------------------------------------------------------------------
       Spacing Scale
       ------------------------------------------------------------------------- */
    --dryazdani-space-0: 0;
    --dryazdani-space-1: 0.25rem;      /* 4px */
    --dryazdani-space-2: 0.5rem;       /* 8px */
    --dryazdani-space-3: 0.75rem;      /* 12px */
    --dryazdani-space-4: 1rem;         /* 16px */
    --dryazdani-space-5: 1.25rem;      /* 20px */
    --dryazdani-space-6: 1.5rem;       /* 24px */
    --dryazdani-space-8: 2rem;         /* 32px */
    --dryazdani-space-10: 2.5rem;      /* 40px */
    --dryazdani-space-12: 3rem;        /* 48px */
    --dryazdani-space-16: 4rem;        /* 64px */
    --dryazdani-space-20: 5rem;        /* 80px */
    --dryazdani-space-24: 6rem;        /* 96px */
    --dryazdani-space-32: 8rem;        /* 128px */
    
    /* -------------------------------------------------------------------------
       Layout - Container & Grid
       ------------------------------------------------------------------------- */
    --dryazdani-container-sm: 640px;
    --dryazdani-container-md: 768px;
    --dryazdani-container-lg: 1024px;
    --dryazdani-container-xl: 1280px;
    --dryazdani-container-2xl: 1400px;  /* Max content width */
    --dryazdani-container-padding: var(--dryazdani-space-6);
    
    /* -------------------------------------------------------------------------
       Border Radius
       ------------------------------------------------------------------------- */
    --dryazdani-radius-none: 0;
    --dryazdani-radius-sm: 0.25rem;    /* 4px */
    --dryazdani-radius-md: 0.5rem;     /* 8px */
    --dryazdani-radius-lg: 0.75rem;    /* 12px */
    --dryazdani-radius-xl: 1rem;       /* 16px */
    --dryazdani-radius-2xl: 1.5rem;    /* 24px */
    --dryazdani-radius-full: 9999px;   /* Pill shape */
    
    /* -------------------------------------------------------------------------
       Shadows
       ------------------------------------------------------------------------- */
    --dryazdani-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --dryazdani-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --dryazdani-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --dryazdani-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    --dryazdani-shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    --dryazdani-shadow-gold: 0 4px 14px rgba(212, 175, 55, 0.25);
    --dryazdani-shadow-inner: inset 0 2px 4px rgba(0, 0, 0, 0.06);
    
    /* -------------------------------------------------------------------------
       Transitions & Animations
       ------------------------------------------------------------------------- */
    --dryazdani-duration-fast: 150ms;
    --dryazdani-duration-normal: 300ms;
    --dryazdani-duration-slow: 500ms;
    --dryazdani-duration-slower: 700ms;
    
    --dryazdani-ease-linear: linear;
    --dryazdani-ease-in: cubic-bezier(0.4, 0, 1, 1);
    --dryazdani-ease-out: cubic-bezier(0, 0, 0.2, 1);
    --dryazdani-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
    --dryazdani-ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
    
    --dryazdani-transition-fast: all var(--dryazdani-duration-fast) var(--dryazdani-ease-out);
    --dryazdani-transition-normal: all var(--dryazdani-duration-normal) var(--dryazdani-ease-out);
    --dryazdani-transition-slow: all var(--dryazdani-duration-slow) var(--dryazdani-ease-out);
    
    /* -------------------------------------------------------------------------
       Z-Index Scale
       ------------------------------------------------------------------------- */
    --dryazdani-z-base: 1;
    --dryazdani-z-dropdown: 100;
    --dryazdani-z-sticky: 200;
    --dryazdani-z-header: 300;
    --dryazdani-z-overlay: 400;
    --dryazdani-z-modal: 500;
    --dryazdani-z-tooltip: 600;
    --dryazdani-z-max: 9999;
    
    /* -------------------------------------------------------------------------
       Aspect Ratios
       ------------------------------------------------------------------------- */
    --dryazdani-aspect-square: 1 / 1;
    --dryazdani-aspect-video: 16 / 9;
    --dryazdani-aspect-portrait: 3 / 4;
    --dryazdani-aspect-landscape: 4 / 3;
    --dryazdani-aspect-wide: 21 / 9;
    
    /* =========================================================================
       SHORTHAND ALIASES (for backward compatibility & easier usage)
       ========================================================================= */
    
    /* Color Aliases */
    --color-primary: var(--dryazdani-primary);
    --color-primary-rgb: var(--dryazdani-primary-rgb);
    --color-secondary: var(--dryazdani-secondary);
    --color-text-primary: var(--dryazdani-text-primary);
    --color-text-body: var(--dryazdani-text-body);
    --color-text-muted: var(--dryazdani-text-muted);
    --color-background: var(--dryazdani-bg-white);
    --color-background-alt: var(--dryazdani-bg-light);
    
    /* Typography Aliases */
    --font-heading: var(--dryazdani-font-heading);
    --font-body: var(--dryazdani-font-body);
    --text-xs: var(--dryazdani-text-xs);
    --text-sm: var(--dryazdani-text-sm);
    --text-base: var(--dryazdani-text-base);
    --text-lg: var(--dryazdani-text-lg);
    --text-xl: var(--dryazdani-text-xl);
    --text-2xl: var(--dryazdani-text-2xl);
    --text-3xl: var(--dryazdani-text-3xl);
    --text-4xl: var(--dryazdani-text-4xl);
    --text-5xl: var(--dryazdani-text-5xl);
    
    /* Spacing Aliases */
    --spacing-xs: var(--dryazdani-space-1);
    --spacing-sm: var(--dryazdani-space-2);
    --spacing-md: var(--dryazdani-space-4);
    --spacing-lg: var(--dryazdani-space-6);
    --spacing-xl: var(--dryazdani-space-8);
    --spacing-2xl: var(--dryazdani-space-12);
    --spacing-3xl: var(--dryazdani-space-16);
    --spacing-section: var(--dryazdani-space-16);
    --spacing-container: var(--dryazdani-container-padding);
    
    /* Container Aliases */
    --container-sm: var(--dryazdani-container-sm);
    --container-md: var(--dryazdani-container-md);
    --container-lg: var(--dryazdani-container-lg);
    --container-xl: var(--dryazdani-container-xl);
    --container-2xl: var(--dryazdani-container-2xl);
    
    /* Border Radius Aliases */
    --radius-sm: var(--dryazdani-radius-sm);
    --radius-md: var(--dryazdani-radius-md);
    --radius-lg: var(--dryazdani-radius-lg);
    --radius-xl: var(--dryazdani-radius-xl);
    --radius-full: var(--dryazdani-radius-full);
    
    /* Shadow Aliases */
    --shadow-sm: var(--dryazdani-shadow-sm);
    --shadow-md: var(--dryazdani-shadow-md);
    --shadow-lg: var(--dryazdani-shadow-lg);
    --shadow-xl: var(--dryazdani-shadow-xl);
    
    /* Transition Aliases */
    --transition-fast: var(--dryazdani-transition-fast);
    --transition-normal: var(--dryazdani-transition-normal);
    --transition-slow: var(--dryazdani-transition-slow);
}

/* Enable smooth scrolling globally */
html {
	scroll-behavior: smooth;
}

/* Respect user's motion preferences */
@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}

/* ==========================================================================
   2. BASE WIDGET STYLES
   ========================================================================== */

/* All widgets follow this base pattern */
[class^="dryazdani-"],
[class*=" dryazdani-"] {
    box-sizing: border-box;
}

/* Widget container base */
.dryazdani-widget {
    position: relative;
    width: 100%;
}

/* Section wrapper for full-width widgets */
.dryazdani-section {
    padding-block: var(--dryazdani-space-24);
    padding-inline: var(--dryazdani-container-padding);
}

.dryazdani-section--sm {
    padding-block: var(--dryazdani-space-16);
}

.dryazdani-section--lg {
    padding-block: var(--dryazdani-space-32);
}

/* Container wrapper - Base class for all widget containers */
.dryazdani-container {
    width: 100%;
    max-width: var(--dryazdani-container-2xl);
    margin-inline: auto;
    padding-inline: var(--dryazdani-container-padding);
}

/* Container size modifiers */
.dryazdani-container--xs {
    max-width: var(--dryazdani-container-xs);
}

.dryazdani-container--sm {
    max-width: var(--dryazdani-container-sm);
}

.dryazdani-container--md {
    max-width: var(--dryazdani-container-md);
}

.dryazdani-container--lg {
    max-width: var(--dryazdani-container-lg);
}

.dryazdani-container--xl {
    max-width: var(--dryazdani-container-xl);
}

/* Default 2xl already applied via base class */

/* Container with custom max-widths (for legacy/specific needs) */
.dryazdani-container--narrow {
    max-width: 900px;
}

.dryazdani-container--content {
    max-width: 1000px;
}

.dryazdani-container--standard {
    max-width: 1200px;
}


/* ==========================================================================
   3. TYPOGRAPHY SYSTEM
   ========================================================================== */

/* Heading Styles */
.dryazdani-heading {
    font-family: var(--dryazdani-font-heading);
    font-weight: var(--dryazdani-font-semibold);
    color: var(--dryazdani-text-primary);
    line-height: var(--dryazdani-leading-tight);
    margin: 0;
}

.dryazdani-heading--h1 {
    font-size: var(--dryazdani-text-4xl);
    letter-spacing: var(--dryazdani-tracking-tight);
}

.dryazdani-heading--h2 {
    font-size: var(--dryazdani-text-3xl);
}

.dryazdani-heading--h3 {
    font-size: var(--dryazdani-text-2xl);
}

.dryazdani-heading--h4 {
    font-size: var(--dryazdani-text-xl);
}

.dryazdani-heading--h5 {
    font-size: var(--dryazdani-text-lg);
}

.dryazdani-heading--h6 {
    font-size: var(--dryazdani-text-base);
    font-weight: var(--dryazdani-font-bold);
}

/* Body Text */
.dryazdani-text {
    font-family: var(--dryazdani-font-body);
    font-size: var(--dryazdani-text-base);
    font-weight: var(--dryazdani-font-normal);
    color: var(--dryazdani-text-body);
    line-height: var(--dryazdani-leading-relaxed);
}

.dryazdani-text--sm {
    font-size: var(--dryazdani-text-sm);
}

.dryazdani-text--lg {
    font-size: var(--dryazdani-text-lg);
}

.dryazdani-text--muted {
    color: var(--dryazdani-text-muted);
}

/* Badge/Label Text */
.dryazdani-badge {
    display: inline-block;
    font-family: var(--dryazdani-font-body);
    font-size: var(--dryazdani-text-xs);
    font-weight: var(--dryazdani-font-medium);
    text-transform: uppercase;
    letter-spacing: var(--dryazdani-tracking-widest);
    padding: var(--dryazdani-space-2) 0;
    border-radius: var(--dryazdani-radius-sm);
    color: var(--dryazdani-primary);
}

.dryazdani-badge--gold {
    background-color: var(--dryazdani-primary);
    color: var(--dryazdani-text-inverse);
}

/* Bordered Badge Variant */
.dryazdani-badge--bordered {
    padding: var(--dryazdani-space-2) var(--dryazdani-space-6);
    border: 2px solid var(--dryazdani-primary);
    background-color: transparent;
    color: var(--dryazdani-primary);
    font-size: var(--dryazdani-text-sm);
    letter-spacing: var(--dryazdani-tracking-widest);
    text-transform: uppercase;
}

/* Section Label Pattern */
.dryazdani-section-label {
    display: inline-block;
    margin-bottom: var(--dryazdani-space-6);
    color: var(--dryazdani-primary);
    font-size: var(--dryazdani-text-xs);
    font-weight: var(--dryazdani-font-medium);
    letter-spacing: var(--dryazdani-tracking-ultra-wide);
    text-transform: uppercase;
}

/* Quote/Signature Text */
.dryazdani-quote {
    font-family: var(--dryazdani-font-heading);
    font-size: var(--dryazdani-text-2xl);
    font-style: italic;
    color: var(--dryazdani-text-primary);
    line-height: var(--dryazdani-leading-relaxed);
}

.dryazdani-quote--lg {
    font-size: var(--dryazdani-text-3xl);
}

.dryazdani-signature {
    font-family: var(--dryazdani-font-signature);
    font-size: var(--dryazdani-text-4xl);
    font-style: italic;
    color: var(--dryazdani-primary);
}

/* Drop Cap Text */
.dryazdani-drop-cap::first-letter {
    float: left;
    font-size: 4.5rem;
    line-height: 0.8;
    margin-right: 0.75rem;
    font-family: var(--dryazdani-font-heading);
    color: var(--dryazdani-primary);
}

html[dir="rtl"] .dryazdani-drop-cap::first-letter {
    float: right;
    margin-right: 0;
    margin-left: 0.75rem;
}


/* ==========================================================================
   4. BUTTON SYSTEM
   ========================================================================== */

.dryazdani-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--dryazdani-space-2);
    padding: var(--dryazdani-space-4) var(--dryazdani-space-10);
    font-family: var(--dryazdani-font-body);
    font-size: var(--dryazdani-text-sm);
    font-weight: var(--dryazdani-font-medium);
    line-height: var(--dryazdani-leading-normal);
    letter-spacing: 0.2em;
    text-transform: uppercase;
    text-decoration: none;
    border: 2px solid transparent;
    border-radius: 0;
    cursor: pointer;
    transition: var(--dryazdani-transition-normal);
}

/* Primary Button - Gold filled */
.dryazdani-button--primary {
    background-color: var(--dryazdani-primary);
    color: var(--dryazdani-secondary);
    border-color: var(--dryazdani-primary);
}

.dryazdani-button--primary:hover,
.dryazdani-button--primary:focus {
    background-color: var(--dryazdani-primary-dark);
    border-color: var(--dryazdani-primary-dark);
    color: initial;
    transform: translateY(-2px);
    box-shadow: var(--dryazdani-shadow-gold);
}

/* Secondary Button - Outlined (for dark backgrounds) */
.dryazdani-button--secondary {
    background-color: transparent;
    color: var(--dryazdani-bg-white);
    border-color: var(--dryazdani-bg-white);
}

.dryazdani-button--secondary:hover,
.dryazdani-button--secondary:focus {
    background-color: var(--dryazdani-bg-white);
    color: var(--dryazdani-text-primary);
}

/* Secondary Inverse Button - Outlined (for light backgrounds) */
.dryazdani-button--secondary-inverse {
    background-color: transparent;
    color: var(--dryazdani-secondary);
    border-color: var(--dryazdani-secondary);
}

.dryazdani-button--secondary-inverse:hover,
.dryazdani-button--secondary-inverse:focus {
    background-color: var(--dryazdani-secondary);
    color: var(--dryazdani-text-inverse);
    border-color: var(--dryazdani-secondary);
}

/* Dark Button */
.dryazdani-button--dark {
    background-color: var(--dryazdani-secondary);
    color: var(--dryazdani-text-inverse);
    border-color: var(--dryazdani-secondary);
}

.dryazdani-button--dark:hover,
.dryazdani-button--dark:focus {
    background-color: var(--dryazdani-secondary-light);
    border-color: var(--dryazdani-secondary-light);
}

/* White Button (for dark backgrounds) */
.dryazdani-button--white {
    background-color: var(--dryazdani-bg-white);
    color: var(--dryazdani-secondary);
    border-color: var(--dryazdani-bg-white);
}

.dryazdani-button--white:hover,
.dryazdani-button--white:focus {
    background-color: var(--dryazdani-bg-light);
    border-color: var(--dryazdani-bg-light);
}

/* Ghost Button */
.dryazdani-button--ghost {
    background-color: transparent;
    color: var(--dryazdani-text-primary);
    border-color: transparent;
}

.dryazdani-button--ghost:hover,
.dryazdani-button--ghost:focus {
    background-color: var(--dryazdani-bg-light);
}

/* Button Sizes */
.dryazdani-button--sm {
    padding: var(--dryazdani-space-2) var(--dryazdani-space-6);
    font-size: var(--dryazdani-text-xs);
}

.dryazdani-button--lg {
    padding: var(--dryazdani-space-4) var(--dryazdani-space-12);
    font-size: var(--dryazdani-text-base);
}

/* Button with Icon */
.dryazdani-button__icon {
    width: 1em;
    height: 1em;
    flex-shrink: 0;
}


/* ==========================================================================
   5. CARD SYSTEM
   ========================================================================== */

.dryazdani-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background-color: var(--dryazdani-bg-white);
    border: 2px solid var(--dryazdani-border-light);
    border-radius: var(--dryazdani-radius-lg);
    overflow: hidden;
    transition: var(--dryazdani-transition-normal);
}

.dryazdani-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--dryazdani-shadow-lg);
}

.dryazdani-card__image {
    position: relative;
    width: 100%;
    aspect-ratio: var(--dryazdani-aspect-landscape);
    overflow: hidden;
}

.dryazdani-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--dryazdani-duration-slow) var(--dryazdani-ease-out);
}

.dryazdani-card:hover .dryazdani-card__image img {
    transform: scale(1.05);
}

.dryazdani-card__content {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: var(--dryazdani-space-10);
}

.dryazdani-card__title {
    font-family: var(--dryazdani-font-heading);
    font-size: var(--dryazdani-text-xl);
    font-weight: var(--dryazdani-font-semibold);
    color: var(--dryazdani-text-primary);
    margin-bottom: var(--dryazdani-space-2);
}

.dryazdani-card__description {
    font-size: var(--dryazdani-text-base);
    color: var(--dryazdani-text-body);
    line-height: var(--dryazdani-leading-relaxed);
    margin-bottom: var(--dryazdani-space-4);
}

.dryazdani-card__footer {
    margin-top: auto;
    padding-top: var(--dryazdani-space-4);
    border-top: 1px solid var(--dryazdani-border-light);
}

/* Card Variants */
.dryazdani-card--bordered {
    border: 2px solid var(--dryazdani-border-light);
    box-shadow: none;
}

.dryazdani-card--shadowed {
    box-shadow: var(--dryazdani-shadow-md);
}

.dryazdani-card--gold-accent {
    border-top: 4px solid var(--dryazdani-primary);
}

.dryazdani-card--horizontal {
    flex-direction: row;
}

.dryazdani-card--horizontal .dryazdani-card__image {
    width: 40%;
    aspect-ratio: auto;
}


/* ==========================================================================
   6. FORM ELEMENTS
   ========================================================================== */

.dryazdani-input,
.dryazdani-textarea,
.dryazdani-select {
    width: 100%;
    padding: var(--dryazdani-space-3) var(--dryazdani-space-4);
    font-family: var(--dryazdani-font-body);
    font-size: var(--dryazdani-text-base);
    color: var(--dryazdani-text-primary);
    background-color: var(--dryazdani-bg-white);
    border: 1px solid var(--dryazdani-border-light);
    border-radius: var(--dryazdani-radius-md);
    transition: var(--dryazdani-transition-fast);
}

.dryazdani-input:focus,
.dryazdani-textarea:focus,
.dryazdani-select:focus {
    outline: none;
    border-color: var(--dryazdani-primary);
    box-shadow: 0 0 0 3px rgba(var(--dryazdani-primary-rgb), 0.15);
}

.dryazdani-input::placeholder,
.dryazdani-textarea::placeholder {
    color: var(--dryazdani-text-light);
}

.dryazdani-label {
    display: block;
    font-size: var(--dryazdani-text-sm);
    font-weight: var(--dryazdani-font-medium);
    color: var(--dryazdani-text-primary);
    margin-bottom: var(--dryazdani-space-2);
}

.dryazdani-form-group {
    margin-bottom: var(--dryazdani-space-4);
}


/* ==========================================================================
   7. ICON SYSTEM
   ========================================================================== */

.dryazdani-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.dryazdani-icon--sm {
    width: 1rem;
    height: 1rem;
}

.dryazdani-icon--md {
    width: 1.5rem;
    height: 1.5rem;
}

.dryazdani-icon--lg {
    width: 2rem;
    height: 2rem;
}

.dryazdani-icon--xl {
    width: 3rem;
    height: 3rem;
}

/* Icon colors */
.dryazdani-icon--gold {
    color: var(--dryazdani-primary);
}

.dryazdani-icon--dark {
    color: var(--dryazdani-secondary);
}

/* Icon with circle background */
.dryazdani-icon-circle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: var(--dryazdani-radius-full);
    background-color: rgba(var(--dryazdani-primary-rgb), 0.1);
    color: var(--dryazdani-primary);
}

.dryazdani-icon-circle--gold {
    background-color: var(--dryazdani-primary);
    color: var(--dryazdani-secondary);
}


/* ==========================================================================
   8. ANIMATION SYSTEM
   ========================================================================== */

/* Fade In */
@keyframes dryazdani-fade-in {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Slide Up */
@keyframes dryazdani-slide-up {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Slide Down */
@keyframes dryazdani-slide-down {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Scale In */
@keyframes dryazdani-scale-in {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Pulse */
@keyframes dryazdani-pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.7;
    }
}

/* Animation Classes */
.dryazdani-animate-fade-in {
    animation: dryazdani-fade-in var(--dryazdani-duration-normal) var(--dryazdani-ease-out);
}

.dryazdani-animate-slide-up {
    animation: dryazdani-slide-up var(--dryazdani-duration-normal) var(--dryazdani-ease-out);
}

.dryazdani-animate-slide-down {
    animation: dryazdani-slide-down var(--dryazdani-duration-normal) var(--dryazdani-ease-out);
}

.dryazdani-animate-scale-in {
    animation: dryazdani-scale-in var(--dryazdani-duration-normal) var(--dryazdani-ease-out);
}

/* Animation on scroll (add via JS when in viewport) */
.dryazdani-reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity var(--dryazdani-duration-slow) var(--dryazdani-ease-out),
                transform var(--dryazdani-duration-slow) var(--dryazdani-ease-out);
}

.dryazdani-reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}


/* ==========================================================================
   9. LAYOUT UTILITIES
   ========================================================================== */

/* Flexbox */
.dryazdani-flex {
    display: flex;
}

.dryazdani-flex-col {
    flex-direction: column;
}

.dryazdani-flex-wrap {
    flex-wrap: wrap;
}

.dryazdani-items-center {
    align-items: center;
}

.dryazdani-items-start {
    align-items: flex-start;
}

.dryazdani-items-end {
    align-items: flex-end;
}

.dryazdani-justify-center {
    justify-content: center;
}

.dryazdani-justify-between {
    justify-content: space-between;
}

.dryazdani-justify-end {
    justify-content: flex-end;
}

/* Grid */
.dryazdani-grid {
    display: grid;
    gap: var(--dryazdani-space-8);
}

.dryazdani-grid-cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
}

.dryazdani-grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.dryazdani-grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.dryazdani-grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* Gap utilities */
.dryazdani-gap-2 { gap: var(--dryazdani-space-2); }
.dryazdani-gap-4 { gap: var(--dryazdani-space-4); }
.dryazdani-gap-6 { gap: var(--dryazdani-space-6); }
.dryazdani-gap-8 { gap: var(--dryazdani-space-8); }
.dryazdani-gap-12 { gap: var(--dryazdani-space-12); }
.dryazdani-gap-16 { gap: var(--dryazdani-space-16); }

.dryazdani-grid--lg {
    gap: var(--dryazdani-space-16);
}

/* Text alignment - Logical properties */
.dryazdani-text-start {
    text-align: start;
}

.dryazdani-text-center {
    text-align: center;
}

.dryazdani-text-end {
    text-align: end;
}

/* Display */
.dryazdani-hidden {
    display: none;
}

.dryazdani-block {
    display: block;
}

.dryazdani-inline-block {
    display: inline-block;
}


/* ==========================================================================
   10. RTL SUPPORT
   ========================================================================== */

/* Base RTL styles */
html[dir="rtl"] [class^="dryazdani-"],
html[dir="rtl"] [class*=" dryazdani-"] {
    /* Font for Arabic */
    font-family: var(--dryazdani-font-arabic);
}

/* Headings in Arabic */
html[dir="rtl"] .dryazdani-heading {
    font-family: 'Cairo', 'Amiri', var(--dryazdani-font-arabic);
}

/* Flip directional icons */
html[dir="rtl"] .dryazdani-icon--arrow,
html[dir="rtl"] .dryazdani-icon--chevron {
    transform: scaleX(-1);
}

/* Button icon order reversal handled automatically by flex gap */

/* Reverse row layouts in RTL when needed */
html[dir="rtl"] .dryazdani-row-reverse-rtl {
    flex-direction: row-reverse;
}

/* Navigation adjustments */
html[dir="rtl"] .dryazdani-nav__menu {
    padding-inline-start: 0;
}

/* Quote and signature styles for Arabic */
html[dir="rtl"] .dryazdani-quote {
    font-family: 'Cairo', var(--dryazdani-font-arabic);
    font-style: normal;
}

html[dir="rtl"] .dryazdani-signature {
    font-family: 'Cairo', var(--dryazdani-font-arabic);
    font-style: normal;
}

/* Statistics in RTL */
html[dir="rtl"] .dryazdani-stat__number {
    font-family: 'Cairo', var(--dryazdani-font-arabic);
}

/* Section labels and badges in RTL */
html[dir="rtl"] .dryazdani-section-label,
html[dir="rtl"] .dryazdani-badge {
    letter-spacing: 0.15em; /* Slightly reduced for Arabic */
}


/* ==========================================================================
   11. ACCESSIBILITY
   ========================================================================== */

/* Focus visible for keyboard navigation */
.dryazdani-button:focus-visible,
.dryazdani-input:focus-visible,
.dryazdani-card:focus-visible,
[class^="dryazdani-"]:focus-visible {
    outline: 2px solid var(--dryazdani-primary);
    outline-offset: 2px;
}

/* Remove focus ring for mouse users */
.dryazdani-button:focus:not(:focus-visible),
.dryazdani-input:focus:not(:focus-visible) {
    outline: none;
}

/* Screen reader only content */
.dryazdani-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Skip link */
.dryazdani-skip-link {
    position: absolute;
    top: -100px;
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--dryazdani-secondary);
    color: var(--dryazdani-text-inverse);
    padding: var(--dryazdani-space-3) var(--dryazdani-space-6);
    z-index: var(--dryazdani-z-max);
    transition: top var(--dryazdani-duration-fast);
}

.dryazdani-skip-link:focus {
    top: var(--dryazdani-space-4);
}

/* High contrast mode */
@media (prefers-contrast: high) {
    .dryazdani-button,
    .dryazdani-card,
    .dryazdani-input {
        border-width: 2px;
    }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    
    .dryazdani-reveal {
        opacity: 1;
        transform: none;
    }
}


/* ==========================================================================
   12. RESPONSIVE BREAKPOINTS
   ========================================================================== */

/* Tablet and up (768px+) */
@media (min-width: 768px) {
    :root {
        --dryazdani-container-padding: var(--dryazdani-space-8);
    }
    
    .dryazdani-heading--h1 {
        font-size: var(--dryazdani-text-5xl);
    }
    
    .dryazdani-heading--h2 {
        font-size: var(--dryazdani-text-4xl);
    }
    
    .dryazdani-heading--h3 {
        font-size: var(--dryazdani-text-3xl);
    }
    
    .dryazdani-section {
        padding-block: var(--dryazdani-space-20);
    }
    
    /* Responsive grid */
    .dryazdani-md\:grid-cols-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    
    .dryazdani-md\:grid-cols-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    
    /* Show/hide utilities */
    .dryazdani-md\:hidden {
        display: none;
    }
    
    .dryazdani-md\:block {
        display: block;
    }
    
    .dryazdani-md\:flex {
        display: flex;
    }
}

/* Desktop and up (1024px+) */
@media (min-width: 1024px) {
    :root {
        --dryazdani-container-padding: var(--dryazdani-space-12);
    }
    
    .dryazdani-heading--h1 {
        font-size: var(--dryazdani-text-6xl);
    }
    
    .dryazdani-section {
        padding-block: var(--dryazdani-space-24);
    }
    
    /* Responsive grid */
    .dryazdani-lg\:grid-cols-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    
    .dryazdani-lg\:grid-cols-4 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
    
    /* Show/hide utilities */
    .dryazdani-lg\:hidden {
        display: none;
    }
    
    .dryazdani-lg\:block {
        display: block;
    }
    
    .dryazdani-lg\:flex {
        display: flex;
    }
}

/* Large desktop (1280px+) */
@media (min-width: 1280px) {
    .dryazdani-heading--h1 {
        font-size: var(--dryazdani-text-7xl);
    }
}


/* ==========================================================================
   13. NEW UI PATTERNS
   ========================================================================== */

/* Statistics Display */
.dryazdani-stat {
    text-align: center;
}

.dryazdani-stat__number {
    display: block;
    font-family: var(--dryazdani-font-heading);
    font-size: var(--dryazdani-text-4xl);
    font-weight: var(--dryazdani-font-normal);
    color: var(--dryazdani-primary);
    margin-bottom: var(--dryazdani-space-2);
    line-height: 1;
}

.dryazdani-stat__label {
    display: block;
    font-size: var(--dryazdani-text-xs);
    font-weight: var(--dryazdani-font-medium);
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--dryazdani-text-muted);
}

/* Timeline Pattern */
.dryazdani-timeline {
    position: relative;
}

.dryazdani-timeline__item {
    display: flex;
    gap: var(--dryazdani-space-8);
    align-items: flex-start;
}

.dryazdani-timeline__date {
    flex-shrink: 0;
    width: 8rem;
    text-align: end;
    font-family: var(--dryazdani-font-heading);
    font-size: var(--dryazdani-text-3xl);
    font-weight: var(--dryazdani-font-normal);
    color: var(--dryazdani-primary);
    line-height: 1.2;
}

.dryazdani-timeline__content {
    flex: 1;
    border-left: 2px solid var(--dryazdani-primary);
    padding-left: var(--dryazdani-space-8);
    padding-bottom: var(--dryazdani-space-8);
}

.dryazdani-timeline__title {
    font-family: var(--dryazdani-font-heading);
    font-size: var(--dryazdani-text-xl);
    color: var(--dryazdani-text-primary);
    margin-bottom: var(--dryazdani-space-3);
}

.dryazdani-timeline__description {
    color: var(--dryazdani-text-muted);
    line-height: var(--dryazdani-leading-relaxed);
}

/* RTL Timeline adjustments */
html[dir="rtl"] .dryazdani-timeline__date {
    text-align: start;
}

html[dir="rtl"] .dryazdani-timeline__content {
    border-left: none;
    border-right: 2px solid var(--dryazdani-primary);
    padding-left: 0;
    padding-right: var(--dryazdani-space-8);
}

/* Sticky Sidebar Pattern */
.dryazdani-sticky-sidebar {
    position: sticky;
    top: 6rem;
}

/* Hero Pattern Updates */
.dryazdani-hero--reduced {
    min-height: 90vh;
}

.dryazdani-hero__title {
    font-size: var(--dryazdani-text-5xl);
    font-family: var(--dryazdani-font-heading);
    font-weight: var(--dryazdani-font-normal);
    line-height: var(--dryazdani-leading-tight);
    letter-spacing: var(--dryazdani-tracking-tight);
}

@media (min-width: 768px) {
    .dryazdani-hero__title {
        font-size: var(--dryazdani-text-7xl);
    }
}

@media (min-width: 1024px) {
    .dryazdani-hero__title {
        font-size: var(--dryazdani-text-8xl);
    }
}

/* Gradient Overlay Enhancements */
.dryazdani-gradient-overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.dryazdani-gradient-overlay--dark-top {
    background: linear-gradient(
        to bottom,
        rgba(var(--dryazdani-secondary-rgb), 0.8) 0%,
        rgba(var(--dryazdani-secondary-rgb), 0.4) 100%
    );
}

.dryazdani-gradient-overlay--dark-left {
    background: linear-gradient(
        to right,
        rgba(var(--dryazdani-secondary-rgb), 0.9) 0%,
        rgba(var(--dryazdani-secondary-rgb), 0.6) 50%,
        transparent 100%
    );
}

.dryazdani-gradient-overlay--sophisticated {
    background: linear-gradient(
        135deg,
        rgba(var(--dryazdani-secondary-rgb), 0.7) 0%,
        rgba(var(--dryazdani-secondary-rgb), 0.4) 100%
    );
}


/* ==========================================================================
   14. WIDGET-SPECIFIC BASE PATTERNS
   ========================================================================== */

/* ----- Hero Widget ----- */
.dryazdani-hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.dryazdani-hero__background {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.dryazdani-hero__background img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.dryazdani-hero__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        135deg,
        rgba(var(--dryazdani-secondary-rgb), 0.8) 0%,
        rgba(var(--dryazdani-secondary-rgb), 0.4) 100%
    );
}

.dryazdani-hero__content {
    position: relative;
    z-index: 1;
    text-align: center;
    color: var(--dryazdani-text-inverse);
}

.dryazdani-hero__scroll-indicator {
    position: absolute;
    bottom: var(--dryazdani-space-8);
    left: 50%;
    transform: translateX(-50%);
    animation: dryazdani-pulse 2s infinite;
}

.dryazdani-hero__scroll-indicator:hover,
.dryazdani-hero__scroll-indicator:focus {
    background-color: transparent;
}


/* ----- Navigation Widget ----- */
.dryazdani-nav {
    position: fixed;
    top: 0;
    inset-inline: 0;
    z-index: var(--dryazdani-z-header);
    background-color: var(--dryazdani-bg-white);
    box-shadow: var(--dryazdani-shadow-sm);
    transition: var(--dryazdani-transition-normal);
}

.dryazdani-nav.is-scrolled {
    box-shadow: var(--dryazdani-shadow-md);
}

.dryazdani-nav__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-block: var(--dryazdani-space-4);
}

.dryazdani-nav__logo img {
    height: 48px;
    width: auto;
}

.dryazdani-nav__menu {
    display: flex;
    align-items: center;
    gap: var(--dryazdani-space-6);
    list-style: none;
    margin: 0;
    padding: 0;
}

.dryazdani-nav__link {
    font-size: var(--dryazdani-text-sm);
    font-weight: var(--dryazdani-font-medium);
    color: var(--dryazdani-text-primary);
    text-decoration: none;
    transition: color var(--dryazdani-duration-fast);
}

.dryazdani-nav__link:hover,
.dryazdani-nav__link.is-active {
    color: var(--dryazdani-primary);
}


/* ----- Gallery Widget ----- */
.dryazdani-gallery {
    position: relative;
}

.dryazdani-gallery__grid {
    display: grid;
    gap: var(--dryazdani-space-4);
    grid-template-columns: repeat(2, 1fr);
}

@media (min-width: 768px) {
    .dryazdani-gallery__grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (min-width: 1024px) {
    .dryazdani-gallery__grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

.dryazdani-gallery__item {
    position: relative;
    aspect-ratio: 1;
    overflow: hidden;
    border-radius: var(--dryazdani-radius-md);
    cursor: pointer;
}

.dryazdani-gallery__item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--dryazdani-duration-slow);
}

.dryazdani-gallery__item:hover img {
    transform: scale(1.1);
}


/* ----- Before/After Slider ----- */
.dryazdani-before-after {
    position: relative;
    overflow: hidden;
    border-radius: var(--dryazdani-radius-lg);
}

.dryazdani-before-after__slider {
    position: relative;
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.dryazdani-before-after__slider::-webkit-scrollbar {
    display: none;
}

.dryazdani-before-after__slide {
    flex: 0 0 100%;
    scroll-snap-align: start;
}

.dryazdani-before-after__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    background-color: var(--dryazdani-bg-white);
    border: none;
    border-radius: var(--dryazdani-radius-full);
    box-shadow: var(--dryazdani-shadow-md);
    cursor: pointer;
    transition: var(--dryazdani-transition-fast);
    z-index: 10;
}

.dryazdani-before-after__nav:hover {
    background-color: var(--dryazdani-primary);
    color: var(--dryazdani-secondary);
}

.dryazdani-before-after__nav--prev {
    inset-inline-start: var(--dryazdani-space-4);
}

.dryazdani-before-after__nav--next {
    inset-inline-end: var(--dryazdani-space-4);
}


/* ----- Service Grid ----- */
.dryazdani-services {
    /* Uses card system - see .dryazdani-card */
}

.dryazdani-services__grid {
    display: grid;
    gap: var(--dryazdani-space-8);
    grid-template-columns: 1fr;
}

@media (min-width: 768px) {
    .dryazdani-services__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .dryazdani-services__grid {
        grid-template-columns: repeat(3, 1fr);
    }
}


/* ----- Clinic Card Widget ----- */
.dryazdani-clinic-card {
    background-color: var(--dryazdani-bg-white);
    border-radius: var(--dryazdani-radius-xl);
    padding: var(--dryazdani-space-8);
    box-shadow: var(--dryazdani-shadow-lg);
    border-top: 4px solid var(--dryazdani-primary);
}

.dryazdani-clinic-card__header {
    margin-bottom: var(--dryazdani-space-4);
}

.dryazdani-clinic-card__name {
    font-family: var(--dryazdani-font-heading);
    font-size: var(--dryazdani-text-2xl);
    color: var(--dryazdani-text-primary);
    margin-bottom: var(--dryazdani-space-2);
}

.dryazdani-clinic-card__address {
    display: flex;
    align-items: flex-start;
    gap: var(--dryazdani-space-2);
    color: var(--dryazdani-text-body);
    font-size: var(--dryazdani-text-sm);
}

.dryazdani-clinic-card__buttons {
    display: flex;
    gap: var(--dryazdani-space-4);
    margin-top: var(--dryazdani-space-6);
}


/* ----- CTA Section ----- */
.dryazdani-cta {
    background: linear-gradient(
        135deg,
        var(--dryazdani-secondary) 0%,
        var(--dryazdani-secondary-light) 100%
    );
    color: var(--dryazdani-text-inverse);
    text-align: center;
    padding: var(--dryazdani-space-16) var(--dryazdani-space-6);
}

.dryazdani-cta__title {
    color: var(--dryazdani-text-inverse);
    margin-bottom: var(--dryazdani-space-4);
}

.dryazdani-cta__description {
    color: rgba(255, 255, 255, 0.8);
    max-width: 600px;
    margin-inline: auto;
    margin-bottom: var(--dryazdani-space-8);
}

.dryazdani-cta__buttons {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--dryazdani-space-4);
}


/* ----- Footer Widget ----- */
.dryazdani-footer {
    background-color: var(--dryazdani-secondary);
    color: var(--dryazdani-text-inverse);
    padding: var(--dryazdani-space-8) 0 0;
}

.dryazdani-footer__grid {
    display: grid;
    gap: var(--dryazdani-space-8);
    grid-template-columns: 1fr;
}

@media (min-width: 768px) {
    .dryazdani-footer__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .dryazdani-footer__grid {
        grid-template-columns: 2fr 1fr 1fr 1fr;
    }
}

.dryazdani-footer__title {
    color: var(--dryazdani-primary);
    font-size: var(--dryazdani-text-lg);
    margin-bottom: var(--dryazdani-space-4);
}

.dryazdani-footer__link {
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    transition: color var(--dryazdani-duration-fast);
}

.dryazdani-footer__link:hover {
    color: var(--dryazdani-primary);
}

.dryazdani-footer__bottom {
    text-align: center !important;
    font-size: var(--dryazdani-text-sm);
    color: rgba(255, 255, 255, 0.5);
}


/* ==========================================================================
   END OF DESIGN SYSTEM
   ========================================================================== */