/* Structural CSS for feedback.php's .fbb-* markup (the imported "Embed Form"
   design). Layout/spacing/shape only — colors, fonts and radii come from the
   per-account <style> block dashboard/lib/layout-data.php's
   fbb_layout_generate_css() prints right after this file, which overrides
   the neutral fallback colors set here (same class, later in source order
   wins at equal specificity). Status colors (pending/spam/notice/moderation
   buttons) are fixed on purpose — see that function's doc comment. */

* { box-sizing: border-box; }
html,body{margin:0;padding:0}
.fbb-widget {
    width: 100%;
}
.fbb-shell {
    box-shadow: 0 18px 44px -26px rgba(32, 48, 58, .5);
    overflow: hidden;
}

.fbb-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 15px 18px;
}
.fbb-header-title i { margin-right: 9px; }
.fbb-header-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-left: 10px;
    padding: 4px 10px 4px 8px;
    font-size: 10.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .05em;
    border-radius: 999px;
    background: linear-gradient(135deg, #ff9a3c, #ff5f6d);
    color: #fff;
    box-shadow: 0 2px 8px -1px rgba(255, 95, 109, .55);
    vertical-align: middle;
    animation: fbb-badge-pulse 2.2s ease-in-out infinite;
}
.fbb-header-badge::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 0 0 rgba(255, 255, 255, .7);
    animation: fbb-badge-dot 2.2s ease-in-out infinite;
}
@keyframes fbb-badge-pulse {
    0%, 100% { box-shadow: 0 2px 8px -1px rgba(255, 95, 109, .55); }
    50% { box-shadow: 0 2px 14px 1px rgba(255, 95, 109, .8); }
}
@keyframes fbb-badge-dot {
    0%, 100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, .7); }
    50% { box-shadow: 0 0 0 3px rgba(255, 255, 255, 0); }
}
.fbb-header-count {
    font-weight: 600;
    font-size: 12px;
    padding: 4px 10px;
    border-radius: 999px;
}

