/*
Theme Name: One Life
Theme URI: https://onelife.com.eg
Author: One Life Lead Architect
Author URI: https://onelife.com.eg
Description: Premium eCommerce & Retail WordPress Theme built with pixel-perfect Elementor integration, based on the One Life Egypt retail design system. Includes multi-preset palettes (Electric Blue, Emerald Teal, Fire Orange, Modern Minimal), comprehensive 1-Click Demo Import, custom Elementor widgets, installments calculator pill, mega-menu, and native RTL support.
Version: 1.0.1
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: onelife
Tags: e-commerce, custom-colors, custom-menu, custom-logo, elementor, full-width-template, rtl-language-support, translation-ready
*/

:root {
  /* Preset: 2B Classic Royal Blue (Official Default) */
  --ol-primary: #0B57D0;
  --ol-primary-hover: #0946A8;
  --ol-primary-light: #EFF6FF;
  --ol-primary-gradient: linear-gradient(135deg, #1D64F2 0%, #1054CE 50%, #0B48B8 100%);
  --ol-accent: #EA580C;
  --ol-accent-hover: #C2410C;
  --ol-accent-light: #FFF7ED;
  
  /* Neutral system */
  --ol-dark: #11161A;
  --ol-dark-secondary: #0F1419;
  --ol-gray-800: #1E293B;
  --ol-gray-700: #334155;
  --ol-gray-600: #475569;
  --ol-gray-500: #64748B;
  --ol-gray-400: #94A3B8;
  --ol-gray-300: #CBD5E1;
  --ol-gray-200: #E2E8F0;
  --ol-gray-100: #F1F5F9;
  --ol-gray-50: #FAF9F6;
  --ol-white: #FFFFFF;
  
  /* Status & Badges */
  --ol-success: #059669;
  --ol-danger: #DC2626;
  --ol-warning: #F59E0B;
  --ol-sale: #DC2626;
  
  /* Typography */
  --ol-font-main: 'Alexandria', 'Cairo', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --ol-font-heading: 'Alexandria', 'Cairo', sans-serif;
  
  /* Radius & Shadows */
  --ol-radius-sm: 6px;
  --ol-radius-md: 10px;
  --ol-radius-lg: 16px;
  --ol-radius-xl: 24px;
  --ol-radius-full: 9999px;
  --ol-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06);
  --ol-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
  --ol-shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.12);
  --ol-transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  --ol-container: 1320px;
}

/* Color Presets Matching 2B Classic Vector Specification */
body.ol-preset-blue,
body.ol-preset-classic2b {
  --ol-primary: #0B57D0;
  --ol-primary-hover: #0946A8;
  --ol-primary-light: #EFF6FF;
  --ol-primary-gradient: linear-gradient(135deg, #1D64F2 0%, #1054CE 50%, #0B48B8 100%);
  --ol-accent: #EA580C;
  --ol-accent-hover: #C2410C;
  --ol-accent-light: #FFF7ED;
}

body.ol-preset-emerald {
  --ol-primary: #165B4C;
  --ol-primary-hover: #0F4539;
  --ol-primary-light: #E8F5F1;
  --ol-primary-gradient: linear-gradient(135deg, #0F4539 0%, #165B4C 50%, #2A826E 100%);
  --ol-accent: #C59B27;
  --ol-accent-hover: #A8831E;
  --ol-accent-light: #FAF4E5;
}

body.ol-preset-orange {
  --ol-primary: #FF6B00;
  --ol-primary-hover: #E05C00;
  --ol-primary-light: #FFF2E8;
  --ol-primary-gradient: linear-gradient(135deg, #E05C00 0%, #FF6B00 50%, #FFA133 100%);
  --ol-accent: #111827;
  --ol-accent-hover: #1F2937;
  --ol-accent-light: #F3F4F6;
}

body.ol-preset-minimal {
  --ol-primary: #111827;
  --ol-primary-hover: #000000;
  --ol-primary-light: #F3F4F6;
  --ol-primary-gradient: linear-gradient(135deg, #111827 0%, #1F2937 50%, #374151 100%);
  --ol-accent: #0062E0;
  --ol-accent-hover: #004EC2;
  --ol-accent-light: #EBF3FF;
}

/* Global Reset & Base */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  letter-spacing: normal !important;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
}

body {
  font-family: var(--ol-font-main);
  background-color: #F8FAFC;
  color: var(--ol-gray-800);
  line-height: 1.65;
  letter-spacing: normal !important;
  direction: rtl;
  text-align: right;
  overflow-x: hidden;
}

body.ltr {
  direction: ltr;
  text-align: left;
}

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

img {
  max-width: 100%;
  height: auto;
  display: block;
}

ul, ol {
  list-style: none;
}

button, input, select, textarea {
  font-family: inherit;
  font-size: inherit;
}

.ol-container {
  width: 100%;
  max-width: var(--ol-container);
  margin-left: auto;
  margin-right: auto;
  padding-left: 20px;
  padding-right: 20px;
}