.acc-root,
.acc-root * {
  box-sizing: border-box;
}

.acc-root {
  position: relative;
  z-index: 9999999;
  font-family: var(--acc-font);
  color: var(--acc-text);
}

.acc-root[hidden],
.acc-banner[hidden],
.acc-revisit[hidden] {
  display: none !important;
}

.acc-banner {
  position: fixed;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--acc-gap);
  padding: var(--acc-padding-y) var(--acc-padding-x);
  background: var(--acc-bg);
  border: var(--acc-border-width) solid var(--acc-border);
  border-radius: var(--acc-radius);
  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.24);
  color: var(--acc-text);
  z-index: 2;
}

.acc-layout-bar .acc-banner {
  left: 0;
  width: 100%;
}

.acc-layout-bar.acc-position-top .acc-banner { top: 0; }
.acc-layout-bar .acc-banner,
.acc-layout-bar.acc-position-bottom .acc-banner { bottom: 0; }

.acc-layout-bar .acc-banner > *:first-child {
  margin-left: max(0px, calc((100vw - var(--acc-max-width)) / 2));
}

.acc-layout-bar .acc-banner > *:last-child {
  margin-right: max(0px, calc((100vw - var(--acc-max-width)) / 2));
}

.acc-layout-box .acc-banner {
  width: min(var(--acc-max-width), calc(100vw - 32px));
  max-width: 520px;
  flex-direction: column;
  align-items: stretch;
}

.acc-layout-box.acc-position-top-left .acc-banner { top: 16px; left: 16px; }
.acc-layout-box.acc-position-top-right .acc-banner { top: 16px; right: 16px; }
.acc-layout-box.acc-position-bottom-left .acc-banner { bottom: 16px; left: 16px; }
.acc-layout-box .acc-banner,
.acc-layout-box.acc-position-bottom-right .acc-banner { right: 16px; bottom: 16px; }

.acc-layout-popup .acc-banner {
  top: 50%;
  left: 50%;
  width: min(var(--acc-max-width), calc(100vw - 32px));
  max-width: 620px;
  transform: translate(-50%, -50%);
  flex-direction: column;
  align-items: stretch;
}

.acc-main-overlay,
.acc-modal-overlay {
  position: fixed;
  inset: 0;
  display: none;
  background: var(--acc-overlay);
  opacity: var(--acc-overlay-opacity);
}

.acc-layout-popup.acc-banner-visible .acc-main-overlay {
  display: block;
  z-index: 1;
}

.acc-copy { max-width: 980px; }
.acc-title {
  margin: 0 0 8px;
  color: var(--acc-title);
  font-family: var(--acc-font);
  font-size: var(--acc-title-size);
  font-weight: var(--acc-title-weight);
  font-style: var(--acc-title-style);
  line-height: var(--acc-title-line-height);
  letter-spacing: var(--acc-title-letter-spacing);
  word-spacing: var(--acc-title-word-spacing);
  text-decoration: var(--acc-title-decoration);
  text-transform: var(--acc-title-transform);
  font-weight: var(--acc-title-weight);
  line-height: var(--acc-title-line-height);
  letter-spacing: var(--acc-title-letter-spacing);
  word-spacing: var(--acc-title-word-spacing);
  font-style: var(--acc-title-style);
  text-decoration: var(--acc-title-decoration);
  text-transform: var(--acc-title-transform);
}

.acc-description,
.acc-preferences p {
  margin: 0;
  color: var(--acc-text);
  font-family: var(--acc-font);
  font-size: var(--acc-body-size);
  font-weight: var(--acc-body-weight);
  font-style: var(--acc-body-style);
  line-height: var(--acc-body-line-height);
  letter-spacing: var(--acc-body-letter-spacing);
  word-spacing: var(--acc-body-word-spacing);
  text-decoration: var(--acc-body-decoration);
  text-transform: var(--acc-body-transform);
  font-weight: var(--acc-body-weight);
  line-height: var(--acc-body-line-height);
  letter-spacing: var(--acc-body-letter-spacing);
  word-spacing: var(--acc-body-word-spacing);
  font-style: var(--acc-body-style);
  text-decoration: var(--acc-body-decoration);
  text-transform: var(--acc-body-transform);
}

.acc-description a { color: var(--acc-link); text-decoration: underline; }
.acc-actions,
.acc-preferences__footer { display: flex; align-items: center; justify-content: var(--acc-button-justify); gap: 10px; flex-shrink: 0; }

