/* ============================================================
   MLS Sections — Frontend CSS
   Developer: Youssry Shaheen | يسري شاهين
   ============================================================ */

/* ── Variables ── */
:root {
    --mls-active: #8B1A1A;
    --mls-border: #8B1A1A;
    --mls-tab-text: #8B1A1A;
}

/* ============================================================
   FEATURES SECTION
   ============================================================ */
.mls-features {
    padding: 48px 24px;
    text-align: center;
}

.mls-features-inner {
    max-width: 900px;
    margin: 0 auto;
}

.mls-features-title {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 32px;
    font-family: inherit;
}

.mls-features-grid {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 60px;
    flex-wrap: wrap;
}

.mls-feature-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    width: 140px;
}

.mls-feature-icon {
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.mls-feature-icon svg { max-width: 100%; max-height: 100%; }

.mls-feature-label {
    font-size: 0.88rem;
    line-height: 1.5;
    text-align: center;
}

/* ============================================================
   TICKER
   ============================================================ */
.mls-ticker {
    overflow: hidden;
    padding: 14px 0;
    white-space: nowrap;
}

.mls-ticker-track {
    display: inline-block;
    animation: mls-ticker-scroll linear infinite;
    font-weight: 600;
    letter-spacing: 0.3px;
}

.mls-ticker-track span { padding: 0 24px; }
.mls-ticker-dot { opacity: .5; }

@keyframes mls-ticker-scroll {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-33.333%); }
}

/* RTL */
[dir="rtl"] .mls-ticker-track,
.rtl .mls-ticker-track {
    animation-name: mls-ticker-scroll-rtl;
}
@keyframes mls-ticker-scroll-rtl {
    0%   { transform: translateX(0); }
    100% { transform: translateX(33.333%); }
}

/* ============================================================
   ORIGIN SLIDER
   ============================================================ */
.mls-origin {
    padding: 52px 24px 60px;
    text-align: center;
}

.mls-origin-title {
    font-size: 1.6rem;
    font-weight: 700;
    margin-bottom: 8px;
}

.mls-origin-sub {
    font-size: 0.92rem;
    margin-bottom: 32px;
}

/* ── TABS ── */
.mls-origin-tabs {
    display: flex;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 36px;
    direction: rtl;
}

.mls-origin-tab {
    padding: 10px 28px;
    border-radius: 40px;
    border: 2px solid var(--mls-border);
    background: transparent;
    color: var(--mls-tab-text);
    font-size: 1rem;
    font-family: inherit;
    font-weight: 600;
    cursor: pointer;
    transition: background .22s, color .22s, transform .15s;
}

.mls-origin-tab:hover {
    background: rgba(139,26,26,.08);
    transform: translateY(-1px);
}

.mls-origin-tab.active {
    background: var(--mls-active);
    color: #fff;
    border-color: var(--mls-active);
}

/* ── PANEL ── */
.mls-origin-panel {
    display: none;
    position: relative;
    align-items: center;
    gap: 12px;
}

.mls-origin-panel.active {
    display: flex;
}

/* ── ARROWS ── */
.mls-origin-arrow {
    flex-shrink: 0;
    width: 40px; height: 40px;
    border-radius: 50%;
    border: 2px solid #ddd;
    background: #fff;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    color: #555;
    box-shadow: 0 2px 10px rgba(0,0,0,.08);
    transition: border-color .2s, color .2s, transform .15s;
    z-index: 2;
    padding: 0;
}
.mls-origin-arrow svg { width: 18px; height: 18px; }
.mls-origin-arrow:hover {
    border-color: var(--mls-active);
    color: var(--mls-active);
    transform: scale(1.08);
}

/* ── TRACK WRAPPER ── */
.mls-origin-track-wrap {
    overflow: hidden;
    flex: 1;
}

.mls-origin-track {
    display: flex;
    gap: 20px;
    transition: transform 0.45s cubic-bezier(.77,0,.18,1);
    direction: rtl;
}

