/* DMN Review Widget – erbt Theme-Schriften, alle Farben per CSS-Variablen steuerbar */

.dmn-rw-wrap {
    /* Defaults – werden per JS aus Admin-Einstellungen überschrieben */
    --dmn-accent:             #2563eb;
    --dmn-text-color:         #111827;
    --dmn-btn-font-size:      1rem;
    --dmn-btn-icon-size:      1.1rem;
    --dmn-btn-primary-bg:     #2563eb;
    --dmn-btn-primary-text:   #ffffff;
    --dmn-btn-secondary-bg:   transparent;
    --dmn-btn-secondary-text: #2563eb;
    --dmn-btn-danger-bg:      #ef4444;
    --dmn-btn-danger-text:    #ffffff;
    --dmn-radius:             12px;
    --dmn-gap:                1.25rem;
    --dmn-copy-bg:            #f0f9ff;
    --dmn-copy-border:        #bae6fd;
    --dmn-copy-hint-color:    #0369a1;

    font-family: inherit;
    font-size:   inherit;
    color:       var(--dmn-text-color);
    line-height: 1.6;

    max-width:     540px;
    margin:        0 auto;
    padding:       2rem 1.5rem;
    background:    #ffffff;
    border:        1px solid #e5e7eb;
    border-radius: var(--dmn-radius);
    box-shadow:    0 2px 12px rgba(0,0,0,.06);
    text-align:    center;
}

/* ─── Schritte ─────────────────────────────────────────────── */
.dmn-rw-step { animation: dmn-fade-in .3s ease; }
.dmn-rw-hidden { display: none !important; }

