/* scroll bar */
/* width */
::-webkit-scrollbar {background: transparent;width: 7px;height: 7px;border-radius: 20px;}
/* Track */
::-webkit-scrollbar-track {border: 2px solid transparent;border-radius: 20px;}
/* Handle */
::-webkit-scrollbar-thumb {background: transparent;border-radius: 20px;}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {background: transparent;}
body {background: rgb(0, 13, 33);height: auto;color: white; text-align: center;overflow: hidden;transition: background-color 0.8s ease, color 0.8s ease;}
body.night-mode {height: auto;background:  #5e5e5e;background: linear-gradient(127deg,  #c5c5c5 0%, rgb(0, 0, 0) 100%);color: #000000;}

#loader {
    position: fixed;
    width: 100%;
    height: 100%;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    background: rgba(0, 0, 0, 0.05);
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;}
#loader img {width: 100px;height: 100px;animation: rotate 1s linear infinite;}
@keyframes rotate {
    0%   { transform: rotate(0deg);}
    100% { transform: rotate(360deg);}
}
#content {display: none;padding: 20px;}
.loadspan{font-family: "Rubik",serif;font-size: 60px;font-weight: 600;color: yellow;text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px  1px 0 #000, 1px  1px 0 #000;animation: blink 1.5s linear infinite;overflow: hidden;}
@keyframes blink {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.1; }
}
.container {
    display: flex;
    justify-content: center;
    align-items: center;
    padding-bottom: 20px;
    overflow-x: hidden;
}
.card {
    overflow-y: scroll;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    width: 495px;
    height: 730px;
    background: rgba(20, 30, 48, 0.6);
    background: -webkit-linear-gradient(65deg, rgba(36, 59, 85, 0.6), rgba(20, 30, 48, 0.6));
    background: linear-gradient(65deg, rgba(36, 59, 85, 0.6), rgba(20, 30, 48, 0.6));
    border: none;
    margin-top: 10px;
    margin-bottom: 10px;
    border-radius: 20px;
    cursor: default;
    box-shadow: 0 0 25px rgb(0, 72, 255);
    z-index: 2;
}

body.night-mode .card{
    background-color: rgba(255, 255, 255, 0);
    box-shadow: 0 0 10px 1px rgb(255, 0, 0);
}

.navbar{
    position: fixed;
    z-index: 20;
    width: 475px;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(12px);
    background: rgba(0, 0, 0, 0.05); /* لایه نیمه‌شفاف */
    box-shadow: 0 30px 30px -25px rgb(0, 119, 252);
    border-bottom: 3px solid rgb(0, 119, 252);
    border-left: 1px solid rgb(0, 119, 252);
    border-right: 1px solid rgb(0, 119, 252);
    border-radius: 20px;
    margin: 5px 10px;
}
body.night-mode .navbar{
    box-shadow: 0 30px 30px -25px rgb(255, 0, 0);
    border-bottom: 3px solid rgb(255, 0, 0);
    border-left: 1px solid rgb(255, 0, 0);
    border-right: 1px solid rgb(255, 0, 0);

}

.dn{
    position: relative;
}
/*Day Night BTN*/
#toggle-btn {
    width: 60px;
    height: 32px;
    border-radius: 20px;
    background-color: #919191;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    transition: background-color 0.5s ease;
    margin: 0 0;
    position: absolute;
    top: 20px;
    left: 60px;
    z-index: 21;
}

#toggle-btn.night {
    background-color: #19ff13;
}


#toggle-btn .icon-wrapper {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background-color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.4s ease, background-color 0.3s ease;
    transform: translateX(-4px); /* شروع */
}

#toggle-btn.night .icon-wrapper {
    transform: translateX(24px);
    background-color: #ffffff;
}

#toggle-btn img {
    width: 18px;
    height: 18px;
}

.iconmother{
    position: relative;
}
.iconA {
    width: 200px;
    height: 46px;
    margin: 0 0;
    position: absolute;
    left: 145px; top: 13px;
    background-color: transparent;
    cursor: default;
    transition: transform 0.8s ease;
    z-index: 22;
}

.iconA:hover, .reload:hover {
    transform: scale(1.05);
}


.reload{
    position: absolute;
    width: 50px;
    left: 10px; top: 22px;
    border: none;
    box-shadow: none;
    font-size: 22px;
    background: transparent;
    cursor: pointer;
    transition: transform 0.8s ease;
}
.reloadicon{
    width: 30px;
    height: 30px;
}

/*Date & Time*/
#datetime-container {
    font-family: iransansx, sans-serif;
    background: transparent;
    color: #fff;
    font-weight: normal;
    user-select: none;
    display: flex;
    flex-direction: column;
    z-index: 21;
    direction: rtl;
    text-align: right;
    cursor: default;
    margin: 15px 460px;
}

