/* Smartphoneshop 2.0 - account/login/system UI polish
   Scope is deliberately narrow: DanDomain login modal, Mine oplysninger,
   and generic non-cart success notifications. */

:root {
  --ss-account-ink:#11181c;
  --ss-account-muted:#62747a;
  --ss-account-border:#d9e4e6;
  --ss-account-soft:#f6f9f9;
  --ss-account-teal:#00adb5;
  --ss-account-teal-dark:#008f96;
}

/* =========================================================
   Login modal
========================================================= */
#modal1 .w-login {
  width:min(560px, calc(100vw - 32px)) !important;
  max-width:560px !important;
  margin:0 auto !important;
  border:1px solid var(--ss-account-border) !important;
  border-radius:16px !important;
  background:#fff !important;
  box-shadow:0 24px 70px rgba(17,24,28,.22) !important;
  overflow:hidden;
}

#modal1 .w-login > .panel-heading,
#modal1 .w-login .panel-heading {
  padding:20px 22px 14px !important;
  border:0 !important;
  border-bottom:1px solid #edf1f2 !important;
  background:#fff !important;
  color:var(--ss-account-ink) !important;
  font-size:20px !important;
  font-weight:800 !important;
  line-height:1.2 !important;
}

#modal1 .w-login .panel-body {
  padding:20px 22px 8px !important;
  background:#fff !important;
}

#modal1 .w-login .panel-footer {
  display:flex;
  gap:10px;
  padding:14px 22px 20px !important;
  border:0 !important;
  border-top:1px solid #edf1f2 !important;
  background:#fff !important;
}

#modal1 .w-login .form-group { margin:0 0 14px !important; }
#modal1 .w-login .form-group > label,
#modal1 .w-login legend {
  display:block;
  margin:0 0 7px !important;
  color:var(--ss-account-ink) !important;
  font-size:12px !important;
  font-weight:800 !important;
}

#modal1 .w-login .input-group {
  display:flex !important;
  width:100% !important;
  min-height:46px;
}

#modal1 .w-login .form-input,
#modal1 .w-login .input-group-main {
  height:46px !important;
  min-height:46px !important;
  padding:0 13px !important;
  border:1px solid #cddadd !important;
  border-radius:9px !important;
  background:#fff !important;
  color:var(--ss-account-ink) !important;
  box-shadow:none !important;
  font-size:14px !important;
}

#modal1 .w-login .input-group-addon {
  display:flex !important;
  width:44px !important;
  min-width:44px !important;
  align-items:center !important;
  justify-content:center !important;
  border:1px solid #cddadd !important;
  border-right:0 !important;
  border-radius:9px 0 0 9px !important;
  background:#f5f8f8 !important;
  color:#66787d !important;
}

#modal1 .w-login .input-group-addon + .input-group-main {
  border-radius:0 9px 9px 0 !important;
}

#modal1 .w-login input:focus {
  border-color:var(--ss-account-teal) !important;
  box-shadow:0 0 0 3px rgba(0,173,181,.12) !important;
  outline:0 !important;
}

#modal1 .w-login a {
  color:var(--ss-account-teal-dark) !important;
  text-decoration:none !important;
}
#modal1 .w-login a:hover { text-decoration:underline !important; }

#modal1 .w-login .button-primary {
  min-height:42px !important;
  padding:0 18px !important;
  border:1px solid var(--ss-account-teal) !important;
  border-radius:9px !important;
  background:var(--ss-account-teal) !important;
  color:#fff !important;
  font-weight:800 !important;
  box-shadow:0 6px 16px rgba(0,173,181,.16) !important;
}

#modal1 .w-login .button:not(.button-primary) {
  min-height:42px !important;
  padding:0 15px !important;
  border:1px solid var(--ss-account-border) !important;
  border-radius:9px !important;
  background:#f7f9f9 !important;
  color:#5d7075 !important;
  box-shadow:none !important;
}

/* Remember-me row */
#modal1 .w-login input[type="checkbox"] { margin:0 !important; }
#modal1 .w-login .form-group:has(input[type="checkbox"]) {
  display:flex;
  align-items:center;
  min-height:40px;
  padding:8px 10px;
  border:1px solid #e2e9ea;
  border-radius:8px;
  background:#fafcfc;
}

/* =========================================================
   Mine oplysninger
   ss-account-page is added client-side only on the account details page.
========================================================= */
body.ss-account-page .site-main-content {
  max-width:1180px;
  margin-inline:auto;
}

body.ss-account-page .page-title,
body.ss-account-page h1 {
  margin-bottom:18px !important;
  color:var(--ss-account-ink) !important;
  font-weight:800 !important;
  letter-spacing:-.02em;
}

