/**
 * Site geneli — bildirim panelleri, modallar ve toast'lar (mobil / tablet)
 */

/* Header çekmecesi — notification-drawer.css */

@media (max-width: 1024px) {
    .notification-drawer-root .notification-item {
        padding: 10px 14px;
        gap: 10px;
        align-items: flex-start;
    }

    .notification-drawer-root .notification-content {
        min-width: 0;
    }

    .notification-drawer-root .notification-title,
    .notification-drawer-root .notification-message {
        word-break: break-word;
        overflow-wrap: anywhere;
    }

    .notification-drawer-root .notification-message {
        font-size: 12px;
    }

    .notification-drawer-root .unread-dot {
        top: 12px;
        right: 12px;
    }

    .notification-drawer-root .admin-badge {
        top: 6px;
        right: 6px;
    }
}

/* —— Bildirimler sayfası (/p/bildirimler.php) —— */
@media (max-width: 1024px) {
    .bildirimler-page {
        padding: 12px max(12px, env(safe-area-inset-right)) 20px max(12px, env(safe-area-inset-left));
        box-sizing: border-box;
        overflow-x: hidden;
    }

    .bildirimler-container {
        gap: 20px;
        width: 100%;
        max-width: 100%;
    }

    .bildirimler-header {
        flex-wrap: wrap;
        gap: 10px;
        padding: 14px 16px;
    }

    .bildirimler-header h1 {
        font-size: 16px;
        flex: 1 1 auto;
        min-width: 0;
    }

    .bildirimler-list {
        max-height: none;
    }

    .bildirim-message {
        word-break: break-word;
        overflow-wrap: anywhere;
    }
}

/* —— Onay / hata modalları (notif-modal, success/error, satın alma) —— */
@media (max-width: 640px) {
    .notif-modal-overlay,
    .success-modal-overlay,
    .error-modal-overlay,
    .purchase-modal-overlay,
    .playerid-modal-overlay,
    .modal-overlay {
        padding: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
        align-items: center;
        box-sizing: border-box;
    }

    .notif-modal,
    .success-modal,
    .error-modal,
    .purchase-modal,
    .playerid-modal,
    .new-message-modal {
        width: 100% !important;
        max-width: min(100%, 420px) !important;
        padding: 22px 18px 20px !important;
        margin: 0;
        box-sizing: border-box;
        max-height: min(88dvh, 640px);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .notif-modal h3,
    .success-modal h3,
    .error-modal h3 {
        font-size: 20px;
    }

    .notif-modal p,
    .success-modal p,
    .error-modal p {
        font-size: 14px;
        margin-bottom: 18px;
    }

    .notif-modal-icon,
    .success-icon,
    .error-icon,
    .confirm-icon {
        width: 64px !important;
        height: 64px !important;
        font-size: 26px !important;
        margin-bottom: 14px !important;
    }

    .notif-modal-btn,
    .success-modal-btn,
    .error-modal-btn {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    .purchase-modal-body {
        padding: 16px 18px 18px !important;
    }

    .purchase-modal-footer.two-buttons .buttons-container {
        flex-direction: column;
        width: 100%;
    }

    .purchase-modal-footer.two-buttons .buttons-container button {
        width: 100%;
    }
}

/* —— Mail / KVKK / telefon modalları —— */
@media (max-width: 640px) {
    .mail-modal {
        padding: max(10px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left));
        align-items: center;
    }

    .mail-modal__dialog,
    .mail-modal__dialog--sm,
    .mail-modal__dialog--kvkk-aydinlatma,
    .mail-modal__dialog--verify-page {
        width: 100% !important;
        max-width: min(100%, calc(100% - 20px)) !important;
        max-height: min(92dvh, 720px);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding-left: 16px !important;
        padding-right: 16px !important;
        box-sizing: border-box;
    }

    .mail-modal__head-row {
        padding-right: 28px !important;
        flex-wrap: wrap;
    }

    .mail-modal__title,
    .mail-modal__title--inline {
        font-size: 17px !important;
        word-break: break-word;
    }

    .mail-modal__body-msg,
    .mail-modal__sub {
        word-break: break-word;
        overflow-wrap: anywhere;
    }

    .mail-flow-btn,
    .mail-flow-btn--block,
    button.mail-flow-btn {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    .mail-modal__x {
        top: 8px;
        right: 8px;
    }

    #modalKycKvkkAydinlatma .mail-modal__dialog--kvkk-aydinlatma,
    #modalMailKvkkAydinlatma .mail-modal__dialog--kvkk-aydinlatma,
    #modalPhoneKvkkAydinlatma .mail-modal__dialog--kvkk-aydinlatma {
        max-width: min(100%, calc(100% - 16px)) !important;
        max-height: min(92dvh, 860px);
        padding: 0 14px 16px !important;
    }

    #modalKycKvkkAydinlatma .mail-kvkk-aydinlatma__scroll,
    #modalMailKvkkAydinlatma .mail-kvkk-aydinlatma__scroll,
    #modalPhoneKvkkAydinlatma .mail-kvkk-aydinlatma__scroll {
        max-height: min(52dvh, 420px);
    }

    .mail-verify-home-overlay__pad {
        padding: 0 14px !important;
    }

    .mail-verify-home-overlay__lead {
        flex-wrap: wrap;
    }

    .mail-verify-home-overlay__actions {
        width: 100%;
        flex-direction: column;
        align-items: stretch !important;
    }

    .mail-verify-home-overlay__actions .mail-flow-btn {
        width: 100%;
        min-width: 0;
    }
}

