/**
 * GCM Admin Alert System — Complete SEO System Theme
 * Purple-gradient modals · Stacked toasts · Inline banners · Danger confirm
 */

/* ── Keyframes ── */
@keyframes gcmFadeIn    { from{opacity:0}             to{opacity:1} }
@keyframes gcmFadeOut   { from{opacity:1}             to{opacity:0} }
@keyframes gcmSlideIn   { from{transform:scale(.82) translateY(32px);opacity:0} to{transform:scale(1) translateY(0);opacity:1} }
@keyframes gcmSlideOut  { from{transform:scale(1)  translateY(0);opacity:1}     to{transform:scale(.88) translateY(20px);opacity:0} }
@keyframes gcmToastIn   { from{transform:translateX(110%);opacity:0}   to{transform:translateX(0);opacity:1} }
@keyframes gcmToastOut  { from{transform:translateX(0);opacity:1}       to{transform:translateX(110%);opacity:0} }
@keyframes gcmSpin      { to{transform:rotate(360deg)} }
@keyframes gcmPulseRing { 0%,100%{transform:scale(1);opacity:.6} 50%{transform:scale(1.12);opacity:.3} }
@keyframes gcmProgress  { from{width:100%} to{width:0} }
@keyframes gcmShake     { 0%,100%{transform:translateX(0)} 20%,60%{transform:translateX(-5px)} 40%,80%{transform:translateX(5px)} }
@keyframes gcmBounce    { 0%,100%{transform:scale(1)} 50%{transform:scale(1.08)} }

/* ──────────────────────────────────────────────
   OVERLAY
────────────────────────────────────────────── */
.gcm-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15,23,42,.78);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 99999;
    padding: 20px;
    animation: gcmFadeIn .25s ease forwards;
}
.gcm-modal-overlay.closing {
    animation: gcmFadeOut .25s ease forwards;
}

/* ──────────────────────────────────────────────
   MODAL SHELL
────────────────────────────────────────────── */
.gcm-modal {
    background: #fff;
    border-radius: 22px;
    max-width: 460px;
    width: 100%;
    box-shadow: 0 28px 60px rgba(0,0,0,.22);
    overflow: hidden;
    animation: gcmSlideIn .38s cubic-bezier(.34,1.56,.64,1) forwards;
    position: relative;
}
.gcm-modal.closing {
    animation: gcmSlideOut .25s ease forwards;
}

/* ── Modal Header (gradient per type) ── */
.gcm-modal-header {
    padding: 28px 28px 22px;
    text-align: center;
    position: relative;
    overflow: hidden;
}
/* Decorative bubbles */
.gcm-modal-header::before {
    content:''; position:absolute; top:-24px; right:-24px;
    width:110px; height:110px; border-radius:50%; background:rgba(255,255,255,.1);
}
.gcm-modal-header::after {
    content:''; position:absolute; bottom:-32px; left:-20px;
    width:90px; height:90px; border-radius:50%; background:rgba(255,255,255,.08);
}

