/* =============================================
   PASHA TV - PREMIUM UI (V10.10 Omega Professional)
   ARCHITECTURE: FULL PANEL + DUAL RESPONSIVE ENGINE
   ============================================= */

/* ۱. بارگذاری فونت اختصاصی از هاست (حیاتی برای اپلیکیشن تلویزیون) */
@font-face {
    font-family: "Vazir";
    src: url("fonts/Vazir-Bold.woff2") format("woff2"),
        url("fonts/Vazirmatn-Bold.ttf") format("truetype");
    font-weight: 900;
    font-style: normal;
}

@font-face {
    font-family: "Vazir";
    src: url("fonts/Vazirmatn-Regular.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: "OunceNumeric";
    src: url("fonts/Inter-SemiBold.ttf") format("truetype");
    font-weight: 600;
    font-style: normal;
}
:root {

    /* =====================================
       THEME
    ===================================== */

    color-scheme: light !important;

    --primary:#FF5A1F;
    --primary-gradient:linear-gradient(135deg,#FF5A1F 0%,#FF8A5C 100%);
    --secondary:#00A699;

    --bg:#F0F2F5;
    --card-bg:#FFFFFF;

    --text-main:#1E293B;
    --text-muted:#64748B;

    --radius-xl:32px;
    --radius-lg:24px;
    --radius-md:16px;

    --shadow-premium:0 20px 50px rgba(0,0,0,.05);
    --glass:rgba(255,255,255,.7);



    /* =========================================================
       GLOBAL SILVER COLORS
       رنگ‌های پایه اسلاید قیمت
    ========================================================= */

    /* قیمت شمش‌ها */
    --silver-price-color:#111111;

    /* ساچمه 999.9 */
    --silver-999-color:#808080;

    /* ساچمه 995 */
    --silver-995-color:#808080;

    /* انس جهانی */
    --silver-ounce-color:#808080;

    /* علامت دلار انس */
    --silver-dollar-color:#909090;

    /* ساعت */
    --silver-time-color:#111111;

    /* تاریخ */
    --silver-date-color:#111111;



    /* =========================================================
       GLOBAL SILVER FONT FAMILIES
    ========================================================= */

    /* قیمت شمش‌ها */
    --silver-price-family:"Vazir", system-ui, sans-serif;

    /* ساچمه 999.9 */
    --silver-999-family:"Vazir", system-ui, sans-serif;

    /* ساچمه 995 */
    --silver-995-family:"Vazir", system-ui, sans-serif;

    /*
       فونت عددی انس جهانی

       اگر OunceNumeric را با @font-face تعریف کرده باشی،
       اولین انتخاب همین فونت خواهد بود.
    */
    --silver-ounce-family:"OunceNumeric", "Roboto Mono", "Consolas", monospace;

    /* علامت دلار */
	--silver-dollar-family:Arial, Helvetica, sans-serif;
    /* ساعت */
    --silver-time-family:"Vazir", system-ui, sans-serif;

    /* تاریخ */
    --silver-date-family:"Vazir", system-ui, sans-serif;



    /* =========================================================
       GLOBAL SILVER FONT WEIGHTS
    ========================================================= */

    /* شمش‌ها */
    --silver-price-weight:600;

    /* ساچمه 999.9 */
    --silver-999-weight:600;

    /* ساچمه 995 */
    --silver-995-weight:600;

    /* انس */
    --silver-ounce-weight:600;

    /* دلار */
    --silver-dollar-weight:500;

    /* ساعت */
    --silver-time-weight:900;

    /* تاریخ */
    --silver-date-weight:900;



    /* =========================================================
       GLOBAL OUNCE TYPOGRAPHY
    ========================================================= */

    /* فاصله حروف / اعداد انس */
    --silver-ounce-letter-spacing:0.5px;

    /* سایز $ نسبت به عدد انس */
    --silver-dollar-size:0.9em;

    /* فاصله $ از عدد */
    --silver-dollar-margin-left:clamp(1px, 0.15vw, 4px);



    /* =========================================================
       PANEL POSITIONS
    ========================================================= */


    /* =====================================
       Shot 999.9 - SELL ONLY
    ===================================== */

    --silver-999-sell-top:5.3%;
    --silver-999-sell-right:70%;
    --silver-999-sell-width:35%;
/* =====================================
   Shot 999.9 - BUY
===================================== */

--silver-999-buy-top:5.3%;
--silver-999-buy-right:76.5%;
--silver-999-buy-width:35%;

    /* =====================================
       Shot 995 - SELL ONLY
    ===================================== */

    --silver-995-sell-top:8.6%;
    --silver-995-sell-right:70%;
    --silver-995-sell-width:35%;

/* =====================================
   Shot 995 - BUY
===================================== */

--silver-995-buy-top:8.6%;
--silver-995-buy-right:76.5%;
--silver-995-buy-width:35%;

    /* =====================================
       Bars SELL
    ===================================== */

    /* 5g */

    --silver-bar5-sell-top:84.3%;
    --silver-bar5-sell-right:21.5%;
    --silver-bar5-sell-width:33%;


    /* 10g */

    --silver-bar10-sell-top:76%;
    --silver-bar10-sell-right:21.5%;
    --silver-bar10-sell-width:33%;


    /* 20g */

    --silver-bar20-sell-top:68%;
    --silver-bar20-sell-right:21.5%;
    --silver-bar20-sell-width:33%;


    /* 50g */

    --silver-bar50-sell-top:60%;
    --silver-bar50-sell-right:21.5%;
    --silver-bar50-sell-width:33%;


    /* 100g */

    --silver-bar100-sell-top:52%;
    --silver-bar100-sell-right:21.5%;
    --silver-bar100-sell-width:33%;


    /* 250g */

    --silver-bar250-sell-top:43.5%;
    --silver-bar250-sell-right:21.5%;
    --silver-bar250-sell-width:33%;


    /* 500g */

    --silver-bar500-sell-top:35.7%;
    --silver-bar500-sell-right:21.5%;
    --silver-bar500-sell-width:33%;


    /* 1000g */

    --silver-bar1000-sell-top:27.6%;
    --silver-bar1000-sell-right:21.5%;
    --silver-bar1000-sell-width:33%;



    /* =====================================
       Bars BUY
    ===================================== */

    /* 5g */

    --silver-bar5-buy-top:84.3%;
    --silver-bar5-buy-right:53.8%;
    --silver-bar5-buy-width:33%;


    /* 10g */

    --silver-bar10-buy-top:76%;
    --silver-bar10-buy-right:53.8%;
    --silver-bar10-buy-width:33%;


    /* 20g */

    --silver-bar20-buy-top:68%;
    --silver-bar20-buy-right:53.8%;
    --silver-bar20-buy-width:33%;


    /* 50g */

    --silver-bar50-buy-top:60%;
    --silver-bar50-buy-right:53.8%;
    --silver-bar50-buy-width:33%;


    /* 100g */

    --silver-bar100-buy-top:52%;
    --silver-bar100-buy-right:53.8%;
    --silver-bar100-buy-width:33%;


    /* 250g */

    --silver-bar250-buy-top:43.5%;
    --silver-bar250-buy-right:53.8%;
    --silver-bar250-buy-width:33%;


    /* 500g */

    --silver-bar500-buy-top:35.7%;
    --silver-bar500-buy-right:53.8%;
    --silver-bar500-buy-width:33%;


    /* 1000g */

    --silver-bar1000-buy-top:27.6%;
    --silver-bar1000-buy-right:53.8%;
    --silver-bar1000-buy-width:33%;



    /* =========================================================
       PANEL OUNCE / TIME / DATE POSITIONS
    ========================================================= */

    /* Ounce */

    --silver-ounce-top:7.1%;
    --silver-ounce-right:4.3%;
    --silver-ounce-width:20%;


    /* Time */

    --silver-time-top:50.5%;
    --silver-time-right:69%;
    --silver-time-width:33%;


    /* Date */

    --silver-date-top:50%;
    --silver-date-right:76.8%;
    --silver-date-width:33%;



    /* =========================================================
       PANEL FONT SIZES
    ========================================================= */

    /* ساچمه 999.9 + 995 */
    --silver-shot-font:9px;

    /* شمش‌ها */
    --silver-bar-font:17px;

    /* Generic price - compatibility */
    --silver-price-font:17px;

    /* انس */
    --silver-ounce-font:8px;

    /* ساعت */
    --silver-time-font:9.5px;

    /* تاریخ */
    --silver-date-font:11.5px;



    /* =========================================================
       PANEL SEPARATOR
    ========================================================= */

    /*
       جداکننده عمومی قیمت‌های اصلی
    */

    --silver-sep-font:10px;
    --silver-sep-weight:700;
    --silver-sep-margin:0 1px;
    --silver-sep-color:#ff7a80;
    --silver-sep-offset:2px;


    /*
       جداکننده مخصوص سه المان بالایی:
       999.9
       995
       Ounce
    */

    --silver-top-sep-color:#808080;

    --silver-top-sep-font:17px;

    --silver-top-sep-weight:600;

    --silver-top-sep-margin:0 1px;

    --silver-top-sep-offset:0px;



    /* =========================================================
       TV POSITIONS
    ========================================================= */


    /* =====================================
       Shot 999.9 - SELL ONLY
    ===================================== */

    --tv-999-sell-top:5.5%;
    --tv-999-sell-right:82.9%;
    --tv-999-sell-width:10%;

/* =====================================
   Shot 999.9 - BUY
===================================== */

	--tv-999-buy-top:5.5%;
	--tv-999-buy-right:89%;
	--tv-999-buy-width:10%;
    /* =====================================
       Shot 995 - SELL ONLY
    ===================================== */

    --tv-995-sell-top:8.7%;
    --tv-995-sell-right:82.9%;
    --tv-995-sell-width:10%;

/* =====================================
   Shot 995 - BUY
===================================== */

--tv-995-buy-top:8.7%;
--tv-995-buy-right:89%;
--tv-995-buy-width:10%;

    /* =====================================
       Bars SELL
    ===================================== */

    /* 5g */

    --tv-bar5-sell-top:84%;
    --tv-bar5-sell-right:21.5%;
    --tv-bar5-sell-width:33%;


    /* 10g */

    --tv-bar10-sell-top:75.8%;
    --tv-bar10-sell-right:21.5%;
    --tv-bar10-sell-width:33%;


    /* 20g */

    --tv-bar20-sell-top:67.8%;
    --tv-bar20-sell-right:21.5%;
    --tv-bar20-sell-width:33%;


    /* 50g */

    --tv-bar50-sell-top:59.5%;
    --tv-bar50-sell-right:21.5%;
    --tv-bar50-sell-width:33%;


    /* 100g */

    --tv-bar100-sell-top:51.5%;
    --tv-bar100-sell-right:21.5%;
    --tv-bar100-sell-width:33%;


    /* 250g */

    --tv-bar250-sell-top:43.5%;
    --tv-bar250-sell-right:21.5%;
    --tv-bar250-sell-width:33%;


    /* 500g */

    --tv-bar500-sell-top:35.5%;
    --tv-bar500-sell-right:21.5%;
    --tv-bar500-sell-width:33%;


    /* 1000g */

    --tv-bar1000-sell-top:27.5%;
    --tv-bar1000-sell-right:21.5%;
    --tv-bar1000-sell-width:33%;



    /* =====================================
       Bars BUY
    ===================================== */

    /* 5g */

    --tv-bar5-buy-top:84%;
    --tv-bar5-buy-right:54.5%;
    --tv-bar5-buy-width:33%;


    /* 10g */

    --tv-bar10-buy-top:75.8%;
    --tv-bar10-buy-right:54.5%;
    --tv-bar10-buy-width:33%;


    /* 20g */

    --tv-bar20-buy-top:67.8%;
    --tv-bar20-buy-right:54.5%;
    --tv-bar20-buy-width:33%;


    /* 50g */

    --tv-bar50-buy-top:59.5%;
    --tv-bar50-buy-right:54.5%;
    --tv-bar50-buy-width:33%;


    /* 100g */

    --tv-bar100-buy-top:51.5%;
    --tv-bar100-buy-right:54.5%;
    --tv-bar100-buy-width:33%;


    /* 250g */

    --tv-bar250-buy-top:43.5%;
    --tv-bar250-buy-right:54.5%;
    --tv-bar250-buy-width:33%;


    /* 500g */

    --tv-bar500-buy-top:35.5%;
    --tv-bar500-buy-right:54.5%;
    --tv-bar500-buy-width:33%;


    /* 1000g */

    --tv-bar1000-buy-top:27.5%;
    --tv-bar1000-buy-right:54.5%;
    --tv-bar1000-buy-width:33%;



    /* =========================================================
       TV OUNCE
    ========================================================= */

    --tv-ounce-top:6.95%;
    --tv-ounce-right:4.6%;
    --tv-ounce-width:20%;



    /* =========================================================
       TV TIME
    ========================================================= */

    --tv-time-top:50%;
    --tv-time-right:78.2%;
    --tv-time-width:15%;



    /* =========================================================
       TV DATE
    ========================================================= */

    --tv-date-top:50%;
    --tv-date-right:80.6%;
    --tv-date-width:26%;



    /* =========================================================
       TV FONT SIZES
    ========================================================= */

    /* ساچمه */
    --tv-shot-font:16px;

    /* شمش */
    --tv-bar-font:30px;

    /* Generic - compatibility */
    --tv-price-font:30px;

    /* انس */
    --tv-ounce-font:16px;

    /* ساعت */
    --tv-time-font:18px;

    /* تاریخ */
    --tv-date-font:19px;



    /* =========================================================
       TV SEPARATOR - GENERAL
    ========================================================= */

    --tv-sep-font:15px;

    --tv-sep-weight:700;

    --tv-sep-margin:0 1px;

    --tv-sep-color:#FE7F2D;

    --tv-sep-offset:5px;



    /* =========================================================
       TV TOP SEPARATOR
       999.9 / 995 / OUNCE
    ========================================================= */

    --tv-top-sep-color:#FE7F2D;

    --tv-top-sep-font:15px;

    --tv-top-sep-weight:600;

    --tv-top-sep-margin:0 1px;

    --tv-top-sep-offset:5px;



    /* =========================================================
       TV TOP ELEMENT COLORS
    ========================================================= */

    /*
       فعلاً به رنگ‌های global متصل هستند.
       اگر بعداً بخواهی TV با Panel متفاوت باشد،
       فقط این سه مقدار را تغییر بده.
    */

    --tv-999-color:var(--silver-999-color);

    --tv-995-color:var(--silver-995-color);

    --tv-ounce-color:var(--silver-ounce-color);

    --tv-dollar-color:var(--silver-dollar-color);



    /* =========================================================
       TV TOP FONT FAMILIES
    ========================================================= */

    --tv-999-family:var(--silver-999-family);

    --tv-995-family:var(--silver-995-family);

    --tv-ounce-family:var(--silver-ounce-family);

    --tv-dollar-family:var(--silver-dollar-family);



    /* =========================================================
       TV TOP FONT WEIGHTS
    ========================================================= */

    --tv-999-weight:var(--silver-999-weight);

    --tv-995-weight:var(--silver-995-weight);

    --tv-ounce-weight:var(--silver-ounce-weight);

    --tv-dollar-weight:var(--silver-dollar-weight);

}



/* =========================================================
   MOBILE - PANEL ONLY
========================================================= */
@media (max-width:768px){

    :root{

        /* =====================================
           MOBILE - SHOT 999.9 SELL
        ===================================== */

        --silver-999-sell-top:4.8%;
        --silver-999-sell-right:76.5%;
        --silver-999-sell-width:35%;


        /* =====================================
           MOBILE - SHOT 999.9 BUY
        ===================================== */

        --silver-999-buy-top:4.8%;
        --silver-999-buy-right:70%;
        --silver-999-buy-width:35%;


        /* =====================================
           MOBILE - SHOT 995 SELL
        ===================================== */

        --silver-995-sell-top:8.1%;
        --silver-995-sell-right:70%;
        --silver-995-sell-width:35%;


        /* =====================================
           MOBILE - SHOT 995 BUY
        ===================================== */

        --silver-995-buy-top:8.1%;
        --silver-995-buy-right:76.5%;
        --silver-995-buy-width:35%;


        /* =====================================
           MOBILE - OUNCE POSITION
        ===================================== */

        --silver-ounce-top:6.8%;
        --silver-ounce-right:5.3%;
        --silver-ounce-width:20%;


        /* =====================================
           MOBILE - OUNCE FONT
        ===================================== */

        --silver-ounce-font:6px;


        /* =====================================
           MOBILE - OUNCE TYPOGRAPHY
        ===================================== */

        --silver-ounce-letter-spacing:0.5px;

        --silver-dollar-size:0.9em;

        --silver-dollar-margin-left:clamp(
            1px,
            0.15vw,
            4px
        );


        /* =====================================
           MOBILE - OUNCE COLOR
        ===================================== */

        --silver-ounce-color:#808080;

        --silver-dollar-color:#909090;


        /* =====================================
           MOBILE - OUNCE FONT
        ===================================== */

        --silver-ounce-family:
            "OunceNumeric",
            "Roboto Mono",
            "Consolas",
            monospace;

        --silver-ounce-weight:600;

        --silver-dollar-family:
            Arial,
            Helvetica,
            sans-serif;

        --silver-dollar-weight:500;


        /* =====================================
           MOBILE FONT SIZES
        ===================================== */

        --silver-shot-font:5px;

        --silver-bar-font:8px;

        --silver-price-font:8px;

        --silver-time-font:6px;

        --silver-date-font:6px;


        /* =====================================
           MOBILE SEPARATOR
        ===================================== */

        --silver-sep-font:5px;
        --silver-sep-margin:0 0px;


        /* =====================================
           MOBILE TOP SEPARATOR
        ===================================== */

        --silver-top-sep-font:5px;
        --silver-top-sep-margin:0 0px;

    }

}
/* حذف ترنزیشن برای سوئیچ آنی و اعمال فونت یکپارچه */
/* =============================================
   GLOBAL RESET
   ============================================= */

* {
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;

    /* فیدبک سریع UI */
    transition: all 0.15s ease !important;

    font-family: "Vazir", system-ui, Tahoma, sans-serif !important;

    /* جلوگیری از تغییر اجباری رنگ توسط سیستم‌عامل */
    forced-color-adjust: none !important;
}


/* =============================================
   BODY
   ============================================= */

body {
    margin: 0;

    font-family: "Vazir", system-ui, Tahoma, sans-serif;

    background-color: var(--bg) !important;
    color: var(--text-main) !important;

    direction: rtl;

    overflow-x: hidden;

    /* فضای پایین صفحه پنل */
    padding-bottom: 40px;
}


/* =============================================
   PREMIUM BUTTONS UI
   ============================================= */

.btn {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    gap: 10px;

    padding: 12px 24px;

    border-radius: 14px;

    font-weight: 800;

    cursor: pointer;

    border: none;

    font-family: inherit;

    box-shadow:
        0 4px 12px rgba(0, 0, 0, 0.08);

    position: relative;

    user-select: none;
}


/* =============================================
   BUTTON ACTIVE
   ============================================= */

.btn:active {

    transform: scale(0.95);

    filter: brightness(0.85);

    box-shadow:
        0 2px 6px rgba(0, 0, 0, 0.15);
}


/* =============================================
   PRIMARY BUTTON
   ============================================= */

.btn-primary {

    background:
        var(--primary-gradient) !important;

    color:
        #fff !important;

    box-shadow:
        0 8px 20px rgba(255, 90, 31, 0.25) !important;
}


.btn-primary:hover {

    transform:
        translateY(-3px);

    filter:
        brightness(1.05);
}


/* =============================================
   LOGOUT BUTTON
   ============================================= */

#logout-btn {

    background:
        #fff;

    border:
        1.5px solid #fee2e2;

    color:
        #e11d48;

    padding:
        8px 18px;

    font-size:
        0.85rem;
}


#logout-btn:hover {

    background:
        #e11d48;

    color:
        #fff;

    border-color:
        #e11d48;

    box-shadow:
        0 8px 20px rgba(225, 29, 72, 0.2);
}


