:root {
  --metro-primary: #6b7f43;
  --metro-secondary: #b1c695;
  --metro-primary-hover: #8ea267;
  --metro-secondary-hover: #c4cdb7;
  --metro-text-on-dark: #ffffff;
  --metro-text-on-light: #1a2938;
  --metro-text-primary: #212529;
  --metro-success: #198754;
  --metro-error: #dc3545;
  --metro-warning: #ffc107;
  --metro-info: #0dcaf0;
  --metro-border: #dee2e6;
  --metro-background: #f8f9fa;
  --metro-button-height: 44px;
  --metro-badge-radius: 4px;
  --metro-input-height: var(--metro-button-height);
  --metro-hero-bg: linear-gradient(135deg, var(--metro-primary), var(--metro-primary) 70%, var(--metro-secondary));
  --metro-nav-bg: #ffffff;
  --metro-breakpoint-sm: 640px;
  --metro-table-bg: transparent;
  --metro-tile-padding: 1.5rem;
  --metro-font-base: 'Comfortaa', -apple-system, BlinkMacSystemFont, sans-serif;
  --metro-button-padding: 0.5rem 1.25rem;
  --metro-badge-padding: 0.25rem 0.5rem;
  --metro-input-padding: 0.5rem 0.75rem;
  --metro-hero-padding: 4rem 1rem;
  --metro-nav-link-color: var(--metro-text-primary);
  --metro-breakpoint-md: 768px;
  --metro-table-text: var(--metro-text-on-dark);
  --metro-tile-radius: 0px;
  --metro-font-arabic: 'Tajawal', -apple-system, BlinkMacSystemFont, sans-serif;
  --metro-button-radius: 0px;
  --metro-badge-font-size: 0.75rem;
  --metro-input-radius: 0px;
  --metro-nav-link-hover-bg: rgba(0, 0, 0, 0.05);
  --metro-breakpoint-lg: 1024px;
  --metro-table-border: rgba(255, 255, 255, 0.1);
  --metro-tile-gap: 0.75rem;
  --metro-font-size-xs: 0.75rem;
  --metro-button-font-size: 0.9375rem;
  --metro-alert-radius: 8px;
  --metro-input-bg: var(--metro-surface);
  --metro-nav-link-radius: 0.5rem;
  --metro-table-hover-bg: rgba(255, 255, 255, 0.05);
  --metro-tile-dark-bg: var(--metro-primary);
  --metro-font-size-sm: 0.875rem;
  --button-border-width: 1.5px;
  --button-border-color-dark: var(--text-on-dark);
  --button-border-color-light: var(--text-on-light);
  --metro-button-border-width: 1.5px;
  --metro-alert-padding: 1rem;
  --metro-input-border: var(--metro-border);
  --metro-tile-dark-text: var(--metro-text-on-dark);
  --metro-font-size-base: 1rem;
  --metro-button-dark-bg: transparent;
  --metro-surface: #ffffff;
  --metro-input-text: var(--metro-text-primary);
  --metro-tile-light-bg: var(--metro-secondary);
  --metro-font-size-lg: 1.125rem;
  --ac-dark: var(--primary-color);
  --metro-button-dark-text: var(--metro-text-on-dark);
  --metro-input-focus-border: var(--metro-primary);
  --metro-tile-light-text: var(--metro-text-on-light);
  --metro-font-size-xl: 1.25rem;
  --ac-light: var(--secondary-color);
  --metro-button-dark-border: var(--metro-text-on-dark);
  --metro-checkbox-size: 20px;
  --metro-tile-shadow: 0 2px 8px rgba(0,0,0,0.1);
  --metro-font-size-2xl: 1.5rem;
  --ac-dark-hover: var(--primary-hover);
  --metro-button-dark-hover-bg: rgba(255, 255, 255, 0.1);
  --metro-radio-size: 20px;
  --metro-tile-hover-shadow: 0 12px 28px rgba(0,0,0,0.2);
  --metro-font-size-3xl: 1.875rem;
  --ac-light-hover: var(--secondary-hover);
  --metro-button-light-bg: transparent;
  --metro-text-secondary: #6c757d;
  --metro-checkbox-color: var(--metro-primary);
  --metro-tile-hover-scale: 1.02;
  --metro-font-weight-light: 300;
  --metro-button-light-text: var(--metro-text-on-light);
  --metro-text-muted: #adb5bd;
  --metro-radio-color: var(--metro-primary);
  --metro-tile-transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  --metro-font-weight-normal: 400;
  --metro-button-light-border: var(--metro-text-on-light);
  --metro-font-weight-bold: 600;
  --metro-button-light-hover-bg: rgba(0, 0, 0, 0.1);
  --metro-border-dark: #adb5bd;
  --primary-color: #4f5503;
  --secondary-color: #d6d6d6;
  --primary-hover: #d6d6d6;
  --secondary-hover: #4f7a28;
  --text-on-dark: white;
  --text-on-light: #1a2938;
  --font-family-base: 'Comfortaa', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-family-arabic: 'Tajawal', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-size-base: 1rem;
  --button-height: 44px;
  --button-padding: 0.5rem 1.25rem;
  --button-radius: 4px;
  --button-font-size: 0.9375rem;
  --tile-radius: 8px;
  --tile-padding: 20px;
  --grid-gap: 20px;
}