.acc-btn {
  appearance: none;
  min-height: 0;
  margin: 0;
  padding: var(--acc-button-padding);
  border: 1px var(--acc-button-border-style);
  border-radius: var(--acc-button-radius);
  box-shadow: var(--acc-button-box-shadow);
  cursor: pointer;
  font-family: var(--acc-font);
  font-size: var(--acc-button-size);
  font-weight: var(--acc-button-weight);
  line-height: var(--acc-button-line-height);
  letter-spacing: var(--acc-button-letter-spacing);
  word-spacing: var(--acc-button-word-spacing);
  font-style: var(--acc-button-style);
  text-decoration: var(--acc-button-decoration);
  text-shadow: var(--acc-button-text-shadow);
  text-align: center;
  text-transform: var(--acc-button-transform);
  white-space: nowrap;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease, transform .1s ease;
  flex-grow: var(--acc-button-grow);
}

.acc-btn:focus-visible,
.acc-close:focus-visible,
.acc-revisit:focus-visible,
.acc-switch input:focus-visible + span { outline: 3px solid var(--acc-link); outline-offset: 2px; }
.acc-btn:active { transform: translateY(1px); }

.acc-btn-accept { background: var(--acc-accept-bg); color: var(--acc-accept-text); border-color: var(--acc-accept-border); }
.acc-btn-accept:hover { background: var(--acc-accept-hover-bg); color: var(--acc-accept-hover-text); border-color: var(--acc-accept-hover-border); }
.acc-btn-accept:active { background: var(--acc-accept-active-bg); color: var(--acc-accept-active-text); border-color: var(--acc-accept-active-border); }
.acc-btn-reject { background: var(--acc-reject-bg); color: var(--acc-reject-text); border-color: var(--acc-reject-border); }
.acc-btn-reject:hover { background: var(--acc-reject-hover-bg); color: var(--acc-reject-hover-text); border-color: var(--acc-reject-hover-border); }
.acc-btn-reject:active { background: var(--acc-reject-active-bg); color: var(--acc-reject-active-text); border-color: var(--acc-reject-active-border); }
.acc-btn-settings { background: var(--acc-settings-bg); color: var(--acc-settings-text); border-color: var(--acc-settings-border); }
.acc-btn-settings:hover { background: var(--acc-settings-hover-bg); color: var(--acc-settings-hover-text); border-color: var(--acc-settings-hover-border); }
.acc-btn-settings:active { background: var(--acc-settings-active-bg); color: var(--acc-settings-active-text); border-color: var(--acc-settings-active-border); }

.acc-preferences {
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 5;
  display: none;
  width: min(720px, calc(100vw - 32px));
  max-height: min(760px, calc(100vh - 32px));
  overflow: auto;
  transform: translate(-50%, -50%);
  border: var(--acc-border-width) solid var(--acc-border);
  border-radius: max(8px, var(--acc-radius));
  background: var(--acc-bg);
  box-shadow: 0 24px 70px rgba(0, 0, 0, .38);
  color: var(--acc-text);
}

.acc-settings-open .acc-preferences,
.acc-settings-open .acc-modal-overlay { display: block; }
.acc-settings-open .acc-modal-overlay { z-index: 4; }
.acc-settings-open .acc-banner,
.acc-settings-open .acc-main-overlay { display: none; }

.acc-preferences__header { position: relative; padding: 24px 56px 20px 24px; border-bottom: 1px solid var(--acc-border); }
.acc-preferences__header h2 { margin: 0 0 8px; color: var(--acc-title); font: 700 var(--acc-title-size)/1.3 var(--acc-font); }
.acc-close { position: absolute; top: 14px; right: 16px; width: 36px; height: 36px; border: 0; background: transparent; color: var(--acc-title); cursor: pointer; font-size: 30px; line-height: 1; }
.acc-categories { padding: 0 24px; }
.acc-category { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 18px 0; border-bottom: 1px solid var(--acc-border); }
.acc-category:last-child { border-bottom: 0; }
.acc-category strong { display: block; margin-bottom: 4px; color: var(--acc-title); font-size: var(--acc-body-size); }
.acc-always { color: var(--acc-link); font-size: 12px; font-weight: 700; white-space: nowrap; }
.acc-preferences__footer { padding: 20px 24px; border-top: 1px solid var(--acc-border); }

.acc-switch { position: relative; flex: 0 0 44px; width: 44px; height: 24px; }
.acc-switch input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.acc-switch span { position: absolute; inset: 0; border-radius: 999px; background: #747b96; cursor: pointer; transition: background .15s ease; }
.acc-switch span::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: transform .15s ease; }
.acc-switch input:checked + span { background: var(--acc-link); }
.acc-switch input:checked + span::after { transform: translateX(20px); }