/* =============================================
   SLIDESHOW START / STOP BUTTON
   ============================================= */

#slideshow-toggle-btn {

    background:
        #1e293b;

    color:
        #fff;

    width:
        90% !important;

    margin:
        10px auto;

    font-size:
        1.05rem;

    box-shadow:
        0 10px 25px rgba(30, 41, 59, 0.2);
}


#slideshow-toggle-btn:hover {

    background:
        #0f172a;

    transform:
        translateY(-3px);

    box-shadow:
        0 14px 30px rgba(30, 41, 59, 0.3);
}


/* =============================================
   GALLERY REMOVE BUTTON
   ============================================= */

.gallery-remove-btn {

    background:
        #fff1f2;

    color:
        #ef4444;

    border:
        1px solid #fecaca;

    padding:
        10px;

    border-radius:
        12px;

    font-weight:
        700;

    font-size:
        0.8rem;

    width:
        100%;

    cursor:
        pointer;
}


.gallery-remove-btn:hover {

    background:
        #ef4444;

    color:
        #fff;

    border-color:
        #ef4444;
}


/* =============================================
   DISABLED BUTTONS
   ============================================= */

.btn:disabled {

    opacity:
        0.55;

    cursor:
        not-allowed;

    transform:
        none !important;

    filter:
        none !important;

    box-shadow:
        none !important;
}


