sv-store-workspace {
  display: block;
}
sv-store-workspace fieldset {
  border: 0;
  padding: 0;
  margin: 0;
  min-width: 0;
}
sv-store-workspace textarea {
  font: inherit;
  display: block;
  width: 100%;
  resize: vertical;
  border: 1px solid #c8d3c8;
  border-radius: 7px;
  padding: 11px 12px;
  color: var(--color-ink);
  background: white;
}
sv-store-workspace input:disabled,
sv-store-workspace select:disabled,
sv-store-workspace textarea:disabled {
  background: #f4f5f3;
  color: var(--color-muted);
}
sv-store-workspace .icon,
.store-entry .icon,
button.nav .icon {
  width: 20px;
  height: 20px;
  vertical-align: middle;
  flex-shrink: 0;
}
sv-store-workspace button,
.store-entry button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
button.nav .icon {
  margin-right: 9px;
}
sv-store-workspace h1 {
  font-weight: 650;
}
.store-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
}
.store-form-grid .full-width {
  grid-column: 1 / -1;
}
/* Starts a new row, so that fields that belong together stay side by side. */
.store-form-grid .row-start {
  grid-column-start: 1;
}
sv-store-workspace .store-visibility {
  margin-block-start: 24px;
}
.store-visibility legend {
  font-weight: 650;
  margin-block-end: 12px;
}
.store-visibility .checkbox {
  min-block-size: 48px;
}
.store-visibility .hint:last-child {
  margin-block-end: 0;
}
/* The legal company account, with the lookup that fills in its registered address. */
.store-legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 16px;
  margin: 0 0 12px;
  padding: 10px 10px 10px 16px;
  background: #f7f8f5;
  border-radius: 8px;
  font-size: 13px;
  overflow-wrap: anywhere;
}
.store-legal p {
  flex: 1 1 14rem;
  margin: 0;
}
.store-lookup-notice:empty {
  margin: 0;
}
#store-address-hint {
  margin-block-end: 16px;
}
.hours-row {
  display: grid;
  grid-template-columns: 70px 95px minmax(100px, 1fr) minmax(100px, 1fr) 150px;
  align-items: center;
  gap: 14px;
  padding: 19px 0;
  border-bottom: 1px solid var(--color-line);
}
.hours-row label {
  font-size: 12px;
}
.hours-row .checkbox {
  margin-top: 20px;
}
.hours-row input[type='time'] {
  min-width: 0;
  padding: 9px;
}
.effective-date {
  margin-top: 24px;
  max-width: 300px;
}
.store-hint {
  margin: 16px 0 0;
}
/* Butiksprofil: the store and its map in one column, opening hours and the logo in the other. Each column stacks on
   its own, so a tall card never leaves a gap beside a short one. */
.store-profile-column {
  display: grid;
  gap: 24px;
  align-content: start;
  min-width: 0;
}
sv-store-location {
  display: block;
}
.store-profile-sections .store-profile-column > *,
.store-profile-sections .store-profile-column > sv-store-location > .panel,
.store-profile-sections .store-profile-column > sv-company-logo > .panel {
  margin: 0;
}
/* A day per row: its name and Stängt, then the times with Stänger nästa dag beside the closing time. */
.store-profile-sections .store-profile-column .hours-row {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
  align-items: end;
  gap: 6px 12px;
  padding: 14px 0;
}
.store-profile-sections .store-profile-column .hours-row > strong {
  grid-column: 1 / 3;
  align-self: center;
}
.store-profile-sections .store-profile-column .hours-row .checkbox {
  margin: 0;
}
.store-profile-sections .store-profile-column .hours-row .next-day {
  grid-column: auto;
  min-height: 46px;
}
.store-profile-sections .store-profile-column .hours-row:first-of-type {
  padding-top: 4px;
}
@media (max-width: 520px) {
  .store-profile-sections .store-profile-column .hours-row {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
  .store-profile-sections .store-profile-column .hours-row > strong {
    grid-column: auto;
  }
  .store-profile-sections .store-profile-column .hours-row .next-day {
    grid-column: 1 / -1;
    min-height: 0;
  }
}
/* The save ends the form it saves. With something left to save it stays in view, above the phone's bottom menu. */
.store-profile-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 12px 16px;
  margin: 0 0 28px;
  padding: 14px 16px;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-panel, 12px);
  background: var(--color-surface);
}
.store-profile-actions p {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 auto 0 0;
  color: var(--color-muted);
  font-weight: 600;
}
.store-profile-actions .icon {
  width: 18px;
  height: 18px;
  flex: none;
}
.store-profile-actions.pending {
  position: sticky;
  bottom: calc(var(--bottom-bar, 0px) + 12px);
  z-index: 5;
  border-color: var(--status-action);
  background: var(--status-action-soft);
  box-shadow: 0 6px 20px #14212a26;
}
.store-profile-actions.pending p {
  color: var(--status-action);
}
/* Focus and scrolling keep fields clear of the bar while it is in view. */
:root:has(.store-profile-actions.pending) {
  scroll-padding-block-end: calc(var(--bottom-bar, 0px) + 6rem);
}
.store-form-actions {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  margin: 0 0 28px;
}
.store-form-actions button:first-child {
  margin-right: auto;
}
.store-empty {
  text-align: center;
  padding: 58px 26px;
}
.store-empty p {
  max-width: 470px;
  margin: 0 auto 24px;
}
.store-empty-icon {
  display: grid;
  place-items: center;
  width: 70px;
  height: 70px;
  margin: 0 auto 23px;
  border-radius: 18px;
  background: var(--color-accent-soft);
  color: var(--color-accent);
}
.store-empty-icon .icon {
  width: 34px;
  height: 34px;
}

