/* ============================================================
   UC Store — بازطراحی صفحه خرید یوسی (pubg-sell.ir/uc)
   تمام استایل‌ها با پیشوند .ucstore اسکوپ شده‌اند
   ============================================================ */

.ucstore {
    --ucs-bg0: #070b14;
    --ucs-bg1: #0b1220;
    --ucs-bg2: #101a2e;
    --ucs-card: rgba(255, 255, 255, .034);
    --ucs-card-hi: rgba(255, 255, 255, .06);
    --ucs-line: rgba(255, 255, 255, .09);
    --ucs-gold: #f5c451;
    --ucs-gold-2: #e89b2f;
    --ucs-gold-soft: rgba(245, 196, 81, .16);
    --ucs-goldgrad: linear-gradient(135deg, #ffe08a 0%, #f5c451 48%, #e8992d 100%);
    --ucs-cyan: #39d3f0;
    --ucs-text: #f1f5fb;
    --ucs-mut: #a4b0c6;
    --ucs-green: #2fbd85;
    --ucs-red: #ff6470;
    position: relative;
    display: block;
    width: 100%;
    background: #fff;
    /* حذف خط سفید بالای صفحه: پدینگ ۲۰px ای #bodymain را با مارجین منفی می‌بلعد */
    margin-top: -20px;
    color: var(--ucs-text);
    font-family: IRANSans, Vazirmatn, Tahoma, sans-serif;
    line-height: 1.9;
    box-sizing: border-box;
}

/* ---------- ناحیه تیره: هیرو + مراحل + کارت‌ها ---------- */
.ucstore .ucs-dark {
    background: linear-gradient(180deg, var(--ucs-bg1) 0%, var(--ucs-bg0) 100%);
    overflow: hidden;
}

/* ---------- گذر تدریجی تیره → روشن (به جای برش ناگهانی) ---------- */
.ucstore .ucs-fade {
    height: 250px;
    margin-top: 34px;
    background: linear-gradient(180deg,
            #070b14 0%,
            #10182a 16%,
            #293147 32%,
            #4c5266 47%,
            #7a7d88 61%,
            #b0a99d 74%,
            #e2dac9 87%,
            #faf6ee 96%,
            #fdfaf3 100%);
}

/* ---------- ناحیه روشن: فرم + راهنما + دسته‌ها (ادامه نرم تا فوتر سفید) ---------- */
.ucstore .ucs-light {
    position: relative;
    padding-top: 30px;
    background:
            radial-gradient(640px 320px at 86% -2%, rgba(245, 196, 81, .14), transparent 62%),
            radial-gradient(760px 400px at 8% 2%, rgba(57, 211, 240, .10), transparent 62%),
            radial-gradient(560px 300px at 50% 24%, rgba(47, 189, 133, .05), transparent 65%),
            linear-gradient(180deg, #fdfaf3 0%, #fdfaf2 46%, #ffffff 100%);
    color: #22303f;
}

.ucstore *,
.ucstore *::before,
.ucstore *::after {
    box-sizing: border-box;
}

/* ---------------- HERO ---------------- */

.ucs-hero {
    position: relative;
    padding: 58px 20px 74px;
    text-align: center;
    background:
            radial-gradient(900px 480px at 18% -10%, rgba(245, 196, 81, .14), transparent 60%),
            radial-gradient(800px 500px at 88% 8%, rgba(57, 211, 240, .10), transparent 62%),
            linear-gradient(180deg, #0d1526 0%, #0a101d 100%);
    overflow: hidden;
}

/* شبکه‌ی نقطه‌ای محو بالای هیرو */
.ucs-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
            linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px),
            linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px);
    background-size: 44px 44px;
    -webkit-mask-image: radial-gradient(720px 380px at 50% 0%, #000 0%, transparent 78%);
    mask-image: radial-gradient(720px 380px at 50% 0%, #000 0%, transparent 78%);
    pointer-events: none;
}

/* سکه‌های شناور پس‌زمینه */
.ucs-fcoin {
    position: absolute;
    border-radius: 50%;
    background: radial-gradient(circle at 32% 28%, #fff3c4 0%, #f7cd5e 42%, #dd9a26 74%, #b97b16 100%);
    box-shadow: 0 0 34px rgba(232, 155, 47, .38);
    opacity: .5;
    filter: blur(.4px);
    animation: ucsfloat 7s ease-in-out infinite;
    pointer-events: none;
}

.ucs-fcoin::after {
    content: "UC";
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    color: rgba(122, 75, 6, .75);
}

.ucs-fcoin--1 { width: 70px; height: 70px; top: 15%; right: 8%; animation-delay: .2s; }
.ucs-fcoin--2 { width: 44px; height: 44px; top: 46%; right: 15%; animation-delay: 1.6s; opacity: .32; }
.ucs-fcoin--3 { width: 56px; height: 56px; top: 22%; left: 9%; animation-delay: .9s; opacity: .4; }
.ucs-fcoin--4 { width: 30px; height: 30px; top: 50%; left: 19%; animation-delay: 2.4s; opacity: .26; }

.ucs-fcoin--2::after, .ucs-fcoin--4::after { font-size: 0; }

@keyframes ucsfloat {
    0%, 100% { transform: translateY(0) rotate(-4deg); }
    50% { transform: translateY(-16px) rotate(5deg); }
}

.ucs-hero__inner {
    position: relative;
    max-width: 780px;
    margin: 0 auto;
}

.ucs-hero__badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 16px;
    border-radius: 999px;
    border: 1px solid rgba(245, 196, 81, .38);
    background: var(--ucs-gold-soft);
    color: var(--ucs-gold);
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .2px;
    margin-bottom: 22px;
}

.ucs-hero__badge svg {
    width: 15px;
    height: 15px;
    flex: 0 0 auto;
}

.ucs-hero h1 {
    margin: 0 0 14px;
    font-size: clamp(26px, 4.6vw, 44px);
    font-weight: 800;
    line-height: 1.5;
    background: linear-gradient(120deg, #ffffff 20%, #ffe6a3 55%, var(--ucs-gold) 90%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: var(--ucs-gold);
}

.ucs-hero__sub {
    margin: 0 auto 26px;
    max-width: 620px;
    color: var(--ucs-mut);
    font-size: 14.5px;
    font-weight: 300;
}

.ucs-hero__chips {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px 12px;
}

.ucs-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 15px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .045);
    border: 1px solid var(--ucs-line);
    color: #cdd7e6;
    font-size: 12.5px;
    font-weight: 500;
    backdrop-filter: blur(4px);
}

.ucs-chip svg {
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
    color: var(--ucs-gold);
}

/* ---------------- STEPS ---------------- */

.ucs-steps {
    position: relative;
    max-width: 960px;
    margin: -30px auto 0;
    padding: 0 20px;
    display: flex;
    justify-content: center;
    gap: 14px;
    z-index: 2;
}

.ucs-step {
    flex: 1 1 220px;
    max-width: 290px;
    background: linear-gradient(180deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .02));
    border: 1px solid var(--ucs-line);
    border-radius: 16px;
    padding: 16px 18px 14px;
    text-align: center;
    backdrop-filter: blur(6px);
}

.ucs-step__no {
    width: 34px;
    height: 34px;
    margin: 0 auto 8px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--ucs-goldgrad);
    color: #4c2f05;
    font-weight: 800;
    font-size: 15px;
    box-shadow: 0 4px 14px rgba(232, 155, 47, .35);
}