/* —— Mağaza doping modal —— */
@media (max-width: 640px) {
    .doping-modal {
        padding: 12px;
        box-sizing: border-box;
    }

    .doping-modal .modal-content {
        width: 100% !important;
        max-width: min(100%, calc(100% - 24px)) !important;
        max-height: min(90dvh, 720px);
        overflow-y: auto;
        margin: 0;
    }

    .doping-modal__btn-row {
        flex-direction: column;
        gap: 8px;
    }

    .doping-modal__btn-row button {
        width: 100%;
    }
}

/* —— Toast bildirimleri —— */
@media (max-width: 640px) {
    .kyc-toast-host,
    .fatura-toast-host {
        top: auto;
        bottom: max(72px, calc(56px + env(safe-area-inset-bottom, 0px)));
        left: max(12px, env(safe-area-inset-left));
        right: max(12px, env(safe-area-inset-right));
        max-width: none;
        width: auto;
        align-items: stretch;
    }

    .kyc-toast,
    .fatura-toast {
        width: 100%;
        max-width: none;
        box-sizing: border-box;
        word-break: break-word;
    }

    .site-toast {
        left: max(12px, env(safe-area-inset-left)) !important;
        right: max(12px, env(safe-area-inset-right)) !important;
        top: auto !important;
        bottom: max(72px, calc(56px + env(safe-area-inset-bottom, 0px))) !important;
        max-width: none !important;
        width: auto !important;
        text-align: center;
        box-sizing: border-box;
        word-break: break-word;
        animation: siteToastInMobile 0.3s ease !important;
    }
}

@keyframes siteToastInMobile {
    from {
        transform: translateY(12px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* —— Canlı destek KVKK modal —— */
@media (max-width: 640px) {
    .kvkk-modal-overlay {
        width: 100% !important;
        height: 100% !important;
        right: 0 !important;
        bottom: 0 !important;
        left: 0 !important;
        top: 0 !important;
        padding: max(10px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left));
        box-sizing: border-box;
    }

    .kvkk-modal {
        width: 100% !important;
        max-width: 100% !important;
        max-height: min(92dvh, 720px);
        margin: 0;
        box-sizing: border-box;
    }

    .kvkk-modal-body {
        max-height: min(50dvh, 400px);
    }

    .kvkk-accept-btn {
        width: 100%;
        box-sizing: border-box;
    }
}

/* —— Dashboard inline uyarılar —— */
@media (max-width: 1024px) {
    .dashboard-wrapper .auth-alert {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        word-break: break-word;
    }

    .pwd-flash,
    .mail-flash {
        word-break: break-word;
        overflow-wrap: anywhere;
    }
}