:root{ --text:#222; --subtle:#777; --danger:#e24a1a; }
*{ box-sizing:border-box; }
body{ margin:0; font-family: Arial, sans-serif; background:#f6f6f6; color:var(--text); }

/* =============================
   Header (match search-results)
   ============================= */



.header{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  position:relative;
  height:90px;
  border-bottom:2px solid #eee;
  margin-bottom:8px;
}

/* Centered home icon */
.header .home-logo{
  position:absolute;
  left:50%;
  transform:translateX(-50%);
}

/* Make home logo clickable + match icon look */
#Home_Logo,
.home-logo,
#Home_Logo img{ cursor:pointer !important; }
.home-logo img{
  width:60px;
  height:60px;
  filter: brightness(0) saturate(100%) invert(9%) sepia(7%) saturate(745%)
          hue-rotate(182deg) brightness(95%) contrast(88%);
  transition: filter .3s ease;
}

.top-icons{ display:flex; gap:18px; align-items:center; }
.header .top-icons{
  position:absolute;
  right:38px;
  top:25px;
  display:flex;
  gap:28px;
}
.icon-btn{ text-decoration:none; color:inherit; display:grid; place-items:center; }
.header .top-icons img,
.home-logo img{
  filter: brightness(0) invert(20%) sepia(40%) saturate(2500%) hue-rotate(170deg) brightness(60%) contrast(80%) !important;
}

/* Auth buttons */
.button{
  border:1px solid #00aaff;
  padding:5px 10px;
  border-radius:5px;
  background-color:#fff;
  color:#00aaff;
  cursor:pointer;
}

.menu-wrapper{ margin-left:10px; flex-wrap:nowrap !important; }

.header .menu-wrapper{
  position:absolute;
  top:25px;
}
.header .menu-wrapper.anmelden{ right:150px; }
.header .menu-wrapper.registrieren{ right:40px; }

/* Settings dropdown */
.settings-dropdown{
  position:absolute;
  right:0;
  top:48px;
  background:#ffffff;
  border:1px solid #ccc;
  border-radius:8px;
  padding:6px 0;
  box-shadow:0 6px 18px rgba(0,0,0,0.15);
  z-index:9999;
  width:150px;
}
.settings-item{
  width:100%;
  padding:10px 14px;
  background:transparent;
  border:none;
  text-align:left;
  font-size:15px;
  cursor:pointer;
}


@media (max-width: 600px){
  .header .top-icons{ gap:13px !important; right:8px !important; }
}

/* =============================
   Auth modals (match search-results)
   ============================= */

.auth-modal-overlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.45);
  display:none;
  align-items:center;
  justify-content:center;
  z-index:9999;
}

.auth-modal{
  background:#ffffff;
  border-radius:16px;
  padding:22px 22px 20px;
  max-width:420px;
  width:90%;
  box-shadow:0 14px 32px rgba(0,0,0,0.25);
  position:relative;
  text-align:center;
}

