/* =========================================================
   COOKIE BANNER
========================================================= */

.cookie-banner {
  position:
    fixed;

  right:
    var(--space-lg);

  bottom:
    var(--space-lg);

  z-index:
    var(--z-modal);

  width:
    min(340px, calc(100% - var(--space-xl)));

  padding:
    var(--space-md);

  display:
    grid;

  gap:
    var(--space-md);

  background:
    rgba(255, 255, 255, 0.72);

  backdrop-filter:
    blur(28px);

  -webkit-backdrop-filter:
    blur(28px);

  border:
    1px solid rgba(255, 255, 255, 0.42);

  border-radius:
    24px;

  box-shadow:
    0 12px 40px rgba(15, 17, 58, 0.12);
}


/* =========================================================
   COOKIE CONTENT
========================================================= */

.cookie-banner-content {
  display:
    grid;

  gap:
    var(--space-xs);
}

.cookie-banner-title {
  color:
    var(--text-primary);

  font-size:
    var(--text-sm);

  font-weight:
    var(--weight-semibold);

  line-height:
    1.2;
}

.cookie-banner-text {
  color:
    var(--text-secondary);

  font-size:
    var(--text-sm);

  line-height:
    1.55;
}

.cookie-banner-text a {
  color:
    var(--text-primary);

  text-decoration:
    none;

  border-bottom:
    1px solid currentColor;

  transition:
    opacity var(--transition-fast);
}

.cookie-banner-text a:hover {
  opacity:
    var(--opacity-heavy);
}


/* =========================================================
   COOKIE ACTIONS
========================================================= */

.cookie-banner-actions {
  display:
    flex;

  align-items:
    center;

  justify-content:
    flex-end;

  gap:
    12px;

  flex-wrap:
    wrap;
}


/* =========================================================
   COOKIE BUTTON
========================================================= */

.cookie-button {
  appearance:
    none;

  border:
    0;

  cursor:
    pointer;

  white-space:
    nowrap;

  padding:
    0.72rem 1.1rem;

  border-radius:
    999px;

  font-size:
    var(--text-sm);

  font-weight:
    var(--weight-medium);

  line-height:
    1;

  transition:
    transform var(--transition-fast),
    opacity var(--transition-fast),
    background var(--transition-fast);
}

.cookie-button:hover {
  transform:
    translateY(-1px);
}


/* =========================================================
   PRIMARY
========================================================= */

.cookie-button-primary {
  background:
    var(--dark);

  color:
    var(--white);

  box-shadow:
    0 6px 20px rgba(15, 17, 58, 0.16);
}


/* =========================================================
   SECONDARY
========================================================= */

.cookie-button-secondary {
  background:
    rgba(255, 255, 255, 0.42);

  color:
    var(--text-primary);

  border:
    1px solid rgba(15, 17, 58, 0.08);
}


/* =========================================================
   HIDDEN STATE
========================================================= */

.cookie-banner-hidden {
  display:
    none;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 640px) {

  .cookie-banner {
    right:
      var(--space-md);

    bottom:
      var(--space-md);

    width:
      calc(100% - var(--space-xl));

    padding:
      var(--space-md);
  }

  .cookie-banner-actions {
    justify-content:
      stretch;
  }

  .cookie-button {
    flex:
      1;
  }

}