/* Scoped to Reverse Images chrome. Do not restyle WordPress admin, Elementor editor, or plugin tool internals. */

body.ri-site-chrome .site-header,
body.ri-site-chrome header.site-header,
body.ri-site-chrome .elementor-location-header,
body.ri-site-chrome [data-elementor-type="header"],
body.ri-site-chrome .ekit-template-content-header,
body.ri-site-chrome .ekit-template-content-markup.ekit-template-content-header,
body.ri-site-chrome footer.site-footer,
body.ri-site-chrome .site-footer,
body.ri-site-chrome .elementor-location-footer,
body.ri-site-chrome [data-elementor-type="footer"],
body.ri-site-chrome .ekit-template-content-footer,
body.ri-site-chrome .ekit-template-content-markup.ekit-template-content-footer {
  display: none !important;
}

body.ri-site-chrome {
  background: linear-gradient(165deg, #f8faff 0%, #eef2ff 38%, #f5f3ff 72%, #f0f9ff 100%);
}

.ri-chrome {
  --ri-ink: #0e1320;
  --ri-ink-soft: #3d4663;
  --ri-muted: #7b86a8;
  --ri-line: #e2e8f0;
  --ri-brand: #4f46e5;
  --ri-brand-soft: #eef2ff;
  --ri-font: Inter, ui-sans-serif, system-ui, sans-serif;
  --ri-display: Fraunces, ui-serif, Georgia, serif;
  box-sizing: border-box;
  font-family: var(--ri-font);
  color: var(--ri-ink);
}

.ri-chrome *,
.ri-chrome *::before,
.ri-chrome *::after {
  box-sizing: border-box;
}

.ri-chrome-wrap {
  width: 100%;
  max-width: 72rem;
  margin: 0 auto;
  padding: 0 1.25rem;
}

.ri-chrome-header {
  position: sticky;
  top: 0;
  z-index: 1200;
  border-bottom: 1px solid rgba(255, 255, 255, 0.6);
  background: rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(12px);
}

.ri-chrome-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  height: 64px;
  position: relative;
}

.ri-chrome-logo {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  text-decoration: none;
  color: var(--ri-ink);
  flex-shrink: 0;
}

.ri-chrome-mark {
  width: 32px;
  height: 32px;
  display: block;
  border-radius: 9px;
  object-fit: contain;
}

.ri-chrome-wordmark {
  font-family: var(--ri-display);
  font-size: 1.15rem;
  font-weight: 500;
  letter-spacing: -0.02em;
}

.ri-chrome-nav {
  display: none;
  align-items: center;
  gap: 0.25rem;
}

.ri-chrome-link {
  border-radius: 999px;
  padding: 0.5rem 0.875rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--ri-ink-soft);
  text-decoration: none;
}

.ri-chrome-link:hover,
.ri-chrome-link.is-active {
  background: var(--ri-brand-soft);
  color: var(--ri-brand);
}

.ri-chrome-actions {
  display: none;
  align-items: center;
  gap: 0.5rem;
}

.ri-chrome-ghost,
.ri-chrome-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  padding: 0 0.9rem;
  border-radius: 999px;
  font-size: 0.875rem;
  font-weight: 500;
  text-decoration: none;
  border: 0;
  cursor: pointer;
}

.ri-chrome-ghost {
  color: var(--ri-ink-soft);
  background: transparent;
}

.ri-chrome-ghost:hover {
  background: var(--ri-brand-soft);
  color: var(--ri-ink);
}

.ri-chrome-cta {
  color: #fff;
  background-image: linear-gradient(135deg, #4f46e5 0%, #7c3aed 42%, #9333ea 72%, #2563eb 100%);
  box-shadow: 0 14px 28px -12px rgb(79 70 229 / 0.55);
}

.ri-chrome-burger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 1px solid var(--ri-line);
  background: #fff;
  color: var(--ri-ink);
  cursor: pointer;
}

.ri-chrome-burger .ri-chrome-icon-close,
.ri-chrome.is-open .ri-chrome-burger .ri-chrome-icon-open {
  display: none;
}

.ri-chrome.is-open .ri-chrome-burger .ri-chrome-icon-close {
  display: block;
}

.ri-chrome-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.ri-chrome-mobile {
  border-top: 1px solid var(--ri-line);
  background: rgba(255, 255, 255, 0.95);
  padding: 1.1rem 1.25rem 1.25rem;
}