.auth-modal h2{ margin:4px 0 8px; font-size:22px; }
.auth-modal-subtitle{ margin:0 0 16px; font-size:14px; color:#444; }

.auth-modal-close{
  position:absolute;
  top:8px;
  right:10px;
  border:none;
  background:transparent;
  font-size:22px;
  cursor:pointer;
  line-height:1;
}

.auth-modal-options{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-bottom:14px;
}

.auth-option{
  padding:10px 14px;
  border-radius:10px;
  border:1px solid #ccc;
  background:#f7f7f7;
  cursor:pointer;
  font-size:15px;
  font-weight:600;
  text-align:center;
  transition: background .2s, transform .1s, box-shadow .2s;
}

.auth-option:hover{
  background:#ececec;
  box-shadow:0 2px 8px rgba(0,0,0,0.12);
  transform: translateY(-1px);
}

.auth-modal-note{ font-size:12px; color:#666; margin:0; }

.auth-email-form{ display:none; text-align:left; margin-top:10px; }
.auth-email-form label{ display:block; margin:6px 0 2px; font-size:.9rem; }
.auth-email-form input{
  width:100%;
  padding:8px 10px;
  font-size:.95rem;
  border-radius:6px;
  border:1px solid #bbb;
}

.auth-email-actions{ margin-top:12px; display:flex; justify-content:space-between; gap:10px; }
.auth-email-actions button{ flex:1; padding:8px 10px; border-radius:8px; border:none; cursor:pointer; font-weight:600; }
.auth-email-submit{ background:#0e7bff; color:#fff; }
.auth-email-back{ background:#e4e4e4; color:#222; }

body.dark{ background:#181a1b !important; color:#eee !important; }
body.dark .auth-modal{ background:#111317; color:#f0f0f0; box-shadow:0 14px 32px rgba(0,0,0,0.55); }
body.dark .auth-option{ background:#23262b; border-color:#3a3d44; color:#f0f0f0; }
body.dark .auth-option:hover{ background:#2b2f36; }
body.dark .auth-modal-subtitle,
body.dark .auth-modal-note{ color:#cccccc; }
body.dark .auth-email-form input{ background:#1c1f24; border-color:#3a3d44; color:#f0f0f0; }

/* =============================
   Profile page content
   ============================= */

.container{ max-width:900px; margin:30px auto 80px; padding:0 20px; }
.card{
  margin:0 auto 22px;
  max-width:850px;
  padding:28px;

  /* Glassmorphism style */
  background: rgba(255,255,255,0.80);
  border: 1px solid rgba(255,255,255,0.45);
  border-radius:20px;
  box-shadow:0 6px 18px rgba(0,0,0,0.12);

  backdrop-filter: blur(8px) saturate(120%);
  -webkit-backdrop-filter: blur(8px) saturate(120%);

  position:relative;
  overflow:hidden;
}
.edit-profile-link{
  position:absolute;
  top:22px;
  right:24px;
  z-index:2;
  padding:0;
  border:0;
  background:transparent;
  color:#3f51d9;
  font-family:Georgia, "Times New Roman", serif;
  font-size:25px;
  font-weight:700;
  text-decoration:underline;
  cursor:pointer;
}
.profile-edit-field,
.profile-edit-grid input,
.profile-edit-grid select{
  width:100%;
  border:1px solid #aaa;
  border-radius:8px;
  padding:9px 11px;
  font:inherit;
  background:#fff;
}
.profile-name-input{max-width:360px; margin:0 0 8px; font-size:28px; font-weight:700;}
.profile-edit-grid{display:grid; grid-template-columns:repeat(3,minmax(110px,1fr)); gap:12px; margin-top:14px;}
.profile-edit-grid[hidden]{display:none;}
.profile-edit-grid label{display:grid; gap:5px; color:#555; font-size:14px; font-weight:700;}
.profile-bio-input{width:100%; resize:vertical; font-family:Arial,sans-serif;}
.profile-edit-actions{display:flex; justify-content:flex-end; gap:10px; margin-top:12px;}
.profile-edit-actions[hidden]{display:none;}
.profile-edit-actions button{border:0; border-radius:8px; padding:9px 18px; font-weight:700; cursor:pointer;}
.save-profile-btn{background:#3f51d9; color:#fff;}
.cancel-profile-btn{background:#e7e7e7; color:#222;}

.wrap{ max-width:1100px; margin:0 auto; padding:0; }
.top-row{ display:flex; align-items:flex-start; gap:22px; }
.avatar{
  width:120px;
  height:120px;
  border:3px solid #222;
  border-radius:16px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:700;
  font-size:42px;
  letter-spacing:2px;
  text-transform:uppercase;
  color:#222;
  background:#fff;
}

.info h1{ margin:0 0 6px; font-size:36px; font-weight:800; font-family:"Trebuchet MS", Arial, sans-serif; }
.ratings{ font-size:14px; line-height:1.6; color:#444; }
.ratings .label{ color:#666; }
.stars{ color:#ffc700; }
.meta{ margin-top:8px; font-size:28px; display:flex; align-items:center; gap:6px; }
.meta .pin{ display:inline-block; width:28px; text-align:center; }

.bio-area{ margin-top:46px; }
.bio-area h2{ font-size:28px; margin:0 0 12px; font-weight:800; }
.bio-box{
  background:#fff;
  border:3px solid #cfcfcf;
  border-radius:32px;
  min-height:160px;
  padding:18px 22px;
  font-size:18px;
  color:#444;
  box-shadow:0 2px 10px #0000000e;
}
.report{ text-align:right; margin-top:10px; }
.report a{ color:var(--danger); font-weight:800; text-decoration:underline; }

.comments{ margin-top:40px; }
.comments h3{ color:#666; font-size:22px; font-weight:800; letter-spacing:.3px; }
.comments-between{ max-width:850px; margin:16px auto 22px; padding:0 20px; }
.comments-between .comments{ margin-top:0; }

/* Gender icon tooltip */
.gender-ico{
  background:none;
  border:none;
  cursor:pointer;
  font-size:28px;
  line-height:1;
  width:28px;
  text-align:center;
  position:relative;
  margin-right:6px;
}
.gender-ico::after{
  content: attr(data-label);
  position:absolute;
  left:50%;
  transform: translateX(-50%) translateY(-6px);
  bottom:100%;
  background:#222;
  color:#fff;
  font-size:12px;
  padding:2px 6px;
  border-radius:6px;
  white-space:nowrap;
  opacity:0;
  pointer-events:none;
  transition: opacity .15s, transform .15s;
}
.gender-ico:hover::after,
.gender-ico.show::after{
  opacity:1;
  transform: translateX(-50%) translateY(-12px);
}

@media (max-width:760px){
  .top-row{ flex-direction:column; align-items:flex-start; }
  .meta{ font-size:22px; }
  .avatar{ width:100px; height:100px; }
  .edit-profile-link{top:18px; right:18px; font-size:20px;}
  .profile-edit-grid{grid-template-columns:1fr;}
}


/* === Match search-results back font exactly === */
@font-face {
  font-family: "Britannic Bold";
  src: url("../fonts/BRITANIC.TTF") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ===== User icons and hover menu: identical to index ===== */
.header .top-icons{
  display:flex;
  align-items:center;
  gap:25px !important;
}

.header .top-icons .icon-btn{
  width:43px !important;
  height:43px !important;
  display:inline-flex !important;
  align-items:center;
  justify-content:center;
  text-decoration:none;
}

.header .top-icons .icon-btn img,
.header .top-icons .icon-btn svg{
  width:44px !important;
  height:44px !important;
  object-fit:contain;
  filter:brightness(0) invert(20%) sepia(40%) saturate(2500%) hue-rotate(170deg) brightness(60%) contrast(80%);
}

.settings-menu{
  position:relative;
  display:inline-flex;
}

.settings-dropdown{
  position:absolute;
  top:calc(100% + 8px);
  right:0;
  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:hover .settings-dropdown,
.settings-menu:focus-within .settings-dropdown{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:translateY(0);
  transition-delay:0s;
}

.settings-item{
  width:100%;
  padding:10px 14px;
  border:0;
  background:transparent;
  color:#1a1a1a;
  text-align:left;
  font-size:15px;
  cursor:pointer;
}

.settings-item:hover,
.settings-item:focus-visible{
  background:#f5f5f5;
  outline:none;
}

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

body.dark .settings-dropdown{
  background:#232629;
  border-color:#444;
}

body.dark .settings-item{color:#f0f0f0}
body.dark .settings-item:hover,
body.dark .settings-item:focus-visible{background:#33373b}

@media (max-width:900px){
  .header .top-icons{gap:12px !important}
  .header .top-icons .icon-btn,
  .header .top-icons .icon-btn img,
  .header .top-icons .icon-btn svg{width:40px !important;height:40px !important}
}


/* === Match header icons EXACTLY like search-results === */

/* مساحة الأيقونة */
.header .top-icons .icon-btn{
  width: 41px !important;
  height: 41px !important;
  display: grid;
  place-items: center;
}

/* حجم صورة الأيقونة */
.header .top-icons .icon-btn img{
  width: 45px !important;
  height: 45px !important;
  display: block;
}

/* نفس التباعد */
.header .top-icons{
  gap: 28px;
}

/* Dark mode (مطابق للبحث) */
body.dark .header .top-icons img{
  filter: brightness(0) saturate(100%) invert(98%) sepia(1%)
          saturate(18%) hue-rotate(211deg)
          brightness(106%) contrast(94%) !important;
}


/* إخفاء أيقونة Home في عرض الجوال */
@media (max-width: 768px) {
  .home-logo {
    display: none !important;
  }
}
@media (max-width: 480px) {
  .home-logo {
    display: none !important;
  }
}


.card::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:0;
  height:56px;
  background: linear-gradient(to bottom,
    rgba(255,255,255,0.85),
    rgba(255,255,255,0)
  );
  pointer-events:none;
}


/* === نفس تنسيق أيقونات search-results للهيدر === */

/* وضع الديسكتوب / الافتراضي */
.header .top-icons {
  position: absolute;
  right: 38px;
  top: 25px;
  display: flex;
  gap: 38px !important;
}

/* الروابط داخل الأيقونات */
.header .top-icons a.icon-btn {
  text-decoration: none;
  color: inherit;
  display: grid;
  place-items: center;
}

/* الحجم الأساسي للأيقونة (زر) – سيتم تصغيره على الشاشات الصغيرة */
.header .top-icons .icon-btn {
  width: 60px;
  height: 60px;
}

/* أيقونات SVG (لو استخدمتها مستقبلاً) */
.header .top-icons .icon-btn svg {
  width: 48px;
  height: 48px;
  color: #222;
}
body.dark .top-icons .icon-btn svg {
  color: #eee;
}

/* الصور داخل الأيقونات */
.header .top-icons img {
  width: 41px;
  height: 41px;
  display: block;
  color: currentColor;
}

/* فلتر الأيقونات في الوضع الداكن */
body.dark .header .top-icons img {
  filter: brightness(0) saturate(100%) invert(98%) sepia(1%) saturate(18%)
          hue-rotate(211deg) brightness(106%) contrast(94%);
}

/* === Tablet (<= 900px) – نفس شكل search-results === */
@media (max-width: 900px) {
  .header .top-icons {
    gap: 10px !important;   /* تقليل التباعد */
    right: 12px !important; /* تقريب من يمين الشاشة */
  }

  .header .top-icons .icon-btn {
    width: 42px !important;
    height: 42px !important;
  }

  .header .top-icons .icon-btn img,
  .header .top-icons .icon-btn svg {
    width: 28px !important;
    height: 28px !important;
  }
}

/* === Mobile (<= 600px) – نفس شكل search-results الحالي بالضبط === */
@media (max-width: 600px) {

  /* خفض مجموعة الأيقونات قليلاً وتضييق التباعد */
  .header .top-icons {
    margin-top: -3px !important;   /* نزول بسيط */
    gap: 13px !important;          /* التباعد النهائي المستخدم حاليًا */
    right: 8px !important;
  }

  /* تكبير الأيقونة نفسها على الجوال */
  .header .top-icons .icon-btn {
    width: 50px !important;
    height: 50px !important;
  }

  .header .top-icons .icon-btn img {
    width: 40px !important;
    height: 40px !important;
  }

  /* نفس سلوك search-results: إخفاء شعار الهوم في الجوال */
  .home-logo {
    display: none !important;
  }
}

/* Final index parity override (kept last to beat legacy profile rules). */
.header .top-icons{gap:25px !important}
.header .top-icons .icon-btn{width:43px !important;height:43px !important;display:inline-flex !important;align-items:center;justify-content:center}
.header .top-icons .icon-btn img,
.header .top-icons .icon-btn svg{width:44px !important;height:44px !important;object-fit:contain}

@media (max-width:900px){
  .header .top-icons{gap:12px !important}
  .header .top-icons .icon-btn,
  .header .top-icons .icon-btn img,
  .header .top-icons .icon-btn svg{width:40px !important;height:40px !important}
}


/* نفس خط كلمة zurück */
@font-face {
  font-family: "Britannic Bold";
  src: url("../fonts/BRITANIC.TTF") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* زر zurück – حجم ثابت مطابق تقريباً لـ search-results */
.back-button {
  position: absolute;
  left: 18px;
  top: 18px;
  z-index: 222;

  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;

  background: none;
  border: none;
  padding: 6px 10px !important;
  cursor: pointer;

  color: #222;
  font-weight: bold;
  font-size: 22.4px !important;   /* = تقريباً 1.4em على 16px */
  line-height: 1.1 !important;
}

/* نص zurück */
.back-button b {
  font-family: "Britannic Bold", Arial, sans-serif;
  font-style: italic;
  font-weight: 800;
  color: #1B4150;
}

/* أيقونة السهم */
.back-icon {
  width: 40px !important;
  height: 40px !important;
}

/* هوفر نفس search-results */
.back-button:hover {
  transform: scale(1.03);
}

/* وضع داكن */
body.dark .back-button,
body.dark .back-button b {
  color: #f5f5f5 !important;
}

/* فلتر الأيقونة في الوضع الداكن */
body.dark .back-button img,
body.dark .back-icon {
  filter: brightness(0) saturate(100%) invert(98%) sepia(1%)
          saturate(18%) hue-rotate(211deg) brightness(106%) contrast(94%) !important;
}

/* موبايل: نفس ترتيب/سلوك search-results */
@media (max-width: 600px) {
  .back-button {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 2px;
    line-height: 1.1;
    font-size: 22.4px !important; /* نجبره نفس الحجم حتى لو body أصغر */
  }

  .back-button b {
    display: block;
    margin: 0;
    padding: 0;
  }
}

/* Final index parity override (must stay at the end). */
.header .top-icons{gap:25px !important}
.header .top-icons .icon-btn{width:43px !important;height:43px !important;display:inline-flex !important;align-items:center;justify-content:center}
.header .top-icons .icon-btn img,
.header .top-icons .icon-btn svg{width:44px !important;height:44px !important;object-fit:contain}

@media (max-width:900px){
  .header .top-icons{gap:12px !important}
  .header .top-icons .icon-btn,
  .header .top-icons .icon-btn img,
  .header .top-icons .icon-btn svg{width:40px !important;height:40px !important}
}