/* ===== Elzem Match Schedule - Match Table (index.php) v9.5 ===== */
/* تصميم احترافي مع نيون وتوهج وأنيميشن */

/* ملاحظة: لا نعيد تعريف .elzem-container هنا — تم تعريفه بالفعل في main.css
 * بـ max-width + margin: 0 auto + padding. إعادة تعريفه هنا كانت تكسر
 * التخطيط بحذف الـ padding الأفقي. أي خصائص إضافية للصفحة الرئيسية
 * يجب أن تكون محصورة في عناصر الصفحة (مثل .match-container, .elzem-header-row ...). */

/* ===== Header Row ===== */
.elzem-header-row {
    display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center;
    background: var(--header-bg);
    padding: 18px;
    border-radius: var(--card-radius, 16px);
    margin-bottom: 20px;
    gap: 15px;
    box-shadow: 0 4px var(--card-shadow-blur, 24px) rgba(0,0,0,0.08);
    border: 1px solid rgba(255,255,255,0.05);
}
body.neon-on .elzem-header-row {
    box-shadow: 0 4px var(--card-shadow-blur, 24px) rgba(0,0,0,0.08), 0 0 calc(var(--neon-blur, 15px) * 0.3) var(--neon-color);
    border-color: rgba(0, 255, 255, 0.2);
}
.header-title {
    font-size: clamp(16px, var(--header-font-size, 18px), 22px);
    font-weight: 800;
    color: var(--header-text);
    flex: 1; min-width: 200px;
    display: flex; align-items: center; gap: 10px;
}
body.neon-on .header-title {
    text-shadow: 0 0 8px rgba(0, 255, 255, 0.5);
}

/* ===== Date Tabs ===== */
.date-tabs-center { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; flex: 2; }
.date-tab-center {
    padding: 10px 18px;
    border-radius: var(--card-radius, 16px);
    font-weight: 700; cursor: pointer;
    font-size: 14px; color: white;
    border: 1.5px solid transparent;
    transition: all var(--anim-speed, 0.3s) ease;
    min-width: 90px; text-align: center;
    font-family: inherit;
    position: relative;
    overflow: hidden;
}
.date-tab-center[data-date="today"] { background: var(--today-bg); }
.date-tab-center[data-date="tomorrow"] { background: var(--tomorrow-bg); }
.date-tab-center[data-date="yesterday"] { background: var(--yesterday-bg); }
body.anim-on .date-tab-center:hover {
    transform: translateY(-3px) scale(1.03);
    box-shadow: 0 6px 16px rgba(0,0,0,0.25);
}
body.anim-on .date-tab-center.active {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0,0,0,0.3);
}
body.neon-on .date-tab-center.active {
    box-shadow: 0 0 calc(var(--neon-blur, 15px) * 0.6) var(--neon-color), 0 6px 16px rgba(0,0,0,0.3);
    border-color: var(--neon-color);
}
body.glow-on .date-tab-center:hover {
    box-shadow: 0 0 var(--glow-blur, 20px) var(--glow-color);
}

