/* Soft Pastel Neobrutalist CSS Theme */
@import url("https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600;700;800&display=swap");

:root {
  /* Soft Pastel Colors */
  --bg-cream: #faf9f7;
  --bg-subtle: #f7f5f2;
  --text-dark: #2d2d2d;
  --pastel-blue: #a8c8ec;
  --pastel-pink: #f4a6cd;
  --pastel-green: #b8e6b8;
  --pastel-yellow: #f5d982;
  --pastel-purple: #d4b5f7;
  --pastel-purple-light: #e8d9f9;
  --pastel-peach: #ffcab0;
  --white: #ffffff;
  --muted-gray: #e8e5e1;
  
  /* Shadows and borders */
  --border-width: 2px;
  --shadow-sm: 2px 2px 0px var(--text-dark);
  --shadow-md: 3px 3px 0px var(--text-dark);
  --shadow-lg: 6px 6px 0px var(--text-dark);
  --radius: 12px;
}

/* Override existing gradient backgrounds */
body {
  background: var(--bg-cream);
  color: var(--text-dark);
  font-family: "Sora", -apple-system, BlinkMacSystemFont, sans-serif;
}

/* Headings with neobrutalist style */
h1, h2, h3, h4, h5, h6 {
  font-family: "Sora", sans-serif;
  font-weight: 700;
  letter-spacing: -0.02em;
}

h1 {
  color: var(--pastel-blue);
  text-shadow: 3px 3px 0px var(--pastel-pink);
}

/* Cards and panels - override existing styles */
.character-detail,
.card {
  background: var(--white);
  border: var(--border-width) solid var(--text-dark);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  backdrop-filter: none;
  transition: all 0.2s ease;
}

/* Photo panel - subtle background */
.photo-panel {
  background: var(--bg-cream);
  border: var(--border-width) solid var(--text-dark);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  backdrop-filter: none;
  transition: all 0.2s ease;
}

/* Selections panel - subtle background */
.selections-panel {
  background: var(--bg-cream);
  border: var(--border-width) solid var(--text-dark);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  backdrop-filter: none;
  transition: all 0.2s ease;
}

/* Character cards base style */
.character-card {
  background: var(--white);
  border: var(--border-width) solid var(--text-dark);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  backdrop-filter: none;
  transition: all 0.2s ease;
}

/* Alternating character card backgrounds for variety */
.character-card:nth-child(5n+1) {
  background: var(--pastel-blue);
}

.character-card:nth-child(5n+2) {
  background: var(--pastel-pink);
}

.character-card:nth-child(5n+3) {
  background: var(--pastel-green);
}

.character-card:nth-child(5n+4) {
  background: var(--pastel-yellow);
}

.character-card:nth-child(5n+5) {
  background: var(--pastel-purple);
}

.character-card:hover,
.card:hover,
.modifier-button:hover {
  transform: translate(3px, 3px);
  box-shadow: 3px 3px 0px var(--text-dark);
}

/* Navigation links as buttons */
.nav-link {
  background: var(--pastel-pink);
  color: var(--text-dark);
  border: var(--border-width) solid var(--text-dark);
  border-radius: var(--radius);
  padding: 12px 24px;
  text-transform: uppercase;
  font-weight: 600;
  box-shadow: var(--shadow-md);
  transition: all 0.2s ease;
  text-decoration: none;
}

.nav-link:hover {
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0px var(--text-dark);
  background: var(--pastel-blue);
}