/* =============================================
   MOBILE
   ============================================= */

@media (max-width: 768px) {

    body {
        padding-bottom: 25px;
    }

    .btn {
        padding: 10px 18px;
        gap: 7px;
        border-radius: 12px;
    }

    #slideshow-toggle-btn {
        width: 100% !important;
        font-size: 0.95rem;
    }

    #logout-btn {
        padding: 7px 14px;
        font-size: 0.8rem;
    }

    .gallery-remove-btn {
        padding: 8px;
        font-size: 0.75rem;
    }
}
/* =============================================
   HEADER & LAYOUT
   ============================================= */

.header {
    padding: 15px 30px;

    background: var(--glass);

    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);

    border-bottom: 1px solid rgba(0, 0, 0, 0.05);

    position: sticky;
    top: 0;
    z-index: 1000;

    display: flex;
    justify-content: space-between;
    align-items: center;

    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.03);
}


/* =============================================
   HEADER LEFT / RIGHT
   ============================================= */

.header-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.header-right {
    display: flex;
    align-items: center;
    gap: 10px;
}


/* =============================================
   HEADER LOGO
   ============================================= */

/* لوگوی هدر پنل */
.logo {
    width: 52px;
    height: 52px;

    border-radius: 14px;

    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);

    /* نمایش کامل لوگو بدون کشیدگی */
    object-fit: contain !important;

    background: transparent;

    flex-shrink: 0;
}


/* =============================================
   LOGIN LOGO
   ============================================= */

/* لوگوی بزرگ صفحه ورود */
.login-logo {
    width: 120px;
    height: 120px;

    margin: 0 auto 20px;

    display: block;

    object-fit: contain !important;

    background: transparent;
}


/* =============================================
   HEADER TEXT
   ============================================= */

.header-title {
    font-size: 1.2rem;
    font-weight: 900;

    background: var(--primary-gradient);

    -webkit-background-clip: text;
    background-clip: text;

    -webkit-text-fill-color: transparent;

    line-height: 1.4;
}

.header-subtitle {
    margin-top: 2px;

    font-size: 0.8rem;
    font-weight: 600;

    color: var(--text-muted);
}


/* =============================================
   MAIN LAYOUT
   ============================================= */

.main-layout {
    display: grid;

    grid-template-columns: 1.2fr 0.8fr;

    gap: 25px;

    padding: 20px;

    max-width: 1600px;

    margin: 0 auto;

    align-items: start;
}


/* =============================================
   TABLET LAYOUT
   ============================================= */

@media (max-width: 1024px) {

    .main-layout {
        grid-template-columns: 1fr;
    }
}


/* =============================================
   CARD
   ============================================= */

.card {
    background: var(--card-bg) !important;

    border-radius: var(--radius-lg);

    padding: 25px;

    box-shadow: var(--shadow-premium);

    border: 1px solid rgba(255, 255, 255, 1);

    min-width: 0;
}


/* =============================================
   CARD HEADER
   ============================================= */

.card-header {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 15px;

    margin-bottom: 18px;
}

.card-header h2,
.card-header h3 {
    margin: 0;

    color: var(--text-main);

    font-weight: 900;
}


/* =============================================
   SLIDESHOW CONTAINER
   ============================================= */

.slideshow-container {
    width: 100%;

    position: relative;

    min-width: 0;
}


/* =============================================
   SLIDESHOW SCREEN
   ANTI-FLICKER & SMART CONTAINER
   ============================================= */

.slideshow-screen {
    position: relative;

    width: 100%;

    aspect-ratio: 16 / 9;

    background: #000 !important;

    border-radius: var(--radius-md);

    overflow: hidden;

    display: flex;

    align-items: center;
    justify-content: center;

    /*
       کادر مرجع برای موقعیت‌دهی تمام عناصر
       اسلاید قیمت
    */
    container-type: inline-size;

    isolation: isolate;
}


/* =============================================
   ADMIN PREVIEW SCREEN
   ============================================= */

.card-slideshow .slideshow-screen {
    background-image: none !important;

    border: 1px solid #e2e8f0;
}


/* =============================================
   SLIDESHOW MEDIA
   ============================================= */

.slideshow-screen img,
.slideshow-screen video {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;

    display: none;

    z-index: 50;
}


/* =============================================
   SILVER SLIDE
   ============================================= */

.slideshow-screen .silver-slide {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    z-index: 40;
}


/* =============================================
   HIDDEN
   ============================================= */

.hidden {
    display: none !important;
}


/* =============================================
   SLIDESHOW FOOTER CONTROLS
   ============================================= */

.slideshow-footer-controls {
    display: flex;

    justify-content: center;
    align-items: center;

    padding: 15px 0;

    background: #f8fafc;

    border-bottom-left-radius: var(--radius-md);
    border-bottom-right-radius: var(--radius-md);

    border: 1px solid #e2e8f0;
    border-top: none;

    margin-top: -2px;
}


/* =============================================
   MOBILE / SMALL SCREEN
   ============================================= */

@media (max-width: 768px) {

    .header {
        padding: 10px 15px;
    }

    .logo {
        width: 44px;
        height: 44px;

        border-radius: 11px;
    }

    .header-title {
        font-size: 1rem;
    }

    .header-subtitle {
        font-size: 0.72rem;
    }

    .main-layout {
        padding: 12px;

        gap: 15px;
    }

    .card {
        padding: 15px;

        border-radius: var(--radius-md);
    }

    .card-header {
        gap: 10px;

        margin-bottom: 14px;
    }

    .card-header h2 {
        font-size: 1.05rem;
    }

    .card-header h3 {
        font-size: 1rem;
    }

    .slideshow-footer-controls {
        padding: 10px 0;
    }
}
/* =============================================
   SILVER OVERLAY (RESPONSIVE)
   ============================================= */

.silver-slide {

    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    display: flex;

    z-index: 100;

    pointer-events: none;

    background: url("silver-tpl.png") center / cover no-repeat;
}
.silver-slide:not(.hidden) {
    display: flex;
}

.silver-slide.hidden {
    display: none !important;
}


/* =============================================
   SILVER LAYER
   ============================================= */

.silver-layer {

    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;
}


/* =============================================
   PRICE VALUES - BASE
   ============================================= */

.silver-val {
    position: absolute;

    display: flex;
    align-items: center;
    justify-content: center;

    font-weight: var(--silver-price-weight);
    font-family: var(--silver-price-family) !important;
    color: var(--silver-price-color) !important;

    text-align: center;
    font-size: var(--silver-price-font);

    line-height: 1;

    direction: ltr !important;
    unicode-bidi: isolate;

    white-space: nowrap;
}
/* =============================================
   SHOT 999.9
============================================= */

.silver-val.silver-999-sell {
    color: var(--silver-999-color) !important;
    font-family: var(--silver-999-family) !important;
    font-weight: var(--silver-999-weight) !important;
}


/* =============================================
   SHOT 995
============================================= */

.silver-val.silver-995-sell {
    color: var(--silver-995-color) !important;
    font-family: var(--silver-995-family) !important;
    font-weight: var(--silver-995-weight) !important;
}


/* =============================================
   OUNCE - FULL CONTROL
============================================= */

/* خود container انس */
.silver-val.silver-ounce {
    color: var(--silver-ounce-color) !important;

    font-family: var(--silver-ounce-family) !important;
    font-weight: var(--silver-ounce-weight) !important;

    font-size: var(--silver-ounce-font);

    letter-spacing: var(--silver-ounce-letter-spacing);

    direction: ltr !important;
    unicode-bidi: isolate;

    white-space: nowrap;
}


/* عدد انس */
.silver-val.silver-ounce .ounce-number,
.silver-val.silver-ounce .ounce-number span {
    color: var(--silver-ounce-color) !important;

    font-family: var(--silver-ounce-family) !important;
    font-weight: var(--silver-ounce-weight) !important;
}


/* علامت هزارگان داخل عدد انس */
.silver-val.silver-ounce .ounce-number .big-sep {
    color: #FE7F2D !important;

    font-family: var(--silver-ounce-family) !important;
    font-weight: var(--silver-ounce-weight) !important;
}

