/* CONSENT-NATIVE (2026-10-13): minxa's own buttons, switches and section titles, ONE copy for the
   settings / edit-profile modals (.edit-profile-modal-overlay, partials/edit-profile-modal) and the
   cookie banner (.mxConsent, partials/consent + public/css/consent.css). Both partials link this
   file: the modals are rendered for signed-in visitors only, the banner for everyone, and neither
   has the other's page. Change a value here and both change. Colours are the site's variables
   (public/css/ui.chrome.css :root); consent.css sets the light values on the banner itself for the
   pages that do not load ui.chrome.css (the legal pages, .mxConsent-light).
   ConsentNativeContractTest pins that the banner uses these classes. */

.edit-profile-modal-overlay .edit-profile-section-title,
.mxConsent .edit-profile-section-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-color);
    margin: 0 0 0.75rem 0;
}

.edit-profile-modal-overlay .privacy-toggle,
.mxConsent .privacy-toggle {
    position: relative;
    width: 50px;
    height: 28px;
}

.edit-profile-modal-overlay .privacy-toggle-input,
.mxConsent .privacy-toggle-input {
    opacity: 0;
    width: 0;
    height: 0;
}

.edit-profile-modal-overlay .privacy-toggle-slider,
.mxConsent .privacy-toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--border);
    transition: 0.3s;
    border-radius: 28px;
}

.edit-profile-modal-overlay .privacy-toggle-slider:before,
.mxConsent .privacy-toggle-slider:before {
    position: absolute;
    content: "";
    height: 22px;
    width: 22px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: 0.3s;
    border-radius: 50%;
}

.edit-profile-modal-overlay .privacy-toggle-input:checked + .privacy-toggle-slider,
.mxConsent .privacy-toggle-input:checked + .privacy-toggle-slider {
    background-color: var(--accent);
}

.edit-profile-modal-overlay .privacy-toggle-input:checked + .privacy-toggle-slider:before,
.mxConsent .privacy-toggle-input:checked + .privacy-toggle-slider:before {
    transform: translateX(22px);
}

.edit-profile-modal-overlay .edit-profile-button,
.mxConsent .edit-profile-button {
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    transition: opacity 0.2s;
}

.edit-profile-modal-overlay .edit-profile-button-primary,
.mxConsent .edit-profile-button-primary {
    background: var(--accent);
    color: #fff;
}

.edit-profile-modal-overlay .edit-profile-button-primary:hover:not(:disabled),
.mxConsent .edit-profile-button-primary:hover:not(:disabled) {
    opacity: 0.9;
}

.edit-profile-modal-overlay .edit-profile-button-primary:disabled,
.mxConsent .edit-profile-button-primary:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.edit-profile-modal-overlay .edit-profile-button-secondary,
.mxConsent .edit-profile-button-secondary {
    background: transparent;
    color: var(--text-color);
    border: 1px solid var(--border);
}

.edit-profile-modal-overlay .edit-profile-button-secondary:hover:not(:disabled),
.mxConsent .edit-profile-button-secondary:hover:not(:disabled) {
    background: var(--hover-bg, rgba(0, 0, 0, 0.05));
}

@media (prefers-color-scheme: dark) {
    .edit-profile-modal-overlay .edit-profile-button-secondary:hover:not(:disabled),
    .mxConsent .edit-profile-button-secondary:hover:not(:disabled) {
        background: rgba(255, 255, 255, 0.05);
    }
}