.ri-chrome-mobile[hidden] {
  display: none !important;
}

.ri-chrome-mobile a {
  display: block;
  border-radius: 12px;
  padding: 0.65rem 0.75rem;
  color: var(--ri-ink-soft);
  text-decoration: none;
  font-size: 0.875rem;
  font-weight: 500;
}

.ri-chrome-mobile a:hover {
  background: var(--ri-brand-soft);
  color: var(--ri-brand);
}

.ri-chrome-mobile-actions {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 1rem;
}

.ri-chrome-mobile-actions .ri-chrome-ghost,
.ri-chrome-mobile-actions .ri-chrome-cta {
  width: 100%;
  height: 44px;
}

.ri-chrome-mobile-actions .ri-chrome-ghost {
  border: 1px solid var(--ri-line);
  background: #fff;
}

.ri-chrome-footer {
  border-top: 1px solid rgba(255, 255, 255, 0.7);
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(8px);
}

.ri-chrome-footer-grid {
  display: grid;
  gap: 2.5rem;
  padding: 3.5rem 1.25rem;
}

.ri-chrome-footer-brand p,
.ri-chrome-footer a,
.ri-chrome-legal p {
  color: var(--ri-muted);
  font-size: 0.875rem;
  line-height: 1.6;
}

.ri-chrome-footer-brand p {
  max-width: 22rem;
  margin: 1rem 0 0;
}

.ri-chrome-footer-cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2rem;
}

.ri-chrome-footer-title {
  margin: 0 0 1rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--ri-ink);
}

.ri-chrome-footer ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.ri-chrome-footer li + li {
  margin-top: 0.65rem;
}

.ri-chrome-footer a {
  text-decoration: none;
}

.ri-chrome-footer a:hover {
  color: var(--ri-ink);
}

.ri-chrome-legal {
  border-top: 1px solid var(--ri-line);
}

.ri-chrome-legal .ri-chrome-wrap {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1.15rem 1.25rem;
}

.ri-chrome-legal p {
  margin: 0;
  font-size: 0.75rem;
}

