/* =========================================================
   DIAMOND PLAYER SHOP
   PREMIUM FUTURISTIC UI
   Version 2.0
========================================================= */


/* =========================================================
   FONT
========================================================= */

@font-face{
    font-family:"Graphik Arabic";
    src:url("../fonts/GraphikArabic.otf") format("opentype");
    font-weight:400;
    font-style:normal;
    font-display:swap;
}


/* =========================================================
   VARIABLES
========================================================= */

:root{

    --primary:#2563eb;
    --primary-hover:#1d4ed8;
    --primary-light:#3b82f6;

    --blue-glow:rgba(37,99,235,.28);
    --blue-glow-strong:rgba(37,99,235,.45);

    --dark:#0b1120;
    --dark2:#0f172a;
    --dark3:#111827;

    --card:#172238;
    --card-hover:#1b2a43;

    --border:#263653;
    --border-light:#304463;

    --text:#ffffff;
    --text2:#cbd5e1;
    --muted:#94a3b8;

    --success:#10b981;
    --danger:#ef4444;
    --warning:#f59e0b;

    --radius:18px;
    --radius-lg:24px;

    --shadow:
        0 15px 45px rgba(0,0,0,.25);

    --shadow-blue:
        0 15px 45px rgba(37,99,235,.16);

    --transition:
        .3s cubic-bezier(.4,0,.2,1);
}


/* =========================================================
   RESET
========================================================= */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{

    direction:rtl;

    background:
        radial-gradient(
            circle at 10% 10%,
            rgba(37,99,235,.055),
            transparent 28%
        ),
        radial-gradient(
            circle at 90% 90%,
            rgba(37,99,235,.045),
            transparent 30%
        ),
        var(--dark);

    color:var(--text);

    font-family:
        "Graphik Arabic",
        Tahoma,
        sans-serif;

    line-height:1.7;

    overflow-x:hidden;
}

img{
    max-width:100%;
    display:block;
}

a{
    text-decoration:none;
}

ul{
    list-style:none;
}

button,
input,
textarea,
select{
    font-family:
        "Graphik Arabic",
        Tahoma,
        sans-serif;
}


/* =========================================================
   TEXT SELECTION
========================================================= */

::selection{
    background:var(--primary);
    color:#fff;
}


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

.container{

    width:92%;

    max-width:1400px;

    margin:auto;
}


/* =========================================================
   HERO
========================================================= */

.hero{

    width:100%;

    height:520px;

    border-radius:28px;

    overflow:hidden;

    margin:35px auto;

    display:flex;

    justify-content:center;

    align-items:center;

    text-align:center;

    position:relative;

    background:
        linear-gradient(
            rgba(5,12,28,.68),
            rgba(5,12,28,.82)
        ),
        url("../images/hero.jpg");

    background-size:cover;
    background-position:center;

    border:1px solid rgba(96,165,250,.12);

    box-shadow:
        0 25px 70px rgba(0,0,0,.32),
        inset 0 0 80px rgba(37,99,235,.08);
}

.hero::before{

    content:"";

    position:absolute;

    width:450px;
    height:450px;

    border-radius:50%;

    background:rgba(37,99,235,.14);

    filter:blur(90px);

    pointer-events:none;
}

.hero-content{

    max-width:750px;

    position:relative;

    z-index:2;
}

.hero h1{

    font-size:54px;

    margin-bottom:25px;

    font-weight:800;

    letter-spacing:-1px;

    text-shadow:
        0 5px 30px rgba(0,0,0,.45);
}

.hero p{

    font-size:21px;

    color:var(--text2);

    line-height:2;

    margin-bottom:35px;
}


/* =========================================================
   HERO BUTTON
========================================================= */

.hero-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:15px 36px;

    min-height:54px;

    border-radius:14px;

    background:
        linear-gradient(
            135deg,
            var(--primary-light),
            var(--primary)
        );

    color:#fff;

    font-weight:bold;

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

    box-shadow:
        0 10px 30px rgba(37,99,235,.28);

    transition:var(--transition);

    position:relative;

    overflow:hidden;
}

.hero-btn::before{

    content:"";

    position:absolute;

    top:0;
    right:-100%;

    width:60%;
    height:100%;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.18),
            transparent
        );

    transition:.6s;
}

.hero-btn:hover::before{
    right:130%;
}

.hero-btn:hover{

    background:
        linear-gradient(
            135deg,
            #3b82f6,
            #1d4ed8
        );

    transform:translateY(-4px);

    box-shadow:
        0 16px 40px rgba(37,99,235,.38);
}


/* =========================================================
   HERO SLIDER
========================================================= */

.hero-slider{

    position:relative;

    width:100%;

    height:550px;

    border-radius:28px;

    overflow:hidden;

    margin:40px auto;

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

    box-shadow:
        0 25px 70px rgba(0,0,0,.35);
}

.slide{

    position:absolute;

    inset:0;

    opacity:0;

    transition:
        opacity .9s ease,
        transform 1.2s ease;
}

.slide.active{
    opacity:1;
}

.slide img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:
        transform 5s ease;
}

.slide.active img{
    transform:scale(1.04);
}

.overlay{

    position:absolute;

    inset:0;

    background:
        linear-gradient(
            180deg,
            rgba(5,12,28,.40),
            rgba(5,12,28,.82)
        );

    z-index:1;
}

.slide-content{

    position:absolute;

    top:50%;

    left:50%;

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

    width:90%;

    text-align:center;

    z-index:5;
}

.slide-content h1{

    font-size:56px;

    color:#fff;

    margin-bottom:20px;

    font-weight:800;

    text-shadow:
        0 8px 30px rgba(0,0,0,.55);
}

.slide-content p{

    font-size:22px;

    color:#e2e8f0;

    margin-bottom:35px;

    text-shadow:
        0 4px 20px rgba(0,0,0,.4);
}


/* =========================================================
   SECTION TITLES
========================================================= */

.section-title{

    font-size:34px;

    margin:70px 0 32px;

    color:#fff;

    font-weight:800;

    position:relative;

    padding-right:18px;
}

.section-title::before{

    content:"";

    position:absolute;

    right:0;

    top:50%;

    transform:translateY(-50%);

    width:5px;

    height:70%;

    border-radius:10px;

    background:
        linear-gradient(
            180deg,
            #60a5fa,
            #2563eb
        );

    box-shadow:
        0 0 18px rgba(37,99,235,.55);
}


/* =========================================================
   CATEGORIES
========================================================= */

.category-grid{

    display:grid;

    grid-template-columns:
        repeat(
            auto-fit,
            minmax(230px,1fr)
        );

    gap:24px;
}

.category-card{

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    min-height:180px;

    position:relative;

    overflow:hidden;

    background:
        linear-gradient(
            145deg,
            rgba(30,45,70,.95),
            rgba(18,30,50,.95)
        );

    border:1px solid var(--border);

    border-radius:22px;

    padding:40px 20px;

    text-align:center;

    color:#fff !important;

    text-decoration:none !important;

    transition:var(--transition);

    font-size:22px;

    box-shadow:
        0 10px 35px rgba(0,0,0,.16);
}

