/* Cookie-consent banner + settings dialog. See docs/consents.md §11.5.
   Brand color reuses --dark-blue-color (#0C73BD) from shared.css. */

.apm-consent__banner,
.apm-consent__modal {
  --apm-consent-brand: var(--dark-blue-color, #0C73BD);
  font-family: var(--market-content-fonts, sans-serif);
}

/* ---------------- Banner (fixed → never shifts flow) ---------------- */
.apm-consent__banner {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 2147483000;
  background: #fff;
  border-top: 6px solid var(--apm-consent-brand);
  box-shadow: 0 -20px 40px 10px rgba(227, 227, 227, 0.6);
  padding: 0.75rem 0; /* horizontal insets come from the .container inner */
}
.apm-consent__banner[hidden] { display: none; }

/* Inner also carries the global `.container` class (see component) so its width
   + responsive breakpoints track the rest of the page's content. */
.apm-consent__banner-inner {
  display: flex;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
}
.apm-consent__banner-heading { font-weight: 700; margin: 0 0 0.25rem; }
.apm-consent__banner-body { font-size: 0.85rem; margin: 0; color: #333; }
.apm-consent__banner-actions {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  flex-shrink: 0;
}

/* ---------------- Buttons + links ---------------- */
/* Buttons mirror the React configurator's design-system Button
   (react/components/Button/Button.css): --primary = Primary (blue fill),
   --ghost = PrimaryOutline (blue outline). */
.apm-consent__btn {
  text-align: center;
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  border: 1px solid var(--text-gray-color);
  border-radius: 1rem;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.3s ease-in-out;
}
.apm-consent__btn:disabled { opacity: 0.5; }

.apm-consent__btn--primary {
  border-color: var(--dark-blue-color);
  background: var(--dark-blue-color);
  color: #fff;
  font-weight: 700;
  font-size: 0.90rem;
  border-radius: var(--border-radius-small);
}
.apm-consent__btn--primary:not(:disabled):hover {
  border-color: var(--light-blue-color);
  background: var(--light-blue-color);
}

.apm-consent__btn--ghost {
  border-color: var(--dark-blue-color);
  background: transparent;
  color: var(--dark-blue-color);
  font-weight: 600;
  border-radius: var(--border-radius-small);
}
.apm-consent__btn--ghost:not(:disabled):hover {
  border-color: var(--dark-blue-color);
  background: var(--dark-blue-color);
  color: #fff;
}
.apm-consent__link,
.apm-consent__manage {
  background: none;
  border: 0;
  color: var(--apm-consent-brand);
  text-decoration: underline;
  cursor: pointer;
  padding: 0.25rem;
  font: inherit;
}
/* Inline settings trigger — sits inside the banner sentence, so it flows as text. */
.apm-consent__manage { display: inline; padding: 0; }
/* A <button> is an atomic inline box, so the sentence's closing period could wrap
   onto its own line after it. Keeping the trigger and period in one nowrap unit
   prevents that orphaned dot (the wrapper is emitted by CookieConsentComponent). */
.apm-consent__manage-wrap { white-space: nowrap; }

/* ---------------- Dialog ---------------- */
.apm-consent__modal {
  /* Center in viewport. Explicit because Tailwind preflight zeroes `margin`
     on every element, killing the native dialog's default `margin: auto`. */
  position: fixed;
  inset: 0;
  margin: auto;
  border: 0;
  border-radius: 0.5rem;
  padding: 0;
  width: min(680px, 92vw);
  height: fit-content;
  max-height: 88vh;
  color: #222;
}
.apm-consent__modal::backdrop { background: rgba(0, 0, 0, 0.5); }
.apm-consent__modal:not([open]) { display: none; }
.apm-consent__modal-inner { display: flex; flex-direction: column; max-height: 88vh; }

.apm-consent__modal-head,
.apm-consent__modal-foot {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  padding: 1rem 1.25rem;
}
.apm-consent__modal-head { justify-content: space-between; border-bottom: 1px solid #eee; }
.apm-consent__modal-heading { font-weight: 700; margin: 0; }
.apm-consent__modal-foot { justify-content: flex-end; border-top: 1px solid #eee; flex-wrap: wrap; }
.apm-consent__modal-intro { padding: 1rem 1.25rem 0; font-size: 0.9rem; color: #444; margin: 0; }
.apm-consent__accordion { overflow-y: auto; padding: 0.5rem 1.25rem; }
.apm-consent__close { background: none; border: 0; font-size: 1.75rem; line-height: 1; cursor: pointer; color: #666; }

/* ---------------- Accordion row ---------------- */
.apm-consent__row { border-bottom: 1px solid #eee; }
.apm-consent__row-head { margin: 0; }
.apm-consent__row-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.875rem 0;
  background: none;
  border: 0;
  cursor: pointer;
  font: inherit;
  text-align: left;
}
.apm-consent__row-name { flex: 1; font-weight: 600; }
.apm-consent__status-on { color: #167a3a; font-weight: 700; }
.apm-consent__status-off { color: #b00020; font-weight: 700; }
.apm-consent__wedge {
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 7px solid #666;
  transition: transform 0.15s;
}
.apm-consent__row-toggle[aria-expanded="true"] .apm-consent__wedge { transform: rotate(180deg); }
.apm-consent__panel { padding-bottom: 0.5rem; }
.apm-consent__panel[hidden] { display: none; }
.apm-consent__desc { font-size: 0.85rem; color: #444; margin: 0 0 0.5rem; }
.apm-consent__affected { font-size: 0.8rem; font-weight: 600; margin: 0.25rem 0; }
.apm-consent__vendors { margin: 0.25rem 0 0.75rem 1.25rem; list-style: disc; font-size: 0.8rem; }
.apm-consent__always-on { font-size: 0.8rem; color: #167a3a; font-weight: 600; }

/* ---------------- role=switch ---------------- */
.apm-consent__switch-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0 1rem;
}
.apm-consent__switch-label { font-size: 0.85rem; font-weight: 600; }
.apm-consent__switch { background: none; border: 0; cursor: pointer; padding: 0; }
.apm-consent__switch-track {
  display: inline-block;
  width: 44px;
  height: 24px;
  border-radius: 999px;
  background: #ccc;
  position: relative;
  transition: background 0.15s;
}
.apm-consent__switch-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  transition: transform 0.15s;
}
.apm-consent__switch[aria-checked="true"] .apm-consent__switch-track { background: var(--apm-consent-brand); }
.apm-consent__switch[aria-checked="true"] .apm-consent__switch-thumb { transform: translateX(20px); }

/* Visible keyboard focus */
.apm-consent :focus-visible {
  outline: 2px solid var(--apm-consent-brand);
  outline-offset: 2px;
}
.apm-consent__switch:focus-visible .apm-consent__switch-track {
  outline: 2px solid var(--apm-consent-brand);
  outline-offset: 2px;
}

body.apm-consent-modal-open { overflow: hidden; }

/* Footer "Cookie settings" reopen trigger — looks like the sibling footer links. */
.apm-consent-reopen {
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  font: inherit;
  color: var(--dark-blue-color);
  cursor: pointer;
  text-align: left;
  text-decoration: none;
}
.apm-consent-reopen:hover { text-decoration: underline; }

/* ---------------- Mobile (≤640) ---------------- */
@media (max-width: 640px) {
  .apm-consent__banner-inner { flex-direction: column; align-items: stretch; }
  /* Reject all / Accept all are equal-weight (both primary) and split the row evenly.
     white-space:normal lets a longer label wrap instead of forcing the button past its
     half; align-items:stretch keeps both the same height when one wraps. */
  .apm-consent__banner-actions { justify-content: space-between; align-items: stretch; }
  .apm-consent__banner-actions .apm-consent__btn { flex: 1 1 0; white-space: normal; }
}