/*!
 * H@CK M1RR0R CMS V2 — hm-dark front theme (extra)
 * File: public/themes/hm-dark/assets/css/theme-extra.css
 * MIT (c) 2025 Ghulam <admin@hack-mirror.com>
 *
 * Optional, non-critical visual enhancements layered on top of theme.css.
 */

/* --------------------------------------------------------------------------
   Frontpage sections & titles
   -------------------------------------------------------------------------- */

.hm-section-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    margin-bottom: .65rem;
}

.hm-section-title-main {
    font-size: .95rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #e5e7ff;
}

.hm-section-title-sub {
    font-size: .75rem;
    color: var(--hm-text-muted);
}

.hm-section-chip {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .1rem .55rem;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.96);
    border: 1px solid rgba(148, 163, 184, 0.4);
    font-size: .7rem;
    color: var(--hm-text-muted);
}

/* --------------------------------------------------------------------------
   Frontpage ad / notice box (above archive tables)
   -------------------------------------------------------------------------- */

.hm-front-ad {
    border-radius: var(--hm-radius-md);
    border: 1px dashed rgba(148, 163, 184, 0.55);
    background: radial-gradient(circle at top left,
        rgba(79, 70, 229, 0.32),
        rgba(15, 23, 42, 0.96));
    padding: .75rem .9rem;
    display: flex;
    align-items: flex-start;
    gap: .65rem;
    font-size: .8rem;
    color: #e5e7ff;
    box-shadow: 0 14px 36px rgba(15, 23, 42, 0.75);
}

.hm-front-ad-icon {
    width: 2rem;
    height: 2rem;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(15, 23, 42, 0.96);
    border: 1px solid rgba(129, 140, 248, 0.8);
    flex-shrink: 0;
    font-size: 1.05rem;
}

.hm-front-ad-body {
    flex: 1 1 auto;
}

.hm-front-ad-title {
    font-weight: 600;
    font-size: .82rem;
    margin-bottom: .1rem;
}

.hm-front-ad-text {
    font-size: .78rem;
    color: var(--hm-text-muted);
}

.hm-front-ad-meta {
    font-size: .7rem;
    color: var(--hm-text-soft);
    margin-top: .25rem;
}

.hm-front-ad--disabled {
    opacity: .35;
    filter: grayscale(0.2);
}

/* --------------------------------------------------------------------------
   Archive / Special Archive / OnHold tables
   -------------------------------------------------------------------------- */

.hm-table-archive tbody tr:hover,
.hm-table-onhold tbody tr:hover {
    background: radial-gradient(circle at left,
        rgba(79, 70, 229, 0.20) 0,
        rgba(15, 23, 42, 0.98) 52%) !important;
}

.hm-tag {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    padding: .05rem .4rem;
    border-radius: 999px;
    border: 1px solid rgba(148, 163, 184, 0.35);
    font-size: .7rem;
    color: var(--hm-text-muted);
    background: rgba(15, 23, 42, 0.96);
}

.hm-tag-dot {
    width: .45rem;
    height: .45rem;
    border-radius: 999px;
    background: rgba(148, 163, 184, 0.8);
}

.hm-tag--special {
    border-color: rgba(236, 72, 153, 0.75);
    color: #f9a8d4;
    background: rgba(30, 64, 175, 0.2);
}

.hm-tag--onhold {
    border-color: rgba(234, 179, 8, 0.8);
    color: #facc15;
    background: rgba(30, 64, 175, 0.18);
}

/* mirror link pill */
.hm-mirror-pill {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .1rem .5rem;
    border-radius: 999px;
    font-size: .72rem;
    background: rgba(15, 23, 42, 0.98);
    border: 1px solid rgba(148, 163, 184, 0.35);
}

.hm-mirror-pill-icon {
    width: .85rem;
    height: .85rem;
    border-radius: 999px;
    background: rgba(129, 140, 248, 0.35);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .6rem;
}

/* --------------------------------------------------------------------------
   Stats pills / small widgets
   -------------------------------------------------------------------------- */

.hm-stat-pill {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    padding: .4rem .6rem;
    border-radius: var(--hm-radius-md);
    background: rgba(15, 23, 42, 0.96);
    border: 1px solid rgba(148, 163, 184, 0.35);
    font-size: .78rem;
}

.hm-stat-pill-label {
    color: var(--hm-text-muted);
}

.hm-stat-pill-value {
    font-weight: 600;
    letter-spacing: .02em;
}

/* --------------------------------------------------------------------------
   “Live” badge / legend helpers
   -------------------------------------------------------------------------- */

.hm-badge-live {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .05rem .55rem;
    border-radius: 999px;
    font-size: .7rem;
    background: rgba(22, 163, 74, 0.12);
    border: 1px solid rgba(34, 197, 94, 0.8);
    color: #bbf7d0;
}

.hm-badge-live-dot {
    width: .5rem;
    height: .5rem;
    border-radius: 999px;
    background: #4ade80;
    box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.28);
}

/* --------------------------------------------------------------------------
   Ranking page extras
   -------------------------------------------------------------------------- */

.hm-rank-row {
    position: relative;
}

.hm-rank-row::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0;
    transition: opacity .16s ease-out;
    background: radial-gradient(circle at left,
        rgba(129, 140, 248, 0.22),
        transparent 65%);
}

.hm-rank-row:hover::before {
    opacity: 1;
}

/* --------------------------------------------------------------------------
   News & contact small tweaks
   -------------------------------------------------------------------------- */

.hm-news-article-title {
    font-size: .95rem;
    font-weight: 600;
}

.hm-news-article-meta {
    font-size: .72rem;
    color: var(--hm-text-muted);
}

/* simple helper for markdown-like lists in static text */
.hm-prose ul {
    padding-left: 1.2rem;
    margin-bottom: .6rem;
}

.hm-prose li {
    font-size: .84rem;
    color: var(--hm-text-muted);
    margin-bottom: .2rem;
}

/* --------------------------------------------------------------------------
   Auth header logo placeholder
   -------------------------------------------------------------------------- */

.hm-auth-logo {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: 1rem;
}

.hm-auth-logo-mark {
    width: 2rem;
    height: 2rem;
    border-radius: .9rem;
    background: radial-gradient(circle at top left,
        rgba(79, 70, 229, 0.65),
        rgba(15, 23, 42, 0.98));
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(129, 140, 248, 0.8);
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.85);
    font-size: 1.1rem;
}

.hm-auth-logo-text {
    font-size: .92rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #e5e7ff;
}

/* --------------------------------------------------------------------------
   Responsive extras
   -------------------------------------------------------------------------- */

@media (max-width: 767.98px) {
    .hm-front-ad {
        flex-direction: row;
        align-items: flex-start;
    }

    .hm-section-title {
        flex-direction: column;
        align-items: flex-start;
    }

    .hm-flash-container {
        top: .6rem;
    }
}