/* ── CARD ── */
.mls-origin-card {
    flex-shrink: 0;
    width: calc(20% - 16px);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    padding: 10px 8px;
}

.mls-origin-flag {
    width: 74px; height: 74px;
    border-radius: 50%;
    font-size: 52px;
    display: flex; align-items: center; justify-content: center;
    line-height: 1;
    box-shadow: 0 4px 16px rgba(0,0,0,.12);
    background: #f5f5f5;
    overflow: hidden;
    transition: transform .3s;
}
.mls-origin-card:hover .mls-origin-flag {
    transform: scale(1.08) translateY(-4px);
}

.mls-origin-name {
    font-size: 0.8rem;
    color: #444;
    line-height: 1.5;
    text-align: center;
    direction: rtl;
}

/* ============================================================
   ANIMATIONS
   ============================================================ */
.mls-anim-fadeUp,
.mls-anim-fadeIn,
.mls-anim-zoomIn,
.mls-anim-slideLeft,
.mls-anim-slideIn,
.mls-anim-flipX {
    opacity: 0;
    animation-fill-mode: forwards;
    animation-duration: .55s;
    animation-delay: var(--mls-delay, 0s);
}

.mls-anim-fadeUp.mls-visible   { animation-name: mls-fadeUp; }
.mls-anim-fadeIn.mls-visible   { animation-name: mls-fadeIn; }
.mls-anim-zoomIn.mls-visible   { animation-name: mls-zoomIn; }
.mls-anim-slideLeft.mls-visible{ animation-name: mls-slideLeft; }
.mls-anim-slideIn.mls-visible  { animation-name: mls-slideIn; }
.mls-anim-flipX.mls-visible    { animation-name: mls-flipX; }
.mls-anim-none { opacity: 1; }

@keyframes mls-fadeUp    { from{opacity:0;transform:translateY(28px)} to{opacity:1;transform:translateY(0)} }
@keyframes mls-fadeIn    { from{opacity:0} to{opacity:1} }
@keyframes mls-zoomIn    { from{opacity:0;transform:scale(.85)} to{opacity:1;transform:scale(1)} }
@keyframes mls-slideLeft { from{opacity:0;transform:translateX(36px)} to{opacity:1;transform:translateX(0)} }
@keyframes mls-slideIn   { from{opacity:0;transform:translateX(-36px)} to{opacity:1;transform:translateX(0)} }
@keyframes mls-flipX     { from{opacity:0;transform:rotateY(60deg)} to{opacity:1;transform:rotateY(0)} }

/* ── Responsive ── */
@media (max-width: 768px) {
    .mls-features-grid { gap: 32px; }
    .mls-origin-card { width: calc(33.33% - 14px); }
    .mls-origin-tab { padding: 8px 18px; font-size: .9rem; }
}

@media (max-width: 480px) {
    .mls-features-grid { gap: 24px; }
    .mls-origin-card { width: calc(50% - 10px); }
    .mls-origin-arrow { width: 34px; height: 34px; }
    .mls-origin-arrow svg { width: 14px; height: 14px; }
}

/* ── Mobile Flag Size (CSS variable from PHP) ── */
@media (max-width: 768px) {
    .mls-origin-flag {
        width: var(--mls-mobile-flag, 60px);
        height: var(--mls-mobile-flag, 60px);
        font-size: calc(var(--mls-mobile-flag, 60px) * 0.72);
    }
}
@media (max-width: 480px) {
    .mls-origin-flag {
        width: var(--mls-mobile-flag, 60px);
        height: var(--mls-mobile-flag, 60px);
        font-size: calc(var(--mls-mobile-flag, 60px) * 0.72);
    }
}