.category-card::before{

    content:"";

    position:absolute;

    width:140px;
    height:140px;

    border-radius:50%;

    background:
        rgba(37,99,235,.12);

    top:-70px;
    left:-70px;

    filter:blur(15px);

    transition:.4s;
}

.category-card::after{

    content:"";

    position:absolute;

    inset:0;

    border-radius:inherit;

    border:1px solid transparent;

    background:
        linear-gradient(
            135deg,
            rgba(96,165,250,.20),
            transparent 35%,
            transparent 70%,
            rgba(37,99,235,.10)
        );

    mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);

    mask-composite:exclude;

    pointer-events:none;
}

.category-card:link,
.category-card:visited{

    color:#fff !important;

    text-decoration:none !important;
}

.category-card span{

    display:block;

    margin-top:18px;

    font-size:18px;

    color:#fff !important;

    position:relative;

    z-index:2;
}

.category-card:hover{

    background:
        linear-gradient(
            145deg,
            #1d3153,
            #17263e
        );

    color:#fff !important;

    transform:translateY(-8px);

    border-color:
        rgba(59,130,246,.65);

    box-shadow:
        0 20px 45px rgba(0,0,0,.28),
        0 0 30px rgba(37,99,235,.12);
}

.category-card:hover::before{

    transform:scale(1.7);

    background:
        rgba(37,99,235,.20);
}

.category-card:hover span{
    color:#fff !important;
}


/* =========================================================
   PRODUCTS
========================================================= */

.latest{
    margin-top:75px;
}

.latest h2{

    margin-bottom:32px;

    font-size:32px;

    font-weight:800;
}

.products{

    display:grid;

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

    gap:28px;
}


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

.card{

    background:
        linear-gradient(
            145deg,
            #192840,
            #141f33
        );

    border:1px solid var(--border);

    border-radius:22px;

    overflow:hidden;

    transition:
        transform .35s cubic-bezier(.2,.8,.2,1),
        box-shadow .35s ease,
        border-color .35s ease;

    position:relative;

    box-shadow:
        0 12px 35px rgba(0,0,0,.18);
}

.card::before{

    content:"";

    position:absolute;

    top:0;
    left:0;
    right:0;

    height:1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(96,165,250,.45),
            transparent
        );

    opacity:.6;
}

.card:hover{

    transform:
        translateY(-10px);

    border-color:
        rgba(59,130,246,.55);

    box-shadow:
        0 25px 60px rgba(0,0,0,.30),
        0 0 35px rgba(37,99,235,.10);
}

.card img{

    width:100%;

    height:240px;

    object-fit:cover;

    transition:
        transform .6s ease,
        filter .4s ease;
}

.card:hover img{

    transform:scale(1.045);

    filter:
        brightness(1.05)
        saturate(1.08);
}

.card h3{

    font-size:21px;

    padding:20px 20px 12px;

    color:#fff;

    line-height:1.7;
}

.card{

    padding:0 0 20px;

    box-sizing:border-box;
}

.price{

    color:#60a5fa;

    font-size:24px;

    font-weight:800;

    padding:0 20px 20px;

    text-shadow:
        0 0 18px rgba(59,130,246,.18);
}


/* =========================================================
   BUY BUTTON
========================================================= */

.buy{

    display:flex;

    align-items:center;

    justify-content:center;

    width:calc(100% - 40px);

    margin:0 20px;

    min-height:52px;

    text-align:center;

    padding:14px 18px;

    background:
        linear-gradient(
            135deg,
            #3b82f6,
            #2563eb
        );

    color:#fff;

    font-weight:bold;

    transition:var(--transition);

    border-radius:14px;

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

    box-shadow:
        0 8px 25px rgba(37,99,235,.20);

    position:relative;

    overflow:hidden;
}

.buy::before{

    content:"";

    position:absolute;

    top:0;

    left:-120%;

    width:70%;

    height:100%;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.20),
            transparent
        );

    transform:skewX(-20deg);

    transition:.6s;
}

.buy:hover::before{
    left:140%;
}

.buy:hover{

    background:
        linear-gradient(
            135deg,
            #60a5fa,
            #2563eb
        );

    transform:
        translateY(-3px);

    box-shadow:
        0 14px 35px rgba(37,99,235,.34);
}


/* =========================================================
   BADGES
========================================================= */

.badge{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:6px 13px;

    border-radius:30px;

    font-size:13px;

    margin:12px;

    font-weight:bold;

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

    box-shadow:
        0 6px 18px rgba(0,0,0,.15);
}

.featured{

    background:
        linear-gradient(
            135deg,
            #f59e0b,
            #d97706
        );
}

.new{

    background:
        linear-gradient(
            135deg,
            #10b981,
            #059669
        );
}


/* =========================================================
   FOOTER
========================================================= */

.footer{

    margin-top:90px;

    background:
        linear-gradient(
            180deg,
            #101a2d,
            #0b1220
        );

    border-top:
        1px solid rgba(59,130,246,.16);

    padding:65px 0;

    position:relative;
}

.footer::before{

    content:"";

    position:absolute;

    top:-1px;

    left:20%;

    right:20%;

    height:1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            #2563eb,
            transparent
        );

    box-shadow:
        0 0 20px rgba(37,99,235,.45);
}

.footer-grid{

    display:grid;

    grid-template-columns:
        repeat(
            auto-fit,
            minmax(250px,1fr)
        );

    gap:40px;
}

.footer h3{

    color:#fff;

    margin-bottom:20px;

    font-size:22px;

    font-weight:800;
}

.footer p{

    color:#cbd5e1;

    line-height:2;
}

.footer ul{
    list-style:none;
}

.footer li{
    margin-bottom:12px;
}

.footer a{

    color:#94a3b8;

    transition:var(--transition);

    display:inline-block;
}

.footer a:hover{

    color:#60a5fa;

    transform:
        translateX(-4px);
}


/* =========================================================
   FORMS
========================================================= */

form{

    width:100%;

    max-width:700px;

    margin:35px auto;
}