/* ============================================
WINDOWS PHONE METRO UI - ROBUST DYNAMIC SYSTEM
Version: 5.0 (Complete & Reliable)
All styles use database variables
No conflicts with Bootstrap
============================================ */

/* ========== METRO CORE VARIABLES ========== */
:root {
    /* Legacy compatibility */
    --primary-color: var(--metro-primary, #2d5b7a);
    --secondary-color: var(--metro-secondary, #86c0e0);
    --text-on-dark: var(--metro-text-on-dark, #ffffff);
    --text-on-light: var(--metro-text-on-light, #1a2938);
}

/* ========== METRO TILE SYSTEM ========== */
/* Base tile styling */
.wp-tile {
    border-radius: var(--metro-tile-radius, 0px);
    padding: var(--metro-tile-padding, 1.5rem);
    transition: var(--metro-tile-transition, all 0.2s cubic-bezier(0.4, 0, 0.2, 1));
    box-shadow: var(--metro-tile-shadow, 0 2px 8px rgba(0,0,0,0.1));
    margin: 0;
    position: relative;
    overflow: hidden;
}

.wp-tile:hover {
    transform: scale(var(--metro-tile-hover-scale, 1.02));
    box-shadow: var(--metro-tile-hover-shadow, 0 12px 28px rgba(0,0,0,0.2));
    z-index: 10;
}

/* Tile size variations */
.wp-tile-square {
    aspect-ratio: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.wp-tile-wide {
    grid-column: span 2;
}

.wp-tile-large {
    grid-column: span 2;
    grid-row: span 2;
}

/* ========== TILE COLOR SYSTEM - ROBUST HYBRID ========== */
/* DARK TILES: Base sets light text for inheritance */
.wp-tile-dark {
    background-color: var(--metro-tile-dark-bg, var(--metro-primary, #2d5b7a)) !important;
    color: var(--metro-text-on-dark, #ffffff) !important;
}

/* Ensure specific elements inherit text color in dark tiles */
.wp-tile-dark h1,
.wp-tile-dark h2,
.wp-tile-dark h3,
.wp-tile-dark h4,
.wp-tile-dark h5,
.wp-tile-dark h6,
.wp-tile-dark p,
.wp-tile-dark .wp-title,
.wp-tile-dark .wp-subtitle,
.wp-tile-dark .wp-text {
    color: inherit !important;
}

/* LIGHT TILES: Base sets dark text for inheritance */
.wp-tile-light {
    background-color: var(--metro-tile-light-bg, var(--metro-secondary, #86c0e0)) !important;
    color: var(--metro-text-on-light, #1a2938) !important;
}

/* Ensure specific elements inherit text color in light tiles */
.wp-tile-light h1,
.wp-tile-light h2,
.wp-tile-light h3,
.wp-tile-light h4,
.wp-tile-light h5,
.wp-tile-light h6,
.wp-tile-light p,
.wp-tile-light .wp-title,
.wp-tile-light .wp-subtitle,
.wp-tile-light .wp-text {
    color: inherit !important;
}

/* ========== SMART COLOR STYLE EXCEPTIONS ========== */
/* Rule 1: If element explicitly uses --metro-text-on-light in dark tile, use it */
.wp-tile-dark [style*="color: var(--metro-text-on-light)"],
.wp-tile-dark [style*="color: var(--metro-text-on-light);"] {
    color: var(--metro-text-on-light) !important;
}

/* Rule 2: If element explicitly uses --metro-text-on-dark in light tile, use it */
.wp-tile-light [style*="color: var(--metro-text-on-dark)"],
.wp-tile-light [style*="color: var(--metro-text-on-dark);"] {
    color: var(--metro-text-on-dark) !important;
}

/* Rule 3: If element explicitly uses --metro-text-primary, respect it */
[style*="color: var(--metro-text-primary)"],
[style*="color: var(--metro-text-primary);"] {
    color: var(--metro-text-primary) !important;
}

/* Rule 4: For color swatch examples specifically */
.wp-tile-dark .rounded[style*="background: var(--metro-primary)"],
.wp-tile-dark .rounded[style*="background: var(--metro-success)"],
.wp-tile-dark .rounded[style*="background: var(--metro-error)"] {
    color: var(--metro-text-on-dark) !important;
}

.wp-tile-light .rounded[style*="background: var(--metro-secondary)"] {
    color: var(--metro-text-on-light) !important;
}

/* Rule 5: Text color examples specifically */
.wp-tile-dark span[style*="color: var(--metro-text-on-dark)"] {
    color: var(--metro-text-on-dark) !important;
}

.wp-tile-light span[style*="color: var(--metro-text-on-light)"] {
    color: var(--metro-text-on-light) !important;
}

/* ========== METRO BUTTON SYSTEM - ROBUST HYBRID ========== */
/* Base button styles - resets ALL Bootstrap styles */
.wp-btn,
.wp-btn-light {
    all: unset;
    font-family: var(--metro-font-base, "'Comfortaa', sans-serif") !important;
    font-weight: var(--metro-font-weight-bold, 600) !important;
    font-size: var(--metro-button-font-size, 0.9375rem) !important;
    padding: var(--metro-button-padding, 0.5rem 1.25rem) !important;
    height: var(--metro-button-height, 44px) !important;
    min-height: var(--metro-button-height, 44px) !important;
    border: var(--metro-button-border-width, 1.5px) solid transparent !important;
    border-radius: var(--metro-button-radius, 0px) !important;
    transition: all 0.2s ease !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    white-space: nowrap !important;
    line-height: 1.2 !important;
    cursor: pointer !important;
    text-decoration: none !important;
    box-sizing: border-box !important;
    vertical-align: middle !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
}

/* ========== FIXED BUTTON STYLES (Semantic) ========== */
/* DARK BUTTON: Light border/text (for dark backgrounds/contexts) */
.wp-btn {
    border-color: var(--metro-button-dark-border, var(--metro-text-on-dark, #ffffff)) !important;
    color: var(--metro-button-dark-text, var(--metro-text-on-dark, #ffffff)) !important;
    background: var(--metro-button-dark-bg, transparent) !important;
}

.wp-btn:hover {
    background: var(--metro-button-dark-hover-bg, rgba(255, 255, 255, 0.15)) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2) !important;
}

/* LIGHT BUTTON: Dark border/text (for light backgrounds/contexts) */
.wp-btn-light {
    border-color: var(--metro-button-light-border, var(--metro-text-on-light, #1a2938)) !important;
    color: var(--metro-button-light-text, var(--metro-text-on-light, #1a2938)) !important;
    background: var(--metro-button-light-bg, transparent) !important;
}

.wp-btn-light:hover {
    background: var(--metro-button-light-hover-bg, rgba(0, 0, 0, 0.1)) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1) !important;
}

/* ========== UTILITY CLASSES ========== */
/* Disabled buttons */
.wp-btn:disabled,
.wp-btn[disabled],
.wp-btn-light:disabled,
.wp-btn-light[disabled] {
    opacity: 0.5 !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
    transform: none !important;
    box-shadow: none !important;
}

/* Small buttons */
.wp-btn-sm {
    font-size: calc(var(--metro-button-font-size, 0.9375rem) * 0.85) !important;
    padding: calc(0.5rem * 0.75) calc(1.25rem * 0.6) !important;
    height: calc(var(--metro-button-height, 44px) * 0.85) !important;
}


/* ========== BOOTSTRAP COMPATIBILITY - NUCLEAR OVERRIDES ========== */
/* Override Bootstrap buttons inside Metro tiles */
.wp-tile-dark .btn,
.wp-tile-dark .btn-primary,
.wp-tile-dark .btn-secondary,
.wp-tile-dark .btn-success,
.wp-tile-dark .btn-danger,
.wp-tile-dark .btn-warning,
.wp-tile-dark .btn-info,
.wp-tile-dark .btn-light,
.wp-tile-dark .btn-dark {
    all: unset !important;
    font-family: var(--metro-font-base, "'Comfortaa', sans-serif") !important;
    font-weight: var(--metro-font-weight-bold, 600) !important;
    font-size: var(--metro-button-font-size, 0.9375rem) !important;
    padding: var(--metro-button-padding, 0.5rem 1.25rem) !important;
    height: var(--metro-button-height, 44px) !important;
    min-height: var(--metro-button-height, 44px) !important;
    border: var(--metro-button-border-width, 1.5px) solid var(--metro-button-dark-border, var(--metro-text-on-dark, #ffffff)) !important;
    border-radius: var(--metro-button-radius, 0px) !important;
    background: transparent !important;
    color: var(--metro-button-dark-text, var(--metro-text-on-dark, #ffffff)) !important;
    transition: all 0.2s ease !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    white-space: nowrap !important;
    line-height: 1.2 !important;
    cursor: pointer !important;
    text-decoration: none !important;
    box-sizing: border-box !important;
    vertical-align: middle !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
}

.wp-tile-light .btn,
.wp-tile-light .btn-primary,
.wp-tile-light .btn-secondary,
.wp-tile-light .btn-success,
.wp-tile-light .btn-danger,
.wp-tile-light .btn-warning,
.wp-tile-light .btn-info,
.wp-tile-light .btn-light,
.wp-tile-light .btn-dark {
    all: unset !important;
    font-family: var(--metro-font-base, "'Comfortaa', sans-serif") !important;
    font-weight: var(--metro-font-weight-bold, 600) !important;
    font-size: var(--metro-button-font-size, 0.9375rem) !important;
    padding: var(--metro-button-padding, 0.5rem 1.25rem) !important;
    height: var(--metro-button-height, 44px) !important;
    min-height: var(--metro-button-height, 44px) !important;
    border: var(--metro-button-border-width, 1.5px) solid var(--metro-button-light-border, var(--metro-text-on-light, #1a2938)) !important;
    border-radius: var(--metro-button-radius, 0px) !important;
    background: transparent !important;
    color: var(--metro-button-light-text, var(--metro-text-on-light, #1a2938)) !important;
    transition: all 0.2s ease !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    white-space: nowrap !important;
    line-height: 1.2 !important;
    cursor: pointer !important;
    text-decoration: none !important;
    box-sizing: border-box !important;
    vertical-align: middle !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
}

/* Override Bootstrap alerts inside Metro tiles */
.wp-tile-dark .alert {
    background-color: rgba(255, 255, 255, 0.1) !important;
    color: var(--metro-text-on-dark, #ffffff) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

.wp-tile-light .alert {
    background-color: rgba(0, 0, 0, 0.05) !important;
    color: var(--metro-text-on-light, #1a2938) !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
}

/* Specific alert types */
.wp-tile-dark .alert-success {
    background-color: rgba(25, 135, 84, 0.2) !important;
    border-color: rgba(25, 135, 84, 0.3) !important;
}

.wp-tile-dark .alert-danger {
    background-color: rgba(220, 53, 69, 0.2) !important;
    border-color: rgba(220, 53, 69, 0.3) !important;
}

.wp-tile-dark .alert-warning {
    background-color: rgba(255, 193, 7, 0.2) !important;
    border-color: rgba(255, 193, 7, 0.3) !important;
    color: var(--metro-text-on-dark, #ffffff) !important;
}

.wp-tile-light .alert-success {
    background-color: rgba(25, 135, 84, 0.1) !important;
    border-color: rgba(25, 135, 84, 0.2) !important;
}

.wp-tile-light .alert-danger {
    background-color: rgba(220, 53, 69, 0.1) !important;
    border-color: rgba(220, 53, 69, 0.2) !important;
}

.wp-tile-light .alert-warning {
    background-color: rgba(255, 193, 7, 0.1) !important;
    border-color: rgba(255, 193, 7, 0.2) !important;
    color: var(--metro-text-on-light, #1a2938) !important;
}

/* ========== METRO BADGE SYSTEM - ROBUST ========== */
/* Base badge - resets ALL Bootstrap styles */
.badge {
    all: unset;
    display: inline-block !important;
    padding: var(--metro-badge-padding, 0.25rem 0.5rem) !important;
    font-size: var(--metro-badge-font-size, 0.75rem) !important;
    font-weight: var(--metro-font-weight-bold, 600) !important;
    line-height: 1 !important;
    text-align: center !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    border-radius: var(--metro-badge-radius, 4px) !important;
    vertical-align: baseline !important;
    white-space: nowrap !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) !important; /* Subtle shadow for separation */
}

/* PRIMARY BADGE: White text on dark blue - ALWAYS */
.badge.bg-primary {
    background-color: var(--metro-primary, #2d5b7a) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
}

/* SECONDARY BADGE: Dark text on light blue - ALWAYS */
.badge.bg-secondary {
    background-color: var(--metro-secondary, #86c0e0) !important;
    color: #1a2938 !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
}

/* SUCCESS BADGE: White text on green - ALWAYS */
.badge.bg-success {
    background-color: var(--metro-success, #198754) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
}

/* DANGER BADGE: White text on red - ALWAYS */
.badge.bg-danger {
    background-color: var(--metro-error, #dc3545) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
}

/* WARNING BADGE: Dark text on yellow - ALWAYS */
.badge.bg-warning {
    background-color: var(--metro-warning, #ffc107) !important;
    color: #1a2938 !important;
    border: 1px solid rgba(0, 0, 0, 0.2) !important;
}

/* INFO BADGE: Dark text on light blue - BETTER CONTRAST */
.badge.bg-info {
    background-color: var(--metro-info, #0dcaf0) !important;
    color: #1a2938 !important;
    border: 1px solid rgba(0, 0, 0, 0.2) !important;
}

/* Badges inside dark tiles (no bg- class) */
.wp-tile-dark .badge:not([class*="bg-"]) {
    background-color: rgba(255, 255, 255, 0.2) !important;
    color: var(--metro-text-on-dark, #ffffff) !important;
}

/* Badges inside light tiles (no bg- class) */
.wp-tile-light .badge:not([class*="bg-"]) {
    background-color: rgba(0, 0, 0, 0.1) !important;
    color: var(--metro-text-on-light, #1a2938) !important;
}

/* ========== METRO TABLE SYSTEM - ROBUST ========== */
/* Regular tables inherit from parent tiles */
.wp-tile-dark .table:not(.table-dark) th,
.wp-tile-dark .table:not(.table-dark) td,
.wp-tile-dark .table:not(.table-dark) *:not(.badge) {
    color: var(--metro-text-on-dark, #ffffff) !important;
}

.wp-tile-light .table:not(.table-dark) th,
.wp-tile-light .table:not(.table-dark) td,
.wp-tile-light .table:not(.table-dark) *:not(.badge) {
    color: var(--metro-text-on-light, #1a2938) !important;
}

/* TABLE-DARK: Always dark background with light text */
.table-dark,
.table-dark th,
.table-dark td,
.table-dark *:not(.badge) {
    background-color: #1a1a1a !important;
    color: #ffffff !important;
}

/* Table borders */
.wp-tile-dark .table:not(.table-dark) th,
.wp-tile-dark .table:not(.table-dark) td {
    border-color: rgba(255, 255, 255, 0.2) !important;
}

.wp-tile-light .table:not(.table-dark) th,
.wp-tile-light .table:not(.table-dark) td {
    border-color: rgba(0, 0, 0, 0.1) !important;
}

.table-dark th,
.table-dark td {
    border-color: rgba(255, 255, 255, 0.3) !important;
}

/* Buttons inside tables */
.table-dark .wp-btn,
.table-dark .wp-btn-light {
    border-color: #ffffff !important;
    color: #ffffff !important;
}

/* ========== METRO TYPOGRAPHY ========== */
.wp-title {
    font-family: var(--metro-font-base, "'Comfortaa', sans-serif") !important;
    font-weight: var(--metro-font-weight-light, 300) !important;
    font-size: var(--metro-font-size-3xl, 1.875rem) !important;
    line-height: 1.2 !important;
    margin-bottom: 0.5rem !important;
}

.wp-subtitle {
    font-family: var(--metro-font-base, "'Comfortaa', sans-serif") !important;
    font-weight: var(--metro-font-weight-normal, 400) !important;
    font-size: var(--metro-font-size-lg, 1.125rem) !important;
    line-height: 1.2 !important;
    opacity: 0.9 !important;
}

.wp-text {
    font-family: var(--metro-font-base, "'Comfortaa', sans-serif") !important;
    font-weight: var(--metro-font-weight-normal, 400) !important;
    font-size: var(--metro-font-size-sm, 0.875rem) !important;
    line-height: 1.5 !important;
    opacity: 0.8 !important;
}

.wp-icon {
    font-size: var(--metro-font-size-2xl, 1.5rem) !important;
    margin-bottom: 1rem !important;
    opacity: 0.9 !important;
}


/* ========== ARABIC LANGUAGE SUPPORT ========== */
/* Arabic font for all elements when lang=ar */
html[lang="ar"] body,
html[lang="ar"] .btn,
html[lang="ar"] .form-control,
html[lang="ar"] h1,
html[lang="ar"] h2,
html[lang="ar"] h3,
html[lang="ar"] h4,
html[lang="ar"] h5,
html[lang="ar"] h6 {
    font-family: var(--metro-font-arabic, var(--font-family-arabic, "'Tajawal', sans-serif")) !important;
}

/* Arabic font for Metro components */
html[lang="ar"] .wp-title,
html[lang="ar"] .wp-subtitle,
html[lang="ar"] .wp-text,
html[lang="ar"] .wp-btn,
html[lang="ar"] .wp-btn-light {
    font-family: var(--metro-font-arabic, var(--font-family-arabic, "'Tajawal', sans-serif")) !important;
}

/* Reset letter-spacing for Arabic (Arabic doesn't use letter-spacing) */
html[lang="ar"] .wp-btn,
html[lang="ar"] .wp-btn-light,
html[lang="ar"] .badge {
    letter-spacing: 0 !important;
}    

/* ========== METRO GRID SYSTEM ========== */
.wp-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: var(--metro-tile-gap, 0.75rem);
    margin: 0 auto;
    max-width: 1200px;
}

@media (min-width: 768px) {
    .wp-grid {
        grid-template-columns: repeat(6, 1fr);
        gap: 1rem;
    }
}

@media (max-width: 767px) {
    .wp-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.5rem;
    }
    
    .wp-tile-wide,
    .wp-tile-large {
        grid-column: span 2;
    }
}

/* ========== METRO HERO ========== */
.wp-hero {
    background: var(--metro-hero-bg, linear-gradient(135deg, var(--metro-primary), var(--metro-primary) 70%, var(--metro-secondary)));
    padding: var(--metro-hero-padding, 4rem 1rem);
    color: var(--metro-text-on-dark, #ffffff);
    text-align: center;
    margin-bottom: 2rem;
}

/* ========== RESPONSIVE UTILITIES ========== */
@media (max-width: 767px) {
    .wp-btn,
    .wp-btn-light {
        font-size: calc(var(--metro-button-font-size, 0.9375rem) * 0.9) !important;
        padding: calc(0.5rem * 0.8) calc(1.25rem * 0.8) !important;
        height: calc(var(--metro-button-height, 44px) * 0.9) !important;
    }
    
    .wp-title {
        font-size: var(--metro-font-size-2xl, 1.5rem) !important;
    }
    
    .wp-subtitle {
        font-size: var(--metro-font-size-base, 1rem) !important;
    }
    
    .wp-text {
        font-size: var(--metro-font-size-xs, 0.75rem) !important;
    }
}