.ucs-step__title {
    font-size: 14px;
    font-weight: 700;
    color: var(--ucs-text);
}

.ucs-step__desc {
    font-size: 11.5px;
    color: var(--ucs-mut);
    font-weight: 300;
}

/* ---------------- SECTION HEAD ---------------- */

.ucs-main {
    max-width: 1080px;
    margin: 0 auto;
    padding: 44px 20px 10px;
}

.ucs-sec-head {
    text-align: center;
    margin-bottom: 24px;
}

.ucs-sec-head__kicker {
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .4px;
    color: var(--ucs-gold);
    border-bottom: 2px solid rgba(245, 196, 81, .45);
    padding-bottom: 3px;
    margin-bottom: 10px;
}

.ucs-sec-head h2 {
    margin: 0 0 8px;
    font-size: clamp(20px, 3vw, 28px);
    font-weight: 800;
    color: var(--ucs-text);
}

.ucs-sec-head p {
    margin: 0;
    color: var(--ucs-mut);
    font-size: 13.5px;
    font-weight: 300;
}

/* ---------------- NOTICE ---------------- */

.ucs-notice {
    max-width: 720px;
    margin: 0 auto 26px;
    padding: 10px 16px;
    border-radius: 12px;
    background: rgba(57, 211, 240, .07);
    border: 1px solid rgba(57, 211, 240, .25);
    color: #9fdcec;
    font-size: 12.5px;
    text-align: center;
}

