/* Byte-identical to public/css/cookie-consent.css in the Next.js build — keep the two in
   sync. References to app/(themed)/layout.tsx below mean, for this site,
   header.php. */
/* ---------------------------------------------------------------------------
   Consent UI: the cookie banner, its preferences panel, and the privacy /
   newsletter consent checkboxes used by every form.

   Deliberately self-contained: it carries its own colours, spacing and reset so
   the identical markup renders the same on the ~56 Builton-theme pages, on the
   five off-theme pages in app/(standalone) which load none of the theme, and in
   the plain-PHP port under /php. Nothing here depends on Bootstrap or style.css.

   The palette mirrors custom.css's :root variables rather than referencing them,
   for the same reason.

   Loaded AFTER custom.css in both root layouts, so the two floating-button
   overrides at the bottom of this file win without needing !important.
   --------------------------------------------------------------------------- */

.bd-cc {
  /* Local copies of the brand palette — see the note above. */
  --bd-cc-black: #232323;
  --bd-cc-panel: #2c2c2c;
  --bd-cc-white: #f7f7f7;
  --bd-cc-light-grey: #ebebeb;
  --bd-cc-grey: #b7b7b7;
  --bd-cc-green: #dbe71b;
  --bd-cc-border: rgba(247, 247, 247, 0.16);

  /* Above .wp-btn, which custom.css pins at 12345678. */
  --bd-cc-layer: 999999999;
}

/*
  `.bd-cc-overlay` below sets `display: flex`, which would otherwise beat the
  user-agent's `[hidden] { display: none }` and leave the panel permanently on
  screen. The React build unmounts instead of hiding, but the PHP port under
  /php toggles `hidden`, and both share this file.
*/
.bd-cc [hidden] {
  display: none !important;
}

/* ------------------------------------------------------------------ banner */

.bd-cc-banner {
  position: fixed;
  inset: auto 0 0 0;
  z-index: var(--bd-cc-layer);
  background: var(--bd-cc-black);
  border-top: 1px solid var(--bd-cc-border);
  box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.35);
  padding: 22px 20px calc(22px + env(safe-area-inset-bottom, 0px));
  animation: bd-cc-rise 0.35s ease-out both;
}

@keyframes bd-cc-rise {
  from {
    transform: translateY(100%);
  }
  to {
    transform: translateY(0);
  }
}

/* Visitors who ask for reduced motion get the banner without the slide. */
@media (prefers-reduced-motion: reduce) {
  .bd-cc-banner {
    animation: none;
  }
}

.bd-cc-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 28px;
}

.bd-cc-copy {
  flex: 1 1 auto;
  min-width: 0;
}

.bd-cc-title {
  margin: 0 0 6px;
  font-size: 15px;
  line-height: 1.3;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--bd-cc-white);
}

.bd-cc-text {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  font-weight: 300;
  letter-spacing: 0.5px;
  color: var(--bd-cc-light-grey);
  opacity: 0.85;
}

