.cookie-banner {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 120;
  width: min(600px, calc(100vw - 40px));
  display: grid;
  grid-template-columns: minmax(0, 1fr) 190px;
  background: #fff;
  border: 1px solid #d9e0e8;
  border-radius: 8px;
  box-shadow: 0 22px 65px rgba(11, 18, 32, .24);
  overflow: hidden;
}

.cookie-banner[hidden],
.cookie-modal[hidden] { display: none !important; }

.cookie-copy { padding: 24px 18px; }
.cookie-copy strong { display: block; font-size: 22px; letter-spacing: -.03em; }
.cookie-copy p { margin: 7px 0 10px; color: #596273; font-size: 14px; line-height: 1.5; }
.cookie-copy a { color: #0758ae; font-size: 13px; font-weight: 750; text-decoration: underline; }

.cookie-actions {
  display: grid;
  gap: 9px;
  padding: 18px;
  border-left: 1px solid #e2e7ed;
  align-content: center;
}

.cookie-btn {
  min-height: 44px;
  border: 1px solid #173f37;
  border-radius: 6px;
  padding: 10px 13px;
  background: #fff;
  color: #173f37;
  font: inherit;
  font-size: 12px;
  font-weight: 850;
  letter-spacing: .06em;
  text-transform: uppercase;
  cursor: pointer;
}

.cookie-btn.primary { background: #173f37; color: #fff; }
.cookie-btn:hover { transform: translateY(-1px); }
.cookie-btn:focus-visible { outline: 3px solid rgba(9, 105, 218, .3); outline-offset: 2px; }

.cookie-modal {
  position: fixed;
  inset: 0;
  z-index: 130;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(7, 14, 25, .58);
  backdrop-filter: blur(8px);
}

.cookie-modal-card {
  position: relative;
  width: min(560px, 100%);
  max-height: calc(100dvh - 40px);
  overflow: auto;
  padding: 30px;
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 30px 90px rgba(0, 0, 0, .3);
}

.cookie-modal-card h2 { margin: 6px 0 12px; font-size: 38px; }
.cookie-modal-card > p { color: #596273; }
.cookie-eyebrow { margin: 0; color: #0758ae !important; font-size: 11px; font-weight: 850; letter-spacing: .14em; text-transform: uppercase; }
.cookie-close { position: absolute; top: 14px; right: 15px; width: 38px; height: 38px; border: 1px solid #dfe5ec; border-radius: 50%; background: #fff; font-size: 24px; cursor: pointer; }
.cookie-option { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 16px 0; border-top: 1px solid #e3e8ee; }
.cookie-option span { display: grid; gap: 3px; }
.cookie-option small { color: #687282; line-height: 1.35; }
.cookie-option input { width: 22px; height: 22px; flex: 0 0 auto; accent-color: #173f37; }
.cookie-modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; }

@media (max-width: 650px) {
  .cookie-banner {
    right: 10px;
    bottom: 10px;
    width: calc(100vw - 20px);
    grid-template-columns: 1fr;
    border-radius: 14px;
  }
  .cookie-copy { padding: 18px 18px 10px; }
  .cookie-copy strong { font-size: 20px; }
  .cookie-actions { grid-template-columns: 1fr 1fr; padding: 10px 18px 18px; border-left: 0; }
  .cookie-actions .primary { grid-column: 1 / -1; grid-row: 1; }
  .cookie-actions .secondary { font-size: 10px; letter-spacing: .03em; }
  .cookie-modal { padding: 10px; }
  .cookie-modal-card { max-height: calc(100dvh - 20px); padding: 25px 18px 20px; border-radius: 20px; }
  .cookie-modal-card h2 { font-size: 31px; padding-right: 35px; }
  .cookie-modal-actions { display: grid; }
}

@media (max-height: 560px) {
  .cookie-banner { bottom: 8px; }
  .cookie-copy { padding-block: 14px 8px; }
  .cookie-copy p { margin-block: 4px 7px; }
  .cookie-actions { padding-block: 10px; }
}