input,
textarea,
select{

    width:100%;

    background:
        linear-gradient(
            145deg,
            #18263d,
            #131f33
        );

    color:#fff;

    border:1px solid var(--border);

    border-radius:14px;

    padding:15px 17px;

    margin-bottom:20px;

    font-size:16px;

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

input::placeholder,
textarea::placeholder{
    color:#64748b;
}

input:hover,
textarea:hover,
select:hover{

    border-color:#365078;
}

input:focus,
textarea:focus,
select:focus{

    outline:none;

    border-color:
        #3b82f6;

    background:#1a2a44;

    box-shadow:
        0 0 0 4px rgba(37,99,235,.10),
        0 8px 25px rgba(0,0,0,.12);
}

textarea{

    resize:vertical;

    min-height:170px;
}


/* =========================================================
   GLOBAL BUTTONS
========================================================= */

button,
.btn{

    background:
        linear-gradient(
            135deg,
            #3b82f6,
            #2563eb
        );

    color:#fff;

    border:none;

    border-radius:14px;

    padding:14px 30px;

    cursor:pointer;

    transition:var(--transition);

    font-weight:bold;

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

    box-shadow:
        0 8px 25px rgba(37,99,235,.18);
}

button:hover,
.btn:hover{

    background:
        linear-gradient(
            135deg,
            #60a5fa,
            #2563eb
        );

    transform:
        translateY(-3px);

    box-shadow:
        0 14px 35px rgba(37,99,235,.30);
}

button:active,
.btn:active{

    transform:
        translateY(-1px);

    box-shadow:
        0 7px 18px rgba(37,99,235,.20);
}


/* =========================================================
   TABLES
========================================================= */

table{

    width:100%;

    border-collapse:separate;

    border-spacing:0;

    margin-top:30px;

    overflow:hidden;

    border-radius:18px;

    border:1px solid var(--border);

    box-shadow:
        0 15px 40px rgba(0,0,0,.15);
}

table th{

    background:
        linear-gradient(
            135deg,
            #2563eb,
            #1d4ed8
        );

    color:#fff;

    padding:17px;

    font-weight:bold;
}

table td{

    background:#182338;

    padding:17px;

    border-bottom:
        1px solid var(--border);

    text-align:center;

    color:#dbeafe;
}

table tr:last-child td{
    border-bottom:none;
}

table tr{
    transition:.2s;
}

table tbody tr:hover td{
    background:#1b2b44;
}


/* =========================================================
   DASHBOARD
========================================================= */

.dashboard{

    display:grid;

    grid-template-columns:
        repeat(
            auto-fit,
            minmax(220px,1fr)
        );

    gap:22px;

    margin:40px 0;
}

.box{

    background:
        linear-gradient(
            145deg,
            #192840,
            #141f33
        );

    border:1px solid var(--border);

    border-radius:20px;

    padding:35px;

    text-align:center;

    transition:var(--transition);

    position:relative;

    overflow:hidden;

    box-shadow:
        0 12px 35px rgba(0,0,0,.16);
}

.box::before{

    content:"";

    position:absolute;

    width:100px;
    height:100px;

    border-radius:50%;

    background:
        rgba(37,99,235,.12);

    top:-50px;
    right:-50px;

    filter:blur(12px);
}

.box:hover{

    transform:
        translateY(-7px);

    border-color:
        rgba(59,130,246,.55);

    box-shadow:
        0 20px 45px rgba(0,0,0,.25),
        0 0 25px rgba(37,99,235,.10);
}

.box h2{

    color:#60a5fa;

    font-size:42px;

    margin-bottom:10px;

    font-weight:800;

    text-shadow:
        0 0 20px rgba(59,130,246,.18);
}

.box p{
    color:#cbd5e1;
}


/* =========================================================
   ADMIN SIDEBAR
========================================================= */

.admin{

    display:inline-flex;

    min-height:100vh;
}

.sidebar{

    width:260px;

    background:
        linear-gradient(
            180deg,
            #111c30,
            #0d1525
        );

    padding:25px;

    border-left:
        1px solid var(--border);

    box-shadow:
        15px 0 40px rgba(0,0,0,.12);
}

.sidebar h2{

    color:#fff;

    margin-bottom:25px;

    font-weight:800;
}

.sidebar a{

    display:block;

    color:#cbd5e1;

    padding:14px 16px;

    border-radius:12px;

    margin-bottom:10px;

    transition:var(--transition);

    border:1px solid transparent;
}

.sidebar a:hover{

    background:
        rgba(37,99,235,.13);

    color:#fff;

    border-color:
        rgba(59,130,246,.25);

    transform:
        translateX(-4px);
}


/* =========================================================
   PRODUCT PAGE
========================================================= */

.product-page{

    display:grid;

    grid-template-columns:
        420px 1fr;

    gap:45px;

    margin:55px 0;

    align-items:start;
}

.product-image{

    background:
        linear-gradient(
            145deg,
            #192840,
            #141f33
        );

    border:
        1px solid var(--border);

    border-radius:24px;

    padding:12px;

    box-shadow:
        0 20px 55px rgba(0,0,0,.22);
}

.product-image img{

    width:100%;

    border-radius:18px;

    border:1px solid #263246;

    transition:.4s;
}

.product-image:hover img{
    transform:scale(1.015);
}

.product-info h1{

    font-size:38px;

    margin-bottom:20px;

    font-weight:800;
}

.product-price{

    font-size:34px;

    font-weight:800;

    color:#60a5fa;

    margin-bottom:20px;
}

.product-description{

    margin-top:30px;

    line-height:2.2;

    font-size:17px;

    color:#cbd5e1;
}


/* =========================================================
   LOGO IMAGE
========================================================= */

.logo{
    display:flex;
    align-items:center;
}

.logo img{

    width:60px;

    height:60px;

    border-radius:50%;

    object-fit:cover;

    object-position:center;

    border:3px solid #2563eb;

    box-shadow:
        0 0 15px rgba(37,99,235,.35);

    transition:.3s;
}

.logo img:hover{

    transform:scale(1.08);

    box-shadow:
        0 0 28px rgba(37,99,235,.65);
}


/* =========================================================
   EMOJI
========================================================= */

.emoji-box{

    display:flex;

    gap:10px;

    align-items:center;
}

.emoji-box input{
    width:200px;
}

#emojiBtn{

    font-size:25px;

    padding:10px 15px;

    cursor:pointer;
}

#emojiPicker{

    display:none;

    background:#182338;

    border:1px solid #263246;

    border-radius:16px;

    padding:15px;

    width:300px;

    margin-top:10px;

    box-shadow:
        0 20px 45px rgba(0,0,0,.30);
}

.emoji-list{

    display:grid;

    grid-template-columns:
        repeat(6,1fr);

    gap:10px;
}

.emoji-list span{

    font-size:28px;

    cursor:pointer;

    text-align:center;

    padding:5px;

    border-radius:9px;

    transition:.2s;
}

.emoji-list span:hover{

    background:
        rgba(37,99,235,.18);

    transform:scale(1.12);
}


/* =========================================================
   ADMIN BUTTONS
========================================================= */

.admin-buttons{

    display:flex;

    gap:15px;

    flex-wrap:wrap;

    margin-top:30px;
}

.admin-buttons .btn{

    min-width:180px;

    text-align:center;

    display:inline-flex;

    justify-content:center;

    align-items:center;
}


/* =========================================================
   ACCOUNT BUTTON
========================================================= */

.account-action-btn{

    background:
        linear-gradient(
            135deg,
            #3b82f6,
            #2563eb
        ) !important;

    color:#fff !important;

    border:none !important;

    border-radius:14px !important;

    padding:14px 30px !important;

    cursor:pointer;

    transition:var(--transition) !important;

    display:inline-flex;

    align-items:center;

    justify-content:center;

    text-align:center;

    text-decoration:none !important;

    font-family:
        "Graphik Arabic",
        Tahoma,
        sans-serif !important;

    box-shadow:
        0 8px 25px rgba(37,99,235,.18);
}

