@charset "UTF-8";

/* Import font */
@import url("https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700&display=swap");

/* Root & Light Theme Variables */
:root,
[data-bs-theme="light"] {
  --bs-primary: #f15d22;
  --bs-secondary: #4d5259;
  --bs-primary-rgb: 241, 93, 34;
  --bs-secondary-rgb: 77, 82, 89;
  --bs-font-sans-serif:
    "Lato", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
    Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji",
    "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --bs-font-monospace:
    SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New",
    monospace;
  --bs-gradient: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.15),
    rgba(255, 255, 255, 0)
  );
  --bs-body-font-family: var(--bs-font-sans-serif);
  --bs-body-font-size: 1rem;
  --bs-body-line-height: 1.8;
  --bs-body-color: #1c1c1c;
  --bs-body-bg: #fcfcfc;
  --bs-border-color: #dee2e6;
  --bs-border-color-translucent: #dfe0e4;
  --bs-secondary-color: #6c757d;
  --bs-link-color: var(--bs-primary);
  --bs-link-hover-color: var(--bs-secondary);
  --bs-card-title-color: var(--bs-secondary);
  --bs-breadcrumb-divider: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Cpath d='M2.5 0L1 1.5 3.5 4 1 6.5 2.5 8l4-4-4-4z' fill='currentColor'/%3e%3c/svg%3e");
  --bs-gray-100: #f1f5f9;
  --bs-gray-200: #e2e8f0;
  --bs-gray-300: #cbd5e1;
  --bs-gray-400: #94a3b8;
  --bs-gray-500: #64748b;
  --bs-gray-600: #475569;
  --bs-gray-700: #334155;
  --bs-gray-800: #1e293b;
  --bs-gray-900: #0f172a;
  --bs-gray-1000: #0b1324;

  /* Custom variables */
  --md-font-weight-light: 300;
  --md-font-weight-regular: 400;
  --md-font-weight-bold: 700;

  /* Fluid typography using clamp (MIN, PREFERRED, MAX) */
  --h1-size: clamp(2rem, 5vw, 3rem);
  --h2-size: clamp(1.75rem, 4.5vw, 2.5rem);
  --h3-size: clamp(1.5rem, 4vw, 2rem);
  --h4-size: clamp(1.25rem, 3.5vw, 1.75rem);
  --h5-size: clamp(1rem, 3vw, 1.5rem);
  --body-size: 1rem;
  --line-height-base: 1.6;
}

/* Dark Theme Overrides */
[data-bs-theme="dark"] {
  --bs-secondary: #e9ecef;
  --bs-secondary-rgb: 233, 236, 239;
  --bs-body-color: var(--bs-secondary);
  --bs-body-bg: #212529;
  --bs-border-color: #495057;
  --bs-secondary-color: #adb5bd;
  --bs-card-title-color: var(--bs-body-color);
  --bs-card-bg: #2b3035;
  --bs-card-color: var(--bs-body-color);
  --bs-btn-close-color: var(--bs-body-color);
  --bs-tertiary-bg: #2b3035;
}

/* Box sizing */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Smooth scroll */
@media (prefers-reduced-motion: no-preference) {
  :root {
    scroll-behavior: smooth;
  }
}

