:root {
  --fior-bg: #f5f7fa;
  --fior-text: #111111;
  --fior-text-soft: #5f6368;
  --fior-border: #d9dfe7;
  --fior-dark: #1f2937;
  --fior-dark-2: #111827;
  --fior-primary: #3b82f6;
  --fior-primary-dark: #2563eb;
  --fior-danger: #b42318;
}

html,
body {
  height: 100%;
  min-height: 100%;
}

body {
  margin: 0;
  background: var(--fior-bg);
  color: var(--fior-text);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
}

.site-shell {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.site-content {
  flex: 1 0 auto;
}

.fior-footer {
  margin-top: auto;
  flex-shrink: 0;
  padding: 1rem 0;
  background: var(--fior-dark-2);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.95rem;
  text-align: center;
}

.fior-footer-link {
  color: var(--fior-primary);
  text-decoration: none;
}

.fior-footer-link:hover,
.fior-footer-link:focus {
  color: var(--fior-primary);
  text-decoration: underline;
}

/* Header */

.fior-navbar {
  background: var(--fior-dark);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.fior-brand {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 92px;
  height: 52px;
  padding: 0;
  border: 2px solid rgba(255, 255, 255, 0.85);
  border-radius: 1rem;
  overflow: hidden;
  background: transparent;
  flex: 0 0 auto;
}

.fior-brand:hover,
.fior-brand:focus {
  color: #fff;
}

.fior-brand-logo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.fior-navbar-toggler {
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 0.9rem;
  padding: 0.45rem 0.7rem;
}

.fior-navbar-toggler:focus {
  box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.15);
}

.fior-navbar .navbar-toggler-icon {
  filter: invert(1);
}

.fior-nav-links .btn,
.fior-nav-links form .btn {
  white-space: nowrap;
}

/* Floating alerts */

.floating-alerts {
  position: fixed;
  top: 94px;
  left: 50%;
  transform: translateX(-50%);
  width: min(1140px, calc(100% - 32px));
  z-index: 1080;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.floating-alert {
  pointer-events: auto;
  margin-bottom: 0;
}

.alert-list {
  margin: 0;
  padding-left: 1.25rem;
}

.alert-list li + li {
  margin-top: 0.35rem;
}

/* Shared layout */

.page-home .container,
.page-dashboard .container {
  max-width: 1140px;
}

.list-group-item {
  background: transparent;
}

.text-bg-warning {
  color: #5c3b00 !important;
}

.modal-content {
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.12);
}

.modal-header {
  border-bottom: 1px solid #eceff3;
}

.recent-excerpt,
.modal-body .recent-excerpt {
  border-top: 1px solid #eceff3;
  padding-top: 1rem;
}

/* Chrome Web Store CTA on the home page */

.fior-ext-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  background-color: #ffffff;
  border-color: var(--fior-border);
  color: var(--fior-dark);
  --bs-btn-focus-shadow-rgb: 217, 223, 231;
}

.fior-ext-btn:hover,
.fior-ext-btn:focus {
  background-color: #f8fafc;
  border-color: #c3ccd8;
  color: var(--fior-dark);
}

.fior-ext-btn__logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
}

.fior-ext-btn__logo svg {
  display: block;
  width: 24px;
  height: 24px;
}

/* Landing page product shots. Scale with the column so they sit side by side on
   normal screens and stack on small ones, without ever overflowing. The images
   carry their own browser frame, corners and shadow on a transparent background,
   so no border or radius is applied here. */
.fior-shot {
  display: block;
  width: 100%;
  height: auto;
}

.fior-cta-text {
  font-family: "Poppins", system-ui, -apple-system, sans-serif;
  font-weight: 400;
}

.fior-cta-text a {
  color: var(--fior-primary);
  text-decoration: none;
}

.fior-cta-text a:hover,
.fior-cta-text a:focus {
  text-decoration: underline;
}

/* Dashboard recent results */

.min-w-0 {
  min-width: 0;
}

