/* Rately by SVDV — frontend v1.0.2
 * CSS custom properties so presets (and the Pro accent colour) can override.
 */
.rately-widget {
    --rately-radius: 12px;
    --rately-radius-btn: 10px;
    --rately-padding: 1.25em;
    --rately-gap: .6em;
    --rately-fg-muted: color-mix(in oklab, currentColor 60%, transparent);
    --rately-border: color-mix(in oklab, currentColor 12%, transparent);

    /* Slate — default, neutral, works on almost any theme */
    --rately-bg: #F1F5F9;
    --rately-bg-hover: #E2E8F0;
    --rately-fg: #475569;
    --rately-accent: #475569;
    --rately-accent-neg: #64748B;
    --rately-star: #F59E0B;

    box-sizing: border-box;
    margin: 2em 0;
    padding: var(--rately-padding);
    border: 1px solid var(--rately-border);
    border-radius: var(--rately-radius);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
    line-height: 1.4;
}
.rately-widget *, .rately-widget *::before, .rately-widget *::after { box-sizing: border-box; }
/* The hidden attribute must always win over the display rules below. */
.rately-widget [hidden] { display: none !important; }

.rately-header { text-align: center; margin-bottom: 1em; }
.rately-question { font-size: 1.05em; font-weight: 600; margin: 0; }
.rately-subtitle { margin: .25em 0 0; font-size: .88em; color: var(--rately-fg-muted); }

.rately-buttons { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--rately-gap); margin: 0; }
.rately-layout-vertical.rately-mode-thumbs .rately-buttons,
.rately-layout-vertical.rately-mode-emoji .rately-buttons { flex-direction: column; align-items: stretch; }
.rately-mode-thumbs .rately-btn { flex: 1 1 40%; }
.rately-mode-emoji .rately-btn { flex: 1 1 17%; }

.rately-btn {
    appearance: none;
    border: 1px solid transparent;
    font: inherit;
    padding: .7em 1em;
    border-radius: var(--rately-radius-btn);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5em;
    min-height: 44px;
    background: var(--rately-bg);
    color: var(--rately-fg);
    transition: background-color .18s ease, transform .12s ease, box-shadow .18s ease, color .18s ease;
}
.rately-btn:hover { background: var(--rately-bg-hover); }
.rately-btn:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.rately-widget[data-animation="1"] .rately-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 10px -6px rgba(0,0,0,.25); }
.rately-widget[data-animation="1"] .rately-btn:active { transform: translateY(0) scale(.98); }

