/* CaseKing — cookie consent banner, standalone.
   The same rules as section 9b of ck-system.css, for pages that do not load
   ck-system.css (blog.html, iphone-18.html). Without them the legacy rule in
   styles.css paints white text on the light surface and the copy is
   unreadable. Every token has a hex fallback so this file works on its own.
   Keep in step with ck-system.css 9b. */

#cookie-consent-banner.cookie-banner {
  background: var(--k-pearl, #FBFAF7) !important;
  border: 1px solid var(--k-line, rgba(18, 62, 68, .17)) !important;
  border-left: 3px solid var(--k-gold, #86692F) !important;
  border-radius: var(--k-r, 14px) !important;
  box-shadow: var(--k-sh-3, 0 30px 70px rgba(11, 43, 48, .16)) !important;
}
#cookie-consent-banner .cookie-banner-content,
#cookie-consent-banner .cookie-banner-content p { color: var(--k-ink-2, #5A615F) !important; }
#cookie-consent-banner .cookie-banner-content a { color: var(--k-gold, #86692F) !important; }

/* Accept and reject are peers. Same box, same type, same weight; only the fill
   differs. A reject button demoted to a grey link is the pattern that makes a
   consent choice not a choice, so it is not used here. Both are also 44px
   tall, which is the tap floor on the one screen where this is a real tap. */
.cookie-banner-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
}
.cookie-banner-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 20px;
  border: 0;
  border-radius: var(--k-r-sm, 9px);
  font-family: var(--k-font, 'Inter', sans-serif);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
  white-space: nowrap;
  cursor: pointer;
  transition: filter .18s ease, translate .18s ease, box-shadow .18s ease;
}
.cookie-banner-btn-accept {
  background: linear-gradient(180deg, var(--k-gold-3, #DCC596), var(--k-gold-2, #C8A86E));
  color: #0B2B30;
  box-shadow: 0 8px 20px rgba(134, 105, 47, .22);
}
.cookie-banner-btn-reject {
  background: #0B2B30;
  color: #F6F4EF;
  box-shadow: 0 8px 20px rgba(11, 43, 48, .22);
}
.cookie-banner-btn:hover { filter: brightness(1.05); translate: 0 -1px; }
.cookie-banner-btn:active { translate: 0 0; filter: brightness(.98); }
.cookie-banner-btn:focus-visible { outline: 2px solid var(--k-gold, #86692F); outline-offset: 2px; }

/* Phones: the copy stacks above a full-width row, so the two buttons split it
   evenly rather than each claiming the whole line. flex-basis 0 is what
   actually sizes them - styles.css already forces width:100% on this button
   inside the same breakpoint, and only the basis outranks that. */
@media (max-width: 768px) {
  .cookie-banner-btn { flex: 1 1 0; }
}

/* Less in the way (2026-11-07): a slim bar flush with the bottom edge that
   never reaches the first screen's search, device picker or hero button.
   Copy is two short lines; accept and reject stay equal peers. */
#cookie-consent-banner.cookie-banner {
  bottom: 12px !important;
  width: min(760px, calc(100% - 24px)) !important;
  max-width: none !important;
  padding: 10px 12px 10px 16px !important;
}
#cookie-consent-banner .cookie-banner-content { gap: 14px !important; }
#cookie-consent-banner .cookie-banner-text {
  margin: 0;
  font-size: 13px;
  line-height: 1.4;
  text-align: left;
}
#cookie-consent-banner .cookie-banner-text a { font-weight: 600; text-decoration: underline; white-space: nowrap; }
#cookie-consent-banner .cookie-banner-btn { min-height: 40px; padding: 0 16px; }
@media (max-width: 768px) {
  #cookie-consent-banner.cookie-banner {
    bottom: 0 !important;
    width: 100% !important;
    border-radius: 14px 14px 0 0 !important;
    border-left: 1px solid var(--k-line, rgba(18, 62, 68, .17)) !important;
    border-top: 3px solid var(--k-gold, #86692F) !important;
    padding: 10px 12px max(10px, env(safe-area-inset-bottom)) !important;
  }
  #cookie-consent-banner .cookie-banner-content { flex-direction: column; align-items: stretch; gap: 8px !important; }
  #cookie-consent-banner .cookie-banner-text { font-size: 12.5px; }
  #cookie-consent-banner .cookie-banner-actions { gap: 8px; }
  #cookie-consent-banner .cookie-banner-btn { min-height: 40px; width: auto !important; }
}