/* ---------------- PACKAGE GRID ---------------- */

.ucs-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(196px, 1fr));
    gap: 14px;
}

.ucs-card {
    --ucs-card-line: var(--ucs-line);
    position: relative;
    display: flex;
    flex-direction: column;
    background:
            linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .018));
    border: 1px solid var(--ucs-card-line);
    border-radius: 18px;
    padding: 36px 14px 16px;
    text-align: center;
    box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, .06),
            0 14px 34px -22px rgba(0, 0, 0, .85);
    transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease, background .22s ease;
    overflow: hidden;
}

/* خط تاکیدی طلایی بالای کارت */
.ucs-card::after {
    content: "";
    position: absolute;
    top: 0;
    right: 24%;
    left: 24%;
    height: 3px;
    border-radius: 0 0 4px 4px;
    background: var(--ucs-goldgrad);
    opacity: 0;
    transition: opacity .25s ease;
    pointer-events: none;
}

.ucs-card:hover::after,
.ucs-card.is-active::after {
    opacity: .95;
}

.ucs-card:hover {
    transform: translateY(-4px);
    border-color: rgba(245, 196, 81, .45);
    box-shadow: 0 18px 40px -18px rgba(0, 0, 0, .65), 0 0 0 1px rgba(245, 196, 81, .12);
}

/* هاله‌ی بالای کارت هنگام هاور */
.ucs-card::before {
    content: "";
    position: absolute;
    top: -60px;
    left: 50%;
    width: 150px;
    height: 110px;
    transform: translateX(-50%);
    background: radial-gradient(closest-side, rgba(245, 196, 81, .16), transparent);
    opacity: 0;
    transition: opacity .25s ease;
    pointer-events: none;
}

.ucs-card:hover::before { opacity: 1; }

.ucs-card.is-active {
    border-color: rgba(245, 196, 81, .65);
    background: linear-gradient(180deg, rgba(245, 196, 81, .08), rgba(255, 255, 255, .02));
    box-shadow: 0 14px 36px -16px rgba(232, 155, 47, .4);
}

.ucs-card__flag {
    position: absolute;
    top: 10px;
    right: 10px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 9px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 800;
    line-height: 1.7;
    background: var(--ucs-goldgrad);
    color: #4c2f05;
    box-shadow: 0 4px 12px rgba(232, 155, 47, .4);
}