/* Buttons */
button, .btn, input[type="submit"] {
  background: var(--pastel-blue);
  color: var(--text-dark);
  border: var(--border-width) solid var(--text-dark);
  border-radius: var(--radius);
  padding: 6px 12px;
  font-weight: 700;
  font-size: 16px;
  box-shadow: 4px 4px 0px var(--text-dark);
  cursor: pointer;
  transition: all 0.15s ease;
  font-family: "Sora", sans-serif;
  position: relative;
  top: 0;
  left: 0;
  text-align: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

button:hover, .btn:hover, input[type="submit"]:hover {
  transform: translate(-2px, -2px);
  background: var(--pastel-green);
}

button:active, .btn:active, input[type="submit"]:active {
  transform: translate(2px, 2px);
}

/* Primary button variant */
.btn-primary, button.primary {
  background: var(--pastel-pink);
}

.btn-primary:hover, button.primary:hover {
  background: var(--pastel-purple);
}

/* Secondary button variant */
.btn-secondary, button.secondary {
  background: var(--pastel-yellow);
}

.btn-secondary:hover, button.secondary:hover {
  background: var(--pastel-peach);
}

/* Success button variant */
.btn-success, button.success {
  background: var(--pastel-green);
}

.btn-success:hover, button.success:hover {
  background: var(--pastel-blue);
}

/* Large action buttons like Generate Character */
button.btn-lg,
.btn-lg,
button[onclick*="generate"],
button[onclick*="save"] {
  background: var(--pastel-pink);
  color: var(--text-dark);
  border: 3px solid var(--text-dark);
  padding: 10px 20px;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 1px;
  box-shadow: 6px 6px 0px var(--text-dark);
  text-align: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

button.btn-lg:hover,
.btn-lg:hover,
button[onclick*="generate"]:hover,
button[onclick*="save"]:hover {
  background: var(--pastel-green);
  transform: translate(-3px, -3px);
}

button.btn-lg:active,
.btn-lg:active,
button[onclick*="generate"]:active,
button[onclick*="save"]:active {
  transform: translate(3px, 3px);
}

/* Plus/Add buttons specifically */
button[onclick*="addCustom"], 
.add-btn,
button:has(.plus-icon),
button:contains("+") {
  background: var(--pastel-purple);
  color: var(--text-dark);
  border: var(--border-width) solid var(--text-dark);
  border-radius: var(--radius);
  padding: 6px 12px;
  font-weight: 700;
  font-size: 16px;
  box-shadow: 4px 4px 0px var(--text-dark);
  min-width: auto;
  transition: all 0.15s ease;
}

button[onclick*="addCustom"]:hover,
.add-btn:hover {
  background: var(--pastel-pink);
  transform: translate(-2px, -2px);
}

button[onclick*="addCustom"]:active,
.add-btn:active {
  transform: translate(2px, 2px);
}

/* Vote buttons */
.vote-btn {
  background: var(--white);
  border: 2px solid var(--text-dark);
  padding: 8px 16px;
  border-radius: var(--radius);
  box-shadow: 3px 3px 0px var(--text-dark);
  transition: all 0.15s ease;
}

.vote-btn:hover {
  transform: translate(-1px, -1px);
}

.vote-btn:active {
  transform: translate(1px, 1px);
}

.vote-btn.upvote.active {
  background: var(--pastel-green);
}

.vote-btn.downvote.active {
  background: var(--pastel-pink);
}

.vote-count {
  background: var(--pastel-yellow);
  color: var(--text-dark);
  border: 2px solid var(--text-dark);
  border-radius: var(--radius);
  padding: 4px 12px;
  font-weight: 700;
}

/* Form inputs */
input[type="text"],
input[type="email"],
input[type="password"],
textarea,
select,
.form-input,
.form-textarea,
.form-select {
  background: var(--white);
  border: var(--border-width) solid var(--text-dark);
  border-radius: var(--radius);
  padding: 12px 16px;
  box-shadow: var(--shadow-md);
  transition: all 0.2s ease;
  font-family: "Sora", sans-serif;
}

input:focus,
textarea:focus,
select:focus {
  outline: none;
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0px var(--text-dark);
  border-color: var(--pastel-blue);
}

/* Character specific styles */
.character-name {
  color: var(--pastel-blue);
  text-transform: uppercase;
  font-family: "Sora", sans-serif;
  text-shadow: 2px 2px 0px var(--pastel-pink);
}

.character-catchphrase {
  background: var(--pastel-purple);
  color: var(--text-dark);
  border: var(--border-width) solid var(--text-dark);
  border-radius: var(--radius);
  padding: 10px 20px;
  box-shadow: var(--shadow-sm);
}

.character-details {
  background: var(--pastel-peach);
  color: var(--text-dark);
  border: var(--border-width) solid var(--text-dark);
  border-radius: var(--radius);
  padding: 15px;
  box-shadow: var(--shadow-sm);
}

/* Upload section wrapper */
.upload-section {
  background: var(--pastel-purple);
  border: var(--border-width) solid var(--text-dark);
  border-radius: var(--radius);
  padding: 20px;
  margin-bottom: 20px;
  box-shadow: var(--shadow-md);
}

/* Default images section */
.default-images-grid {
  background: var(--pastel-blue);
  border: var(--border-width) solid var(--text-dark);
  border-radius: var(--radius);
  padding: 16px;
  margin-top: 16px;
  box-shadow: var(--shadow-md);
}

/* Upload label */
.file-upload-label {
  background: var(--white);
  color: var(--text-dark);
  border: var(--border-width) solid var(--text-dark);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  text-transform: uppercase;
  font-weight: 600;
}

.file-upload-label:hover {
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0px var(--text-dark);
  background: var(--pastel-yellow);
}

/* Modifier cards */
.modifier-button {
  background: var(--white);
  border: var(--border-width) solid var(--text-dark);
  border-radius: var(--radius);
  padding: 0;
  box-shadow: var(--shadow-md);
  transition: all 0.2s ease;
  font-size: 16px;
  font-weight: 700;
  text-align: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 45px;
  width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  position: relative;
  line-height: 1;
  cursor: pointer;
}


.modifier-button:hover {
  transform: translateY(-2px); /* lift up */
  box-shadow: 3px 5px 0 var(--text-dark); /* bigger shadow below */
}

.modifier-button:active {
  transform: translateY(1px); /* push down */
  box-shadow: 3px 2px 0 var(--text-dark); /* smaller shadow */
}

.modifier-button.selected {
  background: var(--pastel-green);
  color: var(--text-dark);
  transform: translate(0, 0); /* keep position */
  box-shadow: var(--shadow-md); /* constant shadow */
}

/* Tabs */
.tab-trigger {
  background: var(--pastel-yellow);
  border: var(--border-width) solid var(--text-dark);
  border-radius: var(--radius) var(--radius) 0 0;
  padding: 12px 24px;
  font-weight: 600;
  text-transform: uppercase;
  box-shadow: var(--shadow-sm);
  margin-right: 4px;
}

.tab-trigger:hover {
  background: var(--pastel-peach);
  transform: translateY(-2px);
}

.tab-trigger.active {
  background: var(--pastel-green);
  color: var(--text-dark);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

/* Loading and messages */
.loading {
  color: var(--text-dark);
  text-transform: uppercase;
  font-weight: 600;
}

.error {
  background: var(--pastel-pink);
  color: var(--text-dark);
  border: var(--border-width) solid var(--text-dark);
  border-radius: var(--radius);
  padding: 20px;
  box-shadow: var(--shadow-md);
}

/* Tab content wrappers - each with different colors */
.tab-content {
  border: var(--border-width) solid var(--text-dark);
  border-radius: var(--radius);
  padding: 20px;
  box-shadow: var(--shadow-md);
}

/* Haircut tab - blue */
#haircut-tab {
  background: var(--pastel-blue);
}

/* Outfit tab - pink */
#outfit-tab {
  background: var(--pastel-pink);
}

/* Accessories tab - purple */
#accessories-tab {
  background: var(--pastel-purple);
}

