/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

@import "tailwindcss";

.permanent-marker-regular {
  font-family: "Permanent Marker", cursive;
  font-weight: 400;
  font-style: normal;
}


/* Choices.js base CSS is loaded by a <link> in layouts/application.html.erb: an @import
   here would sit after a rule, which CSS forbids, and the browser would drop it. */

/* Custom Choices.js styling for AVO */
.choices {
  margin-bottom: 0;
  width: 100%;
}

.choices__inner {
  border-radius: 6px;
  border: 1px solid #d1d5db;
  min-height: 38px;
  padding: 7.5px 11px 3.5px;
}

.choices__inner:focus {
  border-color: #3b82f6;
  outline: 0;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.choices__list--dropdown {
  border: 1px solid #d1d5db;
  border-radius: 6px;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  max-height: 300px;
}

.choices__item--choice {
  padding: 8px 12px;
}

.choices__item--choice:hover {
  background-color: #f3f4f6;
}

/* Choices treats hover as the highlighted state, so this is the only hover/keyboard
   styling that matters. Same in both themes: black text needs the light background. */
.choices__item--choice.is-highlighted {
  background-color: #3b82f6;
  color: black;
}

/* Option thumbnails (see choices_controller.js). :has scopes this to options that carry
   one, so plain text options keep the stock block layout. */
.choices__item:has(> .choices__thumb) {
  display: flex;
  align-items: center;
  gap: 8px;
}

.choices__thumb {
  width: 35px;
  height: 35px;
  object-fit: contain;
  flex-shrink: 0;
}

/* Dark theme for Choices.js (values from dark-base-200/500/content in dim-theme.css) */
html.dark .choices__inner,
html.dark .choices__list--dropdown {
  background: oklch(17% 0.025 240);
  border-color: oklch(34% 0.03 240);
  color: oklch(84% 0.02 240);
}

/* Hide original select when enhanced with choices.js */
select[data-choices-initialized="true"] {
  display: none !important;
}

/* Ensure choices container fits AVO styling */
.avo-choices {
  width: 100%;
}

/* Calculator specific styles */
.calculator-container {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* Override any default form styles */
input[type="number"], select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: 1px solid #d1d5db;
  border-radius: 0.375rem;
  padding: 0.5rem 0.75rem;
}

/* Button hover effects */
.btn-tension:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* CookieConsent black & white theme (adapts to dark mode) */
#cc-main {
  --cc-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --cc-bg: #ffffff;
  --cc-primary-color: #000000;
  --cc-secondary-color: #333333;

  --cc-btn-primary-bg: #000000;
  --cc-btn-primary-color: #ffffff;
  --cc-btn-primary-border-color: #000000;
  --cc-btn-primary-hover-bg: #333333;
  --cc-btn-primary-hover-color: #ffffff;
  --cc-btn-primary-hover-border-color: #333333;

  --cc-btn-secondary-bg: #ffffff;
  --cc-btn-secondary-color: #000000;
  --cc-btn-secondary-border-color: #000000;
  --cc-btn-secondary-hover-bg: #f0f0f0;
  --cc-btn-secondary-hover-color: #000000;
  --cc-btn-secondary-hover-border-color: #000000;

  --cc-toggle-on-bg: #000000;
  --cc-toggle-off-bg: #999999;
  --cc-toggle-on-knob-bg: #ffffff;
  --cc-toggle-off-knob-bg: #ffffff;

  --cc-cookie-category-block-bg: #f5f5f5;
  --cc-cookie-category-block-hover-bg: #ebebeb;
  --cc-separator-border-color: #000000;
  --cc-overlay-bg: rgba(0, 0, 0, 0.5);
}

#cc-main.cc--darkmode {
  --cc-bg: #000000;
  --cc-primary-color: #ffffff;
  --cc-secondary-color: #cccccc;

  --cc-btn-primary-bg: #ffffff;
  --cc-btn-primary-color: #000000;
  --cc-btn-primary-border-color: #ffffff;
  --cc-btn-primary-hover-bg: #cccccc;
  --cc-btn-primary-hover-color: #000000;
  --cc-btn-primary-hover-border-color: #cccccc;

  --cc-btn-secondary-bg: #000000;
  --cc-btn-secondary-color: #ffffff;
  --cc-btn-secondary-border-color: #ffffff;
  --cc-btn-secondary-hover-bg: #1a1a1a;
  --cc-btn-secondary-hover-color: #ffffff;
  --cc-btn-secondary-hover-border-color: #ffffff;

  --cc-toggle-on-bg: #ffffff;
  --cc-toggle-off-bg: #666666;
  --cc-toggle-on-knob-bg: #000000;
  --cc-toggle-off-knob-bg: #ffffff;

  --cc-cookie-category-block-bg: #1a1a1a;
  --cc-cookie-category-block-hover-bg: #262626;
  --cc-separator-border-color: #ffffff;
  --cc-overlay-bg: rgba(0, 0, 0, 0.7);
}

/* Basic utility classes if Tailwind doesn't load */
.bg-gray-100 { background-color: #f3f4f6; }
.bg-white { background-color: #ffffff; }
.container { max-width: 1200px; margin: 0 auto; }
.mx-auto { margin-left: auto; margin-right: auto; }
.px-4 { padding-left: 1rem; padding-right: 1rem; }
.py-8 { padding-top: 2rem; padding-bottom: 2rem; }
.rounded-lg { border-radius: 0.5rem; }
.shadow-lg { box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); }
.text-center { text-align: center; }
.grid { display: grid; }
.gap-6 { gap: 1.5rem; }
.space-y-6 > * + * { margin-top: 1.5rem; }