.live-screen-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}
.live-screen-card {
  padding: 19px;
  background: white;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-panel);
  box-shadow: var(--shadow-panel);
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.live-screen-card header {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}
.live-screen-card h3 {
  margin: 0 auto 0 0;
  font-size: 18px;
  overflow-wrap: anywhere;
}
.setup-status {
  font-size: 10px;
  color: #7d683d;
  background: #fff6e5;
  padding: 4px 8px;
  border-radius: 5px;
}
.screen-unconnected {
  aspect-ratio: 16 / 9;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 15px;
  border: 1px dashed #cbd6ce;
  border-radius: 7px;
  background: #f4f6f2;
  color: #71827b;
  margin-bottom: 18px;
  font-size: 13px;
}
.screen-unconnected .icon {
  width: 64px;
  height: 64px;
  stroke-width: 1;
}
.screen-unconnected.portrait .icon {
  transform: rotate(90deg);
}

.sales-disabled {
  display: flex;
  gap: 7px;
  align-items: center;
  color: #806f4c;
  border-top: 1px solid var(--color-line);
  padding-top: 14px;
  margin-top: auto;
  font-size: 11px;
}
.sales-disabled .icon {
  width: 15px;
  height: 15px;
}

.screen-editor {
  border-color: #bad0c5;
}
.screen-editor .store-form-actions {
  margin: 0;
}
.planned-hours {
  margin-top: 25px;
}
.reload-store {
  display: block;
  margin-top: 12px;
  font-size: 12px;
}
.store-entry {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  background: #f0f6f1;
}
.store-entry h2 {
  margin-bottom: 5px;
}
.store-entry p {
  margin-bottom: 0;
  font-size: 13px;
}
.store-entry button {
  flex-shrink: 0;
}
@media (min-width: 1450px) {
  .workspace {
    max-width: 1450px;
  }
  .live-screen-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 1150px) {
  .hours-row {
    grid-template-columns: 65px 90px minmax(90px, 1fr) minmax(90px, 1fr);
  }
  .hours-row .next-day {
    grid-column: 3 / -1;
    margin-top: 0;
  }
}
@media (max-width: 800px) {
  .live-screen-grid {
    grid-template-columns: 1fr;
  }
  .store-form-grid {
    grid-template-columns: 1fr;
  }
  .store-entry {
    flex-direction: column;
    align-items: flex-start;
  }
}
@media (max-width: 640px) {
  .hours-row {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }
  .hours-row .checkbox {
    margin-top: 0;
  }
  .hours-row .next-day {
    grid-column: 1 / -1;
  }
  .store-form-actions button {
    font-size: 12px;
    padding: 10px 12px;
  }
  .store-empty {
    padding: 36px 18px;
  }
  nav {
    flex-wrap: wrap;
  }
  button.nav {
    width: auto;
  }
}

/* Store content uses the reviewed preview's card hierarchy and physical screen frames. */
.live-screen-card {
  padding: 24px;
  border-radius: 16px;
}
.live-screen-card h3 {
  font-size: 22px;
}
.setup-status,
.sales-disabled {
  font-size: 13px;
}
.setup-status {
  color: #6d5528;
}
.sales-disabled {
  color: #6d624b;
}
.screen-connection {
  font-size: 14px;
  font-weight: 550;
}
.monitor-stage {
  display: flex;
  justify-content: center;
  align-items: center;
  min-width: 0;
  margin: 12px 0;
  padding: 12px;
  background: #eef0ec;
  border-radius: 12px;
}
.monitor-frame {
  display: flex;
  align-items: center;
  flex-direction: column;
  min-width: 0;
  max-width: 100%;
}
.monitor-frame > img,
.monitor-frame > video,
.monitor-frame > svg {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 290px;
  border: 7px solid #202829;
  border-radius: 8px;
  background: #000;
  box-shadow: 0 5px 10px #16202224;
  object-fit: contain;
}
.monitor-led {
  display: block;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  margin-top: -5px;
  margin-bottom: 2px;
  background: #b4bcb7;
}
.preview-caption {
  font-size: 13px;
  color: #58666d;
  text-align: center;
  margin: 12px 0 18px;
}
sv-media-gallery,
sv-screen-display {
  display: block;
  min-width: 0;
}
/* Skärm och anslutning: the screen's facts in one row, what is left to do across the page, then connecting the TV
   beside the picture for idle time and video support. Each column stacks on its own. */
