/* ==========================================================================
   PrintingProxies — geo "we ship to you now!" banner
   Thin top announcement bar. Hidden until JS confirms an eligible country.
   ========================================================================== */

.sl-geo-banner {
  --geo-gold: oklch(0.72 0.16 70);
  --geo-ink:  oklch(0.20 0.02 250);
  --geo-warm: #e07b30;
  --geo-font: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;

  position: relative;
  z-index: 99999;
  width: 100%;
  margin: 0;
  background: linear-gradient(90deg, oklch(0.78 0.15 75) 0%, oklch(0.72 0.16 70) 50%, oklch(0.76 0.15 60) 100%);
  color: var(--geo-ink);
  font-family: var(--geo-font);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.10);
  overflow: hidden;
}
.sl-geo-banner[hidden] { display: none; }

/* slide-down reveal */
.sl-geo-banner {
  max-height: 0;
  transition: max-height .45s cubic-bezier(.22,.61,.36,1);
}
.sl-geo-banner.sl-geo-show { max-height: 64px; }

.sl-geo-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  max-width: 1100px;
  margin: 0 auto;
  padding: 9px 44px 9px 16px;   /* room for the close button on the right */
  position: relative;
  text-align: center;
  line-height: 1.3;
}

.sl-geo-flag {
  flex: 0 0 auto;
  width: 26px;
  height: 20px;
  border-radius: 3px;
  box-shadow: 0 0 0 1px rgba(0,0,0,.12);
  object-fit: cover;
  animation: sl-geo-pop .5s .15s both;
}
@keyframes sl-geo-pop {
  0%   { transform: scale(0);   }
  70%  { transform: scale(1.18);}
  100% { transform: scale(1);   }
}

.sl-geo-msg {
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: .005em;
}
.sl-geo-msg strong { font-weight: 800; }
.sl-geo-spark { font-size: 15px; }

.sl-geo-close {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 26px;
  height: 26px;
  border: 0;
  border-radius: 50%;
  background: rgba(0,0,0,.08);
  color: var(--geo-ink);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .15s;
}
.sl-geo-close:hover { background: rgba(0,0,0,.18); }

@media (max-width: 480px) {
  .sl-geo-msg  { font-size: 13px; }
  .sl-geo-inner { gap: 8px; padding-right: 40px; }
  .sl-geo-banner.sl-geo-show { max-height: 80px; }
}

@media (prefers-reduced-motion: reduce) {
  .sl-geo-banner, .sl-geo-flag { transition: none; animation: none; }
}