/* Centralized Amazon widget CSS
   Moved from inline <style> blocks in includes/amazon.php
   Purpose: center images on mobile, style badges and ad notice consistently
*/
.amazon-ad-notice{
  background:#fff8e1!important;
  border:1px solid #ffd86b!important;
  padding:8px!important;
  border-radius:8px!important;
  margin-bottom:8px!important;
  color:#6b4b00!important;
}
.amazon-ad-notice .amazon-ad-notice-inner{display:flex;align-items:center;gap:8px}
.amazon-ad-dismiss{margin-left:auto;background:transparent;border:0;font-size:18px;line-height:1;cursor:pointer;color:#6b4b00;padding:4px}

/* Image wrapper and centering */
.amazon-img-wrap{
  position:relative;
  display:block;
  width:100%;
  border-radius:1rem;
  overflow:hidden;
  background:#fff;
  text-align:center;
}
.amazon-img-wrap img{display:block;margin:0 auto;max-width:100%;height:auto;object-fit:contain}

/* Badges */
.amazon-img-wrap .amazon-badge{
  position:absolute;
  bottom:8px;
  padding:6px 8px;
  border-radius:999px;
  font-weight:700;
  font-size:13px;
  box-shadow:0 4px 14px rgba(0,0,0,0.12);
}
.amazon-img-wrap .amazon-badge-price{left:8px;background:rgba(15,107,63,0.95);color:#fff}
.amazon-img-wrap .amazon-badge-save{right:8px;background:rgba(255,255,255,0.92);color:#0f6b3f;border:1px solid rgba(15,107,63,0.12)}

/* Hide duplicate price elements that AAWP-like widgets include in the body */
.amazon-card-prices{display:none!important}
.card-body .amazon-price{display:none!important}

/* Mobile tweaks */
@media(max-width:720px){
  .amazon-img-wrap{min-height:120px}
  .amazon-img-wrap img{max-height:160px}
}

/* Amazon popup specific styles */
.ss-amazon-popup {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 99999;
  max-width: 320px;
  width: calc(100% - 2rem);
  box-shadow: 0 10px 30px rgba(0,0,0,0.12);
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
  font-family: Inter, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
  display: none;
}

/* On small viewports, nudge the popup up and provide side margins so it doesn't overlap cookie controls */
@media (max-width: 767.98px) {
  .ss-amazon-popup {
    /* Full width / full-screen style on mobile */
    bottom: 0; /* stick to bottom */
    left: 0;
    right: 0;
    width: 100vw;
    max-width: 100vw;
    border-radius: 0;
    box-shadow: none;
    height: auto;
    max-height: 92vh; /* allow the banner to be tall but not overflow viewport */
  }
}

/* Header host for silktide cookie icon */
#silktide-cookie-host { width: 40px; height: 40px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: transparent; margin-left: .5rem; }
/* Match the existing header action style (background + color come from .header_user-action) */
#silktide-cookie-host { box-shadow: none; }
#silktide-cookie-host .silktide-icon { width: 24px; height: 24px; display: inline-block; }

/* Ensure the injected Silktide button fits the circular host and uses currentColor for the icon */
#silktide-cookie-host > #silktide-cookie-icon,
#silktide-cookie-host > button[aria-label*="cookie" i] {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 100% !important;
  height: 100% !important;
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  color: inherit !important; /* inherit header_user-action color */
}

#silktide-cookie-host svg { width: 18px; height: 18px; fill: currentColor; display: block; }

/* Ensure our created header button visually matches existing header_user-action (background & focus) */
.header_user-action { border-radius: 50%; background: #efc368; color: #214842; width: 40px; height: 40px; font-size: 16px; display: inline-flex; align-items: center; justify-content: center; }
.header_user-action:focus { outline: 3px solid rgba(33,72,66,0.12); outline-offset: 2px; }
.header_user-action:hover { filter: brightness(0.98); }

/* Stronger rule for Silktide header cookie button to guarantee the yellow circular background */
#silktide-cookie-host > .header_user-action,
#silktide-cookie-host > button.header_user-action {
  background: #efc368 !important;
  color: #214842 !important;
  border-radius: 50% !important;
  width: 40px !important;
  height: 40px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
}

#silktide-cookie-host > .header_user-action svg { width: 18px; height: 18px; fill: currentColor; }

/* Ensure host hides on very small screens if needed */
@media (max-width: 420px) { #silktide-cookie-host{display:none} }

/* Force-hide only the small floating Silktide cookie icons/dots so only header control is visible */
#silktide-cookie-icon,
.silktide-cookie-icon,
.silktide-floating,
.ss-cookie-dot,
.cookie-dot,
.silktide-trigger {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Keep accessibility: mark hidden instances hidden for assistive tech when we flagged them */
[data-silktide-hidden] { display:none !important; visibility:hidden !important; }