@custom-variant dark (&:is(.dark *));

:root {
  --font-size: 14px;
  --background: #ffffff;
  --foreground: #1a1a1a;
  --card: #ffffff;
  --card-foreground: #1a1a1a;
  --popover: #ffffff;
  --popover-foreground: #1a1a1a;
  --primary: #dc2626;
  --primary-foreground: #ffffff;
  --secondary: #f8f9fa;
  --secondary-foreground: #1a1a1a;
  --muted: #f1f3f4;
  --muted-foreground: #6b7280;
  --accent: #dc2626;
  --accent-foreground: #ffffff;
  --destructive: #dc2626;
  --destructive-foreground: #ffffff;
  --border: #e5e7eb;
  --input: #f9fafb;
  --input-background: #ffffff;
  --switch-background: #e5e7eb;
  --font-weight-medium: 500;
  --font-weight-normal: 400;
  --ring: #dc2626;
  --chart-1: #dc2626;
  --chart-2: #ffffff;
  --chart-3: #a3a3a3;
  --chart-4: #333333;
  --chart-5: #262626;
  --radius: 0.625rem;
  --sidebar: #ffffff;
  --sidebar-foreground: #1a1a1a;
  --sidebar-primary: #dc2626;
  --sidebar-primary-foreground: #ffffff;
  --sidebar-accent: #f8f9fa;
  --sidebar-accent-foreground: #1a1a1a;
  --sidebar-border: #e5e7eb;
  --sidebar-ring: #dc2626;
}

.dark {
  --background: #0a0a0a;
  --foreground: #ffffff;
  --card: #1a1a1a;
  --card-foreground: #ffffff;
  --popover: #1a1a1a;
  --popover-foreground: #ffffff;
  --primary: #dc2626;
  --primary-foreground: #ffffff;
  --secondary: #262626;
  --secondary-foreground: #ffffff;
  --muted: #1f1f1f;
  --muted-foreground: #a1a1aa;
  --accent: #dc2626;
  --accent-foreground: #ffffff;
  --destructive: #dc2626;
  --destructive-foreground: #ffffff;
  --border: #404040;
  --input: #262626;
  --input-background: #1a1a1a;
  --switch-background: #404040;
  --ring: #dc2626;
  --font-weight-medium: 500;
  --font-weight-normal: 400;
  --chart-1: #dc2626;
  --chart-2: #ffffff;
  --chart-3: #a1a1aa;
  --chart-4: #404040;
  --chart-5: #262626;
  --sidebar: #1a1a1a;
  --sidebar-foreground: #ffffff;
  --sidebar-primary: #dc2626;
  --sidebar-primary-foreground: #ffffff;
  --sidebar-accent: #262626;
  --sidebar-accent-foreground: #ffffff;
  --sidebar-border: #404040;
  --sidebar-ring: #dc2626;
}

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-card: var(--card);
  --color-card-foreground: var(--card-foreground);
  --color-popover: var(--popover);
  --color-popover-foreground: var(--popover-foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);
  --color-destructive: var(--destructive);
  --color-destructive-foreground: var(--destructive-foreground);
  --color-border: var(--border);
  --color-input: var(--input);
  --color-input-background: var(--input-background);
  --color-switch-background: var(--switch-background);
  --color-ring: var(--ring);
  --color-chart-1: var(--chart-1);
  --color-chart-2: var(--chart-2);
  --color-chart-3: var(--chart-3);
  --color-chart-4: var(--chart-4);
  --color-chart-5: var(--chart-5);
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
  --color-sidebar: var(--sidebar);
  --color-sidebar-foreground: var(--sidebar-foreground);
  --color-sidebar-primary: var(--sidebar-primary);
  --color-sidebar-primary-foreground: var(
    --sidebar-primary-foreground
  );
  --color-sidebar-accent: var(--sidebar-accent);
  --color-sidebar-accent-foreground: var(
    --sidebar-accent-foreground
  );
  --color-sidebar-border: var(--sidebar-border);
  --color-sidebar-ring: var(--sidebar-ring);
}

