/*
 * Motion / field validation / status toggle — uses theme CSS variables.
 */
.cms-brand-orb {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, #fff, var(--cms-accent) 40%, var(--cms-primary));
    box-shadow: 0 0 18px color-mix(in srgb, var(--cms-accent) 80%, transparent);
    animation: cmsPulse 2.2s ease-in-out infinite;
}

@keyframes cmsPulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.25); opacity: 0.75; }
}

.cms-fade-in { animation: cmsFade 0.7s ease both; }
.cms-slide-up { animation: cmsSlide 0.65s var(--cms-ease-out) both; }
@keyframes cmsFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes cmsSlide { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

.cms-field-error {
    color: var(--cms-danger);
    display: block;
    min-height: 1.1em;
    font-size: 12px;
}

.cms-field-invalid {
    border-color: var(--cms-danger) !important;
    box-shadow: 0 0 0 0.12rem color-mix(in srgb, var(--cms-danger) 25%, transparent);
}

.cms-switch {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    cursor: pointer;
    user-select: none;
    margin: 0;
}

.cms-switch input { position: absolute; opacity: 0; width: 0; height: 0; }

.cms-switch-slider {
    width: 44px;
    height: 24px;
    background: #90a4ae;
    border-radius: 999px;
    transition: 0.25s;
    position: relative;
    flex: 0 0 auto;
}

.cms-switch-slider::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #fff;
    transition: 0.25s;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
}

.cms-switch input:checked + .cms-switch-slider {
    background: linear-gradient(135deg, var(--cms-success), var(--cms-primary));
}

.cms-switch input:checked + .cms-switch-slider::after { transform: translateX(20px); }
.cms-switch-text { font-size: 0.85rem; font-weight: 600; color: var(--cms-muted-text); }

.cms-dash-stat-box { transition: transform 0.25s ease, box-shadow 0.25s ease; }
.cms-dash-stat-box:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 28px color-mix(in srgb, var(--cms-primary) 22%, transparent);
}

/* Go to top — floating control */
.cms-back-to-top {
    position: fixed;
    right: 1.25rem;
    bottom: calc(var(--cms-admin-statusbar-h, 3rem) + 1rem);
    z-index: 1040;
    width: 2.75rem;
    height: 2.75rem;
    border: 0;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: var(--cms-gradient-primary, linear-gradient(135deg, var(--cms-primary-dark), var(--cms-primary)));
    box-shadow: 0 8px 20px color-mix(in srgb, var(--cms-primary) 35%, transparent);
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px);
    transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s ease, filter 0.2s ease;
    cursor: pointer;
}

.cms-back-to-top.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.cms-back-to-top:hover {
    filter: brightness(1.08);
    color: #fff;
}

.cms-back-to-top:focus {
    outline: 2px solid var(--cms-primary-light);
    outline-offset: 2px;
}

.cms-goto-top-link {
    color: rgba(255, 255, 255, 0.95);
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    background: none;
    border: 0;
    padding: 0;
    font-size: inherit;
}

.cms-goto-top-link:hover {
    color: #fff;
    text-decoration: underline;
}

.cms-admin .content-wrapper {
    background:
        radial-gradient(600px 220px at 0% 0%, color-mix(in srgb, var(--cms-primary) 8%, transparent), transparent 50%),
        radial-gradient(500px 200px at 100% 10%, color-mix(in srgb, var(--cms-accent) 7%, transparent), transparent 45%),
        var(--cms-content-bg);
}