/* Saved addresses (public/assets/address-book.js): Choose an address, New and Edit address, Use once, and the
   bag's address card. The approved frames W01 to W08 (Figma "Saved addresses (6 Nov)"), drawn in the site's own
   tokens only, so the dark theme (company-theme.css, home-dark.css) carries every colour across. A centred
   dialog on a wide screen, a bottom sheet on a phone. Every control is at least 44 px. */

html.adr-open { overflow: hidden; }

/* ---------- the dialog ---------- */
.adr-dialog {
  box-sizing: border-box;
  width: min(560px, calc(100vw - 32px));
  max-width: none;
  max-height: min(860px, calc(100dvh - 48px));
  margin: auto;
  padding: 0;
  border: 0;
  border-radius: 28px;
  color: var(--ls-ink);
  background: var(--ls-canvas);
  box-shadow: 0 24px 60px -24px rgba(20, 20, 18, .45);
  overflow: hidden;
  overscroll-behavior: contain;
}
.adr-dialog::backdrop { background: rgba(20, 20, 18, .42); }
:root[data-theme="dark"] .adr-dialog { box-shadow: 0 0 0 1px var(--ls-line-2), 0 24px 60px -24px rgba(0, 0, 0, .7); }
:root[data-theme="dark"] .adr-dialog::backdrop { background: rgba(0, 0, 0, .6); }
.adr-sheet { box-sizing: border-box; max-height: inherit; padding: 28px; overflow-y: auto; overscroll-behavior: contain; }
.adr-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.adr-dialog--form .adr-sheet { padding-top: 0; }
.adr-dialog--form .adr-head { position: sticky; top: 0; z-index: 2; margin: 0 -28px 12px; padding: 28px 28px 8px; background: var(--ls-canvas); }
.adr-title { margin: 0; min-width: 0; font-size: clamp(24px, 2.2vw, 28px); font-weight: 800; line-height: 1.15; letter-spacing: -0.025em; }
.adr-title:focus { outline: none; }
.adr-close {
  display: grid;
  flex: none;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1.5px solid var(--ls-line-2);
  border-radius: 50%;
  color: var(--ls-ink);
  background: var(--ls-canvas);
  cursor: pointer;
}
.adr-close:hover { border-color: var(--ls-ink); }
.adr-close:focus-visible { outline: 2px solid var(--ls-accent-text); outline-offset: 2px; }
.adr-grip { display: none; }

@media (prefers-reduced-motion: no-preference) {
  .adr-dialog[open] { animation: adr-in 220ms var(--ls-ease); }
  .adr-dialog[open]::backdrop { animation: adr-fade 220ms var(--ls-ease); }
}
@keyframes adr-in { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes adr-fade { from { opacity: 0; } to { opacity: 1; } }

/* A phone: the same dialog as a bottom sheet */
@media (max-width: 640px) {
  .adr-dialog {
    width: 100%;
    max-height: calc(100dvh - 40px);
    margin: auto 0 0;
    border-radius: 28px 28px 0 0;
  }
  .adr-sheet { padding: 16px 16px calc(24px + env(safe-area-inset-bottom)); }
  .adr-dialog--form .adr-head { margin: 0 -16px 14px; padding: 26px 16px 8px; }
  .adr-grip { display: block; width: 72px; height: 28px; margin: -8px auto 4px; cursor: grab; touch-action: none; position: relative; }
  .adr-grip::before { content: ""; position: absolute; top: 12px; left: 18px; width: 36px; height: 4px; border-radius: 2px; background: var(--ls-line-2); }
  .adr-head { margin-bottom: 22px; }
  .adr-title { font-size: 26px; }
  @media (prefers-reduced-motion: no-preference) {
    .adr-dialog[open] { animation-name: adr-up; animation-duration: 260ms; }
  }
}
@keyframes adr-up { from { transform: translateY(40%); opacity: .4; } to { transform: none; opacity: 1; } }

/* ---------- Choose an address ---------- */
.adr-pick { min-width: 0; margin: 0; padding: 0; border: 0; }
.adr-rows { display: grid; gap: 14px; margin: 0 0 20px; padding: 0; list-style: none; }
.adr-row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  border: 1.5px solid var(--ls-line-2);
  border-radius: 16px;
  background: var(--ls-paper);
}
.adr-row.is-on { border-color: var(--ls-ink); box-shadow: inset 0 0 0 1px var(--ls-ink); }
.adr-row:has(input:focus-visible) { outline: 2px solid var(--ls-accent-text); outline-offset: 3px; }
.adr-row-pick { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 16px; min-height: 44px; padding: 18px 0 18px 20px; cursor: pointer; }
.adr-row-pick input { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; }
.adr-radio { box-sizing: border-box; width: 24px; height: 24px; margin-top: 1px; border: 2px solid var(--ls-control); border-radius: 50%; }
.adr-row-pick input:checked + .adr-radio { border-color: var(--ls-ink); box-shadow: inset 0 0 0 4px var(--ls-paper), inset 0 0 0 12px var(--ls-ink); }
.adr-row-copy { display: grid; gap: 4px; min-width: 0; }
.adr-row-title { overflow: hidden; color: var(--ls-ink); font-size: 18px; font-weight: 800; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; }
.adr-row-line, .adr-row-city { overflow: hidden; color: var(--ls-ink-2); font-size: 16px; font-weight: 500; line-height: 1.4; text-overflow: ellipsis; white-space: nowrap; }
.adr-edit {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin: 12px 12px 0 4px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: var(--ls-ink);
  background: transparent;
  cursor: pointer;
}
.adr-edit:hover { background: var(--ls-line); }
.adr-edit:focus-visible { outline: 2px solid var(--ls-accent-text); outline-offset: 0; }
.ls-btn.adr-add, .adr-add { width: 100%; min-height: 52px; font-size: 17px; }
.adr-add svg { flex: none; }

