/* =====================================================================
   Meet Greek Singles — the cookie consent banner and its preferences dialog. One block of markup (<!-- mgs-consent -->
   in prototype/index.html), printed on the homepage, on every standalone page and in the member area of both site parts;
   mgs-consent.js shows it. This file stands alone: the member area does not load mgs-home.css, so every custom property
   has a fallback (the values are those of :root in mgs-home.css). The vendor's stylesheets style bare buttons, headings,
   labels and links in the member area, so the rules below set what they need explicitly.
   ===================================================================== */

.mgs-consent, .mgs-consent *, .mgs-consent *::before, .mgs-consent *::after { box-sizing: border-box; }
.mgs-consent [hidden], .mgs-consent[hidden] { display: none !important; }

/* ---------- the bar: fixed to the bottom of the window, so it never moves the page ---------- */
.mgs-consent .mgs-consent__bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 100000;
  max-height: 50vh; overflow-y: auto; overscroll-behavior: contain;
  margin: 0; padding: 0;
  background: var(--mgs-navy-900, #001a3a); color: #e9eef6;
  border-top: 2px solid var(--mgs-gold-400, #e3b559); box-shadow: 0 -8px 28px rgba(0, 16, 38, .35);
  font: 400 .8125rem/1.45 var(--mgs-sans, "Manrope", "Segoe UI", Roboto, Arial, sans-serif); text-align: left;
}
.mgs-consent .mgs-consent__inner { display: block; max-width: var(--mgs-container, 1440px); margin: 0 auto; padding: 12px 16px 14px; }
.mgs-consent .mgs-consent__title { margin: 0 0 4px; padding: 0; font: 700 1.05rem/1.25 var(--mgs-serif, Georgia, "Times New Roman", serif); letter-spacing: 0; text-transform: none; color: #fff; }
.mgs-consent .mgs-consent__text { margin: 0; padding: 0; font: inherit; color: #d3dbe8; }
.mgs-consent .mgs-consent__link, .mgs-consent .mgs-consent__link:visited { color: var(--mgs-gold-300, #f3c054); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.mgs-consent .mgs-consent__link:hover { color: #fff; }
.mgs-consent .mgs-consent__actions { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }

/* ---------- buttons: Accept All and Reject Non-Essential look exactly alike (rejecting is as easy as accepting) ---------- */
.mgs-consent .mgs-consent__btn {
  display: flex; align-items: center; justify-content: center; width: 100%; min-height: 40px; margin: 0; padding: .55em 1.1em;
  border: 2px solid var(--mgs-gold-400, #e3b559); border-radius: 999px; box-shadow: none; cursor: pointer;
  font: 800 .8rem/1.2 var(--mgs-sans, "Manrope", "Segoe UI", Roboto, Arial, sans-serif); letter-spacing: .03em; text-transform: none; text-align: center; text-decoration: none;
  -webkit-appearance: none; appearance: none;
  transition: background-color .15s, color .15s, border-color .15s;
}
.mgs-consent .mgs-consent__btn--solid { background: var(--mgs-gold-300, #f3c054); color: var(--mgs-navy-800, #002954); }
.mgs-consent .mgs-consent__btn--solid:hover { background: #f9d17a; border-color: #f9dc94; color: var(--mgs-navy-800, #002954); }
.mgs-consent .mgs-consent__btn--ghost { background: transparent; color: #fff; }
.mgs-consent .mgs-consent__btn--ghost:hover { background: rgba(227, 181, 89, .16); color: #fff; }
.mgs-consent .mgs-consent__btn:focus-visible, .mgs-consent .mgs-consent__link:focus-visible, .mgs-consent .mgs-consent__x:focus-visible,
.mgs-consent .mgs-consent__switch input:focus-visible + .mgs-consent__slider { outline: 3px solid #fff; outline-offset: 2px; box-shadow: 0 0 0 5px var(--mgs-blue-700, #013874); }

/* wider windows: the three buttons in one row under the text, from 1200 px next to it */
@media (min-width: 640px) {
  .mgs-consent .mgs-consent__inner { padding: 16px 28px 18px; }
  .mgs-consent .mgs-consent__bar { font-size: .875rem; }
  .mgs-consent .mgs-consent__actions { flex-direction: row; gap: 10px; margin-top: 12px; }
  .mgs-consent .mgs-consent__actions .mgs-consent__btn { flex: 1 1 0; width: auto; min-height: 44px; font-size: .86rem; }
}
@media (min-width: 1200px) {
  /* the bar keeps the header's frame, which is wider than the content since 2026-10-11 (mgs-home.css); where that width
     is not defined (the member area) it stays as it was */
  .mgs-consent .mgs-consent__inner { display: flex; align-items: center; gap: 36px; max-width: var(--mgs-container-wide, var(--mgs-container, 1440px)); }
  .mgs-consent .mgs-consent__copy { flex: 1 1 0; min-width: 0; max-width: 820px; }
  .mgs-consent .mgs-consent__actions { flex: none; margin-top: 0; }
  .mgs-consent .mgs-consent__actions .mgs-consent__btn { flex: none; padding-left: 1.5em; padding-right: 1.5em; }
}

/* ---------- the dialog ---------- */
.mgs-consent .mgs-consent__overlay {
  position: fixed; inset: 0; z-index: 100001; display: flex; align-items: center; justify-content: center; padding: 14px;
  overflow-y: auto; overscroll-behavior: contain; background: rgba(0, 16, 38, .62);
  font: 400 .9375rem/1.5 var(--mgs-sans, "Manrope", "Segoe UI", Roboto, Arial, sans-serif); text-align: left;
}
.mgs-consent .mgs-consent__dialog {
  width: 100%; max-width: 560px; max-height: 100%; margin: auto; overflow-y: auto; padding: 22px 22px 20px;
  background: var(--mgs-cream-50, #fefcf8); color: var(--mgs-ink, #26303f);
  border: 1px solid var(--mgs-line, #e6dcc6); border-top: 4px solid var(--mgs-gold-400, #e3b559); border-radius: 14px; box-shadow: 0 20px 56px rgba(0, 16, 38, .4);
}
.mgs-consent .mgs-consent__dialog:focus { outline: none; }
.mgs-consent .mgs-consent__dhead { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin: 0 0 6px; }
.mgs-consent .mgs-consent__dtitle { margin: 0; padding: 0; font: 700 1.4rem/1.2 var(--mgs-serif, Georgia, "Times New Roman", serif); letter-spacing: 0; text-transform: none; color: var(--mgs-heading, #083068); }
.mgs-consent .mgs-consent__x {
  flex: none; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; margin: -6px -8px 0 0; padding: 0;
  border: 0; border-radius: 50%; background: transparent; box-shadow: none; color: var(--mgs-blue-700, #013874); cursor: pointer; -webkit-appearance: none; appearance: none;
}
.mgs-consent .mgs-consent__x:hover { background: rgba(1, 56, 116, .08); }
.mgs-consent .mgs-consent__x svg { width: 20px; height: 20px; }
.mgs-consent .mgs-consent__dtext { margin: 0 0 12px; padding: 0; font: inherit; color: var(--mgs-ink-soft, #4a5566); }
.mgs-consent .mgs-consent__dtext .mgs-consent__link { color: var(--mgs-blue-700, #013874); }

/* the three categories */
.mgs-consent .mgs-consent__cat { padding: 12px 0; border-top: 1px solid var(--mgs-line, #e6dcc6); }
.mgs-consent .mgs-consent__chead { display: flex; align-items: center; gap: 12px; }
.mgs-consent .mgs-consent__ctitle { flex: 1 1 auto; min-width: 0; margin: 0; padding: 0; font: 800 1rem/1.3 var(--mgs-sans, "Manrope", "Segoe UI", Roboto, Arial, sans-serif); letter-spacing: 0; text-transform: none; color: var(--mgs-heading, #083068); }
.mgs-consent .mgs-consent__state { flex: none; font: 800 .72rem/1.2 var(--mgs-sans, "Manrope", "Segoe UI", Roboto, Arial, sans-serif); letter-spacing: .08em; text-transform: uppercase; color: var(--mgs-gold-text, #8f6420); }
.mgs-consent .mgs-consent__ctext { margin: 4px 0 0; padding: 0; font-size: .875rem; line-height: 1.45; color: var(--mgs-ink-soft, #4a5566); }

/* switch: a real checkbox, drawn as a slider */
.mgs-consent .mgs-consent__switch { position: relative; flex: none; display: inline-block; width: 46px; height: 26px; margin: 0; padding: 0; cursor: pointer; }
.mgs-consent .mgs-consent__switch input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.mgs-consent .mgs-consent__slider { position: absolute; inset: 0; border-radius: 999px; background: #a9b3c1; transition: background-color .15s; pointer-events: none; }
.mgs-consent .mgs-consent__slider::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .3); transition: transform .15s; }
.mgs-consent .mgs-consent__switch input:checked + .mgs-consent__slider { background: var(--mgs-blue-700, #013874); }
.mgs-consent .mgs-consent__switch input:checked + .mgs-consent__slider::after { transform: translateX(20px); }
.mgs-consent .mgs-consent__switch input:disabled { cursor: not-allowed; }
.mgs-consent .mgs-consent__switch input:disabled + .mgs-consent__slider { opacity: .6; }

.mgs-consent .mgs-consent__dactions { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; padding-top: 16px; border-top: 1px solid var(--mgs-line, #e6dcc6); }
.mgs-consent .mgs-consent__dialog .mgs-consent__btn--solid { background: var(--mgs-blue-700, #013874); border-color: var(--mgs-gold-400, #e3b559); color: #fff; }
.mgs-consent .mgs-consent__dialog .mgs-consent__btn--solid:hover { background: var(--mgs-blue-600, #0a4a92); color: #fff; }
.mgs-consent .mgs-consent__dialog .mgs-consent__btn--ghost { color: var(--mgs-blue-700, #013874); }
.mgs-consent .mgs-consent__dialog .mgs-consent__btn--ghost:hover { background: rgba(227, 181, 89, .16); color: var(--mgs-blue-700, #013874); }
.mgs-consent .mgs-consent__dialog .mgs-consent__btn:focus-visible { outline-color: var(--mgs-blue-700, #013874); box-shadow: 0 0 0 5px #fff; }
@media (min-width: 640px) {
  .mgs-consent .mgs-consent__dialog { padding: 28px 30px 24px; }
  .mgs-consent .mgs-consent__dactions { flex-direction: row; }
  .mgs-consent .mgs-consent__dactions .mgs-consent__btn { flex: 1 1 0; width: auto; }
}

/* while the bar is shown the page gets room at its end (the script sets --mgs-consent-h to the bar's height), so its last
   content and controls can be scrolled clear of the bar; the bar itself is fixed and moves nothing */
html.mgs-consent-pad body { padding-bottom: var(--mgs-consent-h, 0px); }
/* the member area does not scroll the page but its .main box (body is overflow: hidden there), so the room goes to the end of that box;
   border-box keeps the box as high as the window, the padding then lies inside it */
html.mgs-consent-pad body.mgs-area { padding-bottom: 0; }
html.mgs-consent-pad body.mgs-area .main { box-sizing: border-box; padding-bottom: var(--mgs-consent-h, 0px); }

@media (prefers-reduced-motion: reduce) {
  .mgs-consent .mgs-consent__btn, .mgs-consent .mgs-consent__slider, .mgs-consent .mgs-consent__slider::after { transition: none; }
}