/**
 * OYROPA.DE - BUTTON-KONSISTENZ-FIX
 *
 * Behebt 18 Button-Inkonsistenzen:
 * - Einheitliche Höhe für alle Bestell-Buttons
 * - Einheitlicher Border-Radius
 * - Konsistentes Padding
 * - Einheitliche Font-Size
 *
 * Gefundene Probleme (30.10.2025 - Layout-Check):
 * - Höhen: 117.766px, 87.8438px, 57.9219px, "auto" (INKONSISTENT!)
 * - Border-Radius: 14px vs 8px (INKONSISTENT!)
 *
 * Author: Claude Code
 * Date: 30.10.2025
 */

/* ============================================
   1. ALLE BESTELL-BUTTONS - EINHEITLICHE HÖHE
   ============================================ */

/* Primary Bestell-Buttons (Gold) - ULTRA-SPEZIFISCH */
button[onclick*="addToCart"],
button[onclick*="showImmobilienForm"],
button[onclick*="showFahrzeugForm"],
button[onclick*="showKunstForm"],
button.cta-button,
button.bestell-button,
button.btn-primary,
.cta-button,
.bestell-button,
.btn-primary,
div button[onclick],
.accordion-content button[onclick] {
    min-height: 60px !important;
    height: 60px !important; /* FIXE Höhe statt auto */
    max-height: 60px !important;
    padding: 12px 24px !important;
    line-height: 1.4 !important;
    border-radius: 12px !important; /* Einheitlich 12px */
    font-size: 16px !important; /* Feste Pixel statt rem */
    font-weight: 600 !important;
    text-align: center !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    border: none !important;
    box-sizing: border-box !important;
    white-space: nowrap !important; /* Keine Umbrüche */
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* Gold Gradient Buttons (CTA) */
.cta-button,
button[onclick*="showImmobilienForm"],
button[onclick*="showFahrzeugForm"],
button[onclick*="showKunstForm"] {
    background: linear-gradient(135deg, #D69E2E 0%, #B8860B 100%) !important;
    color: #FFFFFF !important;
    box-shadow: 0 4px 12px rgba(214, 158, 46, 0.3) !important;
}

.cta-button:hover,
button[onclick*="showImmobilienForm"]:hover,
button[onclick*="showFahrzeugForm"]:hover,
button[onclick*="showKunstForm"]:hover {
    opacity: 0.95 !important;
    transform: none !important; /* Kein Zittern */
    box-shadow: 0 6px 16px rgba(214, 158, 46, 0.4) !important;
}

/* Navy Blue Buttons (Bestell-Buttons in Paketen) */
button[onclick*="addToCart"] {
    background: #1A365D !important;
    color: #FFFFFF !important;
    box-shadow: 0 4px 12px rgba(26, 54, 93, 0.2) !important;
}

button[onclick*="addToCart"]:hover {
    opacity: 0.95 !important;
    transform: none !important; /* Kein Zittern */
    box-shadow: 0 6px 16px rgba(26, 54, 93, 0.3) !important;
}

/* ============================================
   2. TÜRKEI-SERVICES BUTTONS
   ============================================ */

/* Türkei-Service Bestell-Buttons (Gold mit besserem Kontrast) */
button[onclick*="tuerkeiAddToCart"],
.tuerkei-bestell-button {
    min-height: 60px !important;
    height: auto !important;
    padding: 12px 24px !important;
    line-height: 1.4 !important;
    border-radius: 12px !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    background: linear-gradient(135deg, #D69E2E 0%, #B8860B 100%) !important;
    color: #FFFFFF !important;
    border: 2px solid #B8860B !important;
    box-shadow: 0 4px 12px rgba(214, 158, 46, 0.3) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

button[onclick*="tuerkeiAddToCart"]:hover {
    opacity: 0.95 !important;
    transform: none !important;
    box-shadow: 0 6px 16px rgba(214, 158, 46, 0.4) !important;
}

/* ============================================
   3. ACCORDION BESTELL-BUTTONS (INNERHALB PAKETEN)
   ============================================ */

.accordion-content button {
    min-height: 60px !important;
    height: auto !important;
    padding: 12px 24px !important;
    border-radius: 12px !important;
}

/* ============================================
   4. MOBILE OPTIMIERUNG
   ============================================ */

@media (max-width: 768px) {
    button[onclick*="addToCart"],
    button[onclick*="showImmobilienForm"],
    button[onclick*="showFahrzeugForm"],
    button[onclick*="showKunstForm"],
    button[onclick*="tuerkeiAddToCart"],
    .cta-button,
    .bestell-button,
    .btn-primary {
        min-height: 54px !important; /* Etwas kleiner auf Mobile */
        padding: 10px 20px !important;
        font-size: 0.95rem !important;
        width: 100% !important; /* Volle Breite auf Mobile */
        max-width: 100% !important;
    }
}

/* ============================================
   5. PAKET-KARTEN BUTTON-CONTAINER
   ============================================ */

/* Verhindere Button-Überlagerung in Paket-Karten */
.paket-karte button,
.package-card button,
[class*="paket"] button,
[class*="package"] button {
    margin-top: 12px !important;
    margin-bottom: 8px !important;
}

/* ============================================
   6. SPECIAL CASES - COOKIE-BANNER, MODALS, ETC.
   ============================================ */

/* Cookie-Banner Buttons (kleinere Buttons OK) */
.cookie-banner button,
#cookieConsent button,
.modal button.btn-sm {
    min-height: 44px !important; /* WCAG AA Minimum */
    padding: 8px 16px !important;
    border-radius: 8px !important;
}

/* ============================================
   7. FOCUS & ACCESSIBILITY
   ============================================ */

/* Focus States für Keyboard-Navigation */
button[onclick*="addToCart"]:focus,
button[onclick*="showImmobilienForm"]:focus,
button[onclick*="showFahrzeugForm"]:focus,
button[onclick*="showKunstForm"]:focus,
button[onclick*="tuerkeiAddToCart"]:focus,
.cta-button:focus,
.bestell-button:focus {
    outline: 3px solid #D69E2E !important;
    outline-offset: 2px !important;
}

/* ============================================
   8. DISABLED STATE
   ============================================ */

button[disabled],
button[onclick*="addToCart"][disabled],
.cta-button[disabled] {
    opacity: 0.5 !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
}

/* ============================================
   9. LOADING STATE (FALLS VORHANDEN)
   ============================================ */

button.loading,
button[onclick*="addToCart"].loading {
    position: relative !important;
    pointer-events: none !important;
}

button.loading::after {
    content: "" !important;
    position: absolute !important;
    width: 16px !important;
    height: 16px !important;
    border: 2px solid rgba(255, 255, 255, 0.3) !important;
    border-radius: 50% !important;
    border-top-color: #FFFFFF !important;
    animation: spin 0.6s linear infinite !important;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* ============================================
   10. TEXT OVERFLOW HANDLING
   ============================================ */

/* Verhindere abgeschnittenen Text bei langen Button-Labels */
button[onclick*="addToCart"],
button[onclick*="showImmobilienForm"],
.cta-button {
    white-space: normal !important; /* Mehrzeilig erlaubt */
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    hyphens: auto !important;
}

/* ============================================
   11. PRINT STYLES (OPTIONAL)
   ============================================ */

@media print {
    button[onclick*="addToCart"],
    .cta-button,
    .bestell-button {
        border: 2px solid #1A365D !important;
        background: #FFFFFF !important;
        color: #1A365D !important;
    }
}
