/* =========================================================
   ASTRIC COOKIE CONSENT
========================================================= */

:root {
  --astric-cookie-bg: #0d0d0b;
  --astric-cookie-bg-soft: #12120f;
  --astric-cookie-border: rgba(238, 231, 216, 0.12);
  --astric-cookie-border-hover: rgba(238, 231, 216, 0.2);
  --astric-cookie-text: #eee7d8;
  --astric-cookie-muted: #918b80;
  --astric-cookie-soft: #c9c2b6;
  --astric-cookie-accent: #eee7d8;
}


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

.astric-cookie-banner {
  position: fixed;
  left: 24px;
  right: 24px;
  bottom: 24px;

  z-index: 999999;

  max-width: 1180px;
  margin: 0 auto;

  background:
    linear-gradient(
      145deg,
      rgba(22, 22, 18, 0.98),
      rgba(10, 10, 8, 0.98)
    );

  border: 1px solid var(--astric-cookie-border);

  border-radius: 22px;

  box-shadow:
    0 30px 100px rgba(0, 0, 0, .55),
    0 8px 30px rgba(0, 0, 0, .3);

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

  animation: astricCookieIn .45s cubic-bezier(.22,1,.36,1);
}


@keyframes astricCookieIn {

  from {
    opacity: 0;
    transform: translateY(30px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }

}


.astric-cookie-inner {
  display: flex;

  align-items: center;
  justify-content: space-between;

  gap: 35px;

  padding: 24px 26px;
}


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

.astric-cookie-content {
  display: flex;
  align-items: flex-start;

  gap: 17px;

  min-width: 0;
}


.astric-cookie-icon {

  width: 42px;
  height: 42px;

  flex: 0 0 42px;

  display: grid;
  place-items: center;

  border: 1px solid var(--astric-cookie-border);

  border-radius: 12px;

  color: var(--astric-cookie-text);

  background: rgba(255,255,255,.025);
}


.astric-cookie-icon svg {
  width: 21px;
  height: 21px;
}


.astric-cookie-eyebrow {

  margin-bottom: 6px;

  font-size: 10px;
  font-weight: 700;

  letter-spacing: .13em;
  text-transform: uppercase;

  color: var(--astric-cookie-muted);
}


.astric-cookie-content h2,
.astric-cookie-dialog h2 {

  margin: 0;

  font-family: "Manrope", sans-serif;

  font-size: 18px;
  line-height: 1.2;

  letter-spacing: -.025em;

  color: var(--astric-cookie-text);
}


.astric-cookie-content p {

  max-width: 680px;

  margin: 8px 0 7px;

  font-size: 13px;
  line-height: 1.6;

  color: var(--astric-cookie-muted);
}


.astric-cookie-policy-link {

  font-size: 12px;
  color: var(--astric-cookie-soft);

  text-decoration: underline;
  text-underline-offset: 3px;
}


/* =========================================================
   BUTTONS
========================================================= */

.astric-cookie-actions {

  display: flex;
  align-items: center;

  gap: 9px;

  flex-shrink: 0;
}


.astric-cookie-btn {

  height: 42px;

  padding: 0 17px;

  border-radius: 11px;

  border: 1px solid var(--astric-cookie-border);

  background: transparent;

  color: var(--astric-cookie-text);

  font-family: inherit;
  font-size: 12px;
  font-weight: 600;

  cursor: pointer;

  transition:
    transform .2s ease,
    background .2s ease,
    border-color .2s ease;
}


.astric-cookie-btn:hover {

  transform: translateY(-1px);

  border-color: var(--astric-cookie-border-hover);

}


.astric-cookie-btn-primary {

  color: #0a0a08;

  background: var(--astric-cookie-accent);

  border-color: var(--astric-cookie-accent);
}


.astric-cookie-btn-primary:hover {

  background: #fffaf0;

}


.astric-cookie-btn-secondary {

  background: rgba(255,255,255,.025);

}


/* =========================================================
   MODAL
========================================================= */

.astric-cookie-modal {

  position: fixed;
  inset: 0;

  z-index: 1000000;

  display: grid;
  place-items: center;

  padding: 24px;
}


.astric-cookie-backdrop {

  position: absolute;
  inset: 0;

  background: rgba(0,0,0,.72);

  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}


.astric-cookie-dialog {

  position: relative;

  width: min(620px, 100%);

  max-height: min(760px, calc(100vh - 48px));

  overflow-y: auto;

  border: 1px solid var(--astric-cookie-border);

  border-radius: 24px;

  background:
    linear-gradient(
      145deg,
      #151512,
      #0b0b09
    );

  box-shadow:
    0 50px 140px rgba(0,0,0,.7);

  animation: astricCookieModalIn .3s ease;
}


@keyframes astricCookieModalIn {

  from {
    opacity: 0;
    transform: scale(.97) translateY(10px);
  }

  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }

}


.astric-cookie-dialog-header {

  display: flex;

  justify-content: space-between;

  gap: 20px;

  padding: 27px 28px 20px;

  border-bottom: 1px solid var(--astric-cookie-border);
}


