/* =====================================================
   STYLE BLOCK 1
   ===================================================== */
*{box-sizing:border-box}

:root{
 --navy:#102a43;
 --navy2:#1d4b6d;
 --gold:#b98a32;
 --gold2:#d6b45f;
 --goldbg:#fff9eb;
 --green:#087f5b;
 --red:#bd4242;
 --blue:#1769aa;
 --text:#17212b;
 --muted:#78828d;
 --bg:#f4f6f8;
 --card:#fff;
 --border:#e5e9ed;
 --shadow:0 10px 35px rgba(26,38,50,.065);
}

html{scroll-behavior:smooth}

body{
 margin:0;
 min-height:100vh;
 font-family:"Vazirmatn",Tahoma,sans-serif;
 color:var(--text);
 background:
   radial-gradient(circle at 90% 0,#fff3cf 0,transparent 23%),
   radial-gradient(circle at 0 25%,#eaf2f8 0,transparent 22%),
   var(--bg);
}

button,input{font-family:inherit}

.app{
 width:min(820px,calc(100% - 26px));
 margin:auto;
 padding:30px 0 65px;
}

/* HEADER */

.hero{
 text-align:center;
 padding:10px 10px 25px;
}

.logo{
 width:70px;
 height:70px;
 margin:auto;
 display:grid;
 place-items:center;
 border-radius:22px;
 background:linear-gradient(135deg,var(--navy),#255a80);
 color:#fff;
 font-size:31px;
 box-shadow:0 13px 32px rgba(16,42,67,.20);
}

.hero h1{
 margin:15px 0 5px;
 font-size:26px;
 font-weight:900;
}

.hero p{
 margin:0;
 color:var(--muted);
 font-size:13px;
}

/* CARD */

.card{
 background:rgba(255,255,255,.97);
 border:1px solid var(--border);
 border-radius:23px;
 padding:22px;
 margin-bottom:14px;
 box-shadow:var(--shadow);
}

.title{
 display:flex;
 align-items:center;
 gap:10px;
 margin-bottom:17px;
 font-weight:800;
}

.number{
 width:32px;
 height:32px;
 flex:0 0 32px;
 display:grid;
 place-items:center;
 border-radius:10px;
 background:#edf2f6;
 color:var(--navy);
}

/* OPTIONS */

.options{
 display:grid;
 grid-template-columns:1fr 1fr;
 gap:10px;
}

.option input{display:none}

.option label{
 display:flex;
 flex-direction:column;
 justify-content:center;
 min-height:80px;
 padding:12px;
 text-align:center;
 border:1.5px solid var(--border);
 border-radius:16px;
 background:#fff;
 cursor:pointer;
 transition:.18s;
}

.option label:hover{
 border-color:#cfb574;
 transform:translateY(-1px);
}

.option input:checked+label{
 border-color:var(--gold);
 background:var(--goldbg);
 color:#73540f;
 box-shadow:0 0 0 3px rgba(185,138,50,.09);
 font-weight:700;
}

.option small{
 margin-top:4px;
 color:var(--muted);
 font-weight:400;
 line-height:1.7;
}

/* COINS */

.coin-grid{
 display:grid;
 grid-template-columns:repeat(5,1fr);
 gap:8px;
}

.coin input{display:none}

.coin label{
 display:flex;
 align-items:center;
 justify-content:center;
 min-height:48px;
 padding:9px 5px;
 border:1.5px solid var(--border);
 border-radius:13px;
 text-align:center;
 cursor:pointer;
 font-size:11.5px;
 transition:.18s;
}

.coin input:checked+label{
 border-color:var(--gold);
 background:var(--goldbg);
 color:#75550f;
 font-weight:800;
}

/* FORM */

.field{margin-top:14px}

.field>label{
 display:block;
 margin-bottom:7px;
 font-size:13px;
 font-weight:700;
}

.input-wrap{position:relative}

input[type=text]{
 width:100%;
 height:52px;
 padding:0 14px 0 79px;
 border:1.5px solid var(--border);
 border-radius:14px;
 outline:none;
 background:#fafbfc;
 color:var(--text);
 font-size:16px;
 font-weight:600;
 transition:.2s;
}

input[type=text]:focus{
 background:#fff;
 border-color:var(--gold);
 box-shadow:0 0 0 4px rgba(185,138,50,.09);
}

.unit{
 position:absolute;
 left:13px;
 top:50%;
 transform:translateY(-50%);
 color:var(--muted);
 font-size:11px;
}

.help{
 margin-top:6px;
 color:var(--muted);
 font-size:10.5px;
 line-height:1.8;
}

/* MARKET */

.market-box{
 margin-top:15px;
 padding:15px;
 border:1px solid #e5dcc3;
 border-radius:17px;
 background:#fffdf8;
}

.market-top{
 display:flex;
 align-items:center;
 justify-content:space-between;
 gap:12px;
}

.market-label{
 color:var(--muted);
 font-size:11px;
}

.market-price{
 margin-top:3px;
 font-size:21px;
 font-weight:900;
 color:var(--navy);
}

.market-meta{
 display:flex;
 flex-wrap:wrap;
 gap:7px 13px;
 margin-top:4px;
 color:var(--muted);
 font-size:9.5px;
}

.status{
 display:flex;
 align-items:center;
 gap:5px;
}

.dot{
 width:7px;
 height:7px;
 border-radius:50%;
 background:#aaa;
}

.dot.ok{background:#16a36c}
.dot.error{background:#d64c4c}
.dot.loading{
 background:#d49a25;
 animation:pulse 1s infinite;
}

@keyframes pulse{
 50%{opacity:.3}
}

.refresh{
 flex:0 0 auto;
 border:1px solid #ddd3b8;
 border-radius:11px;
 background:#fff;
 color:#745710;
 padding:8px 11px;
 cursor:pointer;
 font-size:11px;
}

.refresh:hover{background:#fff8e7}

/* VALUE BOX */

.value-box{
 display:grid;
 grid-template-columns:1fr 1fr;
 gap:9px;
 margin-top:13px;
}

.value-item{
 padding:12px;
 border-radius:13px;
 background:#f6f8fa;
 border:1px solid #edf0f2;
}

.value-item small{
 display:block;
 color:var(--muted);
 font-size:9.5px;
 margin-bottom:3px;
}

.value-item b{
 font-size:13px;
}

/* NOTICE */

.notice{
 margin-top:14px;
 padding:12px 14px;
 border-radius:11px;
 border-right:4px solid var(--gold);
 background:#fff9ec;
 font-size:11.5px;
 line-height:1.9;
}

.notice.red{
 border-right-color:var(--red);
 background:#fff4f4;
 color:#713737;
}

/* BUTTON */

.calculate{
 width:100%;
 height:56px;
 margin-top:20px;
 border:0;
 border-radius:15px;
 background:linear-gradient(135deg,var(--navy),#225276);
 color:#fff;
 font-size:15px;
 font-weight:900;
 cursor:pointer;
 box-shadow:0 10px 24px rgba(16,42,67,.18);
 transition:.2s;
}

.calculate:hover{
 transform:translateY(-1px);
 filter:brightness(1.07);
}

/* RESULT */

.result{
 display:none;
 overflow:hidden;
 border-color:#e5d3a1;
 background:linear-gradient(145deg,#fff,#fffaf0);
}

.result.show{
 display:block;
 animation:show .25s ease;
}

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

.result-caption{
 text-align:center;
 color:var(--muted);
 font-size:12px;
}

.khoms{
 margin:6px 0 0;
 text-align:center;
 color:var(--green);
 font-size:37px;
 font-weight:900;
}

.khoms-unit{
 text-align:center;
 color:var(--muted);
 font-size:12px;
}

.stats{
 display:grid;
 grid-template-columns:repeat(3,1fr);
 gap:8px;
 margin-top:19px;
}

.stat{
 padding:11px 5px;
 text-align:center;
 border:1px solid var(--border);
 border-radius:12px;
 background:#fff;
}

.stat small{
 display:block;
 margin-bottom:4px;
 color:var(--muted);
 font-size:9.5px;
}

.stat b{
 font-size:12px;
}

.formula{
 margin-top:13px;
 padding:14px;
 border-radius:13px;
 background:#f6f8f9;
 font-size:12px;
 line-height:2;
}

.formula-main{
 margin:9px 0;
 padding:11px;
 border-radius:10px;
 background:#fff;
 border:1px solid #e7eaed;
 text-align:center;
 font-weight:800;
 color:var(--navy);
}

.api-credit{
 margin-top:9px;
 text-align:center;
 color:#a0a6ad;
 font-size:9px;
}

.error-box{
 display:none;
 margin-top:12px;
 padding:11px 13px;
 background:#fff2f2;
 border:1px solid #f0cccc;
 border-radius:11px;
 color:#9a3939;
 font-size:11px;
 line-height:1.8;
}

.error-box.show{display:block}

.hidden{display:none!important}

/* FOOTER */

footer{
 padding:11px 15px;
 text-align:center;
 color:#9299a2;
 font-size:9.5px;
 line-height:1.9;
}

/* RESPONSIVE */

@media(max-width:650px){
 .app{
   width:min(100% - 20px,820px);
   padding-top:18px;
 }

 .hero h1{font-size:21px}
 .hero p{font-size:11px}

 .card{
   padding:17px;
   border-radius:19px;
 }

 .options{grid-template-columns:1fr}

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

 .khoms{font-size:29px}
}

@media(max-width:410px){
 .coin-grid{grid-template-columns:1fr 1fr}
 .stats{grid-template-columns:1fr}
 .value-box{grid-template-columns:1fr}
}


/* =====================================================
   STYLE BLOCK 2
   ===================================================== */
.money-in-words{
    min-height:28px;
    margin-top:9px;
    padding:2px 4px;
    color:#173f5f;
    font-size:16px;
    font-weight:800;
    line-height:1.9;
    text-align:right;
}

.money-in-words:empty{
    display:none;
}

@media(max-width:600px){
    .money-in-words{
        font-size:14px;
    }
}


/* =====================================================
   STYLE BLOCK 3
   ===================================================== */
/* =========================================
   GOLD KARAT SELECTOR
   ========================================= */

.gold-karat-box{
    margin-bottom:15px;
}

.gold-karat-title{
    display:block;
    margin-bottom:8px;
    font-size:13px;
    font-weight:700;
}

.gold-karat-options{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:8px;
}

.gold-karat-option input{
    display:none;
}

.gold-karat-option label{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    min-height:62px;
    padding:9px 6px;
    border:1.5px solid var(--border);
    border-radius:13px;
    background:#fff;
    text-align:center;
    cursor:pointer;
    transition:.18s;
    font-size:12px;
}

.gold-karat-option label:hover{
    border-color:#cfb574;
}

.gold-karat-option input:checked + label{
    border-color:var(--gold);
    background:var(--goldbg);
    color:#75550f;
    font-weight:800;
    box-shadow:0 0 0 3px rgba(185,138,50,.08);
}

.gold-karat-option small{
    display:block;
    margin-top:2px;
    color:var(--muted);
    font-size:9px;
    font-weight:400;
}

.custom-karat-box{
    display:none;
    margin-top:11px;
}

.custom-karat-box.show{
    display:block;
    animation:karatShow .2s ease;
}

@keyframes karatShow{
    from{
        opacity:0;
        transform:translateY(-4px);
    }
    to{
        opacity:1;
        transform:none;
    }
}

.karat-info{
    margin-top:8px;
    color:var(--muted);
    font-size:10px;
    line-height:1.8;
}

@media(max-width:520px){

    .gold-karat-options{
        grid-template-columns:1fr;
    }

}


/* =====================================================
   STYLE BLOCK 4
   ===================================================== */
/* =========================================================
   THEME TRANSITIONS
   ========================================================= */

html{
    color-scheme:light;
}

html[data-theme="dark"]{
    color-scheme:dark;
}

body,
.card,
.option label,
.coin label,
.gold-karat-option label,
input[type="text"],
.market-box,
.value-item,
.notice,
.result,
.stat,
.formula,
.formula-main,
.refresh,
.calculate,
.logo,
.money-in-words,
footer{
    transition:
        background-color .25s ease,
        background .25s ease,
        color .25s ease,
        border-color .25s ease,
        box-shadow .25s ease;
}


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

.theme-toggle-wrap{
    position:fixed;
    top:18px;
    left:18px;
    z-index:9999;
}

.theme-toggle{
    width:48px;
    height:48px;
    display:flex;
    align-items:center;
    justify-content:center;

    border:1px solid rgba(16,42,67,.12);
    border-radius:15px;

    background:rgba(255,255,255,.88);
    color:#102a43;

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

    box-shadow:
        0 8px 24px rgba(16,42,67,.11);

    cursor:pointer;
    user-select:none;

    font-family:"Vazirmatn",Tahoma,sans-serif;

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

.theme-toggle:hover{
    transform:translateY(-1px);
}

.theme-toggle:active{
    transform:scale(.96);
}

.theme-toggle-icon{
    font-size:21px;
    line-height:1;
}

.theme-toggle-text{
    display:none;
}


/* =========================================================
   DARK COLOR TOKENS
   ========================================================= */

html[data-theme="dark"]{

    --navy:#dbeafe;
    --navy2:#89b4d8;

    --gold:#d6a84b;
    --gold2:#efc96a;
    --goldbg:#302817;

    --green:#4dd7aa;
    --red:#ff8585;
    --blue:#68b7f4;

    --text:#eef3f7;
    --muted:#aab5c0;

    --bg:#0d1319;
    --card:#151d24;
    --border:#2a3540;

    --shadow:
        0 12px 38px rgba(0,0,0,.28);
}


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

html[data-theme="dark"] body{
    color:var(--text);

    background:
        radial-gradient(
            circle at 90% 0,
            rgba(164,119,36,.13) 0,
            transparent 25%
        ),
        radial-gradient(
            circle at 0 25%,
            rgba(48,99,136,.12) 0,
            transparent 23%
        ),
        #0d1319;
}


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

html[data-theme="dark"] .hero h1{
    color:#f3f6f9;
}

html[data-theme="dark"] .hero p{
    color:#9eabb7;
}

html[data-theme="dark"] .logo{
    color:#f7f9fb;

    background:
        linear-gradient(
            135deg,
            #193b55,
            #286589
        );

    box-shadow:
        0 13px 34px rgba(0,0,0,.35);
}


/* =========================================================
   MAIN CARDS
   ========================================================= */

html[data-theme="dark"] .card{
    background:
        rgba(21,29,36,.97);

    border-color:#2a3540;

    box-shadow:
        0 12px 34px rgba(0,0,0,.20);
}

html[data-theme="dark"] .title{
    color:#f2f5f7;
}

html[data-theme="dark"] .number{
    background:#22313d;
    color:#cbe2f3;
}


/* =========================================================
   RADIO / OPTION CARDS
   ========================================================= */

html[data-theme="dark"] .option label,
html[data-theme="dark"] .coin label,
html[data-theme="dark"] .gold-karat-option label{

    background:#182129;

    border-color:#303c47;

    color:#e8edf1;
}

html[data-theme="dark"] .option label:hover,
html[data-theme="dark"] .coin label:hover,
html[data-theme="dark"] .gold-karat-option label:hover{

    border-color:#8b713b;
}

html[data-theme="dark"] .option input:checked + label,
html[data-theme="dark"] .coin input:checked + label,
html[data-theme="dark"] .gold-karat-option input:checked + label{

    background:
        linear-gradient(
            145deg,
            #332b1b,
            #292317
        );

    border-color:#d0a34a;

    color:#f1c86b;

    box-shadow:
        0 0 0 3px rgba(208,163,74,.10);
}

html[data-theme="dark"] .option small,
html[data-theme="dark"] .gold-karat-option small{
    color:#9faab5;
}


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

html[data-theme="dark"] input[type="text"]{

    background:#111920;

    color:#f1f5f8;

    border-color:#2d3944;

    caret-color:#e0b45c;
}

html[data-theme="dark"] input[type="text"]:focus{

    background:#131d25;

    border-color:#c99d47;

    box-shadow:
        0 0 0 4px rgba(201,157,71,.11);
}

html[data-theme="dark"] input[type="text"]::placeholder{
    color:#71808c;
}

html[data-theme="dark"] .unit{
    color:#8e9aa5;
}

html[data-theme="dark"] .help,
html[data-theme="dark"] .karat-info{
    color:#909da8;
}


/* =========================================================
   MARKET PRICE BOX
   ========================================================= */

html[data-theme="dark"] .market-box{

    background:
        linear-gradient(
            145deg,
            #191d1f,
            #181b1c
        );

    border-color:#4b4027;
}

html[data-theme="dark"] .market-label{
    color:#9faab3;
}

html[data-theme="dark"] .market-price{
    color:#f0f5f8;
}

html[data-theme="dark"] .market-meta{
    color:#909ba5;
}

html[data-theme="dark"] .refresh{

    background:#20272c;

    color:#e6bd61;

    border-color:#56472b;
}

html[data-theme="dark"] .refresh:hover{
    background:#292719;
}


/* =========================================================
   VALUE BOXES
   ========================================================= */

html[data-theme="dark"] .value-item{

    background:#111920;

    border-color:#26323c;
}

html[data-theme="dark"] .value-item small{
    color:#87949e;
}

html[data-theme="dark"] .value-item b{
    color:#f1f5f7;
}


/* =========================================================
   NOTICE
   ========================================================= */

html[data-theme="dark"] .notice{

    background:#2d291d;

    border-right-color:#c99d47;

    color:#ddd2b7;
}

html[data-theme="dark"] .notice.red{

    background:#302020;

    border-right-color:#d96363;

    color:#efb5b5;
}


/* =========================================================
   RESULT
   ========================================================= */

html[data-theme="dark"] .result{

    background:
        linear-gradient(
            145deg,
            #171d21,
            #201d15
        );

    border-color:#5a4929;
}

html[data-theme="dark"] .result-caption{
    color:#9faab3;
}

html[data-theme="dark"] .khoms{
    color:#53d3a8;
}

html[data-theme="dark"] .khoms-unit{
    color:#97a3ad;
}

html[data-theme="dark"] .stat{

    background:#111920;

    border-color:#29343e;
}

html[data-theme="dark"] .stat small{
    color:#8d99a3;
}

html[data-theme="dark"] .stat b{
    color:#eef3f6;
}

html[data-theme="dark"] .formula{

    background:#111920;

    color:#dce4e9;
}

html[data-theme="dark"] .formula-main{

    background:#172129;

    border-color:#303c46;

    color:#f2c869;
}

html[data-theme="dark"] .api-credit{
    color:#76828c;
}


/* =========================================================
   MONEY IN WORDS
   ========================================================= */

html[data-theme="dark"] .money-in-words{
    color:#89c7ef;
}


/* =========================================================
   CALCULATE BUTTON
   ========================================================= */

html[data-theme="dark"] .calculate{

    background:
        linear-gradient(
            135deg,
            #174361,
            #246a91
        );

    color:#fff;

    box-shadow:
        0 10px 26px rgba(0,0,0,.27);
}

html[data-theme="dark"] .calculate:hover{
    filter:brightness(1.10);
}


/* =========================================================
   ERRORS
   ========================================================= */

html[data-theme="dark"] .error-box{

    background:#301e1e;

    color:#f0b2b2;

    border-color:#633535;
}


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

html[data-theme="dark"] footer{
    color:#727f89;
}


/* =========================================================
   THEME BUTTON - DARK
   ========================================================= */

html[data-theme="dark"] .theme-toggle{

    background:
        rgba(24,33,41,.91);

    color:#f2c867;

    border-color:#35424d;

    box-shadow:
        0 8px 26px rgba(0,0,0,.32);
}


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

html[data-theme="dark"] ::selection{
    background:#665126;
    color:#fff;
}


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

html[data-theme="dark"]{
    scrollbar-color:#394650 #11181e;
}

html[data-theme="dark"] ::-webkit-scrollbar{
    width:10px;
    height:10px;
}

html[data-theme="dark"] ::-webkit-scrollbar-track{
    background:#11181e;
}

html[data-theme="dark"] ::-webkit-scrollbar-thumb{
    background:#35434e;
    border-radius:20px;
    border:2px solid #11181e;
}


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

@media(max-width:650px){

    .theme-toggle-wrap{
        top:10px;
        left:10px;
    }

    .theme-toggle{
        width:43px;
        height:43px;
        border-radius:13px;
    }

    .theme-toggle-icon{
        font-size:19px;
    }

}


/* =========================================================
   PRINT
   ========================================================= */

@media print{

    .theme-toggle-wrap{
        display:none !important;
    }

    html,
    html[data-theme="dark"]{
        color-scheme:light;
    }

    html[data-theme="dark"] body{
        background:#fff !important;
        color:#111 !important;
    }

}

/* TRADE-ENTRY-START */

.creator-credit{
    margin-top:7px;
    color:var(--muted);
    font-size:10px;
    font-weight:500;
    line-height:1.8;
}


/* کارت سوم */

.trade-entry-wrap{
    width:100%;
    margin-top:11px;
}

.trade-entry{
    width:100%;
    min-height:76px;

    display:grid;
    grid-template-columns:44px 1fr 25px;
    align-items:center;
    gap:13px;

    padding:14px 18px;

    border:1.5px solid var(--border);
    border-radius:17px;

    background:#fff;

    color:var(--text);
    text-decoration:none;

    cursor:pointer;

    box-shadow:
        0 5px 20px rgba(30,40,50,.035);

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

.trade-entry:hover{
    transform:translateY(-1px);

    border-color:var(--gold);

    background:var(--goldbg);

    box-shadow:
        0 8px 25px rgba(185,138,50,.09);
}

.trade-entry-icon{
    width:44px;
    height:44px;

    display:grid;
    place-items:center;

    border-radius:13px;

    background:#edf2f6;
    color:#173e5c;

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

.trade-entry-copy{
    display:flex;
    flex-direction:column;

    min-width:0;

    text-align:right;
}

.trade-entry-copy strong{
    font-size:15px;
    font-weight:850;
}

.trade-entry-copy small{
    margin-top:3px;

    color:var(--muted);

    font-size:10.5px;
    font-weight:400;
}

.trade-entry-arrow{
    color:var(--muted);
    font-size:27px;

    transition:transform .18s ease;
}

.trade-entry:hover .trade-entry-arrow{
    transform:translateX(-3px);
}


/* DARK */

html[data-theme="dark"] .creator-credit{
    color:#81909c;
}

html[data-theme="dark"] .trade-entry{

    background:#182129;

    border-color:#303c47;

    color:#edf2f5;

    box-shadow:
        0 8px 24px rgba(0,0,0,.12);
}

html[data-theme="dark"] .trade-entry:hover{

    background:
        linear-gradient(
            135deg,
            #30291b,
            #282319
        );

    border-color:#cda34d;
}

html[data-theme="dark"] .trade-entry-icon{

    background:#223340;
    color:#e5bd62;
}

html[data-theme="dark"] .trade-entry-copy small,
html[data-theme="dark"] .trade-entry-arrow{
    color:#98a5af;
}


/* MOBILE */

@media(max-width:650px){

    .creator-credit{
        font-size:9px;
    }

    .trade-entry{
        min-height:70px;

        grid-template-columns:39px 1fr 20px;

        padding:12px 13px;
        gap:10px;
    }

    .trade-entry-icon{
        width:39px;
        height:39px;
        font-size:21px;
    }

    .trade-entry-copy strong{
        font-size:13px;
    }

    .trade-entry-copy small{
        font-size:9.5px;
    }
}

/* TRADE-ENTRY-END */







/* COIN-SVG-ICON-START */

.coin-title-row{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:7px;

    direction:rtl;

    color:inherit;

    font-weight:800;
}

.coin-svg-icon{
    width:20px;
    height:20px;

    flex:0 0 20px;

    display:block;

    color:#d5a842;
}

.coin-svg-icon svg{
    width:100%;
    height:100%;

    display:block;
}

.option input:checked + label
.coin-svg-icon{
    color:#efc45e;
}

html[data-theme="dark"]
.coin-svg-icon{
    color:#e5b955;
}

@media(max-width:650px){

    .coin-title-row{
        gap:6px;
    }

    .coin-svg-icon{
        width:18px;
        height:18px;
        flex-basis:18px;
    }
}

/* COIN-SVG-ICON-END */


/* CALCINO-INTERACTION-SAFETY-START */

html,
body{
    pointer-events:auto !important;
}

body{
    overflow-y:auto !important;
}

/*
 اگر بقایای Loader به هر دلیل در DOM وجود داشته باشد،
 هرگز نباید کلیک صفحه را بگیرد.
*/
#siteLoader{
    display:none !important;
    visibility:hidden !important;
    opacity:0 !important;
    pointer-events:none !important;
}

/* CALCINO-INTERACTION-SAFETY-END */


/* KHOMS-FIQH-NOTE-CSS-START */

.khoms-fiqh-note{
    max-width:620px;

    margin:
        11px auto
        4px;

    padding:
        8px 12px;

    text-align:center;

    color:var(--muted);

    font-size:9.5px;
    font-weight:400;
    line-height:1.9;

    opacity:.82;
}

html[data-theme="dark"] .khoms-fiqh-note{
    color:#93a0aa;
}

@media(max-width:650px){

    .khoms-fiqh-note{
        margin-top:9px;
        padding:6px 8px;

        font-size:8.7px;
        line-height:1.85;
    }
}

/* KHOMS-FIQH-NOTE-CSS-END */


/* CALCINO-FINAL-CAUTION-TYPE-START */

.khoms-fiqh-note{
    font-size:11.5px !important;
    line-height:2 !important;
    font-weight:500 !important;
}

@media(max-width:650px){

    .khoms-fiqh-note{
        font-size:10.5px !important;
        line-height:2 !important;
    }
}

@media(max-width:390px){

    .khoms-fiqh-note{
        font-size:10px !important;
    }
}

/* CALCINO-FINAL-CAUTION-TYPE-END */