sv-store-workspace .screen-facts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 32px;
  margin: 0 0 24px;
  padding: 18px 24px;
}
sv-store-workspace .screen-facts h2 {
  margin: 0;
  font-size: 17px;
}
sv-store-workspace .screen-facts dl {
  display: flex;
  flex: 1 1 24rem;
  flex-wrap: wrap;
  gap: 8px 32px;
}
sv-store-workspace .screen-facts > button {
  margin-inline-start: auto;
}
.display-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}
.display-column {
  display: grid;
  gap: 24px;
  min-width: 0;
}
.display-column > .panel,
sv-screen-display > .display-status {
  min-width: 0;
  margin: 0;
}
sv-screen-display > .display-status {
  margin-bottom: 24px;
}
.display-status .screen-checklist {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
  gap: 14px 24px;
}
.display-status-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 8px 32px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--color-line);
}
.display-status-foot > .hint {
  flex: 1 1 20rem;
  margin: 0;
}
.display-status-foot .preview-action {
  flex: 1 1 20rem;
  margin: 0;
  padding: 0;
  border: 0;
}
/* The picture for idle time is a preview, not a full-size screen. */
.screen-content-panel .monitor-stage {
  margin: 8px 0 0;
}
.screen-content-panel .monitor-frame > :is(img, svg) {
  max-height: 180px;
}
.screen-content-panel .preview-caption {
  margin: 8px 0 14px;
}
.section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.section-title span {
  color: #58666d;
  font-size: 13px;
}
.display-status h2 {
  font-size: 21px;
}
.display-status .hint {
  font-size: 13px;
}
.connection-badge {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #235b53;
  font-weight: 600;
}
/* One list answers whether the screen is ready. The words carry the state; the mark repeats it. */
.screen-checklist {
  display: grid;
  gap: 14px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}
.status-item {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
}
.status-mark {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  margin-top: 1px;
  border: 2px solid currentColor;
  border-radius: 50%;
}
.status-mark .icon {
  width: 14px;
  height: 14px;
}
.status-item.tone-done .status-mark {
  border-color: var(--status-done);
  background: var(--status-done);
  color: var(--color-surface);
}
.status-item.tone-action .status-mark {
  color: var(--status-action);
}
.status-item.tone-problem .status-mark {
  color: var(--status-problem);
  background: var(--status-problem-soft);
}
.status-item.tone-muted .status-mark {
  color: var(--status-muted);
  border-style: dashed;
}
.status-item.tone-problem strong {
  color: var(--status-problem);
}
.status-text {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.status-text > span {
  color: var(--color-muted);
  font-size: 14px;
}
.status-text .text-action {
  justify-self: start;
  margin: 0;
  padding: 2px 0;
}
.preview-action {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 16px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--color-line);
}
.preview-action a,
.preview-action .text-action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  font-size: 14px;
}
.preview-action .hint {
  margin: 0;
}
.preview-action > :last-child {
  flex-basis: 100%;
}
.connected-tv .section-heading {
  display: flex;
  /* A wrapping row on phones too, so the heading and actions keep to the left edge like the rest of the page. */
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.connected-tv h2 {
  margin: 0;
}
.connected-device {
  margin: 12px 0 6px;
}
.browser-info {
  overflow-wrap: anywhere;
  font-size: 13px;
}
/* The screen's code, typed on the TV, and the browsers waiting for approval. */
.screen-code-block {
  display: grid;
  gap: 14px;
  margin-top: 18px;
  padding: 22px;
  border-radius: var(--radius-panel);
  background: var(--surface-muted);
}
.screen-code-heading {
  display: grid;
  gap: 6px;
}
.screen-code-heading h3 {
  margin: 0;
}
.screen-code {
  margin: 0;
  font:
    700 clamp(36px, 7vw, 52px) / 1 ui-monospace,
    monospace;
  letter-spacing: 0.18em;
  color: var(--color-ink);
}
.connect-steps {
  margin: 0;
  padding-left: 1.4em;
  line-height: 1.7;
}
.tv-address {
  overflow-wrap: anywhere;
}
.connect-requests-title {
  margin: 6px 0 0;
  font-size: 15px;
}
.connect-requests {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.connect-request {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 20px;
  padding: 14px 16px;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-panel);
  background: var(--color-surface);
}
.connect-request-text {
  display: grid;
  gap: 4px;
  min-width: 0;
}
.connect-request-text strong {
  font-size: 17px;
}
.connect-request summary {
  font-size: 13px;
  cursor: pointer;
}
.link-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}
.button-link {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  justify-content: center;
  background: var(--color-accent);
  color: white;
  border-radius: 8px;
  padding: 12px 18px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}