.bd-cc-text a,
.bd-cc-desc a {
  color: var(--bd-cc-green);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.bd-cc-text a:hover,
.bd-cc-desc a:hover {
  color: var(--bd-cc-green);
  opacity: 0.75;
}

.bd-cc-actions {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 10px;
}

/* ----------------------------------------------------------------- buttons */

.bd-cc-btn {
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  line-height: 1;
  padding: 14px 22px;
  border: 1px solid transparent;
  border-radius: 0;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 0.25s ease, color 0.25s ease,
    border-color 0.25s ease;
}

/*
  "Accept all" and "Reject all" are given the same size and prominence on
  purpose. Under GDPR, withdrawing or refusing consent must be no harder than
  giving it, so styling reject as a faint text link would make the banner
  non-compliant however good it looked.
*/
.bd-cc-btn-accept {
  background: var(--bd-cc-green);
  color: var(--bd-cc-black);
}

.bd-cc-btn-accept:hover {
  background: var(--bd-cc-white);
}

.bd-cc-btn-reject {
  background: transparent;
  color: var(--bd-cc-white);
  border-color: var(--bd-cc-grey);
}

.bd-cc-btn-reject:hover {
  background: var(--bd-cc-white);
  color: var(--bd-cc-black);
  border-color: var(--bd-cc-white);
}

.bd-cc-btn-ghost {
  background: transparent;
  color: var(--bd-cc-light-grey);
  border-color: transparent;
  text-decoration: underline;
  text-underline-offset: 3px;
  padding-left: 8px;
  padding-right: 8px;
}

.bd-cc-btn-ghost:hover {
  color: var(--bd-cc-green);
}

.bd-cc-btn:focus-visible,
.bd-cc-toggle input:focus-visible + .bd-cc-track,
.bd-cc-close:focus-visible {
  outline: 2px solid var(--bd-cc-green);
  outline-offset: 2px;
}

/* ------------------------------------------------------- preferences panel */

.bd-cc-overlay {
  position: fixed;
  inset: 0;
  z-index: calc(var(--bd-cc-layer) + 1);
  background: rgba(0, 0, 0, 0.65);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  overflow-y: auto;
  animation: bd-cc-fade 0.2s ease-out both;
}

@keyframes bd-cc-fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.bd-cc-panel {
  position: relative;
  width: 100%;
  max-width: 620px;
  max-height: 88vh;
  overflow-y: auto;
  background: var(--bd-cc-panel);
  border: 1px solid var(--bd-cc-border);
  padding: 36px 32px 28px;
  margin: auto;
}

.bd-cc-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  line-height: 1;
  background: transparent;
  border: 0;
  color: var(--bd-cc-grey);
  cursor: pointer;
}

.bd-cc-close:hover {
  color: var(--bd-cc-green);
}

.bd-cc-panel-title {
  margin: 0 0 10px;
  font-size: 22px;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--bd-cc-white);
}

.bd-cc-panel-intro {
  margin: 0 0 26px;
  font-size: 14px;
  line-height: 1.65;
  font-weight: 300;
  color: var(--bd-cc-light-grey);
  opacity: 0.8;
}

.bd-cc-group {
  border-top: 1px solid var(--bd-cc-border);
  padding: 20px 0;
}

.bd-cc-group-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 8px;
}

.bd-cc-group-name {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--bd-cc-white);
}

.bd-cc-desc {
  margin: 0;
  font-size: 13px;
  line-height: 1.6;
  font-weight: 300;
  color: var(--bd-cc-light-grey);
  opacity: 0.75;
}

.bd-cc-always {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--bd-cc-green);
  white-space: nowrap;
}

/* -------------------------------------------------------------- toggle ---- */

.bd-cc-toggle {
  position: relative;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
}

/*
  The checkbox stays in the accessibility tree — clipped, not display:none — so
  it keeps its role, label and keyboard behaviour and the visible track is
  driven entirely by :checked.
*/
.bd-cc-toggle input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  padding: 0;
  border: 0;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}

.bd-cc-track {
  display: block;
  width: 46px;
  height: 24px;
  border-radius: 24px;
  background: #4a4a4a;
  transition: background-color 0.25s ease;
}

.bd-cc-track::after {
  content: "";
  display: block;
  width: 18px;
  height: 18px;
  margin: 3px;
  border-radius: 50%;
  background: var(--bd-cc-white);
  transition: transform 0.25s ease;
}

.bd-cc-toggle input:checked + .bd-cc-track {
  background: var(--bd-cc-green);
}

.bd-cc-toggle input:checked + .bd-cc-track::after {
  transform: translateX(22px);
  background: var(--bd-cc-black);
}

.bd-cc-panel-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  border-top: 1px solid var(--bd-cc-border);
  padding-top: 22px;
}

.bd-cc-panel-actions .bd-cc-btn {
  flex: 1 1 auto;
  text-align: center;
}

/* ------------------------------------------------------------- responsive */