/* Type-specific header gradients */
.gcm-modal.type-success .gcm-modal-header { background:linear-gradient(135deg,#10b981,#059669); }
.gcm-modal.type-error   .gcm-modal-header { background:linear-gradient(135deg,#ef4444,#dc2626); animation:gcmShake .4s ease .1s; }
.gcm-modal.type-warning .gcm-modal-header { background:linear-gradient(135deg,#f59e0b,#d97706); }
.gcm-modal.type-info    .gcm-modal-header { background:linear-gradient(135deg,#667eea,#764ba2); }
.gcm-modal.type-confirm .gcm-modal-header { background:linear-gradient(135deg,#667eea,#764ba2); }
.gcm-modal.type-danger  .gcm-modal-header { background:linear-gradient(135deg,#ef4444,#dc2626); }
.gcm-modal.type-loading .gcm-modal-header { background:linear-gradient(135deg,#667eea,#764ba2); }

/* ── Modal Icon ── */
.gcm-modal-icon {
    width: 68px;
    height: 68px;
    margin: 0 auto 14px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    background: rgba(255,255,255,.22);
    color: #fff;
    position: relative;
    z-index: 1;
    animation: gcmBounce 2.5s infinite;
}
.gcm-modal-icon::after {
    content:'';
    position:absolute; inset:-6px;
    border-radius:50%;
    background:rgba(255,255,255,.15);
    animation:gcmPulseRing 2.5s infinite;
}

/* ── Modal Title (inside header) ── */
.gcm-modal-title {
    font-size: 20px;
    font-weight: 800;
    color: #fff;
    margin: 0;
    position: relative;
    z-index: 1;
}

/* ── Modal Body ── */
.gcm-modal-body {
    padding: 24px 28px 28px;
    text-align: center;
}
.gcm-modal-message {
    font-size: 15px;
    line-height: 1.75;
    color: #64748b;
    margin-bottom: 24px;
}

/* ── Modal Buttons ── */
.gcm-modal-buttons {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}
.gcm-btn {
    padding: 12px 28px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 700;
    border: none;
    cursor: pointer;
    transition: all .25s;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 110px;
    justify-content: center;
    letter-spacing: .2px;
}
.gcm-btn:hover  { transform:translateY(-2px); }
.gcm-btn:active { transform:scale(.96); }

.gcm-btn-primary   { background:linear-gradient(135deg,#667eea,#764ba2); color:#fff; box-shadow:0 4px 14px rgba(102,126,234,.45); }
.gcm-btn-primary:hover   { box-shadow:0 8px 24px rgba(102,126,234,.55); }
.gcm-btn-success   { background:linear-gradient(135deg,#10b981,#059669); color:#fff; box-shadow:0 4px 14px rgba(16,185,129,.4); }
.gcm-btn-success:hover   { box-shadow:0 8px 24px rgba(16,185,129,.5); }
.gcm-btn-danger    { background:linear-gradient(135deg,#ef4444,#dc2626); color:#fff; box-shadow:0 4px 14px rgba(239,68,68,.4); }
.gcm-btn-danger:hover    { box-shadow:0 8px 24px rgba(239,68,68,.5); }
.gcm-btn-warning   { background:linear-gradient(135deg,#f59e0b,#d97706); color:#fff; box-shadow:0 4px 14px rgba(245,158,11,.4); }
.gcm-btn-warning:hover   { box-shadow:0 8px 24px rgba(245,158,11,.5); }
.gcm-btn-secondary { background:#f1f5f9; color:#475569; box-shadow:0 2px 8px rgba(0,0,0,.08); }
.gcm-btn-secondary:hover { background:#e2e8f0; }

/* ── Loading Spinner ── */
.gcm-loading {
    display: inline-block;
    width: 36px;
    height: 36px;
    border: 3px solid rgba(255,255,255,.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: gcmSpin .75s linear infinite;
}

/* ──────────────────────────────────────────────
   TOAST CONTAINER  (all toasts stack here)
────────────────────────────────────────────── */
.gcm-toast-container {
    position: fixed;
    top: 24px;
    right: 24px;
    z-index: 99999;
    display: flex;
    flex-direction: column;
    gap: 10px;
    pointer-events: none;
    max-width: 380px;
    width: calc(100% - 48px);
}

/* ── Single Toast ── */
.gcm-toast {
    background: #fff;
    border-radius: 14px;
    padding: 14px 16px;
    box-shadow: 0 8px 30px rgba(0,0,0,.11), 0 2px 6px rgba(0,0,0,.06);
    display: flex;
    align-items: center;
    gap: 13px;
    pointer-events: all;
    position: relative;
    overflow: hidden;
    animation: gcmToastIn .4s cubic-bezier(.34,1.56,.64,1) forwards;
    border-left: 4px solid var(--tc, #667eea);
}
.gcm-toast.hiding {
    animation: gcmToastOut .3s ease forwards;
    pointer-events: none;
}

/* Icon pill */
.gcm-toast-icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    color: #fff;
    background: var(--tc, #667eea);
    flex-shrink: 0;
}

/* Text */
.gcm-toast-content { flex:1; min-width:0; }
.gcm-toast-title   { font-weight:700; font-size:13.5px; color:#1e293b; margin-bottom:2px; }
.gcm-toast-message { font-size:12.5px; color:#64748b; line-height:1.5; }

/* Close button */
.gcm-toast-close {
    width: 26px; height: 26px;
    border: none; border-radius: 7px;
    background: #f1f5f9; color: #94a3b8;
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    font-size: 10px; flex-shrink: 0; transition: all .2s;
}
.gcm-toast-close:hover { background:#e2e8f0; color:#1e293b; transform:rotate(90deg); }

/* Progress bar at bottom */
.gcm-toast-progress {
    position: absolute;
    bottom: 0; left: 0;
    height: 3px;
    background: var(--tc, #667eea);
    animation: gcmProgress var(--td, 4s) linear forwards;
}

/* ── Toast colour variants ── */
.gcm-toast.toast-success { --tc:#10b981; }
.gcm-toast.toast-error   { --tc:#ef4444; }
.gcm-toast.toast-warning { --tc:#f59e0b; }
.gcm-toast.toast-info    { --tc:#667eea; }

/* ──────────────────────────────────────────────
   INLINE ALERT BANNERS
   Usage: <div class="gcm-alert gcm-alert-success"> ... </div>
────────────────────────────────────────────── */
.gcm-alert {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 15px 18px;
    border-radius: 14px;
    border: 1px solid;
    margin-bottom: 18px;
    font-size: 13.5px;
    line-height: 1.65;
    animation: gcmFadeIn .3s ease;
}
.gcm-alert-icon {
    width: 36px; height: 36px;
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    font-size: 16px; color: #fff; flex-shrink: 0; margin-top: 1px;
}
.gcm-alert-content { flex:1; }
.gcm-alert-title   { font-weight:700; margin-bottom:3px; font-size:14px; display:block; }
.gcm-alert p       { margin:0; }
.gcm-alert-close   { background:none; border:none; cursor:pointer; font-size:14px; opacity:.5; margin-left:auto; padding:0 0 0 8px; flex-shrink:0; transition:opacity .2s; }
.gcm-alert-close:hover { opacity:1; }

.gcm-alert-success { background:#f0fdf4; border-color:#bbf7d0; color:#166534; }
.gcm-alert-success .gcm-alert-icon { background:linear-gradient(135deg,#10b981,#059669); }
.gcm-alert-success .gcm-alert-title { color:#065f46; }

.gcm-alert-error   { background:#fef2f2; border-color:#fecaca; color:#991b1b; }
.gcm-alert-error .gcm-alert-icon { background:linear-gradient(135deg,#ef4444,#dc2626); }
.gcm-alert-error .gcm-alert-title { color:#7f1d1d; }

.gcm-alert-warning { background:#fffbeb; border-color:#fde68a; color:#78350f; }
.gcm-alert-warning .gcm-alert-icon { background:linear-gradient(135deg,#f59e0b,#d97706); }
.gcm-alert-warning .gcm-alert-title { color:#92400e; }

.gcm-alert-info    { background:#eff6ff; border-color:#bfdbfe; color:#1e40af; }
.gcm-alert-info .gcm-alert-icon { background:linear-gradient(135deg,#667eea,#764ba2); }
.gcm-alert-info .gcm-alert-title { color:#1e3a8a; }

/* ──────────────────────────────────────────────
   RESPONSIVE
────────────────────────────────────────────── */
@media (max-width:640px) {
    .gcm-modal        { max-width:calc(100% - 24px); }
    .gcm-modal-header { padding:22px 22px 18px; }
    .gcm-modal-body   { padding:20px 22px 24px; }
    .gcm-modal-buttons{ flex-direction:column; }
    .gcm-btn          { width:100%; justify-content:center; }
    .gcm-toast-container { right:12px; left:12px; top:12px; width:auto; max-width:none; }
}

/* ── Focus ring for accessibility ── */
.gcm-btn:focus-visible { outline:3px solid rgba(102,126,234,.6); outline-offset:2px; }