/* نقطه اعشار انس */
.silver-val.silver-ounce .ounce-number .big-dot {
    color: #FE7F2D !important;

    font-family: var(--silver-ounce-family) !important;
    font-weight: var(--silver-ounce-weight) !important;
}

/* دلار */
.silver-val.silver-ounce .dollar-sign {
    color: var(--silver-dollar-color) !important;

    font-family: var(--silver-dollar-family) !important;
    font-weight: var(--silver-dollar-weight) !important;

    font-size: var(--silver-dollar-size) !important;

    margin-left: var(--silver-dollar-margin-left);

    direction: ltr !important;
    unicode-bidi: isolate;
}


/* =============================================
   SHOT VALUES
   ============================================= */

.silver-999-sell {

    top: var(--silver-999-sell-top);
    right: var(--silver-999-sell-right);
    width: var(--silver-999-sell-width);

    font-size: var(--silver-shot-font);
}
/* =============================================
   SHOT 999.9 BUY
============================================= */

.silver-999-buy {

    position: absolute;

    top: var(--silver-999-buy-top);
    right: var(--silver-999-buy-right);

    width: var(--silver-999-buy-width);

    font-size: var(--silver-shot-font);
}
.silver-995-sell {

    top: var(--silver-995-sell-top);
    right: var(--silver-995-sell-right);
    width: var(--silver-995-sell-width);

    font-size: var(--silver-shot-font);
}
/* =============================================
   SHOT 995 BUY
============================================= */

.silver-995-buy {

    position: absolute;

    top: var(--silver-995-buy-top);
    right: var(--silver-995-buy-right);

    width: var(--silver-995-buy-width);

    font-size: var(--silver-shot-font);
}

/* =============================================
   BAR SELL VALUES
   ============================================= */

.silver-bar5-sell {

    top: var(--silver-bar5-sell-top);
    right: var(--silver-bar5-sell-right);
    width: var(--silver-bar5-sell-width);

    font-size: var(--silver-bar-font);
}

.silver-bar10-sell {

    top: var(--silver-bar10-sell-top);
    right: var(--silver-bar10-sell-right);
    width: var(--silver-bar10-sell-width);

    font-size: var(--silver-bar-font);
}

.silver-bar20-sell {

    top: var(--silver-bar20-sell-top);
    right: var(--silver-bar20-sell-right);
    width: var(--silver-bar20-sell-width);

    font-size: var(--silver-bar-font);
}

.silver-bar50-sell {

    top: var(--silver-bar50-sell-top);
    right: var(--silver-bar50-sell-right);
    width: var(--silver-bar50-sell-width);

    font-size: var(--silver-bar-font);
}

.silver-bar100-sell {

    top: var(--silver-bar100-sell-top);
    right: var(--silver-bar100-sell-right);
    width: var(--silver-bar100-sell-width);

    font-size: var(--silver-bar-font);
}

.silver-bar250-sell {

    top: var(--silver-bar250-sell-top);
    right: var(--silver-bar250-sell-right);
    width: var(--silver-bar250-sell-width);

    font-size: var(--silver-bar-font);
}

.silver-bar500-sell {

    top: var(--silver-bar500-sell-top);
    right: var(--silver-bar500-sell-right);
    width: var(--silver-bar500-sell-width);

    font-size: var(--silver-bar-font);
}

.silver-bar1000-sell {

    top: var(--silver-bar1000-sell-top);
    right: var(--silver-bar1000-sell-right);
    width: var(--silver-bar1000-sell-width);

    font-size: var(--silver-bar-font);
}


/* =============================================
   BAR BUY VALUES
   ============================================= */

.silver-bar5-buy {

    top: var(--silver-bar5-buy-top);
    right: var(--silver-bar5-buy-right);
    width: var(--silver-bar5-buy-width);

    font-size: var(--silver-bar-font);
}

.silver-bar10-buy {

    top: var(--silver-bar10-buy-top);
    right: var(--silver-bar10-buy-right);
    width: var(--silver-bar10-buy-width);

    font-size: var(--silver-bar-font);
}

.silver-bar20-buy {

    top: var(--silver-bar20-buy-top);
    right: var(--silver-bar20-buy-right);
    width: var(--silver-bar20-buy-width);

    font-size: var(--silver-bar-font);
}

.silver-bar50-buy {

    top: var(--silver-bar50-buy-top);
    right: var(--silver-bar50-buy-right);
    width: var(--silver-bar50-buy-width);

    font-size: var(--silver-bar-font);
}

.silver-bar100-buy {

    top: var(--silver-bar100-buy-top);
    right: var(--silver-bar100-buy-right);
    width: var(--silver-bar100-buy-width);

    font-size: var(--silver-bar-font);
}

.silver-bar250-buy {

    top: var(--silver-bar250-buy-top);
    right: var(--silver-bar250-buy-right);
    width: var(--silver-bar250-buy-width);

    font-size: var(--silver-bar-font);
}

.silver-bar500-buy {
    position: absolute;

    top: var(--silver-bar500-buy-top);
    right: var(--silver-bar500-buy-right);

    width: var(--silver-bar500-buy-width);

    font-size: var(--silver-bar-font);
}
.silver-bar1000-buy {

    top: var(--silver-bar1000-buy-top);
    right: var(--silver-bar1000-buy-right);
    width: var(--silver-bar1000-buy-width);

    font-size: var(--silver-bar-font);
}


/* =============================================
   SEPARATOR
   ============================================= */

.big-sep {

    display: inline-block;

    margin: var(--silver-sep-margin);

    font-family: "Segoe UI", Arial, sans-serif !important;

    font-size: var(--silver-sep-font);

    font-weight: var(--silver-sep-weight);

    line-height: 1;

    vertical-align: middle;

    color: var(--silver-sep-color) !important;

    transform: translateY(var(--silver-sep-offset, 0px));
}


/* =============================================
   BLACK SEPARATOR
   ============================================= */

.big-sep.black-sep {
    color: #111 !important;
}


/* =============================================
   DECIMAL DOT
   ============================================= */

.big-dot {

    display: inline-block;

    font-family: "Segoe UI", Arial, sans-serif !important;

    font-size: 0.75em;

    font-weight: inherit;

    line-height: 1;

    vertical-align: middle;

    color: inherit !important;
}

.big-dot.black-dot {
    color: #111 !important;
}


/* =============================================
   PRICE HINT
   ============================================= */

.calc-hint .big-sep {

    font-family: "Vazir", sans-serif !important;

    font-size: 1em !important;

    font-weight: 900 !important;

    margin: 0 !important;

    color: inherit !important;

    vertical-align: middle;

    transform: none;
}

.calc-hint .big-dot {

    font-family: "Vazir", sans-serif !important;

    font-size: 1em !important;

    color: inherit !important;

    vertical-align: middle;
}


/* =============================================
   OUNCE
   ============================================= */

.silver-ounce {

    position: absolute;

    top: var(--silver-ounce-top);
    right: var(--silver-ounce-right);
    width: var(--silver-ounce-width);

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: var(--silver-ounce-font);
    font-weight: 600;

    color: #111 !important;

    text-align: center;

    direction: ltr !important;
    unicode-bidi: isolate;

    white-space: nowrap;

    line-height: 1;
}


/* =============================================
   DOLLAR
   ============================================= */

.dollar-sign {

    font-family: Arial, sans-serif !important;

    font-weight: 500 !important;

    font-size: 0.95em;

    margin-left: clamp(1px, 0.15vw, 4px);

    color: #111 !important;
}


/* =============================================
   TIME
   ============================================= */

.silver-time {

    position: absolute;

    top: var(--silver-time-top);
    right: var(--silver-time-right);
    width: var(--silver-time-width);

    display: flex;
    align-items: center;
    justify-content: center;

    text-align: center;

    font-weight: 900;

    color: #111 !important;

    font-size: var(--silver-time-font);

    direction: ltr !important;
    unicode-bidi: isolate;

    white-space: nowrap;

    line-height: 1;
}


/* =============================================
   DATE
   ============================================= */

.silver-date {

    position: absolute;

    top: var(--silver-date-top);
    right: var(--silver-date-right);
    width: var(--silver-date-width);

    display: flex;
    align-items: center;
    justify-content: center;

    text-align: center;

    font-weight: 900;

    color: #111 !important;

    font-size: var(--silver-date-font);

    letter-spacing: clamp(-1px, -0.05vw, 0px);

    direction: ltr !important;
    unicode-bidi: isolate;

    white-space: nowrap;

    line-height: 1;
}
/* =============================================
   MUSIC BAR (ایستا در انتهای صفحه)
   ============================================= */

.music-bar {
    position: relative;

    margin: 40px auto 20px;

    width: 95%;
    max-width: 1600px;

    background: rgba(30, 41, 59, 0.95) !important;

    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);

    border-radius: 24px;

    padding: 15px 25px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    z-index: 10;

    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);

    border: 1px solid rgba(255, 255, 255, 0.1);

    gap: 15px;

    color: #fff !important;
}


/* =============================================
   PLAYLIST CONTAINER
   ============================================= */

.playlist-container {
    flex: 1;

    display: flex;
    align-items: center;

    gap: 12px;

    overflow-x: auto;

    padding-bottom: 5px;
}


/* =============================================
   ADD MUSIC BUTTON
   ============================================= */

.music-add-btn,
.btn-music-add {
    background: var(--primary-gradient) !important;

    color: white !important;

    padding: 10px 18px !important;

    border-radius: 12px !important;

    font-weight: 900 !important;

    font-size: 0.85rem !important;

    white-space: nowrap !important;

    flex-shrink: 0 !important;

    box-shadow: 0 4px 15px rgba(255, 90, 31, 0.3) !important;

    display: inline-flex !important;

    align-items: center !important;
    justify-content: center !important;

    cursor: pointer !important;

    gap: 8px;
}