@keyframes dmn-fade-in {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ─── Emoji / Titel / Text ──────────────────────────────────── */
.dmn-rw-emoji {
    font-size:     2.5rem;
    line-height:   1;
    margin-bottom: .5rem;
}

.dmn-rw-title {
    font-family: inherit;
    font-size:   1.35rem;
    font-weight: 700;
    margin:      0 0 .5rem;
    color:       var(--dmn-text-color);
}

.dmn-rw-text {
    margin:  0 0 var(--dmn-gap);
    color:   var(--dmn-text-color);
    opacity: .85;
}

/* ─── Sterne ────────────────────────────────────────────────── */
.dmn-rw-stars {
    display:         flex;
    justify-content: center;
    gap:             .35rem;
    margin-top:      var(--dmn-gap);
}

.dmn-rw-star {
    background:  none;
    border:      none;
    font-size:   2.8rem;
    line-height: 1;
    cursor:      pointer;
    color:       #d1d5db;
    padding:     .15rem;
    transition:  color .15s, transform .15s;
}

.dmn-rw-star:hover,
.dmn-rw-star.is-active {
    color:     #f59e0b;
    transform: scale(1.15);
}

.dmn-rw-star:focus-visible {
    outline:       2px solid var(--dmn-accent);
    border-radius: 4px;
}

/* ─── Buttons ───────────────────────────────────────────────── */
.dmn-rw-btn {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    gap:             .5rem;
    font-family:     inherit;
    font-size:       var(--dmn-btn-font-size);
    font-weight:     600;
    padding:         .75rem 1.5rem;
    border-radius:   8px;
    border:          2px solid transparent;
    cursor:          pointer;
    text-decoration: none;
    transition:      background .2s, color .2s, border-color .2s, opacity .2s;
    width:           100%;
    max-width:       340px;
    margin:          .3rem auto;
    line-height:     1.3;
}

/* Icon-Größe – trifft Emoji-Zeichen in Buttons */
.dmn-rw-btn .dmn-rw-btn-icon,
.dmn-rw-btn:first-child {
    font-size: var(--dmn-btn-icon-size);
}

/* Primär */
.dmn-rw-btn--primary {
    background:   var(--dmn-btn-primary-bg);
    color:        var(--dmn-btn-primary-text);
    border-color: var(--dmn-btn-primary-bg);
}
.dmn-rw-btn--primary:hover { opacity: .88; }

/* Sekundär */
.dmn-rw-btn--secondary {
    background:   var(--dmn-btn-secondary-bg);
    color:        var(--dmn-btn-secondary-text);
    border-color: var(--dmn-btn-secondary-text);
}
.dmn-rw-btn--secondary:hover {
    background: var(--dmn-btn-secondary-text);
    color:      var(--dmn-btn-secondary-bg, #fff);
}

/* Danger */
.dmn-rw-btn--danger {
    background:   var(--dmn-btn-danger-bg);
    color:        var(--dmn-btn-danger-text);
    border-color: var(--dmn-btn-danger-bg);
}
.dmn-rw-btn--danger:hover { opacity: .88; }

.dmn-rw-btn:disabled {
    opacity: .5;
    cursor:  not-allowed;
}

/* Skip-Link */
.dmn-rw-link {
    background:      none;
    border:          none;
    font-family:     inherit;
    font-size:       .875rem;
    color:           #6b7280;
    cursor:          pointer;
    margin:          .75rem auto 0;
    text-decoration: underline;
    display:         block;
    text-align:      center;
    width:           100%;
}
.dmn-rw-link:hover { color: #374151; }

/* Google Icon */
.dmn-rw-google-icon {
    width:      18px;
    height:     18px;
    flex-shrink: 0;
}

/* ─── Divider ───────────────────────────────────────────────── */
.dmn-rw-divider {
    margin:    1rem 0;
    color:     #9ca3af;
    font-size: .875rem;
    position:  relative;
}
.dmn-rw-divider::before,
.dmn-rw-divider::after {
    content:    '';
    position:   absolute;
    top:        50%;
    width:      38%;
    height:     1px;
    background: #e5e7eb;
}
.dmn-rw-divider::before { left: 0; }
.dmn-rw-divider::after  { right: 0; }

/* ─── Textarea ──────────────────────────────────────────────── */
.dmn-rw-textarea {
    font-family:   inherit;
    font-size:     1rem;
    width:         100%;
    padding:       .75rem 1rem;
    border:        1px solid #d1d5db;
    border-radius: 8px;
    resize:        vertical;
    margin-bottom: var(--dmn-gap);
    box-sizing:    border-box;
    transition:    border-color .2s;
    color:         var(--dmn-text-color);
    background:    #f9fafb;
}
.dmn-rw-textarea:focus {
    outline:      none;
    border-color: var(--dmn-accent);
    background:   #fff;
}

/* ─── Video ─────────────────────────────────────────────────── */
.dmn-rw-video-area {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    gap:            1rem;
    margin-bottom:  1rem;
}

/* Wrapper für Video + Countdown-Overlay */
.dmn-rw-video-wrapper {
    position:      relative;
    width:         100%;
    max-width:     400px;
}

.dmn-rw-preview {
    width:         100%;
    border-radius: 10px;
    background:    #111;
    aspect-ratio:  16/9;
    object-fit:    cover;
    display:       block;
}

/* Countdown-Overlay */
.dmn-rw-countdown {
    position:        absolute;
    inset:           0;
    display:         flex;
    align-items:     center;
    justify-content: center;
    background:      rgba(0, 0, 0, .55);
    border-radius:   10px;
    pointer-events:  none;
}

.dmn-rw-countdown span {
    font-size:   5rem;
    font-weight: 800;
    color:       #ffffff;
    line-height: 1;
    animation:   dmn-countdown-pop .85s ease-out forwards;
}

@keyframes dmn-countdown-pop {
    0%   { transform: scale(1.6); opacity: 0; }
    20%  { transform: scale(1);   opacity: 1; }
    80%  { transform: scale(1);   opacity: 1; }
    100% { transform: scale(.7);  opacity: 0; }
}

.dmn-rw-video-controls {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    width:          100%;
    gap:            .5rem;
}

/* Aufnahme-Indikator */
.dmn-rw-rec-indicator {
    display:     flex;
    align-items: center;
    gap:         .4rem;
    font-size:   .875rem;
    color:       #ef4444;
    font-weight: 600;
}

.dmn-rw-rec-dot {
    width:         10px;
    height:        10px;
    border-radius: 50%;
    background:    #ef4444;
    animation:     dmn-blink 1s ease-in-out infinite;
}

@keyframes dmn-blink {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0; }
}

/* Upload Progress */
.dmn-rw-upload-progress {
    width:     100%;
    max-width: 340px;
    text-align: center;
}

.dmn-rw-progress-bar {
    background:    #e5e7eb;
    border-radius: 999px;
    height:        8px;
    overflow:      hidden;
    margin-bottom: .5rem;
}

.dmn-rw-progress-fill {
    height:        100%;
    background:    var(--dmn-accent);
    border-radius: 999px;
    width:         0%;
    transition:    width .3s ease;
}

.dmn-rw-upload-info {
    display:         flex;
    justify-content: space-between;
    align-items:     center;
    gap:             .5rem;
    font-size:       .8rem;
    color:           #6b7280;
    padding:         0 .1rem;
}

#dmn-progress-size {
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* ─── Copy-Box ──────────────────────────────────────────────── */
.dmn-rw-copy-box {
    background:    var(--dmn-copy-bg);
    border:        1px solid var(--dmn-copy-border);
    border-radius: 10px;
    padding:       1rem 1.1rem;
    margin:        0 auto var(--dmn-gap);
    text-align:    center;
    width:         100%;
    max-width:     340px;
    box-sizing:    border-box;
}

.dmn-rw-copy-hint {
    font-size:   .78rem;
    font-weight: 600;
    color:       var(--dmn-copy-hint-color);
    margin:      0 0 .5rem;
}

.dmn-rw-copy-text {
    font-size:   .9375rem;
    color:       var(--dmn-text-color);
    margin:      0 0 .85rem;
    padding:     0;
    line-height: 1.55;
    font-style:  normal;
    white-space: pre-wrap;
    word-break:  break-word;
    border:      none;
}

/* Kopieren-Button etwas kompakter als normale Buttons */
.dmn-rw-copy-box .dmn-rw-btn {
    padding:   .55rem 1.1rem;
    font-size: .875rem;
    max-width: none;
    width:     100%;
}

/* ─── Inline-Fehlermeldung (ersetzt alert()) ────────────────── */
.dmn-rw-error {
    margin-top:    .75rem;
    padding:       .6rem 1rem;
    background:    #fef2f2;
    border:        1px solid #fecaca;
    border-radius: .5rem;
    color:         #dc2626;
    font-size:     .875rem;
    text-align:    center;
    transition:    opacity .3s;
}

/* ─── Plattform-Buttons (FEAT-08) ───────────────────────────── */
.dmn-rw-btn--platform {
    display:         flex;
    align-items:     center;
    justify-content: center;
    gap:             .5rem;
    margin-top:      .5rem;
    width:           100%;
    border:          none;
}

.dmn-rw-btn--booking {
    background: #003580;
    color:      #ffffff;
}
.dmn-rw-btn--booking:hover { background: #00257a; }

.dmn-rw-btn--tripadvisor {
    background: #34E0A1;
    color:      #ffffff;
}
.dmn-rw-btn--tripadvisor:hover { background: #2bc98e; }

.dmn-rw-btn--trustpilot {
    background: #00B67A;
    color:      #ffffff;
}
.dmn-rw-btn--trustpilot:hover { background: #009e69; }

.dmn-rw-btn--custom-platform {
    background:   transparent;
    color:        var(--dmn-btn-secondary-text, #2563eb);
    border:       2px solid currentColor;
}
.dmn-rw-btn--custom-platform:hover {
    background:   #f97316;
    color:        #ffffff;
    border-color: #f97316;
}

/* ─── Responsive ────────────────────────────────────────────── */
@media (max-width: 480px) {
    .dmn-rw-wrap  { padding: 1.5rem 1rem; }
    .dmn-rw-star  { font-size: 2.2rem; }
    .dmn-rw-title { font-size: 1.15rem; }
}