.astric-cookie-dialog-header p {

  max-width: 520px;

  margin: 9px 0 0;

  font-size: 13px;
  line-height: 1.65;

  color: var(--astric-cookie-muted);
}


.astric-cookie-close {

  width: 35px;
  height: 35px;

  flex-shrink: 0;

  border: 1px solid var(--astric-cookie-border);

  border-radius: 10px;

  background: rgba(255,255,255,.025);

  color: var(--astric-cookie-soft);

  font-size: 22px;
  line-height: 1;

  cursor: pointer;
}


/* =========================================================
   OPTIONS
========================================================= */

.astric-cookie-options {
  padding: 5px 28px;
}


.astric-cookie-option {

  display: flex;

  align-items: center;
  justify-content: space-between;

  gap: 20px;

  padding: 20px 0;

  border-bottom: 1px solid var(--astric-cookie-border);
}


.astric-cookie-option:last-child {
  border-bottom: 0;
}


.astric-cookie-option-title {

  display: flex;
  align-items: center;

  gap: 8px;

  font-size: 14px;
  font-weight: 600;

  color: var(--astric-cookie-text);
}


.astric-cookie-option-info p {

  max-width: 470px;

  margin: 6px 0 0;

  font-size: 12px;
  line-height: 1.55;

  color: var(--astric-cookie-muted);
}


.astric-cookie-required {

  padding: 3px 7px;

  border-radius: 100px;

  font-size: 9px;
  font-weight: 700;

  letter-spacing: .06em;
  text-transform: uppercase;

  color: var(--astric-cookie-muted);

  background: rgba(255,255,255,.05);
}


/* =========================================================
   SWITCH
========================================================= */

.astric-cookie-switch {

  position: relative;

  width: 44px;
  height: 25px;

  flex: 0 0 44px;

  cursor: pointer;
}


.astric-cookie-switch input {

  position: absolute;

  opacity: 0;

  pointer-events: none;
}


.astric-cookie-switch span {

  position: absolute;
  inset: 0;

  border-radius: 100px;

  background: #252521;

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

  transition: .2s ease;
}


.astric-cookie-switch span::after {

  content: "";

  position: absolute;

  width: 17px;
  height: 17px;

  top: 3px;
  left: 3px;

  border-radius: 50%;

  background: #858078;

  transition: .2s ease;
}


.astric-cookie-switch input:checked + span {

  background: #eee7d8;

}


.astric-cookie-switch input:checked + span::after {

  left: 22px;

  background: #080806;

}


.astric-cookie-switch input:disabled + span {

  opacity: .55;

  cursor: not-allowed;
}


/* =========================================================
   FOOTER
========================================================= */

.astric-cookie-dialog-footer {

  display: flex;

  align-items: center;
  justify-content: space-between;

  gap: 15px;

  padding: 20px 28px;

  border-top: 1px solid var(--astric-cookie-border);
}


.astric-cookie-version {

  font-size: 10px;

  color: var(--astric-cookie-muted);

  letter-spacing: .04em;
}


/* =========================================================
   FLOATING SETTINGS
========================================================= */

.astric-cookie-settings {

  position: fixed;

  left: 20px;
  bottom: 20px;

  z-index: 999998;

  width: 43px;
  height: 43px;

  display: grid;
  place-items: center;

  border: 1px solid var(--astric-cookie-border);

  border-radius: 50%;

  color: var(--astric-cookie-soft);

  background: rgba(13,13,11,.9);

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

  box-shadow: 0 10px 30px rgba(0,0,0,.35);

  cursor: pointer;

  transition:
    transform .2s ease,
    border-color .2s ease;
}


.astric-cookie-settings:hover {

  transform: translateY(-2px);

  border-color: var(--astric-cookie-border-hover);

}


.astric-cookie-settings svg {

  width: 19px;
  height: 19px;

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 760px) {

  .astric-cookie-banner {

    left: 12px;
    right: 12px;
    bottom: 12px;

    border-radius: 18px;

  }


  .astric-cookie-inner {

    display: block;

    padding: 19px;

  }


  .astric-cookie-content {

    gap: 12px;

  }


  .astric-cookie-icon {

    display: none;

  }


  .astric-cookie-content h2 {

    font-size: 16px;

  }


  .astric-cookie-content p {

    font-size: 12px;

  }


  .astric-cookie-actions {

    display: grid;

    grid-template-columns: 1fr 1fr;

    margin-top: 17px;

  }


  .astric-cookie-btn-primary {

    grid-column: 1 / -1;

    order: -1;

  }


  .astric-cookie-dialog {

    max-height: calc(100vh - 24px);

    border-radius: 19px;

  }


  .astric-cookie-dialog-header {

    padding: 21px;

  }


  .astric-cookie-options {

    padding: 2px 21px;

  }


  .astric-cookie-dialog-footer {

    padding: 17px 21px;

  }


  .astric-cookie-version {

    display: none;

  }

}


@media (prefers-reduced-motion: reduce) {

  .astric-cookie-banner,
  .astric-cookie-dialog {

    animation: none;

  }

  .astric-cookie-btn,
  .astric-cookie-settings {

    transition: none;

  }

}