/* =========================================================
   Market UI v2 — Flash Notifications
   Path: public/assets/marketv2/components/flash-notifications/flash-notifications.css

   Render only
   - يستهلك فقط render tokens القادمة من variables.css
   - لا يحتوي theme logic
   - لا يحتوي business logic
   - يعتمد root color -> inherit for title/message
========================================================= */

.m-flash-notifications {
    position: fixed;
    top: var(--flash_notifications_top);
    inset-inline-end: var(--flash_notifications_inline_offset);
    z-index: var(--flash_notifications_z_index);

    display: flex;
    flex-direction: column;
    gap: var(--flash_notifications_gap);

    width: var(--flash_notifications_width);
    max-width: var(--flash_notifications_max_width);

    pointer-events: none;
}

.m-flash-notification {
    --_bg: var(--flash_notification_bg);
    --_border: var(--flash_notification_border);
    --_text: var(--flash_notification_text);
    --_meta: var(--flash_notification_meta_color);

    --_accent: var(--flash_notification_accent_color);
    --_glow: var(--flash_notification_glow);
    --_icon-bg: var(--flash_notification_icon_bg);
    --_icon-color: var(--flash_notification_icon_color);

    --_close-bg: var(--flash_notification_close_bg);
    --_close-bg-hover: var(--flash_notification_close_bg_hover);
    --_close-border: var(--flash_notification_close_border);
    --_close-border-hover: var(--flash_notification_close_border_hover);
    --_close-color: var(--flash_notification_close_color);
    --_close-color-hover: var(--flash_notification_close_color_hover);

    --_progress-track: var(--flash_notification_progress_track_color);
    --_progress-bar: var(--flash_notification_progress_bar_color);

    position: relative;
    isolation: isolate;
    overflow: hidden;
    pointer-events: auto;

    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: start;
    column-gap: var(--flash_notification_gap);

    min-height: var(--flash_notification_min_height);
    padding: var(--flash_notification_padding_y) var(--flash_notification_padding_x);

    background: var(--_bg);
    border: var(--flash_notification_border_width) solid var(--_border);
    border-radius: var(--flash_notification_radius);
    box-shadow: var(--flash_notification_shadow);

    color: var(--_text);
    backdrop-filter: var(--flash_notification_backdrop_supported);
    -webkit-backdrop-filter: var(--flash_notification_backdrop_supported);

    transform: translate3d(0, 0, 0);
    transition:
        transform var(--flash_notification_transition),
        box-shadow var(--flash_notification_transition),
        border-color var(--flash_notification_transition),
        background-color var(--flash_notification_transition),
        opacity var(--flash_notification_transition);

    animation: mFlashNotificationIn var(--flash_notification_enter_duration) cubic-bezier(.2, .8, .2, 1) forwards;
}

.m-flash-notification:hover,
.m-flash-notification:focus-within {
    transform: translateY(-1px);
    box-shadow: var(--flash_notification_shadow_hover);
}

.m-flash-notification::before {
    content: "";
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    width: var(--flash_notification_accent_width);

    border-start-start-radius: inherit;
    border-end-start-radius: inherit;

    background: var(--_accent);
    pointer-events: none;
}

.m-flash-notification::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;

    pointer-events: none;
    border-radius: inherit;
    box-shadow: var(--_glow);
    opacity: 0.9;
}

/* =========================================================
   ICON
========================================================= */

.m-flash-notification__icon {
    width: var(--flash_notification_icon_wrap_size);
    height: var(--flash_notification_icon_wrap_size);

    display: inline-flex;
    align-items: center;
    justify-content: center;

    margin-top: var(--flash_notification_icon_margin_top);
    border-radius: var(--flash_notification_icon_radius);

    background: var(--_icon-bg);
    color: var(--_icon-color);
    box-shadow: var(--flash_notification_icon_shadow);

    flex: 0 0 auto;
}

