/* ==========================================================================
   Gift modal (أهدِ خمن) — tabbed: buy gift / redeem / my codes.
   Self-contained, light card (theme-independent), aubergine brand accents.
   ========================================================================== */
:root { --gm-aubergine: #6B0A6F; --gm-aubergine-deep: #4A0E5C; --gm-magenta: #C0008F; --gm-green: #16A34A; }

.gm-overlay {
    position: fixed; inset: 0; z-index: 1300;
    display: flex; align-items: center; justify-content: center; padding: 20px;
    background: rgba(10, 0, 20, .72); backdrop-filter: blur(8px);
    opacity: 0; pointer-events: none; transition: opacity .3s ease;
}
.gm-overlay.is-open { opacity: 1; pointer-events: all; }

.gm-card {
    position: relative; width: 100%; max-width: 760px; max-height: 90vh; overflow-y: auto;
    background: #fff; border-radius: 26px; padding: 26px 26px 30px;
    box-shadow: 0 30px 90px rgba(107, 10, 111, .3);
    transform: translateY(24px) scale(.97); transition: transform .3s ease;
    font-family: 'Cairo', 'Poppins', sans-serif; color: #26202b; text-align: center;
}
.gm-overlay.is-open .gm-card { transform: none; }
.gm-close {
    position: absolute; top: 16px; inset-inline-end: 16px; width: 38px; height: 38px;
    border: none; border-radius: 50%; background: #F1EAF3; color: #6b6b7a; font-size: 1.3rem;
    cursor: pointer; line-height: 1; display: flex; align-items: center; justify-content: center;
    transition: all .2s ease;
}
.gm-close:hover { background: #FEE2E2; color: #EF4444; }

/* ── Tabs ── */
.gm-tabs {
    display: inline-flex; gap: 4px; margin: 4px auto 22px; padding: 5px;
    background: #F4EEF6; border-radius: 50rem; flex-wrap: wrap; justify-content: center;
}
.gm-tab {
    border: none; background: transparent; cursor: pointer; padding: 9px 20px;
    border-radius: 50rem; font: inherit; font-weight: 700; font-size: .9rem; color: #7a6b82;
    transition: all .2s ease;
}
.gm-tab:hover { color: var(--gm-aubergine); }
.gm-tab.is-active { background: linear-gradient(135deg, var(--gm-aubergine), var(--gm-aubergine-deep)); color: #fff; box-shadow: 0 4px 14px rgba(107,10,111,.3); }

/* ── Panels ── */
.gm-panel { display: none; }
.gm-panel.is-active { display: block; animation: gmFade .25s ease; }
@keyframes gmFade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ── Buy tab ── */
.gm-intro { margin-bottom: 20px; }
.gm-gift-illus { font-size: 4.6rem; line-height: 1; filter: drop-shadow(0 8px 18px rgba(107,10,111,.28)); }
.gm-intro-title {
    font-size: 1.4rem; font-weight: 900; margin: 12px 0 8px;
    background: linear-gradient(135deg, var(--gm-aubergine), var(--gm-magenta));
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.gm-intro-desc { color: #6b6470; font-size: .92rem; line-height: 1.8; margin: 0; }
.gm-link { color: var(--gm-green); font-weight: 800; text-decoration: none; }
.gm-link:hover { text-decoration: underline; }

.gm-packages { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; margin-top: 8px; }
.gm-pkg {
    border: 1.5px solid #ECE6F0; border-radius: 16px; padding: 18px 16px; text-align: center;
    display: flex; flex-direction: column; gap: 6px; transition: all .2s ease; background: #FDFBFE;
}
.gm-pkg:hover { border-color: var(--gm-aubergine); box-shadow: 0 8px 22px rgba(107,10,111,.12); transform: translateY(-2px); }
.gm-pkg-name { font-weight: 800; font-size: 1rem; color: #26202b; }
.gm-pkg-games { color: var(--gm-aubergine); font-weight: 800; font-size: .9rem; }
.gm-pkg-price { color: #6b6470; font-size: .85rem; }
.gm-pkg-btn {
    margin-top: 8px; display: inline-block; text-decoration: none; text-align: center;
    background: linear-gradient(135deg, var(--gm-aubergine), var(--gm-magenta)); color: #fff;
    font-weight: 800; font-size: .88rem; padding: 10px 14px; border-radius: 12px; transition: filter .2s ease;
}
.gm-pkg-btn:hover { filter: brightness(1.08); color: #fff; }

/* ── Redeem tab ── */
.gm-redeem-split { display: grid; grid-template-columns: 1fr 1.2fr; gap: 20px; align-items: center; text-align: right; }
.gm-redeem-illus { display: flex; align-items: center; justify-content: center; }
.gm-redeem-illus span { font-size: 6rem; filter: drop-shadow(0 10px 22px rgba(107,10,111,.28)); }
.gm-redeem-box { padding: 8px; }
.gm-enter { display: flex; flex-direction: column; align-items: flex-start; color: #b0a7b8; font-weight: 700; letter-spacing: .04em; }
.gm-enter small:last-child { font-size: .7rem; opacity: .7; }
.gm-code-title { display: flex; align-items: center; gap: 8px; font-size: 1.7rem; font-weight: 900; color: #26202b; margin: 2px 0 18px; flex-wrap: wrap; }
.gm-star { color: var(--gm-magenta); }
.gm-redeem-form { display: flex; align-items: stretch; border: 1.5px solid #E4DCE8; border-radius: 14px; overflow: hidden; background: #fff; }
.gm-redeem-form input { flex: 1; border: none; outline: none; padding: 14px 16px; font: inherit; font-size: 1rem; color: #26202b; background: transparent; text-align: center; letter-spacing: .05em; }
.gm-activate { border: none; cursor: pointer; background: var(--gm-green); color: #fff; font: inherit; font-weight: 800; padding: 0 26px; transition: filter .2s ease; }
.gm-activate:hover { filter: brightness(1.08); }
.gm-activate:disabled { opacity: .6; cursor: default; }
.gm-msg { margin-top: 14px; font-size: .9rem; font-weight: 700; min-height: 1.2em; text-align: center; }
.gm-msg.is-ok { color: var(--gm-green); }
.gm-msg.is-err { color: #EF4444; }

/* ── Codes tab ── */
.gm-codes-filter { display: inline-flex; gap: 4px; margin-bottom: 18px; padding: 4px; background: #F4EEF6; border-radius: 50rem; }
.gm-filter { border: none; background: transparent; cursor: pointer; padding: 8px 18px; border-radius: 50rem; font: inherit; font-weight: 700; font-size: .84rem; color: #7a6b82; transition: all .2s ease; }
.gm-filter.is-active { background: var(--gm-aubergine); color: #fff; }
.gm-codes-list { display: flex; flex-direction: column; gap: 10px; text-align: right; }
.gm-code-card { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; border: 1.5px solid #ECE6F0; border-radius: 14px; padding: 14px 16px; background: #FDFBFE; }
.gm-code-main { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.gm-code-val { font-family: 'Courier New', monospace; font-weight: 800; font-size: 1.05rem; letter-spacing: .06em; color: var(--gm-aubergine); direction: ltr; }
.gm-code-meta { font-size: .8rem; color: #8a8394; }
.gm-code-copy { border: 1.5px solid var(--gm-aubergine); background: transparent; color: var(--gm-aubergine); cursor: pointer; font: inherit; font-weight: 700; font-size: .78rem; padding: 6px 14px; border-radius: 50rem; transition: all .2s ease; }
.gm-code-copy:hover { background: var(--gm-aubergine); color: #fff; }
.gm-badge { font-size: .74rem; font-weight: 800; padding: 4px 12px; border-radius: 50rem; }
.gm-badge.is-used { background: #E7F6EC; color: var(--gm-green); }
.gm-badge.is-unused { background: #F3EAF5; color: var(--gm-aubergine); }
.gm-badge.is-pending { background: #FEF3E2; color: #B45309; }
.gm-badge.is-voided { background: #FEE2E2; color: #EF4444; }

.gm-loading, .gm-empty { color: #9a92a4; font-size: .9rem; padding: 26px; text-align: center; }

@media (max-width: 560px) {
    .gm-card { padding: 22px 18px 26px; border-radius: 20px; }
    .gm-redeem-split { grid-template-columns: 1fr; text-align: center; }
    .gm-redeem-illus span { font-size: 4.4rem; }
    .gm-enter { align-items: center; }
    .gm-code-title { justify-content: center; font-size: 1.4rem; }
    .gm-intro-title { font-size: 1.2rem; }
}