@layer base {
  * {
    @apply border-border outline-ring/50;
  }

  body {
    @apply bg-background text-foreground;
  }

  /* Fix for white background sections */
  .bg-white {
    --foreground: #1a1a1a;
    --popover-foreground: #1a1a1a;
    --muted-foreground: #6b7280;
    color: #1a1a1a;
  }

  .bg-white * {
    color: inherit;
  }

  .bg-white h1,
  .bg-white h2,
  .bg-white h3,
  .bg-white h4,
  .bg-white h5,
  .bg-white h6 {
    color: #1a1a1a;
  }

  .bg-white p,
  .bg-white span,
  .bg-white div,
  .bg-white label {
    color: #1a1a1a;
  }

  .bg-white .text-gray-900 {
    color: #1a1a1a !important;
  }

  .bg-white .text-gray-600 {
    color: #6b7280 !important;
  }

  .bg-white .text-gray-700 {
    color: #374151 !important;
  }

  /* Fix for gray background sections */
  .bg-gray-50 {
    color: #1a1a1a;
  }

  .bg-gray-50 * {
    color: inherit;
  }

  .bg-gray-50 h1,
  .bg-gray-50 h2,
  .bg-gray-50 h3,
  .bg-gray-50 h4,
  .bg-gray-50 h5,
  .bg-gray-50 h6 {
    color: #1a1a1a;
  }

  .bg-gray-50 p,
  .bg-gray-50 span,
  .bg-gray-50 div,
  .bg-gray-50 label {
    color: #1a1a1a;
  }

  .bg-gray-50 .text-gray-900 {
    color: #1a1a1a !important;
  }

  .bg-gray-50 .text-gray-600 {
    color: #6b7280 !important;
  }

  .bg-gray-50 .text-gray-700 {
    color: #374151 !important;
  }

  /* Ensure card contents have proper colors */
  .bg-white .card,
  .bg-gray-50 .card {
    color: #1a1a1a;
  }

  .bg-white .card *,
  .bg-gray-50 .card * {
    color: inherit;
  }

  /* Fix buttons in light sections */
  .bg-white .btn,
  .bg-gray-50 .btn {
    color: inherit;
  }

  /* Input styling fixes */
  .bg-white input,
  .bg-gray-50 input {
    color: #1a1a1a;
    background-color: #ffffff;
    border-color: #e5e7eb;
  }

  .bg-white input::placeholder,
  .bg-gray-50 input::placeholder {
    color: #9ca3af;
  }

  /* Select component fixes */
  .bg-white select,
  .bg-gray-50 select {
    color: #1a1a1a;
  }

  .badge {
    color: #1a1a1a;
  }

  /* Badge fixes */
  .bg-white .badge,
  .bg-gray-50 .badge {
    color: inherit;
  }

  /* Button hover fixes for bg-gray-900 */
  button.bg-gray-900:hover,
  .bg-gray-900:hover {
    color: #ffffff !important;
  }

  /* Ensure all child elements in hover state get white text */
  button.bg-gray-900:hover *,
  .bg-gray-900:hover * {
    color: #ffffff !important;
  }

  /* Specific button classes hover states */
  .hover\:bg-gray-900:hover {
    color: #ffffff !important;
  }

  .hover\:bg-gray-900:hover * {
    color: #ffffff !important;
  }

  /* Override for specific text colors in hover */
  button.bg-gray-900:hover .text-gray-900,
  button.bg-gray-900:hover .text-gray-700,
  button.bg-gray-900:hover .text-gray-600,
  button.bg-gray-900:hover .text-black,
  .bg-gray-900:hover .text-gray-900,
  .bg-gray-900:hover .text-gray-700,
  .bg-gray-900:hover .text-gray-600,
  .bg-gray-900:hover .text-black {
    color: #ffffff !important;
  }

  /* Icon color fixes for hover */
  button.bg-gray-900:hover svg,
  .bg-gray-900:hover svg {
    color: #ffffff !important;
    
    fill: none !important;
  }

  /* Header icon fixes - prevent white background on hover */
  header button:hover,
  .header button:hover {
    background-color: transparent !important;
  }

  /* Header icon color fixes */
  header button svg,
  .header button svg {
    color: #ffffff !important;
    stroke: #ffffff !important;
    fill: none !important;
  }

  header button:hover svg,
  .header button:hover svg {
    color: #dc2626 !important;
    stroke: #dc2626 !important;
    fill: none !important;
  }

  /* Specific fixes for header icons with group hover */
  header .group:hover svg,
  .header .group:hover svg {
    color: #dc2626 !important;
    stroke: #dc2626 !important;
    fill: none !important;
  }

  /* Override any global icon styling in header */
  header svg,
  .header svg {
    background-color: transparent !important;
  }

  header button:hover svg,
  .header button:hover svg {
    background-color: transparent !important;
  }

  /* Lucide React icons specific fixes in header */
  header [data-lucide],
  .header [data-lucide] {
    color: #ffffff !important;
    stroke: #ffffff !important;
    fill: none !important;
    background-color: transparent !important;
  }

  header button:hover [data-lucide],
  .header button:hover [data-lucide] {
    color: #dc2626 !important;
    stroke: #dc2626 !important;
    fill: none !important;
    background-color: transparent !important;
  }

  header .group:hover [data-lucide],
  .header .group:hover [data-lucide] {
    color: #dc2626 !important;
    stroke: #dc2626 !important;
    fill: none !important;
    background-color: transparent !important;
  }

  /* Prevent any background color on icon containers */
  header button,
  .header button {
    background-color: transparent !important;
  }

  header button:hover,
  .header button:hover {
    background-color: transparent !important;
  }

  /* H3 elements inside text-white containers should be white */
  .text-white h3 {
    color: #ffffff !important;
  }

  /* Ver Produtos button margin */
  .ver-produtos-button,
  button:has-text("Ver Produtos"),
  a:has-text("Ver Produtos") {
    margin-bottom: 15px !important;
  }

  /* Generic margin for product view buttons */
  [class*="product"] button,
  [class*="equipment"] button {
    margin-bottom: 15px !important;
  }

  /* Ver Detalhes buttons should have white text */
  button:has-text("Ver Detalhes"),
  a:has-text("Ver Detalhes"),
  .ver-detalhes-button {
    color: #ffffff !important;
  }

  button[class*="detalhes"],
  a[class*="detalhes"] {
    color: #ffffff !important;
  }

  /* Inputs should have dark text color on white background */
  input,
  textarea,
  select {
    color: #1a1a1a !important;
    background-color: #ffffff !important;
  }

  input::placeholder,
  textarea::placeholder {
    color: #6b7280 !important;
  }

  /* Cart badge dark background */
  .cart-badge,
  [class*="cart"] .badge {
    background-color: #1f2937 !important;
    color: #ffffff !important;
  }

  /* Cart incentive texts as alerts */
  .cart-incentive,
  .cart-discount-text,
  [class*="incentive"] {
    background-color: #fef3c7 !important;
    color: #92400e !important;
    padding: 8px 12px !important;
    border-radius: 6px !important;
    border: 1px solid #f59e0b !important;
    font-weight: 600 !important;
    animation: pulse 2s infinite !important;
  }

  @keyframes pulse {
    0%,
    100% {
      opacity: 1;
    }
    50% {
      opacity: 0.8;
    }
  }

  /* Header and Footer Dark Theme */
  header,
  .header,
  footer,
  .footer {
    background-color: #1a1a1a !important;
    color: #ffffff !important;
  }

  header *,
  .header *,
  footer *,
  .footer * {
    color: #ffffff !important;
  }

  /* Header specific fixes */
  header input,
  .header input {
    background-color: #2d2d2d !important;
    color: #ffffff !important;
    border-color: #404040 !important;
  }

  header input::placeholder,
  .header input::placeholder {
    color: #9ca3af !important;
  }

  /* Navigation links in header */
  header nav a,
  .header nav a,
  header .nav a,
  .header .nav a {
    color: #ffffff !important;
  }

  header nav a:hover,
  .header nav a:hover,
  header .nav a:hover,
  .header .nav a:hover {
    color: #dc2626 !important;
  }

  /* Footer specific fixes */
  footer a,
  .footer a {
    color: #ffffff !important;
  }

  footer a:hover,
  .footer a:hover {
    color: #dc2626 !important;
  }

  /* Modal and overlay dark backgrounds */
  .modal,
  .overlay,
  .dropdown-menu,
  .popover {
    background-color: #1a1a1a !important;
    color: #ffffff !important;
  }

  .modal *,
  .overlay *,
  .dropdown-menu *,
  .popover * {
    color: #ffffff !important;
  }

  /* Cart sidebar dark theme */
  .cart-sidebar,
  [class*="cart-sidebar"] {
    background-color: #ffffff !important;
    color: #1a1a1a !important;
  }

  .cart-sidebar *,
  [class*="cart-sidebar"] * {
    color: #1a1a1a !important;
  }

  /* Sheet and drawer components dark theme */
  .sheet,
  .drawer,
  [class*="sheet"],
  [class*="drawer"] {
    background-color: #1a1a1a !important;
    color: #ffffff !important;
  }

  .sheet *,
  .drawer *,
  [class*="sheet"] *,
  [class*="drawer"] * {
    color: #ffffff !important;
  }

  /* WooCommerce mini cart styling */
  .woocommerce-mini-cart,
  .widget_shopping_cart,
  .mini-cart {
    background-color: #1a1a1a !important;
    color: #ffffff !important;
    border: 1px solid #404040 !important;
    border-radius: 8px !important;
    padding: 15px !important;
  }

  .woocommerce-mini-cart *,
  .widget_shopping_cart *,
  .mini-cart * {
    color: #ffffff !important;
  }

  .woocommerce-mini-cart a,
  .widget_shopping_cart a,
  .mini-cart a {
    color: #ffffff !important;
  }

  .woocommerce-mini-cart a:hover,
  .widget_shopping_cart a:hover,
  .mini-cart a:hover {
    color: #dc2626 !important;
  }

  /* Mini cart buttons */
  .woocommerce-mini-cart .button,
  .widget_shopping_cart .button,
  .mini-cart .button {
    background-color: #dc2626 !important;
    color: #ffffff !important;
    border: none !important;
    padding: 8px 16px !important;
    border-radius: 4px !important;
  }

  .woocommerce-mini-cart .button:hover,
  .widget_shopping_cart .button:hover,
  .mini-cart .button:hover {
    background-color: #b91c1c !important;
  }

  /* Clear cart button hover white text */
  .clear-cart-button:hover,
  button[class*="clear"]:hover,
  button[class*="limpar"]:hover {
    color: #ffffff !important;
  }

  .clear-cart-button:hover *,
  button[class*="clear"]:hover *,
  button[class*="limpar"]:hover * {
    color: #ffffff !important;
  }

  /* Solicitar Proposta button white text */
  button:has-text("Solicitar Proposta"),
  a:has-text("Solicitar Proposta"),
  .solicitar-proposta-button {
    color: #ffffff !important;
  }

  button[class*="proposta"],
  a[class*="proposta"] {
    color: #ffffff !important;
  }

  /* General button text fixes for specific contexts */
  .bg-red-600 button,
  .bg-red-700 button,
  .bg-blue-600 button,
  .bg-blue-700 button,
  .bg-green-600 button,
  .bg-green-700 button {
    color: #ffffff !important;
  }

  /* Button text color fixes for various button styles */
  button.bg-red-600,
  button.bg-red-700,
  button.bg-blue-600,
  button.bg-blue-700,
  button.bg-green-600,
  button.bg-green-700,
  button.bg-orange-600,
  button.bg-orange-700,
  button.bg-purple-600,
  button.bg-purple-700 {
    color: #ffffff !important;
  }

  /* Ensure all child elements in colored buttons have white text */
  button.bg-red-600 *,
  button.bg-red-700 *,
  button.bg-blue-600 *,
  button.bg-blue-700 *,
  button.bg-green-600 *,
  button.bg-green-700 *,
  button.bg-orange-600 *,
  button.bg-orange-700 *,
  button.bg-purple-600 *,
  button.bg-purple-700 * {
    color: #ffffff !important;
  }

  /* Water drops separator wave animations */
  @keyframes wave-1 {
    0%,
    100% {
      transform: translateX(0);
    }
    50% {
      transform: translateX(-25px);
    }
  }

  @keyframes wave-2 {
    0%,
    100% {
      transform: translateX(0);
    }
    50% {
      transform: translateX(25px);
    }
  }

  @keyframes wave-3 {
    0%,
    100% {
      transform: translateX(0);
    }
    50% {
      transform: translateX(-15px);
    }
  }

  /* Marquee text animation */
  @keyframes marquee {
    from {
      transform: translateX(100%);
    }
    to {
      transform: translateX(-100%);
    }
  }

  @keyframes marquee-2 {
    from {
      transform: translateX(200%);
    }
    to {
      transform: translateX(0%);
    }
  }

  @keyframes marquee-single {
    from {
      transform: translateX(0%);
    }
    to {
      transform: translateX(-50%);
    }
  }

  .animate-marquee {
    animation: marquee 10s linear infinite;
  }

  .animate-marquee-2 {
    animation: marquee-2 10s linear infinite;
  }

  .animate-marquee-single {
    animation: marquee-single 15s linear infinite;
  }

  /* Cursor pointer for interactive elements */
  button,
  a,
  [role="button"],
  [onclick],
  .cursor-pointer {
    cursor: pointer !important;
  }

  /* Specific cursor pointer for interactive elements */
  button:not(:disabled),
  a[href],
  input[type="button"],
  input[type="submit"],
  input[type="reset"],
  select,
  [tabindex]:not([tabindex="-1"]),
  summary,
  [contenteditable="true"],
  [onmouseenter],
  [onmouseleave],
  [onclick],
  [onmouseover] {
    cursor: pointer !important;
  }

  /* Navigation elements */
  nav a,
  .nav a,
  .navigation a,
  [class*="nav"] a,
  [class*="menu"] a,
  [class*="dropdown"] a {
    cursor: pointer !important;
  }

  /* Header navigation */
  header button,
  header a,
  .header button,
  .header a,
  header nav *,
  .header nav *,
  header .relative div button,
  header .dropdown-menu button,
  .header .relative div button,
  .header .dropdown-menu button {
    cursor: pointer !important;
  }

  /* Footer navigation */
  footer a,
  footer button,
  .footer a,
  .footer button {
    cursor: pointer !important;
  }

  /* Card and product elements */
  .card:hover,
  [class*="card"]:hover,
  [class*="product"]:hover,
  [class*="course"]:hover,
  [class*="trip"]:hover,
  [class*="equipment"]:hover {
    cursor: pointer !important;
  }

  /* Interactive icons */
  svg:hover,
  [data-lucide]:hover,
  .icon:hover,
  [class*="icon"]:hover {
    cursor: pointer !important;
  }

  /* Hover elements */
  [class*="hover:"],
  [class*="group-hover:"],
  .hover\:bg-red-600,
  .hover\:bg-gray-900,
  .hover\:text-red-600,
  .hover\:text-white {
    cursor: pointer !important;
  }

  /* Dropdown and menu items */
  .dropdown-menu button,
  .dropdown-menu a,
  [class*="dropdown"] button,
  [class*="dropdown"] a,
  [class*="menu"] button,
  [class*="menu"] a {
    cursor: pointer !important;
  }

  /* Cart and checkout elements */
  .cart-item button,
  .checkout-button,
  [class*="cart"] button,
  [class*="checkout"] button,
  [class*="add-to-cart"] {
    cursor: pointer !important;
  }

  /* Language selector */
  .language-selector,
  .language-selector button,
  [class*="language"] button,
  [class*="selector"] button {
    cursor: pointer !important;
  }

  /* Search elements */
  .search-button,
  [class*="search"] button,
  .search-modal button,
  .search-modal a {
    cursor: pointer !important;
  }

  /* Form elements */
  label,
  .form-label,
  input[type="checkbox"],
  input[type="radio"] {
    cursor: pointer !important;
  }

  /* Modal and dialog elements */
  .modal button,
  .dialog button,
  [class*="modal"] button,
  [class*="dialog"] button,
  .close-button,
  [class*="close"] button {
    cursor: pointer !important;
  }

  /* Tabs and accordion */
  .tab,
  .tab-button,
  [class*="tab"] button,
  .accordion-trigger,
  [class*="accordion"] button {
    cursor: pointer !important;
  }

  /* Slider and carousel controls */
  .slider-button,
  .carousel-button,
  [class*="slider"] button,
  [class*="carousel"] button,
  .prev,
  .next,
  [class*="prev"],
  [class*="next"] {
    cursor: pointer !important;
  }

  /* Disabled elements should not have pointer cursor */
  button:disabled,
  button[disabled],
  input:disabled,
  select:disabled,
  textarea:disabled,
  .disabled,
  [class*="disabled"] {
    cursor: not-allowed !important;
  }

  /* Loading elements */
  .loading,
  [class*="loading"] {
    cursor: wait !important;
  }

  /* Hide scrollbar for mobile slider */
  .scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;
  }

  .scrollbar-hide::-webkit-scrollbar {
    display: none;
  }

  /* Smooth scroll behavior */
  .snap-x {
    scroll-snap-type: x mandatory;
  }

  .snap-start {
    scroll-snap-align: start;
  }

  .snap-mandatory {
    scroll-snap-type: x mandatory;
  }

  /* Checkout page label spacing */
  .checkout-label,
  form label.block {
    margin-bottom: 12px !important;
  }

  /* Checkout specific styles */
  .checkout-page {
    min-height: 100vh;
  }

  .checkout-page label {
    margin-bottom: 12px !important;
    display: block;
    font-weight: 500;
  }

  .checkout-page .form-section {
    margin-bottom: 24px;
  }
}

