/* XRExtras / 8th Wall system UI → portal / Коложа look */

:root {
  --xr8-ink: #1e2618;
  --xr8-moss: #2f3d28;
  --xr8-leaf: #5a6e4a;
  --xr8-bronze: #6a5a3a;
  --xr8-cream: #f4efe6;
  --xr8-mist: rgba(244, 239, 230, 0.92);
  --xr8-serif: Georgia, "Times New Roman", Times, serif;
  --xr8-sans: Nunito, "Nunito-SemiBold", system-ui, sans-serif;
}

/* —— Loading backdrop + spinner —— */
#loadingContainer {
  font-family: var(--xr8-sans) !important;
}

#loadBackground {
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(90, 110, 74, 0.35), transparent 55%),
    linear-gradient(180deg, #2f3d28 0%, #1e2618 100%) !important;
}

/* Hide default purple gradient spinner; CSS ring below */
#loadImage {
  opacity: 0 !important;
  pointer-events: none !important;
}

#loadImageContainer::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 3.25rem;
  height: 3.25rem;
  margin: -1.625rem 0 0 -1.625rem;
  border-radius: 50%;
  border: 3px solid rgba(244, 239, 230, 0.22);
  border-top-color: var(--xr8-cream);
  animation: xr8-spin 0.85s linear infinite;
  z-index: 2;
}

#loadImageContainer.xr8-brand-spinner::before {
  display: none;
}

#loadImageContainer.xr8-brand-spinner #loadImage {
  opacity: 1 !important;
  width: 4.5rem !important;
  height: 4.5rem !important;
  margin-top: -2.25rem !important;
  margin-left: -2.25rem !important;
  border-radius: 1rem;
  object-fit: contain;
  filter: drop-shadow(0 8px 24px rgba(0, 0, 0, 0.35));
}

@keyframes xr8-spin {
  to { transform: rotate(360deg); }
}

/* —— Camera permission banner —— */
#requestingCameraPermissions {
  color: var(--xr8-cream) !important;
  background:
    linear-gradient(180deg, rgba(47, 61, 40, 0.98), rgba(30, 38, 24, 0.96)) !important;
  font-family: var(--xr8-serif) !important;
  font-size: clamp(1.05rem, 3.8vw, 1.35rem) !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em;
  padding: 2.5vh 1.25rem 2vh !important;
  box-shadow: 0 12px 32px rgba(12, 16, 10, 0.35);
}

#requestingCameraIcon {
  height: 4.5vh !important;
  margin-bottom: 1.25vh !important;
  filter: brightness(0) saturate(100%) invert(94%) sepia(12%) saturate(320%) hue-rotate(8deg);
}

/* —— iOS motion / permission modal —— */
body:not(.xrextras-old-style) .prompt-box-8w,
.prompt-box-8w {
  background:
    linear-gradient(165deg, rgba(255, 252, 245, 0.98), rgba(236, 228, 212, 0.95)) !important;
  color: var(--xr8-ink) !important;
  border-radius: 1.35rem !important;
  border: 1px solid rgba(58, 48, 32, 0.16) !important;
  box-shadow:
    0 18px 44px rgba(30, 38, 24, 0.22),
    0 2px 0 rgba(255, 255, 255, 0.35) inset !important;
  font-family: var(--xr8-sans) !important;
  padding: 1.35rem 1.25rem 1.15rem !important;
}

.prompt-box-8w p,
.prompt-box-8w strong {
  color: var(--xr8-ink) !important;
  font-family: var(--xr8-serif) !important;
}

body:not(.xrextras-old-style) .prompt-button-8w,
.prompt-button-8w {
  background: var(--xr8-mist) !important;
  color: var(--xr8-ink) !important;
  border: none !important;
  border-radius: 999px !important;
  font-family: var(--xr8-serif) !important;
  font-weight: 600 !important;
  min-height: 2.75rem;
  padding: 0.65rem 1.35rem !important;
  box-shadow: 0 4px 14px rgba(20, 28, 18, 0.12);
}

body:not(.xrextras-old-style) .button-primary-8w,
.button-primary-8w {
  background: linear-gradient(135deg, var(--xr8-leaf), var(--xr8-moss)) !important;
  color: var(--xr8-cream) !important;
  border: none !important;
  border-radius: 999px !important;
  font-family: var(--xr8-serif) !important;
  font-weight: 600 !important;
  min-height: 2.75rem;
  padding: 0.65rem 1.35rem !important;
  box-shadow: 0 4px 18px rgba(20, 28, 18, 0.35);
}

/* —— Action buttons (errors / start AR) —— */
.main-button,
.start-ar-button,
.copy-link-btn,
#error_copy_link_btn {
  background: linear-gradient(135deg, var(--xr8-leaf), var(--xr8-moss)) !important;
  color: var(--xr8-cream) !important;
  border: none !important;
  border-radius: 999px !important;
  font-family: var(--xr8-serif) !important;
  font-weight: 600 !important;
  box-shadow: 0 4px 18px rgba(20, 28, 18, 0.35) !important;
}

.main-button:hover,
.start-ar-button:hover,
.copy-link-btn:hover,
#error_copy_link_btn:hover {
  filter: brightness(1.08);
}

/* —— Permission / almost-there / error screens —— */
#almostthereContainer,
#cameraPermissionsErrorApple,
#microphonePermissionsErrorApple,
#cameraPermissionsErrorAndroid,
#microphonePermissionsErrorAndroid,
#deviceMotionErrorApple,
#linkOutViewAndroid,
#copyLinkViewAndroid,
.permission-error {
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(90, 110, 74, 0.28), transparent 55%),
    linear-gradient(180deg, #2f3d28 0%, #1e2618 100%) !important;
  color: var(--xr8-cream) !important;
  font-family: var(--xr8-sans) !important;
}

#cameraPermissionsErrorAppleMessage,
#microphonePermissionsErrorAppleMessage,
.bottom-message,
.loading-error-header,
.loading-error-footer,
.loading-error-instructions,
.error-text-header,
.error-text-detail,
.error-text-hint,
.desktop-message,
.highlight {
  color: var(--xr8-cream) !important;
}

.loading-error-header,
.error-text-header {
  font-family: var(--xr8-serif) !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em;
}

.loading-error-instructions > li:before {
  background-color: var(--xr8-leaf) !important;
  color: var(--xr8-cream) !important;
}

.camera-instruction-block {
  background-color: rgba(244, 239, 230, 0.16) !important;
  color: var(--xr8-cream) !important;
  border-radius: 0.5rem;
}

.camera-instruction-button {
  background-color: var(--xr8-leaf) !important;
}

.highlight {
  font-family: var(--xr8-serif) !important;
  color: #e8dcc4 !important;
}