/* ============================================= */
/* ==   1. Base & Tier Styles (The Frames)    == */
/* ============================================= */

/* The main container for any icon */
.achievement-icon {
    display: inline-block;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    position: relative;
    margin: 0 auto;
    color: white;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1), inset 0 3px 4px rgba(255,255,255,0.2);
    overflow: hidden;

  
}

    .achievement-icon.tier-bronze {
        background: linear-gradient(145deg, #d39c7a, #a56742);
        border: 4px solid #b97a56;
    }

    .achievement-icon.tier-silver {
        background: linear-gradient(145deg, #e0e0e0, #b0b0b0);
        border: 4px solid #b8b8b8;
    }

    .achievement-icon.tier-gold {
        background: linear-gradient(145deg, #fce594, #f8c14c);
        border: 4px solid #ffd700;
    }

/* ============================================= */
/* ==      2. BRONZE TIER ICONS             == */
/* ============================================= */

/* First Try (Footprint) */
.icon-first-try::before {
    content: '';
    position: absolute;
    width: 40%;
    height: 50%;
    background: currentColor;
    border-radius: 50% 50% 40% 40%;
    transform: translate(65%, 45%) rotate(25deg);
}

.icon-first-try::after {
    content: '';
    position: absolute;
    width: 18%;
    height: 18%;
    background: currentColor;
    border-radius: 50%;
    transform: translate(90%, 55%);
    box-shadow: 10px 10px 0 currentColor, 18px 22px 0 currentColor, 24px 35px 0 currentColor;
}
/* On the Right Track (Compass) */
.icon-on-track::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 30px solid currentColor;
    transform: translate(-50%, -60%);
}
/* People Person */
.icon-people-person::before {
    content: '•';
    font-size: 35px;
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    box-shadow: -18px 10px 0 currentColor, 18px 10px 0 currentColor;
}

.icon-people-person::after {
    content: '';
    position: absolute;
    width: 25%;
    height: 35%;
    background: currentColor;
    border-radius: 50% 50% 0 0;
    top: 52%;
    left: 50%;
    transform: translate(-50%, -50%);
    box-shadow: -18px 0px 0 currentColor, 18px 0px 0 currentColor;
}
/* Process Apprentice (Single Gear) */
.icon-process-apprentice::before {
    content: '⚙';
    font-size: 40px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
/* Business Aware (Factory) */
.icon-business-aware::before {
    content: '';
    position: absolute;
    width: 50%;
    height: 40%;
    background: currentColor;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}

.icon-business-aware::after {
    content: '🌿';
    font-size: 20px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -60%);
}
/* Born Leader (Pawn with crown) */
.icon-born-leader::before {
    content: '♙';
    font-size: 45px;
    position: absolute;
    left: 50%;
    top: 55%;
    transform: translate(-50%, -50%);
}

.icon-born-leader::after {
    content: '👑';
    font-size: 15px;
    position: absolute;
    left: 50%;
    top: 25%;
    transform: translate(-50%, -50%);
}
/* Accountant (Calculator) */
.icon-accountant {
    background-color: #4a4a4a;
}

    .icon-accountant::before {
        content: '123';
        font-size: 14px;
        color: #fff;
        background: #333;
        width: 70%;
        height: 20%;
        position: absolute;
        top: 15%;
        left: 15%;
        border-radius: 4px;
        line-height: 1.2;
        text-align: right;
        padding-right: 5px;
    }

    .icon-accountant::after {
        content: '';
        position: absolute;
        width: 15%;
        height: 10%;
        background: #eee;
        border-radius: 2px;
        top: 45%;
        left: 20%;
        box-shadow: 20px 0 0 #eee, 40px 0 0 #eee, 0 15px 0 #eee, 20px 15px 0 #eee, 40px 15px 0 #eee, 0 30px 0 #eee, 20px 30px 0 #eee, 40px 30px 0 #eee;
    }
/* Risk Aware (Shield) */
.icon-risk-aware::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60%;
    height: 70%;
    background-color: currentColor;
    clip-path: polygon(50% 0%, 100% 10%, 100% 70%, 50% 100%, 0% 70%, 0% 10%);
}
/* Communicator (Speech Bubbles) */
.icon-communicator::before {
    content: '';
    position: absolute;
    width: 50%;
    height: 40%;
    background: currentColor;
    border-radius: 50%;
    left: 15%;
    top: 30%;
}

.icon-communicator::after {
    content: '';
    position: absolute;
    width: 50%;
    height: 40%;
    background: #fff;
    color: #a56742;
    border-radius: 50%;
    right: 15%;
    top: 45%;
}
/* Perfect Task (Target) */
.icon-perfect-task::before {
    content: '';
    position: absolute;
    width: 80%;
    height: 80%;
    border-radius: 50%;
    background: #fff;
    top: 10%;
    left: 10%;
}

.icon-perfect-task::after {
    content: '🎯';
    font-size: 40px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
/* Halfway There */
.icon-halfway-there::before {
    content: '50%';
    font-weight: bold;
    font-size: 14px;
    position: absolute;
    top: 25%;
    left: 50%;
    transform: translateX(-50%);
}

.icon-halfway-there::after {
    content: '';
    position: absolute;
    width: 70%;
    height: 20%;
    background: #eee;
    border-radius: 10px;
    top: 50%;
    left: 15%;
    border: 1px solid #ccc;
    background-image: linear-gradient(to right, currentColor 50%, transparent 50%);
}
/* Confident */
.icon-confident::before {
    content: '🧠';
    font-size: 40px;
    position: absolute;
    top: 50%;
    left: 45%;
    transform: translate(-50%, -50%);
}

.icon-confident::after {
    content: '✓';
    font-size: 20px;
    font-weight: bold;
    color: lightgreen;
    position: absolute;
    top: 55%;
    left: 65%;
    transform: translate(-50%, -50%);
}
/* Exam Warrior (Helmet) */
.icon-exam-warrior::before {
    content: '';
    position: absolute;
    width: 70%;
    height: 60%;
    background: currentColor;
    border-radius: 50% 50% 10px 10px;
    top: 15%;
    left: 15%;
}

.icon-exam-warrior::after {
    content: '';
    position: absolute;
    width: 10%;
    height: 40%;
    background: #a56742;
    border-radius: 3px;
    top: 30%;
    left: 50%;
    transform: translateX(-50%);
}
/* Task Finisher */
.icon-task-finisher::before {
    content: '✓\A ✓\A ✓';
    white-space: pre;
    font-size: 18px;
    line-height: 1.1;
    color: lightgreen;
    position: absolute;
    top: 15%;
    left: 25%;
}

.icon-task-finisher::after {
    content: '—\A —\A —';
    white-space: pre;
    font-size: 18px;
    line-height: 1.1;
    color: white;
    position: absolute;
    top: 15%;
    left: 45%;
}
/* PERT Analyst */
.icon-pert-analyst::before {
    content: '';
    position: absolute;
    width: 60%;
    height: 3px;
    background: currentColor;
    top: 70%;
    left: 20%;
}

.icon-pert-analyst::after {
    content: '•';
    font-size: 30px;
    position: absolute;
    top: 50%;
    left: 25%;
    box-shadow: 15px -20px 0, 30px -10px 0;
}
/* Getting Started (3 Day Streak) */
.icon-3-day-streak::before {
    content: '📅';
    font-size: 40px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.icon-3-day-streak::after {
    content: '✓ ✓ ✓';
    font-size: 10px;
    position: absolute;
    top: 55%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #333;
}

/* ============================================= */
/* ==      3. SILVER TIER ICONS             == */
/* ============================================= */

/* People Specialist (Network) */
.icon-people-specialist::before {
    content: '•';
    font-size: 25px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.icon-people-specialist::after {
    content: '• • • •';
    font-size: 15px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    letter-spacing: 20px;
}
/* Process Engineer (Gears) */
.icon-process-engineer::before {
    content: '⚙';
    font-size: 30px;
    position: absolute;
    top: 35%;
    left: 35%;
    transform: translate(-50%, -50%);
}

.icon-process-engineer::after {
    content: '⚙';
    font-size: 30px;
    position: absolute;
    top: 65%;
    left: 65%;
    transform: translate(-50%, -50%) rotate(45deg);
    color: #ddd;
}
/* Domain Master (Shield 3 sections) */
.icon-domain-master {
    clip-path: polygon(50% 0%, 100% 10%, 100% 70%, 50% 100%, 0% 70%, 0% 10%);
}

    .icon-domain-master::before {
        content: '';
        position: absolute;
        width: 100%;
        height: 100%;
        background: linear-gradient(to right, #e94e77 33%, #ffd700 33%, #ffd700 66%, #4a90e2 66%);
    }
/* Consistent Performer */
.icon-consistent-performer::before {
    content: '📄';
    font-size: 30px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-10deg);
    text-shadow: 5px -5px 0 rgba(255,255,255,0.7), 10px -10px 0 rgba(255,255,255,0.4);
}

.icon-consistent-performer::after {
    content: '↑';
    font-weight: bold;
    font-size: 30px;
    color: lightgreen;
    position: absolute;
    bottom: 10%;
    right: 20%;
}
/* Risk Expert (Shield with bolt) */
.icon-risk-expert::before {
    content: '🛡';
    font-size: 40px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.icon-risk-expert::after {
    content: '⚡️';
    font-size: 20px;
    color: yellow;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
/* Budget Expert (Piggy bank) */
/* --- Silver: Budget Expert (Stack of Coins) --- */
.icon-budget-expert::before {
    content: '';
    position: absolute;
    width: 40%;
    height: 15%;
    background: gold;
    border: 2px solid darkgoldenrod;
    border-radius: 50%;
    bottom: 25%;
    left: 30%;
    box-shadow: 0 -8px 0 gold, 0 -16px 0 gold; /* Creates the stack */
}

.icon-budget-expert::after {
    content: '$';
    font-size: 20px;
    font-weight: bold;
    color: darkgoldenrod;
    position: absolute;
    top: 55%;
    left: 50%;
    transform: translate(-50%, -50%);
}
/* Team Builder Expert (Pyramid) */
.icon-team-builder::before {
    content: '';
    position: absolute;
    width: 20%;
    height: 15%;
    background: currentColor;
    bottom: 25%;
    left: 50%;
    transform: translateX(-50%);
    box-shadow: -12px 0 0, 12px 0 0, -6px -12px 0, 6px -12px 0, 0 -24px 0;
}
/* High Flyer (85+) */
.icon-high-flyer::before {
    content: '✈️';
    font-size: 40px;
    transform: translate(-50%, -50%) rotate(-45deg);
    position: absolute;
    top: 50%;
    left: 50%;
}
/* Top Tier (Trophy with star) */
.icon-top-tier::before {
    content: '🏆';
    font-size: 40px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.icon-top-tier::after {
    content: '⭐';
    font-size: 15px;
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
}
/* Knowledge Collector (Book) */
.icon-knowledge-collector::before {
    content: '📚';
    font-size: 40px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
/* Flawless (Diamond) */
.icon-flawless::before {
    content: '';
    position: absolute;
    top: 30%;
    left: 50%;
    transform: translateX(-50%) rotate(45deg);
    width: 45%;
    height: 45%;
    background-color: currentColor;
    border-radius: 4px;
}

.icon-flawless::after {
    content: '';
    position: absolute;
    top: 15%;
    left: 50%;
    transform: translateX(-50%);
    width: 65%;
    height: 25%;
    background-color: currentColor;
    border-radius: 2px;
}
/* Quick Thinker */
.icon-quick-thinker::before {
    content: '🧠';
    font-size: 40px;
    position: absolute;
    top: 50%;
    left: 45%;
    transform: translate(-50%, -50%);
}

.icon-quick-thinker::after {
    content: '🕒';
    font-size: 20px;
    position: absolute;
    top: 55%;
    left: 65%;
    transform: translate(-50%, -50%);
}
/* King of Confidence */
.icon-king-of-confidence::before {
    content: '🧠';
    font-size: 40px;
    position: absolute;
    top: 60%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.icon-king-of-confidence::after {
    content: '👑';
    font-size: 30px;
    color: silver;
    text-shadow: 0 0 2px black;
    position: absolute;
    top: 30%;
    left: 50%;
    transform: translate(-50%, -50%);
}
/* Advanced Task Finisher */
.icon-adv-task-finisher::before {
    content: '✓\A ✓\A ✓\A ✓\A ✓';
    white-space: pre;
    font-size: 11px;
    line-height: 1.1;
    color: lightgreen;
    position: absolute;
    top: 15%;
    left: 25%;
}

.icon-adv-task-finisher::after {
    content: '—\A —\A —\A —\A —';
    white-space: pre;
    font-size: 11px;
    line-height: 1.1;
    color: white;
    position: absolute;
    top: 15%;
    left: 45%;
}
/* Top Percentile */
.icon-top-percentile::before {
    content: '';
    position: absolute;
    width: 15%;
    height: 20%;
    background: currentColor;
    opacity: 0.5;
    bottom: 20%;
    left: 20%;
    box-shadow: 20px 0 0, 40px 0 0;
}

.icon-top-percentile::after {
    content: '';
    position: absolute;
    width: 15%;
    height: 50%;
    background: currentColor;
    bottom: 20%;
    right: 20%;
}
/* Daily Habit (7 Day Streak) */
.icon-7-day-streak::before {
    content: '📅';
    font-size: 40px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.icon-7-day-streak::after {
    content: '🔥';
    font-size: 20px;
    color: orange;
    position: absolute;
    top: 30%;
    right: 25%;
}
/* Persistent (Dumbbell) */
.icon-persistent::before {
    content: '';
    position: absolute;
    width: 25%;
    height: 40%;
    background: currentColor;
    border-radius: 4px;
    top: 30%;
    left: 20%;
    box-shadow: 35px 0 0;
}

.icon-persistent::after {
    content: '';
    position: absolute;
    width: 40%;
    height: 8%;
    background: currentColor;
    border-radius: 2px;
    top: 46%;
    left: 30%;
}

/* ============================================= */
/* ==       4. GOLD TIER ICONS              == */
/* ============================================= */

/* PMP Legend (Crown) */
.icon-pmp-legend {
    color: #ffd700;
}

    .icon-pmp-legend::before {
        content: '';
        position: absolute;
        bottom: 25%;
        left: 15%;
        width: 70%;
        height: 55%;
        border: 7px solid currentColor;
        border-bottom: none;
        border-top-left-radius: 50% 40%;
        border-top-right-radius: 50% 40%;
    }

    .icon-pmp-legend::after {
        content: '• • •';
        font-size: 14px;
        position: absolute;
        top: 25%;
        left: 50%;
        transform: translateX(-50%);
        letter-spacing: 5px;
        font-weight: bold;
        text-shadow: 0 0 2px black;
    }
/* Perfectionist (Trophy 95%) */
.icon-perfectionist::before {
    content: '🏆';
    font-size: 40px;
    color: gold;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.icon-perfectionist::after {
    content: '95%';
    font-size: 12px;
    font-weight: bold;
    color: white;
    background: #c0392b;
    padding: 1px 3px;
    border-radius: 3px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
/* Knowledge Seal (Book with seal) */
.icon-knowledge-seal::before {
    content: '📖';
    font-size: 45px;
    transform: translate(-50%, -50%) rotate(-10deg);
    position: absolute;
    top: 50%;
    left: 50%;
}

.icon-knowledge-seal::after {
    content: '✪';
    font-size: 25px;
    color: gold;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
/* Expert of Experts (Graduation cap) */
.icon-expert-of-experts::before {
    content: '🎓';
    font-size: 45px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.icon-expert-of-experts::after {
    content: '';
    position: absolute;
    width: 5px;
    height: 15px;
    background: gold;
    border-radius: 50%;
    top: 40%;
    left: 68%;
    transform: rotate(20deg);
    box-shadow: 0 0 5px gold;
}
/* Unstoppable (Knight helmet) */
.icon-unstoppable::before {
    content: '';
    position: absolute;
    width: 70%;
    height: 65%;
    background: gold;
    border-radius: 50% 50% 20% 20% / 60% 60% 40% 40%;
    top: 15%;
    left: 15%;
}

.icon-unstoppable::after {
    content: '';
    position: absolute;
    width: 3px;
    height: 40%;
    background: #333;
    top: 35%;
    left: 50%;
    transform: translateX(-50%);
    box-shadow: -10px 0 0 #333, 10px 0 0 #333;
}
/* Mastermind (100 streak) */
.icon-mastermind::before {
    content: '🧠';
    font-size: 40px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-shadow: 0 0 10px gold, 0 0 20px gold;
}
/* Master of All (Master key) */
.icon-master-of-all::before {
    content: '🔑';
    font-size: 40px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-45deg);
}
/* The Elite (Top 10%) */
.icon-the-elite {
    background: gold;
}

    .icon-the-elite::before {
        content: 'TOP';
        font-size: 16px;
        font-weight: bold;
        color: #333;
        position: absolute;
        top: 25%;
        left: 50%;
        transform: translateX(-50%);
    }

    .icon-the-elite::after {
        content: '10%';
        font-size: 24px;
        font-weight: bold;
        color: #333;
        position: absolute;
        top: 55%;
        left: 50%;
        transform: translateX(-50%);
    }
/* Time Bender */
/* --- Gold: Time Bender (Stopwatch with Wings) --- */
.icon-time-bender::before {
    content: '⏱';
    font-size: 38px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.icon-time-bender::after {
    content: '';
    position: absolute;
    top: 45%;
    left: 10%;
    width: 20px;
    height: 10px;
    border-top: 5px solid;
    border-bottom: 3px solid;
    border-radius: 50%;
    transform: rotate(-10deg);
    box-shadow: 40px 0 0; /* This creates the second wing */
}
/* Redemption (Broken Chain) */



/* --- Gold: Redemption (Repaired Shield) --- */
.icon-redemption::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 65%;
    height: 75%;
    background-color: currentColor;
    clip-path: polygon(50% 0%, 100% 10%, 100% 70%, 50% 100%, 0% 70%, 0% 10%);
}

.icon-redemption::after {
    content: '';
    position: absolute;
    width: 5px;
    height: 80%;
    background: gold;
    top: 10%;
    left: 50%;
    transform: translateX(-50%) skewX(15deg);
    box-shadow: 0 0 7px gold, inset 0 0 2px #fff;
}
/* Part of the Routine (30 days) */
.icon-part-of-routine::before {
    content: '🗓';
    font-size: 40px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.icon-part-of-routine::after {
    content: '30';
    font-size: 14px;
    font-weight: bold;
    background: gold;
    color: #333;
    padding: 2px 4px;
    border-radius: 50%;
    position: absolute;
    bottom: 20%;
    right: 20%;
}
/* Marathoner (Running Shoe) */
.icon-marathoner::before {
    content: '👟';
    font-size: 40px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-20deg);
}

.icon-marathoner::after {
    content: '⚡️';
    font-size: 20px;
    position: absolute;
    top: 50%;
    right: 15%;
}
.top-achievement-frame {
    border: 1px solid #d1d1d1; /* جعلنا الإطار أغمق قليلاً */
    border-radius: 0.375rem;
    padding: 0.75rem;
    transform: translateX(-3px);
    transition: all 0.2s ease-out; /* جعلنا الحركة لكل الخصائص */
    background-color: #f8f9fa; /* لون خلفية فاتح للإطار */
    /* ▼▼▼ هذا هو السطر الأهم لإضافة العمق ▼▼▼ */
    box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.15), /* ظل سفلي لإعطاء إحساس بالبروز */
    inset 1px 1px 2px rgba(255, 255, 255, 0.8); /* إضاءة داخلية من الأعلى */
}

    .top-achievement-frame:hover {
        transform: translateX(0);
        box-shadow: 6px 6px 12px rgba(0, 0, 0, 0.2), /* نجعل الظل أكبر عند المرور بالماوس */
        inset 1px 1px 2px rgba(255, 255, 255, 0.8);
    }