.account-action-btn:hover{

    background:
        linear-gradient(
            135deg,
            #60a5fa,
            #2563eb
        ) !important;

    color:#fff !important;

    transform:
        translateY(-3px);

    box-shadow:
        0 15px 35px rgba(37,99,235,.30);
}


/* =========================================================
   CHECKOUT
========================================================= */

.checkout-buttons{

    display:flex !important;

    align-items:center !important;

    justify-content:flex-start !important;

    gap:10px !important;

    width:100% !important;

    margin:20px 0 0 !important;

    padding:0 !important;

    direction:rtl !important;
}

.checkout-payment-form{

    display:block !important;

    width:auto !important;

    max-width:none !important;

    margin:0 !important;

    padding:0 !important;
}

.checkout-pay-button,
.checkout-back-button{

    display:inline-flex !important;

    align-items:center !important;

    justify-content:center !important;

    width:auto !important;

    min-width:0 !important;

    max-width:none !important;

    margin:0 !important;

    padding:14px 22px !important;

    background:
        linear-gradient(
            135deg,
            #3b82f6,
            #2563eb
        ) !important;

    color:#fff !important;

    border:none !important;

    border-radius:14px !important;

    font-family:
        "Graphik Arabic",
        Tahoma,
        sans-serif !important;

    font-size:16px !important;

    font-weight:bold !important;

    line-height:1.5 !important;

    text-decoration:none !important;

    white-space:nowrap !important;

    box-sizing:border-box !important;

    cursor:pointer !important;

    transition:var(--transition) !important;

    box-shadow:
        0 8px 24px rgba(37,99,235,.18);
}

.checkout-pay-button:hover,
.checkout-back-button:hover{

    background:
        linear-gradient(
            135deg,
            #60a5fa,
            #2563eb
        ) !important;

    color:#fff !important;

    transform:
        translateY(-3px) !important;

    box-shadow:
        0 14px 32px rgba(37,99,235,.30);
}

.checkout-pay-button:active,
.checkout-back-button:active{

    transform:
        translateY(-1px) !important;
}


/* =========================================================
   ACTIVE DEVICES
========================================================= */

.active-devices-grid{

    display:flex;

    flex-direction:column;

    gap:0;

    margin-bottom:50px;
}

.device-card{

    background:
        linear-gradient(
            145deg,
            #192840,
            #141f33
        );

    border:1px solid var(--border);

    border-radius:20px;

    padding:25px;

    display:flex;

    align-items:center;

    gap:22px;

    position:relative;

    transition:var(--transition);

    box-shadow:
        0 10px 30px rgba(0,0,0,.14);
}

.device-card:hover{

    border-color:#3b82f6;

    background:
        linear-gradient(
            145deg,
            #1b2d49,
            #16253d
        );

    transform:
        translateY(-4px);

    box-shadow:
        0 18px 40px rgba(0,0,0,.22),
        0 0 25px rgba(37,99,235,.08);
}

.device-card:not(:last-child)::after{

    content:"";

    position:absolute;

    left:5%;
    right:5%;

    bottom:-18px;

    height:1px;

    background:
        linear-gradient(
            to right,
            transparent,
            #334155,
            transparent
        );
}

.device-card:not(:last-child){
    margin-bottom:35px;
}


/* =========================================================
   DEVICE ICON
========================================================= */

.device-icon{

    width:65px;

    height:65px;

    min-width:65px;

    border-radius:18px;

    background:
        linear-gradient(
            135deg,
            #3b82f6,
            #1d4ed8
        );

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:31px;

    box-shadow:
        0 10px 25px rgba(37,99,235,.25);

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

    transition:.3s;
}

.device-card:hover .device-icon{

    transform:
        scale(1.05)
        rotate(-2deg);

    box-shadow:
        0 14px 32px rgba(37,99,235,.35);
}


/* =========================================================
   DEVICE INFO
========================================================= */

.device-info{
    flex:1;
}

.device-info h3{

    color:#fff;

    font-size:20px;

    margin-bottom:12px;

    display:flex;

    align-items:center;

    gap:10px;

    flex-wrap:wrap;
}

.device-info p{

    color:#cbd5e1;

    font-size:14px;

    line-height:1.9;

    margin-bottom:4px;
}


/* =========================================================
   CURRENT DEVICE
========================================================= */

.current-device{

    display:inline-flex;

    align-items:center;

    background:
        linear-gradient(
            135deg,
            #10b981,
            #059669
        );

    color:#fff;

    padding:5px 11px;

    border-radius:20px;

    font-size:11px;

    font-weight:bold;

    box-shadow:
        0 5px 15px rgba(16,185,129,.20);
}


/* =========================================================
   LOGOUT BUTTONS
========================================================= */

.device-action{

    margin:0;

    width:auto;

    max-width:none;
}

.logout-device-btn{

    background:
        linear-gradient(
            135deg,
            #ef4444,
            #dc2626
        ) !important;

    color:#fff !important;

    border:none;

    border-radius:12px;

    padding:11px 18px;

    cursor:pointer;

    white-space:nowrap;

    transition:var(--transition);

    box-shadow:
        0 7px 20px rgba(220,38,38,.18);
}

.logout-device-btn:hover{

    background:
        linear-gradient(
            135deg,
            #f87171,
            #dc2626
        ) !important;

    transform:
        translateY(-3px);
}

.logout-all-btn{

    width:100%;

    background:
        linear-gradient(
            135deg,
            #ef4444,
            #dc2626
        ) !important;

    color:#fff !important;

    border:none;

    border-radius:14px !important;

    padding:15px 20px;

    font-weight:bold;

    cursor:pointer;

    transition:var(--transition);

    box-shadow:
        0 8px 25px rgba(220,38,38,.18);
}

.logout-all-btn:hover{

    background:
        linear-gradient(
            135deg,
            #f87171,
            #dc2626
        ) !important;

    transform:
        translateY(-3px);
}


/* =========================================================
   HERO SECTION
========================================================= */

.hero-section{

    width:100%;

    padding:30px 0 20px;
}

.hero-text{

    width:80%;

    margin:0 auto 25px;

    text-align:center;
}

.hero-text h1{

    margin:0 0 12px;

    font-size:34px;

    font-weight:800;
}

.hero-text p{

    margin:0;

    color:#cbd5e1;

    font-size:17px;

    line-height:2;
}

.hero-image{

    width:80%;

    margin:0 auto;

    line-height:0;
}

.hero-image a{

    display:block;

    width:100%;
}

.hero-image img{

    display:block;

    width:100%;

    height:auto;

    max-width:100%;

    border-radius:20px;

    object-fit:contain;

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

    box-shadow:
        0 20px 55px rgba(0,0,0,.25);

    transition:.4s;
}

.hero-image img:hover{

    border-color:
        rgba(59,130,246,.35);

    box-shadow:
        0 25px 65px rgba(0,0,0,.32),
        0 0 30px rgba(37,99,235,.08);
}