.button-link:hover {
  background: var(--color-accent-hover);
}
.text-action {
  padding: 10px 0;
  margin-top: 14px;
  color: var(--color-accent);
  text-decoration: underline;
  background: transparent;
  font-size: 13px;
  border: 0;
  border-radius: 0;
}
.text-action:hover {
  background: transparent;
  color: var(--color-accent-hover);
}
.test-confirm,
.fallback-confirm {
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid var(--color-line);
}
.test-confirm label,
.fallback-confirm label,
.video-support label {
  margin-bottom: 18px;
  align-items: flex-start;
  line-height: 1.6;
}
.test-confirm input,
.fallback-confirm input,
.video-support input {
  margin-top: 6px;
  flex-shrink: 0;
}
.gallery-dialog {
  color: var(--color-ink);
  width: min(960px, calc(100vw - 32px));
  max-height: calc(100dvh - 40px);
  border: 1px solid var(--color-line);
  border-radius: 16px;
  padding: 28px;
  overscroll-behavior: contain;
}
.gallery-dialog::backdrop {
  background: #14222d70;
}
.gallery-dialog > header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
}
.gallery-dialog > header h2 {
  margin-top: 4px;
}
.gallery-dialog > header button {
  padding: 10px;
  min-width: 44px;
  min-height: 44px;
}
.gallery-upload {
  background: #f1f5f0;
  border: 1px solid #d4e0d5;
  padding: 20px;
  border-radius: 12px;
  margin: 24px 0;
}
.gallery-upload fieldset {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  align-items: end;
}
.gallery-upload label {
  flex: 1 1 200px;
  min-width: 0;
}
.gallery-upload input[type='file'] {
  width: 100%;
  padding: 8px 0;
  font-size: 13px;
  border: none;
  background: none;
}
.gallery-upload p {
  font-size: 13px;
  margin: 15px 0 0;
  color: #526057;
}
.gallery-search {
  max-width: 440px;
  margin-bottom: 24px;
}
.media-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 20px;
}
.media-card {
  padding: 14px;
  border: 1px solid var(--color-line);
  border-radius: 12px;
  min-width: 0;
  background: white;
}

.media-card h3 {
  font-size: 16px;
  margin: 16px 0 6px;
  overflow-wrap: anywhere;
}
.media-card p {
  font-size: 13px;
  margin-bottom: 16px;
}
.media-card a {
  color: var(--color-accent);
}
.media-card button {
  width: 100%;
  font-size: 13px;
}
.gallery-empty {
  padding: 40px 20px;
  text-align: center;
  border: 1px dashed #c8d3c8;
  border-radius: 10px;
}
.link-actions button {
  min-height: 44px;
}
@media (max-width: 1000px) {
  .display-layout {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 700px) {
  .gallery-dialog {
    padding: 20px;
  }
  .gallery-upload {
    padding: 16px;
  }
  .live-screen-card {
    padding: 20px;
  }
}

/* Shared gallery and supplier image studio. */
sv-supplier-workspace,
sv-ai-editor,
sv-ai-settings {
  display: block;
  min-width: 0;
}
sv-media-gallery fieldset,
sv-ai-editor fieldset,
sv-ai-settings fieldset {
  border: 0;
  padding: 0;
  margin: 0;
  min-width: 0;
}
sv-ai-editor .icon,
sv-media-gallery .icon {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
}
sv-ai-editor textarea,
sv-ai-settings textarea {
  font: inherit;
  width: 100%;
  display: block;
  border: 1px solid #bdcbc6;
  border-radius: 8px;
  padding: 12px;
  resize: vertical;
  color: var(--color-ink);
  background: white;
}
sv-ai-editor button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.gallery-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: end;
  margin: 26px 0;
}
.gallery-filters > label {
  flex: 1 1 140px;
}
.gallery-filters .gallery-search {
  flex: 2 1 230px;
  margin: 0;
  max-width: none;
}
.gallery-search > span {
  display: flex;
  gap: 8px;
}
.gallery-search input {
  min-width: 0;
}
.gallery-filters > .checkbox {
  flex: 0 1 auto;
  padding: 12px 0;
}

.media-card h3 {
  margin-top: 10px;
}

.media-comparison {
  display: flex;
  gap: 24px;
  margin: 20px 0;
}
.media-comparison figure {
  flex: 1 1 0;
  min-width: 0;
  margin: 0;
  text-align: center;
}
.media-comparison img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 450px;
  object-fit: contain;
  background: #edf1ec;
  border-radius: 8px;
}
.media-comparison figcaption {
  margin-top: 12px;
  font-size: 13px;
  color: #52665e;
}
.media-detail-dialog label {
  margin: 16px 0;
}