/* ── Card Link ── */
.mls-origin-card-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    text-decoration: none;
    color: inherit;
    width: 100%;
}
.mls-origin-card-link:hover .mls-origin-flag {
    transform: scale(1.08) translateY(-4px);
}
.mls-origin-card-link:hover .mls-origin-name {
    color: var(--mls-active, #8B1A1A);
    text-decoration: underline;
}

/* ── Toggle Switch (Admin) ── */

/* ── Drag cursor on track ── */
.mls-origin-track { cursor: grab; }
.mls-origin-track:active { cursor: grabbing; }


/* ============================================================
   PREMIUM BUTCHER — GOLD & OLIVE FEATURES THEME v2.0.1
   Overrides saved legacy colors so this block always matches
   the new Premium Butcher identity.
   ============================================================ */
.mls-features {
    position: relative;
    overflow: hidden;
    padding: 58px 24px 62px !important;
    background:
        radial-gradient(circle at 50% -20%, rgba(255,224,138,.14), transparent 42%),
        radial-gradient(circle at 12% 60%, rgba(242,190,66,.07), transparent 30%),
        repeating-linear-gradient(-45deg, transparent 0 34px, rgba(242,190,66,.025) 34px 36px),
        linear-gradient(135deg, #211F0D 0%, #2D2B16 48%, #37341A 100%) !important;
    border-top: 1px solid rgba(255,224,138,.36);
    border-bottom: 1px solid rgba(139,88,8,.72);
    box-shadow:
        inset 0 1px 0 rgba(255,240,174,.08),
        inset 0 -1px 0 rgba(0,0,0,.34);
}

.mls-features::before {
    content:'';
    position:absolute;
    inset:0;
    pointer-events:none;
    background:linear-gradient(
        110deg,
        transparent 0%,
        transparent 38%,
        rgba(255,255,255,0) 43%,
        rgba(255,239,173,.045) 48%,
        rgba(255,255,255,.085) 50%,
        rgba(255,239,173,.04) 52%,
        transparent 58%,
        transparent 100%
    );
    background-size:240% 100%;
    animation:mls-section-sheen 10s linear infinite;
}

.mls-features-inner {
    position:relative;
    z-index:2;
    max-width:1050px;
}

.mls-features-title {
    margin-bottom:38px !important;
    font-size:clamp(1.75rem, 2.5vw, 2.35rem) !important;
    font-weight:800 !important;
    letter-spacing:.2px;
    background:linear-gradient(
        105deg,
        #A96509 0%,
        #D9981C 16%,
        #FFD45A 34%,
        #FFF1AE 48%,
        #F5BF32 60%,
        #B8730B 80%,
        #FFE08A 100%
    ) !important;
    background-size:220% auto !important;
    -webkit-background-clip:text !important;
    background-clip:text !important;
    -webkit-text-fill-color:transparent !important;
    color:transparent !important;
    filter:drop-shadow(0 1px 0 rgba(0,0,0,.28));
    animation:mls-title-gold-shine 6.5s linear infinite;
}

.mls-features-grid {
    gap:52px !important;
}

.mls-feature-item {
    position:relative;
    width:170px !important;
    gap:14px !important;
    padding:18px 12px 16px;
    border-radius:18px;
    transition:transform .25s ease, background .25s ease, box-shadow .25s ease;
}

.mls-feature-item:hover {
    transform:translateY(-5px);
    background:linear-gradient(145deg, rgba(255,224,138,.07), rgba(198,135,22,.025));
    box-shadow:inset 0 0 0 1px rgba(255,224,138,.12);
}

.mls-feature-icon {
    position:relative;
    width:92px !important;
    height:92px !important;
    border-radius:50%;
    color:#F2BE42 !important;
    background:
        radial-gradient(circle at 34% 22%, rgba(255,249,218,.22), transparent 28%),
        linear-gradient(145deg, rgba(255,224,138,.08), rgba(184,115,11,.03));
    border:1px solid rgba(255,224,138,.44);
    box-shadow:
        inset 0 1px 0 rgba(255,248,212,.15),
        inset 0 -1px 0 rgba(116,67,5,.18),
        0 0 0 4px rgba(242,190,66,.035),
        0 9px 26px rgba(0,0,0,.20);
    overflow:hidden;
}

.mls-feature-icon::after {
    content:'';
    position:absolute;
    top:-30%;
    bottom:-30%;
    left:-70%;
    width:42%;
    pointer-events:none;
    transform:skewX(-22deg);
    background:linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.08) 25%,
        rgba(255,245,196,.78) 50%,
        rgba(255,255,255,.12) 72%,
        transparent
    );
    animation:mls-icon-mirror 4.8s ease-in-out infinite;
}