.recent-result-url {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.recent-result-actions {
  flex: 0 0 auto;
}

@media (max-width: 991.98px) {
  .recent-result-url {
    white-space: normal;
    overflow-wrap: anywhere;
  }
}

/* Buttons */

.btn-primary {
  background-color: var(--fior-primary);
  border-color: var(--fior-primary);
  --bs-btn-focus-shadow-rgb: 59, 130, 246;
}

.btn-primary:hover,
.btn-primary:focus {
  background-color: var(--fior-primary-dark);
  border-color: var(--fior-primary-dark);
}

.btn-outline-light:hover,
.btn-outline-light:focus {
  color: var(--fior-dark);
  background: #fff;
  border-color: #fff;
}

/* Auth pages */

.auth-page {
  min-height: calc(100vh - 180px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 16px 56px;
}

.auth-box {
  width: 100%;
  max-width: 500px;
  background: #ffffff;
  border-radius: 1.5rem;
  box-shadow: 0 8px 24px rgba(17, 24, 39, 0.08);
  padding: 44px 48px 42px;
}

.auth-box__title {
  margin: 0 0 28px;
  font-size: 3rem;
  line-height: 1.08;
  font-weight: 800;
  text-align: center;
  color: #1f2937;
}

.auth-box__subline {
  margin: 0 0 24px;
  font-size: 1rem;
  line-height: 1.6;
  color: #111111;
}

.auth-box__subline a,
.auth-box__links a {
  color: var(--fior-primary);
  text-decoration: none;
}

.auth-box__subline a:hover,
.auth-box__links a:hover {
  text-decoration: underline;
}

.auth-box__form {
  margin: 0;
}

.auth-box__field {
  margin-bottom: 24px;
}

.auth-box__field label {
  display: block;
  margin-bottom: 10px;
  font-size: 1rem;
  font-weight: 700;
  color: #111111;
}

.auth-box__form input,
.auth-box__form input[type="email"],
.auth-box__form input[type="password"],
.auth-box__form input[type="text"] {
  display: block;
  width: 100%;
  min-height: 54px;
  padding: 0.9rem 1rem;
  border: 1px solid #cfd8e3;
  border-radius: 1rem;
  font-size: 0.98rem;
  background: #f8fbff;
  color: #111111;
}

.auth-box__form input:focus,
.auth-box__form input[type="email"]:focus,
.auth-box__form input[type="password"]:focus,
.auth-box__form input[type="text"]:focus {
  border-color: var(--fior-primary);
  box-shadow: 0 0 0 0.2rem rgba(59, 130, 246, 0.14);
  background: #f3f8ff;
  outline: none;
}

.auth-box__help {
  margin-top: 12px;
  color: #111111;
  font-size: 0.9rem;
  line-height: 1.55;
}

.auth-box__help ul {
  margin: 0;
  padding-left: 1.3rem;
}

.auth-box__help li {
  margin-bottom: 0.28rem;
}

.auth-box__help--soft {
  color: var(--fior-text-soft);
}

.auth-box__checkbox {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 24px;
}

.auth-box__checkbox input[type="checkbox"] {
  width: 1rem;
  min-height: 1rem;
  height: 1rem;
  margin: 0;
  padding: 0;
}

.auth-box__submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 54px;
  width: 100%;
  border-radius: 999px;
  font-size: 1rem;
  font-weight: 700;
  margin-top: 4px;
}

.auth-box__submit--half {
  width: auto;
  min-width: 180px;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}

.auth-box__links {
  margin-top: 20px;
  text-align: left;
  font-size: 0.95rem;
}

.auth-box__links > div + div {
  margin-top: 8px;
}

.auth-box__copy {
  margin-bottom: 24px;
  color: var(--fior-text-soft);
  font-size: 0.98rem;
  line-height: 1.7;
}

/* Settings page */

.settings-page {
  padding: 40px 16px 56px;
}

.settings-stack {
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
}

.settings-main-card {
  background: #ffffff;
  border: 1px solid #e9edf3;
  border-radius: 1.5rem;
  box-shadow: 0 8px 24px rgba(17, 24, 39, 0.08);
  padding: 44px 48px 42px;
}

.settings-main-card + .settings-main-card {
  margin-top: 28px;
}

.settings-main-card--danger {
  border-color: #f3d1d1;
  background: #fffdfd;
}

.settings-page__title {
  margin: 0 0 28px;
  font-size: 3rem;
  line-height: 1.08;
  font-weight: 800;
  text-align: center;
  color: #1f2937;
}

.delete-account-box__title {
  margin: 0 0 0.75rem;
  font-size: 1.5rem;
  font-weight: 800;
  color: #111111;
}

.delete-account-box__copy {
  margin: 0 0 1.25rem;
  color: var(--fior-text-soft);
  font-size: 0.98rem;
  line-height: 1.7;
}

.delete-account-box__button {
  min-height: 48px;
  border-radius: 999px;
  padding: 0 1.25rem;
  font-weight: 700;
}

/* Responsive */

@media (max-width: 767.98px) {
  .fior-navbar .container-fluid {
    align-items: flex-start;
  }

  .fior-navbar .navbar-collapse {
    width: 100%;
  }

  .fior-nav-links {
    width: 100%;
    padding-top: 0.75rem;
  }

  .fior-nav-links .btn,
  .fior-nav-links form,
  .fior-nav-links form .btn {
    width: 100%;
  }
}

@media (max-width: 575.98px) {
  .auth-page {
    padding: 24px 12px 40px;
  }

  .auth-box {
    max-width: 100%;
    padding: 30px 20px 28px;
    border-radius: 1.25rem;
  }

  .auth-box__title {
    font-size: 2.35rem;
    margin-bottom: 22px;
  }

  .auth-box__field {
    margin-bottom: 20px;
  }

  .auth-box__form input,
  .auth-box__form input[type="email"],
  .auth-box__form input[type="password"],
  .auth-box__form input[type="text"] {
    min-height: 52px;
    font-size: 0.96rem;
  }

  .auth-box__submit {
    min-height: 52px;
    font-size: 0.98rem;
  }

  .settings-main-card {
    padding: 28px 20px 24px;
    border-radius: 1.25rem;
  }

  .settings-page__title {
    font-size: 2.35rem;
    margin-bottom: 22px;
  }
}

.fior-footer-legal {
  font-size: 0.9rem;
}

.fior-footer-legal span {
  color: rgba(255, 255, 255, 0.45);
  margin: 0 0.35rem;
}

.disclaimer-copy p + p {
  margin-top: 1rem;
}

.legal-copy p + p {
  margin-top: 1rem;
}

.legal-copy ul {
  margin-top: 0.75rem;
  padding-left: 1.25rem;
}

.legal-copy li + li {
  margin-top: 0.35rem;
}

.cookie-banner {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 16px;
  z-index: 1090;
}

.cookie-banner__inner {
  max-width: 980px;
  margin: 0 auto;
  background: #ffffff;
  border: 1px solid #d9dfe7;
  border-radius: 1rem;
  box-shadow: 0 12px 28px rgba(17, 24, 39, 0.12);
  padding: 14px 16px;
  display: flex;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
}

.cookie-banner__text {
  color: var(--fior-text-soft);
  font-size: 0.95rem;
  line-height: 1.5;
}

.cookie-banner__text a {
  color: var(--fior-primary);
  text-decoration: underline;
}

/* Decline sits to the left of Accept, both grouped hard right of the text. */
.cookie-banner__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-shrink: 0;
}

/* Narrow screens: text on its own line, the two buttons side by side beneath it. */
@media (max-width: 767.98px) {
  .cookie-banner__inner {
    flex-direction: column;
    align-items: stretch;
  }

  .cookie-banner__actions .btn {
    flex: 1 1 0;
  }
}

.fior-footer-legal {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.82);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.35rem;
}

.fior-footer-copy {
  color: rgba(255, 255, 255, 0.82);
  font-weight: 400;
}

.fior-footer-link {
  color: #3b82f6;
  text-decoration: none;
  font-weight: 400;
}

.fior-footer-link:hover,
.fior-footer-link:focus {
  color: #60a5fa;
  text-decoration: underline;
}

.fior-footer-legal span {
  color: rgba(255, 255, 255, 0.45);
}