/* =============================================
   MUSIC PLAYLIST
   ============================================= */

.music-playlist,
#music-playlist {
    display: flex;

    gap: 8px;

    flex-wrap: nowrap;

    align-items: center;
}


/* =============================================
   MUSIC CHIP
   ============================================= */

.music-chip {
    padding: 8px 14px;

    background: rgba(255, 255, 255, 0.08) !important;

    border: 1px solid rgba(255, 255, 255, 0.05);

    border-radius: 12px;

    color: #e2e8f0 !important;

    font-size: 0.75rem;

    font-weight: 600;

    white-space: nowrap;

    display: flex;
    align-items: center;

    gap: 10px;
}

.music-chip.current {
    background: rgba(255, 90, 31, 0.15) !important;

    border-color: var(--primary);

    color: white !important;
}

.music-chip button {
    background: #ef4444 !important;

    color: white !important;

    border: none !important;

    width: 20px !important;
    height: 20px !important;

    border-radius: 6px !important;

    cursor: pointer !important;

    display: flex !important;

    align-items: center !important;
    justify-content: center !important;

    font-weight: bold !important;

    line-height: 1 !important;

    padding: 0 !important;
}


/* =============================================
   FORMS, INPUTS & GALLERY GRID (RESPONSIVE)
   ============================================= */

.form-row {
    margin-bottom: clamp(10px, 1.2vw, 20px);
}

.form-row label {
    display: block;

    margin-bottom: clamp(5px, .5vw, 10px);

    font-weight: 800;

    font-size: clamp(13px, .9vw, 18px);

    color: var(--text-main) !important;
}


/* =============================================
   INPUTS
   ============================================= */

.form-row input:not([type="checkbox"]),
.gallery-controls input[type="number"] {
    width: 100%;

    padding:
        clamp(10px, .8vw, 16px)
        clamp(14px, 1.2vw, 22px);

    border-radius: clamp(10px, 1vw, 18px);

    border: 2px solid #F1F5F9;

    background: #F8FAFC !important;

    color: var(--text-main) !important;

    font-size: clamp(14px, 1vw, 20px);

    font-weight: 700;

    outline: none;
}

.form-row input:not([type="checkbox"]):focus,
.gallery-controls input[type="number"]:focus {
    border-color: var(--primary);

    background: #fff !important;

    box-shadow: 0 0 0 3px rgba(255, 90, 31, 0.08);
}


/* =============================================
   CHECKBOX
   ============================================= */

.form-row input[type="checkbox"] {
    width: 18px;
    height: 18px;

    cursor: pointer;

    accent-color: var(--primary);
}


/* =============================================
   SELECT
   ============================================= */

select {
    width: 100%;

    padding:
        clamp(10px, .8vw, 16px)
        clamp(14px, 1.2vw, 22px);

    border-radius: clamp(10px, 1vw, 18px);

    border: 2px solid #F1F5F9;

    background: #F8FAFC !important;

    font-size: clamp(14px, .95vw, 18px);

    font-weight: 600;

    color: var(--text-main) !important;

    cursor: pointer;

    outline: none;

    appearance: none;
    -webkit-appearance: none;

    background-image:
        url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FF5A1F' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");

    background-repeat: no-repeat;

    background-position:
        left clamp(8px, .8vw, 15px) center;

    background-size:
        clamp(14px, 1vw, 18px);
}

select:focus {
    border-color: var(--primary);

    background-color: #fff !important;

    box-shadow: 0 0 0 3px rgba(255, 90, 31, 0.08);
}


/* =============================================
   CALC HINT
   ============================================= */

.calc-hint {
    margin-top: clamp(5px, .6vw, 10px);

    font-size: clamp(11px, .8vw, 15px);

    color: var(--primary);

    display: block;

    font-weight: 700;

    line-height: 1.5;
}


/* =============================================
   STATUS BUTTON
   ============================================= */

.status-btn {
    width: 100%;

    padding: clamp(12px, 1vw, 18px);

    border-radius: clamp(12px, 1vw, 20px);

    border: 2px solid transparent;

    font-size: clamp(14px, 1vw, 18px);

    font-weight: 800;

    color: #fff;
}

.status-btn.active {
    background: #10b981;

    box-shadow:
        0 .4vw 1vw rgba(16, 185, 129, .2);
}

.status-btn.inactive {
    background: #ef4444;

    box-shadow:
        0 .4vw 1vw rgba(239, 68, 68, .2);
}


/* =============================================
   GALLERY GRID - FIXED SIZE
   ============================================= */

.gallery-grid {
    display: grid;

    grid-template-columns:
        repeat(auto-fill, minmax(150px, 1fr));

    gap: 14px;

    margin-top: clamp(15px, 1.2vw, 25px);

    max-height: min(65vh, 700px);
    overflow-y: auto;

    padding: 14px;

    background: #f8fafc !important;

    border-radius: 18px;
    border: 1px solid #e2e8f0;
}


/* =============================================
   GALLERY ITEM
   ============================================= */

.gallery-item {
    background: #fff !important;

    border-radius: 14px;

    padding: 8px;

    border: 1px solid #e2e8f0;

    box-shadow: 0 4px 10px rgba(0, 0, 0, .05);

    display: flex;
    flex-direction: column;

    min-width: 0;
    overflow: hidden;
}


/* =============================================
   GALLERY THUMB - ALL MEDIA SAME SIZE
   ============================================= */

.gallery-thumb {
    position: relative;

    width: 100%;
    aspect-ratio: 16 / 9;

    overflow: hidden;

    border-radius: 10px;

    background: #000;

    margin-bottom: 8px;
}


/* عکس و ویدیو دقیقاً داخل همان کادر */
.gallery-thumb img,
.gallery-thumb video {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;
}


/* =============================================
   MOBILE GALLERY
   ============================================= */

@media (max-width: 768px) {

    .gallery-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 10px;
        padding: 10px;
    }

    .gallery-item {
        padding: 6px;
    }
}

/* =============================================
   GALLERY CONTROLS
   ============================================= */

.gallery-controls {
    display: flex;

    flex-direction: column;

    gap: clamp(6px, .6vw, 12px);

    margin-top: clamp(5px, .5vw, 10px);
}

.gallery-controls label {
    font-size: clamp(11px, .75vw, 14px);

    font-weight: 800;

    color: var(--text-muted) !important;
}

.gallery-controls input[type="number"] {
    padding:
        clamp(8px, .6vw, 12px)
        clamp(10px, .8vw, 14px);

    font-size: clamp(13px, .9vw, 18px);

    border: 2px solid #FF5A1F;

    border-radius: clamp(8px, .8vw, 14px);

    color: var(--primary) !important;

    text-align: center;

    background: #fff !important;

    font-weight: 800;
}


/* =============================================
   SHOT - SELL ONLY
   ============================================= */

/* 999.9 */

.silver-999-sell {
    position: absolute;

    top: var(--silver-999-sell-top);
    right: var(--silver-999-sell-right);

    width: var(--silver-999-sell-width);

    font-size: var(--silver-shot-font);
}


/* 995 */

.silver-995-sell {
    position: absolute;

    top: var(--silver-995-sell-top);
    right: var(--silver-995-sell-right);

    width: var(--silver-995-sell-width);

    font-size: var(--silver-shot-font);
}


/* =============================================
   BAR SELL
   ============================================= */

/* 5g */

.silver-bar5-sell {
    position: absolute;

    top: var(--silver-bar5-sell-top);
    right: var(--silver-bar5-sell-right);

    width: var(--silver-bar5-sell-width);

    font-size: var(--silver-bar-font);
}


/* 10g */

.silver-bar10-sell {
    position: absolute;

    top: var(--silver-bar10-sell-top);
    right: var(--silver-bar10-sell-right);

    width: var(--silver-bar10-sell-width);

    font-size: var(--silver-bar-font);
}


/* 20g */

.silver-bar20-sell {
    position: absolute;

    top: var(--silver-bar20-sell-top);
    right: var(--silver-bar20-sell-right);

    width: var(--silver-bar20-sell-width);

    font-size: var(--silver-bar-font);
}


/* 50g */

.silver-bar50-sell {
    position: absolute;

    top: var(--silver-bar50-sell-top);
    right: var(--silver-bar50-sell-right);

    width: var(--silver-bar50-sell-width);

    font-size: var(--silver-bar-font);
}


/* 100g */

.silver-bar100-sell {
    position: absolute;

    top: var(--silver-bar100-sell-top);
    right: var(--silver-bar100-sell-right);

    width: var(--silver-bar100-sell-width);

    font-size: var(--silver-bar-font);
}


/* 250g */

.silver-bar250-sell {
    position: absolute;

    top: var(--silver-bar250-sell-top);
    right: var(--silver-bar250-sell-right);

    width: var(--silver-bar250-sell-width);

    font-size: var(--silver-bar-font);
}


/* 500g */

.silver-bar500-sell {
    position: absolute;

    top: var(--silver-bar500-sell-top);
    right: var(--silver-bar500-sell-right);

    width: var(--silver-bar500-sell-width);

    font-size: var(--silver-bar-font);
}


/* 1000g */

.silver-bar1000-sell {
    position: absolute;

    top: var(--silver-bar1000-sell-top);
    right: var(--silver-bar1000-sell-right);

    width: var(--silver-bar1000-sell-width);

    font-size: var(--silver-bar-font);
}


/* =============================================
   BAR BUY
   ============================================= */

/* 5g */

.silver-bar5-buy {
    position: absolute;

    top: var(--silver-bar5-buy-top);
    right: var(--silver-bar5-buy-right);

    width: var(--silver-bar5-buy-width);

    font-size: var(--silver-bar-font);
}


/* 10g */

.silver-bar10-buy {
    position: absolute;

    top: var(--silver-bar10-buy-top);
    right: var(--silver-bar10-buy-right);

    width: var(--silver-bar10-buy-width);

    font-size: var(--silver-bar-font);
}


