/* =====================================================================
   منوی طلایی - warm "Golden Spoon" theme: shared parts
   Cream paper, brushed gold and dark-brown glass. Physical keyboard keys.
   Authored right-to-left; assets/js/mz-ltr.js mirrors it for English.
   ===================================================================== */
:root {
    --wm-ink: #3a2711;
    --wm-ink-soft: #6b5436;
    --wm-cream-1: #fffaf0;
    --wm-cream-2: #f6e9cd;
    --wm-cream-3: #ecd9b0;
    --wm-gold-1: #fff0b8;
    --wm-gold-2: #f0c560;
    --wm-gold-3: #d9a339;
    --wm-gold-4: #b9801f;
    --wm-brown-1: #4a3420;
    --wm-brown-2: #2d1e10;
    --wm-brown-3: #352414;

    --wm-paper: linear-gradient(160deg, #fffaf0 0%, #f6e9cd 55%, #ecd9b0 100%);
    --wm-glass: linear-gradient(180deg, rgba(74,52,32,.92), rgba(32,21,11,.94));

    /* gold key */
    --key-grad: linear-gradient(180deg, #fff0b8 0%, #f0c560 22%, #d9a339 54%, #b9801f 100%);
    --key-up: inset 0 1px 0 rgba(255,255,255,.85), inset 0 -3px 4px rgba(120,76,10,.45),
              0 6px 0 #7a4f0d, 0 7px 0 #4d3006, 0 13px 18px rgba(30,15,0,.45);
    --key-down: inset 0 2px 3px rgba(120,76,10,.5), inset 0 -1px 2px rgba(120,76,10,.3),
                0 1px 0 #7a4f0d, 0 2px 0 #4d3006, 0 3px 6px rgba(30,15,0,.4);

    /* dark glass key */
    --keyd-grad: linear-gradient(180deg, #5a4129 0%, #3a2816 55%, #2a1b0d 100%);
    --keyd-up: inset 0 1px 0 rgba(255,225,150,.35), inset 0 -3px 4px rgba(0,0,0,.45),
               0 6px 0 #140b04, 0 7px 0 #000, 0 12px 18px rgba(0,0,0,.5);
    --keyd-down: inset 0 2px 4px rgba(0,0,0,.6), 0 1px 0 #140b04, 0 2px 0 #000, 0 3px 6px rgba(0,0,0,.5);
}

/* ---------------- physical keys ---------------- */
.key {
    position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    border: 0; cursor: pointer; font-family: inherit; font-weight: 800; text-decoration: none;
    color: #3a2306; background: var(--key-grad); border-radius: 16px;
    box-shadow: var(--key-up);
    transform: translateY(0);
    /* release: springs back up with a small overshoot */
    transition: transform .2s cubic-bezier(.34, 1.7, .5, 1), box-shadow .2s cubic-bezier(.34, 1.7, .5, 1), filter .15s;
    -webkit-user-select: none; user-select: none; touch-action: manipulation;
}
.key::after { /* glossy top cap */
    content: ''; position: absolute; inset: 2px 3px auto 3px; height: 42%; border-radius: 14px 14px 40% 40%;
    background: linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,0)); pointer-events: none;
}
.key:hover { filter: brightness(1.05); }
.key:active, .key.is-pressed {
    transform: translateY(5px); box-shadow: var(--key-down);
    transition: transform .045s ease-out, box-shadow .045s ease-out;   /* press: fast */
}
.key-dark { color: #f6d77b; background: var(--keyd-grad); box-shadow: var(--keyd-up); border: 1px solid rgba(246,215,123,.55); }
.key-dark::after { background: linear-gradient(180deg, rgba(255,230,160,.22), rgba(255,230,160,0)); }
.key-dark:active, .key-dark.is-pressed { box-shadow: var(--keyd-down); }
.key[disabled], .key.disabled { filter: grayscale(.9) brightness(.7); cursor: not-allowed; }

/* golden line icons (gradient defined once in <body>) */
.gold-ico .mz-icon { stroke: url(#mzGold); stroke-width: 1.7; fill: none;
    filter: drop-shadow(0 1.5px 0 rgba(80,45,0,.9)) drop-shadow(0 4px 5px rgba(0,0,0,.45)) drop-shadow(0 0 5px rgba(246,215,123,.35)); }

/* ---------------- language pill ---------------- */
.lang-switch { display: inline-flex; gap: 2px; padding: 3px; border-radius: 12px; background: rgba(0,0,0,.45);
    border: 1px solid rgba(246,215,123,.4); direction: ltr; }
.lang-switch a { display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px; border-radius: 9px; font-size: 11px; font-weight: 800;
    color: #e8cf8a; text-decoration: none; font-family: Tahoma, Arial, sans-serif; line-height: 1.4; }
.lang-switch a.active { color: #3a2306; background: var(--key-grad); box-shadow: inset 0 1px 0 rgba(255,255,255,.8), 0 3px 0 #7a4f0d; }
.lang-switch .mz-icon { width: 15px; height: 15px; }
.lang-pill { padding: 5px; border-radius: 999px; background: linear-gradient(180deg, rgba(60,42,24,.9), rgba(26,17,9,.92));
    border: 1px solid rgba(246,215,123,.6); box-shadow: inset 0 1px 0 rgba(255,225,150,.25), 0 6px 14px rgba(0,0,0,.45); }
.lang-pill a { padding: 7px 14px; border-radius: 999px; font-size: 12.5px; font-family: 'Vazirmatn', Tahoma, sans-serif; }
.lang-pill a.active { box-shadow: inset 0 1px 0 rgba(255,255,255,.8), inset 0 -2px 3px rgba(120,76,10,.4), 0 3px 0 #7a4f0d; }

@media (prefers-reduced-motion: reduce) { .key, .key:active { transition: none; } }