.ucs-card__flag--value {
    background: linear-gradient(135deg, #7ce7c0, #2fbd85);
    color: #06301f;
    box-shadow: 0 4px 12px rgba(47, 189, 133, .35);
}

.ucs-card__flag svg {
    width: 11px;
    height: 11px;
}

/* سکه‌ی یوسی */
.ucs-coin {
    width: 58px;
    height: 58px;
    margin: 0 auto 12px;
    border-radius: 50%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle at 32% 28%, #fff3c4 0%, #f7cd5e 40%, #e2a12b 72%, #b97b16 100%);
    box-shadow:
            0 8px 20px rgba(232, 155, 47, .3),
            inset 0 -5px 9px rgba(120, 70, 0, .38),
            inset 0 3px 6px rgba(255, 240, 190, .85);
    transition: transform .25s ease;
}

.ucs-coin::before {
    content: "";
    position: absolute;
    inset: 5px;
    border-radius: 50%;
    border: 1.5px dashed rgba(122, 75, 6, .5);
}

.ucs-coin span {
    font-weight: 800;
    font-size: 16px;
    color: #7a4b06;
    letter-spacing: .5px;
}

.ucs-card:hover .ucs-coin { transform: scale(1.07) rotate(-5deg); }

.ucs-card__amount {
    font-size: 24px;
    font-weight: 800;
    color: var(--ucs-text);
    line-height: 1.4;
    font-variant-numeric: tabular-nums;
}

.ucs-card__amount small {
    font-size: 12px;
    font-weight: 500;
    color: var(--ucs-mut);
    margin-right: 3px;
}

.ucs-card__price {
    margin: 8px 0 14px;
    font-size: 17px;
    font-weight: 800;
    color: var(--ucs-gold);
    font-variant-numeric: tabular-nums;
}

.ucs-card__price small {
    font-size: 11px;
    font-weight: 500;
    color: var(--ucs-mut);
}

/* قیمت تک‌یوسی: فقط روی کارتِ اقتصادی‌ترین به‌عنوان دلیلِ انتخاب */
.ucs-card__unit {
    display: inline-block;
    margin: -6px 0 10px;
    padding: 2px 10px;
    border-radius: 999px;
    background: rgba(47, 189, 133, .12);
    border: 1px solid rgba(47, 189, 133, .3);
    color: #6fd8ab;
    font-size: 10.5px;
    font-weight: 500;
    white-space: nowrap;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: bottom;
}

.ucs-card__price s {
    display: block;
    font-size: 12px;
    color: #7c879b;
    font-weight: 400;
}

/* ---------------- STEPPER ---------------- */

/* استپر همیشه کفِ کارت می‌نشیند تا همه کارت‌ها تراز شوند؛
   جداکننده خط‌چین بالای آن ساختار می‌دهد */
.ucstore .ucs-card [data-quantity] {
    margin-top: auto;
    padding-top: 14px;
    border-top: 1px dashed rgba(255, 255, 255, .14);
}

.ucstore [data-quantity] {
    position: static;
    float: none;
    width: 100%;
    max-width: none;
    height: auto;
    padding: 0;
    border: 0;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    gap: 6px;
}

.ucstore [data-quantity] button {
    position: static;
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    margin: 0;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 12px;
    background: rgba(255, 255, 255, .055);
    color: var(--ucs-gold);
    /* متن پیش‌فرض دکمه (Up/Down) با font-size:0 از چیدمان حذف می‌شود تا
       علامت +/− شبه‌المان دقیقاً وسط بماند */
    font-size: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-indent: 0;
    white-space: normal;
    overflow: hidden;
    cursor: pointer;
    opacity: 1;
    transition: background .18s ease, border-color .18s ease, transform .12s ease;
}

/* علامت + و − با شبه‌المان (پاک کردن background اسویژن قدیمی) */
.ucstore [data-quantity] button {
    background-image: none;
    background-color: rgba(255, 255, 255, .055);
}

.ucstore [data-quantity] button::before {
    content: "−";
    font-size: 20px;
    font-weight: 800;
    line-height: 1;
    color: var(--ucs-gold);
    display: block;
}

.ucstore [data-quantity] button.add::before { content: "+"; }

.ucstore [data-quantity] button:hover {
    background: var(--ucs-goldgrad);
    border-color: transparent;
    transform: translateY(-1px);
}

.ucstore [data-quantity] button:hover::before { color: #4c2f05; }

.ucstore [data-quantity] button:active { transform: translateY(0); }

.ucstore [data-quantity] input {
    flex: 1 1 auto;
    width: 100%;
    height: 38px;
    font-size: 15px;
    font-weight: 700;
    padding: 0 6px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, .14);
    background: rgba(0, 0, 0, .3);
    color: var(--ucs-text);
    box-shadow: none;
    text-align: center;
    font-variant-numeric: tabular-nums;
    transition: border-color .18s ease, background .18s ease;
    -moz-appearance: textfield;
    appearance: textfield;
}

.ucstore [data-quantity] input::-webkit-outer-spin-button,
.ucstore [data-quantity] input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.ucstore [data-quantity] input:focus {
    outline: none;
    border-color: var(--ucs-gold);
    background: rgba(0, 0, 0, .45);
}

/* ---------------- CHECKOUT ---------------- */

.ucs-checkout {
    max-width: 860px;
    margin: 0 auto;
    padding: 10px 20px;
}

.ucs-panel {
    background: #fff;
    border-radius: 22px;
    padding: 26px 24px 22px;
    box-shadow: 0 34px 90px -24px rgba(2, 6, 16, .7), 0 0 0 1px rgba(255, 255, 255, .06);
    color: #22303f;
}

.ucs-panel__head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 16px;
    margin-bottom: 18px;
    border-bottom: 1px solid #eef1f6;
}

