/*!
 * wmg.css — Webmail Gateway client UX styles
 * - Modal overlay (hata gösterimi)
 * - Submit button loading state + dönen spinner
 * - Tema CSS değişkenlerini (--wmg-primary) kullanır.
 */

/* ============ Modal ============ */
.wmg-modal#__wmg_modal {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(15, 22, 38, 0.55);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 99999;
    align-items: center;
    justify-content: center;
    padding: 16px;
    animation: __wmg_fade 0.18s ease-out;
}
.wmg-modal#__wmg_modal.show { display: flex; }

.wmg-modal .wmg-modal-box {
    background: #fff;
    color: #1a1a1a;
    border-radius: 14px;
    padding: 36px 32px 28px;
    width: 100%;
    max-width: 420px;
    text-align: center;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.28);
    animation: __wmg_pop 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
    font-family: var(--wmg-font, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
}

.wmg-modal .wmg-modal-icon {
    width: 56px;
    height: 56px;
    margin: 0 auto 16px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    font-weight: 700;
    line-height: 1;
}
.wmg-modal.wmg-modal--error .wmg-modal-icon {
    background: #fdecea;
    color: #d93025;
}
.wmg-modal.wmg-modal--error .wmg-modal-icon::before { content: "!"; }

.wmg-modal.wmg-modal--success .wmg-modal-icon {
    background: #e6f4ea;
    color: #1e8e3e;
}
.wmg-modal.wmg-modal--success .wmg-modal-icon::before { content: "✓"; }

.wmg-modal.wmg-modal--info .wmg-modal-icon {
    background: #e8f0fe;
    color: #1967d2;
}
.wmg-modal.wmg-modal--info .wmg-modal-icon::before {
    content: "i";
    font-style: italic;
    font-family: Georgia, serif;
}

.wmg-modal .wmg-modal-msg {
    font-size: 15px;
    line-height: 1.55;
    margin-bottom: 24px;
    color: #333;
    word-break: break-word;
}

.wmg-modal .wmg-modal-close {
    background: var(--wmg-primary, #2563eb);
    color: #fff;
    border: none;
    padding: 11px 32px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.15s, transform 0.1s;
    font-family: inherit;
    min-width: 120px;
}
.wmg-modal .wmg-modal-close:hover { opacity: 0.92; }
.wmg-modal .wmg-modal-close:active { transform: scale(0.97); }
.wmg-modal .wmg-modal-close:focus-visible {
    outline: 2px solid var(--wmg-primary, #2563eb);
    outline-offset: 2px;
}

/* ============ Submit button loading state ============ */
/* Buton disabled + "Giriş yapılıyor..." metni + dönen spinner */
button[data-loading],
input[type="submit"][data-loading] {
    cursor: wait !important;
    pointer-events: none;
    opacity: 0.88;
    position: relative;
}

/* Spinner — ::before pseudo-element, BUTTON için (text içinde inline) */
button[data-loading]::before {
    content: '';
    display: inline-block;
    width: 14px;
    height: 14px;
    margin-right: 10px;
    vertical-align: -3px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: __wmg_spin 0.7s linear infinite;
}

/* INPUT[type=submit] için ::before çalışmaz (replaced element) —
   value içine emoji veya CSS background spinner kullanabiliriz.
   Background image trick: */
input[type="submit"][data-loading] {
    background-image: linear-gradient(
        90deg,
        rgba(255,255,255,0.2) 0%,
        rgba(255,255,255,0.4) 50%,
        rgba(255,255,255,0.2) 100%
    );
    background-size: 200% 100%;
    animation: __wmg_shimmer 1.2s linear infinite;
}

/* ============ Animations ============ */
@keyframes __wmg_fade {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes __wmg_pop {
    from { transform: scale(0.88) translateY(8px); opacity: 0; }
    to { transform: scale(1) translateY(0); opacity: 1; }
}
@keyframes __wmg_spin {
    to { transform: rotate(360deg); }
}
@keyframes __wmg_shimmer {
    from { background-position: 200% 0; }
    to   { background-position: -200% 0; }
}

@media (prefers-reduced-motion: reduce) {
    .wmg-modal,
    .wmg-modal-box,
    button[data-loading]::before,
    input[type="submit"][data-loading] {
        animation: none !important;
    }
}