@media (max-width: 991px) {
  .bd-cc-inner {
    flex-direction: column;
    align-items: stretch;
    gap: 18px;
  }

  .bd-cc-actions {
    flex-wrap: wrap;
  }

  .bd-cc-actions .bd-cc-btn {
    flex: 1 1 150px;
    text-align: center;
  }
}

@media (max-width: 575px) {
  .bd-cc-banner {
    padding: 18px 16px calc(18px + env(safe-area-inset-bottom, 0px));
  }

  .bd-cc-title {
    font-size: 14px;
  }

  .bd-cc-text {
    font-size: 13px;
  }

  .bd-cc-actions .bd-cc-btn {
    flex: 1 1 100%;
  }

  .bd-cc-btn-ghost {
    order: 3;
  }

  .bd-cc-panel {
    padding: 30px 20px 22px;
  }

  .bd-cc-panel-actions .bd-cc-btn {
    flex: 1 1 100%;
  }
}

/* ------------------------------------------------- form consent checkboxes */

/*
  Used by <PrivacyConsentField> and <NewsletterConsentField>. It lives in this
  file rather than a form stylesheet because both root layouts load this one,
  and the callback wizard renders on the five standalone pages which load no
  theme CSS at all.

  Colours are inherited (`currentColor`) rather than fixed, because the same
  markup appears on the light homepage, the dark /contact section and the
  white-on-black footer. Only the accent stays constant.

  Inside the theme's `#contact` sections, custom.css's
  `#contact input[type="checkbox"]` beats these rules on ID specificity, so the
  existing green checkbox there is deliberately left alone.
*/
.bd-consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 16px;
  text-align: left;
}

.bd-consent input[type="checkbox"] {
  flex: 0 0 auto;
  appearance: none;
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  margin: 2px 0 0;
  border: 2px solid currentColor;
  border-radius: 4px;
  opacity: 0.6;
  outline: none;
  cursor: pointer;
  transition: background-color 0.25s ease, border-color 0.25s ease,
    opacity 0.25s ease;
}

.bd-consent input[type="checkbox"]:checked {
  background-color: #dbe71b;
  border-color: #dbe71b;
  opacity: 1;
}

.bd-consent input[type="checkbox"]:focus-visible {
  outline: 2px solid #dbe71b;
  outline-offset: 2px;
}

/*
  `#contact` gives the checkbox 20px but no top offset, so the box sits centred
  against a two-line label. This nudges it onto the first line in both contexts.
*/
#contact .bd-consent input[type="checkbox"] {
  margin-top: 2px;
}

.bd-consent label {
  margin: 0;
  font-size: 13px;
  line-height: 1.6;
  font-weight: 300;
  letter-spacing: 0.5px;
  cursor: pointer;
}

.bd-consent a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.bd-consent a:hover {
  color: #dbe71b;
}

.bd-consent-required {
  color: #dbe71b;
  font-weight: 600;
}

/*
  The callback wizard's box. It lives here rather than in legal-ui.css because
  the wizard renders on /height-residence and /city-center-limassol, which load
  no theme CSS — this file is the only stylesheet they and the themed pages
  have in common. The explicit margin is deliberate: the surrounding form uses
  the page's own Tailwind build for spacing, and we do not want to depend on a
  utility class existing in it.
*/
.callback-consent {
  margin-top: 24px;
  margin-bottom: 0;
}

/* --------------------------------------------------- floating-button shift */

/*
  The WhatsApp bubble and the scroll-to-top arrow are `position: fixed` at the
  bottom-right and would sit under the banner. While it is on screen the
  component publishes its measured height as --bd-cc-height on <html> and adds
  .bd-cc-open to <body>, so both controls lift clear of it at every breakpoint
  instead of relying on a guessed offset.
*/
body.bd-cc-open .wp-btn {
  bottom: calc(22px + var(--bd-cc-height, 0px));
  transition: bottom 0.25s ease;
}

body.bd-cc-open .scroll-to-top {
  bottom: calc(80px + var(--bd-cc-height, 0px));
  transition: bottom 0.25s ease;
}