.ucs-panel__head--icon {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #fff3d6, #ffe0a3);
    color: #b97b16;
}

.ucs-panel__head--icon svg {
    width: 19px;
    height: 19px;
}

.ucs-panel__head h2 {
    margin: 0;
    font-size: 17px;
    font-weight: 800;
    color: #1d2a3a;
}

.ucs-panel__head p {
    margin: 0;
    font-size: 12px;
    color: #8794a7;
    font-weight: 300;
}

/* --- فیلدهای فرم (هم‌فامیل با iduc / nameuc / username از paystep) --- */

.ucstore .ucs-panel .divform {
    float: none;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 7px;
    padding: 0;
    margin: 0 0 16px;
    text-align: right;
    background: none;
}

.ucstore .ucs-panel .formdiv form .divform:nth-child(odd) {
    background: none;
}

.ucstore .ucs-panel .divform > label,
.ucstore .ucs-panel .divform > span {
    width: 100%;
    float: none;
    height: auto;
    line-height: 1.7;
    padding: 0;
}

.ucstore .ucs-panel .divform > label {
    color: #43526a;
    font-size: 13px;
    font-weight: 700;
}

.ucstore .ucs-panel .divform .statform {
    color: #e05656;
}

.ucstore .ucs-panel .divform input,
.ucstore .ucs-panel .divform textarea {
    width: 100%;
    max-width: none;
    height: 48px;
    border: 1.5px solid #e4e9f0;
    border-radius: 13px;
    background: #f8fafc;
    box-shadow: none;
    padding: 0 16px;
    color: #22303f;
    font-size: 15px;
    font-family: inherit;
    transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

.ucstore .ucs-panel .divform input::placeholder {
    color: #aeb9c9;
    font-size: 13px;
    font-weight: 300;
}

.ucstore .ucs-panel .divform input:focus {
    outline: none;
    border-color: var(--ucs-gold-2);
    background: #fff;
    box-shadow: 0 0 0 4px rgba(232, 155, 47, .14);
}

/* --- ردیف مبلغ قابل پرداخت --- */

.ucstore .ucs-panel .paydivlabel {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 6px;
    background: #f4f7fb;
    border: 1px solid #e8edf4;
    border-radius: 14px;
    padding: 12px 16px;
    font-size: 13.5px;
    color: #43526a;
    font-weight: 700;
}

.ucstore .ucs-panel #payfor,
.ucstore .ucs-panel .payfor {
    font-size: 19px;
    font-weight: 800;
    color: #9aa5b5 !important;
    font-variant-numeric: tabular-nums;
    transition: color .2s ease;
}

/* وقتی بسته‌ای انتخاب شد مبلغ طلایی می‌شود (کلاس را JS صفحه اضافه می‌کند) */
.ucstore .ucs-panel #payfor.ucs-has-val,
.ucstore .ucs-panel .payfor.ucs-has-val {
    color: #c97e14 !important;
}

/* --- دکمه‌های پرداخت --- */

.ucstore .ucs-panel button.buyacc,
.ucstore .ucs-panel .apagebuybttn {
    display: block;
    width: 100%;
    max-width: 460px;
    margin: 16px auto 8px;
    padding: 15px 24px;
    border: 0;
    border-radius: 14px;
    background: var(--ucs-goldgrad);
    color: #40280a;
    font-family: inherit;
    font-size: 16px;
    font-weight: 800;
    text-align: center;
    cursor: pointer;
    box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, .38),
            0 14px 30px -10px rgba(232, 155, 47, .55);
    transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}

.ucstore .ucs-panel button.buyacc:hover,
.ucstore .ucs-panel .apagebuybttn:hover {
    transform: translateY(-2px);
    filter: brightness(1.04);
    box-shadow: 0 18px 36px -10px rgba(232, 155, 47, .65);
    background: var(--ucs-goldgrad);
    color: #40280a;
}

