/* Add custom CSS styles below */ 
/* =========================================================
   QADES / ATA'A THEME - Clean CSS Pack (Salla)
   - Lightweight overrides (no bootstrap)
   - Focus: colors, buttons, cards, forms, donation options
   ========================================================= */

/* 1) Brand tokens (غيّرها حسب الهوية) */
:root{
  --q-primary: #76933a;
  --q-primary-hover: #a0ba67;
  --q-link: #208fee;
  --q-label: #0769a7;

  --q-bg-soft: #f2f2f2;
  --q-border: rgba(0,0,0,.08);
  --q-shadow: 0 8px 18px rgba(135,167,69,.18);

  --q-radius-sm: 10px;
  --q-radius-md: 14px;
  --q-radius-lg: 18px;
}

/* 2) Links */
a{
  color: var(--q-link);
  text-decoration: none;
}
a:hover{
  opacity: .92;
  text-decoration: underline;
}

/* 3) Headings / small labels (خفيفة وما تكسر الثيم) */
label,
.form-label,
.s-form-label{
  color: var(--q-label);
}

/* 4) Inputs */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="password"],
input[type="search"],
select,
textarea,
.s-form-control,
.form-control{
  border-radius: var(--q-radius-md);
  border-color: var(--q-border) !important;
}
input:focus,
select:focus,
textarea:focus,
.s-form-control:focus,
.form-control:focus{
  outline: none;
  box-shadow: 0 0 0 4px rgba(118,147,58,.15) !important;
  border-color: rgba(118,147,58,.55) !important;
}

/* 5) Primary buttons (يغطي أغلب ثيمات سلة + عطاء) */
button,
.btn,
.s-button{
  border-radius: var(--q-radius-md) !important;
}

/* زر أساسي */
.btn-primary,
.s-button-primary,
.s-button--primary,
button[type="submit"]{
  background: var(--q-primary) !important;
  border-color: var(--q-primary) !important;
  color: #fff !important;
}
.btn-primary:hover,
.s-button-primary:hover,
.s-button--primary:hover,
button[type="submit"]:hover{
  background: var(--q-primary-hover) !important;
  border-color: var(--q-primary-hover) !important;
}

/* زر إطار/ثانوي */
.btn-outline-primary,
.s-button-outline,
.s-button--outline{
  color: var(--q-primary) !important;
  border-color: var(--q-primary) !important;
  background: transparent !important;
}
.btn-outline-primary:hover,
.s-button-outline:hover,
.s-button--outline:hover{
  color: #fff !important;
  background: var(--q-primary) !important;
  border-color: var(--q-primary) !important;
}

/* 6) Cards / blocks (بدون تعميم مبالغ فيه) */
.card,
.s-card,
.product-card,
.donation-card,
.section,
.widget,
.panel{
  border-radius: var(--q-radius-lg);
  border-color: var(--q-border) !important;
}

.card,
.s-card,
.product-card,
.donation-card{
  box-shadow: var(--q-shadow);
}

/* خلفيات لطيفة لأقسام التبرع/المعلومات */
.bg-soft,
.soft-bg,
.section--soft,
.widget--soft{
  background: var(--q-bg-soft) !important;
  border-radius: var(--q-radius-lg);
}

/* 7) Donation amount options (خيارات مبالغ التبرع)
   - كثير من ثيمات سلة تعرضها كـ radio/checkbox داخل خيارات المنتج */
.product-options,
.s-product-options,
.donation-options{
  gap: 10px;
}

/* الشكل كـ "chips" */
.product-options label,
.s-product-options label,
.donation-options label{
  border: 1px solid var(--q-border);
  border-radius: var(--q-radius-md);
  padding: 10px 12px;
  background: #fff;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* عند الاختيار (نعتمد على حالة checked بجانب label متى ما كانت موجودة) */
.product-options input[type="radio"]:checked + label,
.product-options input[type="checkbox"]:checked + label,
.s-product-options input[type="radio"]:checked + label,
.s-product-options input[type="checkbox"]:checked + label,
.donation-options input[type="radio"]:checked + label,
.donation-options input[type="checkbox"]:checked + label{
  border-color: rgba(118,147,58,.55);
  background: rgba(118,147,58,.10);
  box-shadow: 0 0 0 4px rgba(118,147,58,.12);
}

/* 8) Progress bars (لو عندك شريط تقدم للحملات/الأهداف) */
progress,
.progress,
.s-progress{
  border-radius: 999px !important;
  overflow: hidden;
}
.progress-bar,
.s-progress-bar{
  background: var(--q-primary) !important;
}

/* 9) Badges / highlights */
.badge,
.s-badge{
  border-radius: 999px !important;
}
.badge-primary,
.s-badge--primary{
  background: rgba(118,147,58,.12) !important;
  color: var(--q-primary) !important;
  border: 1px solid rgba(118,147,58,.25) !important;
} 

/* 10) Small touches */
hr{ border-color: rgba(0,0,0,.06); }