.mls-feature-item:nth-child(2) .mls-feature-icon::after { animation-delay:.7s; }
.mls-feature-item:nth-child(3) .mls-feature-icon::after { animation-delay:1.4s; }
.mls-feature-item:nth-child(4) .mls-feature-icon::after { animation-delay:2.1s; }
.mls-feature-item:nth-child(5) .mls-feature-icon::after { animation-delay:2.8s; }

.mls-feature-icon svg {
    position:relative;
    z-index:2;
    width:62px !important;
    height:62px !important;
    max-width:68% !important;
    max-height:68% !important;
    color:#FFD45A !important;
    stroke:#FFD45A !important;
    filter:
        drop-shadow(0 1px 0 rgba(255,244,190,.24))
        drop-shadow(0 0 5px rgba(242,190,66,.22));
}

.mls-feature-label {
    margin:0 !important;
    color:#FFE08A !important;
    font-size:1rem !important;
    font-weight:700 !important;
    line-height:1.55 !important;
    text-shadow:0 1px 1px rgba(0,0,0,.35);
}

@keyframes mls-title-gold-shine {
    0% { background-position:200% center; }
    100% { background-position:-20% center; }
}

@keyframes mls-icon-mirror {
    0%,18% { left:-70%; opacity:0; }
    30% { opacity:.85; }
    58% { opacity:.85; }
    72%,100% { left:145%; opacity:0; }
}

@keyframes mls-section-sheen {
    from { background-position:180% 0; }
    to { background-position:-80% 0; }
}

@media (max-width:768px) {
    .mls-features { padding:44px 18px 48px !important; }
    .mls-features-title { font-size:1.8rem !important; margin-bottom:28px !important; }
    .mls-features-grid { gap:24px !important; }
    .mls-feature-item { width:140px !important; padding:12px 8px; }
    .mls-feature-icon { width:78px !important; height:78px !important; }
    .mls-feature-icon svg { width:52px !important; height:52px !important; }
    .mls-feature-label { font-size:.92rem !important; }
}

@media (max-width:480px) {
    .mls-features-grid { gap:14px 8px !important; }
    .mls-feature-item { width:calc(50% - 8px) !important; min-width:130px; }
}

@media (prefers-reduced-motion:reduce) {
    .mls-features::before,
    .mls-features-title,
    .mls-feature-icon::after { animation:none !important; }
}


/* v2.0.2 SAFE FIX — keep the title visible while retaining the premium gold identity.
   This plugin styles only the MLS section and does not touch the site header. */
.mls-features-title {
    opacity: 1 !important;
}
.mls-features-title.mls-visible,
.mls-features-title.mls-anim-fadeUp,
.mls-features-title.mls-anim-fadeIn,
.mls-features-title.mls-anim-zoomIn,
.mls-features-title.mls-anim-slideLeft,
.mls-features-title.mls-anim-slideIn,
.mls-features-title.mls-anim-flipX {
    opacity: 1 !important;
    transform: none !important;
    animation: mls-title-gold-shine 6.5s linear infinite !important;
}

/* Make the section title easy to read even if background-clip is unavailable */
@supports not (-webkit-background-clip: text) {
    .mls-features-title {
        color: #FFD45A !important;
        -webkit-text-fill-color: #FFD45A !important;
        background: none !important;
    }
}