.ai-balance {
  display: grid;
  gap: 5px;
  font-size: 15px;
}
.ai-balance small {
  font-size: 12px;
  color: #4f655d;
}
.ai-connection-note {
  margin: 16px 0;
  font-size: 13px;
}
.ai-editor h2 {
  margin: 8px 0 0;
}
.ai-editor > p {
  margin: 22px 0;
}
fieldset.ai-references {
  margin: 24px 0;
}
.ai-references legend {
  font-size: 15px;
  font-weight: 650;
  margin-bottom: 6px;
}
.ai-reference-count {
  white-space: nowrap;
}
.ai-reference-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr));
  gap: 16px;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
}
.ai-reference {
  display: flex;
  flex-direction: column;
  padding: 16px;
  border: 1px solid #d5e0d8;
  border-radius: 12px;
  background: #f7f9f5;
  min-width: 0;
}
.ai-reference h3 {
  margin: 0 0 14px;
  font-size: 17px;
}
.ai-reference p {
  font-size: 13px;
  overflow-wrap: anywhere;
  margin: 8px 0;
}
.ai-reference-image {
  width: 100%;
  height: 120px;
  object-fit: contain;
}
.ai-reference-remove {
  margin-top: auto;
  align-self: flex-start;
}
.ai-reference-empty {
  height: 72px;
  display: grid;
  place-items: center;
  color: #678179;
}
.ai-reference-empty .icon {
  width: 40px;
  height: 40px;
}
.ai-reference-add {
  grid-column: 1 / -1;
  flex-flow: row wrap;
  align-items: flex-end;
  gap: 12px 20px;
}
.ai-reference-add .ai-reference-empty {
  flex: 0 0 72px;
  height: 56px;
}
.ai-add-control {
  flex: 1 1 220px;
  min-width: 0;
  display: grid;
  gap: 6px;
}
.ai-add-control select {
  width: 100%;
}
.ai-file-input {
  width: 100%;
  font-size: 12px;
  padding: 10px 0;
  border: 0;
  background: none;
}
.ai-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: 20px;
  margin: 20px 0;
}
/* Name, expression and where the new image is saved fit on one row when there is room. */
.ai-form-grid:has(> :nth-child(3)) {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
}
/* Spara i samling, with the name of a new collection below it when Ny samling… is chosen. */
.ai-collection-choice {
  display: grid;
  align-content: start;
  gap: 14px;
}
.ai-prompt textarea {
  min-height: 6.5rem;
}
.ai-editor .hint {
  font-size: 13px;
  line-height: 1.65;
  margin: 8px 0 14px;
}
fieldset.ai-formats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 26px 0 18px;
}
.ai-formats > p,
.ai-formats > ul {
  grid-column: 1 / -1;
}
.ai-formats legend {
  font-size: 15px;
  font-weight: 650;
  margin-bottom: 14px;
}
.ai-format-choice {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 18px 12px;
  border: 1px solid #bccfc4;
  border-radius: 10px;
  cursor: pointer;
}
.ai-format-choice:has(input:checked) {
  background: #eaf2ec;
  border-color: var(--color-accent);
}
.ai-format-choice input {
  width: auto;
  flex-shrink: 0;
}
.ai-format-choice span {
  display: grid;
  gap: 6px;
}
.ai-format-choice small {
  color: #52665e;
  font-size: 12px;
  font-weight: 400;
}
.ai-rights {
  margin-top: 24px;
  line-height: 1.65;
  align-items: start;
}
.ai-rights input {
  margin-top: 6px;
  flex-shrink: 0;
}
.ai-submit {
  border-top: 1px solid var(--color-line);
  padding-top: 22px;
  margin-top: 24px;
  display: flex;
  justify-content: space-between;
  gap: 20px;
  align-items: center;
}
.ai-submit p {
  margin: 0;
  font-weight: 650;
}
.ai-submit small {
  display: block;
  margin-top: 7px;
  font-weight: 400;
  font-size: 13px;
  color: #52665e;
}
.ai-source-preview {
  display: flex;
  gap: 20px;
  align-items: center;
  padding: 20px;
  background: #f1f5ef;
  border-radius: 12px;
}
.ai-source-preview img {
  max-width: 50%;
  width: auto;
  height: auto;
  max-height: 220px;
  object-fit: contain;
}
.ai-source-preview p {
  font-size: 13px;
}
.ai-jobs {
  margin: 24px 0;
  padding: 20px;
  border: 1px solid #d4dfd8;
  border-radius: 12px;
  background: white;
}
.ai-jobs summary {
  font-weight: 650;
  cursor: pointer;
}
.ai-jobs article {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid #e3e9e3;
}
.ai-jobs article:last-child {
  border: 0;
  padding-bottom: 0;
}
.ai-jobs small,
.ai-jobs p {
  display: block;
  font-size: 12px;
  color: #52665e;
  margin: 6px 0 0;
}
.ai-job-status {
  font-size: 13px;
  font-weight: 600;
}
.status-unknown {
  color: #815317;
}
.status-failed {
  color: #a13d35;
}
.prompt-preview {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  padding: 18px;
  background: #f1f4ee;
  border-radius: 8px;
  font-size: 13px;
}
.prompt-history {
  margin-top: 24px;
}
.prompt-history article {
  border-top: 1px solid var(--color-line);
  padding: 16px 0;
}
.prompt-history article > button {
  margin-left: 16px;
  font-size: 12px;
}
sv-ai-settings label {
  margin-bottom: 20px;
}
.ai-attention {
  display: grid;
  gap: 10px;
  padding: 18px;
  background: #fff6e8;
  border-radius: 8px;
  margin-bottom: 16px;
  overflow-wrap: anywhere;
}
@media (max-width: 700px) {
  .ai-form-grid {
    grid-template-columns: 1fr;
  }
  fieldset.ai-formats {
    grid-template-columns: 1fr;
  }
  .ai-format-choice span {
    display: flex;
    flex: 1;
    justify-content: space-between;
  }
  .ai-submit {
    align-items: stretch;
    flex-direction: column;
  }

  .media-comparison {
    flex-direction: column;
  }
  .ai-jobs article {
    flex-direction: column;
    gap: 8px;
  }
  .ai-source-preview {
    flex-direction: column;
  }
  .ai-source-preview img {
    max-width: 100%;
  }
}
.gallery-filters .gallery-search {
  display: flex;
  align-items: end;
  gap: 8px;
}
.gallery-search > label {
  flex: 1;
  min-width: 0;
}

