/* ThriveX Cookie Consent — Theme + Mobile Overrides
   Loaded AFTER silktide-consent-manager.css to take precedence.
   CSS variables for theme colors are injected via wp_add_inline_style. */

/* ── Z-index: ensure banner/modal always on top ──────────────────────────── */
#stcm-wrapper {
  z-index: 999999 !important;
}

#stcm-banner {
  z-index: 999999 !important;
}

#stcm-modal {
  z-index: 999999 !important;
}

#stcm-backdrop {
  z-index: 999998 !important;
}

#stcm-icon {
  z-index: 999997 !important;
}

/* ── Banner border + glass effect (ThriveX dark glass) ───────────────────── */
#stcm-banner {
  border: 1px solid rgba(128, 176, 184, 0.18);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.35), inset 0 1px 1px rgba(255, 255, 255, 0.08);
}

#stcm-modal {
  border: 1px solid rgba(128, 176, 184, 0.18);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.35), inset 0 1px 1px rgba(255, 255, 255, 0.08);
}

/* ── Mobile: screens 480px and below ─────────────────────────────────────── */
@media (max-width: 480px) {
  #stcm-banner {
    padding: 20px 16px;
    bottom: 8px !important;
    left: 8px !important;
    right: 8px !important;
    max-width: calc(100% - 16px);
    width: auto;
    border-radius: 10px;
  }

  /* Override positioned variants on mobile */
  #stcm-banner.stcm-pos-bottom-center,
  #stcm-banner.stcm-pos-bottom-left,
  #stcm-banner.stcm-pos-bottom-right {
    left: 8px !important;
    right: 8px !important;
    transform: none;
    width: auto;
  }

  #stcm-banner.stcm-pos-bottom-center {
    animation: none;
  }

  #stcm-banner p {
    font-size: 14px;
    line-height: 20px;
    margin: 0 0 12px;
  }

  #stcm-banner .stcm-button {
    font-size: 14px;
    padding: 10px 16px;
    width: 100%;
    text-align: center;
    justify-content: center;
  }

  #stcm-banner .stcm-actions {
    gap: 10px;
    margin-top: 16px;
  }

  #stcm-banner .stcm-actions-row {
    gap: 8px;
  }

  #stcm-banner .stcm-preferences-button {
    font-size: 14px;
    padding: 10px 0;
  }

  /* Cookie icon: smaller on mobile, keep clear of common nav areas */
  #stcm-icon {
    width: 48px;
    height: 48px;
    bottom: 12px;
  }

  #stcm-icon.stcm-pos-bottom-right {
    right: 12px;
  }

  #stcm-icon.stcm-pos-bottom-left,
  #stcm-icon:not(.stcm-pos-bottom-right) {
    left: 12px;
  }

  /* Modal: full-width on mobile */
  #stcm-modal {
    width: calc(100% - 16px) !important;
    max-width: none;
    left: 8px;
    right: 8px;
    max-height: 85vh;
  }
}

/* ── Very small screens: iPhone SE, etc (375px and below) ────────────────── */
@media (max-width: 375px) {
  #stcm-banner {
    padding: 16px 12px;
  }

  #stcm-banner p {
    font-size: 13px;
    line-height: 18px;
  }

  #stcm-banner .stcm-button {
    font-size: 13px;
    padding: 9px 12px;
  }

  #stcm-icon {
    width: 42px;
    height: 42px;
  }
}

/* ── Tablet: 481px to 768px ──────────────────────────────────────────────── */
@media (min-width: 481px) and (max-width: 768px) {
  #stcm-banner {
    width: 480px;
    max-width: calc(100% - 24px);
  }
}