/* global styles placeholder */
/* 🌙 وضع غامق مخصص لصفحة Gemeinsamer Online Kauf */

/* صندوق FINDEN في الوضع الغامق */
body.dark .finden-box {
  background: #CCCCCC;   /* رمادي فاتح */
  border: 1px solid #D6D6D6;
  color: #222;           /* لون نص غامق شوي عشان يبان فوق الرمادي الفاتح */
}

/* صندوق ANBIETEN في الوضع الغامق */
body.dark .anbieten-box {
  background: #999999;   /* رمادي أغمق */ 
  border: 1px solid #C2C2C2;
  color: #ffffff;        /* نخليه أبيض عشان يبان فوق الرمادي الغامق */
}
/* 🌙 خلفية سوداء للوضع الغامق */
body.dark{
  background:#000 !important;
  color:#fff;
}
/* ملاحظة مهمة:
   لا نضيف أي تنسيق هنا لـ .finden-btn أو .anbieten-btn
   عشان تظل ألوان الأزرار نفسها تبع الوضع الفاتح بدون أي تغيير */

/* 🌙 كارد صفحة "Gemeinsamen Online Kauf" في الوضع الغامق */
body.dark .card {
  background: #575757 !important;  /* داخل الإطار رمادي  */
  border-color: #6a6a6a !important;
  color: #ffffff;                      /* النص يكون فاتح شوي عشان يبان */
}

/* اختياري: تحسين شكل العناصر داخل الكارد في الوضع الغامق */
body.dark .card input[type="text"],
body.dark .card select {
  background: #ffffff;
  color: #000;
  border-color: #333;
}

body.dark .card .hint {
  color: #ffffff;
}


/* توحيد مكان الشريط الأصفر على الجوال و التابلت */
@media (max-width: 992px){

  /* الهيدر كله يصبح ترتيب عمودي */
  header{
    display:flex;
    flex-direction:column;
    align-items:flex-start;   /* لكي يبدأ من أقصى اليسار */
    justify-content:center;
    height:auto;
    padding-top:6px;
    padding-bottom:6px;
    position:relative;
  }

  /* الشريط الأصفر */
  .logo{
    margin:0;                 /* إلغاء أي إزاحة */
    margin-left:0 !important; /* ضروري — لصقه باليسار */
    width:100%;               /* يغطي عرض الشاشة */
    max-width:none;
    height:62px;              /* نفس الارتفاع بكل الصفحات */
    display:flex;
    align-items:center;
    justify-content:center;
    clip-path: polygon(0 0, 100% 0, 88% 100%, 0 100%);
  }

  /* حجم العنوان داخل الشريط */
  .logo h1{
    font-size:28px;
  }

  /* عنوان h2 دائمًا تحت الشريط وبالمنتصف */
  .header-title{
    position:static !important;
    transform:none !important;
    align-self:center;
    margin-top:8px;
    text-align:center;
  }

  .header-title h2{
    font-size:22px;
    white-space:normal;
    line-height:1.3;
  }
}
/* Unread messages badge, shared by every page header. */
#btnNachrichten { position: relative; }
.notification-badge {
  position: absolute;
  top: -6px;
  right: -7px;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border: 2px solid #fff;
  border-radius: 999px;
  background: #d71920;
  color: #fff;
  font: 700 11px/16px Arial, sans-serif;
  text-align: center;
  z-index: 10;
}
.notification-badge[hidden] { display: none !important; }