@media (min-width: 768px) {
  .ri-chrome-nav,
  .ri-chrome-actions {
    display: flex;
  }

  .ri-chrome-burger,
  .ri-chrome-mobile {
    display: none !important;
  }

  .ri-chrome-footer-grid {
    grid-template-columns: 5fr 7fr;
  }

  .ri-chrome-footer-cols {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .ri-chrome-legal .ri-chrome-wrap {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

/* =========================================================================
 *  Product surface alignment
 *  Loaded by the chrome plugin after the tool/account plugin styles.
 *  Visual-only: selectors target existing UI, not JS hooks or form fields.
 * ========================================================================= */
body.ri-site-chrome .rl-app,
body.ri-site-chrome .rvuser-root {
  --ri-page-ink: #0e1320;
  --ri-page-soft: #3d4663;
  --ri-page-muted: #7b86a8;
  --ri-page-line: #e2e8f0;
  --ri-page-brand: #4f46e5;
  --ri-page-brand-hover: #4338ca;
  --ri-page-brand-soft: #eef2ff;
  --ri-page-font: Inter, ui-sans-serif, system-ui, sans-serif;
  --ri-page-display: Fraunces, ui-serif, Georgia, serif;
  --ri-page-shadow-card: 0 0 0 1px rgb(99 102 241 / 0.08), 0 24px 48px -20px rgb(30 27 75 / 0.28), 0 12px 24px -14px rgb(79 70 229 / 0.22);
  --ri-page-shadow-cta: 0 14px 28px -12px rgb(79 70 229 / 0.55), 0 4px 12px -6px rgb(124 58 237 / 0.35);
  font-family: var(--ri-page-font);
  color: var(--ri-page-ink);
  background:
    radial-gradient(ellipse 70% 55% at 12% 8%, rgb(99 102 241 / 0.2), transparent 58%),
    radial-gradient(ellipse 48% 42% at 92% 6%, rgb(168 85 247 / 0.16), transparent 52%),
    radial-gradient(ellipse 42% 36% at 78% 88%, rgb(34 211 238 / 0.12), transparent 50%),
    linear-gradient(165deg, #f8faff 0%, #eef2ff 38%, #f5f3ff 72%, #f0f9ff 100%);
}

body.ri-site-chrome .rl-app .hero h1,
body.ri-site-chrome .rl-app .workspace-heading h2,
body.ri-site-chrome .rl-app .query-sidebar-title,
body.ri-site-chrome .rl-app .searching-title,
body.ri-site-chrome .rl-app .source-title,
body.ri-site-chrome .rl-app .rl-login-modal-title,
body.ri-site-chrome .rl-app .rl-upgrade-modal-title,
body.ri-site-chrome .rvuser-root .rvuser-shell-title,
body.ri-site-chrome .rvuser-root .rvuser-card-title,
body.ri-site-chrome .rvuser-root .rvuser-login-title,
body.ri-site-chrome .rvuser-root .rvuser-login-visual-title,
body.ri-site-chrome .rvuser-root .rvuser-upgrade-title,
body.ri-site-chrome .rvuser-root .rvuser-empty-title {
  font-family: var(--ri-page-display);
  font-weight: 600;
  letter-spacing: 0;
}

body.ri-site-chrome .rl-app.page-landing .landing-tool-card,
body.ri-site-chrome .rl-app.page-results .sidebar-card,
body.ri-site-chrome .rl-app.page-results .results-panel,
body.ri-site-chrome .rl-app.page-results .searching-panel,
body.ri-site-chrome .rl-app .source-hero,
body.ri-site-chrome .rl-app .source-tile,
body.ri-site-chrome .rl-app .result-card,
body.ri-site-chrome .rvuser-root .rvuser-shell-header,
body.ri-site-chrome .rvuser-root .rvuser-tabs,
body.ri-site-chrome .rvuser-root .rvuser-card,
body.ri-site-chrome .rvuser-root .rvuser-stat-card,
body.ri-site-chrome .rvuser-root .rvuser-table-scroll,
body.ri-site-chrome .rvuser-root .rvuser-empty,
body.ri-site-chrome .rvuser-root .rvuser-alert-card,
body.ri-site-chrome .rvuser-root .rvuser-notif-item {
  border: 1px solid rgb(255 255 255 / 0.75);
  background: rgb(255 255 255 / 0.94);
  box-shadow: var(--ri-page-shadow-card);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

body.ri-site-chrome .rl-app.page-landing .landing-tool-card,
body.ri-site-chrome .rl-app.page-results .sidebar-card,
body.ri-site-chrome .rl-app.page-results .results-panel,
body.ri-site-chrome .rl-app.page-results .searching-panel,
body.ri-site-chrome .rvuser-root .rvuser-shell-header,
body.ri-site-chrome .rvuser-root .rvuser-card,
body.ri-site-chrome .rvuser-root .rvuser-tabs {
  border-radius: 22px;
  overflow: hidden;
}

body.ri-site-chrome .rl-app.page-landing .landing-drop,
body.ri-site-chrome .rl-app.page-landing .landing-url-wrap,
body.ri-site-chrome .rl-app.page-results .preview-frame,
body.ri-site-chrome .rl-app.page-results .editor-panel,
body.ri-site-chrome .rl-app.page-results .editor-toolbar,
body.ri-site-chrome .rl-app.page-results .tab-segment,
body.ri-site-chrome .rl-app.page-results .filter-btn,
body.ri-site-chrome .rvuser-root .rvuser-stat-card,
body.ri-site-chrome .rvuser-root .rvuser-summary-cell,
body.ri-site-chrome .rvuser-root .rvuser-readonly-value,
body.ri-site-chrome .rvuser-root input.rvuser-input,
body.ri-site-chrome .rvuser-root .rvuser-alert-upload {
  border-color: rgb(99 102 241 / 0.14) !important;
  background:
    radial-gradient(ellipse 90% 70% at 50% -10%, rgb(99 102 241 / 0.12), transparent 60%),
    linear-gradient(180deg, rgb(255 255 255 / 0.95), rgb(238 242 255 / 0.58)) !important;
}

body.ri-site-chrome .rl-app.page-landing .landing-drop:hover:not(.has-preview),
body.ri-site-chrome .rl-app.page-landing .landing-drop.dragover:not(.has-preview),
body.ri-site-chrome .rl-app.page-landing .landing-url-wrap:focus-within,
body.ri-site-chrome .rl-app .result-card:hover,
body.ri-site-chrome .rl-app .source-hero:hover,
body.ri-site-chrome .rl-app .source-tile:hover,
body.ri-site-chrome .rvuser-root input.rvuser-input:focus,
body.ri-site-chrome .rvuser-root .rvuser-alert-upload:hover,
body.ri-site-chrome .rvuser-root .rvuser-alert-upload.is-dragover,
body.ri-site-chrome .rvuser-root .rvuser-stat-card:hover {
  border-color: rgb(79 70 229 / 0.55) !important;
  box-shadow: 0 0 0 4px rgb(99 102 241 / 0.12), var(--ri-page-shadow-card) !important;
}

body.ri-site-chrome .rl-app.page-landing .landing-drop-icon,
body.ri-site-chrome .rl-app .empty-state-icon,
body.ri-site-chrome .rl-app .searching-limit-icon,
body.ri-site-chrome .rl-app .rl-login-modal-icon,
body.ri-site-chrome .rvuser-root .rvuser-avatar,
body.ri-site-chrome .rvuser-root .rvuser-login-brand-mark,
body.ri-site-chrome .rvuser-root .rvuser-login-icon,
body.ri-site-chrome .rvuser-root .rvuser-empty-icon,
body.ri-site-chrome .rvuser-root .rvuser-panel-icon,
body.ri-site-chrome .rvuser-root .rvuser-stat-icon {
  background: linear-gradient(135deg, #eef2ff 0%, #f5f3ff 58%, #eff6ff 100%);
  color: var(--ri-page-brand);
  border: 1px solid rgb(99 102 241 / 0.14);
  box-shadow: 0 10px 24px -14px rgb(79 70 229 / 0.55);
}

body.ri-site-chrome .rvuser-root .rvuser-avatar {
  color: #fff;
  background: linear-gradient(135deg, #5b5ef7 0%, #7c3aed 38%, #a855f7 68%, #2563eb 100%);
}

body.ri-site-chrome .rvuser-root .rvuser-login-brand-mark,
body.ri-site-chrome .rvuser-root .rvuser-login-icon {
  background: transparent url("../img/reverse-images-logo.svg") center / 40px 40px no-repeat !important;
  border-color: transparent !important;
  box-shadow: none !important;
  color: transparent !important;
}

body.ri-site-chrome .rvuser-root .rvuser-login-brand-mark svg,
body.ri-site-chrome .rvuser-root .rvuser-login-icon svg {
  opacity: 0 !important;
}

body.ri-site-chrome .rl-app.page-landing .landing-browse-btn,
body.ri-site-chrome .rl-app.page-landing .landing-drop-change,
body.ri-site-chrome .rl-app.page-results .btn-secondary,
body.ri-site-chrome .rl-app.page-results .filter-btn,
body.ri-site-chrome .rl-app.page-results .editor-btn,
body.ri-site-chrome .rl-app .btn-ghost,
body.ri-site-chrome .rvuser-root a.rvuser-btn-outline,
body.ri-site-chrome .rvuser-root button.rvuser-btn-outline,
body.ri-site-chrome .rvuser-root a.rvuser-btn-secondary,
body.ri-site-chrome .rvuser-root button.rvuser-btn-secondary {
  border-color: rgb(99 102 241 / 0.22) !important;
  background: linear-gradient(180deg, #ffffff 0%, #f5f3ff 100%) !important;
  color: var(--ri-page-soft) !important;
}

body.ri-site-chrome .rl-app.page-landing .landing-browse-btn:hover,
body.ri-site-chrome .rl-app.page-landing .landing-drop-change:hover,
body.ri-site-chrome .rl-app.page-results .btn-secondary:hover,
body.ri-site-chrome .rl-app.page-results .filter-btn:hover,
body.ri-site-chrome .rl-app.page-results .editor-btn:hover,
body.ri-site-chrome .rl-app .btn-ghost:hover,
body.ri-site-chrome .rvuser-root a.rvuser-btn-outline:hover,
body.ri-site-chrome .rvuser-root button.rvuser-btn-outline:hover,
body.ri-site-chrome .rvuser-root a.rvuser-btn-secondary:hover,
body.ri-site-chrome .rvuser-root button.rvuser-btn-secondary:hover {
  border-color: rgb(99 102 241 / 0.45) !important;
  background: linear-gradient(180deg, #ffffff 0%, #eef2ff 100%) !important;
  color: var(--ri-page-brand) !important;
}

body.ri-site-chrome .rl-app.page-landing .landing-cta,
body.ri-site-chrome .rl-app.page-results .btn-primary,
body.ri-site-chrome .rl-app.page-results .preview-actions .btn-primary,
body.ri-site-chrome .rl-app.page-results .load-more-wrap .btn-secondary,
body.ri-site-chrome .rl-app .rl-login-modal-btn-primary,
body.ri-site-chrome .rvuser-root a.rvuser-btn-primary,
body.ri-site-chrome .rvuser-root button.rvuser-btn-primary,
body.ri-site-chrome .rvuser-root .rvuser-tab.rvuser-is-active {
  border: 0 !important;
  color: #fff !important;
  background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 42%, #9333ea 72%, #2563eb 100%) !important;
  box-shadow: var(--ri-page-shadow-cta) !important;
}

body.ri-site-chrome .rl-app.page-landing .landing-cta:hover,
body.ri-site-chrome .rl-app.page-results .btn-primary:hover,
body.ri-site-chrome .rl-app.page-results .preview-actions .btn-primary:hover,
body.ri-site-chrome .rl-app.page-results .load-more-wrap .btn-secondary:hover,
body.ri-site-chrome .rl-app .rl-login-modal-btn-primary:hover,
body.ri-site-chrome .rvuser-root a.rvuser-btn-primary:hover,
body.ri-site-chrome .rvuser-root button.rvuser-btn-primary:hover {
  background: linear-gradient(135deg, #4338ca 0%, #6d28d9 42%, #7e22ce 72%, #1d4ed8 100%) !important;
  transform: translateY(-1px);
}

body.ri-site-chrome .rl-app.page-results .tab-btn.active,
body.ri-site-chrome .rl-app.page-results .filter-btn.active,
body.ri-site-chrome .rl-app.page-results .editor-btn.active,
body.ri-site-chrome .rl-app.page-results .editor-zoom-chip.active {
  color: var(--ri-page-brand);
  background: #fff;
  box-shadow: 0 8px 20px -14px rgb(79 70 229 / 0.5);
}

body.ri-site-chrome .rvuser-root .rvuser-progress-fill {
  background: linear-gradient(90deg, #4f46e5 0%, #8b5cf6 52%, #22d3ee 100%);
}

body.ri-site-chrome .rvuser-root .rvuser-upgrade-card,
body.ri-site-chrome .rl-app .rl-upgrade-modal-card {
  background:
    radial-gradient(circle at 18% 24%, rgb(245 158 11 / 0.16), transparent 42%),
    radial-gradient(circle at 90% 18%, rgb(139 92 246 / 0.14), transparent 40%),
    rgb(255 255 255 / 0.94);
}

body.ri-site-chrome .rvuser-root .rvuser-btn-upgrade,
body.ri-site-chrome .rvuser-root .rvuser-upgrade-card::before,
body.ri-site-chrome .rl-app .rl-upgrade-modal-btn-primary,
body.ri-site-chrome .rl-app .rl-upgrade-modal-badge,
body.ri-site-chrome .rl-app .rl-pro-badge,
body.ri-site-chrome .rl-app .rl-pro-corner,
body.ri-site-chrome .rl-app .rl-unlock-btn {
  background: linear-gradient(135deg, #f59e0b 0%, #ef4444 52%, #8b5cf6 100%) !important;
}

body.ri-site-chrome .rvuser-root .rvuser-login-visual-bg {
  background:
    radial-gradient(circle at 20% 20%, rgb(255 255 255 / 0.16), transparent 42%),
    radial-gradient(circle at 90% 10%, rgb(34 211 238 / 0.18), transparent 42%),
    linear-gradient(135deg, #4f46e5 0%, #7c3aed 55%, #2563eb 100%);
}

body.ri-site-chrome .rvuser-root .rvuser-table th {
  background: rgb(238 242 255 / 0.8);
  color: var(--ri-page-soft);
}

body.ri-site-chrome .rvuser-root .rvuser-status-pill,
body.ri-site-chrome .rvuser-root .rvuser-badge-free,
body.ri-site-chrome .rvuser-root .rvuser-session-id {
  background: var(--ri-page-brand-soft);
  color: var(--ri-page-brand);
  border: 1px solid rgb(99 102 241 / 0.16);
}

@media (max-width: 760px) {
  body.ri-site-chrome .rl-app.page-results .workspace,
  body.ri-site-chrome .rvuser-root .rvuser-wrap {
    gap: 1rem;
    padding: 0.85rem;
  }
}