#time, #date {
    font-size: 14px;
    letter-spacing: 1px;
    white-space: nowrap;    /* جلوگیری از رفتن به خط بعد */
}

#time {
    color: rgb(64, 153, 255);
    letter-spacing: 2px;
    font-size: 16px;
    font-family: 'iransansx', serif;
}

body.night-mode #time {
    color: rgb(255, 0, 0);
}


.hr1{
    width: 400px;
    height: 2px;
    background-color: white;
    border-radius: 10px;
    border: 1px solid transparent;
    margin-top: -7px;
    z-index: 21;
}

.boxmother{
    display: block;
    position: relative;
}
.Box{
    width: 220px;
    height: 120px;
    display: block;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(12px);
    background:  black;
    background: linear-gradient(127deg, #000000 10%, rgb(0, 49, 190) 280%);
    position: absolute;
    border-radius: 15px;
    padding: 4px 4px;
    z-index: 1;
    transition: transform 0.8s ease;
}
body.night-mode .Box {
    background:  #5e5e5e;
    background: linear-gradient(127deg,  #c5c5c5 0%, rgb(148, 148, 148) 100%);
}
.Box:hover{
    box-shadow: 0 0 10px 1px rgb(0, 72, 255);
    transform: scale(1.05);
}
body.night-mode .Box:hover{
    box-shadow: 0 0 10px 1px rgb(255, 0, 0);
}


.Box1, .Box2, .Box3,.Box4,.Box5{top: 20px;}
.Box6, .Box7, .Box8, .Box9, .Box10{top: 165px;}
.Box11, .Box12, .Box13, .Box14, .Box15{top: 310px;}
.Box16, .Box17, .Box18, .Box19, .Box20{top: 455px;}
.Box21, .Box22, .Box23, .Box24, .Box25{top: 600px;}
.Box26, .Box27, .Box28, .Box29, .Box30{top: 745px;}
.Box31, .Box32, .Box33, .Box34, .Box35{top: 890px;}
.Box36, .Box37, .Box38, .Box39, .Box40{top: 1035px;}
.Box41, .Box42, .Box43, .Box44, .Box45{top: 1180px;}
.Box1, .Box6, .Box11, .Box16, .Box21, .Box26, .Box31, .Box36, .Box41{margin-left: 15px;}
.Box2, .Box7, .Box12, .Box17, .Box22, .Box27, .Box32, .Box37, .Box42{margin-left: 280px;}
.Box3, .Box8, .Box13, .Box18, .Box23, .Box28, .Box33, .Box38, .Box43{margin-left: 545px;}
.Box4, .Box9, .Box14, .Box19, .Box24, .Box29, .Box34, .Box39, .Box44{margin-left: 810px;}
.Box5, .Box10, .Box15, .Box20, .Box25, .Box30, .Box35, .Box40, .Box45{margin-left: 1075px;}





.pricetag{font-size: 20px;display: flex;direction: rtl;z-index: 3;}
.pr{
    min-width: 110px;
    width: auto;
    height: 25px;
    font-family: "iransansx", serif;
    margin: 0 0;
    direction: rtl;
    position: absolute;
    right: 12px;
    top: 10px;
    font-weight: 600;
}
.us{
    display: inline-block;
    width: 20px;
    padding: 1px 1px;
    font-family: "Rounded", serif;
    margin: 0 0;
    position: absolute;
    right: 10px;
    top: 40px;
    text-align: right;
    font-weight: 100;
    font-size: 16px;
}
.flag{width: 60px;height: 60px;display: flex;margin-top: 10px;margin-left: 10px;}

.pricenum{
    display: flex;
    direction: rtl;
    width: 120px;
    color: yellow;
    font-family: "iransansx", serif;
    font-feature-settings: "ss02";
    font-size: 22px;
    flex-wrap: nowrap;
    white-space: nowrap;
    font-weight: 600;
    text-align: center;
    position: absolute;
    left: 100px;
    top: 85px;
    margin: 0 -10px;
    z-index: 10;
}
.body.night-mode .pricenum{color: black;}

.pricechange {
    width: auto;
    height: 22px;
    color: #00cb00;
    border: 1px solid transparent;
    background-color: rgba(0, 21, 37, 0.52);
    border-radius: 5px;
    font-family: "iransansx", serif;
    font-size: 16px;
    font-feature-settings: "ss02";
    z-index: 3;
    padding: 2px 4px;
    margin: 0 0;
    position: absolute;
    left: 15px;
    top: 85px;
}
.body.night-mode .pricechange{color: yellow;background-color: rgba(0, 0, 0, 0.77);}
.ethh{font-size: 15px; top: 55px; left: 80px;}


/* width 390*/
@media only screen and (min-width: 320px) and (max-width: 414px){
    .card{height: 800px; z-index: 2; width: 395px;}
    .navbar {width: 360px;left: 4px;}
    #toggle-btn{left: 45px;top: 12px;transform: scale(0.8);}
    #toggle-btn .icon-wrapper{transform: translateX(-9px);}
    #toggle-btn.night .icon-wrapper {transform: translateX(19px);}
    .reload{top: 12px; left: 1px; transform: scale(0.9);}
    .iconA{left: 100px;transform: scale(0.8); top: 5px}
    #datetime-container{margin: 8px 355px; transform: scale(0.8)}
    .Box{transform: scale(0.77);}


    .Box1,.Box3,.Box5,.Box7,.Box9,.Box11,.Box13,.Box15,.Box17,.Box19,.Box21,.Box23,.Box25,.Box27,.Box29,.Box31,.Box33,.Box35,.Box37,.Box39,.Box41,.Box43,.Box45{margin-left: -19px;}
    .Box2,.Box4,.Box6,.Box8,.Box10,.Box12,.Box14,.Box16,.Box18,.Box20,.Box22,.Box24,.Box26,.Box28,.Box30,.Box32,.Box34,.Box36,.Box38,.Box40,.Box42,.Box44{margin-left: 163px;}
    .Box1,.Box2{top: -15px;}
    .Box3,.Box4{top: 90px;}
    .Box5,.Box6{top: 195px;}
    .Box7,.Box8{top: 300px;}
    .Box9,.Box10{top: 405px;}
    .Box11,.Box12{top: 510px;}
    .Box13,.Box14{top: 615px;}
    .Box15,.Box16{top: 720px;}
    .Box17,.Box18{top: 825px;}
    .Box19,.Box20{top: 930px;}
    .Box21,.Box22{top: 1035px;}
    .Box23,.Box24{top: 1140px;}
    .Box25,.Box26{top: 1245px;}
    .Box27,.Box28{top: 1350px;}
    .Box29,.Box30{top: 1455px;}
    .Box31,.Box32{top: 1560px;}
    .Box33,.Box34{top: 1665px;}
    .Box35,.Box36{top: 1770px;}
    .Box37,.Box38{top: 1875px;}
    .Box39,.Box40{top: 1980px;}
    .Box41,.Box42{top: 2085px;}
    .Box43,.Box44{top: 2190px;}
    .Box45{top: 2295px;}

    .Box:hover{transform: scale(0.78);}
}

/*samsung A51/A71/A32*/
@media only screen and (min-width: 415px) and (max-width: 450px){
    .card{width: 410px; height: 840px;}
    .navbar {width: 395px; left: 13px;}
    #toggle-btn{left: 45px;top: 12px;transform: scale(0.8);}
    #toggle-btn .icon-wrapper{transform: translateX(-9px);}
    #toggle-btn.night .icon-wrapper {transform: translateX(19px);}
    .reload{top: 12px; left: 1px; transform: scale(0.9);}
    .iconA{left: 100px;transform: scale(0.8); top: 5px}
    #datetime-container{margin: 8px 355px; transform: scale(0.8)}
    .Box{transform: scale(0.85);}

    .Box1,.Box3,.Box5,.Box7,.Box9,.Box11,.Box13,.Box15,.Box17,.Box19,.Box21,.Box23,.Box25,.Box27,.Box29,.Box31,.Box33,.Box35,.Box37,.Box39,.Box41,.Box43,.Box45{margin-left: -10px;}
    .Box2,.Box4,.Box6,.Box8,.Box10,.Box12,.Box14,.Box16,.Box18,.Box20,.Box22,.Box24,.Box26,.Box28,.Box30,.Box32,.Box34,.Box36,.Box38,.Box40,.Box42,.Box44{margin-left: 190px;}
    .Box1,.Box2{top: -15px;}
    .Box3,.Box4{top: 100px;}
    .Box5,.Box6{top: 215px;}
    .Box7,.Box8{top: 330px;}
    .Box9,.Box10{top: 445px;}
    .Box11,.Box12{top: 560px;}
    .Box13,.Box14{top: 675px;}
    .Box15,.Box16{top: 790px;}
    .Box17,.Box18{top: 905px;}
    .Box19,.Box20{top: 1020px;}
    .Box21,.Box22{top: 1135px;}
    .Box23,.Box24{top: 1250px;}
    .Box25,.Box26{top: 1365px;}
    .Box27,.Box28{top: 1480px;}
    .Box29,.Box30{top: 1595px;}
    .Box31,.Box32{top: 1710px;}
    .Box33,.Box34{top: 1825px;}
    .Box35,.Box36{top: 1940px;}
    .Box37,.Box38{top: 2055px;}
    .Box39,.Box40{top: 2170px;}
    .Box41,.Box42{top: 2285px;}
    .Box43,.Box44{top: 2400px;}
    .Box45{top: 2515px;}

    .Box:hover{transform: scale(0.87);}
} 
/*iphone 14 Pro Max*/
@media only screen and (min-width: 420px) and (max-width: 435px){.navbar{left: 7px;}}


/*i7+*/
@media only screen and (min-width: 414px) and (max-width: 415px){
    .card{height: 660px; z-index: 2; width: 395px;}
    .navbar {width: 385px;left: 3px; height: 60px;}
    #toggle-btn{left: 50px;top: 12px;transform: scale(0.8);}
    #toggle-btn .icon-wrapper{transform: translateX(-9px);}
    #toggle-btn.night .icon-wrapper {transform: translateX(19px);}
    .reload{top: 12px; left: -2px; transform: scale(0.9);}
    .iconA{left: 100px;transform: scale(0.8); top: 5px}
    #datetime-container{margin: 8px 375px; transform: scale(0.8)}
    .Box{transform: scale(0.83);}

    .Box1,.Box3,.Box5,.Box7,.Box9,.Box11,.Box13,.Box15,.Box17,.Box19,.Box21,.Box23,.Box25,.Box27,.Box29,.Box31,.Box33,.Box35,.Box37,.Box39,.Box41,.Box43,.Box45{margin-left: -14px;}
    .Box2,.Box4,.Box6,.Box8,.Box10,.Box12,.Box14,.Box16,.Box18,.Box20,.Box22,.Box24,.Box26,.Box28,.Box30,.Box32,.Box34,.Box36,.Box38,.Box40,.Box42,.Box44{margin-left: 180px;}
    .Box1,.Box2{top: -14px;}
    .Box3,.Box4{top: 98px;}
    .Box5,.Box6{top: 210px;}
    .Box7,.Box8{top: 322px;}
    .Box9,.Box10{top: 434px;}
    .Box11,.Box12{top: 546px;}
    .Box13,.Box14{top: 658px;}
    .Box15,.Box16{top: 770px;}
    .Box17,.Box18{top: 882px;}
    .Box19,.Box20{top: 994px;}
    .Box21,.Box22{top: 1106px;}
    .Box23,.Box24{top: 1218px;}
    .Box25,.Box26{top: 1330px;}
    .Box27,.Box28{top: 1442px;}
    .Box29,.Box30{top: 1554px;}
    .Box31,.Box32{top: 1666px;}
    .Box33,.Box34{top: 1778px;}
    .Box35,.Box36{top: 1890px;}
    .Box37,.Box38{top: 2002px;}
    .Box39,.Box40{top: 2114px;}
    .Box41,.Box42{top: 2226px;}
    .Box43,.Box44{top: 2338px;}
    .Box45{top: 2450px;}
    .Box:hover{transform: scale(0.85);}
}


/*iphone XR*/
@media only screen and (min-height: 890px) and (max-height: 899px){.card{height: 860px;}}



/*desktop 1280*720*/
@media only screen and (min-width: 950px){
    .card{width: 1350px;height: 750px;overflow: scroll;overflow-x: hidden}
    .navbar{width: 1330px;}
    #datetime-container{margin-right: 20px;}
    .iconA{left: 550px;}
    .reload{top: 20px;}
    .Box{width: 250px; height: 130px;}
    .Box1, .Box2, .Box3,.Box4,.Box5{top: 20px;}
    .Box6, .Box7, .Box8, .Box9, .Box10{top: 165px;}
    .Box11, .Box12, .Box13, .Box14, .Box15{top: 310px;}
    .Box16, .Box17, .Box18, .Box19, .Box20{top: 455px;}
    .Box21, .Box22, .Box23, .Box24, .Box25{top: 600px;}
    .Box26, .Box27, .Box28, .Box29, .Box30{top: 745px;}
    .Box31, .Box32, .Box33, .Box34, .Box35{top: 890px;}
    .Box36, .Box37, .Box38, .Box39, .Box40{top: 1035px;}
    .Box41, .Box42, .Box43, .Box44, .Box45{top: 1180px;}
    .Box1, .Box6, .Box11, .Box16, .Box21, .Box26, .Box31, .Box36, .Box41{margin-left: 15px;}
    .Box2, .Box7, .Box12, .Box17, .Box22, .Box27, .Box32, .Box37, .Box42{margin-left: 280px;}
    .Box3, .Box8, .Box13, .Box18, .Box23, .Box28, .Box33, .Box38, .Box43{margin-left: 545px;}
    .Box4, .Box9, .Box14, .Box19, .Box24, .Box29, .Box34, .Box39, .Box44{margin-left: 810px;}
    .Box5, .Box10, .Box15, .Box20, .Box25, .Box30, .Box35, .Box40, .Box45{margin-left: 1075px;}
    .pricenum{left: 135px; top: 95px;}
    .pricechange{top: 95px; left: 20px;}
    .Box:hover{transform: scale(1.03);}
}