/* =======================================================================
   DOGINARY — DELAD INLOGGNINGSRUTA (modal + kontoknapp)
   File: doginary-auth-ui.css
   -----------------------------------------------------------------------
   Fristående stilmall: rör inte sidans egna klasser, och funkar likadant
   på index.html, logga.html och insikter.html oavsett vilka CSS-variabler
   respektive sida redan har (fallbacks nedan matchar den varma
   rust/teal/papper-paletten som logga.html/insikter.html använder).
   ======================================================================= */

#doginaryAuthModal{
  position:fixed; inset:0; z-index:500; display:flex; align-items:center;
  justify-content:center; padding:20px;
  background:rgba(43,36,28,.55); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
  opacity:0; pointer-events:none; transition:opacity .2s ease;
}
#doginaryAuthModal.show{ opacity:1; pointer-events:auto; }

#doginaryAuthCard{
  position:relative; width:min(380px,100%); max-height:88vh; overflow-y:auto;
  background:var(--surface,#F8F5EC); border:1px solid var(--hair,#DCD3BF);
  border-radius:var(--radius-lg,22px); padding:30px 24px 26px;
  box-shadow:0 24px 60px rgba(0,0,0,.28);
  transform:translateY(10px) scale(.98); transition:transform .2s ease;
  font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
  color:var(--ink,#2B241C);
}
#doginaryAuthModal.show #doginaryAuthCard{ transform:translateY(0) scale(1); }

#doginaryAuthClose{
  position:absolute; top:14px; right:14px; width:28px; height:28px; padding:0;
  border-radius:50%; display:inline-flex; align-items:center; justify-content:center;
  font-size:19px; line-height:1; color:var(--ink-soft,#6E6455);
  background:transparent; border:none; cursor:pointer;
}
#doginaryAuthClose:hover{ background:rgba(0,0,0,.06); color:var(--ink,#2B241C); }

.doginaryAuthEyebrow{
  margin:0 0 2px; font-size:12.5px; letter-spacing:.04em; color:var(--ink-soft,#6E6455);
}
#doginaryAuthTitle{
  font-family:'Fraunces',Georgia,serif; font-weight:500; font-size:22px;
  margin:0 0 6px; color:var(--ink,#2B241C);
}
#doginaryAuthDesc{ font-size:14px; line-height:1.5; color:var(--ink-soft,#6E6455); margin:0 0 18px; }

#doginaryAuthForm{ display:flex; flex-direction:column; gap:6px; }
#doginaryAuthForm label{
  font-size:12px; letter-spacing:.04em; text-transform:uppercase;
  color:var(--ink-soft,#6E6455); margin-top:10px;
}
#doginaryAuthForm input{
  box-sizing:border-box; width:100%; font-family:inherit; font-size:15px;
  color:var(--ink,#2B241C); background:var(--surface-2,#F1ECDF);
  border:1px solid var(--hair,#DCD3BF); border-radius:10px; padding:11px 12px;
  outline:none; transition:border-color .15s ease;
}
#doginaryAuthForm input:focus{ border-color:var(--teal,#33505A); }

#doginaryAuthMessage{ min-height:16px; font-size:12.5px; margin:10px 0 0; line-height:1.4; }
#doginaryAuthMessage.error{ color:var(--warn,#9C3B2C); }
#doginaryAuthMessage.success{ color:var(--reward,#4B6B3E); }

#doginaryAuthSubmit{
  margin-top:16px; width:100%; font-family:inherit; font-size:15px; font-weight:500;
  color:var(--surface,#F8F5EC); background:var(--ink,#2B241C); border:none;
  border-radius:30px; padding:12px; cursor:pointer; transition:background .15s ease;
}
#doginaryAuthSubmit:hover{ background:#3A322A; }
#doginaryAuthSubmit:disabled{ opacity:.6; cursor:default; }

.doginaryAuthSwitch{ margin:10px 0 0; text-align:center; }
.doginaryAuthSwitch button{
  font-family:inherit; font-size:13px; color:var(--teal,#33505A);
  background:none; border:none; padding:0; cursor:pointer;
  text-decoration:underline; text-underline-offset:3px;
}
.doginaryAuthSwitch button:hover{ color:var(--ink,#2B241C); }
.doginaryAuthSwitch button:disabled{ opacity:.6; cursor:default; }

/* ---------- Kontoikon + meny (t.ex. i en crossnav eller header) ---------- */
#doginaryAuthRoot{ display:inline-flex; align-items:center; position:relative; }

#doginaryAccountIconBtn,
#doginaryLoginChipBtn{
  width:36px; height:36px; padding:0; flex-shrink:0;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:50%; border:1px solid var(--hair,#DCD3BF);
  background:var(--surface-2,#F1ECDF); color:var(--ink-soft,#6E6455);
  cursor:pointer; transition:background .15s ease, color .15s ease, border-color .15s ease;
}
#doginaryAccountIconBtn svg,
#doginaryLoginChipBtn svg{ width:18px; height:18px; }
#doginaryAccountIconBtn:hover,
#doginaryLoginChipBtn:hover{
  background:var(--teal,#33505A); border-color:var(--teal,#33505A); color:var(--surface,#F8F5EC);
}
#doginaryAccountIconBtn[aria-expanded="true"]{
  background:var(--teal,#33505A); border-color:var(--teal,#33505A); color:var(--surface,#F8F5EC);
}

#doginaryAccountMenu{
  position:absolute; top:calc(100% + 10px); right:0; z-index:520;
  width:min(272px,86vw);
  background:var(--surface,#F8F5EC); border:1px solid var(--hair,#DCD3BF);
  border-radius:var(--radius-sm,12px); box-shadow:0 18px 40px rgba(0,0,0,.22);
  padding:14px 14px 12px;
  font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
  color:var(--ink,#2B241C);
  opacity:0; transform:translateY(6px); pointer-events:none;
  transition:opacity .15s ease, transform .15s ease;
}
#doginaryAccountMenu.show{ opacity:1; transform:translateY(0); pointer-events:auto; }

#doginaryAccountMenuEmail{
  margin:0; font-size:12.5px; color:var(--ink-soft,#6E6455);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

.doginaryAccountMenu__divider{
  height:1px; background:var(--hair,#DCD3BF); margin:10px 0;
}

.doginaryAccountMenu__label{
  display:block; font-size:11.5px; letter-spacing:.03em; text-transform:uppercase;
  color:var(--ink-soft,#6E6455); margin-bottom:6px; margin-top:10px;
}
.doginaryAccountMenu__label:first-of-type{ margin-top:0; }

#doginaryAccountMenu input[type="text"],
#doginaryAccountMenu select{
  width:100%; box-sizing:border-box; font-family:inherit; font-size:14px;
  color:var(--ink,#2B241C); background:var(--surface-2,#F1ECDF);
  border:1px solid var(--hair,#DCD3BF); border-radius:8px; padding:8px 10px;
  outline:none; transition:border-color .15s ease;
}
#doginaryAccountMenu input[type="text"]:focus,
#doginaryAccountMenu select:focus{ border-color:var(--teal,#33505A); }

#doginaryAccountDogSave{
  margin-top:12px; width:100%; font-family:inherit; font-size:13px; font-weight:500;
  color:var(--surface,#F8F5EC); background:var(--ink,#2B241C); border:none;
  border-radius:8px; padding:9px 14px; cursor:pointer;
}
#doginaryAccountDogSave:hover{ background:#3A322A; }
#doginaryAccountDogSave:disabled{ opacity:.6; cursor:default; }

#doginaryAccountDogStatus{
  min-height:14px; font-size:12px; margin:6px 0 0; line-height:1.4;
  color:var(--reward,#4B6B3E);
}
#doginaryAccountDogStatus.error{ color:var(--warn,#9C3B2C); }

.doginaryAccountMenu__logout{
  display:block; width:100%; text-align:left; font-family:inherit; font-size:13.5px;
  color:var(--ink-soft,#6E6455); background:none; border:none; padding:2px 0; cursor:pointer;
}
.doginaryAccountMenu__logout:hover{ color:var(--warn,#9C3B2C); }

/* ---------- "Logga in för att fortsätta"-kort (logga.html / insikter.html) ---------- */
.doginary-loggedout-card{
  background:var(--surface,#F8F5EC); border:1px solid var(--hair,#DCD3BF);
  border-radius:var(--radius-lg,22px); padding:30px 24px; margin-top:12px;
  text-align:center;
}
.doginary-loggedout-card h2{
  font-family:'Fraunces',Georgia,serif; font-weight:500; font-size:21px;
  margin:0 0 8px; color:var(--ink,#2B241C);
}
.doginary-loggedout-card p{
  font-size:14.5px; color:var(--ink-soft,#6E6455); margin:0 0 18px; line-height:1.5;
}
.doginary-loggedout-card button{
  font-family:inherit; font-size:15px; font-weight:500;
  color:var(--surface,#F8F5EC); background:var(--ink,#2B241C); border:none;
  border-radius:30px; padding:12px 26px; cursor:pointer;
}
.doginary-loggedout-card button:hover{ background:#3A322A; }

@media (max-width:480px){
  #doginaryAccountMenu{ width:min(272px,88vw); }
}