.ucstore .ucs-panel .apagebuybttn {
    background: #fff;
    border: 1.5px solid #d6dbe3;
    color: #43526a;
    font-size: 13.5px;
    font-weight: 700;
    box-shadow: none;
    padding: 12px 20px;
}

.ucstore .ucs-panel .apagebuybttn:hover {
    border-color: var(--ucs-gold-2);
    color: #c97e14;
    background: #fffdf5;
    box-shadow: none;
    transform: translateY(-1px);
}

/* --- کیف پول --- */

.ucstore .ucs-panel .divwithwallet {
    border: 1.5px dashed #bfe8d6;
    border-radius: 14px;
    padding: 12px 14px;
    background: #f2fbf7;
    font-size: 13px;
}

/* --- پیام‌ها --- */

.ucstore .showerrform,
.ucstore #pmucpage,
.ucstore .takhfifemalpm {
    text-align: center;
    margin: 8px 0;
}

.ucstore .showerrform ul {
    padding: 0;
    margin: 0;
    list-style: none;
}

.ucstore #pmucpage {
    color: #e05656;
    font-weight: 700;
    font-size: 13px;
    min-height: 20px;
}

/* لینک‌های روش‌های پرداخت (تتر/پی‌پال/وایز) */
.ucstore #imgtether,
.ucstore #imagepaypal,
.ucstore #imagewise {
    max-width: 100%;
    height: auto;
}

/* brهای سرگردانِ داخل باکس پرداخت چیدمان را به‌هم می‌ریزند؛
   فقط فرزندان مستقق (brهای داخل مودال‌ها دست‌نخورده می‌مانند) */
.ucstore .ucs-panel .diverbtn > br {
    display: none;
}

/* --- سایر روش‌های پرداخت: ردیف مرتب بعد از دکمه خرید --- */
.ucs-altmethods {
    margin: 20px auto 4px;
    text-align: center;
}

.ucs-altmethods__title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
    font-size: 12px;
    font-weight: 700;
    color: #8a95a8;
    white-space: nowrap;
}

.ucs-altmethods__title::before,
.ucs-altmethods__title::after {
    content: "";
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, rgba(150, 160, 180, 0), rgba(150, 160, 180, .4), rgba(150, 160, 180, 0));
}

.ucs-altmethods__row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
    gap: 10px;
}

a.ucs-altbtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 48px;
    padding: 8px 20px;
    background: #fff;
    border: 1.5px solid #e4e9f0;
    border-radius: 13px;
    box-shadow: 0 2px 8px rgba(16, 24, 40, .05);
    font-size: 13.5px;
    font-weight: 700;
    color: #43526a;
    cursor: pointer;
    transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}

a.ucs-altbtn:hover {
    transform: translateY(-2px);
    border-color: rgba(232, 155, 47, .6);
    box-shadow: 0 10px 22px rgba(232, 155, 47, .16);
    text-decoration: none;
}

a.ucs-altbtn:active { transform: translateY(0); }

/* لوگوهای تتر/پی‌پال/وایز: هم‌اندازه و مرتب داخل دکمه‌ها */
.ucs-altbtn .ucs-altimg {
    height: 30px !important;
    width: auto !important;
    max-width: 120px !important;
    margin: 0 !important;
    object-fit: contain;
    display: block;
}

/* ---------------- FAQ / SEO ---------------- */

.ucs-faq {
    max-width: 860px;
    margin: 0 auto;
    padding: 40px 20px 8px;
}

.ucs-acc {
    border: 1px solid var(--ucs-line);
    border-radius: 16px;
    background: rgba(255, 255, 255, .025);
    margin-bottom: 12px;
    overflow: hidden;
    transition: border-color .2s ease;
}

.ucs-acc[open] {
    border-color: rgba(245, 196, 81, .45);
}

.ucs-acc summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 15px 18px;
    font-size: 14.5px;
    font-weight: 700;
    color: var(--ucs-text);
    user-select: none;
}

.ucs-acc summary::-webkit-details-marker { display: none; }

.ucs-acc summary::after {
    content: "";
    width: 12px;
    height: 12px;
    flex: 0 0 auto;
    border-left: 2.5px solid var(--ucs-gold);
    border-bottom: 2.5px solid var(--ucs-gold);
    transform: rotate(-45deg);
    transition: transform .2s ease;
    margin-top: -3px;
}