.fbb-modnotice, .fbb-globalerror {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 9px 18px;
    font-weight: 600;
    font-size: 11px;
}
.fbb-modnotice { background: #cdeee9; border-bottom: 1px solid #9ad9d0; color: #0b5850; }
.fbb-globalerror { background: #fbe3de; border-bottom: 1px solid #f0b8ad; color: #a5311f; }
.fbb-modnotice-text { flex: 1; }

.fbb-modtoggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    cursor: pointer;
    flex: none;
}
.fbb-modtoggle-track {
    position: relative;
    width: 34px;
    height: 19px;
    border-radius: 999px;
    display: inline-block;
    background: #9ad9d0;
    transition: background .15s;
}
.fbb-modtoggle-track.fbb-modtoggle-on { background: #0d9488; }
.fbb-modtoggle-knob {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
    transition: left .15s;
}
.fbb-modtoggle-track.fbb-modtoggle-on .fbb-modtoggle-knob { left: 17px; }
.fbb-modtoggle-label { font-size: 10px; color: #0b5850; }

.fbb-list { display: flex; flex-direction: column; }
.fbb-comment {
    display: flex;
    gap: 12px;
    padding: 15px 18px;
}
.fbb-comment-pending { background: #fffbf0; }

/* feedback.submit.php's PRG redirect lands on #c{id} for the comment just
   posted - the browser both scrolls to it and matches :target here, so the
   flash needs no server-side "is this the new one" state (and never taints
   the file cache, since it's driven purely by the URL fragment). Themed via
   --fbb-highlight-color (set on .fbb-list in fbb_layout_generate_css()) so
   the glow matches this account's accent color. */
.fbb-comment:target {
    animation: fbb-highlight-fade 2.5s ease-out;
}
@keyframes fbb-highlight-fade {
    from { background: color-mix(in srgb, var(--fbb-highlight-color, #0d9488) 25%, transparent); }
    to { background: transparent; }
}
@media (prefers-reduced-motion: reduce) {
    .fbb-comment:target { animation: none; }
}

.fbb-avatar {
    position: relative;
    flex: none;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    font-weight: 600;
    font-size: 15px;
}

.fbb-avatar-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.fbb-comment-body { min-width: 0; flex: 1; }
.fbb-comment-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.fbb-comment-name { font-weight: 600; font-size: 13px; text-decoration: none; }
.fbb-comment-ago { font-size: 11px; }
.fbb-comment-text { margin: 4px 0 0; font-size: 13px; line-height: 1.55; overflow-wrap: anywhere; word-break: break-word; }

.fbb-tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-weight: 600;
    font-size: 9px;
    padding: 2px 7px;
    border-radius: 999px;
    border: 1px solid transparent;
}
.fbb-tag-pending { color: #8a6400; background: #fdf3c4; border-color: #f0e2a8; }
.fbb-tag-spam { color: #a5311f; background: #fbe3de; border-color: #f0b8ad; }

.fbb-modrow { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 10px; }
.fbb-modbtn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
    font-size: 11px;
    padding: 6px 11px;
    border-radius: 7px;
    border: 1px solid transparent;
    cursor: pointer;
    text-decoration: none;
}
.fbb-modbtn-approve { color: #0f766e; background: #e6f7f3; border-color: #9ad9d0; }
.fbb-modbtn-pending { color: #8a6400; background: #fdf3c4; border-color: #f0e2a8; }
.fbb-modbtn-spam { color: #a5311f; background: #fbe3de; border-color: #f0b8ad; }
.fbb-modbtn-edit { color: #3d4d55; background: #eef2f4; border-color: #d6dee2; }
.fbb-modbtn-delete { color: #a5311f; background: transparent; border-color: #f0b8ad; }
.fbb-modbtn-disabled { color: #b0a682; background: #f4ecd8; border-color: #e0d4b8; cursor: default; pointer-events: none; }

/* Owner-only inline edit form (name/url/text), toggled by the "Bearbeiten"
   modbtn - see feedback.comments.php's fbb_render_one_comment() and
   feedback.render.php's fbb_render_admin_edit_script(). Reuses .fbb-input/
   .fbb-textarea/.fbb-row/.fbb-modrow/.fbb-modbtn from the write form above. */
.fbb-comment-edit { margin-top: 10px; padding-top: 10px; border-top: 1px dashed #d6dee2; }
.fbb-edit-error { margin: 0 0 9px; font-size: 11px; font-weight: 600; color: #a5311f; }

.fbb-form { padding: 18px; }
.fbb-form-title { margin: 0 0 13px; font-weight: 700; font-size: 14px; }
.fbb-row { display: flex; gap: 10px; margin-bottom: 9px; }
.fbb-input, .fbb-textarea {
    flex: 1;
    font-size: 12px;
    padding: 9px 12px;
    margin-bottom: 0;
}
.fbb-textarea { resize: vertical; margin-bottom: 9px; }
.fbb-textarea.fbb-autogrow { resize: none; overflow: hidden; }

/* Only printed by feedback.form.php for the 'standard'/'narrow' layouts -
   'compact' stays placeholder-only, no wrapper. display:flex here makes the
   input/textarea stretch to fill the field's width (the flex default,
   align-items: stretch) without needing an explicit width:100%. */
.fbb-field { display: flex; flex-direction: column; gap: 4px; flex: 1; }
.fbb-label { font-size: 11px; font-weight: 600; }
/* Undo the .fbb-input/.fbb-textarea flex:1 (flex-basis:0) for fields inside
   .fbb-field's column layout - a non-auto flex-basis overrides the height
   property on the flex main axis, which silently defeats the autogrow
   script's el.style.height writes and leaves the textarea stuck at its
   rows="3" size. Only .fbb-row (name/email, row direction) needs flex:1 for
   equal-width side-by-side inputs. */
.fbb-field .fbb-input, .fbb-field .fbb-textarea { flex: none; }

.fbb-remember-wrap { display: flex; align-items: center; gap: 8px; margin: 11px 0; flex-wrap: wrap; }
.fbb-remember-row { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.fbb-remember-label { font-size: 12px; }
.fbb-help-link {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    font: inherit;
    font-size: max(1em, 11px);
    text-decoration: none;
}
.fbb-remember-delete {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    margin-left: auto;
    border: none;
    background: none;
    cursor: pointer;
    font-size: 11px;
    padding: 0;
    border-radius: 5px;
}
.fbb-remember-delete:hover { background: rgba(0, 0, 0, .08); }
.fbb-help-link:hover { text-decoration: underline; }
/* flex-basis:100% forces this onto its own line inside .fbb-remember-wrap's
   flex-wrap row, whenever it's shown ([hidden] removes it from flow). */
.fbb-remember-help { flex-basis: 100%; margin: 0; font-size: max(1em, 11px); line-height: 1.5; }

.fbb-captcha-hint { margin: 0 0 6px; font-size: 11px; line-height: 1.5; color: #7f8b96; }
.fbb-captcha-row { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.fbb-captcha-chip {
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.fbb-captcha-chip img { display: block; }
.fbb-captcha-chip img[hidden] { display: none; }
.fbb-captcha-chip { min-height: 55px; }
.fbb-captcha-reload {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border: none;
    background: none;
    cursor: pointer;
    font-size: 11px;
    padding: 0;
    border-radius: 5px;
    flex: none;
}
.fbb-captcha-reload:hover { background: rgba(0, 0, 0, .08); }
.fbb-captcha-check { display: inline-flex; align-items: center; justify-content: center; color: #0f766e; font-size: 28px; padding: 0 8px; }
.fbb-captcha-check[hidden] { display: none; }

.fbb-notice {
    display: flex;
    align-items: center;
    gap: 9px;
    font-weight: 600;
    font-size: 11px;
    border-radius: 8px;
    border: 1px solid transparent;
    padding: 9px 12px;
    margin-bottom: 11px;
}
.fbb-notice-wait { color: #8a6400; background: #fdf3c4; border-color: #f0e2a8; }

.fbb-preview-banner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-weight: 700;
    font-size: 14px;
    text-align: center;
    padding: 14px 18px;
    margin: 15px 15px 0;
    border-radius: 8px;
    color: #8a6400;
    background: #fdf3c4;
    border: 1px solid #f0e2a8;
}
.fbb-notice-ok { color: #0f766e; background: #cdeee9; border-color: #9ad9d0; }
.fbb-notice-warn { color: #a5311f; background: #fbe3de; border-color: #f0b8ad; }
.fbb-notice-info { color: #0b5850; background: #cdeee9; border-color: #9ad9d0; }

.fbb-privacy { margin: 0 0 11px; }
.fbb-privacy-summary { cursor: pointer; font-size: max(1em, 11px); font-weight: 600; }
.fbb-privacy-summary:hover { text-decoration: underline; }
.fbb-privacy-body { margin-top: 6px; }
.fbb-privacy-body p { margin: 0 0 6px; font-size: max(1em, 11px); line-height: 1.5; }
.fbb-privacy-body p:last-child { margin-bottom: 0; }

.fbb-actions { display: flex; gap: 9px; flex-wrap: wrap; }
.fbb-btn-submit, .fbb-btn-preview {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    font-size: 13px;
    padding: 11px 20px;
    cursor: pointer;
}

/* Nudges the visitor toward actually sending once they're looking at a
   preview - see fbb_render_form()'s $isPreview param. Themed via
   --fbb-pulse-color (set alongside btnBg in fbb_layout_generate_css()) so
   the glow matches this account's own button color instead of a fixed one. */
.fbb-btn-submit.fbb-pulse {
    animation: fbb-pulse 1.6s ease-in-out infinite;
}
@keyframes fbb-pulse {
    0%, 100% { box-shadow: 0 0 0 0 var(--fbb-pulse-color, #0f766e); }
    50% { box-shadow: 0 0 16px 6px var(--fbb-pulse-color, #0f766e); }
}
@media (prefers-reduced-motion: reduce) {
    .fbb-btn-submit.fbb-pulse { animation: none; }
}

.fbb-footer {
    padding: 10px 18px;
    background: #20303a;
    text-align: center;
}
.fbb-footer span { font-size: 10px; color: #7f8b96; }
.fbb-footer b { color: #cdeee9; }

.fbb-subnav { text-align: center; padding: 10px 18px; font-size: 11px; }
.fbb-visits { text-align: center; padding: 0 18px 10px; margin: 0; font-size: 11px; }
.fbb-link { text-decoration: none; }

.fbb-error-page {
    max-width: 640px;
    margin: 40px auto;
    padding: 22px;
    border-radius: 12px;
    border: 1px solid #f0b8ad;
    background: #fbe3de;
    color: #a5311f;
    font-size: 14px;
    line-height: 1.5;
}

@media (max-width: 480px) {
    .fbb-row { flex-direction: column; }
}

/* Layout types (dashboard/settings/layout.php's "DARSTELLUNG" width toggle,
   feedback_layouts.layout_type). The rules above this point are the
   'compact' layout - the original feedback.php implementation - and stay
   the unmodified default (no class needed) so existing rows with no
   explicit type keep looking exactly as before. 'standard' and 'narrow'
   layer overrides on top, scoped under .fbb-widget.fbb-standard /
   .fbb-widget.fbb-narrow (feedback.render.php adds the class from
   $themeLayoutType). Per-account colors/fonts/radius still come from
   fbb_layout_generate_css()'s <style> block loaded after this file; only
   sizing/spacing/structure lives here. */

.fbb-widget.fbb-standard { max-width: 720px; }
.fbb-widget.fbb-standard .fbb-header { padding: 20px 24px; }
.fbb-widget.fbb-standard .fbb-comment { padding: 20px 24px; gap: 16px; }
.fbb-widget.fbb-standard .fbb-avatar { width: 44px; height: 44px; font-size: 17px; }
.fbb-widget.fbb-standard .fbb-comment-name { font-size: 14px; }
.fbb-widget.fbb-standard .fbb-comment-text { font-size: 14px; line-height: 1.65; }
.fbb-widget.fbb-standard .fbb-form { padding: 24px; }
.fbb-widget.fbb-standard .fbb-form-title { font-size: 16px; margin-bottom: 16px; }
.fbb-widget.fbb-standard .fbb-row { gap: 14px; margin-bottom: 12px; }
.fbb-widget.fbb-standard .fbb-input,
.fbb-widget.fbb-standard .fbb-textarea { font-size: 14px; padding: 12px 14px; }
.fbb-widget.fbb-standard .fbb-btn-submit,
.fbb-widget.fbb-standard .fbb-btn-preview { font-size: 14px; padding: 13px 24px; }
.fbb-widget.fbb-standard .fbb-label { font-size: 12px; }

.fbb-widget.fbb-narrow { max-width: 380px; }
.fbb-widget.fbb-narrow .fbb-header { padding: 12px 14px; }
.fbb-widget.fbb-narrow .fbb-comment { padding: 12px 14px; gap: 10px; }
.fbb-widget.fbb-narrow .fbb-avatar { width: 30px; height: 30px; font-size: 12px; }
.fbb-widget.fbb-narrow .fbb-comment-name { font-size: 12px; }
.fbb-widget.fbb-narrow .fbb-comment-text { font-size: 12px; }
.fbb-widget.fbb-narrow .fbb-form { padding: 14px; }
.fbb-widget.fbb-narrow .fbb-form-title { font-size: 13px; margin-bottom: 10px; }
/* .fbb-row is always stacked for narrow (not just under the 480px media
   query above) - see fbb_layout_generate_css()'s
   .fbb-widget.fbb-narrow .fbb-row rule, which needs to win regardless of
   cfg so it's generated fresh for every account rather than duplicated
   here. */
.fbb-widget.fbb-narrow .fbb-input,
.fbb-widget.fbb-narrow .fbb-textarea { font-size: 12px; padding: 8px 10px; }
.fbb-widget.fbb-narrow .fbb-btn-submit,
.fbb-widget.fbb-narrow .fbb-btn-preview { font-size: 12px; padding: 9px 14px; }
.fbb-widget.fbb-narrow .fbb-captcha-chip { transform: scale(0.85); transform-origin: left center; }
.fbb-widget.fbb-narrow .fbb-label { font-size: 10px; }