.m-flash-notification__icon > span,
.m-flash-notification__icon > i,
.m-flash-notification__icon > svg {
    width: var(--flash_notification_icon_size);
    height: var(--flash_notification_icon_size);

    display: inline-flex;
    align-items: center;
    justify-content: center;

    font-size: var(--flash_notification_icon_size);
    line-height: 1;
    flex: 0 0 auto;
}

/* =========================================================
   CONTENT
========================================================= */

.m-flash-notification__content {
    min-width: 0;

    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: var(--flash_notification_content_gap);

    padding-inline-end: var(--flash_notification_content_padding_inline_end);
    color: inherit;
}

.m-flash-notification__title {
    margin: 0;

    font-size: var(--flash_notification_title_font_size);
    line-height: var(--flash_notification_title_line_height);
    font-weight: var(--flash_notification_title_font_weight);

    color: inherit;
    letter-spacing: 0;
    word-break: break-word;
}

.m-flash-notification__message {
    margin: 0;

    font-size: var(--flash_notification_message_font_size);
    line-height: var(--flash_notification_message_line_height);
    font-weight: var(--flash_notification_message_font_weight);

    color: inherit;
    word-break: break-word;
}

.m-flash-notification__meta {
    margin: 0;

    font-size: var(--flash_notification_meta_font_size);
    line-height: var(--flash_notification_meta_line_height);
    font-weight: var(--flash_notification_meta_font_weight);

    color: var(--_meta);
    word-break: break-word;
}

/* fallback بسيط وآمن عندما يكون المحتوى نصيًا فقط أو قليل البنية */
.m-flash-notification__content:empty {
    display: none;
}

/* =========================================================
   CLOSE
========================================================= */

.m-flash-notification__close {
    width: var(--flash_notification_close_size);
    height: var(--flash_notification_close_size);

    display: inline-flex;
    align-items: center;
    justify-content: center;

    margin-top: var(--flash_notification_close_margin_top);
    margin-inline-end: var(--flash_notification_close_margin_inline_end);
    padding: 0;

    border: 1px solid var(--_close-border);
    border-radius: var(--flash_notification_close_radius);

    background: var(--_close-bg);
    color: var(--_close-color);

    cursor: pointer;
    appearance: none;
    outline: none;

    font-size: var(--flash_notification_close_icon_size);
    line-height: 1;
    flex: 0 0 auto;

    transition:
        color var(--flash_notification_transition),
        background-color var(--flash_notification_transition),
        border-color var(--flash_notification_transition),
        transform var(--flash_notification_transition),
        opacity var(--flash_notification_transition),
        box-shadow var(--flash_notification_transition);
}

.m-flash-notification__close:hover,
.m-flash-notification__close:focus-visible {
    background: var(--_close-bg-hover);
    border-color: var(--_close-border-hover);
    color: var(--_close-color-hover);
}

.m-flash-notification__close:focus-visible {
    box-shadow: var(--flash_notification_close_focus_ring);
}

.m-flash-notification__close:active {
    transform: scale(.96);
}

/* =========================================================
   PROGRESS
========================================================= */

.m-flash-notification__progress {
    position: absolute;
    inset-inline: var(--flash_notification_progress_inset_inline);
    inset-block-end: var(--flash_notification_progress_inset_block_end);

    height: var(--flash_notification_progress_height);
    border-radius: var(--flash_notification_progress_radius);
    overflow: hidden;

    pointer-events: none;
    background: var(--_progress-track);
    opacity: var(--flash_notification_progress_track_opacity);
}

.m-flash-notification__progress-bar {
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;

    width: 100%;
    border-radius: inherit;
    transform-origin: left center;

    background: var(--_progress-bar);
    opacity: var(--flash_notification_progress_bar_opacity);

    animation-name: mFlashNotificationProgress;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
    animation-duration: var(--flash_notification_progress_duration, var(--flash_notification_progress_duration_default));
}

html[dir="rtl"] .m-flash-notification__progress-bar,
.m-dir-rtl .m-flash-notification__progress-bar {
    inset-inline-start: auto;
    inset-inline-end: 0;
    transform-origin: right center;
}

/* =========================================================
   STATES
========================================================= */

