/* assets/css/glass.css – Premium Glassmorphism & Micro-Animations (Web) */

/* 1. Typografie & Rem-Skalierung */
:root {
    --glass-bg: rgba(255, 255, 255, 0.65);
    --glass-bg-hover: rgba(255, 255, 255, 0.85);
    --glass-bg-active: rgba(255, 255, 255, 0.95);
    --glass-border: rgba(255, 255, 255, 0.5);
    --glass-border-hover: rgba(255, 255, 255, 0.75);
    --glass-shadow: 0 8px 32px rgba(0, 77, 97, 0.08);
    --glass-shadow-hover: 0 12px 36px rgba(0, 77, 97, 0.14);
    --glass-blur: blur(14px);
}

/* 2. Glassmorphism für Karten (.glass-card und .payment-option) */
.glass-card,
.payment-option {
    background: var(--glass-bg) !important;
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border) !important;
    border-radius: 0.875rem !important; /* ~14px */
    box-shadow: var(--glass-shadow);
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1),
                background 0.25s ease,
                box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1),
                border-color 0.25s ease;
    cursor: pointer;
}

.glass-card:hover,
.payment-option:hover {
    transform: translateY(-2px);
    background: var(--glass-bg-hover) !important;
    border-color: var(--glass-border-hover) !important;
    box-shadow: var(--glass-shadow-hover);
}

/* Aktive/Ausgewählte Zahlungsoption */
.payment-option:has(input:checked) {
    background: var(--glass-bg-active) !important;
    border-color: var(--primary-color, #004D61) !important;
    box-shadow: 0 0 0 2px var(--primary-color, #004D61), 0 12px 32px rgba(0, 77, 97, 0.16) !important;
    transform: translateY(-1px);
}

.payment-option input:checked ~ label strong {
    color: var(--primary-color, #004D61);
}

/* 3. Micro-Animations: Sanfte Buttons */
.btn {
    transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 0.2s cubic-bezier(0.16, 1, 0.3, 1),
                background-color 0.2s ease,
                filter 0.2s ease !important;
}

.btn:hover {
    transform: translateY(-1.5px);
}

.btn:active {
    transform: translateY(0.5px) scale(0.985);
}

.btn-primary:hover,
.btn-success:hover {
    box-shadow: 0 6px 20px rgba(0, 77, 97, 0.25);
    filter: brightness(1.05);
}

/* 4. Micro-Animations: Animiertes Laden von Bildern (z. B. EU-Gewährleistungs-Label) */
.fade-in-image {
    opacity: 0;
    animation: fadeInImage 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes fadeInImage {
    from {
        opacity: 0;
        transform: translateY(8px) scale(0.99);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}