.acc-revisit {
  position: fixed;
  bottom: 16px;
  z-index: 3;
  display: grid;
  width: 46px;
  height: 46px;
  place-items: center;
  padding: 10px;
  border: 0;
  border-radius: 50%;
  background: var(--acc-revisit-bg);
  box-shadow: 0 5px 18px rgba(0, 0, 0, .25);
  cursor: pointer;
}
.acc-revisit-bottom-left { left: 16px; }
.acc-revisit-bottom-right { right: 16px; }
.acc-revisit svg { width: 100%; height: 100%; fill: #fff; }

@media (max-width: 780px) {
  .acc-banner { flex-direction: column; align-items: stretch; }
  .acc-layout-bar .acc-banner > * { margin-left: 0 !important; margin-right: 0 !important; }
  .acc-actions { width: 100%; }
  .acc-actions .acc-btn { flex: 1; white-space: normal; }
}

@media (max-width: 520px) {
  .acc-actions,
  .acc-preferences__footer { flex-direction: column; }
  .acc-actions .acc-btn,
  .acc-preferences__footer .acc-btn { width: 100%; }
  .acc-category { align-items: flex-start; }
}

/*
 * Theme isolation: Elementor and many themes apply global button and heading
 * styles. The root ID keeps saved banner settings more specific without
 * preventing intentional overrides in the plugin's Custom CSS field.
 */
#agate-cookie-consent .acc-banner,
#agate-cookie-consent .acc-preferences {
  background: var(--acc-bg);
  border-color: var(--acc-border);
  color: var(--acc-text);
  font-family: var(--acc-font);
}

#agate-cookie-consent .acc-title,
#agate-cookie-consent .acc-preferences__header h2 {
  margin-top: 0;
  color: var(--acc-title);
  font-family: var(--acc-font);
  font-size: var(--acc-title-size);
}

#agate-cookie-consent .acc-description,
#agate-cookie-consent .acc-preferences p {
  color: var(--acc-text);
  font-family: var(--acc-font);
  font-size: var(--acc-body-size);
}

#agate-cookie-consent .acc-description a { color: var(--acc-link); }

#agate-cookie-consent .acc-btn {
  min-height: 0;
  padding: var(--acc-button-padding);
  border-width: 1px;
  border-style: var(--acc-button-border-style);
  border-radius: var(--acc-button-radius);
  font-family: var(--acc-font);
  font-size: var(--acc-button-size);
  font-weight: var(--acc-button-weight);
  line-height: var(--acc-button-line-height);
  letter-spacing: var(--acc-button-letter-spacing);
  word-spacing: var(--acc-button-word-spacing);
  font-style: var(--acc-button-style);
  text-shadow: var(--acc-button-text-shadow);
  box-shadow: var(--acc-button-box-shadow);
  text-decoration: var(--acc-button-decoration);
  text-transform: var(--acc-button-transform);
}

#agate-cookie-consent .acc-btn-accept { background: var(--acc-accept-bg); color: var(--acc-accept-text); border-color: var(--acc-accept-border); }
#agate-cookie-consent .acc-btn-accept:hover,
#agate-cookie-consent .acc-btn-accept:focus { background: var(--acc-accept-hover-bg); color: var(--acc-accept-hover-text); border-color: var(--acc-accept-hover-border); }
#agate-cookie-consent .acc-btn-accept:active { background: var(--acc-accept-active-bg); color: var(--acc-accept-active-text); border-color: var(--acc-accept-active-border); }
#agate-cookie-consent .acc-btn-reject { background: var(--acc-reject-bg); color: var(--acc-reject-text); border-color: var(--acc-reject-border); }
#agate-cookie-consent .acc-btn-reject:hover,
#agate-cookie-consent .acc-btn-reject:focus { background: var(--acc-reject-hover-bg); color: var(--acc-reject-hover-text); border-color: var(--acc-reject-hover-border); }
#agate-cookie-consent .acc-btn-reject:active { background: var(--acc-reject-active-bg); color: var(--acc-reject-active-text); border-color: var(--acc-reject-active-border); }
#agate-cookie-consent .acc-btn-settings { background: var(--acc-settings-bg); color: var(--acc-settings-text); border-color: var(--acc-settings-border); }
#agate-cookie-consent .acc-btn-settings:hover,
#agate-cookie-consent .acc-btn-settings:focus { background: var(--acc-settings-hover-bg); color: var(--acc-settings-hover-text); border-color: var(--acc-settings-hover-border); }
#agate-cookie-consent .acc-btn-settings:active { background: var(--acc-settings-active-bg); color: var(--acc-settings-active-text); border-color: var(--acc-settings-active-border); }