/* =========================================================
   SCROLLBAR
========================================================= */

::-webkit-scrollbar{
    width:9px;
}

::-webkit-scrollbar-track{
    background:#080e1a;
}

::-webkit-scrollbar-thumb{

    background:
        linear-gradient(
            180deg,
            #3b82f6,
            #1d4ed8
        );

    border-radius:20px;

    border:
        2px solid #080e1a;
}

::-webkit-scrollbar-thumb:hover{

    background:
        linear-gradient(
            180deg,
            #60a5fa,
            #2563eb
        );
}


/* =========================================================
   FOCUS
========================================================= */

:focus-visible{

    outline:
        2px solid #60a5fa;

    outline-offset:3px;
}


/* =========================================================
   RESPONSIVE 1200
========================================================= */

@media(max-width:1200px){

    .products{
        grid-template-columns:
            repeat(3,1fr);
    }

}


/* =========================================================
   RESPONSIVE 992
========================================================= */

@media(max-width:992px){

    .hero-slider{
        height:420px;
    }

    .slide-content h1{
        font-size:40px;
    }

    .slide-content p{
        font-size:18px;
    }

    .products{
        grid-template-columns:
            repeat(2,1fr);
    }

    .category-grid{
        grid-template-columns:
            repeat(2,1fr);
    }

    .footer-grid{
        grid-template-columns:
            1fr 1fr;
    }

}


/* =========================================================
   RESPONSIVE 900
========================================================= */

@media(max-width:900px){

    .product-page{
        grid-template-columns:1fr;
    }

    .product-image{
        max-width:600px;
        margin:auto;
    }

}


/* =========================================================
   RESPONSIVE 768
========================================================= */

@media(max-width:768px){

    .container{
        width:94%;
    }

    .hero{
        height:400px;
        border-radius:22px;
    }

    .hero h1{
        font-size:36px;
    }

    .hero p{
        font-size:17px;
    }

    .hero-slider{
        height:320px;
        border-radius:20px;
    }

    .slide-content h1{
        font-size:29px;
    }

    .slide-content p{
        font-size:16px;
    }

    .section-title{
        font-size:28px;
        margin-top:50px;
    }

    .products{
        grid-template-columns:1fr;
    }

    .category-grid{
        grid-template-columns:1fr;
    }

    .footer-grid{
        grid-template-columns:1fr;
    }

    .hero-btn{
        padding:13px 25px;
        font-size:15px;
    }

    .logo{
        font-size:24px;
    }

    .actions{
        gap:12px;
    }

    .admin-buttons{
        width:100%;
        display:grid;
        grid-template-columns:1fr;
        gap:10px;
    }

    .admin-buttons .btn{
        width:100%;
        min-width:0;
    }

}


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

@media(max-width:768px){

    button,
    .btn,
    .buy,
    .hero-btn,
    .admin-buttons .btn,
    .elementor-button,
    .account-action-btn{

        max-width:100%;

        min-width:0 !important;

        box-sizing:border-box !important;

        white-space:normal !important;

        word-break:break-word;

        text-align:center;
    }

    .buy{

        width:calc(100% - 30px) !important;

        margin:0 15px !important;

        display:flex !important;

        padding:13px 16px !important;

        font-size:15px !important;

        line-height:1.5 !important;
    }

    .btn,
    button{

        padding:12px 18px !important;

        font-size:15px !important;

        line-height:1.5 !important;
    }

    .hero-btn{

        display:inline-flex !important;

        width:auto !important;

        max-width:90% !important;

        padding:12px 22px !important;

        font-size:15px !important;
    }

    .checkout-buttons{

        gap:8px !important;

        flex-wrap:wrap !important;
    }

    .checkout-pay-button,
    .checkout-back-button{

        font-size:14px !important;

        padding:12px 15px !important;
    }

}


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

@media(max-width:600px){

    .active-devices-grid{
        width:100%;
    }

    .device-card{

        flex-direction:column;

        align-items:stretch;

        text-align:right;

        padding:22px;

        border-radius:18px;
    }

    .device-icon{

        width:58px;

        height:58px;

        min-width:58px;

        font-size:28px;
    }

    .device-info h3{
        font-size:18px;
    }

    .device-action{
        width:100%;
    }

    .logout-device-btn{
        width:100%;
    }

    .device-card:not(:last-child){
        margin-bottom:30px;
    }

    .device-card:not(:last-child)::after{
        left:8%;
        right:8%;
        bottom:-15px;
    }

}


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

