/*
 * PBv2 Homepage Pro - Frontend-Styles
 * Schmaler Footprint, jedes Widget hat überwiegend Inline-Styles.
 * Hier nur die Bewegungs- und Hover-Sachen plus Keyframes.
 */

.pbv2hp-pulse-dot {
    animation: pbv2hp-pulse 1.4s ease-out infinite;
    box-shadow: 0 0 0 0 currentColor;
}
@keyframes pbv2hp-pulse {
    0%   { box-shadow: 0 0 0 0 currentColor; opacity: 1; }
    70%  { box-shadow: 0 0 0 8px transparent; opacity: .9; }
    100% { box-shadow: 0 0 0 0 transparent; opacity: 1; }
}

.pbv2hp-play-btn:hover {
    transform: translateY(-2px) scale(1.02);
}

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

.pbv2hp-partner-carousel:hover .pbv2hp-partner-track {
    animation-play-state: paused;
}

.pbv2hp-schedule-carousel::-webkit-scrollbar { height: 6px; }
.pbv2hp-schedule-carousel::-webkit-scrollbar-thumb { background: rgba(167, 139, 250, .4); border-radius: 99px; }

.pbv2hp-form input:focus,
.pbv2hp-form textarea:focus {
    outline: none;
    border-color: var(--accent, #a78bfa);
    box-shadow: 0 0 0 3px rgba(167, 139, 250, .15);
}

.pbv2hp-spot-slide {
    animation: pbv2hp-fadein .5s ease-out;
}
@keyframes pbv2hp-fadein {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── Form-Inputs im Request-Formular sollten dunkles Theme nutzen ── */
.pbv2hp-request-form input,
.pbv2hp-request-form textarea {
    background: rgba(0, 0, 0, .25);
    color: inherit;
    border: 1px solid rgba(255, 255, 255, .12);
}
.pbv2hp-request-form input::placeholder,
.pbv2hp-request-form textarea::placeholder { color: rgba(255, 255, 255, .4); }

/* Empty-State (keine Daten in DB) - dunkel statt Bootstrap-alert-light */
.pbv2hp-empty {
    background: rgba(255, 255, 255, .04);
    color: rgba(255, 255, 255, .55);
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 10px;
    padding: 1rem 1.25rem;
    font-style: italic;
    font-size: .92rem;
}

/* ── Live-Editor: schickes Custom-Confirm-Modal statt Browser-Default ── */
.pbv2hp-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(8, 10, 22, .72);
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: pbv2hp-fadein .15s ease-out;
    font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
}
.pbv2hp-modal {
    background: #161a2d;
    border: 1px solid rgba(167, 139, 250, .4);
    border-radius: 14px;
    padding: 1.5rem 1.75rem 1.25rem;
    width: min(420px, 90vw);
    color: #e4e7f2;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .55);
}
.pbv2hp-modal-title {
    font-size: 1.1rem;
    font-weight: 700;
    margin: 0 0 .6rem;
    display: flex;
    align-items: center;
    gap: .5rem;
    color: #fff;
}
.pbv2hp-modal-text {
    font-size: .95rem;
    opacity: .85;
    margin: 0 0 1.4rem;
    line-height: 1.45;
}
.pbv2hp-modal-actions {
    display: flex;
    gap: .6rem;
    justify-content: flex-end;
}
.pbv2hp-modal-actions button {
    border: 0;
    padding: .6rem 1.25rem;
    border-radius: 99px;
    font-weight: 600;
    cursor: pointer;
    font-size: .9rem;
}
.pbv2hp-modal-actions .pbv2hp-modal-cancel {
    background: rgba(255, 255, 255, .1);
    color: #fff;
}
.pbv2hp-modal-actions .pbv2hp-modal-ok {
    background: #ef4444;
    color: #fff;
}
.pbv2hp-modal-actions .pbv2hp-modal-cancel:hover { background: rgba(255, 255, 255, .18); }
.pbv2hp-modal-actions .pbv2hp-modal-ok:hover     { background: #dc2626; }