/* ============================================================
   NOTICE TICKER — homepage "تازہ ترین" strip
   ============================================================ */
.up-notice-ticker {
    display: flex;
    align-items: center;
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 30px;
    padding: 10px 20px;
    max-width: 1100px;
    margin: 0 auto 30px;
    direction: rtl;
    box-shadow: 0 4px 14px rgba(0,0,0,0.05);
}
.up-notice-label {
    flex-shrink: 0;
    background: #F9A825;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    padding: 6px 14px;
    border-radius: 20px;
    margin-left: 14px;
}
.up-notice-track {
    overflow: hidden;
    flex: 1;
}
.up-notice-items {
    display: flex;
    gap: 40px;
    white-space: nowrap;
    animation: up-ticker-scroll 30s linear infinite;
}
.up-notice-track:hover .up-notice-items {
    animation-play-state: paused;
}
.up-notice-item {
    color: #334155;
    font-size: 14px;
    text-decoration: none;
    transition: color 200ms;
}
.up-notice-item:hover {
    color: #005BAC;
}
@keyframes up-ticker-scroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

@media (max-width: 600px) {
    .up-notice-ticker { padding: 8px 14px; border-radius: 20px; }
    .up-notice-label { font-size: 11px; padding: 5px 10px; }
    .up-notice-item { font-size: 13px; }
}

/* ============================================================
   BUTTON TEXT VISIBILITY — REBUILT (v2), bulletproof approach.
   Previous fix tried matching text color to a WHITE background —
   this kept failing (white-on-white in some state/inheritance
   scenario). New approach: button background is now a SOLID dark
   brand color (set in the JSON itself), and text is forced WHITE
   unconditionally, on every possible inner element Elementor uses
   and every interaction state — this can never become invisible,
   since white text is never matched against a white background.
   ============================================================ */
.up-solid-white-text-btn,
.up-solid-white-text-btn *,
.up-solid-white-text-btn .elementor-button-text,
.up-solid-white-text-btn .elementor-button-content-wrapper,
.up-solid-white-text-btn span,
.up-solid-white-text-btn:hover,
.up-solid-white-text-btn:hover *,
.up-solid-white-text-btn:focus,
.up-solid-white-text-btn:focus *,
.up-solid-white-text-btn:active,
.up-solid-white-text-btn:active *,
.up-solid-white-text-btn:visited,
.up-solid-white-text-btn:visited * {
    color: #FFFFFF !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* ============================================================
   ISSUE 3 — PREMIUM BUTTON STYLE (homepage only — this CSS file
   only loads on is_front_page(), so nothing elsewhere is touched).
   Diamond shine sweep, gradient, glow, hover lift, pill shape.
   ============================================================ */
body.home .elementor-widget-button .elementor-button,
body.home .elementor-button {
    position: relative;
    overflow: hidden;
    border-radius: 50px !important;
    transition: transform 280ms cubic-bezier(0.2,0.8,0.2,1), box-shadow 280ms ease !important;
    box-shadow: 0 6px 18px rgba(0,0,0,0.14);
}
body.home .elementor-button:hover {
    transform: translateY(-4px) scale(1.03);
    box-shadow: 0 14px 30px rgba(0,0,0,0.22);
}

/* Diamond-like shine sweep across every homepage button */
body.home .elementor-button::before {
    content: "";
    position: absolute;
    top: 0;
    z-index: 1;
    left: -75%;
    width: 50%;
    height: 100%;
    background: linear-gradient(120deg, transparent, rgba(255,255,255,0.55), transparent);
    transform: skewX(-20deg);
    animation: up-btn-shine 3.2s ease-in-out infinite;
    pointer-events: none;
}
@keyframes up-btn-shine {
    0%   { left: -75%; }
    35%  { left: 130%; }
    100% { left: 130%; }
}

/* Soft glow on hover, using each button's own color as the glow tint */
body.home .up-force-btn-white-green:hover {
    box-shadow: 0 14px 30px rgba(0,166,81,0.35) !important;
}
body.home .up-force-btn-white-blue:hover {
    box-shadow: 0 14px 30px rgba(0,91,172,0.35) !important;
}

/* ============================================================
   ISSUE 1 — STATS/ACHIEVEMENT CARDS — premium gradient +
   glassmorphism edge + hover lift
   ============================================================ */
.up-stat-card {
    position: relative;
    transition: transform 280ms cubic-bezier(0.2,0.8,0.2,1), box-shadow 280ms ease;
    background: linear-gradient(160deg, #FFFFFF 0%, #F8FAFC 100%) !important;
    border: 1px solid rgba(0,91,172,0.08);
}
.up-stat-card::before {
    content: "";
    position: absolute;
    top: 0; right: 0; left: 0;
    height: 3px;
    background: linear-gradient(90deg, #005BAC, #00A651, #F9A825);
    border-radius: 16px 16px 0 0;
}
.up-stat-card:hover {
    transform: translateY(-6px) scale(1.03);
    box-shadow: 0 16px 32px rgba(0,91,172,0.15) !important;
}

@media (max-width: 480px) {
    body.home .elementor-button { font-size: 13px !important; }
}

/* Ensure button TEXT always renders above the shine sweep layer */
body.home .elementor-button .elementor-button-content-wrapper,
body.home .elementor-button .elementor-button-text {
    position: relative;
    z-index: 2;
}