/* ===== Timezone Selector ===== */
.timezone-selector {
    display: flex; flex-wrap: wrap; align-items: center;
    color: var(--header-text); font-size: 14px;
    flex: 0 0 auto; min-width: 0; width: auto;
    cursor: pointer; position: relative;
    padding: 6px 10px;
    border-radius: var(--card-radius, 16px);
    transition: all var(--anim-speed, 0.3s) ease;
}
.timezone-selector:hover { background: rgba(255,255,255,0.06); }
.timezone-selector span { cursor: pointer; display: flex; align-items: center; gap: 4px; }
.timezone-selector .tz-label { display: none; }
.timezone-selector select {
    display: none; position: absolute; top: 100%; left: 0; z-index: 100;
    padding: 8px 14px; border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.2);
    background: rgba(0,0,0,0.3); color: white;
    font-size: 14px; min-width: 200px;
    font-family: inherit;
    transition: all var(--anim-speed, 0.3s) ease;
    margin-top: 4px;
}
.timezone-selector select:focus {
    border-color: var(--neon-color, #00ffff);
    box-shadow: 0 0 0 3px rgba(0, 255, 255, 0.15);
    outline: none;
}
.timezone-selector.tz-expanded select { display: block; }

/* ===== Match Card ===== */
.match-item {
    background: var(--card-bg);
    margin: 15px 0;
    border-radius: var(--card-radius, 16px);
    box-shadow: 0 var(--card-shadow-y, 4px) var(--card-shadow-blur, 24px) rgba(0,0,0,0.08);
    overflow: hidden;
    border: 1px solid var(--border-color);
    text-decoration: none; color: inherit;
    display: block;
    transition: all var(--anim-speed, 0.3s) cubic-bezier(0.4, 0, 0.2, 1);
    min-height: var(--card-height);
    position: relative;
    width: 100%;
}
body.anim-on .match-item:hover {
    transform: translateY(-6px) scale(1.005);
    box-shadow: 0 12px 30px rgba(0,0,0,0.15);
}
body.neon-on body.hover-glow-on .match-item:hover,
body.neon-on.hover-glow-on .match-item:hover {
    box-shadow: 0 12px 30px rgba(0,0,0,0.15), 0 0 calc(var(--neon-blur, 15px) * 0.8) var(--neon-color);
    border-color: var(--neon-color);
}
body.glow-on .match-item:hover {
    box-shadow: 0 12px 30px rgba(0,0,0,0.15), 0 0 var(--glow-blur, 20px) var(--glow-color);
}

/* شريط متدرج علوي عند الـ hover */
.match-item::before {
    content: '';
    position: absolute; top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--neon-color, #00ffff), var(--glow-color, #ff00ff));
    opacity: 0;
    transition: opacity var(--anim-speed, 0.3s) ease;
}
body.anim-on .match-item:hover::before {
    opacity: 1;
}

/* ===== Match Header ===== */
.match-header {
    display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center;
    padding: 20px;
    background: var(--match-header-bg);
}
.team {
    flex: 1; text-align: center;
    display: flex; flex-direction: column; justify-content: center;
    min-width: 120px;
    transition: transform var(--anim-speed, 0.3s) ease;
}
body.anim-on .match-item:hover .team:first-child { transform: translateX(-5px); }
body.anim-on .match-item:hover .team:last-child { transform: translateX(5px); }
.team-logo {
    width: clamp(40px, var(--logo-size), 80px);
    height: clamp(40px, var(--logo-size), 80px);
    margin: 0 auto 12px;
    display: flex; align-items: center; justify-content: center;
}
.team-logo img {
    width: 100%; height: 100%; object-fit: contain;
    border: var(--logo-border-width) solid var(--logo-border);
    border-radius: 50%;
    transition: all var(--anim-speed, 0.3s) ease;
}
body.anim-on .match-item:hover .team-logo img {
    transform: scale(1.1) rotate(5deg);
}
.team-name {
    font-weight: var(--team-name-weight);
    font-size: clamp(14px, var(--team-name-size), 18px);
    color: var(--team-name-color);
    line-height: 1.3; word-break: break-word;
}

/* ===== Match Center ===== */
.match-center {
    flex: 1; text-align: center;
    padding: 0 15px; min-width: 140px;
}
.match-competition {
    font-size: clamp(10px, var(--competition-font-size), 14px);
    color: var(--competition-text);
    background: var(--competition-bg);
    padding: 6px 14px; border-radius: 20px;
    position: absolute; top: 15px; right: 15px;
    z-index: 1; font-weight: 700;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
/* جعل بطاقة المسابقة قابلة للنقر للانتقال لصفحة الدورية */
.match-competition-link {
    cursor: pointer;
    transition: filter var(--anim-speed, 0.3s) ease, transform var(--anim-speed, 0.3s) ease;
}
.match-competition-link:hover {
    filter: brightness(1.15);
    text-decoration: underline;
}
body.neon-on .match-competition {
    box-shadow: 0 2px 8px rgba(0,0,0,0.15), 0 0 calc(var(--neon-blur, 15px) * 0.4) var(--neon-color);
}
.match-time {
    font-size: clamp(14px, var(--time-font-size), 18px);
    font-weight: bold; color: var(--time-color);
    margin-bottom: 8px;
}
.match-status {
    padding: 6px 18px; border-radius: 25px;
    font-size: clamp(11px, var(--status-font-size), 14px);
    color: white; display: inline-block;
    margin-bottom: 10px; font-weight: bold;
    min-width: 70px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}
.status-live { background: var(--live-status-color); }
body.pulse-on .status-live {
    animation: elzem-pulse 1.5s ease-in-out infinite;
}
@keyframes elzem-pulse {
    0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(46, 125, 50, 0.6); }
    50% { transform: scale(1.05); box-shadow: 0 0 0 10px rgba(46, 125, 50, 0); }
}
.status-soon { background: var(--soon-status-color); }
.status-ended { background: var(--ended-status-color); }
.match-result {
    font-size: clamp(16px, var(--result-font-size), 24px);
    font-weight: 800; color: var(--result-color);
    letter-spacing: 1px;
    text-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* ===== Match Footer ===== */
.match-footer {
    background: var(--match-footer-bg);
    padding: 8px 14px;
    display: flex; flex-wrap: wrap;
    justify-content: space-around; align-items: center;
    font-size: clamp(12px, var(--footer-font-size), 14px);
    color: var(--match-footer-text);
    border-top: 1px solid var(--border-color);
    gap: 10px;
}
.footer-item {
    display: flex; align-items: center; gap: 8px;
    flex: 1; min-width: 120px;
    justify-content: center;
    transition: transform var(--anim-speed, 0.3s) ease;
}
.footer-item i { font-size: 16px; }
body.anim-on .footer-item:hover { transform: scale(1.05); }

/* ===== Featured Badge ===== */
.featured-badge {
    position: absolute; top: 15px; left: 15px;
    background: linear-gradient(45deg, #ff9800, #ff5722);
    color: white;
    padding: 5px 14px; border-radius: 20px;
    font-size: 12px; font-weight: bold;
    z-index: 1;
    display: flex; align-items: center; gap: 5px;
    box-shadow: 0 3px 10px rgba(255, 87, 34, 0.4);
}

/* ===== Pinned Badge ===== */
.pinned-badge {
    position: absolute; top: 15px; left: 15px;
    background: linear-gradient(45deg, #dc3545, #c82333);
    color: white;
    padding: 5px 14px; border-radius: 20px;
    font-size: 12px; font-weight: bold;
    z-index: 2;
    display: flex; align-items: center; gap: 5px;
    box-shadow: 0 3px 10px rgba(220, 53, 69, 0.5);
}
body.anim-on .pinned-badge {
    animation: elzem-glow-pulse-red 2s ease-in-out infinite;
}
@keyframes elzem-glow-pulse-red {
    0%, 100% { box-shadow: 0 3px 10px rgba(220, 53, 69, 0.5); }
    50% { box-shadow: 0 3px 20px rgba(220, 53, 69, 0.9); }
}

/* ===== Views Counter ===== */
.footer-item.views-counter {
    background: rgba(220, 53, 69, 0.1);
    border-radius: 8px;
    padding: 4px 12px !important;
}
.footer-item.views-counter i,
.footer-item.views-counter span {
    color: #dc3545 !important;
}

/* ===== No Matches ===== */
.no-matches {
    text-align: center; padding: 50px 20px;
    background: var(--card-bg);
    border-radius: var(--card-radius, 16px);
    margin: 20px 0;
    border: 2px dashed var(--border-color);
}
.no-matches h3 { font-size: 24px; color: var(--team-name-color); margin-bottom: 10px; }
.no-matches p { font-size: 16px; color: var(--time-color); }

/* ===== Slider ===== */
.elzem-slider-wrapper {
    width: 100%; overflow: hidden;
    position: relative; margin: 10px 0 20px;
    height: 170px;
    border-radius: var(--card-radius, 16px);
}
.elzem-slider-track {
    display: flex; gap: 12px; padding: 8px;
    overflow-x: auto; scroll-behavior: smooth;
    margin: 0 40px; height: 100%; align-items: center;
    scrollbar-width: none;
}
.elzem-slider-track::-webkit-scrollbar { display: none; }
.elzem-slider-item {
    min-width: 230px; max-width: 230px;
    background: var(--card-bg);
    border-radius: var(--card-radius, 16px);
    padding: 14px;
    border: 1px solid var(--border-color);
    flex-shrink: 0;
    transition: all var(--anim-speed, 0.3s) cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 10px rgba(0,0,0,0.06);
    height: 130px;
    display: flex; flex-direction: column; justify-content: space-between;
    overflow: hidden;
    position: relative;
}
body.anim-on .elzem-slider-item:hover {
    transform: translateY(-6px) scale(1.03);
    box-shadow: 0 8px 20px rgba(0,0,0,0.15);
}
body.neon-on .elzem-slider-item:hover {
    border-color: var(--neon-color);
    box-shadow: 0 8px 20px rgba(0,0,0,0.15), 0 0 calc(var(--neon-blur, 15px) * 0.5) var(--neon-color);
}
.elzem-slider-item a { text-decoration: none; color: inherit; display: flex; flex-direction: column; justify-content: space-between; height: 100%; }
.slider-league {
    background: var(--competition-bg); color: var(--competition-text);
    padding: 4px 12px; border-radius: 6px;
    font-size: 10px; font-weight: 700;
    text-align: center; display: inline-block;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    max-width: 100%; align-self: flex-start;
}
.slider-teams { display: flex; justify-content: space-between; align-items: center; flex-grow: 1; width: 100%; }
.slider-team {
    text-align: center; width: 45%;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.slider-team img {
    width: 40px; height: 40px; margin-bottom: 6px;
    object-fit: contain;
    border: 1.5px solid var(--logo-border);
    border-radius: 50%;
    transition: transform var(--anim-speed, 0.3s) ease;
}
body.anim-on .elzem-slider-item:hover .slider-team img { transform: scale(1.15); }
.slider-team span {
    font-weight: 700; font-size: 12px;
    color: var(--team-name-color);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    width: 100%;
}
.slider-vs {
    text-align: center; width: 10%;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.slider-vs .score { font-size: 14px; font-weight: 800; color: var(--result-color); }
.slider-vs .time {
    font-size: 11px; color: var(--time-color);
    margin-top: 3px;
    background: rgba(0,0,0,0.05);
    padding: 2px 8px; border-radius: 10px;
}
.elzem-slider-arrow {
    position: absolute; top: 50%;
    transform: translateY(-50%);
    background: var(--today-bg); color: white;
    border: none; width: 32px; height: 32px;
    border-radius: 50%; cursor: pointer;
    z-index: 10; font-size: 14px;
    display: flex; align-items: center; justify-content: center;
    transition: all var(--anim-speed, 0.3s) ease;
    box-shadow: 0 2px 8px rgba(0,0,0,0.25);
}
body.anim-on .elzem-slider-arrow:hover {
    transform: translateY(-50%) scale(1.2);
    box-shadow: 0 4px 12px rgba(0,0,0,0.35);
}
body.neon-on .elzem-slider-arrow {
    box-shadow: 0 2px 8px rgba(0,0,0,0.25), 0 0 calc(var(--neon-blur, 15px) * 0.4) var(--neon-color);
    border: 1px solid var(--neon-color);
}
.elzem-slider-arrow.prev { right: 8px; }
.elzem-slider-arrow.next { left: 8px; }
.elzem-ad-slot { margin: 20px auto; text-align: center; overflow: hidden; }
.elzem-ad-slot iframe, .elzem-ad-slot img { max-width: 100%; height: auto; }

@keyframes elzem-glow-pulse {
    0%, 100% { box-shadow: 0 0 calc(var(--neon-blur, 15px) * 0.5) var(--neon-color); }
    50% { box-shadow: 0 0 calc(var(--neon-blur, 15px) * 1.2) var(--neon-color); }
}

@media (max-width: 768px) {
    .elzem-header-row { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px; padding: 12px; }
    .header-title { min-width: 100%; text-align: center; order: 0; }
    .date-tabs-center { flex: 1; min-width: 0; order: 1; }
    .date-tab-center { flex: 1; min-width: auto; padding: 8px 6px; font-size: 12px; }
    .match-item { border: none; border-radius: 0; box-shadow: none; margin: 0 0 10px; }
    .match-header { flex-direction: column; padding: 12px; }
    .team { flex-direction: row; width: 100%; margin: 8px 0; text-align: right; }
    .team:first-child { flex-direction: row-reverse; }
    .team-logo { margin: 0 10px; }
    .team-logo img { width: 36px; height: 36px; }
    .team-name { text-align: right; flex: 1; font-size: 14px; }
    .match-center { order: -1; width: 100%; margin: 8px 0; padding: 8px; border-bottom: 1px solid var(--border-color); border-top: 1px solid var(--border-color); }
    .match-status { font-size: 13px; }
    .match-time { font-size: 16px; }
    .match-competition { position: relative; top: auto; right: auto; margin: 8px auto; display: inline-block; font-size: 12px; }
    .match-footer { flex-direction: column; align-items: flex-start; gap: 6px; padding: 10px 12px; }
    .footer-item { width: 100%; justify-content: flex-start; font-size: 12px; }
    .elzem-slider-wrapper { height: 140px; }
    .elzem-slider-item { min-width: 180px; max-width: 180px; height: 100px; }
}