/* ============================================================================
   KASICO ART & DESIGN – FURRY THEME
   ============================================================================
   
   Kasico Farbpalette (vom Logo):
     Crimson Red   #C0392B  (primary / CTAs)
     Warm Gold     #D4A017  (accents / highlights)
     Charcoal      #1A1A1A  (dark backgrounds)
     Warm Cream    #FFF8F0  (light backgrounds)
     Deep Purple   #7B2FBE  (rare accent – Augenfarbe)
   
   Dieses File:
   1. Überschreibt Tailwind-Blau-Klassen → Kasico-Rot/Gold
   2. Kasico-Komponenten-Klassen (.kasico-hero, .kasico-card, etc.)
   3. Furry-spezifische Dekorations-Elemente
   4. Dark-Mode Kasico-Kombinationen
   
   Ladereihenfolge: NACH Tailwind, main.css und dark-mode.css
   ========================================================================== */

/* ============================================================================
   1. TAILWIND BLAU → KASICO CRIMSON (Light Mode)
   ========================================================================== */

/* Background overrides */
.bg-blue-600   { background-color: #C0392B !important; }
.bg-blue-700   { background-color: #9B1B1B !important; }
.bg-blue-800   { background-color: #7A1515 !important; }
.bg-blue-500   { background-color: #D44333 !important; }
.bg-blue-400   { background-color: #E05A4A !important; }

.bg-blue-50    { background-color: #FEF0EE !important; }
.bg-blue-100   { background-color: #FAD7D0 !important; }
.bg-blue-200   { background-color: #F5B0A5 !important; }

/* Text overrides */
.text-blue-600  { color: #C0392B !important; }
.text-blue-700  { color: #9B1B1B !important; }
.text-blue-800  { color: #7A1515 !important; }
.text-blue-500  { color: #D44333 !important; }
.text-blue-400  { color: #E05A4A !important; }
.text-blue-300  { color: #E87060 !important; }
.text-blue-200  { color: #F0A090 !important; }
.text-blue-100  { color: #FAD7D0 !important; }

/* Border overrides */
.border-blue-600   { border-color: #C0392B !important; }
.border-blue-500   { border-color: #D44333 !important; }
.border-blue-400   { border-color: #E05A4A !important; }
.border-blue-300   { border-color: #F0A090 !important; }
.border-blue-200   { border-color: #FAD7D0 !important; }

/* Hover overrides */
.hover\:bg-blue-600:hover  { background-color: #C0392B !important; }
.hover\:bg-blue-700:hover  { background-color: #9B1B1B !important; }
.hover\:bg-blue-100:hover  { background-color: #FAD7D0 !important; }
.hover\:bg-blue-50:hover   { background-color: #FEF0EE !important; }
.hover\:text-blue-600:hover { color: #C0392B !important; }
.hover\:text-blue-700:hover { color: #9B1B1B !important; }
.hover\:border-blue-500:hover { border-color: #D44333 !important; }

/* Focus + Ring (accessibility) */
.focus\:ring-blue-500:focus  { --tw-ring-color: rgba(192, 57, 43, 0.4) !important; }
.focus\:border-blue-500:focus { border-color: #C0392B !important; }
.ring-blue-500               { --tw-ring-color: #C0392B !important; }
.ring-blue-200               { --tw-ring-color: #FAD7D0 !important; }
.focus\:ring-2:focus         { box-shadow: 0 0 0 2px rgba(192, 57, 43, 0.25) !important; }

/* from-/to- Gradient overrides */
.from-blue-600 { --tw-gradient-from: #C0392B !important; }
.from-blue-700 { --tw-gradient-from: #9B1B1B !important; }
.to-purple-600 { --tw-gradient-to: #7B2FBE !important; }
.to-blue-600   { --tw-gradient-to: #C0392B !important; }
.to-blue-700   { --tw-gradient-to: #9B1B1B !important; }
.via-blue-600  { --tw-gradient-via: #C0392B !important; }
.via-blue-700  { --tw-gradient-via: #9B1B1B !important; }

/* Gradient bg overrides (common combos used in templates) */
.bg-gradient-to-r.from-blue-600.to-purple-600 {
    background: linear-gradient(to right, #C0392B, #7B2FBE) !important;
}

/* Active state */
.active\:bg-blue-700:active { background-color: #9B1B1B !important; }

/* ============================================================================
   2. TAILWIND INDIGO → KASICO PURPLE ACCENT
   ========================================================================== */

.bg-indigo-600  { background-color: #7B2FBE !important; }
.text-indigo-600 { color: #7B2FBE !important; }
.hover\:bg-indigo-700:hover { background-color: #621F99 !important; }

/* ============================================================================
   3. PURPLE CLASSES → KASICO DEEP PURPLE (keep but deepen)
   ========================================================================== */

.text-purple-700    { color: #621F99 !important; }
.bg-purple-50       { background-color: #F5F0FF !important; }
.hover\:bg-purple-50:hover { background-color: #F0E8FF !important; }

/* ============================================================================
   4. KASICO COMPONENT CLASSES
   ========================================================================== */

/* ── Hero Banner ─────────────────────────────────────────────────────────── */
.kasico-hero {
    position: relative;
    background: linear-gradient(135deg, #0D0D0D 0%, #2D1515 40%, #1A1A1A 70%, #0D0D0D 100%);
    overflow: hidden;
}

.kasico-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Cg fill='%23C0392B' fill-opacity='0.04'%3E%3Cellipse cx='40' cy='28' rx='12' ry='9'/%3E%3Cellipse cx='22' cy='18' rx='7' ry='5'/%3E%3Cellipse cx='58' cy='18' rx='7' ry='5'/%3E%3Cellipse cx='14' cy='30' rx='5' ry='4'/%3E%3Cellipse cx='66' cy='30' rx='5' ry='4'/%3E%3C/g%3E%3C/svg%3E");
    pointer-events: none;
    z-index: 0;
}

.kasico-hero > * {
    position: relative;
    z-index: 1;
}

/* ── Feature / Feature Cards ─────────────────────────────────────────────── */
.kasico-features-bg {
    background-color: #1A1A1A;
}

/* ── Product & General Cards ─────────────────────────────────────────────── */
.kasico-card {
    background: #ffffff;
    border: 1px solid #e5d5c5;
    border-radius: 0.75rem;
    transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.2s ease;
}

.kasico-card:hover {
    border-color: #D4A017;
    box-shadow: 0 0 0 1px #D4A01740, 0 8px 24px rgba(192, 57, 43, 0.12);
    transform: translateY(-2px);
}

[data-theme="dark"] .kasico-card {
    background: #1A1A1A;
    border-color: #3A2A20;
}

[data-theme="dark"] .kasico-card:hover {
    border-color: #F4B942;
    box-shadow: 0 0 0 1px #F4B94240, 0 8px 24px rgba(244, 185, 66, 0.15);
}

/* ── Gold Button ─────────────────────────────────────────────────────────── */
.kasico-btn-gold {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.625rem 1.5rem;
    background: linear-gradient(135deg, #D4A017 0%, #F4B942 100%);
    color: #1A1A1A !important;
    font-weight: 700;
    border-radius: 0.5rem;
    border: none;
    cursor: pointer;
    text-decoration: none;
    transition: opacity 0.2s, transform 0.15s, box-shadow 0.2s;
}

.kasico-btn-gold:hover {
    opacity: 0.9;
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(212, 160, 23, 0.45);
    text-decoration: none;
    color: #1A1A1A !important;
}

/* ── Crimson Button (alt to Tailwind primary) ────────────────────────────── */
.kasico-btn-crimson {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.625rem 1.5rem;
    background: #C0392B;
    color: #ffffff !important;
    font-weight: 700;
    border-radius: 0.5rem;
    border: none;
    cursor: pointer;
    text-decoration: none;
    transition: background-color 0.2s, transform 0.15s, box-shadow 0.2s;
}

.kasico-btn-crimson:hover {
    background: #9B1B1B;
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(192, 57, 43, 0.4);
    text-decoration: none;
    color: #ffffff !important;
}

/* ── Gold Outline Button (hero secondary CTA) ────────────────────────────── */
.kasico-btn-outline-gold {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.625rem 1.5rem;
    background: transparent;
    color: #D4A017 !important;
    font-weight: 700;
    border-radius: 0.5rem;
    border: 2px solid #D4A017;
    cursor: pointer;
    text-decoration: none;
    transition: background-color 0.2s, color 0.2s, transform 0.15s;
}

.kasico-btn-outline-gold:hover {
    background: #D4A017;
    color: #1A1A1A !important;
    transform: translateY(-1px);
    text-decoration: none;
}

/* ── Badges ──────────────────────────────────────────────────────────────── */
.kasico-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.625rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.03em;
}

.kasico-badge-gold {
    background: #FEF3C7;
    color: #92690A;
    border: 1px solid #D4A017;
}

.kasico-badge-crimson {
    background: #FAD7D0;
    color: #7A1515;
    border: 1px solid #C0392B;
}

[data-theme="dark"] .kasico-badge-gold {
    background: #3D2E0A;
    color: #F4B942;
    border-color: #92690A;
}

[data-theme="dark"] .kasico-badge-crimson {
    background: #4A1515;
    color: #F08070;
    border-color: #7A1515;
}

/* ── Section Dividers ────────────────────────────────────────────────────── */
.kasico-paw-divider {
    position: relative;
    height: 48px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    color: #D4A017;
    font-size: 1.25rem;
    opacity: 0.6;
}

/* ── Footer ──────────────────────────────────────────────────────────────── */
.kasico-footer-bg {
    background: linear-gradient(180deg, #0A0A0A 0%, #050505 100%);
    border-top: 2px solid #D4A01730;
}

/* ── Trust Cards in Hero ─────────────────────────────────────────────────── */
.kasico-trust-card {
    background: rgba(255, 248, 240, 0.08);
    border: 1px solid rgba(212, 160, 23, 0.2);
    border-radius: 0.75rem;
    padding: 1.25rem;
    text-align: center;
    backdrop-filter: blur(4px);
    transition: border-color 0.25s, background-color 0.25s;
}

.kasico-trust-card:hover {
    background: rgba(255, 248, 240, 0.12);
    border-color: rgba(212, 160, 23, 0.4);
}

/* ── Nav Gold Accent Border ──────────────────────────────────────────────── */
.kasico-nav {
    border-bottom: 2px solid #D4A01740;
}

[data-theme="dark"] .kasico-nav {
    background-color: #111111 !important;
    border-bottom-color: #D4A01730 !important;
}

/* ── Gold Text Accent ────────────────────────────────────────────────────── */
.kasico-text-gold {
    color: #D4A017;
}

[data-theme="dark"] .kasico-text-gold {
    color: #F4B942;
}

/* ── Kasico Link ─────────────────────────────────────────────────────────── */
.kasico-link {
    color: #C0392B;
    text-decoration: none;
    transition: color 0.15s ease;
}
.kasico-link:hover {
    color: #D4A017;
    text-decoration: underline;
}
[data-theme="dark"] .kasico-link {
    color: #E87060;
}
[data-theme="dark"] .kasico-link:hover {
    color: #F4B942;
}

/* ── Crimson Text Accent ─────────────────────────────────────────────────── */
.kasico-text-crimson {
    color: #C0392B;
}

[data-theme="dark"] .kasico-text-crimson {
    color: #E74C3C;
}

/* ── Section backgrounds ─────────────────────────────────────────────────── */
.kasico-section-dark {
    background-color: #1A1A1A;
}

.kasico-section-cream {
    background-color: #FFF8F0;
}

.kasico-section-cream-dark {
    background-color: #F5EAD8;
}

[data-theme="dark"] .kasico-section-cream,
[data-theme="dark"] .kasico-section-cream-dark {
    background-color: #1A1A1A;
}

/* ── Newsletter Section ──────────────────────────────────────────────────── */
.kasico-newsletter-bg {
    background: linear-gradient(135deg, #C0392B 0%, #7A1515 60%, #4A0D0D 100%);
    position: relative;
    overflow: hidden;
}

.kasico-newsletter-bg::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Cg fill='%23D4A017' fill-opacity='0.06'%3E%3Cellipse cx='40' cy='28' rx='12' ry='9'/%3E%3Cellipse cx='22' cy='18' rx='7' ry='5'/%3E%3Cellipse cx='58' cy='18' rx='7' ry='5'/%3E%3Cellipse cx='14' cy='30' rx='5' ry='4'/%3E%3Cellipse cx='66' cy='30' rx='5' ry='4'/%3E%3C/g%3E%3C/svg%3E");
    pointer-events: none;
}

/* ── Login/Register Brand Panel ──────────────────────────────────────────── */
.kasico-auth-panel {
    background: linear-gradient(160deg, #0D0D0D 0%, #2D1515 45%, #4A1515 100%);
    position: relative;
    overflow: hidden;
}

.kasico-auth-panel::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Cg fill='%23D4A017' fill-opacity='0.06'%3E%3Cellipse cx='40' cy='28' rx='12' ry='9'/%3E%3Cellipse cx='22' cy='18' rx='7' ry='5'/%3E%3Cellipse cx='58' cy='18' rx='7' ry='5'/%3E%3Cellipse cx='14' cy='30' rx='5' ry='4'/%3E%3Cellipse cx='66' cy='30' rx='5' ry='4'/%3E%3C/g%3E%3C/svg%3E");
    pointer-events: none;
}

.kasico-auth-panel::after {
    content: '';
    position: absolute;
    bottom: -80px;
    right: -80px;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    background: rgba(212, 160, 23, 0.06);
}

/* ── Step Indicators (Checkout) ──────────────────────────────────────────── */
.kasico-step-active {
    background: #C0392B !important;
    color: #ffffff !important;
}

.kasico-step-done {
    background: #D4A017 !important;
    color: #1A1A1A !important;
}

.kasico-step-inactive {
    background: #e5e7eb !important;
    color: #6b7280 !important;
}

[data-theme="dark"] .kasico-step-inactive {
    background: #374151 !important;
    color: #9ca3af !important;
}

.kasico-step-bar-active {
    background: #C0392B !important;
}

.kasico-step-bar-done {
    background: #D4A017 !important;
}

/* ── Range Slider (Product Filter) ──────────────────────────────────────── */
.kasico-range-fill {
    background: #C0392B !important;
}

.kasico-range-thumb::-webkit-slider-thumb {
    background: #C0392B !important;
}

.kasico-range-thumb::-moz-range-thumb {
    background: #C0392B !important;
}

/* ── Review Stars ────────────────────────────────────────────────────────── */
.kasico-star-filled {
    color: #D4A017 !important;
}

.kasico-star-empty {
    color: #e5d5c5 !important;
}

[data-theme="dark"] .kasico-star-empty {
    color: #3A2A20 !important;
}

/* ── Category Card ───────────────────────────────────────────────────────── */
.kasico-category-card {
    background: #ffffff;
    border: 2px solid transparent;
    border-radius: 1rem;
    transition: border-color 0.25s, box-shadow 0.25s, transform 0.2s;
    overflow: hidden;
}

.kasico-category-card:hover {
    border-color: #D4A017;
    box-shadow: 0 8px 32px rgba(212, 160, 23, 0.2);
    transform: translateY(-3px);
}

[data-theme="dark"] .kasico-category-card {
    background: #1A1A1A;
    border-color: #3A2A20;
}

[data-theme="dark"] .kasico-category-card:hover {
    border-color: #F4B942;
    box-shadow: 0 8px 32px rgba(244, 185, 66, 0.2);
}

/* ── Custom Scrollbar – Kasico ───────────────────────────────────────────── */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #F5EAD8; }
::-webkit-scrollbar-thumb { background: #C0392B; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #9B1B1B; }

[data-theme="dark"] ::-webkit-scrollbar-track { background: #1A1A1A; }
[data-theme="dark"] ::-webkit-scrollbar-thumb { background: #E74C3C; }
[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: #C0392B; }

/* ── Paw Print Decoration CSS ────────────────────────────────────────────── */
.kasico-paw-bg {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='%23C0392B' fill-opacity='0.03'%3E%3Cellipse cx='60' cy='42' rx='18' ry='14'/%3E%3Cellipse cx='33' cy='27' rx='10' ry='8'/%3E%3Cellipse cx='87' cy='27' rx='10' ry='8'/%3E%3Cellipse cx='21' cy='45' rx='8' ry='6'/%3E%3Cellipse cx='99' cy='45' rx='8' ry='6'/%3E%3C/g%3E%3C/svg%3E");
}

/* ============================================================================
   5. DARK MODE KASICO KOMBINATIONEN
   ========================================================================== */

/* Dark-Mode Blau-Overrides (aufbauend auf dark-mode.css) */
[data-theme="dark"] .bg-blue-600  { background-color: #E74C3C !important; }
[data-theme="dark"] .bg-blue-700  { background-color: #C0392B !important; }
[data-theme="dark"] .bg-blue-50   { background-color: #4A1515 !important; }
[data-theme="dark"] .bg-blue-100  { background-color: #3A1010 !important; }
[data-theme="dark"] .text-blue-600 { color: #E74C3C !important; }
[data-theme="dark"] .text-blue-700 { color: #C0392B !important; }
[data-theme="dark"] .text-blue-100 { color: #FAD7D0 !important; }
[data-theme="dark"] .hover\:bg-blue-700:hover { background-color: #C0392B !important; }
[data-theme="dark"] .hover\:text-blue-600:hover { color: #E74C3C !important; }
[data-theme="dark"] .border-blue-600 { border-color: #E74C3C !important; }

/* Dark-Mode: Gradient hero fallback */
[data-theme="dark"] .bg-gradient-to-r {
    /* gradients inherit from hero class above */
}

/* Dark-Mode: Amber/Gold Tailwind classes */
[data-theme="dark"] .text-amber-400 { color: #F4B942 !important; }
[data-theme="dark"] .text-yellow-300 { color: #F4B942 !important; }
[data-theme="dark"] .text-yellow-400 { color: #F4B942 !important; }

/* Dark-mode: bg-gray overrides → warm charcoal */
[data-theme="dark"] .bg-white          { background-color: #1A1A1A !important; }
[data-theme="dark"] .bg-gray-50        { background-color: #0D0D0D !important; }
[data-theme="dark"] .bg-gray-100       { background-color: #1A1A1A !important; }
[data-theme="dark"] .bg-gray-800       { background-color: #050505 !important; }
[data-theme="dark"] .bg-gray-900       { background-color: #030303 !important; }

/* Dark-Mode: Form inputs */
[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="range"]),
[data-theme="dark"] textarea,
[data-theme="dark"] select {
    background-color: #252525 !important;
    color: #F0E8D8 !important;
    border-color: #3A2A20 !important;
}

[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder {
    color: #8a7a68 !important;
}

/* Dark-Mode: Nav */
[data-theme="dark"] nav,
[data-theme="dark"] header {
    background-color: #111111 !important;
    border-color: #3A2A20 !important;
}

/* Dark-Mode: Footer special override to force kasico dark */
[data-theme="dark"] footer {
    background: linear-gradient(180deg, #0A0A0A 0%, #050505 100%) !important;
    border-top: 2px solid #D4A01730 !important;
}

/* Dark-Mode: Modal */
[data-theme="dark"] .modal,
[data-theme="dark"] [role="dialog"] {
    background-color: #1A1A1A !important;
    color: #F0E8D8 !important;
    border-color: #3A2A20 !important;
}

/* ── Campaign banners ──── */
[data-theme="dark"] .from-yellow-50  { --tw-gradient-from: #2D2000 !important; }
[data-theme="dark"] .to-orange-50    { --tw-gradient-to: #2D1510 !important; }
[data-theme="dark"] .border-orange-100 { border-color: #3A2010 !important; }