/* Import Public Sans font */
@import url('https://fonts.googleapis.com/css2?family=Public+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap');

/* CSS Variables */
:root {
  /* Font */
  --font-family: "Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
  --font-size-base: 0.9375rem;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --line-height-base: 1.375;
  
  /* Colors */
  --primary: #6366f1;
  --primary-dark: #4f46e5;
  --body-color: #6d6b77;
  --heading-color: #444050;
  --emphasis-color: #2f2b3d;
  --body-bg: #f8f7fa;
  --link-color: #7367f0;
  --link-hover: #685dd8;
  --border-color: #e6e6e8;
  --primary-bg-subtle: #e3e1fc;
  
  /* Shadows */
  --shadow-sm: 0 0.125rem 0.5rem 0 rgba(47, 43, 61, 0.12);
  --shadow: 0 0.1875rem 0.75rem 0 rgba(47, 43, 61, 0.14);
  --shadow-lg: 0 0.25rem 1.125rem 0 rgba(47, 43, 61, 0.16);
  
  /* Border Radius */
  --radius: 0.375rem;
  --radius-lg: 0.5rem;
  --radius-xl: 0.625rem;
}

/* Base Styles */
body {
  font-family: var(--font-family) !important;
  font-size: var(--font-size-base) !important;
  font-weight: var(--font-weight-normal) !important;
  line-height: var(--line-height-base) !important;
  color: var(--body-color) !important;
  background-color: var(--body-bg) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Headings */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--font-family) !important;
  font-weight: 500 !important;
  line-height: 1.37 !important;
  color: var(--heading-color) !important;
}

/* Links */
a {
  color: var(--link-color) !important;
  text-decoration: none;
  transition: color 0.3s ease;
}

a:hover {
  color: var(--link-hover) !important;
}

/* Buttons - Primary */
button.primary,
button[type="submit"],
.btn-primary,
[class*="btn-primary"],
input[type="submit"].primary {
  background-color: var(--primary) !important;
  border-color: var(--primary) !important;
  color: white !important;
  font-weight: 500 !important;
  border-radius: var(--radius-lg) !important;
  padding: 0.75rem 1.5rem !important;
  transition: all 0.3s ease !important;
}

button.primary:hover,
button[type="submit"]:hover,
.btn-primary:hover,
[class*="btn-primary"]:hover,
input[type="submit"].primary:hover {
  background-color: var(--primary-dark) !important;
  border-color: var(--primary-dark) !important;
  color: white !important;
  transform: translateY(-1px);
  box-shadow: var(--shadow);
}

/* Buttons - Secondary/Outline */
button.secondary,
.btn-secondary,
[class*="btn-secondary"],
button.outline,
.btn-outline-primary {
  background-color: transparent !important;
  border: 1px solid var(--primary) !important;
  color: var(--primary) !important;
  font-weight: 500 !important;
  border-radius: var(--radius-lg) !important;
  padding: 0.75rem 1.5rem !important;
  transition: all 0.3s ease !important;
}

button.secondary:hover,
.btn-secondary:hover,
[class*="btn-secondary"]:hover,
button.outline:hover,
.btn-outline-primary:hover {
  background-color: var(--primary) !important;
  color: white !important;
}

/* Cards */
.card,
[class*="card"],
[class*="Card"] {
  background: white !important;
  border-radius: var(--radius-lg) !important;
  border: 1px solid var(--border-color) !important;
  box-shadow: var(--shadow-sm) !important;
  transition: all 0.3s ease !important;
}

.card:hover,
[class*="card"]:hover,
[class*="Card"]:hover {
  box-shadow: var(--shadow) !important;
  transform: translateY(-2px);
}

/* Badges/Tags */
.badge,
[class*="badge"],
[class*="Badge"],
.tag,
[class*="tag"],
[class*="Tag"] {
  font-family: var(--font-family) !important;
  font-weight: 500 !important;
}

.badge-primary,
[class*="badge-primary"] {
  background-color: var(--primary) !important;
  color: white !important;
  padding: 0.375rem 0.75rem !important;
  border-radius: var(--radius) !important;
  font-size: 0.75rem !important;
  font-weight: 600 !important;
}

