@supports not (--custom: value) {
  body { background-color: #0d1b2a; color: white; }
}
html {
  visibility: hidden;
}
html.theme-night,
html.theme-day,
html.theme-wild,
html.theme-wine,
html.theme-coffee,
html.theme-apple,
html.theme-starry-night {
  visibility: visible;
}
body {
  margin: 0;
  overflow-x: hidden;
}
html{
  transition: all 4s ease-in-out;
}
#nav-btn .nav-btn__item i,
#nav-btn .nav-btn__item span {
  color: var(--nav-btn-color) !important;
  transition: color 3s ease !important;
  will-change: color;
}
canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: -1;
  opacity: 0;
  transition: opacity 6s ease;
}
.theme-night {
  background-color: #0d1b2a;
}
.theme-day {
background-color: #26A69A;
}
.theme-wild {
  background-color: #4B0082; 
}
.theme-wine {
  background-color: #4a0033;
}
.theme-coffee {
  background-color: #4b382a;
}
.theme-starry-night {
  background-color: #0a0a2a;
}
.theme-apple {
  background-color: #2d5016;
}

.theme-night  #space,
.theme-day    #day-canvas,
.theme-wild   #wild-canvas,
.theme-wine   #wine-canvas,
.theme-coffee #coffee-canvas,
.theme-starry-night #starry-night-canvas,
.theme-apple #apple-canvas {
  opacity: 1;
}
.theme-wine::after {
  content: '';
  position: fixed; top: 0; left: 0;
  width: 100%; height: 100%;
  background: radial-gradient(circle at center,
    rgba(157,114,67,0.2) 0%, rgba(157,114,67,0) 70%);
  pointer-events: none;
  z-index: -1;
}
/* تأكد من وجود ثيم افتراضي */
html:not([class*="theme-"]) {
  background-color: #0d1b2a !important;
--welcome-color: rgba(0, 191, 255, 1);
  --section-bg:  transparent ;  /* خلفية القسم */ 
  --h1-color: rgba(0, 191, 255, 1);  /* لون H1 */
  --nav-bg: rgba(0, 0, 0, 0) ; /* خلفية النافبار */
  --nav-btn-color :rgba(0, 191, 255, 1) ; /* لون زر النافبار */
  --nav-btn-bg: transparent;  /* خلفية زر النافبار */
  --nav-icon-color:rgba(0, 191, 255, 1) ;  /* لون أيقونة النافبار */
  --nav-active-color: rgba(0, 191, 255, 1) ; /* لون زر نشط في النافبار */
  --offer-border: transparent;  /* بُوردر العروض */
  --offer-text-color:rgba(0, 191, 255, 1) ;  /* لون نص العروض */
  --offer-bg:rgba(0,0,0,0.1)  ;  /* خلفية العروض */
  --offer-title-color: rgba(0, 191, 255, 1) ; /* لون عنوان العرض */
  --offer-title-shadow: 0 0 10px 0 0 20px rgba(0, 191, 255, 1); /* ظل نص عنوان العرض */
  --offer-discount-color:rgba(0, 191, 255, 1)  ; /* لون الخصم */
  --offer-discount-ground: rgba(0, 191, 255, 0.4) ; /* بُوردر الخصم */
  --offer-discount-shadow:0 0 6px rgba(0, 191, 255, 1) ; /* ظل نص الخصم */
  --timeblock-bg: rgba(0, 191, 255, 0.4); /* خلفية بلوك الوقت */
  --time-number-color: rgba(0, 191, 255, 1); /* لون أرقام الوقت */
  --time-number-shadow: 0 0 20px  rgba(0, 191, 255, 1) ;  /* ظل أرقام الوقت */
  --time-label-color: rgba(0, 191, 255, 1); /* لون تسمية الوقت */
  --time-colon-color:rgba(0, 191, 255, 1) ; /* لون النقطتين */
  --time-colon-shadow: 0 0 6px  rgba(0, 191, 255, 1); /* ظل النقطتين */
  --bot-border: 2px solid #00bfff  ;  /* بُوردر البوت */
  --bot-bg: #0d1b2a ;             /* خلفية البوت */
  --bot-name-color: #00bfff;     /* لون اسم البوت */
  --bot-scroll-thumb: #00bfff;   /* لون شريط تمرير البوت */
  --bot-msg-border: #00bfff; /* بُوردر رسالة البوت */
  --bot-msg-bg: rgba(13,27,42,0.8);  /* خلفية رسالة البوت */
  --bot-msg-text: #00bfff;    /* لون نص رسالة البوت */
  --bot-msg-arrow-bg: #00bfff;  /* خلفية سهم رسالة البوت */
  --user-msg-bg: #00bfff;      /* خلفية رسالة المستخدم */
  --user-msg-border: #00bfff;  /* بُوردر رسالة المستخدم */
  --user-msg-text: #0d1b2a;   /* لون نص رسالة المستخدم */
  --user-msg-arrow-bg: #00bfff; /* خلفية سهم رسالة المستخدم */
  --input-text-color: rgba(255,255,255,0.1);/* لون نص حقل الإدخال */
  --input-placeholder-color: #7aaedc; /* لون placeholder */
  --input-icon-color: #00bfff;     ;/* لون أيقونات حقل الإدخال */
  --bot-btn-bg: linear-gradient(135deg, rgba(0,191,255,0.85), rgba(72,239,255,0.9));
  --bot-btn-hover-bg: linear-gradient(135deg, rgba(0,191,255,1), rgba(0,255,234,1));
  --bot-btn-before-bg: linear-gradient(120deg, rgba(0,191,255,0.5), rgba(0,255,234,0.4)); /* خلفية أزرار البوت */
  --bot-btn-hover-bg: #00bfff;   
  --bot-btn-color: #0d1b2a;   /* لون نص أزرار البوت */
  --bot-btn-border: #00bfff;   /* بُوردر أزرار البوت */
  --bot-btn-before-bg: rgba(255,255,255,0.6); /* قبل (::before) لأزرار البوت */
  --aboutme-text-color: rgba(0, 191, 255, 1);  /* لون نص "من أنا" */
  --quickcontact-input-border:  rgba(0, 191, 255, 1); /* بُوردر حقل التواصل السريع */
  --quickcontact-label-color:rgba(0, 191, 255, 1) ; /* لون تسمية التواصل السريع */
  --quickcontact-focus-border: rgba(0, 191, 255, 1);/* بُوردر عند الفوكس */
  --quickcontact-focus-text: rgba(0, 191, 255, 1); /* لون نص عند الفوكس */
  --quickcontact-btn-border:rgba(0, 191, 255, 1) ; /* بُوردر زر التواصل */
  --quickcontact-btn-text: rgba(0, 191, 255, 1); /* لون نص زر التواصل */
  --quickcontact-btn-hover-bg:rgba(0, 191, 255, 1) ; /* خلفية hover زر التواصل */
  --quickcontact-btn-hover-text: black ; /* لون نص hover زر التواصل */
  --quickcontact-success-border:  rgba(0, 191, 255, 1) ; /* بُوردر رسالة التأكيد */
  --quickcontact-success-text: rgba(0, 191, 255, 1);/* لون نص رسالة التأكيد */
  --caard-color: transparent ; /* لون نص رسالة التأكيد */
}
html.theme-night {
  --welcome-color: rgba(0, 191, 255, 1);
  --section-bg:  transparent ;  /* خلفية القسم */ 
  --h1-color: rgba(0, 191, 255, 1);  /* لون H1 */
  --nav-bg: rgba(0, 0, 0, 0) ; /* خلفية النافبار */
  --nav-btn-color :rgba(0, 191, 255, 1) ; /* لون زر النافبار */
  --nav-btn-bg: transparent;  /* خلفية زر النافبار */
  --nav-icon-color:rgba(0, 191, 255, 1) ;  /* لون أيقونة النافبار */
  --nav-active-color: rgba(0, 191, 255, 1) ; /* لون زر نشط في النافبار */
  --offer-border: transparent;  /* بُوردر العروض */
  --offer-text-color:rgba(0, 191, 255, 1) ;  /* لون نص العروض */
  --offer-bg:rgba(0,0,0,0.1)  ;  /* خلفية العروض */
  --offer-title-color: rgba(0, 191, 255, 1) ; /* لون عنوان العرض */
  --offer-title-shadow: 0 0 10px 0 0 20px rgba(0, 191, 255, 1); /* ظل نص عنوان العرض */
  --offer-discount-color:rgba(0, 191, 255, 1)  ; /* لون الخصم */
  --offer-discount-ground: rgba(0, 191, 255, 0.4) ; /* بُوردر الخصم */
  --offer-discount-shadow:0 0 6px rgba(0, 191, 255, 1) ; /* ظل نص الخصم */
  --timeblock-bg: rgba(0, 191, 255, 0.4); /* خلفية بلوك الوقت */
  --time-number-color: rgba(0, 191, 255, 1); /* لون أرقام الوقت */
  --time-number-shadow: 0 0 20px  rgba(0, 191, 255, 1) ;  /* ظل أرقام الوقت */
  --time-label-color: rgba(0, 191, 255, 1); /* لون تسمية الوقت */
  --time-colon-color:rgba(0, 191, 255, 1) ; /* لون النقطتين */
  --time-colon-shadow: 0 0 6px  rgba(0, 191, 255, 1); /* ظل النقطتين */
  --bot-border: 2px solid #00bfff  ;  /* بُوردر البوت */
  --bot-bg: #0d1b2a ;             /* خلفية البوت */
  --bot-name-color: #00bfff;     /* لون اسم البوت */
  --bot-scroll-thumb: #00bfff;   /* لون شريط تمرير البوت */
  --bot-msg-border: #00bfff; /* بُوردر رسالة البوت */
  --bot-msg-bg: rgba(13,27,42,0.8);  /* خلفية رسالة البوت */
  --bot-msg-text: #00bfff;    /* لون نص رسالة البوت */
  --bot-msg-arrow-bg: #00bfff;  /* خلفية سهم رسالة البوت */
  --user-msg-bg: #00bfff;      /* خلفية رسالة المستخدم */
  --user-msg-border: #00bfff;  /* بُوردر رسالة المستخدم */
  --user-msg-text: #0d1b2a;   /* لون نص رسالة المستخدم */
  --user-msg-arrow-bg: #00bfff; /* خلفية سهم رسالة المستخدم */
  --input-text-color: rgba(255,255,255,0.1);/* لون نص حقل الإدخال */
  --input-placeholder-color: #7aaedc; /* لون placeholder */
  --input-icon-color: #00bfff;     ;/* لون أيقونات حقل الإدخال */
  --bot-btn-bg: linear-gradient(135deg, rgba(0,191,255,0.85), rgba(72,239,255,0.9));
  --bot-btn-hover-bg: linear-gradient(135deg, rgba(0,191,255,1), rgba(0,255,234,1));
  --bot-btn-before-bg: linear-gradient(120deg, rgba(0,191,255,0.5), rgba(0,255,234,0.4)); /* خلفية أزرار البوت */
  --bot-btn-hover-bg: #00bfff;   
  --bot-btn-color: #0d1b2a;   /* لون نص أزرار البوت */
  --bot-btn-border: #00bfff;   /* بُوردر أزرار البوت */
  --bot-btn-before-bg: rgba(255,255,255,0.6); /* قبل (::before) لأزرار البوت */
  --aboutme-text-color: rgba(0, 191, 255, 1);  /* لون نص "من أنا" */
  --quickcontact-input-border:  rgba(0, 191, 255, 1); /* بُوردر حقل التواصل السريع */
  --quickcontact-label-color:rgba(0, 191, 255, 1) ; /* لون تسمية التواصل السريع */
  --quickcontact-focus-border: rgba(0, 191, 255, 1);/* بُوردر عند الفوكس */
  --quickcontact-focus-text: rgba(0, 191, 255, 1); /* لون نص عند الفوكس */
  --quickcontact-btn-border:rgba(0, 191, 255, 1) ; /* بُوردر زر التواصل */
  --quickcontact-btn-text: rgba(0, 191, 255, 1); /* لون نص زر التواصل */
  --quickcontact-btn-hover-bg:rgba(0, 191, 255, 1) ; /* خلفية hover زر التواصل */
  --quickcontact-btn-hover-text: black ; /* لون نص hover زر التواصل */
  --quickcontact-success-border:  rgba(0, 191, 255, 1) ; /* بُوردر رسالة التأكيد */
  --quickcontact-success-text: rgba(0, 191, 255, 1);/* لون نص رسالة التأكيد */
  --caard-color: transparent ; /* لون نص رسالة التأكيد */
}
html.theme-day {
  --welcome-color: white  ;
  --section-bg: rgba(0,0,0,0) ; /* خلفية القسم */ 
  --h1-color: white;  /* لون H1 */
  --nav-bg: rgba(0,0,0,0); /* خلفية النافبار */
  --nav-btn-color:  white; /* لون زر النافبار */
  --nav-btn-bg:  transparent ;  /* خلفية زر النافبار */
  --nav-icon-color: white ;  /* لون أيقونة النافبار */
  --nav-active-color:  white ; /* لون زر نشط في النافبار */
  --offer-border:transparent ;  /* بُوردر العروض */
  --offer-text-color:white ;  /* لون نص العروض */
  --offer-bg: rgba(0,77,64,0.2);  /* خلفية العروض */
  --offer-title-color: white; /* لون عنوان العرض */
  --offer-title-shadow: ; /* ظل نص عنوان العرض */
  --offer-discount-color: white; /* لون الخصم */
  --offer-discount-ground: rgba(0,121,107,0.7) ; /* بُوردر الخصم */
  --offer-discount-shadow: ; /* ظل نص الخصم */
  --timeblock-bg:rgba(0,121,107,0.7) ; /* خلفية بلوك الوقت */
  --time-number-color:white ; /* لون أرقام الوقت */
  --time-number-shadow: ;  /* ظل أرقام الوقت */
  --time-label-color:white ; /* لون تسمية الوقت */
  --time-colon-color: white; /* لون النقطتين */
  --time-colon-shadow: ; /* ظل النقطتين */
  --bot-border:transparent; /* بُوردر البوت */
  --bot-bg:  #00796B ;/* خلفية البوت */
  --bot-name-color: white; /* لون اسم البوت */
  --bot-scroll-thumb: #00796B ; /* لون شريط تمرير البوت */
  --bot-msg-border: #00796B;/* بُوردر رسالة البوت */
  --bot-msg-bg: #00796B; /* خلفية رسالة البوت */
  --bot-msg-text: white;/* لون نص رسالة البوت */
  --bot-msg-arrow-bg:#00796B ; /* خلفية سهم رسالة البوت */
  --user-msg-bg:  #26A69A; /* خلفية رسالة المستخدم */
  --user-msg-border: #26A69A;/* بُوردر رسالة المستخدم */
  --user-msg-text: white; /* لون نص رسالة المستخدم */
  --user-msg-arrow-bg: #26A69A; /* خلفية سهم رسالة المستخدم */
  --input-text-color: ;/* لون نص حقل الإدخال */
  --input-placeholder-color:white ;/* لون placeholder */
  --input-icon-color: white;/* لون أيقونات حقل الإدخال */
  --bot-btn-bg:#00796B ;/* خلفية أزرار البوت */
  --bot-btn-border:#26A69A  ; /* بُوردر أزرار البوت */
  --bot-btn-hover-bg:#26A69A  ; /* خلفية hover لأزرار البوت */
  --bot-btn-before-bg: #26A69A ;/* قبل (::before) لأزرار البوت */
  --aboutme-text-color:white ;  /* لون نص "من أنا" */
  --quickcontact-input-border:white  ; /* بُوردر حقل التواصل السريع */
  --quickcontact-label-color:white  ; /* لون تسمية التواصل السريع */
  --quickcontact-focus-border: white;/* بُوردر عند الفوكس */
  --quickcontact-focus-text:white  ; /* لون نص عند الفوكس */
  --quickcontact-btn-border: white ; /* بُوردر زر التواصل */
  --quickcontact-btn-text: white ; /* لون نص زر التواصل */
  --quickcontact-btn-hover-bg: ; /* خلفية hover زر التواصل */
  --quickcontact-btn-hover-text:white  ; /* لون نص hover زر التواصل */
  --quickcontact-success-border: white ; /* بُوردر رسالة التأكيد */
  --quickcontact-success-text:white  ;/* لون نص رسالة التأكيد */
  --caard-color: rgba(0,0,0,0.6); /* لون نص رسالة التأكيد */
}
html.theme-wild {
  --welcome-color: #ffd700 ;
  --section-bg: transparent;  /* خلفية القسم */ 
  --h1-color: #ffd700 ;  /* لون H1 */
  --nav-bg: rgba(0,0,0,0); /* خلفية النافبار */
  --nav-btn-color: #ffd700 ; /* لون زر النافبار */
  --nav-btn-bg:transparent;  /* خلفية زر النافبار */
  --nav-icon-color:#ffd700  ;  /* لون أيقونة النافبار */
  --nav-active-color: #ffd700; /* لون زر نشط في النافبار */
  --offer-border:transparent ;  /* بُوردر العروض */
  --offer-text-color:#ffd700 ;  /* لون نص العروض */
  --offer-bg:rgba(51,0,102,0.2) ;  /* خلفية العروض */
  --offer-title-color:#ffd700 ; /* لون عنوان العرض */
  --offer-title-shadow: ; /* ظل نص عنوان العرض */
  --offer-title-underline: ; /* بُوردر تحت عنوان العرض */
  --offer-discount-color: #ffd700; /* لون الخصم */
  --offer-discount-ground:  rgba(51,0,102,0.5) ; /* بُوردر الخصم */
  --offer-discount-shadow: ; /* ظل نص الخصم */
  --timeblock-bg: rgba(51,0,102,0.5); /* خلفية بلوك الوقت */
  --time-number-color:#ffd700 ; /* لون أرقام الوقت */
  --time-number-shadow: ;  /* ظل أرقام الوقت */
  --time-label-color:#ffd700 ; /* لون تسمية الوقت */
  --time-colon-color: #ffd700; /* لون النقطتين */
  --time-colon-shadow: ; /* ظل النقطتين */
  --bot-border: transparent ; /* بُوردر البوت */
  --bot-bg: #B8860B ;/* خلفية البوت */
  --bot-name-color: ; /* لون اسم البوت */
  --bot-scroll-thumb:#B8860B ; /* لون شريط تمرير البوت */
  --bot-msg-border:#B8860B ;/* بُوردر رسالة البوت */
  --bot-msg-bg:#B8860B  ; /* خلفية رسالة البوت */
  --bot-msg-text: #FFF8E1;/* لون نص رسالة البوت */
  --bot-msg-arrow-bg:#B8860B  ; /* خلفية سهم رسالة البوت */
  --user-msg-bg: #4B0082 ; /* خلفية رسالة المستخدم */
  --user-msg-border: #4B0082;/* بُوردر رسالة المستخدم */
  --user-msg-text:#fff8e1 ; /* لون نص رسالة المستخدم */
  --user-msg-arrow-bg: #4B0082 ; /* خلفية سهم رسالة المستخدم */
  --input-text-color: ;/* لون نص حقل الإدخال */
  --input-placeholder-color:#4B0082;/* لون placeholder */
  --input-icon-color: #4B0082;/* لون أيقونات حقل الإدخال */
  --bot-btn-bg:  linear-gradient(135deg, #B8860B 0%, #8B6508 100%);/* خلفية أزرار البوت */
  --bot-btn-border: linear-gradient(135deg, #B8860B 0%, #8B6508 100%) ; /* بُوردر أزرار البوت */
  --bot-btn-hover-bg:  linear-gradient(135deg, #B8860B 0%, #8B6508 100%); /* خلفية hover لأزرار البوت */
  --bot-btn-before-bg:  linear-gradient(135deg, #B8860B 0%, #8B6508 100%) ;/* قبل (::before) لأزرار البوت */
  --aboutme-text-color: #ffd700 ;  /* لون نص "من أنا" */
  --quickcontact-input-border:#ffd700 ; /* بُوردر حقل التواصل السريع */
  --quickcontact-label-color:#ffd700 ; /* لون تسمية التواصل السريع */
  --quickcontact-focus-border:#ffd700 ;/* بُوردر عند الفوكس */
  --quickcontact-focus-text:#ffd700 ; /* لون نص عند الفوكس */
  --quickcontact-btn-border:#ffd700 ; /* بُوردر زر التواصل */
  --quickcontact-btn-text: #ffd700; /* لون نص زر التواصل */
  --quickcontact-btn-hover-bg: #ffd700; /* خلفية hover زر التواصل */
  --quickcontact-btn-hover-text:#ffd700 ; /* لون نص hover زر التواصل */
  --quickcontact-success-border: #ffd700; /* بُوردر رسالة التأكيد */
  --quickcontact-success-text:#ffd700 ;/* لون نص رسالة التأكيد */
  --caard-color: rgba(0,0,0,0.6) ; /* لون نص رسالة التأكيد */
}
html.theme-wine {
  --welcome-color: #c0b49e;
  --section-bg: transparent ;  /* خلفية القسم */ 
  --h1-color: #c0b49e ;  /* لون H1 */
  --nav-bg: transparent ; /* خلفية النافبار */
  --nav-btn-color: #c0b49e ; /* لون زر النافبار */
  --nav-btn-bg:transparent;  /* خلفية زر النافبار */
  --nav-icon-color: #c0b49e;  /* لون أيقونة النافبار */
  --nav-active-color: #c0b49e; /* لون زر نشط في النافبار */
  --offer-border: transparent;      /* ظل بيج ناعم */
  --offer-text-color: #C0B49E;                   /* لون نص بيج */
  --offer-bg: rgba(192, 180, 158, 0.1);          /* خلفية خفيفة بيج */
  --offer-title-color: #C0B49E;                  /* العنوان بلون بيج واضح */
  --offer-title-shadow: 1px 1px 4px #00000055;   /* ظل خفيف داكن */
  --offer-discount-color: #c0b49e;               /* خصم بلون ذهبي يجذب الانتباه */
  --offer-discount-ground: #4A0033 ; /* بُوردر الخصم */
  --offer-discount-shadow: 0 0 6px #c0b49e88;    /* ظل ذهبي ناعم */
  --timeblock-bg: #4A0033;                       /* نفس لون خلفية الموقع */
  --time-number-color: #C0B49E;                  /* أرقام بيج */
  --time-number-shadow: 0 0 4px #C0B49E55;       /* ظل ناعم بيج للأرقام */
  --time-label-color: #C0B49E;                   /* نفس لون الأرقام */
  --time-colon-color: #c0b49e;                   /* النقطتين بلون ذهبي */
  --time-colon-shadow: 0 0 4px #c0b49e66;        /* ظل ذهبي ناعم للنقطتين */
  --bot-border:transparent;  /* بُوردر البوت */
  --bot-bg: #c0b49e ; /* خلفية البوت */
  --bot-name-color: #4a0033; /* لون اسم البوت */
  --bot-scroll-thumb:#c0b49e ; /* لون شريط تمرير البوت */
  --bot-msg-border:#c0b49e ;/* بُوردر رسالة البوت */
  --bot-msg-bg:#c0b49e ; /* خلفية رسالة البوت */
  --bot-msg-text: #4a0033;/* لون نص رسالة البوت */
  --bot-msg-arrow-bg: #c0b49e; /* خلفية سهم رسالة البوت */
  --user-msg-bg: #4a0033; /* خلفية رسالة المستخدم */
  --user-msg-border: #4a0033;/* بُوردر رسالة المستخدم */
  --user-msg-text:#c0b49e ; /* لون نص رسالة المستخدم */
  --user-msg-arrow-bg:#4a0033 ; /* خلفية سهم رسالة المستخدم */
  --input-text-color: ;/* لون نص حقل الإدخال */
  --input-placeholder-color: #4a0033;/* لون placeholder */
  --input-icon-color:#4a0033 ;/* لون أيقونات حقل الإدخال */
  --bot-btn-bg: rgba(255, 255, 255, 0.1);/* خلفية أزرار البوت */
  --bot-btn-border: #c0b49e ; /* بُوردر أزرار البوت */
  --bot-btn-hover-bg:#c0b49e ; /* خلفية hover لأزرار البوت */
  --bot-btn-before-bg: rgba(255, 255, 255, 0.7);/* قبل (::before) لأزرار البوت */
  --aboutme-text-color:#c0b49e ;  /* لون نص "من أنا" */
  --quickcontact-input-border:#c0b49e ; /* بُوردر حقل التواصل السريع */
  --quickcontact-label-color: #c0b49e; /* لون تسمية التواصل السريع */
  --quickcontact-focus-border:#c0b49e ;/* بُوردر عند الفوكس */
  --quickcontact-focus-text: #c0b49e; /* لون نص عند الفوكس */
  --quickcontact-btn-border:#c0b49e ; /* بُوردر زر التواصل */
  --quickcontact-btn-text: #c0b49e; /* لون نص زر التواصل */
  --quickcontact-btn-hover-bg:#c0b49e ; /* خلفية hover زر التواصل */
  --quickcontact-btn-hover-text:#4a0033 ; /* لون نص hover زر التواصل */
  --quickcontact-success-border: #c0b49e; /* بُوردر رسالة التأكيد */
  --quickcontact-success-text:#c0b49e ;/* لون نص رسالة التأكيد */
  --caard-color: rgba(0,0,0,0.6); /* لون نص رسالة التأكيد */
}
html.theme-coffee {
  --welcome-color:#fff3cc;
  --section-bg: transparent;  /* خلفية القسم */ 
  --h1-color: #fff3cc;  /* لون H1 */
  --nav-bg: rgba(0,0,0,0); /* خلفية النافبار */
  --nav-btn-color:#fff3cc ; /* لون زر النافبار */
  --nav-btn-bg: transparent;  /* خلفية زر النافبار */
  --nav-icon-color:#fff3cc ;  /* لون أيقونة النافبار */
  --nav-active-color: #fff3cc; /* لون زر نشط في النافبار */
  --offer-border:transparent ;  /* بُوردر العروض */
  --offer-text-color:#fff3cc ;  /* لون نص العروض */
  --offer-bg: rgba(0,0,0,0.1) ; /* خلفية العروض */
  --offer-title-color:#fff3cc ; /* لون عنوان العرض */
  --offer-title-shadow: #fff3cc; /* ظل نص عنوان العرض */
  --offer-title-underline: #fff3cc; /* بُوردر تحت عنوان العرض */
  --offer-discount-color: #fff3cc; /* لون الخصم */
  --offer-discount-ground : #fff3cc11; /* بُوردر الخصم */
  --offer-discount-shadow:#fff3cc ; /* ظل نص الخصم */
  --timeblock-bg:#fff3cc11 ; /* خلفية بلوك الوقت */
  --time-number-color:#fff3cc ; /* لون أرقام الوقت */
  --time-number-shadow: #fff3cc;  /* ظل أرقام الوقت */
  --time-label-color:#fff3cc ; /* لون تسمية الوقت */
  --time-colon-color:#fff3cc ; /* لون النقطتين */
  --time-colon-shadow:#fff3cc ; /* ظل النقطتين */
  --bot-border:#6E5849 ; /* بُوردر البوت */
  --bot-bg: #6E5849;/* خلفية البوت */
  --bot-name-color:  #fff3cc; /* لون اسم البوت */
  --bot-scroll-thumb: #6E5849; /* لون شريط تمرير البوت */
  --bot-msg-border: #6E5849;/* بُوردر رسالة البوت */
  --bot-msg-bg: #6E5849; /* خلفية رسالة البوت */
  --bot-msg-text:#fff3cc ;/* لون نص رسالة البوت */
  --bot-msg-arrow-bg: #6E5849; /* خلفية سهم رسالة البوت */
  --user-msg-bg:#fff3cc; /* خلفية رسالة المستخدم */
  --user-msg-border: #fff3cc ;/* بُوردر رسالة المستخدم */
  --user-msg-text:black ; /* لون نص رسالة المستخدم */
  --user-msg-arrow-bg: #fff3cc; /* خلفية سهم رسالة المستخدم */
  --input-text-color: #6E5849;/* لون نص حقل الإدخال */
  --input-placeholder-color: #fff3cc;/* لون placeholder */
  --input-icon-color:#fff3cc ;/* لون أيقونات حقل الإدخال */
  --bot-btn-bg:#4b382a20 ;/* خلفية أزرار البوت */
  --bot-btn-border: #4b382a20; /* بُوردر أزرار البوت */
  --bot-btn-hover-bg: #4b382a80; /* خلفية hover لأزرار البوت */
  --bot-btn-before-bg: #4b382a20;/* قبل (::before) لأزرار البوت */
  --aboutme-text-color: #fff3cc;  /* لون نص "من أنا" */
  --quickcontact-input-border: #fff3cc; /* بُوردر حقل التواصل السريع */
  --quickcontact-label-color: #fff3cc; /* لون تسمية التواصل السريع */
  --quickcontact-focus-border:#fff3cc ;/* بُوردر عند الفوكس */
  --quickcontact-focus-text:#fff3cc ; /* لون نص عند الفوكس */
  --quickcontact-btn-border:#fff3cc ; /* بُوردر زر التواصل */
  --quickcontact-btn-text:#fff3cc ; /* لون نص زر التواصل */
  --quickcontact-btn-hover-bg: #fff3cc88; /* خلفية hover زر التواصل */
  --quickcontact-btn-hover-text: black; /* لون نص hover زر التواصل */
  --quickcontact-success-border: #fff3cc; /* بُوردر رسالة التأكيد */
  --quickcontact-success-text:#fff3cc ;/* لون نص رسالة التأكيد */
  --caard-color: rgba(0,0,0,0.2); /* لون نص رسالة التأكيد */
}





/* ------------- Apple Theme (الثيم الجديد) ------------- */

html.theme-apple {
 --welcome-color: #c0b49e;
  --section-bg: transparent ; 
  --h1-color: #c0b49e ; 
  --nav-bg: transparent ; 
  --nav-btn-color: #c0b49e ; 
  --nav-btn-bg:transparent; 
  --nav-icon-color: #c0b49e; 
  --nav-active-color: #c0b49e; 
  --offer-border: transparent; 
  --offer-text-color: #C0B49E; 
  --offer-bg: rgba(192, 180, 158, 0.1); 
  --offer-title-color: #C0B49E; 
  --offer-title-shadow: 1px 1px 4px #00000055; 
  --offer-discount-color: #315426; 
  --offer-discount-ground:  #c0b49e  ; 
  --offer-discount-shadow: 0 0 6px #c0b49e88; 
  --timeblock-bg:  #c0b49e ; 
  --time-number-color: #315426; 
  --time-number-shadow: 0 0 4px #315426; 
  --time-label-color: #315426; 
  --time-colon-color: #315426; 
  --time-colon-shadow: 0 0 4px #315426; 
  --bot-border:transparent; 
  --bot-bg: #c0b49e ; 
  --bot-name-color: #315426; 
  --bot-scroll-thumb:#c0b49e ; 
  --bot-msg-border:#c0b49e ;
  --bot-msg-bg:#c0b49e ; 
  --bot-msg-text: #315426;
  --bot-msg-arrow-bg: #c0b49e; 
  --user-msg-bg: #315426; 
  --user-msg-border: #315426;
  --user-msg-text:#c0b49e ; 
  --user-msg-arrow-bg:#315426 ; 
  --input-text-color: ;
  --input-placeholder-color: #315426;
  --input-icon-color:#315426 ;
  --bot-btn-bg: rgba(255, 255, 255, 0.1);
  --bot-btn-border: #c0b49e ; 
  --bot-btn-hover-bg:#c0b49e ; 
  --bot-btn-before-bg: rgba(255, 255, 255, 0.7);
  --aboutme-text-color:#c0b49e ; 
  --quickcontact-input-border:#c0b49e ; 
  --quickcontact-label-color: #c0b49e; 
  --quickcontact-focus-border:#c0b49e ;
  --quickcontact-focus-text: #c0b49e; 
  --quickcontact-btn-border:#c0b49e ; 
  --quickcontact-btn-text: #c0b49e; 
  --quickcontact-btn-hover-bg:#c0b49e ; 
  --quickcontact-btn-hover-text:#315426 ; 
  --quickcontact-success-border: #c0b49e; 
  --quickcontact-success-text:#c0b49e ;
  --caard-color: rgba(0,0,0,0.6); 

  --cart-bg: #315426;
  --cart-text: #c0b49e;
  --cart-border: #c0b49e;
  --cart-btn-bg: #c0b49e;
  --cart-btn-text: #315426;
  --cart-btn-hover: #d7cdb2;
  --cart-remove:  #c0b49e;
  --cart-item-bg: transparent ;
  --cart-item-border: #c0b49e ;

  --search-dropdown-bg: #c0b49e;
  --search-dropdown-text: #315426;
  --search-dropdown-border: #315426;
}

/* ------------- Starry Night Theme (الثيم الجديد) ------------- */


html.theme-starry-night {
 --welcome-color:   #ff9e64;
  --section-bg: rgba(0,0,0,0) ; 
  --h1-color:  #ff9e64; 
  --nav-bg: rgba(26, 38, 57, 0.9);
  --nav-btn-color:  #ff9e64;
  --nav-btn-bg:  transparent;
  --nav-icon-color: #ff9e64;
  --nav-active-color:  #ff9e6420;
  --offer-border:transparent ; 
  --offer-text-color: #ff9e64;
  --offer-bg: rgba(26, 38, 57, 0.6);
  --offer-title-color:  #ff9e64;
  --offer-title-shadow: 0 0 10px  rgba(255, 158, 100, 0.5);
  --offer-discount-color: #ff9e64;
  --offer-discount-ground: rgba(65, 90, 119, 0.7);
  --offer-discount-shadow: 0 0 8px rgba(255, 158, 100, 0.6);
  --timeblock-bg: rgba(65, 90, 119, 0.8);
  --time-number-color: #ff9e64;
  --time-number-shadow: 0 0 6px rgba(255, 158, 100, 0.7);
  --time-label-color:  #ff9e64;
  --time-colon-color: #ff9e64;
  --time-colon-shadow: 0 0 5px rgba(255, 158, 100, 0.7);

  --bot-border:transparent;
  --bot-bg:  rgba(65, 90, 119, 0.7);
  --bot-name-color:   #ff9e64;
  --bot-scroll-thumb:  rgba(65, 90, 119, 0.7);
  --bot-msg-border:  rgba(65, 90, 119, 0.7);
  --bot-msg-bg:  rgba(65, 90, 119, 0.7);
  --bot-msg-text: #ff9e64;
  --bot-msg-arrow-bg: rgba(65, 90, 119, 0.7);
  --user-msg-bg:  rgba(65, 90, 119, 0.9);
  --user-msg-border: rgba(65, 90, 119, 0.9);
  --user-msg-text:  #ff9e64;
  --user-msg-arrow-bg: rgba(65, 90, 119, 0.9);
  --input-text-color: ;
  --input-placeholder-color:  #ff9e64;
  --input-icon-color:   #ff9e64;
  --bot-btn-bg: rgba(65, 90, 119, 0.7);
  --bot-btn-border: rgba(65, 90, 119, 0.7);
  --bot-btn-hover-bg: rgba(65, 90, 119, 0.1);
  --bot-btn-before-bg:  rgba(65, 90, 119, 0.7);

  --aboutme-text-color:#ff9e64;
  --quickcontact-input-border:  #ff9e64;
  --quickcontact-label-color:  #ff9e64;
  --quickcontact-focus-border:   #ff9e64;
  --quickcontact-focus-text:  #ff9e64;
  --quickcontact-btn-border:   #ff9e64;
  --quickcontact-btn-text:   #ff9e64;
  --quickcontact-btn-hover-bg: ;
  --quickcontact-btn-hover-text:  #ff9e64;
  --quickcontact-success-border:   #ff9e64;
  --quickcontact-success-text:  #ff9e64;
  --caard-color: rgba(0,0,0,0.6);

  --cart-bg:    rgba(65, 90, 119, 0.9);
  --cart-text:   #ff9e64;
  --cart-border: #ff9e64 ;
  --cart-btn-bg:    #ff9e64;
  --cart-btn-text:   rgba(65, 90, 119, 0.7);
  --cart-btn-hover: #ff9e6488;
  --cart-remove:    #ff9e64;
  --cart-item-bg: transparent ;
  --cart-item-border:   #ff9e64 ;

  --search-dropdown-bg: rgba(65, 90, 119, 0.8);
  --search-dropdown-text: #ff9e64;
  --search-dropdown-border: #ff9e64;
}