body.ss-account-page .ss-account-profile-card,
body.ss-account-page .ss-account-delete-card {
  border:1px solid var(--ss-account-border) !important;
  border-radius:14px !important;
  background:#fff !important;
  box-shadow:0 8px 28px rgba(17,24,28,.045) !important;
}

body.ss-account-page .ss-account-profile-card {
  padding:22px !important;
  margin-bottom:18px !important;
}

body.ss-account-page .ss-account-delete-card {
  padding:20px 22px !important;
  margin-top:18px !important;
}

body.ss-account-page .ss-account-profile-card h2,
body.ss-account-page .ss-account-profile-card h3,
body.ss-account-page .ss-account-delete-card h2,
body.ss-account-page .ss-account-delete-card h3 {
  margin:0 0 14px !important;
  color:var(--ss-account-ink) !important;
  font-size:18px !important;
  font-weight:800 !important;
}

body.ss-account-page .form-group { margin-bottom:12px !important; }
body.ss-account-page .form-group > label,
body.ss-account-page fieldset > label,
body.ss-account-page legend {
  margin-bottom:6px !important;
  color:#33464c !important;
  font-size:12px !important;
  font-weight:750 !important;
}

body.ss-account-page .form-input,
body.ss-account-page .input-group-main,
body.ss-account-page select,
body.ss-account-page textarea {
  min-height:44px !important;
  padding:0 12px !important;
  border:1px solid #cfdbde !important;
  border-radius:8px !important;
  background:#fff !important;
  color:var(--ss-account-ink) !important;
  box-shadow:none !important;
}

body.ss-account-page textarea { padding-top:10px !important; }
body.ss-account-page .form-input:focus,
body.ss-account-page .input-group-main:focus,
body.ss-account-page select:focus,
body.ss-account-page textarea:focus {
  border-color:var(--ss-account-teal) !important;
  box-shadow:0 0 0 3px rgba(0,173,181,.11) !important;
  outline:0 !important;
}

body.ss-account-page .button-group {
  display:grid !important;
  grid-template-columns:repeat(3,minmax(0,1fr));
  width:100%;
  overflow:hidden;
  border:1px solid #d5e0e2 !important;
  border-radius:9px !important;
  background:#f5f8f8 !important;
}
body.ss-account-page .button-group > * { min-width:0; }
body.ss-account-page .button-group .button,
body.ss-account-page .button-group .button-primary {
  width:100% !important;
  min-height:42px !important;
  border:0 !important;
  border-radius:7px !important;
  box-shadow:none !important;
  text-align:center;
  text-transform:none !important;
}
body.ss-account-page .button-group .button-primary {
  background:var(--ss-account-teal) !important;
  color:#fff !important;
}

body.ss-account-page .button-primary {
  border-radius:8px !important;
  background:var(--ss-account-teal) !important;
  border-color:var(--ss-account-teal) !important;
  color:#fff !important;
  font-weight:800 !important;
}
body.ss-account-page .button:not(.button-primary) {
  border:1px solid #d7e1e3 !important;
  border-radius:8px !important;
  background:#f7f9f9 !important;
  color:#5f7176 !important;
  box-shadow:none !important;
}

body.ss-account-page .ss-account-delete-card {
  background:#fffafa !important;
  border-color:#eadede !important;
}
body.ss-account-page .ss-account-delete-card .button {
  color:#7e4c4c !important;
  border-color:#dfcaca !important;
  background:#fff !important;
}

/* =========================================================
   System success notification (login etc.)
========================================================= */
.w-notification.ss-system-notification {
  margin:0 0 18px !important;
}
.w-notification.ss-system-notification .panel {
  margin:0 !important;
  border:1px solid #cde7df !important;
  border-radius:10px !important;
  background:#f1faf7 !important;
  box-shadow:none !important;
}
.w-notification.ss-system-notification .panel-body {
  padding:10px 14px !important;
  color:#37675a !important;
  font-size:12px !important;
  font-weight:650 !important;
  line-height:1.35 !important;
  text-align:center !important;
}
.w-notification.ss-system-notification .panel-danger {
  border-color:#efd4d8 !important;
  background:#fff6f7 !important;
}
.w-notification.ss-system-notification .panel-danger .panel-body { color:#8a4650 !important; }

@media (max-width:700px) {
  #modal1 .w-login { width:calc(100vw - 20px) !important; border-radius:13px !important; }
  #modal1 .w-login .panel-body { padding:16px 16px 6px !important; }
  #modal1 .w-login .panel-footer { padding:12px 16px 16px !important; }
  body.ss-account-page .ss-account-profile-card,
  body.ss-account-page .ss-account-delete-card { padding:16px !important; }
}