/* 20g */

.silver-bar20-buy {
    position: absolute;

    top: var(--silver-bar20-buy-top);
    right: var(--silver-bar20-buy-right);

    width: var(--silver-bar20-buy-width);

    font-size: var(--silver-bar-font);
}


/* 50g */

.silver-bar50-buy {
    position: absolute;

    top: var(--silver-bar50-buy-top);
    right: var(--silver-bar50-buy-right);

    width: var(--silver-bar50-buy-width);

    font-size: var(--silver-bar-font);
}


/* 100g */

.silver-bar100-buy {
    position: absolute;

    top: var(--silver-bar100-buy-top);
    right: var(--silver-bar100-buy-right);

    width: var(--silver-bar100-buy-width);

    font-size: var(--silver-bar-font);
}


/* 250g */

.silver-bar250-buy {
    position: absolute;

    top: var(--silver-bar250-buy-top);
    right: var(--silver-bar250-buy-right);

    width: var(--silver-bar250-buy-width);

    font-size: var(--silver-bar-font);
}


/* 500g */

.silver-bar500-buy {
    position: absolute;

    top: var(--silver-bar500-buy-top);
    right: var(--silver-bar500-buy-right);

    width: var(--silver-bar500-buy-width);

    font-size: var(--silver-bar-font);
}


/* 1000g */

.silver-bar1000-buy {
    position: absolute;

    top: var(--silver-bar1000-buy-top);
    right: var(--silver-bar1000-buy-right);

    width: var(--silver-bar1000-buy-width);

    font-size: var(--silver-bar-font);
}
/* =============================================
   TV VIEW
   ============================================= */

[data-view="tv"] body {
    margin: 0;
    padding: 0;

    overflow: hidden;

    background: #000 !important;
}


/* =============================================
   Hide Admin UI
   ============================================= */

[data-view="tv"] .header,
[data-view="tv"] .card-prizes,
[data-view="tv"] .music-bar,
[data-view="tv"] .slideshow-footer-controls {
    display: none !important;
}


/* =============================================
   TV Layout
   ============================================= */

[data-view="tv"] .main-layout,
[data-view="tv"] .card-slideshow {
    width: 100%;
    height: 100dvh;

    margin: 0;
    padding: 0;

    max-width: none;

    border: none;
    border-radius: 0;

    background: #000;
}


/* =============================================
   Slideshow
   ============================================= */

[data-view="tv"] .slideshow-screen {
    position: relative;

    width: 100%;
    height: 100%;

    overflow: hidden;

    border-radius: 0;

    background: #000 !important;

    container-type: inline-size;
}


/* =============================================
   Silver Slide
   ============================================= */

[data-view="tv"] .silver-slide {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    background:
        url("silver-tpl.png")
        center / cover
        no-repeat;

    z-index: 100;
}

[data-view="tv"] .silver-layer {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;
}


/* =============================================
   Price Font - General
   ============================================= */

[data-view="tv"] .silver-val {
    font-size: var(--tv-price-font) !important;

    font-weight: 900;

    color: #111 !important;

    line-height: 1;

    white-space: nowrap;

    direction: ltr !important;

    text-align: center;

    display: flex;

    align-items: center;
    justify-content: center;
}


/* =============================================
   Shot Font
   999.9 + 995 = SELL ONLY
   ============================================= */

[data-view="tv"] .silver-999-sell,
[data-view="tv"] .silver-995-sell {
    font-size: var(--tv-shot-font) !important;
}

/* =============================================
   SHOT FONT
   999.9 + 995
   SELL + BUY = EXACT SAME STYLE
============================================= */

[data-view="tv"] .silver-999-sell,
[data-view="tv"] .silver-999-buy,
[data-view="tv"] .silver-995-sell,
[data-view="tv"] .silver-995-buy {

    font-family:
        var(--silver-999-family)
        !important;

    font-weight:
        var(--silver-999-weight)
        !important;

    font-size:
        var(--tv-shot-font)
        !important;

    color:
        var(--silver-999-color)
        !important;

    line-height:
        1;

    text-align:
        center;

    direction:
        ltr !important;

    unicode-bidi:
        isolate;

    white-space:
        nowrap;
}


/* =============================================
   999.9 SELL
============================================= */

[data-view="tv"] .silver-999-sell {

    top:
        var(--tv-999-sell-top);

    right:
        var(--tv-999-sell-right);

    width:
        var(--tv-999-sell-width);
}


/* =============================================
   999.9 BUY
============================================= */

[data-view="tv"] .silver-999-buy {

    top:
        var(--tv-999-buy-top);

    right:
        var(--tv-999-buy-right);

    width:
        var(--tv-999-buy-width);
}


/* =============================================
   995 SELL
============================================= */

[data-view="tv"] .silver-995-sell {

    top:
        var(--tv-995-sell-top);

    right:
        var(--tv-995-sell-right);

    width:
        var(--tv-995-sell-width);
}


/* =============================================
   995 BUY
============================================= */

[data-view="tv"] .silver-995-buy {

    top:
        var(--tv-995-buy-top);

    right:
        var(--tv-995-buy-right);

    width:
        var(--tv-995-buy-width);
}
/* =============================================
   BAR FONT
   SELL + BUY
   دقیقاً یک استایل برای هر دو
============================================= */

[data-view="tv"] .silver-bar5-sell,
[data-view="tv"] .silver-bar5-buy,

[data-view="tv"] .silver-bar10-sell,
[data-view="tv"] .silver-bar10-buy,

[data-view="tv"] .silver-bar20-sell,
[data-view="tv"] .silver-bar20-buy,

[data-view="tv"] .silver-bar50-sell,
[data-view="tv"] .silver-bar50-buy,

[data-view="tv"] .silver-bar100-sell,
[data-view="tv"] .silver-bar100-buy,

[data-view="tv"] .silver-bar250-sell,
[data-view="tv"] .silver-bar250-buy,

[data-view="tv"] .silver-bar500-sell,
[data-view="tv"] .silver-bar500-buy,

[data-view="tv"] .silver-bar1000-sell,
[data-view="tv"] .silver-bar1000-buy {

    font-family:
        var(--silver-price-family)
        !important;

    font-weight:
        var(--silver-price-weight)
        !important;

    font-size:
        var(--tv-bar-font)
        !important;

    line-height:
        1;

    direction:
        ltr !important;

    unicode-bidi:
        isolate;

    white-space:
        nowrap;
	    color:
        var(--silver-price-color)
        !important;

    text-align:
        center;
}

[data-view="tv"] .silver-val.silver-999-sell {
    color: var(--tv-999-color) !important;
    font-family: var(--tv-999-family) !important;
    font-weight: var(--tv-999-weight) !important;
}

[data-view="tv"] .silver-val.silver-995-sell {
    color: var(--tv-995-color) !important;
    font-family: var(--tv-995-family) !important;
    font-weight: var(--tv-995-weight) !important;
}

[data-view="tv"] .silver-val.silver-ounce {
    color: var(--tv-ounce-color) !important;
    font-family: var(--tv-ounce-family) !important;
    font-weight: var(--tv-ounce-weight) !important;
}

[data-view="tv"] .silver-val.silver-ounce .dollar-sign {
    color: var(--tv-dollar-color) !important;
    font-family: var(--tv-dollar-family) !important;
    font-weight: var(--tv-dollar-weight) !important;
}
/* =============================================
   Separator
   ============================================= */

[data-view="tv"] .big-sep {
    display: inline-block;

    margin: var(--tv-sep-margin) !important;

    font-family: "Trebuchet MS", sans-serif !important;

    font-size: var(--tv-sep-font) !important;

    font-weight: var(--tv-sep-weight) !important;

    line-height: 1;

    vertical-align: middle;

    color: var(--tv-sep-color) !important;

    transform: translateY(5px);
}


/* =============================================
   999.9 SELL
   ============================================= */

[data-view="tv"] .silver-999-sell {
    top: var(--tv-999-sell-top);
    right: var(--tv-999-sell-right);

    width: var(--tv-999-sell-width);
}


/* =============================================
   995 SELL
   ============================================= */

[data-view="tv"] .silver-995-sell {
    top: var(--tv-995-sell-top);
    right: var(--tv-995-sell-right);

    width: var(--tv-995-sell-width);
}


/* =============================================
   BAR 5g - SELL
   ============================================= */

[data-view="tv"] .silver-bar5-sell {
    top: var(--tv-bar5-sell-top);
    right: var(--tv-bar5-sell-right);

    width: var(--tv-bar5-sell-width);
}


/* =============================================
   BAR 5g - BUY
   ============================================= */

[data-view="tv"] .silver-bar5-buy {
    top: var(--tv-bar5-buy-top);
    right: var(--tv-bar5-buy-right);

    width: var(--tv-bar5-buy-width);
}


/* =============================================
   BAR 10g - SELL
   ============================================= */

[data-view="tv"] .silver-bar10-sell {
    top: var(--tv-bar10-sell-top);
    right: var(--tv-bar10-sell-right);

    width: var(--tv-bar10-sell-width);
}


/* =============================================
   BAR 10g - BUY
   ============================================= */

[data-view="tv"] .silver-bar10-buy {
    top: var(--tv-bar10-buy-top);
    right: var(--tv-bar10-buy-right);

    width: var(--tv-bar10-buy-width);
}


/* =============================================
   BAR 20g - SELL
   ============================================= */

[data-view="tv"] .silver-bar20-sell {
    top: var(--tv-bar20-sell-top);
    right: var(--tv-bar20-sell-right);

    width: var(--tv-bar20-sell-width);
}


/* =============================================
   BAR 20g - BUY
   ============================================= */

[data-view="tv"] .silver-bar20-buy {
    top: var(--tv-bar20-buy-top);
    right: var(--tv-bar20-buy-right);

    width: var(--tv-bar20-buy-width);
}


