/* Refined black / gold interactions. Shared by the home and reading pages. */
.btn{--glow:255,200,61;transition:color .2s,box-shadow .24s,filter .2s,transform .18s;text-shadow:none}
.btn--silver{--glow:213,218,224;color:#17212e}
.btn--orange{--glow:255,136,42}
.btn--silver:focus-visible,.btn--silver:active{color:#dd8d05;text-shadow:none}
.btn:focus-visible{box-shadow:inset 0 1px 0 rgba(255,255,255,.75),0 0 0 3px rgba(var(--glow),.18),0 0 24px rgba(var(--glow),.36),0 10px 32px rgba(var(--glow),.25)}
@media(hover:hover) and (pointer:fine){
 .btn:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.85),0 0 0 2px rgba(var(--glow),.17),0 0 26px rgba(var(--glow),.4),0 12px 36px rgba(var(--glow),.28)}
 .btn--silver:hover{color:#dd8d05;text-shadow:none;filter:none}
}
.mobile-actions .btn:focus-visible{box-shadow:0 0 0 2px rgba(var(--glow),.2),0 0 20px rgba(var(--glow),.3)}
.btn:active{box-shadow:inset 0 2px 5px rgba(0,0,0,.15),0 0 20px rgba(var(--glow),.3)}
/* Smaller controls use a restrained halo rather than a large CTA glow. */
.language-option,.menu-toggle,.menu-close,.detail-close,.feature-select,.text-toggle{transition:color .2s,border-color .2s,background .2s,box-shadow .2s}
.feature-select,.text-toggle{border-radius:8px}
.menu-close,.detail-close{display:grid;place-items:center;padding:0;line-height:1;box-sizing:border-box}
.menu-close svg,.detail-close svg{display:block;width:20px;height:20px;flex:none}
@media(hover:hover) and (pointer:fine){
 :is(.language-option,.menu-toggle,.menu-close,.detail-close):hover{color:var(--gold);border-color:rgba(255,200,61,.65);background:#222018;box-shadow:0 0 0 3px rgba(255,200,61,.06),0 0 20px rgba(255,200,61,.16)}
 :is(.feature-select,.text-toggle):hover{color:#ffe99a;background:rgba(255,200,61,.035);box-shadow:0 0 18px rgba(255,200,61,.1);text-decoration:none}
}
:is(.language-option,.menu-toggle,.menu-close,.detail-close,.feature-select,.text-toggle):focus-visible{outline:2px solid var(--gold);outline-offset:3px;box-shadow:0 0 20px rgba(255,200,61,.2)}
:is(.menu-close,.detail-close):active{transform:scale(.95)}
/* One moving pill, with a silver layer fading in when iOS is selected. */
.tabs.tabs--sliding{position:relative;isolation:isolate;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px;width:280px;max-width:100%;padding:4px;border-color:#303036;background:#141416;box-shadow:inset 0 1px 3px rgba(0,0,0,.4)}
.tabs__indicator{position:absolute;z-index:0;pointer-events:none;left:4px;top:4px;bottom:4px;width:calc((100% - 12px)/2);border-radius:999px;background:var(--gold-fill);box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 0 15px rgba(255,200,61,.16);transform:translateX(0);transition:transform .32s cubic-bezier(.22,.7,.2,1),box-shadow .3s}
.tabs__indicator::after{content:'';position:absolute;inset:0;border-radius:inherit;background:var(--silver-fill);opacity:0;transition:opacity .28s}
.tabs[data-active="ios"]>.tabs__indicator{transform:translateX(calc(100% + 4px));box-shadow:inset 0 1px 0 rgba(255,255,255,.85),0 0 15px rgba(213,218,224,.18)}
.tabs[data-active="ios"]>.tabs__indicator::after{opacity:1}
.tabs.tabs--sliding button[data-tab]{position:relative;z-index:1;min-width:0;padding:0 18px;background:transparent;box-shadow:none;transform:none;text-shadow:none;transition:color .2s,box-shadow .2s,background .2s}
.tabs.tabs--sliding button[data-tab][aria-pressed="true"]{background:transparent;color:#17212e;text-shadow:none}
@media(hover:hover) and (pointer:fine){
 .tabs.tabs--sliding button[data-tab][aria-pressed="false"]:hover{transform:none;background:rgba(255,255,255,.055);box-shadow:inset 0 0 0 1px rgba(255,255,255,.16),0 0 16px rgba(255,200,61,.08);color:#fff1ca}
 .tabs.tabs--sliding button[data-tab][aria-pressed="true"]:hover{color:#17212e;background:rgba(255,255,255,.08);box-shadow:0 0 16px rgba(255,200,61,.16);text-shadow:none;transform:none}
}
.tabs.tabs--sliding button[data-tab]:active{background:rgba(255,255,255,.12);transform:none}
/* FAQ: quiet dark cards with a fine gold rim; text never slides sideways. */
.faq .faq__list{border:0;display:flex;flex-direction:column;gap:12px}
.faq .faq__list>details{border:1px solid #29292e;border-radius:16px;background:linear-gradient(135deg,#151517,#101012);transition:border-color .22s,box-shadow .22s}
.faq .faq__list>details>summary{padding:20px 22px;border-radius:15px;background:transparent;color:var(--text);box-shadow:none;gap:20px}
.faq .faq__list>details>summary>span{transform:none!important}
.faq .faq__list>details>summary svg{padding:6px;box-sizing:content-box;border:1px solid #37342b;background:#1b1a17;box-shadow:none;stroke:#dfbc65;transition:transform .22s,background .22s,border-color .22s,box-shadow .22s}
.faq .faq__list>details>p{padding:0 22px 22px;max-width:48em}
.faq .faq__list>details[open]{border-color:rgba(255,200,61,.4);background:linear-gradient(135deg,#1b1a17,#111113);box-shadow:0 0 22px rgba(255,200,61,.055)}
.faq .faq__list>details[open]>summary{color:#ffe4a0}
.faq .faq__list>details[open]>summary svg{background:#282218;border-color:#756038}
@media(hover:hover) and (pointer:fine){
 .faq .faq__list>details:has(>summary:hover){border-color:#756038;box-shadow:0 0 0 1px rgba(255,200,61,.04),0 6px 24px rgba(0,0,0,.2),0 0 20px rgba(255,200,61,.05)}
 .faq .faq__list>details>summary:hover{color:#fff0bd;background:transparent;box-shadow:none}
 .faq .faq__list>details>summary:hover svg{border-color:#b89b52;background:#27231b;box-shadow:0 0 14px rgba(255,200,61,.12)}
}
.faq .faq__list>details>summary:focus-visible{outline:2px solid #d5b15c;outline-offset:3px;background:transparent;box-shadow:0 0 18px rgba(255,200,61,.1)}
.faq .faq__list>details>summary:active{background:rgba(255,255,255,.025)}
@media(max-width:700px){.tabs.tabs--sliding{width:252px}.faq .faq__list{gap:10px}.faq .faq__list>details>summary{padding:16px;gap:12px}.faq .faq__list>details>p{padding:0 16px 18px}.faq .faq__list>details>summary svg{padding:5px}}
@media(prefers-reduced-motion:reduce){.tabs__indicator,.tabs__indicator::after,.tabs.tabs--sliding button,.btn,.faq .faq__list>details,.faq summary svg{transition:none!important}}

/* The selected silver platform pill follows the same readable deep-gold feedback. */
@media(hover:hover) and (pointer:fine){.tabs.tabs--sliding button[data-tab="ios"][aria-pressed="true"]:hover{color:#dd8d05}}
.tabs.tabs--sliding button[data-tab="ios"][aria-pressed="true"]:focus-visible{color:#dd8d05}

.btn--silver:hover,.btn--silver:focus-visible,.btn--silver:active{background:var(--silver-fill);filter:none}
/* Mobile drawer reflects the visible section or the current reading page. */
#mobile-menu nav a{position:relative;padding:20px 30px 20px 8px;border:0;border-bottom:1px solid var(--line);border-radius:0;background:transparent;box-shadow:none;transition:color .2s,background .2s}
#mobile-menu nav a::before{content:'';position:absolute;left:8px;bottom:-1px;width:32px;height:2px;background:var(--gold);opacity:0;transform:scaleX(.4);transform-origin:left;transition:opacity .2s,transform .2s}
#mobile-menu nav a[aria-current]{color:var(--gold);background:transparent;box-shadow:none}
#mobile-menu nav a[aria-current]::before{opacity:1;transform:scaleX(1)}
#mobile-menu nav a[aria-current]::after{content:'';position:absolute;right:10px;top:50%;width:7px;height:7px;margin-top:-4px;border-top:1.5px solid currentColor;border-right:1.5px solid currentColor;transform:rotate(45deg)}
#mobile-menu nav a:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
@media(hover:hover) and (pointer:fine){#mobile-menu nav a:hover{color:#ffe4a0;background:rgba(255,255,255,.025)}}
/* Touch press feedback complements persistent selected/open states. */
.btn.is-touch-pressed,.mobile-actions .btn.is-touch-pressed{transform:scale(.97);box-shadow:inset 0 1px 0 rgba(255,255,255,.75),0 0 0 2px rgba(var(--glow),.2),0 0 26px rgba(var(--glow),.42)}
.btn--gold.is-touch-pressed,.btn--orange.is-touch-pressed{color:#fff}
.btn--silver.is-touch-pressed{color:#dd8d05;background:var(--silver-fill);filter:none;text-shadow:none}
:is(.language-option,.menu-toggle,.menu-close,.detail-close,.feature-select,.text-toggle,.page-link).is-touch-pressed{color:var(--gold);border-color:#b89b52;box-shadow:0 0 18px rgba(255,200,61,.22)}
.menu-toggle.is-touch-pressed span{background:var(--gold)}
.feature.is-touch-pressed,.feature:has(.is-touch-pressed),.topup__list li.is-touch-pressed{border-color:#d5b15c;box-shadow:0 0 24px rgba(255,200,61,.2)}
.feature.is-touch-pressed h3{color:var(--gold)}
.faq .faq__list>details:has(>summary.is-touch-pressed){border-color:#b89b52;box-shadow:0 0 20px rgba(255,200,61,.16)}
.faq .faq__list>details>summary.is-touch-pressed,.guide-detail summary.is-touch-pressed{color:#ffe4a0;background:rgba(255,200,61,.035)}
.tabs.tabs--sliding button[data-tab].is-touch-pressed{box-shadow:inset 0 0 0 1px rgba(255,200,61,.5),0 0 18px rgba(255,200,61,.22)}
.tabs.tabs--sliding button[data-tab="ios"][aria-pressed="true"].is-touch-pressed{color:#dd8d05}
#mobile-menu nav a.is-touch-pressed{color:#ffe4a0;background:rgba(255,255,255,.035)}
@media(prefers-reduced-motion:reduce){.btn.is-touch-pressed{transform:none}}

#mobile-menu nav a.menu-live-chat{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-right:8px}
#mobile-menu .menu-live-chat>span[aria-hidden]{color:var(--gold);font-size:18px}

.language-fallback{display:block;width:max-content;margin:20px auto;padding:12px;color:var(--gold)}

/* Shared segmented-control treatment for the two in-page languages. */
.enhanced .language-switch{display:grid}
.language-switch{position:relative;isolation:isolate;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px;width:108px;flex:none;padding:4px;border:1px solid #303036;border-radius:999px;background:#141416;box-shadow:inset 0 1px 3px #0006}
.language-switch__indicator{position:absolute;z-index:0;pointer-events:none;left:2px;top:4px;bottom:4px;width:calc((100% - 12px)/2 + 10px);border-radius:999px;background:var(--gold-fill);box-shadow:inset 0 1px 0 #ffffffb3,0 0 15px #ffc83d29;transition:transform .32s cubic-bezier(.22,.7,.2,1)}
html[lang=en] .language-switch__indicator{transform:translateX(calc(100% - 12px))}
.language-switch .language-option{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;min-width:0;min-height:32px;padding:0 6px;border:0;border-radius:999px;background:transparent;color:var(--muted);font-size:13px;font-weight:800;cursor:pointer}
.language-switch .language-option[aria-pressed=true]{color:#17212e}
.language-switch .language-option:focus-visible{outline:2px solid var(--gold);outline-offset:4px}
@media(hover:hover){.language-switch .language-option[aria-pressed=false]:hover{color:#fff1ca;background:#ffffff0e}.language-switch .language-option[aria-pressed=true]:hover{color:#17212e;background:#ffffff14}}
@media(prefers-reduced-motion:reduce){.language-switch__indicator{transition:none}}

.language-option[data-language=id][aria-pressed=true]{transform:translateX(3px)}
.language-option[data-language=en][aria-pressed=true]{transform:translateX(-3px)}