.rately-btn.is-selected { background: var(--rately-accent); color: #fff; box-shadow: 0 4px 10px -6px rgba(0,0,0,.35); }
.rately-down.is-selected { background: var(--rately-accent-neg); }
.rately-btn.is-disabled { cursor: default; }
.rately-btn.is-disabled:not(.is-selected) { opacity: .55; }
/* Only the rating buttons lock after a vote. Feedback and slider buttons stay clickable. */
.is-locked .rately-buttons .rately-btn { pointer-events: none; }

.rately-icon { display: inline-flex; width: 22px; height: 22px; flex-shrink: 0; }
.rately-icon svg { width: 100%; height: 100%; display: block; }
.rately-label { font-weight: 600; font-size: .95em; }
.rately-count { font-size: .85em; font-weight: 500; opacity: .8; font-variant-numeric: tabular-nums; }
.rately-btn.is-selected .rately-count { color: rgba(255,255,255,.92); }

/* Stars */
.rately-mode-stars .rately-btn {
    background: transparent; border: 0; padding: .25em; min-height: 0; color: var(--rately-fg-muted);
}
.rately-mode-stars .rately-btn:hover { background: transparent; }
.rately-mode-stars .rately-icon { width: 34px; height: 34px; }
.rately-mode-stars .rately-btn.is-hover,
.rately-mode-stars .rately-btn.is-selected { color: var(--rately-star); background: transparent; box-shadow: none; }
.rately-mode-stars .rately-btn.is-disabled:not(.is-selected) { opacity: .35; }
.rately-star-label { text-align: center; margin: .4em 0 0; font-size: .9em; min-height: 1.3em; color: var(--rately-fg-muted); }

/* Emoji: no fixed icon box, so the emoji sits centred above its label. */
.rately-mode-emoji .rately-btn { flex-direction: column; gap: .3em; padding: .7em .4em; text-align: center; }
.rately-mode-emoji .rately-icon { width: auto; height: auto; display: block; }
.rately-emoji { display: block; font-size: 1.6em; line-height: 1.1; }
.rately-mode-emoji .rately-label { font-size: .8em; line-height: 1.25; text-align: center; }
.rately-mode-emoji .rately-count { line-height: 1.2; }

/* Slider (Pro) */
.rately-slider-wrap { width: 100%; text-align: center; }
.rately-slider { width: 100%; max-width: 420px; accent-color: var(--rately-accent); }
.rately-slider-label { font-weight: 600; margin: .4em 0 .8em; min-height: 1.3em; }
.rately-slider-submit { min-width: 8em; }

.rately-bottom { margin: 1em 0 0; text-align: center; font-size: .85em; color: var(--rately-fg-muted); font-variant-numeric: tabular-nums; }

.rately-thanks {
    margin-top: 1em; text-align: center; font-size: .9em; font-weight: 600;
    padding: .55em 1em; border-radius: var(--rately-radius-btn);
    background: color-mix(in oklab, currentColor 6%, transparent);
}

/* Feedback */
.rately-feedback { margin-top: 1em; display: grid; gap: .5em; }
.rately-feedback-prompt { font-size: .92em; font-weight: 600; }
.rately-feedback-text {
    width: 100%; font: inherit; padding: .6em .75em; border-radius: var(--rately-radius-btn);
    border: 1px solid var(--rately-border); background: transparent; color: inherit; resize: vertical;
}
.rately-feedback-send { justify-self: end; }
.rately-feedback-send:disabled { opacity: .55; cursor: default; }

.rately-branding { margin: .9em 0 0; text-align: center; font-size: .72em; color: var(--rately-fg-muted); }
.rately-branding a { color: inherit; text-decoration: none; }

/* Sizes */
.rately-size-small .rately-btn { padding: .5em .75em; min-height: 36px; }
.rately-size-small .rately-icon { width: 18px; height: 18px; }
.rately-size-small.rately-mode-stars .rately-icon { width: 26px; height: 26px; }
.rately-size-large .rately-btn { padding: 1em 1.25em; min-height: 52px; }
.rately-size-large .rately-icon { width: 26px; height: 26px; }
.rately-size-large.rately-mode-stars .rately-icon { width: 42px; height: 42px; }
.rately-size-small.rately-mode-emoji .rately-emoji { font-size: 1.3em; }
.rately-size-large.rately-mode-emoji .rately-emoji { font-size: 2em; }

/* Presets */
.rately-preset-mint_coral { --rately-bg:#ECFDF5; --rately-bg-hover:#D1FAE5; --rately-fg:#047857; --rately-accent:#10B981; --rately-accent-neg:#F97316; }
.rately-preset-ink        { --rately-bg:#F1F5F9; --rately-bg-hover:#E2E8F0; --rately-fg:#0F172A; --rately-accent:#0F172A; --rately-accent-neg:#94A3B8; --rately-star:#0F172A; }
.rately-preset-inherit    { --rately-bg:color-mix(in oklab, currentColor 6%, transparent); --rately-bg-hover:color-mix(in oklab, currentColor 12%, transparent); --rately-fg:inherit; --rately-accent:currentColor; --rately-accent-neg:currentColor; --rately-star:currentColor; }
.rately-preset-high_contrast { --rately-bg:#DCFCE7; --rately-bg-hover:#BBF7D0; --rately-fg:#14532D; --rately-accent:#16A34A; --rately-accent-neg:#DC2626; --rately-star:#D97706; }

@media (prefers-color-scheme: dark) {
    .rately-preset-slate {
        --rately-bg: rgba(148,163,184,.12); --rately-bg-hover: rgba(148,163,184,.2);
        --rately-fg: #CBD5E1; --rately-accent: #94A3B8; --rately-accent-neg: #64748B;
    }
}

@media (max-width: 480px) {
    .rately-widget { padding: 1em; }
    .rately-btn { padding: .65em .75em; }
    .rately-mode-stars .rately-icon { width: 30px; height: 30px; }
}

@media (prefers-reduced-motion: reduce) {
    .rately-btn, .rately-widget[data-animation="1"] .rately-btn:hover, .rately-widget[data-animation="1"] .rately-btn:active {
        transform: none !important; transition: background-color .12s ease;
    }
}