/* =============================================
   BAR 50g - SELL
   ============================================= */

[data-view="tv"] .silver-bar50-sell {
    top: var(--tv-bar50-sell-top);
    right: var(--tv-bar50-sell-right);

    width: var(--tv-bar50-sell-width);
}


/* =============================================
   BAR 50g - BUY
   ============================================= */

[data-view="tv"] .silver-bar50-buy {
    top: var(--tv-bar50-buy-top);
    right: var(--tv-bar50-buy-right);

    width: var(--tv-bar50-buy-width);
}


/* =============================================
   BAR 100g - SELL
   ============================================= */

[data-view="tv"] .silver-bar100-sell {
    top: var(--tv-bar100-sell-top);
    right: var(--tv-bar100-sell-right);

    width: var(--tv-bar100-sell-width);
}


/* =============================================
   BAR 100g - BUY
   ============================================= */

[data-view="tv"] .silver-bar100-buy {
    top: var(--tv-bar100-buy-top);
    right: var(--tv-bar100-buy-right);

    width: var(--tv-bar100-buy-width);
}


/* =============================================
   BAR 250g - SELL
   ============================================= */

[data-view="tv"] .silver-bar250-sell {
    top: var(--tv-bar250-sell-top);
    right: var(--tv-bar250-sell-right);

    width: var(--tv-bar250-sell-width);
}


/* =============================================
   BAR 250g - BUY
   ============================================= */

[data-view="tv"] .silver-bar250-buy {
    top: var(--tv-bar250-buy-top);
    right: var(--tv-bar250-buy-right);

    width: var(--tv-bar250-buy-width);
}


/* =============================================
   BAR 500g - SELL
   ============================================= */

[data-view="tv"] .silver-bar500-sell {
    top: var(--tv-bar500-sell-top);
    right: var(--tv-bar500-sell-right);

    width: var(--tv-bar500-sell-width);
}


/* =============================================
   BAR 500g - BUY
   ============================================= */

[data-view="tv"] .silver-bar500-buy {
    top: var(--tv-bar500-buy-top);
    right: var(--tv-bar500-buy-right);

    width: var(--tv-bar500-buy-width);
}


/* =============================================
   BAR 1000g - SELL
   ============================================= */

[data-view="tv"] .silver-bar1000-sell {
    top: var(--tv-bar1000-sell-top);
    right: var(--tv-bar1000-sell-right);

    width: var(--tv-bar1000-sell-width);
}


/* =============================================
   BAR 1000g - BUY
   ============================================= */

[data-view="tv"] .silver-bar1000-buy {
    top: var(--tv-bar1000-buy-top);
    right: var(--tv-bar1000-buy-right);

    width: var(--tv-bar1000-buy-width);
}


/* =============================================
   Ounce
   ============================================= */

[data-view="tv"] .silver-ounce {
    top: var(--tv-ounce-top);
    right: var(--tv-ounce-right);

    width: var(--tv-ounce-width);

    font-size: var(--tv-ounce-font) !important;

    direction: ltr !important;
}
[data-view="tv"] .silver-ounce .dollar-sign {
    font-family: Arial, Helvetica, sans-serif !important;
    font-weight: var(--tv-dollar-weight) !important;
    color: var(--tv-dollar-color) !important;
}

/* =============================================
   Time
   ============================================= */

[data-view="tv"] .silver-time {
    top: var(--tv-time-top);
    right: var(--tv-time-right);

    width: var(--tv-time-width);

    font-size: var(--tv-time-font) !important;

    direction: ltr !important;
}


/* =============================================
   Date
   ============================================= */

[data-view="tv"] .silver-date {
    top: var(--tv-date-top);
    right: var(--tv-date-right);

    width: var(--tv-date-width);

    font-size: var(--tv-date-font) !important;

    direction: ltr !important;
}


/* =============================================
   🔒 SALE CLOSED OVERLAY
   ============================================= */

/* ============================= */
/* SALE CLOSED - CENTER NOTICE   */
/* ============================= */

.sale-overlay {
    position: absolute;
    inset: 0;

    display: none;

    /* فقط برای موقعیت‌دهی کارت */
    align-items: center;
    justify-content: center;

    /* هیچ بک‌گراندی روی کل صفحه نداریم */
    background: transparent !important;
    backdrop-filter: none !important;

    z-index: 5000;

    pointer-events: none;
}

.sale-overlay.active {
    display: flex !important;
}


/* کارت سفید روی نوشته مرکزی PNG */

.sale-overlay-content {
    position: absolute;

    /* محل کارت روی قالب */
    top: 5%;
    left: 50%;

    transform: translate(-50%, -50%);

    width: 30%;
    min-height: 15%;

    padding: 1.2vw 2vw;

    background: #ffffff;

    border-radius: 1vw;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    text-align: center;

    box-shadow: 0 0.4vw 1.5vw rgba(0, 0, 0, 0.12);

    direction: rtl;
}


/* عنوان */

.sale-closed-title {
    font-family: "Vazir", sans-serif !important;

    font-size: 1.7vw;
    font-weight: 900;

    color: #c62828;

    line-height: 1.4;

    white-space: nowrap;
}


/* توضیح */

.sale-closed-subtitle {
    margin-top: 0.5vw;

    font-family: "Vazir", sans-serif !important;

    font-size: 0.8vw;
    font-weight: 600;

    color: #64748b;

    line-height: 1.5;

    white-space: nowrap;
}
/* =============================================
   TV SALE CLOSED - HEADER NOTICE
   ============================================= */

[data-view="tv"] .sale-overlay {
    position: absolute !important;
    inset: 0 !important;

    width: 100% !important;
    height: 100% !important;

    display: none;

    background: transparent !important;
    backdrop-filter: none !important;

    padding: 0 !important;
    margin: 0 !important;

    z-index: 5000 !important;

    pointer-events: none;
}

[data-view="tv"] .sale-overlay.active {
    display: flex !important;
}

/* سفید روی بخش "مرکز نقره پاشا" قالب PNG */

[data-view="tv"] .sale-overlay-content {
    position: absolute !important;

    top: 0% !important;
    left: 50% !important;

    transform: translateX(-50%) !important;

    width: 33% !important;
    height: 13% !important;
    min-height: 0 !important;

    padding: 0vw 1.5vw !important;

    background: #ffffff !important;
    color: #111 !important;

    border: none !important;
    border-radius: 0.8vw !important;

    box-shadow: 0 0.4vw 1.2vw rgba(0, 0, 0, 0.15) !important;

    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    text-align: center;
    direction: rtl;
}


/* عنوان */

[data-view="tv"] .sale-closed-title {
    font-size: 2.3vw !important;
    font-weight: 900 !important;
    color: #c62828 !important;

    line-height: 1.3;
    white-space: nowrap;
}


/* متن پایین */

[data-view="tv"] .sale-closed-subtitle {
    margin-top: 0.25vw;

    font-size: 0.75vw !important;
    font-weight: 600 !important;

    color: #64748b !important;

    line-height: 1.3;
    white-space: nowrap;
}
/* =============================================
   Custom Separator Colors
   ============================================= */

/* جداکننده هزارگان مشکی */

[data-view="tv"] .big-sep.black-sep {
    color: #111 !important;
}


/* نقطه اعشار پیش‌فرض */

[data-view="tv"] .big-dot {
    color: var(--tv-sep-color) !important;
}


/* نقطه اعشار مشکی */

[data-view="tv"] .big-dot.black-dot {
    color: #111 !important;
}

/* =========================================================
   FINAL TOP ELEMENT OVERRIDES
   999.9 / 995 / OUNCE
========================================================= */


/* ---------- PANEL 999 ---------- */

.silver-val.silver-999-sell,
.silver-val.silver-999-sell span {
    color: var(--silver-999-color) !important;
    font-family: var(--silver-999-family) !important;
    font-weight: var(--silver-999-weight) !important;
}


/* ---------- PANEL 995 ---------- */

.silver-val.silver-995-sell,
.silver-val.silver-995-sell span {
    color: var(--silver-995-color) !important;
    font-family: var(--silver-995-family) !important;
    font-weight: var(--silver-995-weight) !important;
}


/* ---------- PANEL OUNCE NUMBER ---------- */

.silver-val.silver-ounce .ounce-number,
.silver-val.silver-ounce .ounce-number span {
    color: var(--silver-ounce-color) !important;
    font-family: var(--silver-ounce-family) !important;
    font-weight: var(--silver-ounce-weight) !important;
}


/* ---------- PANEL DOLLAR ---------- */

.silver-val.silver-ounce .dollar-sign {
    color: var(--silver-dollar-color) !important;
    font-family: var(--silver-dollar-family) !important;
    font-weight: var(--silver-dollar-weight) !important;
}


/* =========================================================
   TV
========================================================= */

[data-view="tv"] .silver-val.silver-999-sell,
[data-view="tv"] .silver-val.silver-999-sell span {
    color: var(--tv-999-color) !important;
    font-family: var(--tv-999-family) !important;
    font-weight: var(--tv-999-weight) !important;
}


[data-view="tv"] .silver-val.silver-995-sell,
[data-view="tv"] .silver-val.silver-995-sell span {
    color: var(--tv-995-color) !important;
    font-family: var(--tv-995-family) !important;
    font-weight: var(--tv-995-weight) !important;
}


[data-view="tv"] .silver-val.silver-ounce .ounce-number,
[data-view="tv"] .silver-val.silver-ounce .ounce-number span {
    color: var(--tv-ounce-color) !important;
    font-family: var(--tv-ounce-family) !important;
    font-weight: var(--tv-ounce-weight) !important;
}
/* =============================================
   TV OUNCE DECIMAL DOT
   نقطه اعشار انس = نارنجی
============================================= */