/* ---------- New address, Edit address, Use once ---------- */
.adr-form { display: grid; gap: 18px; }
.adr-kinds { min-width: 0; margin: 0; padding: 0; border: 0; }
.adr-chips { display: flex; flex-wrap: nowrap; gap: 10px; overflow-x: auto; scrollbar-width: none; padding: 3px; margin: -3px; }
.adr-chips::-webkit-scrollbar { display: none; }
.adr-chip { position: relative; flex: none; }
.adr-chip input { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; }
.adr-chip span {
  display: inline-grid;
  place-items: center;
  box-sizing: border-box;
  min-width: 64px;
  min-height: 44px;
  padding: 0 18px;
  border: 1.5px solid var(--ls-control);
  border-radius: 999px;
  color: var(--ls-ink);
  background: transparent;
  font-size: 16px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 160ms var(--ls-ease), color 160ms var(--ls-ease);
}
.adr-chip:hover span { border-color: var(--ls-ink); }
.adr-chip input:checked + span { border-color: var(--ls-ink); color: var(--ls-paper); background: var(--ls-ink); }
.adr-chip input:focus-visible + span { outline: 2px solid var(--ls-accent-text); outline-offset: 2px; }
[data-adr-other][hidden] { display: none; }
.adr-field { display: grid; min-width: 0; }
.adr-label { margin-bottom: 8px; color: var(--ls-ink); font-size: 15px; font-weight: 700; }
.adr-form .ls-input { box-sizing: border-box; min-height: 52px; border-radius: 12px; }
.adr-form textarea.ls-input { min-height: 96px; resize: vertical; line-height: 1.45; }
.adr-form [aria-invalid="true"] { border-color: var(--ls-accent-text); }
.adr-error { margin-top: 6px; color: var(--ls-accent-text); font-size: 14px; font-weight: 700; }
.adr-error[hidden] { display: none; }
.adr-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 330px) { .adr-pair { grid-template-columns: minmax(0, 1fr); } }
.adr-default { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 44px; }
.adr-default-label { color: var(--ls-ink); font-size: 17px; font-weight: 500; }
/* the switch: the profile's deal emails switch (email-prefs.css), in this file so the bag has it too */
.adr-switch { position: relative; display: inline-flex; flex: none; align-items: center; justify-content: center; width: 60px; min-height: 44px; }
.adr-switch input { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.adr-switch input:disabled { cursor: not-allowed; }
.adr-track { position: relative; width: 52px; height: 30px; border-radius: 999px; background: var(--ls-paper); box-shadow: inset 0 0 0 1.5px var(--ls-control); }
.adr-track::after { content: ""; position: absolute; top: 5px; left: 5px; width: 20px; height: 20px; border-radius: 50%; background: var(--ls-control); }
.adr-switch input:hover + .adr-track { box-shadow: inset 0 0 0 1.5px var(--ls-ink); }
.adr-switch input:checked + .adr-track { background: var(--ls-orange); box-shadow: inset 0 0 0 1.5px var(--ls-ink); }
.adr-switch input:checked + .adr-track::after { top: 3px; left: 3px; width: 24px; height: 24px; transform: translateX(22px); background: #FFFFFF url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23141412' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.5 12.5l3.5 3.5 7.5-8'/%3E%3C/svg%3E") center / 14px no-repeat; box-shadow: 0 0 0 1.5px #141412; }
.adr-switch input:focus-visible + .adr-track { outline: 2px solid var(--ls-accent-text); outline-offset: 3px; }
.adr-switch input:disabled + .adr-track { opacity: .6; }
@media (prefers-reduced-motion: no-preference) {
  .adr-track, .adr-track::after { transition: transform 200ms var(--ls-ease), background-color 160ms var(--ls-ease), box-shadow 160ms var(--ls-ease); }
}
.adr-msg { margin: 0; color: var(--ls-accent-text); font-size: 15px; font-weight: 700; }
.adr-msg:empty { display: none; }
.ls-btn.adr-save { width: 100%; min-height: 52px; font-size: 17px; }
.adr-delete-open {
  justify-self: center;
  min-height: 44px;
  padding: 0 12px;
  border: 0;
  color: var(--tud-color-status-error-text);
  background: none;
  font: inherit;
  font-size: 16px;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 4px;
  cursor: pointer;
}
.adr-delete-open[hidden], .adr-confirm[hidden] { display: none; }
.adr-delete-open:focus-visible { outline: 2px solid var(--ls-accent-text); outline-offset: 2px; border-radius: 8px; }
.adr-confirm { display: grid; gap: 14px; padding: 18px 20px 20px; border: 1.5px solid var(--ls-line-2); border-radius: 16px; background: var(--ls-paper); }
.adr-confirm-q { margin: 0; color: var(--ls-ink); font-size: 18px; font-weight: 800; line-height: 1.3; overflow-wrap: anywhere; }
.adr-confirm-row { display: flex; flex-wrap: wrap; gap: 12px; }
.adr-confirm-row .ls-btn { min-width: 112px; min-height: 48px; }
.ls-btn.adr-delete-yes { border-color: var(--tud-color-status-error-text); color: var(--ls-canvas); background: var(--tud-color-status-error-text); }
.ls-btn.adr-delete-yes:hover { border-color: var(--tud-color-status-error-text); background: var(--tud-color-status-error-text); filter: brightness(.94); }
.ls-btn.adr-delete-yes:disabled { opacity: .6; }

/* ---------- the bag's address card (lib/shop-view.js bagMain) ---------- */
.shp-addr {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) auto;
  column-gap: 20px;
  align-items: start;
  padding: 22px 22px 22px 24px;
  border: 1.5px solid var(--ls-line-2);
  border-radius: 18px;
  background: var(--ls-paper);
}
.shp-addr[hidden], .shp-courier[hidden] { display: none; }
.shp-addr-pin { grid-column: 1; grid-row: 1; margin-top: 8px; color: var(--ls-ink); }
.ls .shp-addr-title { grid-column: 2; grid-row: 1; align-self: center; margin: 0; overflow: hidden; color: var(--ls-ink); font-size: 18px; font-weight: 800; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; }
.ls-btn.shp-addr-change { grid-column: 3; grid-row: 1; min-height: 44px; padding: 8px 20px; font-size: 16px; }
.shp-addr-line, .shp-addr-who { grid-column: 2 / 4; margin: 0; color: var(--ls-ink-2); font-size: 16px; font-weight: 500; line-height: 1.5; overflow-wrap: anywhere; }
.shp-addr-line { margin-top: 14px; }
.shp-addr-who { margin-top: 4px; }
.shp-addr .field-error { grid-column: 2 / 4; margin: 10px 0 0; }
.shp-addr .field-error[hidden] { display: none; }
.shp-courier { display: contents; }
@media (max-width: 420px) {
  .shp-addr { column-gap: 14px; padding: 18px 16px 20px 18px; }
  .shp-addr-pin { margin-top: 10px; }
}