/* Cookie banner, settings panel and the reopen button. Same language as the rest
   of the page: ink panels, the brand red, 2px corners, Helvetica. Tokens are
   repeated as literals rather than pulled from :root so this file stays usable
   on its own if the consent setup is lifted into another build. */

.cc-bar {
  position: fixed;
  left: 20px; right: 20px; bottom: 20px;
  z-index: 300;
  max-width: 520px;
  background: #15181b;
  color: #c3c8cc;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 3px;
  box-shadow: 0 26px 60px -20px rgba(0, 0, 0, .6);
  padding: 22px 24px;
  font-size: 15px;
  line-height: 1.6;
}
.cc-bar strong { color: #fff; }
.cc-bar a { color: #ff9ea2; text-decoration: underline; }
.cc-bar a:hover { color: #fff; }

.cc-actions { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 16px; }
.cc-btn {
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  border-radius: 2px;
  padding: 11px 18px;
  cursor: pointer;
  border: 1px solid transparent;
  white-space: nowrap;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.cc-btn--solid { background: #ed2127; color: #fff; }
.cc-btn--solid:hover { background: #b21c22; }
.cc-btn--ghost { background: transparent; color: #dfe3e6; border-color: rgba(255, 255, 255, .3); }
.cc-btn--ghost:hover { border-color: #fff; color: #fff; }

.cc-box {
  position: fixed;
  inset: 0;
  z-index: 320;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(10, 12, 14, .72);
  padding: 20px;
}
.cc-card {
  background: #fff;
  color: #15181b;
  border-radius: 3px;
  max-width: 540px;
  width: 100%;
  padding: 32px 32px 26px;
  position: relative;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 30px 70px -24px rgba(0, 0, 0, .5);
}
.cc-close {
  position: absolute;
  top: 10px; right: 14px;
  background: none;
  border: 0;
  font-size: 30px;
  line-height: 1;
  cursor: pointer;
  color: #8a9095;
}
.cc-close:hover { color: #15181b; }
.cc-card h2 {
  margin: 0 0 8px;
  font-size: 26px;
  line-height: 1.1;
  letter-spacing: -.02em;
  font-weight: 700;
}
.cc-lead { margin: 0 0 14px; font-size: 15px; line-height: 1.6; color: #5a5f63; }

.cc-opt {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding: 15px 0;
  border-top: 1px solid #e6e6e3;
  font-size: 15px;
  line-height: 1.55;
}
.cc-opt span { color: #5a5f63; }
.cc-opt b { color: #15181b; }
.cc-opt input {
  width: 21px; height: 21px;
  flex: none;
  margin-top: 2px;
  accent-color: #ed2127;
  cursor: pointer;
}
.cc-opt--fixed input { cursor: not-allowed; opacity: .55; }

.cc-actions--box { margin-top: 22px; }
.cc-actions--box .cc-btn--ghost { color: #5a5f63; border-color: #cfcfcb; }
.cc-actions--box .cc-btn--ghost:hover { border-color: #15181b; color: #15181b; }

/* Persistent way back into the settings once the bar is gone. Bottom left, clear
   of the page's own CTAs. A circle that widens to show its label on hover and on
   keyboard focus. */
.cc-fab {
  position: fixed;
  left: 16px; bottom: 16px;
  z-index: 290;
  height: 46px; width: 46px;
  padding: 0;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .18);
  background: #15181b;
  color: #dfe3e6;
  display: inline-flex;
  align-items: center;
  gap: 0;
  overflow: hidden;
  cursor: pointer;
  box-shadow: 0 12px 28px -12px rgba(0, 0, 0, .6);
  opacity: .85;
  transition: width .2s ease, opacity .15s ease, background .15s ease;
}
.cc-fab svg { width: 22px; height: 22px; flex: none; margin: 0 11px; }
.cc-fab__label {
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
  opacity: 0;
  transition: opacity .15s ease;
  padding-right: 0;
}
.cc-fab:hover, .cc-fab:focus-visible {
  width: 150px;
  opacity: 1;
  background: #ed2127;
  color: #fff;
  outline: none;
}
.cc-fab:hover .cc-fab__label, .cc-fab:focus-visible .cc-fab__label { opacity: 1; padding-right: 16px; }
/* A 45% red spread shadow composited to about 1.9:1 against the white page,
   so the focused state was barely distinguishable from the unfocused one. This
   is the same solid ring every other control on the site uses. */
.cc-fab:focus-visible { outline: 2px solid #15181b; outline-offset: 3px; box-shadow: none; }

@media (max-width: 640px) {
  .cc-bar { left: 12px; right: 12px; bottom: 12px; max-width: none; padding: 18px 18px 16px; }
  .cc-actions .cc-btn { flex: 1 1 auto; }
  .cc-card { padding: 26px 20px 22px; }
  .cc-card h2 { font-size: 23px; }

  /* No hover on a phone, so it stays a plain circle. */
  .cc-fab { left: 12px; bottom: 12px; height: 42px; width: 42px; }
  .cc-fab svg { width: 20px; height: 20px; margin: 0 10px; }
  .cc-fab:hover { width: 42px; background: #15181b; }
  .cc-fab:hover .cc-fab__label { opacity: 0; padding-right: 0; }
}

@media (prefers-reduced-motion: reduce) { .cc-fab, .cc-btn { transition: none; } }

/* ---- short screens ------------------------------------------------------ */

/* At 274px the bar covered the hero CTA outright on 640 and 667 tall phones:
   the visitor saw the headline, half a sentence, then a wall of cookie copy,
   with the button the page is built around hidden until they answered. Most of
   that height was five lines of copy and two rows of buttons.

   Tighter padding, smaller copy and one row of buttons brings it to about
   145px, which clears the hero CTA at every phone size measured. The header's
   own book and call buttons stay reachable throughout regardless. */
@media (max-height: 860px) {
  .cc-bar {
    left: 12px; right: 12px; bottom: 12px;
    padding: 14px 16px;
    font-size: 13.5px;
    line-height: 1.45;
  }
  .cc-actions {
    /* Wrap stays ALLOWED. Forcing nowrap here is what turned the previous
       problem into a worse one: the labels stopped breaking and started
       running out of their boxes into the neighbouring button instead, so
       "Tikai nepieciesamas" and "Iestatijumi" rendered on top of each other.
       A taller bar is recoverable; two illegible consent controls are not. */
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 12px;
  }
  .cc-actions .cc-btn {
    /* Sized to content, not forced equal. flex:1 1 0 gave every button the
       same width regardless of its label, so the longest one overflowed while
       the shortest sat half empty. At their natural widths the three labels
       total about 285px inside the 292px a 360px screen offers. */
    flex: 0 1 auto;
    min-width: 0;
    padding: 10px 4px;
    /* 11.5px, not 12. At their natural widths the three Latvian labels needed
       293px inside the 292px a 360px screen offers, so the row wrapped to two
       and the taller bar covered the hero CTA again. Russian is longer still.
       This buys about 20px of slack in both languages. */
    font-size: 11.5px;
    white-space: nowrap;
    letter-spacing: -.01em;
  }
}

/* 42x42 was 2px under the tap-target minimum every other control was raised
   to. */
.cc-fab { min-width: 44px; min-height: 44px; }

/* Russian runs a line longer than Latvian, which put the bar at 197px against
   Latvian's 178 and left it covering the hero CTA by 10px on a 640 tall phone.
   The very shortest screens get a tighter body so all three languages clear
   it; the buttons already fit on one line at this size. */
@media (max-height: 700px) {
  .cc-bar { font-size: 12.5px; line-height: 1.38; padding: 12px 14px; }
  .cc-actions { margin-top: 10px; }
}