/* ============================================================
   PREMIUM BUTCHER — TICKER + ORIGIN GOLD/OLIVE THEME v2.0.3
   Keeps existing functionality; visual identity only.
   ============================================================ */

/* ---------- MOVING TICKER ---------- */
.mls-ticker {
    position: relative;
    isolation: isolate;
    overflow: hidden !important;
    padding: 15px 0 !important;
    background:
        radial-gradient(circle at 50% -90%, rgba(255,224,138,.14), transparent 55%),
        linear-gradient(90deg, #211F0D 0%, #302D13 48%, #211F0D 100%) !important;
    border-top: 1px solid rgba(255,224,138,.26);
    border-bottom: 1px solid rgba(198,135,22,.55);
    box-shadow:
        inset 0 1px 0 rgba(255,242,181,.06),
        inset 0 -1px 0 rgba(0,0,0,.32),
        0 5px 18px rgba(0,0,0,.10);
}

.mls-ticker::before {
    content:'';
    position:absolute;
    z-index:0;
    top:0;
    bottom:0;
    left:-34%;
    width:22%;
    transform:skewX(-24deg);
    background:linear-gradient(
        90deg,
        transparent,
        rgba(255,230,145,.03) 20%,
        rgba(255,246,204,.13) 50%,
        rgba(255,230,145,.03) 80%,
        transparent
    );
    animation:mls-ticker-metal-sweep 8.5s ease-in-out infinite;
    pointer-events:none;
}

.mls-ticker-track {
    position:relative;
    z-index:1;
    color:#FFD45A !important;
    font-size:15px !important;
    font-weight:750 !important;
    text-shadow:
        0 1px 0 rgba(0,0,0,.5),
        0 0 9px rgba(242,190,66,.15);
}

.mls-ticker-track > span:not(.mls-ticker-dot) {
    color:#FFD45A !important;
}

.mls-ticker-dot {
    color:#FFF0A8 !important;
    opacity:1 !important;
    text-shadow:0 0 10px rgba(255,208,83,.42);
}

@keyframes mls-ticker-metal-sweep {
    0%,18% { left:-34%; opacity:0; }
    30% { opacity:1; }
    65% { opacity:.85; }
    82%,100% { left:118%; opacity:0; }
}


/* ---------- SHOP BY ORIGIN ---------- */
.mls-origin {
    position:relative;
    isolation:isolate;
    overflow:hidden;
    padding:58px 26px 64px !important;
    background:
        radial-gradient(circle at 50% -15%, rgba(255,224,138,.13), transparent 36%),
        radial-gradient(circle at 88% 85%, rgba(198,135,22,.06), transparent 26%),
        repeating-linear-gradient(-45deg, transparent 0 36px, rgba(242,190,66,.024) 36px 38px),
        linear-gradient(135deg, #211F0D 0%, #2D2B16 52%, #38351A 100%) !important;
    border-top:1px solid rgba(255,224,138,.25);
    border-bottom:1px solid rgba(141,90,8,.58);
    box-shadow:
        inset 0 1px 0 rgba(255,240,174,.06),
        inset 0 -1px 0 rgba(0,0,0,.36);
}

.mls-origin::before {
    content:'';
    position:absolute;
    z-index:0;
    inset:0;
    pointer-events:none;
    background:linear-gradient(
        112deg,
        transparent 0%,
        transparent 39%,
        rgba(255,255,255,0) 45%,
        rgba(255,244,193,.035) 49%,
        rgba(255,255,255,.07) 50%,
        rgba(255,244,193,.03) 52%,
        transparent 58%,
        transparent 100%
    );
    background-size:250% 100%;
    animation:mls-origin-soft-sheen 12s linear infinite;
}

.mls-origin > * {
    position:relative;
    z-index:1;
}

.mls-origin-title {
    font-size:clamp(2rem, 3vw, 2.65rem) !important;
    line-height:1.15;
    font-weight:800 !important;
    margin-bottom:10px !important;
    background:linear-gradient(
        105deg,
        #9B6108 0%,
        #D69618 14%,
        #FFD45A 31%,
        #FFF3B9 47%,
        #F2BE42 61%,
        #B66E09 80%,
        #FFE08A 100%
    ) !important;
    background-size:220% auto !important;
    -webkit-background-clip:text !important;
    background-clip:text !important;
    -webkit-text-fill-color:transparent !important;
    color:transparent !important;
    text-shadow:none !important;
    filter:drop-shadow(0 1px 1px rgba(0,0,0,.28));
    animation:mls-origin-title-shine 6.8s linear infinite;
}

.mls-origin-sub {
    color:#EBCB74 !important;
    font-size:1rem !important;
    font-weight:500;
    margin-bottom:30px !important;
    text-shadow:0 1px 0 rgba(0,0,0,.3);
}

/* Tabs */
.mls-origin-tabs {
    gap:12px !important;
    margin-bottom:40px !important;
}

.mls-origin-tab {
    position:relative;
    overflow:hidden;
    min-width:88px;
    padding:10px 27px !important;
    border:1px solid rgba(255,224,138,.64) !important;
    background:linear-gradient(145deg, rgba(255,224,138,.055), rgba(198,135,22,.018)) !important;
    color:#FFE08A !important;
    font-weight:750 !important;
    box-shadow:
        inset 0 1px 0 rgba(255,247,205,.08),
        0 5px 16px rgba(0,0,0,.12);
}

.mls-origin-tab:hover {
    color:#111 !important;
    border-color:#FFF0A8 !important;
    background:linear-gradient(135deg, #B8750A 0%, #E5A91D 24%, #FFD45A 48%, #FFF0A8 54%, #E7AA20 74%, #A96708 100%) !important;
    box-shadow:0 7px 22px rgba(242,190,66,.20);
}

.mls-origin-tab.active {
    color:#111 !important;
    border-color:#FFE08A !important;
    background:linear-gradient(
        120deg,
        #9D6208 0%,
        #D48E12 14%,
        #F2BE42 30%,
        #FFF1AE 48%,
        #F3BF39 62%,
        #B8730B 82%,
        #E5A91D 100%
    ) !important;
    background-size:200% auto !important;
    box-shadow:
        inset 0 1px 0 rgba(255,250,220,.55),
        inset 0 -2px 3px rgba(107,62,3,.26),
        0 7px 22px rgba(242,190,66,.18);
    animation:mls-tab-gold-shine 5.5s linear infinite;
}

/* Origin arrows */
.mls-origin-arrow {
    width:44px !important;
    height:44px !important;
    border:1px solid #E9B93C !important;
    color:#FFD45A !important;
    background:
        radial-gradient(circle at 35% 22%, rgba(255,245,198,.13), transparent 27%),
        linear-gradient(145deg, #363217, #24220F) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,240,174,.10),
        0 0 0 3px rgba(242,190,66,.035),
        0 7px 19px rgba(0,0,0,.18) !important;
}

.mls-origin-arrow:hover {
    color:#111 !important;
    border-color:#FFF0A8 !important;
    background:linear-gradient(135deg, #B8750A 0%, #F2BE42 42%, #FFF0A8 54%, #D89213 100%) !important;
    box-shadow:0 7px 25px rgba(242,190,66,.25) !important;
}

/* Flag cards */
.mls-origin-card {
    gap:15px !important;
    padding:14px 8px 12px !important;
}

.mls-origin-card-link {
    gap:15px !important;
}

.mls-origin-flag {
    position:relative;
    isolation:isolate;
    width:92px !important;
    height:92px !important;
    font-size:58px !important;
    padding:8px !important;
    box-sizing:border-box;
    background:
        radial-gradient(circle at 36% 23%, rgba(255,255,255,.16), transparent 24%),
        linear-gradient(145deg, #3B371A 0%, #24220F 100%) !important;
    border:3px solid transparent !important;
    background-clip:padding-box !important;
    overflow:hidden !important;
    box-shadow:
        0 0 0 1px #8F5907,
        0 0 0 3px #D99617,
        0 0 0 4px #FFF0A8,
        0 0 0 6px #B8730B,
        inset 0 1px 0 rgba(255,247,205,.12),
        0 10px 28px rgba(0,0,0,.25),
        0 0 22px rgba(242,190,66,.12) !important;
    transition:transform .28s ease, box-shadow .28s ease !important;
}

/* Animated mirror-like gold reflection over each flag circle */
.mls-origin-flag::after {
    content:'';
    position:absolute;
    z-index:3;
    top:-35%;
    bottom:-35%;
    left:-76%;
    width:36%;
    transform:skewX(-23deg);
    pointer-events:none;
    background:linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.08) 18%,
        rgba(255,244,190,.68) 50%,
        rgba(255,255,255,.12) 80%,
        transparent
    );
    animation:mls-flag-mirror 5.5s ease-in-out infinite;
}

.mls-origin-card:nth-child(2) .mls-origin-flag::after { animation-delay:.65s; }
.mls-origin-card:nth-child(3) .mls-origin-flag::after { animation-delay:1.3s; }
.mls-origin-card:nth-child(4) .mls-origin-flag::after { animation-delay:1.95s; }
.mls-origin-card:nth-child(5) .mls-origin-flag::after { animation-delay:2.6s; }

.mls-origin-card:hover .mls-origin-flag,
.mls-origin-card-link:hover .mls-origin-flag {
    transform:translateY(-6px) scale(1.07) !important;
    box-shadow:
        0 0 0 1px #9B6108,
        0 0 0 3px #F2BE42,
        0 0 0 4px #FFF4C6,
        0 0 0 6px #C17B0C,
        inset 0 1px 0 rgba(255,247,205,.16),
        0 13px 34px rgba(0,0,0,.27),
        0 0 28px rgba(242,190,66,.21) !important;
}

.mls-origin-name {
    color:#F2D57E !important;
    font-size:.86rem !important;
    font-weight:650 !important;
    line-height:1.5 !important;
    text-decoration:none !important;
    text-shadow:0 1px 1px rgba(0,0,0,.38);
}

.mls-origin-card-link:hover .mls-origin-name {
    color:#FFF0A8 !important;
    text-decoration:none !important;
}

/* Mobile */
@media (max-width:768px) {
    .mls-ticker {
        padding:12px 0 !important;
    }
    .mls-ticker-track {
        font-size:13px !important;
    }
    .mls-origin {
        padding:44px 16px 50px !important;
    }
    .mls-origin-title {
        font-size:1.85rem !important;
    }
    .mls-origin-flag {
        width:var(--mls-mobile-flag, 68px) !important;
        height:var(--mls-mobile-flag, 68px) !important;
        font-size:calc(var(--mls-mobile-flag, 68px) * .64) !important;
        padding:6px !important;
    }
}

@media (prefers-reduced-motion:reduce) {
    .mls-ticker::before,
    .mls-origin::before,
    .mls-origin-title,
    .mls-origin-tab.active,
    .mls-origin-flag::after {
        animation:none !important;
    }
}

@keyframes mls-origin-soft-sheen {
    from { background-position:190% 0; }
    to { background-position:-80% 0; }
}

@keyframes mls-origin-title-shine {
    0% { background-position:200% center; }
    100% { background-position:-20% center; }
}

@keyframes mls-tab-gold-shine {
    0% { background-position:200% center; }
    100% { background-position:-10% center; }
}

@keyframes mls-flag-mirror {
    0%,18% { left:-76%; opacity:0; }
    30% { opacity:.9; }
    58% { opacity:.85; }
    74%,100% { left:145%; opacity:0; }
}