/* =========================================
   نظام الثيمات (Themes) بأسلوب Canva
========================================= */

/* 1. الستايل الافتراضي (البنفسجي/الأزرق - Canva Vibe) */
:root {
    --bg-gradient-start: #667eea;
    --bg-gradient-end: #764ba2;
    --btn-color: #667eea;
    --btn-hover: #5a67d8;
    --card-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.05);
}

/* 2. ستايل النعناع (أخضر/سماوي هادئ) */
html.theme-mint {
    --bg-gradient-start: #20bf55;
    --bg-gradient-end: #01baef;
    --btn-color: #20bf55;
    --btn-hover: #189a42;
}

/* 3. ستايل الغروب (برتقالي/وردي دافئ) */
html.theme-sunset {
    --bg-gradient-start: #fa709a;
    --bg-gradient-end: #fee140;
    --btn-color: #fa709a;
    --btn-hover: #e0527c;
}

/* =========================================
   تطبيق المتغيرات على أجزاء الموقع
========================================= */

/* تدرج لوني أنيق للترويسة وشريط التنقل */
.canva-header {
    background: linear-gradient(135deg, var(--bg-gradient-start), var(--bg-gradient-end));
    color: white;
}

/* أزرار تفاعلية */
.canva-btn {
    background-color: var(--btn-color);
    color: white;
    transition: all 0.3s ease;
}
.canva-btn:hover {
    background-color: var(--btn-hover);
    transform: translateY(-2px);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

/* بطاقات الشواهد بخفة Canva */
.canva-card {
    box-shadow: var(--card-shadow);
    border-radius: 1.5rem; /* زوايا دائرية ناعمة جداً */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: none;
}
.canva-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
}

/* =========================================================
   تنسيقات التوافق المخصصة لأجهزة الآيفون ومتصفح iOS Safari
   ========================================================= */

/* 1. جعل السحب بالأصابع سلس ومطاطي */
* {
    -webkit-tap-highlight-color: transparent; /* إزالة التظليل الأزرق عند اللمس */
}

/* 2. تحسين السحب الأفقي للقوائم على الآيفون */
.scrollbar-none {
    -ms-overflow-style: none;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch; /* سحب سلس باليد على iOS */
}
.scrollbar-none::-webkit-scrollbar {
    display: none;
}

/* 3. منع التكبير التلقائي في الآيفون عند الضغط على الخانات */
input[type="text"],
input[type="password"],
input[type="email"],
input[type="url"],
input[type="search"],
textarea,
select {
    font-size: 16px !important; /* منع زوم iOS Safari */
}

/* 4. دعم Blur الخاص بـ WebKit في الآيفون */
.backdrop-blur-md,
.backdrop-blur-sm {
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
}

/* 5. معالجة منطقة الحافة/البروز العلوي للآيفون (Safe Area Insets) */
header {
    padding-top: env(safe-area-inset-top);
}