/* =========================================================
   SOCIAL PAGE – LIGHT & FAST (NO CSS ANIMATIONS)
========================================================= */

/* ---------- LINKS ---------- */
.social-card-link {
    color: inherit;
    text-decoration: none;
}

/* ---------- CARD BASE ---------- */
.social-card {
    position: relative;
    padding: 1.6rem 1.4rem 1.5rem;
    border-radius: 20px;
    border: 1px solid rgba(0, 183, 255, 0.45);
    text-align: center;
    overflow: hidden;
    transition: transform .18s ease-out, box-shadow .18s ease-out, border-color .18s ease-out;
    will-change: transform, box-shadow;
}

/* ---------- DARK THEME ---------- */
html[data-bs-theme="dark"] .social-card {
    background: radial-gradient(circle at top, rgba(0, 183, 255, 0.15), #050c19);
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.55);
    color: #e5f0ff;
}

/* ---------- LIGHT THEME ---------- */
html[data-bs-theme="light"] .social-card {
    background: #ffffff;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.12);
    border-color: rgba(0, 183, 255, 0.40);
    color: #0f172a;
}

/* ---------- SIMPLE BG OVERLAY (خفيف) ---------- */
.social-card::before {
    content: "";
    position: absolute;
    inset: -25%;
    background: radial-gradient(circle at 0% 0%, rgba(0, 207, 255, 0.10), transparent 55%), radial-gradient(circle at 100% 100%, rgba(0, 174, 239, 0.10), transparent 55%);
    opacity: 0.65;
    pointer-events: none;
}

/* ---------- HOVER ---------- */
.social-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 24px rgba(0, 183, 255, 0.45);
    border-color: rgba(0, 207, 255, 0.9);
}

/* ---------------------------------------------------------
   ICON WRAPPER
--------------------------------------------------------- */
.social-icon-wrapper {
    width: 54px;
    height: 54px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-inline: auto;
    background: radial-gradient(circle, rgba(255, 255, 255, .18), rgba(0, 0, 0, .10));
    box-shadow: 0 0 12px rgba(0, 183, 255, 0.55);
}

.social-icon {
    font-size: 1.6rem;
}

/* ---------- PLATFORM ICON COLORS (stable keys) ---------- */
.platform-instagram .social-icon {
    color: #E1306C;
}

.platform-linkedin .social-icon {
    color: #0A66C2;
}

.platform-facebook .social-icon {
    color: #1877F2;
}

.platform-email .social-icon {
    color: #F97316;
}

.platform-whatsapp .social-icon {
    color: #25D366;
}

.platform-phone .social-icon {
    color: #22C55E;
}

.platform-telegram .social-icon {
    color: #229ED9;
}

.platform-home .social-icon {
    color: var(--amr-primary);
}

/* GitHub auto invert */
html[data-bs-theme="dark"] .platform-github .social-icon {
    color: #ffffff;
}

html[data-bs-theme="light"] .platform-github .social-icon {
    color: #000000;
}


/* ---------------------------------------------------------
   QR IMAGE
--------------------------------------------------------- */
.social-qr-img {
    width: 140px;
    max-width: 70%;
    border-radius: 16px;
/*    border: 1px solid rgba(255, 255, 255, 0.14);
    box-shadow: 0 6px 14px rgba(15, 23, 42, 0.30);*/
    transition: transform .18s ease-out;
    will-change: transform;
    background:#fafafa;
}

.social-card:hover .social-qr-img {
    transform: scale(1.03);
}

/* ---------------------------------------------------------
   TEXT
--------------------------------------------------------- */
.social-title {
    font-size: 1.15rem;
    font-weight: 600;
}

.social-username {
    font-size: 0.95rem;
    opacity: .92;
}

.social-meta {
    opacity: .85;
}

/* ---------------------------------------------------------
   HERO HEADER WITH PHOTO
--------------------------------------------------------- */
.social-hero {
    max-width: 1050px;
    margin-inline: auto;
}

.social-avatar-wrap {
    position: relative;
    width: 210px;
    height: 210px;
    border-radius: 34px;
    overflow: hidden;
    border: 1px solid rgba(60, 177, 239, 0.7);
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.55);
    background: #020712;
    will-change: transform, box-shadow;
}

.social-avatar {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.social-hero-text h1 {
    font-size: clamp(1.8rem, 2.4vw + 1.3rem, 2.6rem);
    font-weight: 700;
}

.social-hero-text .lead {
    font-size: 1.05rem;
}

.social-icon-wrapper {
    transition: transform .18s ease, box-shadow .18s ease;
}

.social-card:hover .social-icon-wrapper {
    transform: translateY(-2px) scale(1.04);
    box-shadow: 0 0 18px rgba(55, 174, 241, 0.55);
}


/* ---------------------------------------------------------
   RESPONSIVE
--------------------------------------------------------- */
@media (max-width: 575.98px) {
    .social-avatar-wrap {
        width: 160px;
        height: 160px;
        border-radius: 26px;
    }

    .social-hero {
        text-align: center;
    }

    .social-card {
        padding: 1.4rem 1.25rem 1.3rem;
    }
}