/**
 * Base typography. This is not applied to elements which have an ancestor with a Tailwind text class.
 */
@layer base {
  :where(
    :not(:has([class*=" text-"]), :not(:has([class^="text-"])))
  ) {
    h1 {
      font-size: var(--text-2xl);
      font-weight: var(--font-weight-medium);
      line-height: 1.5;
      color: inherit;
    }

    h2 {
      font-size: var(--text-xl);
      font-weight: var(--font-weight-medium);
      line-height: 1.5;
      color: inherit;
    }

    h3 {
      font-size: var(--text-lg);
      font-weight: var(--font-weight-medium);
      line-height: 1.5;
      color: inherit;
    }

    h4 {
      font-size: var(--text-base);
      font-weight: var(--font-weight-medium);
      line-height: 1.5;
      color: inherit;
    }

    p {
      font-size: var(--text-base);
      font-weight: var(--font-weight-normal);
      line-height: 1.5;
      color: inherit;
    }

    label {
      font-size: var(--text-base);
      font-weight: var(--font-weight-medium);
      line-height: 1.5;
      color: inherit;
    }

    button {
      font-size: var(--text-base);
      font-weight: var(--font-weight-medium);
      line-height: 1.5;
    }

    input {
      font-size: var(--text-base);
      font-weight: var(--font-weight-normal);
      line-height: 1.5;
    }

    span {
      color: inherit;
    }

    div {
      color: inherit;
    }
  }
}

html {
  font-size: var(--font-size);
}