/* ======================================================
   NOTIFICATIONS CARD
====================================================== */
#notificationsForm .card {
    margin-bottom: var(--card-margin-btm);
    opacity: 0;
    transform: translateY(24px) scale(0.98);
    transition: opacity 0.28s cubic-bezier(0.44, 1.13, 0.73, 0.98),
        transform 0.28s cubic-bezier(0.44, 1.13, 0.73, 0.98);
}

#notificationsForm .card.show-card {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* ======================================================
   TOGGLE ROWS (FIELD GROUPS)
====================================================== */
#notificationsForm .field.toggle-row--expanded {
    margin-bottom: 0.44em;
    padding-bottom: 0.38em;
    z-index: 2;
}

#notificationsForm .field.toggle-row {
    margin-bottom: 0.08em;
    margin-top: 0.04em;
    padding-left: 0.07em;
    gap: var(--field-gap, 0.6em);
}

/* ======================================================
   NOTIFICATION TOGGLE GROUP
====================================================== */
.notification-toggle-group {
    display: flex;
    flex-direction: column;
    gap: 0.18em;
    margin-top: 0.24em;
    margin-bottom: 0.37em;
}

/* ======================================================
   TEST BUTTON (VISIBLE ONLY IF ENABLED)
====================================================== */
#notificationsForm .field.toggle-row .btn--test.enabled {
    display: inline-flex;
}

/* ======================================================
   CARD HEADER
====================================================== */
.card-header {
    padding-bottom: 0.3em;
    margin-bottom: 0.5em;
    font-size: 1.2em;
    font-weight: bold;
    color: var(--primary);
}

/* ======================================================
   NOTIFICATION FIELDSET (COLLAPSIBLE EXPAND/COLLAPSE)
====================================================== */
.notification-fieldset {
    display: flex;
    flex-direction: column;
    border-radius: var(--card-radius, 8px);
    margin: 0.24em 0 0.52em 0;
    padding: var(--notification-fieldset-padding, 1em 1.3em 1.1em 1.2em);
    opacity: 0;
    max-height: 0;
    pointer-events: none;
    transform: translateY(18px) scale(0.98);
    transition: opacity 0.33s cubic-bezier(0.44, 1.13, 0.73, 0.98),
        max-height 0.33s cubic-bezier(0.44, 1.13, 0.73, 0.98),
        padding 0.17s cubic-bezier(0.44, 1.13, 0.73, 0.98),
        transform 0.33s cubic-bezier(0.44, 1.13, 0.73, 0.98);
    overflow: hidden;
    box-shadow: var(--notification-card-shadow, 0 2px 10px rgba(0, 0, 0, 0.13));
    background-color: var(--card-bg);
}

.notification-fieldset.expanded {
    opacity: 1;
    max-height: 2000px;
    pointer-events: auto;
    transform: translateY(0) scale(1);
    animation: notificationFieldsetIn 0.33s cubic-bezier(0.44, 1.13, 0.73, 0.98);
    margin-bottom: 1.3em !important;
}

.notification-fieldset.expanded .notification-field-container:last-child {
    margin-bottom: 1.3em;
}

.notification-fieldset:not(.expanded) {
    animation: notificationFieldsetOut 0.27s cubic-bezier(0.71, 0, 0.32, 1);
}

/* ======================================================
   FIELDSET LEGEND
====================================================== */
.fieldset-legend {
    margin-top: 0.6em;
    margin-bottom: 0.95em;
    text-align: left;
    font-weight: 600;
    /* color: var(--primary); */
    font-size: 1.11em;
}

/* ======================================================
   FIELD CONTAINER
====================================================== */
.notification-field-container {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin-bottom: 0.39em;
}

.notification-field-container label {
    font-size: 1em;
    font-weight: 500;
    margin-bottom: 0.27em;
    margin-right: 0;
}

.notification-field-container:last-child {
    margin-bottom: 0;
}

/* ======================================================
   TEST BUTTON (GLOBAL)
====================================================== */
.btn--test {
    display: none;
    margin-left: auto;
}

/* ======================================================
   FIELDSET ANIMATIONS
====================================================== */
@keyframes notificationFieldsetIn {
    from {
        opacity: 0;
        transform: translateY(18px) scale(0.98);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes notificationFieldsetOut {
    from {
        opacity: 1;
        transform: translateY(0) scale(1);
    }

    to {
        opacity: 0;
        transform: translateY(-11px) scale(0.96);
    }
}