/* کارت قیمت دلار — رنگ‌های برند موبایل آباد */
.ucard {
    --uc-orange: #e8530a;
    --uc-orange-2: #f26b0f;
    --uc-teal: #0f8f83;
    --uc-teal-2: #00796b;

    position: relative;
    isolation: isolate;
    overflow: hidden;
    box-sizing: border-box;
    width: 100%;
    margin: 16px auto;
    padding: 22px 18px;
    display: grid;
    gap: 12px;
    justify-items: center;
    text-align: center;
    color: #fff;
    line-height: 1.5;
    border-radius: 24px;
    background: linear-gradient(115deg, var(--uc-orange), var(--uc-orange-2), var(--uc-teal), var(--uc-teal-2), var(--uc-orange));
    background-image: linear-gradient(in oklch 115deg, var(--uc-orange), var(--uc-orange-2), var(--uc-teal), var(--uc-teal-2), var(--uc-orange));
    background-size: 300% 300%;
    animation: ucard-shift 14s ease-in-out infinite;
    box-shadow: 0 18px 40px -22px rgba(232, 83, 10, .75);
}
.ucard *, .ucard *::before, .ucard *::after { box-sizing: border-box; }

/* لپ‌تاپ: یک ردیف افقی کم‌ارتفاع */
@media (min-width: 768px) {
    .ucard {
        grid-template-columns: 1fr auto 1fr;
        align-items: center;
        gap: 24px;
        padding: 20px 34px;
    }
    .ucard .ucard__head { justify-self: start; justify-items: start; text-align: right; }
    .ucard .ucard__meta { justify-self: end; justify-content: flex-end; }
}

/* درخشش‌های نرم داخل کارت (خارج از جریان گرید) */
.ucard__orbs { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.ucard__orbs i {
    position: absolute;
    width: 280px; height: 280px;
    border-radius: 50%;
    pointer-events: none;
    will-change: transform;
}
.ucard__orbs i:nth-child(1) {
    top: -150px; right: 8%;
    background: radial-gradient(circle, rgba(255, 255, 255, .34), rgba(255, 255, 255, 0) 68%);
    animation: ucard-float-a 12s ease-in-out infinite;
}
.ucard__orbs i:nth-child(2) {
    bottom: -170px; left: 10%;
    background: radial-gradient(circle, rgba(0, 191, 165, .55), rgba(0, 191, 165, 0) 68%);
    animation: ucard-float-b 15s ease-in-out infinite;
}

.ucard .ucard__head { display: grid; gap: 6px; justify-items: center; }
.ucard .ucard__badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    justify-self: inherit;
    padding: 3px 12px;
    border-radius: 999px;
    background: rgba(0, 0, 0, .22);
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .06em;
    color: #fff;
}
.ucard .ucard__dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: #4ade80;
    animation: ucard-pulse 2s ease-out infinite;
}
.ucard .ucard__title {
    margin: 0;
    padding: 0;
    color: #fff;
    font-size: clamp(1rem, 2vw, 1.25rem);
    font-weight: 700;
    line-height: 1.5;
}

.ucard .ucard__price {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: .4em;
}
.ucard .ucard__num {
    color: #fff;
    font-size: clamp(2.3rem, 7vw, 3.6rem);
    font-weight: 800;
    line-height: 1.15;
    font-variant-numeric: tabular-nums;
    text-shadow: 0 2px 14px rgba(0, 0, 0, .22);
}
.ucard[data-pending] .ucard__num { opacity: .6; }
.ucard .ucard__unit {
    color: #fff;
    font-size: clamp(.95rem, 2vw, 1.15rem);
    font-weight: 600;
}

.ucard .ucard__meta {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
}
.ucard .ucard__pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: 999px;
    background: rgba(0, 0, 0, .24);
    color: #fff;
    font-size: .85rem;
}
.ucard .ucard__pill[hidden] { display: none; }
.ucard .ucard__pct { font-weight: 700; }
.ucard .ucard__sub { opacity: .85; font-size: .9em; }
.ucard .ucard__change--up   { background: #ecfdf5; color: #047857; }
.ucard .ucard__change--down { background: #fef2f2; color: #b91c1c; }
.ucard .ucard__change--up .ucard__sub,
.ucard .ucard__change--down .ucard__sub { opacity: .9; }

@keyframes ucard-shift {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}
@keyframes ucard-float-a {
    0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
    50%      { transform: translate3d(-90px, 60px, 0) scale(1.15); }
}
@keyframes ucard-float-b {
    0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
    50%      { transform: translate3d(100px, -50px, 0) scale(1.12); }
}
@keyframes ucard-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(74, 222, 128, .7); }
    70%  { box-shadow: 0 0 0 9px rgba(74, 222, 128, 0); }
    100% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0); }
}

@media (prefers-reduced-motion: reduce) {
    .ucard, .ucard *, .ucard *::before, .ucard *::after { animation: none !important; }
}