[data-view="tv"] .silver-val.silver-ounce .ounce-number .big-dot {

    color: #FE7F2D !important;

    font-family:
        var(--tv-ounce-family) !important;

    font-weight:
        var(--tv-ounce-weight) !important;
    font-size:
        1.2em !important;
	    transform:
        translateY(-3px) !important;
}
/* =============================================
   TV OUNCE SEPARATOR
   جداکننده انس = نارنجی
============================================= */

[data-view="tv"] .silver-val.silver-ounce .ounce-number .big-sep {

    color: #FE7F2D !important;

    font-family:
        var(--tv-ounce-family) !important;

    font-weight:
        var(--tv-ounce-weight) !important;
}
[data-view="tv"] .silver-val.silver-ounce .dollar-sign {
    color: var(--tv-dollar-color) !important;
    font-family: var(--tv-dollar-family) !important;
    font-weight: var(--tv-dollar-weight) !important;
}


/* =============================================
   SHOT SELL SEPARATORS
   جداکننده فروش ساچمه = نارنجی
============================================= */

[data-view="tv"] .silver-val.silver-999-sell .big-sep,
[data-view="tv"] .silver-val.silver-995-sell .big-sep {

    color: #FE7F2D !important;

}

/* =============================================
   SHOT BUY SEPARATORS
   جداکننده خرید ساچمه = نارنجی
============================================= */

[data-view="tv"] .silver-val.silver-999-buy .big-sep,
[data-view="tv"] .silver-val.silver-995-buy .big-sep {

    color: #FE7F2D !important;

}
/* =============================================
   BAR PERCENT SECTION
============================================= */

.bar-percent-section {
    width: 100%;
    margin-top: 20px;
}


/* ---------- TITLE ---------- */

.bar-percent-title {
    margin: 0 0 6px;

    color: #f9a825;

    font-size: 18px;
    font-weight: 900;
}


/* ---------- DESCRIPTION ---------- */

.bar-percent-description {
    margin-bottom: 18px;

    color: #ff5a1f;

    font-size: 11px;
    font-weight: 700;
}


/* =============================================
   HEADER
============================================= */

.bar-percent-header {
    display: grid;

    grid-template-columns:
        100px
        1fr
        1fr;

    gap: 12px;

    align-items: center;

    margin-bottom: 8px;
    padding: 0 4px;

    color: #64748b;

    font-size: 12px;
    font-weight: 900;

    text-align: center;
}


/* وزن */

.bar-percent-header > div:first-child {
    text-align: right;
}


/* فروش */

.bar-percent-header > div:nth-child(2) {
    color: #ff5a1f;
}


/* خرید */

.bar-percent-header > div:nth-child(3) {
    color: #1e293b;
}


/* =============================================
   ROW
============================================= */

.bar-percent-row {
    display: grid;

    grid-template-columns:
        100px
        1fr
        1fr;

    gap: 12px;

    align-items: center;

    margin-bottom: 10px;
}


/* =============================================
   WEIGHT
============================================= */

.bar-percent-weight {
    color: #1e293b;

    font-size: 13px;
    font-weight: 900;

    white-space: nowrap;
}


/* =============================================
   INPUT
============================================= */

.bar-percent-row input {
    box-sizing: border-box;

    width: 100%;
    height: 44px;

    margin: 0 !important;

    padding: 0 12px !important;

    border: 1px solid #e2e8f0 !important;
    border-radius: 12px !important;

    background: #f8fafc !important;

    color: #1e293b;

    font-family: "Vazir", sans-serif;
    font-size: 14px;
    font-weight: 900;

    text-align: center;

    outline: none;

    transition:
        border-color .15s ease,
        background .15s ease,
        box-shadow .15s ease;
}


/* ---------- SELL ---------- */

.bar-percent-row input:nth-child(2):focus {
    background: #fff !important;

    border-color: #ff7a45 !important;

    box-shadow:
        0 0 0 3px rgba(255,90,31,.08);
}


/* ---------- BUY ---------- */

.bar-percent-row input:nth-child(3):focus {
    background: #fff !important;

    border-color: #94a3b8 !important;

    box-shadow:
        0 0 0 3px rgba(100,116,139,.08);
}


/* =============================================
   MOBILE
============================================= */

@media (max-width:768px) {

    .bar-percent-header,
    .bar-percent-row {

        grid-template-columns:
            70px
            1fr
            1fr;

        gap: 7px;
    }


    .bar-percent-row {
        margin-bottom: 7px;
    }


    .bar-percent-row input {
        height: 40px;

        font-size: 13px;
    }


    .bar-percent-weight {
        font-size: 11px;
    }


    .bar-percent-header {
        font-size: 10px;
    }

}


/* =========================================================
   MOBILE PANEL ORDER
   Preview
   ↓
   Price + Percent
   ↓
   Display Settings
   ↓
   Gallery
   ↓
   Music
========================================================= */

@media (max-width: 768px) {

    /* main را تبدیل به یک ستون می‌کنیم */
    .main-layout {
        display: flex !important;
        flex-direction: column !important;

        width: 100% !important;

        gap: 16px !important;

        padding: 12px !important;

        box-sizing: border-box;
    }


    /* -----------------------------------------------------
       نکته اصلی:
       wrapper ستون preview در موبایل از layout حذف می‌شود
       ولی محتوای داخلش سر جای خودش باقی می‌ماند.
    ----------------------------------------------------- */

    .preview-column {
        display: contents !important;
    }


    /* =====================================================
       1. PREVIEW
    ===================================================== */

    .card-slideshow {
        order: 1 !important;

        width: 100% !important;

        margin: 0 !important;

        box-sizing: border-box;
    }


    /* =====================================================
       2. PRICE + BAR PERCENT
    ===================================================== */

    .card-prizes {
        order: 2 !important;

        width: 100% !important;

        margin: 0 !important;

        box-sizing: border-box;
    }


    /* =====================================================
       3. DISPLAY SETTINGS
    ===================================================== */

    .preview-settings-card {
        order: 3 !important;

        width: 100% !important;

        margin: 0 !important;

        box-sizing: border-box;
    }


    /* =====================================================
       4. GALLERY
    ===================================================== */

    .gallery-management-card {
        order: 4 !important;

        width: 100% !important;

        margin: 0 !important;

        box-sizing: border-box;
    }


    /* =====================================================
       Preview size
    ===================================================== */

    .slideshow-container {
        width: 100% !important;
    }


    .slideshow-screen {
        width: 100% !important;

        max-width: 100% !important;

        margin-left: auto !important;
        margin-right: auto !important;
    }


    /* =====================================================
       Settings
    ===================================================== */

    .preview-settings-grid {
        grid-template-columns: 1fr !important;

        gap: 12px !important;
    }


    /* =====================================================
       Gallery
    ===================================================== */

    .gallery-grid {
        width: 100% !important;
    }

}


/* =============================================
   MOBILE - SALE CLOSED PREVIEW BANNER
============================================= */

@media (max-width: 768px) {

    .sale-preview-overlay {
        padding: 12px !important;
    }

    .sale-preview-overlay span {
        width: auto !important;
        max-width: 75% !important;

        padding: 8px 14px !important;

        border-radius: 8px !important;

        font-size: 11px !important;
        font-weight: 800 !important;
        line-height: 1.5 !important;

        white-space: nowrap;

        box-shadow: 0 4px 12px rgba(0,0,0,.25) !important;
    }

}

/* =============================================
   MARKET MESSAGE
============================================= */

.market-message {

    position:absolute;

    top:60%;
    left:50%;

    transform:translate(-50%,-50%);

    z-index:6000;

    font-family:"Vazir",sans-serif !important;

    font-size:2vw;

    font-weight:900;

    color:#c62828;

    text-align:center;

    direction:rtl;

    white-space:nowrap;

}

/* =============================================
   ADMIN PREVIEW SALE BANNER SYNC
   ============================================= */

.card-slideshow .sale-overlay {
    position:absolute;
    inset:0;
    display:none;

    align-items:flex-start;
    justify-content:center;

    z-index:5000;
    pointer-events:none;
}


.card-slideshow .sale-overlay.active {
    display:flex !important;
}


.card-slideshow .sale-box {

    margin-top:0;

    width:33%;
    height:13%;

    background:#fff;

    border-radius:0.8vw;

    display:flex;
    flex-direction:column;

    align-items:center;
    justify-content:center;

    box-shadow:
    0 0.4vw 1.2vw rgba(0,0,0,.15);

}

/* =============================================
   MOBILE MARKET STATUS BANNER
   waiting_rate + closed = EXACT SAME SIZE
   ============================================= */

@media (max-width: 768px) {

    .sale-overlay-content {
        top: 5% !important;
        left: 50% !important;

        transform: translate(-50%, -50%) !important;

        width: 30% !important;
        height: auto !important;
        min-height: 15% !important;

        padding: 1.2vw 2vw !important;

        border-radius: 1vw !important;

        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;

        text-align: center !important;
    }

    .sale-closed-title {
        font-size: 1.7vw !important;
        line-height: 1.4 !important;
        white-space: nowrap !important;
    }

    .sale-closed-subtitle {
        margin-top: 0.5vw !important;

        font-size: 0.8vw !important;
        line-height: 1.5 !important;

        white-space: nowrap !important;
    }
}

/* =============================================
   PANEL SHOT SELL SEPARATORS
   فروش ساچمه = جداکننده نارنجی
============================================= */

.silver-val.silver-999-sell .big-sep,
.silver-val.silver-995-sell .big-sep {

    color: #FE7F2D !important;

}
/* =============================================
   SHOT BUY = SAME COLOR AS SELL
============================================= */

.silver-val.silver-999-buy {
    color: var(--silver-999-color) !important;
    font-family: var(--silver-999-family) !important;
    font-weight: var(--silver-999-weight) !important;
}

.silver-val.silver-995-buy {
    color: var(--silver-995-color) !important;
    font-family: var(--silver-995-family) !important;
    font-weight: var(--silver-995-weight) !important;
}