.m-flash-notification.is-paused .m-flash-notification__progress-bar {
    animation-play-state: paused;
}

.m-flash-notification.is-removing {
    pointer-events: none;
    animation: mFlashNotificationOut var(--flash_notification_exit_duration) cubic-bezier(.4, 0, .2, 1) forwards;
}

.m-flash-notification.is-removing .m-flash-notification__progress-bar {
    animation-play-state: paused;
}

/* =========================================================
   VISUAL VARIANTS
========================================================= */

.m-flash-notification--success {
    --_bg: var(--flash_success_bg);
    --_border: var(--flash_success_border);
    --_accent: var(--flash_success_accent);
    --_glow: var(--flash_success_glow);
    --_icon-bg: var(--flash_success_icon_bg);
    --_icon-color: var(--flash_success_icon_color);
    --_progress-track: var(--flash_success_progress_track);
    --_progress-bar: var(--flash_success_progress_bar);
}

.m-flash-notification--error {
    --_bg: var(--flash_error_bg);
    --_border: var(--flash_error_border);
    --_accent: var(--flash_error_accent);
    --_glow: var(--flash_error_glow);
    --_icon-bg: var(--flash_error_icon_bg);
    --_icon-color: var(--flash_error_icon_color);
    --_progress-track: var(--flash_error_progress_track);
    --_progress-bar: var(--flash_error_progress_bar);
}

.m-flash-notification--warning {
    --_bg: var(--flash_warning_bg);
    --_border: var(--flash_warning_border);
    --_accent: var(--flash_warning_accent);
    --_glow: var(--flash_warning_glow);
    --_icon-bg: var(--flash_warning_icon_bg);
    --_icon-color: var(--flash_warning_icon_color);
    --_progress-track: var(--flash_warning_progress_track);
    --_progress-bar: var(--flash_warning_progress_bar);
}

.m-flash-notification--info {
    --_bg: var(--flash_info_bg);
    --_border: var(--flash_info_border);
    --_accent: var(--flash_info_accent);
    --_glow: var(--flash_info_glow);
    --_icon-bg: var(--flash_info_icon_bg);
    --_icon-color: var(--flash_info_icon_color);
    --_progress-track: var(--flash_info_progress_track);
    --_progress-bar: var(--flash_info_progress_bar);
}

/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 575.98px) {
    .m-flash-notifications {
        top: var(--flash_notification_mobile_top);
        inset-inline: var(--flash_notification_mobile_inset_inline);

        width: auto;
        max-width: none;
    }

    .m-flash-notification {
        min-height: var(--flash_notification_mobile_min_height);
        padding: var(--flash_notification_mobile_padding_y) var(--flash_notification_mobile_padding_x);
        column-gap: var(--flash_notification_mobile_gap);
    }

    .m-flash-notification__icon {
        width: var(--flash_notification_mobile_icon_wrap_size);
        height: var(--flash_notification_mobile_icon_wrap_size);
    }

    .m-flash-notification__close {
        width: var(--flash_notification_mobile_close_size);
        height: var(--flash_notification_mobile_close_size);
    }

    .m-flash-notification__progress {
        inset-inline: var(--flash_notification_mobile_progress_inset_inline);
        inset-block-end: var(--flash_notification_mobile_progress_inset_block_end);
    }
}

/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {
    .m-flash-notification,
    .m-flash-notification__close,
    .m-flash-notification__progress-bar {
        animation: none !important;
        transition-duration: 0.01ms !important;
    }
}

/* =========================================================
   KEYFRAMES
========================================================= */

@keyframes mFlashNotificationIn {
    from {
        opacity: 0;
        transform: translate3d(14px, -8px, 0) scale(.985);
    }

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

@keyframes mFlashNotificationOut {
    from {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1);
    }

    to {
        opacity: 0;
        transform: translate3d(16px, -4px, 0) scale(.98);
    }
}

@keyframes mFlashNotificationProgress {
    from {
        transform: scaleX(1);
    }

    to {
        transform: scaleX(0);
    }
}