.adhkar-listening{border:1px solid #cbb77d65;border-radius:22px;padding:1.4rem 1.5rem;margin:1.4rem 0 1.8rem;background:radial-gradient(ellipse at top right,#355c484d,transparent 65%),#11342de0;box-shadow:0 12px 35px #00000012}.adhkar-listening *{box-sizing:border-box}.adhkar-listen-heading{display:flex;align-items:center;gap:.9rem;margin-bottom:1.3rem}.adhkar-listen-icon{display:grid;place-items:center;width:44px;height:44px;flex-shrink:0;background:#d9c18710;border:1px solid #d9c18740;border-radius:14px;color:#e2c891}.adhkar-listen-icon svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linejoin:round;stroke-linecap:round}.adhkar-listen-heading .section-kicker{font-size:.8125rem;margin:0 0 .25rem;color:#a8bfae}.adhkar-listen-heading h2{font-family:ArabicDisplay,serif;font-size:1.65rem;line-height:1.65;font-weight:400;margin:0;color:#efdcaf}.adhkar-listen-tag{margin-inline-start:auto;font-size:.75rem;white-space:nowrap;color:#bdcdb4;border:1px solid #acbd9735;padding:.3rem .6rem;border-radius:20px}.adhkar-listen-selects{display:grid;grid-template-columns:minmax(0,1fr) 110px;gap:1rem;margin-bottom:1.1rem}.adhkar-listen-selects label{display:grid;gap:.45rem;font-size:.875rem;color:#bacfbd;min-width:0}.adhkar-listen-selects select{width:100%;min-width:0;min-height:46px;padding:.6rem .8rem;font:inherit;color:#eddfba;background:#0b261f;border:1px solid #bbca9e3d;border-radius:10px;color-scheme:dark}.adhkar-listen-controls{display:grid;grid-template-columns:1fr 1.6fr 1fr;gap:.65rem;align-items:center}.adhkar-listen-controls button{font-size:.875rem;min-height:48px;padding:.6rem .5rem;border-radius:12px;justify-content:center;white-space:nowrap}.adhkar-listen-controls .primary-action{border-color:#e4cb91;background:#e9d3a0;color:#102c22;box-shadow:none}.adhkar-listen-controls .secondary-action{border-color:#acc09336;background:#081f171f;color:#c2d0b9}.adhkar-listen-controls button:disabled{opacity:.35;cursor:default}.adhkar-listen-progress{display:flex;align-items:center;gap:.75rem;margin:1.15rem 0 .5rem;color:#baccb8;font-family:system-ui,sans-serif;font-size:.8125rem;font-variant-numeric:tabular-nums}.adhkar-listen-progress input{flex:1;min-width:0;width:100%;min-height:30px;accent-color:#e4c992;cursor:pointer}.adhkar-listen-progress input:disabled{opacity:.4;cursor:default}.adhkar-listen-progress span{min-width:3rem;white-space:nowrap;text-align:center}.adhkar-listen-status{display:flex;align-items:center;justify-content:space-between;gap:.65rem;min-height:44px}.adhkar-listen-status p{margin:0;line-height:1.8;font-size:.875rem;color:#bbd1bc}.adhkar-listen-status button{flex-shrink:0;font-size:.8125rem;min-height:44px;color:#dcc690;padding:.3rem 0}.adhkar-listen-status button:disabled{opacity:.35;cursor:default}.adhkar-listening[data-state=error] [data-listen=status]{color:#f0c5a3}.adhkar-listen-footer{border-top:1px solid #9eb99726;margin-top:.7rem;padding-top:.8rem;display:flex;gap:.7rem;align-items:baseline;justify-content:space-between}.adhkar-listen-footer p{font-size:.8125rem;line-height:1.9;color:#9fb5a4;margin:0;max-width:32rem}.adhkar-listening :focus-visible{outline:2px solid #edd5a2;outline-offset:3px}.adhkar-listening [data-listen=media]{display:none}
@media(max-width:600px){.adhkar-listening{padding:1.15rem;margin-top:1.1rem}.adhkar-listen-heading{gap:.65rem;flex-wrap:wrap}.adhkar-listen-heading h2{font-size:1.4rem}.adhkar-listen-heading .section-kicker{font-size:.8125rem}.adhkar-listen-tag{display:none}.adhkar-listen-selects{grid-template-columns:minmax(0,1fr) 90px;gap:.65rem}.adhkar-listen-controls{gap:.4rem;grid-template-columns:1fr 1.5fr 1fr}.adhkar-listen-controls button{font-size:.8125rem;padding:.55rem .25rem}.adhkar-listen-status{align-items:flex-start}.adhkar-listen-status p{padding-top:.45rem}.adhkar-listen-footer{flex-direction:column;gap:.4rem}.adhkar-listen-footer p{font-size:.875rem}}
@media(max-width:360px){.adhkar-listening{padding:.9rem}.adhkar-listen-controls{grid-template-columns:1fr 1fr}.adhkar-listen-controls [data-listen=play]{grid-column:1/-1;grid-row:1}.adhkar-listen-heading h2{font-size:1.3rem}.adhkar-listen-selects{grid-template-columns:1fr}.adhkar-listen-selects label:last-child{grid-template-columns:auto 1fr;align-items:center}.adhkar-listen-selects label:last-child select{max-width:110px;justify-self:end}}