/* Form Inputs */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
textarea,
select {
  font-family: var(--font-family) !important;
  font-size: var(--font-size-base) !important;
  color: var(--body-color) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: var(--radius) !important;
  padding: 0.5rem 0.75rem !important;
  transition: all 0.3s ease !important;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
textarea:focus,
select:focus {
  border-color: var(--primary) !important;
  outline: none !important;
  box-shadow: 0 0 0 0.15rem rgba(99, 102, 241, 0.25) !important;
}

/* Primary text color */
.text-primary,
[class*="text-primary"] {
  color: var(--primary) !important;
}

/* Background colors */
.bg-primary,
[class*="bg-primary"] {
  background-color: var(--primary) !important;
}   

.bg-body,
[class*="bg-body"] {
  background-color: var(--body-bg) !important;
}

.bg-label-primary {
  background-color: var(--primary-bg-subtle) !important;
  color: var(--primary) !important;
}

/* Modelist.app Link - Make it subtle but appealing */
a[href="https://modelist.app"],
a[href*="modelist.app"] {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.375rem !important;
  background: transparent !important;
  color: var(--primary) !important;
  padding: 0.5rem 0.875rem !important;
  border-radius: var(--radius) !important;
  font-weight: 500 !important;
  font-size: 0.875rem !important;
  border: 1px solid var(--primary-bg-subtle) !important;
  transition: all 0.3s ease !important;
  text-decoration: none !important;
  margin-top: 1rem !important;
}

a[href="https://modelist.app"]:hover,
a[href*="modelist.app"]:hover {
  background: var(--primary-bg-subtle) !important;
  color: var(--primary-dark) !important;
  border-color: var(--primary) !important;
}

/* Add arrow icon after Modelist.app link */
a[href="https://modelist.app"]::after,
a[href*="modelist.app"]::after {
  content: "→" !important;
  font-size: 0.875rem !important;
  transition: transform 0.3s ease !important;
  display: inline-block !important;
}

a[href="https://modelist.app"]:hover::after,
a[href*="modelist.app"]:hover::after {
  transform: translateX(2px) !important;
}

/* Suggestion input/button - Make it clear this is for adding ideas */
input[placeholder*="suggestion"],
input[placeholder*="idea"],
button[placeholder*="suggestion"],
button[placeholder*="idea"],
textarea[placeholder*="suggestion"],
textarea[placeholder*="idea"] {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%) !important;
  color: white !important;
  border: none !important;
  border-radius: var(--radius-lg) !important;
  padding: 0.875rem 1.5rem !important;
  font-weight: 600 !important;
  font-size: 1rem !important;
  box-shadow: var(--shadow-sm) !important;
  transition: all 0.3s ease !important;
  width: 100% !important;
  margin-top: 1.25rem !important;
}

input[placeholder*="suggestion"]:hover,
input[placeholder*="idea"]:hover,
button[placeholder*="suggestion"]:hover,
button[placeholder*="idea"]:hover,
textarea[placeholder*="suggestion"]:hover,
textarea[placeholder*="idea"]:hover {
  background: linear-gradient(135deg, var(--primary-dark) 0%, #4338ca 100%) !important;
  box-shadow: var(--shadow) !important;
  transform: translateY(-2px) !important;
}

input[placeholder*="suggestion"]::placeholder,
input[placeholder*="idea"]::placeholder,
textarea[placeholder*="suggestion"]::placeholder,
textarea[placeholder*="idea"]::placeholder {
  color: rgba(255, 255, 255, 0.9) !important;
}

/* Powered by Fider - Make it subtle */
a[href*="fider"],
[class*="fider"],
[class*="Fider"],
*:contains("Powered by Fider"),
*:contains("Fider") {
  font-size: 0.75rem !important;
  color: rgba(109, 107, 119, 0.6) !important;
  text-decoration: none !important;
  opacity: 0.7 !important;
  transition: opacity 0.3s ease !important;
  background: transparent !important;
  border: none !important;
  padding: 0.5rem 0 !important;
  box-shadow: none !important;
  font-weight: 400 !important;
}

a[href*="fider"]:hover,
[class*="fider"]:hover,
[class*="Fider"]:hover {
  opacity: 1 !important;
  color: rgba(109, 107, 119, 0.8) !important;
}

/* Remove button styling from Powered by Fider if it has one */
a[href*="fider"]::after,
[class*="fider"]::after,
[class*="Fider"]::after {
  display: none !important;
}