/* نفس خط صفحة online-order */
.settings-card,
.settings-wrap,
.settings-box,
.setting-text,
.settings-actions,
.settings-btn,
.toggle-label {
  font-family: Arial, sans-serif;
}

/* ===== Header account controls ===== */
#authButtons,
.top-icons{
  display:flex;
  align-items:center;
  gap:12px;
}

#authButtons[hidden],
.top-icons[hidden],
.auth-modal-overlay[hidden]{
  display:none !important;
}

.top-icons{position:absolute;right:20px;top:50%;transform:translateY(-50%);display:none;align-items:center;gap:25px}
.top-icons .icon-btn{width:43px;height:43px;display:inline-flex;align-items:center;justify-content:center;border-radius:10px}
.top-icons .icon-btn img{width:44px;height:44px;object-fit:contain;filter:brightness(0) invert(20%) sepia(40%) saturate(2500%) hue-rotate(170deg) brightness(60%) contrast(80%)}
.icon-btn:hover,.icon-btn:focus-visible{background:#edf8fc;outline:none}
.settings-menu{position:relative;display:inline-flex}
.settings-icon-button{padding:0;border:0;background:transparent;font:inherit;cursor:pointer}
.settings-dropdown{position:absolute;right:0;top:calc(100% + 8px);z-index:9999;width:150px;padding:6px 0;background:#fff;border:1px solid #ccc;border-radius:8px;box-shadow:0 6px 18px rgba(0,0,0,.15);opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-6px);transition:opacity 180ms ease,transform 180ms ease,visibility 0s linear 180ms}
.settings-dropdown::before{content:"";position:absolute;right:0;bottom:100%;width:100%;height:10px}
.settings-menu.is-open .settings-dropdown{opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0);transition-delay:0s}
.settings-item{display:block;width:100%;padding:10px 14px;border:0;background:transparent;color:#1a1a1a;text-align:left;text-decoration:none;font:15px Arial,sans-serif;cursor:pointer}
.settings-item:hover,.settings-item:focus-visible{background:#f5f5f5;outline:none}

body.dark .top-icons img{filter:brightness(0) saturate(100%) invert(98%) sepia(1%) saturate(18%) hue-rotate(211deg) brightness(106%) contrast(94%) !important}

@media (max-width:900px){
  .top-icons{right:12px;gap:10px}
  .top-icons .icon-btn,.top-icons .icon-btn img{width:36px;height:36px}
}

.auth-modal-overlay{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;padding:20px;background:rgba(0,0,0,.45)}
.auth-modal{position:relative;width:min(420px,100%);padding:24px;border-radius:16px;background:#fff;text-align:center;box-shadow:0 14px 32px rgba(0,0,0,.25)}
.auth-modal h2{margin:0 30px 8px;font:700 24px Arial,sans-serif}
.auth-modal p{margin:0 0 16px;color:#666}
.auth-modal-close{position:absolute;top:10px;right:12px;border:0;background:transparent;font-size:30px;line-height:1;cursor:pointer}
.auth-modal-options{display:grid;gap:10px}
.auth-option{padding:12px 14px;border:1px solid #00aaff;border-radius:8px;background:#fff;color:#087aa9;font-weight:700;cursor:pointer}
.auth-option:hover,.auth-option:focus-visible{background:#edf8fc;outline:2px solid rgba(0,170,255,.25)}

/* عنوان Einstellungen مثل header-title */
.settings-title{
  font-family: 'Arial Black', Arial, sans-serif;
  font-weight: bold;
  font-style: italic;
  letter-spacing: 0.5px;
}

/* أزرار Speichern و Abbrechen */
.settings-btn{
  font-family: 'Arial Black', Arial, sans-serif;
  font-weight: bold;
}

/* Ja / Nein داخل toggle */
.toggle-label{
  font-family: Arial, sans-serif;
  font-weight: bold;
}

/* settings.css — يعتمد على نفس card/container من view-profile.css */

.settings-card{
  padding: 34px 34px 30px;
}

.settings-wrap{
  max-width: 1100px;
  margin: 0 auto;
}

.settings-title{
  margin: 0 0 18px;
  font-size: 34px;
  font-weight: 900;
  font-style: bold;
  color: #111;
  font-family: "Trebuchet MS", Arial, sans-serif;
}

.settings-box{
  border: 3px solid #bdbdbd;
  border-radius: 14px;
  padding: 18px 18px 22px;
  background: rgba(255,255,255,0.55);
}

.setting-row{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 16px;
  padding: 18px 6px;
}

.setting-row + .setting-row{
  border-top: 1px solid rgba(0,0,0,0.08);
}

.setting-left{
  display:flex;
  align-items:flex-start;
  gap: 12px;
  flex: 1;
  min-width: 0;
}

.dot{
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background:#111;
  margin-top: 6px;
  flex: 0 0 auto;
}

.setting-text{
  margin: 0;
  font-size: 22px;
  font-weight: 500;
  line-height: 1.25;
  color: #111;
  word-break: break-word;
}

/* ===== Toggle (Ja/Nein) يتحرك جانبيًا ===== */
.toggle{
  position: relative;
  width: 132px;
  height: 46px;
  border: none;
  background: transparent;
  padding: 0;
  cursor: pointer;
  flex: 0 0 auto;
  outline: none;
}

.toggle-track{
  position:absolute;
  inset: 0;
  background: #d9d9d9;
  border-radius: 12px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6);
}

.toggle-thumb{
  position:absolute;
  top: 5px;
  left: 5px;
  width: 66px;
  height: 36px;
  border-radius: 10px;
  background: #bfbfbf;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight: 900;
  font-size: 20px;
  color: #fff;
  transition: transform .22s ease, background .22s ease;
  box-shadow: 0 5px 12px rgba(0,0,0,0.18);
  overflow:hidden;
}

/* نخلي النصين داخل السلايدر، ونُظهر المناسب حسب الحالة */
.toggle-label{
  position:absolute;
  inset: 0;
  display:grid;
  place-items:center;
  opacity: 0;
  transform: translateY(2px);
  transition: opacity .16s ease, transform .16s ease;
  letter-spacing: .2px;
}

.toggle .toggle-label--no{ opacity: 1; transform: translateY(0); }

/* ON state */
.toggle.is-on .toggle-thumb{
  transform: translateX(56px);
  background: #41da2a; /* أخضر مثل الصورة */
}

.toggle.is-on .toggle-label--no{ opacity: 0; transform: translateY(2px); }
.toggle.is-on .toggle-label--yes{ opacity: 1; transform: translateY(0); }

/* Hover / Focus */
.toggle:focus-visible .toggle-track{
  outline: 3px solid rgba(14,123,255,0.35);
  outline-offset: 2px;
}

/* ===== Buttons أسفل مثل التصميم ===== */
.settings-actions{
  display:flex;
  justify-content:center;
  gap: 48px;
  margin-top: 26px;
  padding-top: 14px;
}

.settings-btn{
  min-width: 240px;
  height: 74px;
  border-radius: 18px;
  border: none;
  font-size: 44px;
  font-weight: 900;
  cursor: pointer;
  box-shadow: 0 10px 18px rgba(0,0,0,0.14);
}



.settings-btn--cancel{
  background: #d8d8d8;
  color: rgba(255,255,255,0.75);
}

/* Responsive */
@media (max-width: 760px){
  .settings-title{ font-size: 36px; }
  .setting-text{ font-size: 18px; }
  .settings-actions{ gap: 16px; flex-direction: column; }
  .settings-btn{ width: 100%; min-width: 0; font-size: 34px; height: 64px; }
  .toggle{ width: 120px; }
  .toggle-thumb{ width: 60px; }
  .toggle.is-on .toggle-thumb{ transform: translateX(50px); }
}

/* Dark mode توافق مع global/view-profile */
body.dark .settings-box{
  background: rgba(20,22,26,0.55);
  border-color: rgba(255,255,255,0.25);
}
body.dark .settings-title,
body.dark .setting-text{ color:#f1f1f1; }
body.dark .dot{ background:#f1f1f1; }
body.dark .toggle-track{ background:#6a6a6a; }
body.dark .toggle-thumb{ background:#8a8a8a; }
body.dark .toggle.is-on .toggle-thumb{ background:#41da2a; }




/* زر Speichern — أبيض وخط أصغر */
.settings-btn--save{
  background: linear-gradient(
    180deg,
    #ffffff,
    #f3f3f3,
    #e6e6e6
  );

  color: #163BFF;        /* أزرق مثل التصميم */
  font-size: 28px;      /* أصغر من قبل */
  font-family: 'Arial Black', Arial, sans-serif;
  font-weight: bold;

  border: 3px solid #163BFF;

  box-shadow:
    0 10px 24px rgba(0,0,0,0.18),
    inset 0 1px 0 rgba(255,255,255,0.9),
    inset 0 -6px 12px rgba(0,0,0,0.08);
}

/* hover */
.settings-btn--save:hover{
  background: linear-gradient(
    180deg,
    #163BFF,
    #0f2ecc,
    #0a1f99
  );

  color: #ffffff;

  transform: translateY(-2px);

  box-shadow:
    0 16px 36px rgba(0,0,0,0.28);
}

/* زر Abbrechen — أصغر */
.settings-btn--cancel{
  background: linear-gradient(
    180deg,
    #e0e0e0,
    #d2d2d2,
    #c4c4c4
  );

  color: rgba(255,255,255,0.85);

  font-size: 28px;  /* نفس حجم Speichern */
  font-family: 'Arial Black', Arial, sans-serif;
  font-weight: bold;

  border: 3px solid #c8c8c8;

  box-shadow:
    0 10px 24px rgba(0,0,0,0.14),
    inset 0 1px 0 rgba(255,255,255,0.5),
    inset 0 -6px 12px rgba(0,0,0,0.06);
}

/* hover */
.settings-btn--cancel:hover{
  background: linear-gradient(
    180deg,
    #f0f0f0,
    #e4e4e4,
    #d6d6d6
  );

  color: #999;

  transform: translateY(-1px);
}