/* "Spoerg os om denne sko" — knap paa varesiden og dialogen bag den. */

/* Knappen indsaettes efter koebsknappen, og den ligger i et grid sammen med
   antal og "Tilfoej til kurv". Uden det her bliver den klemt ned til 58px med
   teksten brudt over tre linjer. Den skal have sin egen linje under de andre. */
.woocommerce-variation-add-to-cart .dms-spoerg-knap,
form.cart .dms-spoerg-knap {
  grid-column: 1 / -1;          /* hele bredden, naar foraelderen er et grid */
  justify-self: start;
  flex: 0 0 100%;               /* samme virkning, naar den er flex */
  order: 99;                    /* grid placerer ellers en fuld-bredde-celle FOER raekken */
  align-self: start;
}

.dms-spoerg-knap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: auto;
  max-width: 100%;
  white-space: nowrap;
  min-height: 46px;
  margin: 12px 0 0;
  padding: 0 20px;
  border: 1px solid var(--dm-line, #e8e0d8);
  border-radius: 999px;
  background: #fff;
  color: inherit;
  font: inherit;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  transition: border-color .15s, background-color .15s;
}
.dms-spoerg-knap::before { content: "?"; font-weight: 800; opacity: .5; }
.dms-spoerg-knap:hover { border-color: #aaa; background: #fbfaf8; }
.dms-spoerg-knap:focus-visible { outline: 2px solid var(--dm-accent, #8a1c3d); outline-offset: 2px; }

/* --- Dialogen --- */

dialog.dms-spoerg {
  width: min(520px, calc(100vw - 32px));
  padding: 26px 28px 28px;
  border: 0;
  border-radius: 14px;
  background: #fff;
  color: #241f1d;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .22);
}
dialog.dms-spoerg::backdrop { background: rgba(23, 23, 23, .45); }

.dms-spoerg h2 {
  font-family: Georgia, serif;
  font-size: 25px;
  line-height: 1.2;
  margin: 0 0 8px;
  padding-right: 30px;          /* plads til luk-krydset */
}
.dms-spoerg-intro { margin: 0 0 16px; color: #6d625b; font-size: 14.5px; }

.dms-spoerg-luk-form { float: right; margin: -8px -8px 0 0; }
.dms-spoerg-luk {
  width: 36px; height: 36px;
  border: 0; border-radius: 50%;
  background: none; color: #6d625b;
  font-size: 24px; line-height: 1; cursor: pointer;
}
.dms-spoerg-luk:hover { background: #f2efec; }

.dms-spoerg-vare {
  margin: 0 0 16px;
  padding: 11px 14px;
  border-radius: 9px;
  background: #f7f3ef;
  font-size: 14px;
}
.dms-spoerg-vare span { color: #6d625b; font-size: 13px; }

.dms-spoerg-form p { margin: 0 0 13px; }
.dms-spoerg-form label {
  display: block;
  margin-bottom: 5px;
  font-size: 13px;
  font-weight: 600;
}
.dms-spoerg-form input[type="text"],
.dms-spoerg-form textarea {
  width: 100%;
  padding: 11px 13px;
  border: 1px solid var(--dm-line, #e8e0d8);
  border-radius: 9px;
  background: #fff;
  font: inherit;
  font-size: 15px;              /* under 16px zoomer iOS ind ved fokus */
}
.dms-spoerg-form textarea { resize: vertical; min-height: 96px; }
.dms-spoerg-form input:focus, .dms-spoerg-form textarea:focus {
  outline: 2px solid var(--dm-accent, #8a1c3d);
  outline-offset: 1px;
  border-color: transparent;
}

.dms-spoerg-to { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
@media (max-width: 420px) { .dms-spoerg-to { grid-template-columns: 1fr; } }

.dms-spoerg-privat { margin: 4px 0 16px !important; color: #7b7069; font-size: 12.5px; }
.dms-spoerg-fejl {
  margin: 0 0 14px; padding: 10px 13px; border-radius: 8px;
  background: #fbeaea; color: #8a1c1c; font-size: 14px;
}

.dms-spoerg-send { margin: 0 !important; }
.dms-spoerg-send button {
  width: 100%;
  min-height: 50px;
  border: 0;
  border-radius: 999px;
  background: var(--dm-accent, #8a1c3d);
  color: #fff;
  font: inherit;
  font-weight: 700;
  font-size: 15px;
  cursor: pointer;
}
.dms-spoerg-send button:hover { filter: brightness(1.08); }

/* Honningkrukken skal vaere usynlig for mennesker, men ikke display:none -
   nogle robotter springer skjulte felter over. */
.dms-spoerg-hp {
  position: absolute;
  left: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
}