/*
 * 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 CSS */
@import url('https://cdn.jsdelivr.net/npm/choices.js@11.0.2/public/assets/styles/choices.min.css');

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

.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__item--choice.is-highlighted {
  background-color: #3b82f6;
  color: white;
}

/* 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; }