.ucs-acc[open] summary::after {
    transform: rotate(135deg);
    margin-top: 5px;
}

.ucs-acc__body {
    padding: 2px 18px 16px;
    border-top: 1px solid var(--ucs-line);
}

.ucs-acc__body ul {
    margin: 10px 0 0;
    padding: 0 18px 0 0;
    list-style: none;
}

.ucs-acc__body li {
    color: var(--ucs-mut);
    font-size: 13px;
    font-weight: 300;
    text-align: justify;
    margin-bottom: 7px;
    position: relative;
    padding-right: 14px;
}

.ucs-acc__body li::before {
    content: "";
    position: absolute;
    right: 0;
    top: 11px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(245, 196, 81, .55);
}

.ucs-acc__body li ul { margin-top: 6px; }

.ucs-acc__body h2,
.ucs-acc__body h3 {
    font-size: 15.5px;
    font-weight: 800;
    color: var(--ucs-text);
    margin: 14px 0 4px;
}

.ucs-seo-intro {
    text-align: center;
    color: var(--ucs-mut);
    font-size: 13.5px;
    font-weight: 300;
    max-width: 680px;
    margin: 0 auto 6px;
}

/* ---------------- GAMES NAV ---------------- */

.ucs-games {
    max-width: 1080px;
    margin: 0 auto;
    padding: 34px 20px 50px;
}

.ucs-games__title {
    text-align: center;
    font-size: 15px;
    font-weight: 700;
    color: var(--ucs-mut);
    margin-bottom: 14px;
}

.ucs-games .icon-container { padding: 0; }

/* ---------------- LIGHT ZONE OVERRIDES (بخش روشن پایین صفحه) ---------------- */

.ucstore .ucs-light .ucs-sec-head h2 {
    color: #1d2a3a;
}

.ucstore .ucs-light .ucs-sec-head p,
.ucstore .ucs-light .ucs-seo-intro {
    color: #71809a;
}

.ucstore .ucs-light .ucs-sec-head__kicker {
    border-bottom-color: rgba(232, 155, 47, .5);
}

.ucstore .ucs-light .ucs-acc {
    background: #fff;
    border: 1px solid #e8ecf2;
    box-shadow: 0 3px 14px rgba(16, 24, 40, .05);
}

.ucstore .ucs-light .ucs-acc[open] {
    border-color: rgba(232, 155, 47, .5);
    box-shadow: 0 8px 26px rgba(232, 155, 47, .12);
}

.ucstore .ucs-light .ucs-acc summary {
    color: #1d2a3a;
}

.ucstore .ucs-light .ucs-acc__body {
    border-top-color: #eef1f6;
}

.ucstore .ucs-light .ucs-acc__body li {
    color: #5d6a7e;
}

.ucstore .ucs-light .ucs-acc__body li::before {
    background: rgba(232, 155, 47, .65);
}

.ucstore .ucs-light .ucs-acc__body h2,
.ucstore .ucs-light .ucs-acc__body h3 {
    color: #1d2a3a;
}