.no-image {
  background: var(--muted-gray);
  border: var(--border-width) solid var(--text-dark);
  border-radius: var(--radius);
  color: var(--text-dark);
  font-weight: 600;
  text-transform: uppercase;
}

/* Filter controls */
.filter-controls {
  background: var(--white);
  border: var(--border-width) solid var(--text-dark);
  border-radius: var(--radius);
  padding: 20px;
  margin-bottom: 20px;
  box-shadow: var(--shadow-md);
}

/* Sidebars */
.base-image-picker, .modifiers-picker {
  background: var(--white);
  border: none;
  box-shadow: none;
}

.base-image-picker {
  border-right: 3px solid var(--text-dark);
}

.modifiers-picker {
  border-left: 3px solid var(--text-dark);
}

.sidebar-toggle {
  background: var(--pastel-yellow);
  border: 3px solid var(--text-dark);
  box-shadow: var(--shadow-md);
  font-family: "Sora", sans-serif;
  color: var(--text-dark);
}

.sidebar-toggle:hover {
  background: var(--pastel-green);
  transform: scale(1.1);
  box-shadow: var(--shadow-lg);
}

.sidebar-content h3 {
  color: var(--text-dark);
  font-family: "Sora", sans-serif;
  font-weight: 700;
}

.sidebar-images-grid img {
  border: 3px solid var(--text-dark);
  box-shadow: var(--shadow-sm);
  border-radius: var(--radius);
}

.sidebar-images-grid img:hover {
  transform: scale(1.05);
  box-shadow: var(--shadow-md);
  border-color: var(--pastel-blue);
}

.sidebar-images-grid img.selected {
  border-color: var(--pastel-green);
  box-shadow: var(--shadow-lg);
}

