/* -----------------------------------------
   Star Import Service – Cookie Consent UI
------------------------------------------ */

/* Root wrapper */
.si-cc {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 2147483647;
  font-family: var(--font-body, "Open Sans", sans-serif);
  color: var(--color-gray-dark, #333);
}

/* 🍪 floating button (only after consent given) */
.si-cc__fab {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: none;
  background: var(--color-blue-dark, #0D1F47);
  color: var(--color-white, #fff);
  cursor: pointer;
  box-shadow: 0 8px 18px rgba(0,0,0,0.25);
  display: grid;
  place-items: center;
  transition: transform 0.25s ease;
}
.si-cc__fab:hover { transform: translateY(-2px); }
.si-cc__fab { font-size: 1.2rem; }
/* ✅ FAB “partial overlap” white overlay (only where it overlaps footer) */
.si-cc__fab{
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: transparent; /* base fill moved to ::after so overlay can sit behind emoji */
  will-change: transform, clip-path, opacity;
  transform: translateZ(0);
}

/* Base blue fill (same as your original background) */
.si-cc__fab::after{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--color-blue-dark, #0D1F47);
  z-index: -2;
}

/* White overlay fill — clipped to overlap region via CSS vars */
.si-cc__fab::before{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: #fff;
  z-index: -1;

  opacity: 0;
  clip-path: inset(
    var(--cc-clip-top, 100%)
    var(--cc-clip-right, 0px)
    var(--cc-clip-bottom, 0px)
    var(--cc-clip-left, 0px)
    round 999px
  );

  transition: opacity 140ms ease, clip-path 120ms linear;
  will-change: clip-path, opacity;
}

/* When overlapping the footer, fade the overlay in */
.si-cc__fab.si-cc__fab--overlap::before{
  opacity: 1;
}

/* When banner is open, hide fab */
.si-cc[data-open="1"] .si-cc__fab { display: none !important; }

/* -----------------------------------------
   Panel (banner)
------------------------------------------ */
.si-cc__panel {
  position: fixed;
  right: 18px;
  bottom: 18px;
  width: min(420px, calc(100vw - 36px));
  background: var(--color-white, #fff);
  border: 1px solid var(--color-gray-medium, #ccc);
  border-radius: var(--border-radius, 4px);
  box-shadow: 0 12px 32px rgba(0,0,0,0.25);
  padding: 1.25rem;
  animation: fadeIn 0.3s ease;
}

/* Header */
.si-cc__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 0.5rem;
}
.si-cc__badge {
  font-size: 1.5rem;
  margin-right: 0.5rem;
}
.si-cc__title {
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--color-blue-dark, #0D1F47);
}
.si-cc__subtitle {
  font-size: 0.9rem;
  color: var(--color-gray-dark, #333);
}
.si-cc__close {
  border: none;
  background: transparent;
  font-size: 1.25rem;
  cursor: pointer;
  color: var(--color-gray-dark, #333);
  transition: color 0.25s ease;
}
.si-cc__close:hover { color: var(--color-blue-dark, #0D1F47); }

/* Body */
.si-cc__body {
  font-size: 0.95rem;
  line-height: 1.5;
  margin-bottom: 0.75rem;
}
.si-cc__sectionTitle {
  font-weight: 600;
  margin-top: 0.5rem;
  color: var(--color-blue-dark, #0D1F47);
}
.si-cc__list {
  margin: 0.25rem 0 0.75rem 1.25rem;
  padding: 0;
}
.si-cc__toggle {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin: 0.5rem 0;
  cursor: pointer;
}
.si-cc__toggle input {
  margin-top: 0.2rem;
}
.si-cc__small {
  display: block;
  font-size: 0.85rem;
  color: var(--color-gray-dark, #555);
  font-weight: 400;
}

/* Footer buttons */
.si-cc__footer {
  display: flex;
  justify-content: flex-end;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1rem;
}

/* When Save is visible, keep Decline/Accept on the left, Save on the right */
#si-cc-save {
  margin-left: auto;
}

.si-cc__btn {
  padding: 0.55rem 1.1rem;
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.80rem;
  border-radius: var(--border-radius, 4px);
  cursor: pointer;
  transition: background-color 0.25s ease, transform 0.25s ease;
}

/* Ghost (outline) */
.si-cc__btn--ghost {
  background: transparent;
  border: 1px solid var(--color-blue-dark, #0D1F47);
  color: var(--color-blue-dark, #0D1F47);
}
.si-cc__btn--ghost:hover {
  background: var(--color-blue-dark, #0D1F47);
  color: var(--color-white, #fff);
}

/* Primary */
.si-cc__btn--primary {
  background: var(--color-blue-dark, #0D1F47);
  border: none;
  color: var(--color-white, #fff);
}
.si-cc__btn--primary:hover {
  background: var(--color-black, #000);
  transform: translateY(-2px);
}

/* Link */
.si-cc__link {
  color: var(--color-blue, #1a30cb);
  font-size: 0.9rem;
}
.si-cc__link:hover {
  color: var(--color-blue-dark, #0D1F47);
  text-decoration: underline;
}

/* Fade animation */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ─────────────────────────────────────────────
   Responsive resize for Cookie Consent UI
   (keeps same layout, just scales proportionally)
────────────────────────────────────────────── */

/* 500px ↓ */
@media (max-width: 500px) {
  .si-cc__fab {
    width: 40px;
    height: 40px;
    font-size: 1.1rem;
  }

  .si-cc { right: 12px; } /* was 18px — smaller number = closer to the right edge */

  .si-cc__panel {
    width: min(380px, calc(100vw - 28px));
    padding: 1rem;
    font-size: 0.93rem;
  }

  .si-cc__btn {
    padding: 0.5rem 0.9rem;
    font-size: 0.78rem;
  }
}

/* 🔧 Prevent wrapping inside buttons */
.si-cc__btn {
  white-space: nowrap;        /* keep all text on one line */
  letter-spacing: -0.2px;     /* subtle tightening so long words fit */
  line-height: 1.1;           /* vertically compact */
}

/* 401–500px — maintain perfect inline alignment for both trios */
@media (max-width: 500px) and (min-width: 401px) {
  .si-cc__footer {
    flex-wrap: nowrap;
    justify-content: space-between; /* ✅ instead of flex-end */
    align-items: center;
    gap: 0.35rem;
  }

  .si-cc__btn {
    padding: 0.45rem 0.75rem;
    font-size: 0.75rem;
    letter-spacing: -0.25px;
    flex: 0 1 auto;
  }

  /* ✅ Manage trio: Decline + Manage + Accept */
  .si-cc__footer #si-cc-manageBtn:not([hidden]) ~ #si-cc-accept:not([hidden]) {
    margin-left: auto; /* pushes Accept all to right side (like Save does) */
  }

  /* ✅ Save trio: Decline + Accept + Save — keep Save aligned right */
  #si-cc-save:not([hidden]) {
    margin-left: auto; /* already default, just reinforcing consistency */
  }
}

/* 450px ↓ */
@media (max-width: 450px) {
  .si-cc__fab {
    width: 38px;
    height: 38px;
    font-size: 1rem;
  }

  .si-cc { right: 10px; } /* was 18px — smaller number = closer to the right edge */

  .si-cc__panel {
    width: min(340px, calc(100vw - 26px));
    padding: 0.9rem;
    font-size: 0.9rem;
  }

  .si-cc__btn {
    font-size: 0.74rem;       /* tiny bump down */
    padding: 0.42rem 0.75rem; /* slightly narrower */
  }
}

/* 400px ↓ — handle both trios correctly */
@media (max-width: 400px) {
  .si-cc__fab {
    width: 36px;
    height: 36px;
    font-size: 0.95rem;
  }

  .si-cc { right: 8px; }

  .si-cc__panel {
    width: min(320px, calc(100vw - 22px));
    padding: 0.8rem;
    font-size: 0.88rem;
  }

  .si-cc__btn {
    font-size: 0.72rem;
    padding: 0.4rem 0.7rem;
    white-space: nowrap;
  }

  /* ✅ allow wrap at 400px and under */
  .si-cc__footer {
    flex-wrap: wrap;
    gap: 0.4rem;
  }

  /* ✅ Manage trio: Decline + Manage + Accept → drop Accept below only if Manage is visible */
  .si-cc__footer #si-cc-manageBtn:not([hidden]) ~ #si-cc-accept:not([hidden]) {
    flex-basis: 100%;
    display: block;
    margin-top: 0.4rem;
  }

  /* ✅ Save trio: Decline + Accept + Save → drop Save below (keep Accept inline) */
  .si-cc__footer #si-cc-save:not([hidden]) {
    flex-basis: 100%;
    display: block;
    margin-top: 0.4rem;
    margin-left: 0; /* overrides margin-left:auto */
  }

  /* ⛔ prevent Accept from dropping when Save is visible (the Save trio) */
  .si-cc__footer #si-cc-save:not([hidden]) ~ #si-cc-accept {
    flex-basis: auto !important;
    display: inline-block !important;
    margin-top: 0 !important;
  }
}

/* 350px ↓ */
@media (max-width: 350px) {
  .si-cc__fab {
    width: 34px;
    height: 34px;
    font-size: 0.9rem;
  }

  .si-cc { right: 6px; }

  .si-cc__panel {
    width: min(290px, calc(100vw - 20px));
    padding: 0.7rem;
    font-size: 0.85rem;
  }

  .si-cc__btn {
    font-size: 0.7rem;
    padding: 0.35rem 0.65rem;
    white-space: nowrap;
  }

  /* ✅ On ultra-small widths, move the last *visible* button (Accept all or Save) below the first two */
  .si-cc__footer .si-cc__btn:last-of-type:not([hidden]) {
    flex-basis: 100%;   /* full width = new line */
    display: block;     /* forces break */
    margin-top: 0.4rem; /* bit of breathing room above it */
  }
}

/* 450px ↓ (but above 400px) — ONLY for the Manage trio (Decline + Manage + Accept) */
@media (max-width: 450px) and (min-width: 401px) {
  /* If Manage is visible (meaning we're in the Manage trio), tighten just enough to keep 1 row */
  .si-cc__footer #si-cc-manageBtn:not([hidden]) {
    /* nothing needed here; selector is used below */
    pointer-events: auto;
  }

  .si-cc__footer:has(#si-cc-manageBtn:not([hidden])) {
    gap: 0.28rem;            /* tighter than 0.35/0.5 */
  }

  .si-cc__footer:has(#si-cc-manageBtn:not([hidden])) .si-cc__btn {
    padding: 0.40rem 0.62rem;  /* shrink width just for this range */
    font-size: 0.72rem;        /* tiny downscale */
    letter-spacing: -0.3px;    /* tiny squeeze */
  }
}