/* t39u: shared UI – account create card, switches, info tooltips, thumbnails, notifications */

/* ---- Account welcome: horizontal "Artikel anlegen" card ---- */
.dash-welcome { grid-template-columns: minmax(0, 1fr) minmax(0, auto); gap: 16px 28px; padding: 22px 26px; }
.dash-create { display: flex; align-items: center; gap: 18px; padding: 14px 16px; max-width: 560px; }
.dash-create .dash-create-text { display: flex; align-items: flex-start; gap: 12px; min-width: 0; flex: 1 1 240px; }
.dash-create .dash-create-text > div { display: block; min-width: 0; }
.dash-create-ico { flex: 0 0 auto; display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: #c4a36a; color: #1c140c; font-size: .95rem; }
.dash-create .dash-kicker { margin: 0 0 2px; }
.dash-create strong { font-size: 1.18rem; line-height: 1.2; }
.dash-create .dash-create-text p:last-child { margin: 3px 0 0; font-size: .88rem; line-height: 1.4; color: var(--muted); }
body.udash .dash-create .dash-create-text p:last-child { color: var(--a-muted); }
.dash-create .dash-create-actions { display: flex; flex-direction: column; gap: 8px; flex: 0 0 auto; }
.dash-create .dash-create-actions .dash-btn { justify-content: center; gap: 8px; white-space: nowrap; }
@media (max-width: 1240px) {
  .dash-welcome { grid-template-columns: minmax(0, 1fr); }
  .dash-create { max-width: none; justify-content: space-between; flex-wrap: wrap; }
  .dash-create .dash-create-actions { flex-wrap: wrap; }
  .dash-create .dash-create-actions { flex-direction: row; }
}
@media (max-width: 640px) {
  .dash-welcome { padding: 18px; }
  .dash-create { flex-direction: column; align-items: stretch; gap: 12px; }
  .dash-create .dash-create-text { flex: 0 0 auto; }
  .dash-create .dash-create-actions { flex-direction: column; }
}

/* ---- Switch (newsletter + account): fixed geometry, independent of generic input rules ---- */
input.nl-switch[type="checkbox"] { -webkit-appearance: none; appearance: none; box-sizing: border-box; flex: 0 0 44px; width: 44px; min-width: 44px; height: 26px; padding: 0; margin: 1px 0 0; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--muted, #6b6257) 70%, transparent); background: color-mix(in srgb, var(--muted, #6b6257) 30%, transparent); position: relative; cursor: pointer; transition: background-color .18s ease, border-color .18s ease; }
input.nl-switch[type="checkbox"]::after { content: ""; position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .35); transition: transform .18s ease; }
input.nl-switch[type="checkbox"]:checked { background: var(--brand, #0e6b52); border-color: var(--brand, #0e6b52); }
input.nl-switch[type="checkbox"]:checked::after { transform: translateX(18px); }
input.nl-switch[type="checkbox"]:focus-visible { outline: 3px solid var(--brand-2, #e2b15a); outline-offset: 2px; }
.nl-footer input.nl-switch[type="checkbox"] { background: rgba(247, 243, 234, .16); border-color: rgba(247, 243, 234, .55); }
.nl-footer input.nl-switch[type="checkbox"]:checked { background: #e2b15a; border-color: #e2b15a; }
.nl-footer input.nl-switch[type="checkbox"]:checked::after { background: #1c1915; }
@media (prefers-reduced-motion: reduce) { input.nl-switch[type="checkbox"], input.nl-switch[type="checkbox"]::after { transition: none; } }
.nl-consent-row { display: flex; align-items: flex-start; gap: 6px; }
.nl-consent-row .nl-consent { flex: 1 1 auto; min-width: 0; }
.nl-consent > span { padding-top: 2px; }

/* ---- Info tooltip (focusable button + role=tooltip, hover/focus/tap) ---- */
.ui-tip { position: relative; display: inline-flex; flex: 0 0 auto; }
.ui-tip-btn { display: inline-grid; place-items: center; width: 32px; height: 32px; margin: -3px 0 0; padding: 0; border: 0; border-radius: 50%; background: transparent; color: inherit; font-size: 1.08rem; cursor: help; }
.ui-tip-btn:hover, .ui-tip.is-open .ui-tip-btn { opacity: 1; background: color-mix(in srgb, currentColor 14%, transparent); }
.ui-tip-btn:focus-visible { outline: 3px solid var(--brand-2, #e2b15a); outline-offset: 1px; }
.nl-footer .ui-tip-btn { color: #f3c977; }
.ui-tip-bubble { position: absolute; z-index: 60; right: -6px; bottom: calc(100% + 8px); width: max-content; max-width: min(280px, 78vw); padding: 9px 12px; border-radius: 10px; background: #1c1915; color: #fbf8f2; font-size: .82rem; line-height: 1.4; font-weight: 500; text-align: left; border: 1px solid rgba(255, 255, 255, .16); box-shadow: 0 10px 28px rgba(0, 0, 0, .28); visibility: hidden; opacity: 0; transform: translateY(4px); transition: opacity .15s ease, transform .15s ease, visibility 0s linear .15s; pointer-events: none; }
.ui-tip-bubble::after { content: ""; position: absolute; right: 16px; top: 100%; border: 6px solid transparent; border-top-color: #1c1915; }
.ui-tip:hover .ui-tip-bubble, .ui-tip-btn:focus-visible + .ui-tip-bubble, .ui-tip.is-open .ui-tip-bubble { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; }
.ui-tip.is-closed .ui-tip-bubble { visibility: hidden; opacity: 0; }
html[data-theme="dark"] .ui-tip-bubble { background: #f7f3ea; color: #1c1915; }
html[data-theme="dark"] .ui-tip-bubble::after { border-top-color: #f7f3ea; }