.sidebar-images-grid .upload-photo-btn {
  border: 3px solid var(--text-dark);
  box-shadow: var(--shadow-sm);
  border-radius: var(--radius);
  background: var(--bg-white);
  cursor: pointer;
  transition: all 0.2s ease;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sidebar-images-grid .upload-photo-btn:hover {
  transform: scale(1.05);
  box-shadow: var(--shadow-md);
  border-color: var(--pastel-purple);
  background: var(--pastel-purple-light);
}

.sidebar-section {
  background: var(--bg-subtle);
  border: var(--border-width) solid var(--text-dark);
  border-radius: var(--radius);
  padding: 16px;
  margin-bottom: 20px;
  box-shadow: var(--shadow-sm);
}


/* Override any remaining gradient backgrounds */
.container {
  background: transparent;
}

/* Success/info messages */
.success-message {
  background: var(--pastel-green);
  color: var(--text-dark);
  border: var(--border-width) solid var(--text-dark);
  border-radius: var(--radius);
  padding: 15px;
  box-shadow: var(--shadow-md);
}

/* Make images fit better */
.character-image,
.file-preview img,
img.result-image {
  /* Border hugs the image edge with no gap */
  border: var(--border-width) solid var(--text-dark);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  box-sizing: border-box; /* include border in element size */
  display: block;         /* avoid inline gaps affecting layout */
}

/* When the wrapper uses .result-image, make the inner img respect the wrapper radius */
.result-image img { 
  border-radius: inherit; 
}

/* Ensure the photo scales to fit while preserving aspect ratio, so the border matches the visible photo edges */
.result-image img,
.result-area img,
img.result-image {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
}

/* Only for wrapper divs with class .result-image: center content and avoid extra styling */
.result-image:not(img) {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: transparent;
}

/* Custom Scrollbar Styling */
::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}

::-webkit-scrollbar-track {
  background: var(--bg-cream);
  border: var(--border-width) solid var(--text-dark);
}

::-webkit-scrollbar-thumb {
  background: var(--pastel-pink);
  border: var(--border-width) solid var(--text-dark);
  border-radius: var(--radius);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--pastel-purple);
}

::-webkit-scrollbar-corner {
  background: var(--bg-cream);
}

/* Firefox scrollbar */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--pastel-pink) var(--bg-cream);
}

/* Custom option input sections */
.custom-modifier {
  background: rgba(255, 255, 255, 0.5);
  border: var(--border-width) solid var(--text-dark);
  border-radius: var(--radius);
  padding: 12px;
  margin-bottom: 16px;
  box-shadow: var(--shadow-md);
}

/* Custom modifiers in each category get a slightly different tint */
#haircut-tab .custom-modifier {
  background: rgba(255, 255, 255, 0.6);
  border-color: var(--text-dark);
}

#outfit-tab .custom-modifier {
  background: rgba(255, 255, 255, 0.6);
  border-color: var(--text-dark);
}

#accessories-tab .custom-modifier {
  background: rgba(255, 255, 255, 0.6);
  border-color: var(--text-dark);
}

/* Action buttons wrapper */
.action-buttons {
  background: var(--pastel-peach);
  border: var(--border-width) solid var(--text-dark);
  border-radius: var(--radius);
  padding: 20px;
  margin-top: 20px;
  margin-bottom: 20px;
  box-shadow: var(--shadow-md);
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}

.custom-modifier input[type="text"] {
  background: var(--white);
  border: var(--border-width) solid var(--text-dark);
  border-radius: var(--radius);
  padding: 8px 12px;
  margin-right: 8px;
  flex: 1;
}

.custom-modifier button {
  background: var(--pastel-purple);
  color: var(--text-dark);
  border: var(--border-width) solid var(--text-dark);
  border-radius: var(--radius);
  padding: 8px 16px;
  font-weight: 600;
  text-transform: uppercase;
  box-shadow: 3px 3px 0px var(--text-dark);
  transition: all 0.15s ease;
}

.custom-modifier button:hover {
  background: var(--pastel-pink);
  transform: translate(-2px, -2px);
  box-shadow: 5px 5px 0px var(--text-dark);
}

.custom-modifier button:active {
  transform: translate(2px, 2px);
  box-shadow: 1px 1px 0px var(--text-dark);
}

/* Section titles with color */
.section-title {
  color: var(--text-dark);
  font-weight: 700;
  font-family: "Sora", sans-serif;
  padding: 0 0 8px 0;
  background: transparent;
  border: none;
  margin-bottom: 16px;
  box-shadow: none;
  display: block;
}