/* Keep actions aligned even when titles and variant names wrap. */
.media-card {
  display: flex;
  flex-direction: column;
}

.ai-job-status {
  display: inline-flex;
  align-items: center;
  gap: 9px;
}
.ai-job-spinner {
  width: 17px;
  height: 17px;
  flex: 0 0 17px;
  border: 2px solid #bfd4ce;
  border-top-color: var(--color-accent);
  border-radius: 50%;
  animation: ai-job-spin 1s linear infinite;
}
@keyframes ai-job-spin {
  to {
    transform: rotate(360deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  .ai-job-spinner {
    animation: none;
    border-style: dotted;
  }
}

.ai-credits {
  margin-bottom: 18px;
}
.ai-credits > .panel {
  margin-top: 16px;
}
.booking-repeat {
  margin-top: 22px;
}
.booking-repeat fieldset {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 16px;
}
/* A video whose playback version is still being made, or failed, shows a neutral placeholder. */
.media-video-pending {
  display: grid;
  place-items: center;
  gap: 4px;
  aspect-ratio: 16 / 9;
  width: 100%;
  color: var(--color-muted);
  background: var(--color-stage);
  font-size: 13px;
}
.media-comparison video {
  display: block;
  width: 100%;
  height: auto;
  background: #000;
  border-radius: 8px;
}

.video-support h3 {
  margin-top: 0;
}
.video-support-state {
  margin: 0 0 8px;
}

/* Logotyp in Butiksprofil and Företagsprofil: the logo on a light check, and what can be done with it. */
sv-company-logo {
  display: block;
  margin-block-start: 1.5rem;
}
.company-logo-body {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  align-items: flex-start;
}
.company-logo-preview {
  display: grid;
  place-items: center;
  inline-size: min(100%, 16rem);
  aspect-ratio: 16 / 10;
  padding: 1rem;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-panel, 12px);
  background: repeating-conic-gradient(#f3f4f8 0% 25%, #fff 0% 50%) 50% / 16px 16px;
}
.company-logo-preview img {
  max-inline-size: 100%;
  max-block-size: 100%;
  inline-size: auto;
  block-size: auto;
  object-fit: contain;
}
.company-logo-empty {
  display: grid;
  justify-items: center;
  gap: 0.4rem;
  color: var(--color-muted);
  font-size: 13px;
}
.company-logo-empty .icon {
  width: 32px;
  height: 32px;
}
.company-logo-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  flex: 1 1 16rem;
  min-width: 0;
}
.company-logo-actions .hint {
  flex-basis: 100%;
  margin: 0;
}
/* The file field stays in the page for keyboard and screen readers; its label looks like the other buttons. */
.company-logo-file {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.company-logo-upload {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  margin: 0;
  padding: 0 16px;
  border: 1px solid var(--control-line, var(--color-line));
  border-radius: var(--radius-control, 8px);
  background: var(--surface-card, #fff);
  color: var(--color-ink);
  box-shadow: 0 1px 2px rgb(32 36 60 / 0.06);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.company-logo-upload .icon {
  width: 18px;
  height: 18px;
}
.company-logo-upload:hover {
  border-color: #b7bccd;
  background: var(--surface-sunken, #f6f7fa);
}
.company-logo-file:focus-visible + .company-logo-upload {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}
.company-logo-file:disabled + .company-logo-upload {
  color: var(--color-muted);
  background: var(--surface-sunken, #f6f7fa);
  box-shadow: none;
  cursor: progress;
}
@media (forced-colors: active) {
  .company-logo-upload {
    border-color: ButtonText;
  }
}
/* Inkludera logotyp in the AI form: the logo from the company's settings beside the choice. */
.ai-logo {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  margin: 0 0 18px;
  padding: 12px 14px;
  border: 1px solid var(--color-line);
  border-radius: 10px;
}
.ai-logo .checkbox {
  font-weight: 600;
}
.ai-logo .hint {
  margin: 4px 0 0;
}
.ai-logo-image {
  flex: none;
  inline-size: 72px;
  block-size: 48px;
  object-fit: contain;
  padding: 4px;
  border-radius: 6px;
  background: repeating-conic-gradient(#f3f4f8 0% 25%, #fff 0% 50%) 50% / 12px 12px;
}

/* Uttryck is folded under its current choice; opening it shows one card per expression with its example picture. */
.ai-style-details {
  margin: 22px 0 8px;
  border: 1px solid var(--color-line);
  border-radius: 10px;
  background: var(--color-surface);
}
.ai-style-details > summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 6px 12px;
  min-height: 44px;
  padding: 8px 12px;
  cursor: pointer;
  font-weight: 650;
}
.ai-style-summary-choice {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--color-muted);
  font-weight: 500;
}
.ai-style-summary-choice img {
  width: 32px;
  height: 32px;
  border-radius: 6px;
  object-fit: cover;
}
.ai-style-details[open] > summary {
  border-bottom: 1px solid var(--color-line);
}
.ai-style-details fieldset.ai-styles {
  margin: 0;
  padding: 10px 12px 12px;
}
/* From a slideshow: the offer's last day from the guide can end the image's Period. */
.ai-offer-period {
  margin-top: 10px;
}
.ai-offer-period + .hint {
  margin-top: 2px;
}
fieldset.ai-styles {
  margin: 22px 0 8px;
  padding: 0;
  border: 0;
}
fieldset.ai-styles legend {
  font-weight: 650;
}
.ai-style-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 7.5rem), 1fr));
  gap: 10px;
}
.ai-style-card {
  position: relative;
  display: grid;
  gap: 6px;
  padding: 6px;
  border: 1.5px solid var(--color-line);
  border-radius: 10px;
  background: var(--color-surface);
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
}
.ai-style-card:hover {
  border-color: var(--control-border, #a1a8bb);
}
.ai-style-card.chosen {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 1.5px var(--color-accent);
}
.ai-style-card:has(input:focus-visible) {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}
.ai-style-card input {
  position: absolute;
  inset-block-start: 12px;
  inset-inline-start: 12px;
  inline-size: 20px;
  block-size: 20px;
  min-height: 0;
  margin: 0;
  padding: 0;
  accent-color: var(--color-accent);
}
.ai-style-card img,
.ai-style-none {
  display: block;
  inline-size: 100%;
  block-size: auto;
  aspect-ratio: 1;
  border-radius: 6px;
  object-fit: cover;
}
.ai-style-none {
  display: grid;
  place-items: center;
  background: repeating-linear-gradient(135deg, #f3f4f8 0 10px, #fff 10px 20px);
  color: var(--color-accent);
}
.ai-style-none .icon {
  width: 32px;
  height: 32px;
}
.ai-style-name {
  padding-inline: 2px;
}

/* Hjälp mig skriva prompten comes first: a few questions write the prompt, for those who would rather not type one. */
.ai-wizard-entry {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  margin: 0 0 18px;
  padding: 12px 14px;
  border: 1px solid var(--color-accent-soft-border, var(--color-line));
  border-radius: 10px;
  background: var(--color-accent-soft);
}
.ai-wizard-entry > p:first-child {
  flex: 1 1 16rem;
  margin: 0;
}
/* Välj bland dina bilder: the company's images as pictures to press, instead of a list of names. */
.ai-reference-existing {
  margin-top: 10px;
}
.ai-reference-existing > summary {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  cursor: pointer;
  color: var(--color-accent);
  font-weight: 650;
}
.ai-existing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(46%, 7.5rem), 1fr));
  gap: 8px;
  margin: 6px 0 0;
  padding: 0;
  list-style: none;
}
.ai-existing-image {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 4px;
  inline-size: 100%;
  min-height: 0;
  padding: 5px;
  border: 1.5px solid var(--color-line);
  border-radius: 10px;
  background: var(--color-surface);
  color: var(--color-ink);
  font-size: 13px;
  font-weight: 500;
  text-align: start;
}
.ai-existing-image:hover {
  border-color: var(--color-accent);
  background: var(--color-accent-soft);
}
.ai-existing-image img {
  display: block;
  inline-size: 100%;
  block-size: auto;
  aspect-ratio: 16 / 10;
  border-radius: 6px;
  background: #14212a;
  object-fit: contain;
}
.ai-existing-image span {
  overflow-wrap: anywhere;
}
/* The AI form's results (12 November): each ordered image where the form was, with the attempts made of it. */
.ai-results {
  display: grid;
  gap: 14px;
  margin-top: 20px;
}
.ai-results-title {
  margin: 0;
  font-size: 19px;
}
.ai-results-status {
  margin: 0;
  font-weight: 600;
}
.ai-editor .ai-results .hint {
  margin: 0;
}
.ai-slots {
  display: grid;
  gap: 20px;
}
.ai-slots.several {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  align-items: start;
}
.ai-slot {
  display: grid;
  gap: 10px;
  justify-items: start;
  min-inline-size: 0;
}
.ai-slots.several .ai-slot-lead {
  grid-column: 1 / -1;
}
.ai-slot h4 {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 10px;
  margin: 0;
  font-size: 15px;
}
.ai-slot h4 small {
  color: var(--color-muted);
  font-size: 13px;
  font-weight: 400;
}
/* As wide as the form allows, but never taller than most of the window: a standing image stays in view. */
.ai-result-frame {
  --frame-max: min(44vh, 28rem);
  display: grid;
  place-items: center;
  inline-size: min(100%, calc(var(--frame-max) * var(--ratio, 1.7778)));
  aspect-ratio: var(--ratio, 1.7778);
  border: 1px solid var(--color-line);
  border-radius: 10px;
  background: var(--surface-muted, #f4f6f8);
  overflow: hidden;
}
.ai-slots.several .ai-slot:not(.ai-slot-lead) .ai-result-frame {
  --frame-max: 15rem;
}
.ai-result-frame img {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: contain;
}
/* Why an image was not made needs room for its words, whatever the image's shape. */
.ai-result-frame.failed,
.ai-result-frame.unknown {
  inline-size: 100%;
  max-inline-size: 34rem;
  aspect-ratio: auto;
  background: var(--color-warning-soft);
}
.ai-result-note {
  display: grid;
  justify-items: center;
  gap: 8px;
  margin: 0;
  padding: 16px;
  color: var(--color-muted);
  font-size: 14px;
  text-align: center;
}
.ai-result-frame.failed .ai-result-note,
.ai-result-frame.unknown .ai-result-note {
  color: var(--color-ink);
}
.ai-result-note .icon {
  width: 22px;
  height: 22px;
}
.ai-result-note .ai-job-spinner {
  width: 28px;
  height: 28px;
}
.ai-attempts {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ai-attempt {
  display: grid;
  align-content: start;
  gap: 6px;
  inline-size: 7.5rem;
}
.ai-attempt-show {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 4px;
  inline-size: 100%;
  min-height: 0;
  padding: 5px;
  border: 1.5px solid var(--color-line);
  border-radius: 10px;
  background: var(--color-surface);
  color: var(--color-ink);
  font-size: 13px;
  font-weight: 500;
  text-align: start;
}
.ai-attempt-show:hover,
.ai-attempt-show[aria-pressed='true'] {
  border-color: var(--color-accent);
  background: var(--color-accent-soft);
}
.ai-attempt-show img,
.ai-attempt-empty {
  display: grid;
  place-items: center;
  inline-size: 100%;
  block-size: 4.25rem;
  border-radius: 6px;
  background: var(--surface-muted, #f4f6f8);
  color: var(--color-muted);
  object-fit: contain;
}
/* Spara även, or what the attempt is, on one line under each picture. */
.ai-attempt-keep,
.ai-attempt-state {
  display: flex;
  align-items: center;
  min-height: 28px;
  margin: 0;
  font-size: 13px;
}
.ai-attempt-state {
  color: var(--color-muted);
}
.ai-redo,
.ai-change {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.ai-redo .icon,
.ai-change .icon {
  flex: none;
  width: 18px;
  height: 18px;
}
.ai-results-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 12px;
  padding-top: 18px;
  border-top: 1px solid var(--color-line);
}
/* The form stays in the page behind its results, exactly as it was left. */
.ai-editor form[hidden] {
  display: none;
}
/* Above the form when it is opened again from its results. */
.ai-form-return {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  margin: 0 0 18px;
  padding: 12px 14px;
  border: 1px solid var(--color-line);
  border-radius: 10px;
  background: var(--surface-muted, #f4f6f8);
}
.ai-form-return p {
  flex: 1 1 16rem;
  margin: 0;
}
.ai-wizard-entry .hint {
  flex: 1 1 100%;
  margin: 0;
}
.ai-wizard-open {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
sv-prompt-wizard {
  display: block;
  margin: 0 0 18px;
}
.prompt-wizard {
  display: grid;
  gap: 12px;
  padding: 16px;
  border: 1.5px solid var(--color-accent);
  border-radius: 12px;
  background: var(--color-accent-soft);
}
.prompt-wizard header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.prompt-wizard h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 15px;
}
.prompt-wizard h3 .icon {
  width: 18px;
  height: 18px;
  color: var(--color-accent);
}
.prompt-wizard .hint {
  margin: 0;
}
.wizard-question {
  margin: 0;
  font-size: 16px;
  font-weight: 650;
}
.wizard-options {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.wizard-option {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border: 1px solid var(--color-line);
  border-radius: 999px;
  background: var(--color-surface);
  font-weight: 600;
  cursor: pointer;
}
.wizard-option input {
  inline-size: 18px;
  block-size: 18px;
  min-height: 0;
  margin: 0;
  padding: 0;
}
.wizard-option:has(input:checked) {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 1px var(--color-accent);
}
.wizard-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 9rem);
  gap: 10px;
}
.wizard-field input,
.wizard-field select {
  background: var(--color-surface);
}
.wizard-actions {
  display: flex;
  justify-content: space-between;
  gap: 8px;
}

/* Driftfel och underhåll: the period's fields side by side, the texts at a readable width, the review at the end. */
.availability-times {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 12px 24px;
}
.availability-times > label:not(.check-label) {
  flex: 0 1 17rem;
  min-width: min(100%, 14rem);
  margin: 0;
}
sv-screen-availability .availability-times > .check-label {
  min-height: 46px;
}
.availability-texts {
  display: grid;
  gap: 16px;
  max-inline-size: 42rem;
}
.availability-texts > label {
  margin: 0;
}
.availability-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 24px;
}