/* HTML & Body */
html {
  font-size: 100%;
  height: 100%;
  background-color: var(--bs-body-bg);
}
body {
  height: 100%;
  overflow-x: hidden;
  margin: 0;
  font-family: var(--bs-body-font-family);
  font-size: var(--body-size);
  line-height: var(--line-height-base);
  color: var(--bs-body-color);
  background-color: var(--bs-body-bg);
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: var(--bs-primary);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Links */
a {
  color: var(--bs-primary);
  text-decoration: none;
}
a:hover {
  color: var(--bs-secondary);
}

/* Headings */
h1 {
  font-size: var(--h1-size);
  line-height: 1.2;
  font-weight: var(--md-font-weight-light);
}
h2 {
  font-size: var(--h2-size);
  font-weight: var(--md-font-weight-regular);
}
h3 {
  font-size: var(--h3-size);
  font-weight: var(--md-font-weight-regular);
}
h4 {
  font-size: var(--h4-size);
  font-weight: var(--md-font-weight-regular);
}

/* Inputs */
input {
  padding: 0.5rem 0.75rem;
  font-size: 1rem;
  line-height: 1.25;
  color: var(--bs-body-color);
  background-color: var(--bs-body-bg);
  background-clip: padding-box;
  border: 1px solid var(--bs-border-color);
  border-radius: 0.25rem;
}

/* Labels */
label,
.col-form-label,
.form-check-label {
  color: var(--bs-secondary-rgb);
  font-weight: var(--md-font-weight-light);
  font-size: 0.9375rem;
}

/* Display 4 */
.display-4 {
  font-size: clamp(2.5rem, 6vw, 3rem);
  line-height: 1.2;
}

.cursor-star {
  cursor:
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="%23FFD700"><text x="0" y="20" font-size="20">⭐</text></svg>')
      12 12,
    pointer;
}
.cursor-thumb-up {
  cursor:
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="%23FFD700"><text x="0" y="20" font-size="20">👍</text></svg>')
      12 12,
    pointer;
}
.cursor-thumb-down {
  cursor:
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="%23FFD700"><text x="0" y="20" font-size="20">👎</text></svg>')
      12 12,
    pointer;
}
.cursor-neutral {
  cursor:
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="%23FFD700"><text x="0" y="20" font-size="20">😐</text></svg>')
      12 12,
    pointer;
}
/* Star Rating */
.star-rating {
  display: inline-flex;
  flex-direction: row-reverse;
  cursor: pointer;
  line-height: 1;
}
.star-rating input {
  display: none;
}
.star-rating label {
  padding: 0 2px;
  transition: color 0.2s;
  font-size: 1em;
  line-height: 1;
  display: inline-block;
  cursor: pointer;
}
.star-rating label i.bi,
.star-rating label i.bi-star {
  line-height: 1 !important;
  width: 1em !important;
  height: 1em !important;
}
[data-bs-theme="light"] .star-rating label {
  color: #ddd;
}
[data-bs-theme="dark"] .star-rating label {
  color: #555;
}
/* Change icon to filled and color to yellow on hover */
.star-rating label:hover i::before,
.star-rating label:hover ~ label i::before {
  content: "\f586"; /* bi-star-fill Unicode */
}
.star-rating label:hover,
.star-rating label:hover ~ label {
  color: #ffc107;
}
/* Change icon to filled and color to yellow when checked */
.star-rating input:checked ~ label i::before {
  content: "\f586"; /* bi-star-fill Unicode */
}
.star-rating input:checked ~ label {
  color: #ffc107;
}
.star-rating.is-invalid + .invalid-feedback,
#star-rating-feedback[style*="display: block"] {
  display: block !important;
  width: 100%;
  margin-top: 0.25rem;
  font-size: 0.875em;
  color: #dc3545;
  text-align: center;
}
/* Buttons */
.btn-primary {
  color: #fff;
  background-color: var(--bs-primary);
  border-color: var(--bs-primary);
}
.btn-primary:hover {
  color: #fff;
  background-color: var(--bs-primary);
  border-color: var(--bs-primary);
  opacity: 0.75;
}
.btn-outline-primary {
  color: var(--bs-primary);
  border-color: var(--bs-primary);
}
.btn-outline-primary:hover {
  color: #fff;
  background-color: var(--bs-primary);
  border-color: var(--bs-primary);
  opacity: 0.75;
}

/* Footer */
footer {
  bottom: 0;
  width: 100%;
  height: 3.75rem; /* 60px */
  line-height: 3.75rem;
  margin-top: 1.875rem;
}

/* Utility Classes */
.mw-800 {
  max-width: 800px;
}

/* Added to remove inline styles from platform icons */
.platform-icon-google {
  color: #DA4B3E;
  font-size: 4rem;
}
.platform-icon-facebook {
  color: #3C599B;
  font-size: 4rem;
}

[data-bs-theme="dark"] .card {
  background-color: var(--bs-card-bg) !important;
}