/* پنل پرداخت روی زمینه روشن: با قاب و سایه متمایزتر */
.ucstore .ucs-light .ucs-panel {
    border: 1px solid #eceef3;
    background:
            linear-gradient(180deg, #fffdf7 0%, #ffffff 24%);
}

/* کارت‌های دسته‌های دیگر روی زمینه روشن */
.ucstore .ucs-light .ucs-games__title {
    color: #43526a;
}

.ucstore .ucs-light .ucs-games .icon-box {
    background: #fff;
    border: 1px solid #eceef3;
    box-shadow: 0 4px 16px rgba(16, 24, 40, .07);
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.ucstore .ucs-light .ucs-games .icon-box:hover {
    transform: translateY(-4px);
    border-color: rgba(232, 155, 47, .55);
    box-shadow: 0 14px 30px rgba(232, 155, 47, .16);
}

/* ---------------- DOCK BAR ---------------- */

.ucs-dockbar {
    position: fixed;
    bottom: calc(14px + env(safe-area-inset-bottom));
    left: 50%;
    z-index: 640;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    flex-wrap: wrap;
    max-width: calc(100vw - 24px);
    padding: 10px 18px;
    border-radius: 999px;
    background: rgba(10, 15, 28, .94);
    border: 1px solid rgba(245, 196, 81, .4);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: 0 18px 50px rgba(3, 8, 18, .5), 0 0 0 6px rgba(255, 255, 255, .06);
    transform: translate(-50%, 150%);
    opacity: 0;
    visibility: hidden;
    transition: transform .34s cubic-bezier(.2, .9, .3, 1.25), opacity .25s ease, visibility .25s;
}

.ucs-dockbar.is-show {
    transform: translate(-50%, 0);
    opacity: 1;
    visibility: visible;
}

/* وقتی مودال پرداخت (کارت به کارت/تتر/...) باز است نوار جمع سفارش کنار برود */
.ucs-dockbar.ucs-hide {
    display: none;
}

.ucs-dockbar__total {
    display: flex;
    align-items: baseline;
    gap: 7px;
    color: var(--ucs-mut);
    font-size: 12.5px;
    font-weight: 500;
}

.ucs-dockbar__total b {
    font-size: 19px;
    font-weight: 800;
    color: var(--ucs-gold);
    font-variant-numeric: tabular-nums;
}

.ucs-dockbar__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--ucs-goldgrad);
    color: #4c2f05;
    font-size: 12px;
    font-weight: 800;
    vertical-align: middle;
    margin-right: 5px;
}

.ucs-dockbar__cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 26px;
    border-radius: 999px;
    background: var(--ucs-goldgrad);
    color: #40280a;
    font-size: 14px;
    font-weight: 800;
    cursor: pointer;
    border: 0;
    box-shadow: 0 10px 24px -8px rgba(232, 155, 47, .6);
    transition: transform .16s ease, filter .16s ease;
    text-decoration: none;
}

.ucs-dockbar__cta:hover {
    transform: translateY(-2px);
    filter: brightness(1.05);
    color: #40280a;
    text-decoration: none;
}

.ucs-dockbar__cta svg {
    width: 15px;
    height: 15px;
}

/* ---------------- ANIMATIONS / A11Y ---------------- */

.ucstore .ucs-rise {
    animation: ucsrise .5s ease both;
}

@keyframes ucsrise {
    from { opacity: 0; transform: translateY(14px); }
    to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .ucstore *, .ucs-dockbar { animation: none !important; transition: none !important; }
}

/* ---------------- RESPONSIVE ---------------- */

@media (max-width: 720px) {
    .ucs-hero { padding: 40px 16px 66px; }
    .ucs-steps { flex-wrap: wrap; }
    .ucs-step { flex: 1 1 44%; }
    .ucs-main, .ucs-checkout, .ucs-faq { padding-left: 14px; padding-right: 14px; }
    .ucstore .ucs-fade { height: 170px; margin-top: 26px; }
    .ucstore .ucs-light { padding-top: 20px; }
    .ucs-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .ucs-card { padding: 24px 10px 12px; border-radius: 15px; }
    .ucs-card__amount { font-size: 19px; }
    .ucs-card__price { font-size: 14.5px; }
    .ucs-coin { width: 48px; height: 48px; }
    .ucs-coin span { font-size: 13px; }
    .ucs-panel { padding: 18px 14px 16px; border-radius: 18px; }
    .ucs-dockbar { gap: 8px; padding: 8px 14px; }
    .ucs-dockbar__total b { font-size: 16px; }
    .ucs-dockbar__cta { padding: 10px 18px; font-size: 12.5px; }
    .ucs-dockbar__cta svg { width: 12px; height: 12px; }
}

@media (max-width: 380px) {
    .ucs-grid { grid-template-columns: 1fr; }
    .ucs-fcoin--2, .ucs-fcoin--4 { display: none; }
}

/* حالت انگلیسی (pubgen): چیدمان LTR */
html[dir="ltr"] .ucs-acc__body li { padding-right: 0; padding-left: 14px; }
html[dir="ltr"] .ucs-acc__body li::before { right: auto; left: 0; }
html[dir="ltr"] .ucs-acc__body ul { padding: 0 0 0 18px; }