@media(max-width:480px){

    .container{
        width:95%;
    }

    .menu{
        display:none;
    }

    .hero{
        height:330px;
        border-radius:18px;
    }

    .hero h1{
        font-size:28px;
    }

    .hero p{
        font-size:15px;
        line-height:1.9;
    }

    .hero-slider{
        height:260px;
        border-radius:18px;
    }

    .slide-content h1{
        font-size:22px;
    }

    .slide-content p{
        display:none;
    }

    .hero-btn{
        font-size:14px;
        padding:11px 20px;
        border-radius:12px;
    }

    .section-title{
        font-size:25px;
    }

    .category-card{
        min-height:150px;
        padding:30px 15px;
    }

    .card img{
        height:220px;
    }

    button,
    .btn,
    .buy,
    .elementor-button{

        font-size:14px !important;

        padding:11px 14px !important;

        border-radius:12px !important;
    }

    .hero-btn{

        font-size:14px !important;

        padding:11px 20px !important;
    }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media(prefers-reduced-motion:reduce){

    *,
    *::before,
    *::after{

        animation-duration:.01ms !important;

        animation-iteration-count:1 !important;

        transition-duration:.01ms !important;

        scroll-behavior:auto !important;
    }
}


/* =========================================================
   CREATE TICKET BUTTON FIX
========================================================= */

.create-ticket,
.create-ticket-btn,
.ticket-btn,
.ticket-button,
.open-ticket,
a[href*="ticket"]{

    color:#ffffff !important;

    background:#2563eb !important;

    border:none !important;

    border-radius:12px !important;

    padding:14px 30px !important;

    text-decoration:none !important;

    opacity:1 !important;

    transform:none !important;

    transition:
        background-color .3s ease,
        box-shadow .3s ease !important;

    display:inline-flex !important;

    align-items:center !important;

    justify-content:center !important;

    box-shadow:
        0 8px 25px rgba(37,99,235,.18) !important;
}


/* متن داخل دکمه */

.create-ticket *,
.create-ticket-btn *,
.ticket-btn *,
.ticket-button *,
.open-ticket *,
a[href*="ticket"] *{

    color:#ffffff !important;

    opacity:1 !important;

}


/* Hover — بدون جابه‌جایی */

.create-ticket:hover,
.create-ticket-btn:hover,
.ticket-btn:hover,
.ticket-button:hover,
.open-ticket:hover,
a[href*="ticket"]:hover{

    color:#ffffff !important;

    background:#1d4ed8 !important;

    transform:none !important;

    opacity:1 !important;

    box-shadow:
        0 10px 30px rgba(37,99,235,.30) !important;
}


/* حتی در حالت focus */

.create-ticket:focus,
.create-ticket-btn:focus,
.ticket-btn:focus,
.ticket-button:focus,
.open-ticket:focus,
a[href*="ticket"]:focus{

    color:#ffffff !important;

    transform:none !important;

    outline:none !important;
}

/* =========================================================
   SMOOTH BUTTON HOVER
========================================================= */

button,
.btn,
.buy,
.hero-btn,
.account-action-btn,
.checkout-pay-button,
.checkout-back-button,
.admin-buttons .btn,
.elementor-button,
.create-ticket,
.create-ticket-btn,
.ticket-btn,
.ticket-button,
.open-ticket {

    transition:
        background-color .35s ease,
        color .35s ease,
        border-color .35s ease,
        box-shadow .35s ease,
        transform .35s cubic-bezier(.4,0,.2,1),
        opacity .35s ease !important;
}


/* Hover نرم */

button:hover,
.btn:hover,
.buy:hover,
.hero-btn:hover,
.account-action-btn:hover,
.checkout-pay-button:hover,
.checkout-back-button:hover,
.admin-buttons .btn:hover,
.elementor-button:hover {

    transition:
        background-color .35s ease,
        color .35s ease,
        border-color .35s ease,
        box-shadow .35s ease,
        transform .35s cubic-bezier(.4,0,.2,1),
        opacity .35s ease !important;
}


/* کلیک هم نرم */

button:active,
.btn:active,
.buy:active,
.hero-btn:active,
.account-action-btn:active,
.checkout-pay-button:active,
.checkout-back-button:active,
.admin-buttons .btn:active,
.elementor-button:active {

    transition:
        background-color .2s ease,
        color .2s ease,
        box-shadow .2s ease,
        transform .2s ease !important;
}

/* =========================================================
   FINAL FIX
   نرم شدن Hover / Selection دکمه‌ها و کادرها
========================================================= */

/* ---------- جلوگیری از انتخاب ناگهانی متن ---------- */

button,
.btn,
.buy,
.hero-btn,
.account-action-btn,
.checkout-pay-button,
.checkout-back-button,
.admin-buttons .btn,
.elementor-button,
.device-card,
.card,
.category-card,
.box,
.footer,
.footer a,
.ticket-btn,
.create-ticket,
.create-ticket-btn {
    user-select: none !important;
    -webkit-user-select: none !important;
}


/* ---------- همه دکمه‌ها ---------- */

button,
.btn,
.buy,
.hero-btn,
.account-action-btn,
.checkout-pay-button,
.checkout-back-button,
.admin-buttons .btn,
.elementor-button,
.ticket-btn,
.create-ticket,
.create-ticket-btn {

    transition:
        background-color .25s ease,
        color .25s ease,
        border-color .25s ease,
        box-shadow .25s ease,
        transform .25s ease !important;

    transform: translateY(0);

}


/* ---------- جلوگیری از پرش دکمه ---------- */

button:hover,
.btn:hover,
.buy:hover,
.hero-btn:hover,
.account-action-btn:hover,
.checkout-pay-button:hover,
.checkout-back-button:hover,
.admin-buttons .btn:hover,
.elementor-button:hover,
.ticket-btn:hover,
.create-ticket:hover,
.create-ticket-btn:hover {

    transform: translateY(-2px) !important;

}


/* ---------- حالت کلیک ---------- */

button:active,
.btn:active,
.buy:active,
.hero-btn:active,
.account-action-btn:active,
.checkout-pay-button:active,
.checkout-back-button:active,
.admin-buttons .btn:active,
.elementor-button:active,
.ticket-btn:active,
.create-ticket:active,
.create-ticket-btn:active {

    transform: translateY(0) !important;

}


/* =========================================================
   دکمه ساخت تیکت
========================================================= */

.ticket-btn,
.create-ticket,
.create-ticket-btn {

    color: #ffffff !important;

    opacity: 1 !important;

    text-decoration: none !important;

    display: inline-flex !important;

    align-items: center !important;

    justify-content: center !important;

    position: relative;

    transition:
        background-color .25s ease,
        color .25s ease,
        box-shadow .25s ease,
        transform .25s ease !important;

}


/* متن داخل دکمه تیکت */

.ticket-btn *,
.create-ticket *,
.create-ticket-btn * {

    color: #ffffff !important;

    opacity: 1 !important;

}


/* Hover تیکت */

.ticket-btn:hover,
.create-ticket:hover,
.create-ticket-btn:hover {

    color: #ffffff !important;

    transform: translateY(-2px) !important;

}


/* =========================================================
   کادرها
========================================================= */

.card,
.category-card,
.box,
.device-card {

    transition:
        background-color .3s ease,
        border-color .3s ease,
        box-shadow .3s ease,
        transform .3s ease !important;

}


/* هاور نرم کادرها */

.card:hover,
.category-card:hover,
.box:hover,
.device-card:hover {

    transition:
        background-color .3s ease,
        border-color .3s ease,
        box-shadow .3s ease,
        transform .3s ease !important;

}


/* =========================================================
   حذف پرش‌های ناخواسته
========================================================= */

.card:hover,
.category-card:hover,
.box:hover {

    /* فقط ظاهر تغییر کند */
    transform: translateY(-4px) !important;

}


/* =========================================================
   لینک‌های فوتر
========================================================= */

.footer a {

    transition:
        color .3s ease,
        opacity .3s ease !important;

}


/* =========================================================
   جلوگیری از Selection با دوبار کلیک
========================================================= */

.card *,
.category-card *,
.box *,
.device-card *,
button *,
.btn *,
.buy *,
.hero-btn *,
.ticket-btn *,
.create-ticket *,
.create-ticket-btn * {

    user-select: none !important;
    -webkit-user-select: none !important;

}


/* =========================================================
   فوکوس بدون پرش
========================================================= */

button:focus,
.btn:focus,
.buy:focus,
.hero-btn:focus,
.ticket-btn:focus,
.create-ticket:focus,
.create-ticket-btn:focus {

    outline: none !important;

}


/* =========================================================
   Hover خیلی نرم
========================================================= */

@media (hover: hover) {

    button,
    .btn,
    .buy,
    .hero-btn,
    .ticket-btn,
    .create-ticket,
    .create-ticket-btn,
    .card,
    .category-card,
    .box,
    .device-card {

        will-change: transform;

    }

}

/* =========================================================
   FINAL ULTRA SMOOTH HOVER / SELECTION FIX
   DIAMOND PLAYER SHOP
========================================================= */

/* -----------------------------------------
   1. جلوگیری از انتخاب سریع متن کل سایت
----------------------------------------- */

html,
body,
body * {
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    user-select: none !important;
}

/* داخل فیلدها امکان انتخاب و کپی متن باقی بماند */
input,
textarea,
select,
input *,
textarea *,
select * {
    -webkit-user-select: text !important;
    -moz-user-select: text !important;
    user-select: text !important;
}


/* -----------------------------------------
   2. حرکت و Hover همه عناصر خیلی نرم
----------------------------------------- */

button,
.btn,
.buy,
.hero-btn,
.account-action-btn,
.checkout-pay-button,
.checkout-back-button,
.admin-buttons .btn,
.elementor-button,
.ticket-btn,
.create-ticket,
.create-ticket-btn,
.card,
.category-card,
.box,
.device-card,
.logo,
.logo img,
.sidebar a,
.footer a,
.header a,
.menu a,
.actions a {

    transition:
        transform .6s cubic-bezier(.25,.8,.25,1),
        background-color .6s ease,
        background .6s ease,
        color .6s ease,
        border-color .6s ease,
        box-shadow .6s ease,
        opacity .6s ease !important;
}


/* -----------------------------------------
   3. دکمه‌ها
   حرکت خیلی کم و نرم
----------------------------------------- */

button:hover,
.btn:hover,
.buy:hover,
.hero-btn:hover,
.account-action-btn:hover,
.checkout-pay-button:hover,
.checkout-back-button:hover,
.admin-buttons .btn:hover,
.elementor-button:hover,
.ticket-btn:hover,
.create-ticket:hover,
.create-ticket-btn:hover {

    transition:
        transform .6s cubic-bezier(.25,.8,.25,1),
        background-color .6s ease,
        background .6s ease,
        color .6s ease,
        box-shadow .6s ease !important;

    transform: translateY(-2px) !important;
}


/* -----------------------------------------
   4. هنگام کلیک پرش نداشته باشند
----------------------------------------- */

button:active,
.btn:active,
.buy:active,
.hero-btn:active,
.account-action-btn:active,
.checkout-pay-button:active,
.checkout-back-button:active,
.admin-buttons .btn:active,
.elementor-button:active,
.ticket-btn:active,
.create-ticket:active,
.create-ticket-btn:active {

    transform: translateY(0) !important;

    transition:
        transform .2s ease,
        background-color .2s ease,
        box-shadow .2s ease !important;
}


/* -----------------------------------------
   5. کارت‌ها
   Hover آرام و بدون پرش
----------------------------------------- */

.card,
.category-card,
.box,
.device-card {

    transition:
        transform .7s cubic-bezier(.25,.8,.25,1),
        background .6s ease,
        background-color .6s ease,
        border-color .6s ease,
        box-shadow .6s ease !important;
}


.card:hover {
    transform: translateY(-5px) !important;
}

.category-card:hover {
    transform: translateY(-5px) !important;
}

.box:hover {
    transform: translateY(-5px) !important;
}

.device-card:hover {
    transform: translateY(-3px) !important;
}


/* -----------------------------------------
   6. جلوگیری از حرکت ناگهانی
----------------------------------------- */

.card *,
.category-card *,
.box *,
.device-card * {

    user-select: none !important;
    -webkit-user-select: none !important;
}


/* -----------------------------------------
   7. هدر
   مهم: تمام Transform های قبلی خنثی می‌شوند
----------------------------------------- */

.header,
.header *,
.header .container,
.header .logo,
.header .logo *,
.header .menu,
.header .menu *,
.header .actions,
.header .actions * {

    transition:
        transform .7s cubic-bezier(.25,.8,.25,1),
        color .6s ease,
        background-color .6s ease,
        background .6s ease,
        border-color .6s ease,
        box-shadow .6s ease,
        opacity .6s ease !important;
}


/* لینک‌های هدر */

.header a,
.header button,
.menu a,
.actions a,
.actions button {

    transition:
        transform .7s cubic-bezier(.25,.8,.25,1),
        color .6s ease,
        background-color .6s ease,
        box-shadow .6s ease,
        opacity .6s ease !important;
}


/* اگر هدر هنگام Hover جابه‌جا می‌شود،
   حرکت را بسیار کم می‌کنیم */

.header a:hover,
.menu a:hover,
.actions a:hover,
.header button:hover,
.actions button:hover {

    transition:
        transform .7s cubic-bezier(.25,.8,.25,1),
        color .6s ease,
        background-color .6s ease,
        box-shadow .6s ease !important;

    transform: translateY(-1px) !important;
}


/* -----------------------------------------
   8. لوگوی هدر
----------------------------------------- */

.header .logo,
.header .logo img {

    transition:
        transform .7s cubic-bezier(.25,.8,.25,1),
        box-shadow .6s ease,
        opacity .6s ease !important;
}

.header .logo:hover,
.header .logo img:hover {

    transform: none !important;
}


/* -----------------------------------------
   9. فوتر
   مهم: translateX قبلی حذف می‌شود
----------------------------------------- */

.footer,
.footer *,
.footer .container,
.footer-grid {

    transition:
        transform .7s cubic-bezier(.25,.8,.25,1),
        color .6s ease,
        background-color .6s ease,
        background .6s ease,
        border-color .6s ease,
        box-shadow .6s ease,
        opacity .6s ease !important;
}


/* لینک‌های فوتر */

.footer a {

    transition:
        transform .7s cubic-bezier(.25,.8,.25,1),
        color .6s ease,
        opacity .6s ease !important;
}


/* قبلاً این داشتی:
   transform: translateX(-4px);

   اینجا کامل خنثی می‌کنیم */

.footer a:hover {

    color: #60a5fa !important;

    transform: translateX(-2px) !important;

    transition:
        transform .7s cubic-bezier(.25,.8,.25,1),
        color .6s ease,
        opacity .6s ease !important;
}


/* -----------------------------------------
   10. دکمه ساخت تیکت
   متن کاملاً سفید + بدون پرش
----------------------------------------- */

.ticket-btn,
.create-ticket,
.create-ticket-btn,
.ticket-button,
.open-ticket {

    color: #fff !important;

    opacity: 1 !important;

    transform: translateY(0) !important;

    transition:
        transform .7s cubic-bezier(.25,.8,.25,1),
        background-color .6s ease,
        background .6s ease,
        color .6s ease,
        box-shadow .6s ease !important;
}


.ticket-btn *,
.create-ticket *,
.create-ticket-btn *,
.ticket-button *,
.open-ticket * {

    color: #fff !important;

    opacity: 1 !important;
}


/* Hover تیکت */

.ticket-btn:hover,
.create-ticket:hover,
.create-ticket-btn:hover,
.ticket-button:hover,
.open-ticket:hover {

    color: #fff !important;

    transform: translateY(-2px) !important;

    transition:
        transform .7s cubic-bezier(.25,.8,.25,1),
        background-color .6s ease,
        background .6s ease,
        box-shadow .6s ease !important;
}


/* -----------------------------------------
   11. Focus بدون پرش
----------------------------------------- */

button:focus,
.btn:focus,
.buy:focus,
.hero-btn:focus,
.ticket-btn:focus,
.create-ticket:focus,
.create-ticket-btn:focus,
.header a:focus,
.footer a:focus {

    outline: none !important;
}


/* -----------------------------------------
   12. جلوگیری از انتخاب شدن با Drag
----------------------------------------- */

img,
button,
.btn,
.buy,
.hero-btn,
.card,
.category-card,
.box,
.device-card,
.logo,
.footer,
.header {

    -webkit-user-drag: none !important;
}


/* -----------------------------------------
   13. اگر مرورگر/المنتور Transform قبلی
   را با !important اعمال کرد
----------------------------------------- */

.header:hover,
.footer:hover {

    transform: none !important;
}


/* =========================================================
   HEADER FINAL SMOOTH FIX
   سرعت معمولی و نرم
   بدون دست زدن به تیکت
========================================================= */

.header,
.header * {

    transition:
        color .3s ease,
        background-color .3s ease,
        border-color .3s ease,
        box-shadow .3s ease,
        opacity .3s ease !important;

}


/* لینک‌های هدر */
.header a,
.header a * {

    transition:
        color .3s ease,
        background-color .3s ease,
        border-color .3s ease,
        box-shadow .3s ease,
        opacity .3s ease !important;

    transform: none !important;
}


/* وقتی موس روی لینک هدر است */
.header a:hover,
.header a:hover * {

    transform: none !important;

}


/* لوگو */
.header .logo,
.header .logo * {

    transition:
        opacity .3s ease,
        color .3s ease,
        box-shadow .3s ease !important;

    transform: none !important;
}


/* دکمه‌ها و آیتم‌های هدر */
.header button,
.header .btn,
.header .actions a,
.header .menu a {

    transition:
        background-color .3s ease,
        color .3s ease,
        border-color .3s ease,
        box-shadow .3s ease,
        opacity .3s ease !important;

    transform: none !important;
}


/* Hover دکمه‌ها */
.header button:hover,
.header .btn:hover,
.header .actions a:hover,
.header .menu a:hover {

    transform: none !important;

}


/* جلوگیری از انتخاب متن */
.header,
.header * {

    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    user-select: none !important;

}


/* جلوگیری از پرش خود هدر */
.header,
.header:hover {

    transform: none !important;

}

/* =========================================================
   CREATE TICKET - SMOOTH HOVER
========================================================= */

.create-ticket,
.create-ticket-btn,
.ticket-btn,
.ticket-button,
.open-ticket,
a[href*="ticket"] {

    color: #fff !important;
    opacity: 1 !important;
    transform: none !important;

    transition:
        background-color .25s ease,
        color .25s ease,
        box-shadow .25s ease,
        opacity .25s ease !important;
}


/* متن داخل دکمه */
.create-ticket *,
.create-ticket-btn *,
.ticket-btn *,
.ticket-button *,
.open-ticket *,
a[href*="ticket"] * {

    color: #fff !important;
    opacity: 1 !important;

    transition:
        color .25s ease,
        opacity .25s ease !important;

    transform: none !important;
}


/* Hover */
.create-ticket:hover,
.create-ticket-btn:hover,
.ticket-btn:hover,
.ticket-button:hover,
.open-ticket:hover,
a[href*="ticket"]:hover {

    color: #fff !important;
    opacity: 1 !important;
    transform: none !important;

    background: #1d4ed8 !important;

    box-shadow:
        0 10px 30px rgba(37,99,235,.30) !important;
}


/* متن هنگام Hover */
.create-ticket:hover *,
.create-ticket-btn:hover *,
.ticket-btn:hover *,
.ticket-button:hover *,
.open-ticket:hover *,
a[href*="ticket"]:hover * {

    color: #fff !important;
    opacity: 1 !important;
    transform: none !important;
}


/* کلیک */
.create-ticket:active,
.create-ticket-btn:active,
.ticket-btn:active,
.ticket-button:active,
.open-ticket:active,
a[href*="ticket"]:active {

    transform: none !important;
}


/* فوکوس */
.create-ticket:focus,
.create-ticket-btn:focus,
.ticket-btn:focus,
.ticket-button:focus,
.open-ticket:focus,
a[href*="ticket"]:focus {

    color: #fff !important;
    opacity: 1 !important;
    transform: none !important;
}

/* =========================================================
   CREATE TICKET - SMOOTH HOVER FINAL
========================================================= */

.create-ticket,
.create-ticket-btn,
.ticket-btn,
.ticket-button,
.open-ticket,
a[href*="ticket"] {

    color: #ffffff !important;
    opacity: 1 !important;

    /* بدون جابه‌جایی */
    transform: none !important;

    /* فقط تغییرات ظاهری، نرم */
    transition:
        background-color 0.22s ease,
        color 0.22s ease,
        box-shadow 0.22s ease,
        border-color 0.22s ease !important;
}


/* متن داخل دکمه */
.create-ticket *,
.create-ticket-btn *,
.ticket-btn *,
.ticket-button *,
.open-ticket *,
a[href*="ticket"] * {

    color: #ffffff !important;
    opacity: 1 !important;

    transform: none !important;

    transition:
        color 0.22s ease,
        opacity 0.22s ease !important;
}


/* Hover */
.create-ticket:hover,
.create-ticket-btn:hover,
.ticket-btn:hover,
.ticket-button:hover,
.open-ticket:hover,
a[href*="ticket"]:hover {

    color: #ffffff !important;
    opacity: 1 !important;

    transform: none !important;

    background: #1d4ed8 !important;

    box-shadow:
        0 10px 30px rgba(37,99,235,.30) !important;
}


/* متن در Hover */
.create-ticket:hover *,
.create-ticket-btn:hover *,
.ticket-btn:hover *,
.ticket-button:hover *,
.open-ticket:hover *,
a[href*="ticket"]:hover * {

    color: #ffffff !important;
    opacity: 1 !important;

    transform: none !important;
}

/* =========================================================
   HEADER - VERY SMOOTH HOVER
========================================================= */

/* خود آیتم‌های هدر */
.header a,
.header button,
.header .logo,
.header .logo img,
.header .menu a,
.header .actions a,
.header .actions button {

    transition:
        color .3s ease,
        background-color .3s ease,
        border-color .3s ease,
        box-shadow .3s ease,
        opacity .3s ease,
        transform .3s ease !important;

}


/* لینک‌های منو */
.header .menu a:hover,
.header .actions a:hover {

    transform: translateY(-2px) !important;

}


/* لوگو */
.header .logo,
.header .logo img {

    transition:
        transform .3s ease,
        box-shadow .3s ease,
        opacity .3s ease !important;

}

.header .logo:hover {

    transform: scale(1.02) !important;

}

.header .logo img:hover {

    transform: scale(1.05) !important;

}


/* دکمه‌های هدر */
.header button:hover,
.header .actions button:hover {

    transform: translateY(-2px) !important;

}


/* =========================================================
   جلوگیری از پرش
========================================================= */

.header a,
.header button,
.header .logo,
.header .logo img {

    will-change: transform, opacity, color, background-color;

}


/* =========================================================
   جلوگیری از Select شدن متن
========================================================= */

.header,
.header * {

    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    user-select: none !important;

}