.islamic-navbar{position:sticky;top:0;left:0;right:0;z-index:100;transform-origin:top center;animation:navEntrance 1s cubic-bezier(.34,1.56,.64,1) forwards;pointer-events:all}
@keyframes navEntrance{0%{transform:perspective(1000px) rotateX(-90deg);opacity:0}100%{transform:perspective(1000px) rotateX(0deg);opacity:1}}
/* Navbar tabs sub-bar 3D */
.navbar-tabs-bar{background:rgba(10,22,40,.88);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid rgba(212,175,55,.1);padding:12px 0;display:flex;justify-content:center;gap:15px;perspective:1000px}
.navbar-tab-btn{padding:10px 30px;border-radius:16px;font-family:'Cairo',sans-serif;font-weight:800;font-size:14px;cursor:pointer;background:rgba(212,175,55,.05);color:#8fbc8f;display:flex;align-items:center;gap:8px;transform-style:preserve-3d;transition:all .5s cubic-bezier(.34,1.56,.64,1);border:1px solid rgba(212,175,55,.15);box-shadow:0 4px 15px rgba(0,0,0,.3), inset 0 2px 5px rgba(255,255,255,.05)}
.navbar-tab-btn i{transition:transform .4s;transform:translateZ(10px)}
.navbar-tab-btn:hover{transform:translateZ(15px) translateY(-3px) rotateX(10deg);background:rgba(212,175,55,.15);color:#f5e6a3;border-color:rgba(212,175,55,.4);box-shadow:0 15px 35px rgba(0,0,0,.4), 0 5px 15px rgba(212,175,55,.2)}
.navbar-tab-btn:hover i{transform:translateZ(20px) scale(1.2);color:#d4af37}
.navbar-tab-btn.tab-active{background:linear-gradient(145deg,#dfb83b,#c4a030);color:#0a1628;border-color:rgba(255,215,0,.6);box-shadow:0 10px 30px rgba(212,175,55,.4), inset 0px 2px 10px rgba(255,255,255,.4);transform:translateZ(5px)}
.navbar-tab-btn.tab-active:hover{transform:translateZ(20px) translateY(-3px) rotateX(10deg);box-shadow:0 15px 40px rgba(212,175,55,.5)}
.navbar-inner{background:linear-gradient(135deg,#0a1628 0%,#112a1f 50%,#0a1628 100%);border-bottom:3px solid;border-image:linear-gradient(90deg,transparent,#d4af37,#f0d78c,#d4af37,transparent) 1;box-shadow:0 10px 40px rgba(0,0,0,.5);position:relative;overflow:hidden}
.navbar-inner::before{content:'';position:absolute;inset:0;background:repeating-conic-gradient(from 0deg at 50% 50%,transparent 0deg,rgba(212,175,55,.03) 30deg,transparent 60deg);pointer-events:none}
.navbar-inner::after{content:'';position:absolute;bottom:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(212,175,55,.4),transparent)}
.navbar-content{display:flex;align-items:center;justify-content:space-between;max-width:1400px;margin:0 auto;padding:10px 24px;position:relative;z-index:2}
.navbar-logo{display:flex;align-items:center;gap:12px;text-decoration:none;perspective:800px}
.logo-icon-3d{width:52px;height:52px;position:relative;transform-style:preserve-3d;animation:logoSpin 4s cubic-bezier(0.4, 0, 0.2, 1) infinite alternate}
@keyframes logoSpin{0%{transform:rotateY(-25deg) rotateX(-10deg) scale(0.95)}100%{transform:rotateY(25deg) rotateX(10deg) scale(1.05)}}
.logo-face{position:absolute;inset:0;background:linear-gradient(135deg,#d4af37,#f5e6a3,#b8860b);border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:26px;color:#112a1f;box-shadow:0 10px 30px rgba(212,175,55,.6), inset 0 0 15px rgba(255,255,255,.5);border:2px solid rgba(255,255,255,.4);transform:translateZ(10px)}
.logo-text{font-family:'Cairo',sans-serif;font-size:24px;font-weight:900;background:linear-gradient(135deg,#f5e6a3,#d4af37);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;filter:drop-shadow(0 4px 6px rgba(0,0,0,.5));transform:translateZ(5px)}
.nav-links{display:flex;align-items:center;gap:2px;list-style:none;margin:0;padding:0}
.nav-links li a{display:flex;align-items:center;gap:8px;padding:10px 16px;color:#c8d6c0;text-decoration:none;font-family:'Cairo',sans-serif;font-weight:600;font-size:14px;border-radius:12px;transition:all .3s;position:relative}
.nav-links li a::after{content:'';position:absolute;bottom:2px;left:20%;right:20%;height:2px;background:#d4af37;transform:scaleX(0);transition:transform .3s;border-radius:2px}
.nav-links li a:hover::after{transform:scaleX(1)}
.nav-links li a:hover{color:#d4af37;background:rgba(212,175,55,.08);transform:translateY(-2px)}
.nav-links li a i{font-size:15px;transition:transform .4s}
.nav-links li a:hover i{transform:rotateY(180deg) scale(1.15)}
.navbar-toggle{display:none;background:none;border:2px solid rgba(212,175,55,.4);color:#d4af37;font-size:20px;padding:8px 12px;border-radius:10px;cursor:pointer;transition:all .3s}
.navbar-toggle:hover{background:rgba(212,175,55,.1)}


/* ===== Islamic Forum Section ===== */
.islamic-forum-section{position:relative;padding:80px 0;overflow:hidden;perspective:1000px;min-height:90vh;display:flex;flex-direction:column;justify-content:center;background:linear-gradient(180deg,#050a10 0%,#0a1628 100%)!important}
.forum-bg-pattern{position:absolute;inset:0;background:radial-gradient(circle at 20% 50%,rgba(212,175,55,.07) 0%,transparent 50%),radial-gradient(circle at 80% 50%,rgba(4,120,87,.07) 0%,transparent 50%);pointer-events:none}
.forum-title-container{text-align:center;margin-bottom:50px;position:relative;z-index:5}
.forum-title-ornament{display:flex;align-items:center;justify-content:center;gap:15px;margin-bottom:12px}
.ornament-line{width:80px;height:2px;background:linear-gradient(90deg,transparent,#d4af37,transparent)}
.ornament-icon{color:#d4af37;font-size:18px;animation:ornSpin 4s ease-in-out infinite}
@keyframes ornSpin{0%,100%{transform:scale(1) rotate(0)}50%{transform:scale(1.3) rotate(180deg)}}
.forum-main-title{font-family:'Cairo',sans-serif;font-size:42px;font-weight:800;background:linear-gradient(135deg,#d4af37,#f5e6a3 40%,#d4af37 60%,#b8860b);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;margin:0;line-height:1.4}
.forum-subtitle{color:#8fbc8f;font-family:'Cairo',sans-serif;font-size:15px;margin-top:8px;font-weight:600}

/* 3D Dhikr Circle */
.dhikr-wrapper{position:relative;width:100%;max-width:1200px;margin:0 auto;height:500px;perspective:1200px;z-index:5}
.dhikr-center-glow{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:120px;height:120px;border-radius:50%;background:radial-gradient(circle,rgba(212,175,55,.2) 0%,transparent 70%);animation:cGlow 3s ease-in-out infinite;z-index:1;pointer-events:none}
@keyframes cGlow{0%,100%{transform:translate(-50%,-50%) scale(1);opacity:.5}50%{transform:translate(-50%,-50%) scale(1.8);opacity:1}}
.dhikr-circle{position:absolute;width:100%;height:100%;transform-style:preserve-3d;transition:transform 1s cubic-bezier(.4,0,.2,1)}
.dhikr-topic-card{position:absolute;width:270px;height:370px;left:50%;top:50%;margin-left:-135px;margin-top:-185px;background:linear-gradient(145deg,rgba(26,58,42,.95),rgba(10,22,40,.95));border:2px solid rgba(212,175,55,.25);border-radius:22px;padding:22px 18px;box-shadow:0 20px 60px rgba(0,0,0,.5),inset 0 1px 0 rgba(212,175,55,.15);display:flex;flex-direction:column;align-items:center;backface-visibility:hidden;cursor:pointer;overflow:hidden;text-decoration:none;transition:border-color .4s,box-shadow .4s}
.dhikr-topic-card::before{content:'';position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:repeating-conic-gradient(from 0deg at 50% 50%,transparent 0deg,rgba(212,175,55,.015) 10deg,transparent 20deg);animation:ptnRot 25s linear infinite;pointer-events:none}
@keyframes ptnRot{to{transform:rotate(360deg)}}
.dhikr-topic-card:hover{border-color:rgba(212,175,55,.6);box-shadow:0 25px 80px rgba(212,175,55,.15),inset 0 1px 0 rgba(212,175,55,.3)}
.topic-icon-wrap{width:72px;height:72px;border-radius:50%;background:linear-gradient(135deg,rgba(212,175,55,.12),rgba(212,175,55,.04));border:2px solid rgba(212,175,55,.25);display:flex;align-items:center;justify-content:center;margin-bottom:15px;position:relative;z-index:2;flex-shrink:0;animation:iFloat 3s ease-in-out infinite}
@keyframes iFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.topic-icon-wrap i{font-size:28px;color:#d4af37}
.topic-title{font-family:'Cairo',sans-serif;font-size:14px;font-weight:700;color:#e8e0c8;text-align:center;line-height:1.7;margin-bottom:8px;position:relative;z-index:2;display:-webkit-box;-webkit-line-clamp:3;line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.topic-meta{display:flex;align-items:center;gap:10px;margin-bottom:6px;position:relative;z-index:2}
.topic-author,.topic-date{font-family:'Cairo',sans-serif;font-size:11px;display:flex;align-items:center;gap:4px}
.topic-author{color:#8fbc8f}
.topic-date{color:rgba(212,175,55,.55)}
.topic-divider{width:50px;height:1px;background:linear-gradient(90deg,transparent,#d4af37,transparent);margin:8px 0;position:relative;z-index:2}
.topic-desc{font-family:'Cairo',sans-serif;font-size:11px;color:#9aa0a8;text-align:center;line-height:1.7;position:relative;z-index:2;display:-webkit-box;-webkit-line-clamp:3;line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;flex-grow:1}
.topic-read-btn{display:inline-flex;align-items:center;gap:6px;padding:7px 18px;background:linear-gradient(135deg,rgba(212,175,55,.18),rgba(212,175,55,.08));border:1px solid rgba(212,175,55,.25);border-radius:18px;color:#d4af37;font-family:'Cairo',sans-serif;font-size:11px;font-weight:700;text-decoration:none;transition:all .3s;position:relative;z-index:2;margin-top:auto;flex-shrink:0}
.topic-read-btn:hover{background:linear-gradient(135deg,rgba(212,175,55,.35),rgba(212,175,55,.18));transform:scale(1.05)}

/* Carousel Nav */
.carousel-nav{display:flex;align-items:center;justify-content:center;gap:20px;margin-top:25px;position:relative;z-index:10}
.carousel-btn{width:50px;height:50px;border-radius:50%;background:linear-gradient(135deg,rgba(212,175,55,.15),rgba(212,175,55,.05));border:2px solid rgba(212,175,55,.35);color:#d4af37;font-size:18px;cursor:pointer;transition:all .3s;display:flex;align-items:center;justify-content:center;backdrop-filter:blur(8px)}
.carousel-btn:hover{background:linear-gradient(135deg,rgba(212,175,55,.35),rgba(212,175,55,.15));transform:scale(1.12);box-shadow:0 0 25px rgba(212,175,55,.25)}
.carousel-counter{color:#d4af37;font-family:'Cairo',sans-serif;font-weight:700;font-size:15px;min-width:60px;text-align:center}

/* Particles */
.forum-particle{position:absolute;width:3px;height:3px;background:#d4af37;border-radius:50%;opacity:0;animation:pFloat 10s ease-in-out infinite;z-index:1}
@keyframes pFloat{0%{transform:translateY(0) scale(0);opacity:0}15%{opacity:.5}85%{opacity:.2}100%{transform:translateY(-100vh) scale(1);opacity:0}}

/* Loading */
.forum-loading{display:flex;flex-direction:column;align-items:center;justify-content:center;height:400px;gap:18px}
.forum-spinner{width:50px;height:50px;border:3px solid rgba(212,175,55,.1);border-top-color:#d4af37;border-radius:50%;animation:fSpin 1s linear infinite}
@keyframes fSpin{to{transform:rotate(360deg)}}
.forum-loading-text{color:#d4af37;font-family:'Cairo',sans-serif;font-weight:600;font-size:15px}

@media(max-width:768px){
.forum-main-title{font-size:28px}
.dhikr-wrapper{height:420px}
.dhikr-topic-card{width:230px;height:330px;margin-left:-115px;margin-top:-165px;padding:18px 14px}
.topic-icon-wrap{width:56px;height:56px}
.topic-icon-wrap i{font-size:22px}
.topic-title{font-size:12px}
.carousel-nav{transform:scale(0.85); margin-top:10px;}
}

/* ===== Site Color Harmony - Header Override ===== */
header.glass-effect{background:linear-gradient(135deg,#0a1628,#112a1f,#0a1628)!important;backdrop-filter:blur(20px)!important;border-color:rgba(212,175,55,.2)!important;box-shadow:0 4px 30px rgba(0,0,0,.3)!important}
header h1{color:#e8e0c8!important}
header h1 div{background:linear-gradient(135deg,#d4af37,#f5e6a3)!important;box-shadow:0 4px 15px rgba(212,175,55,.3)!important}
header h1 i{color:#112a1f!important}
header .flex.bg-slate-100\/80,header [class*="bg-slate-100"]{background:rgba(212,175,55,.08)!important;border-color:rgba(212,175,55,.15)!important}
header button[id^="tab-"]{color:#8fbc8f!important;font-family:'Cairo',sans-serif}
header button[id^="tab-"].tab-active{background:linear-gradient(135deg,#d4af37,#c4a030)!important;color:#0a1628!important;box-shadow:0 4px 15px rgba(212,175,55,.3)!important}
header button[id^="tab-"]:hover{color:#d4af37!important}
#search-reciter,#search-radio{background:rgba(255,255,255,.06)!important;border-color:rgba(212,175,55,.15)!important;color:#e8e0c8!important;box-shadow:none!important}
#search-reciter::placeholder,#search-radio::placeholder{color:rgba(212,175,55,.4)!important}
#search-reciter:focus,#search-radio:focus{border-color:rgba(212,175,55,.4)!important;outline-color:rgba(212,175,55,.1)!important}
.text-center.mb-10 h2,.text-center.mb-10 p{color:#e8e0c8!important}
.text-center.mb-10 p{opacity:.7}
#search-reciter+i,#search-radio+i,.fa-search{color:rgba(212,175,55,.4)!important}
body{background:linear-gradient(180deg,#0d1520 0%,#0a1628 20%,#112a1f 50%,#0a1628 80%,#0d1520 100%)!important;background-attachment:fixed!important}
main{color:#e8e0c8}
#reciters-grid .group,#radios-grid .group{background:rgba(26,58,42,.6)!important;border-color:rgba(212,175,55,.12)!important;box-shadow:0 4px 20px rgba(0,0,0,.2)!important}
#reciters-grid .group:hover,#radios-grid .group:hover{border-color:rgba(212,175,55,.35)!important;box-shadow:0 10px 40px rgba(212,175,55,.1)!important}
#reciters-grid .group h3,#radios-grid .group h3{color:#e8e0c8!important}
#reciters-grid .group:hover h3,#radios-grid .group:hover h3{color:#d4af37!important}
#reciters-grid .group div:first-child,#radios-grid .group div:first-child{background:rgba(212,175,55,.08)!important;color:rgba(212,175,55,.5)!important}
#reciters-grid .group:hover div:first-child,#radios-grid .group:hover div:first-child{background:rgba(212,175,55,.15)!important;color:#d4af37!important}
#reciter-details-view .bg-white{background:rgba(26,58,42,.7)!important;border-color:rgba(212,175,55,.15)!important}
#current-reciter-name{color:#e8e0c8!important}
#btn-back-reciters{background:rgba(212,175,55,.1)!important;color:#d4af37!important}
#btn-back-reciters:hover{background:rgba(212,175,55,.2)!important}
#select-moshaf{color:#d4af37!important;background:rgba(212,175,55,.05)!important}
#surahs-grid .group{background:rgba(26,58,42,.5)!important;border-color:rgba(212,175,55,.1)!important}
#surahs-grid .group:hover{border-color:rgba(212,175,55,.3)!important;box-shadow:0 8px 25px rgba(212,175,55,.08)!important}
#surahs-grid .group span{color:#e8e0c8!important}
#surahs-grid .group:hover span{color:#d4af37!important}
#surahs-grid .group div:first-child div{background:rgba(212,175,55,.08)!important;color:rgba(212,175,55,.5)!important}
#surahs-grid .group div:last-child{background:rgba(212,175,55,.1)!important;color:rgba(212,175,55,.5)!important}
#surahs-grid .group:hover div:last-child{background:#d4af37!important;color:#0a1628!important}
.fixed.bottom-6 .glass-effect{background:rgba(10,22,40,.92)!important;border-color:rgba(212,175,55,.2)!important;box-shadow:0 20px 40px rgba(0,0,0,.4)!important}
#now-playing-title{color:#e8e0c8!important}
#now-playing-subtitle{color:rgba(212,175,55,.5)!important}
.islamic-forum-section{background:linear-gradient(180deg,transparent 0%,rgba(212,175,55,.03) 50%,transparent 100%)!important}

/* ===== Mosque Mihrab Frame ===== */
.mihrab-frame{position:absolute;inset:0;width:100%;height:100%;display:flex;justify-content:center;align-items:center;pointer-events:none}
.mihrab-arch{position:absolute;bottom:0;width:100%;height:140%;max-height:1200px;min-height:800px;object-fit:cover;z-index:0;opacity:0.8}
.mihrab-content{position:relative;width:100%;height:100%;z-index:10;display:flex;align-items:center;justify-content:center;pointer-events:all;padding-top:10vh}
.mihrab-corner{position:absolute;font-size:36px;color:rgba(212,175,55,.6);font-family:serif;z-index:2;pointer-events:none}
.mihrab-corner-tl{top:60px;left:40px;transform:rotate(-45deg)}
.mihrab-corner-tr{top:60px;right:40px;transform:rotate(45deg)}
.mihrab-corner-bl{bottom:60px;left:40px;transform:rotate(-135deg)}
.mihrab-corner-br{bottom:60px;right:40px;transform:rotate(135deg)}
@media(max-width:768px){
  .mihrab-frame{min-height:400px;margin-top:10px}
  .mihrab-corner{display:none}
}

/* ===== 3D Iframe Modal ===== */
.iframe-modal{position:fixed;inset:0;z-index:9000;display:none;align-items:center;justify-content:center;perspective:1500px;padding:20px}
.iframe-modal.om-open{display:flex}
.iframe-modal-overlay{position:absolute;inset:0;background:rgba(0,0,0,.85);backdrop-filter:blur(8px);opacity:0;transition:opacity .4s ease}
.iframe-modal.om-open .iframe-modal-overlay{opacity:1}
.iframe-modal-window{position:relative;z-index:2;width:100%;max-width:1200px;height:90vh;background:linear-gradient(145deg,#0d1a12,#0a1628);border:2px solid rgba(212,175,55,.2);border-radius:24px;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 30px 80px rgba(0,0,0,.8),0 0 40px rgba(212,175,55,.1);transform:scale(0.8) rotateX(-20deg) rotateY(10deg);opacity:0;transition:transform .6s cubic-bezier(.34,1.56,.64,1),opacity .4s ease;transform-style:preserve-3d}
.iframe-modal.om-open .iframe-modal-window{transform:scale(1) rotateX(0) rotateY(0);opacity:1}
.iframe-modal-header{display:flex;align-items:center;justify-content:space-between;padding:12px 24px;background:rgba(10,22,40,.9);border-bottom:1px solid rgba(212,175,55,.15);flex-shrink:0}
.iframe-title{font-family:'Cairo',sans-serif;font-size:16px;font-weight:700;color:#d4af37;display:flex;align-items:center;gap:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.iframe-actions{display:flex;align-items:center;gap:8px}
.iframe-action-btn{width:36px;height:36px;border-radius:10px;background:rgba(212,175,55,.05);border:1px solid rgba(212,175,55,.15);color:#8fbc8f;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .3s}
.iframe-action-btn:hover{background:rgba(212,175,55,.15);color:#d4af37;transform:translateY(-2px)}
.iframe-action-btn.close-btn:hover{background:rgba(231,76,60,.2);color:#e74c3c;border-color:rgba(231,76,60,.4)}
.iframe-wrapper{position:relative;flex-grow:1;background:#fff}
.iframe-loader{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:linear-gradient(145deg,#0d1a12,#0a1628);z-index:2;pointer-events:none;transition:opacity .3s}
#iframe-content{position:absolute;inset:0;width:100%;height:100%;border:none;z-index:1;background:#fff}
@media(max-width:768px){.iframe-modal-window{height:100vh;max-height:100vh;border-radius:0}.iframe-modal{padding:0}}

/* ===== Islamic Tools Button & Panel ===== */
.tools-fab{position:fixed;bottom:90px;left:20px;z-index:45;width:56px;height:56px;border-radius:50%;background:linear-gradient(135deg,#d4af37,#c4a030);border:2px solid rgba(245,230,163,.5);color:#0a1628;font-size:22px;cursor:pointer;box-shadow:0 6px 25px rgba(212,175,55,.4);transition:all .3s;display:flex;align-items:center;justify-content:center;animation:fabPulse 3s ease-in-out infinite}
.tools-fab:hover{transform:scale(1.1) rotate(15deg);box-shadow:0 8px 35px rgba(212,175,55,.6)}
@keyframes fabPulse{0%,100%{box-shadow:0 6px 25px rgba(212,175,55,.4)}50%{box-shadow:0 6px 25px rgba(212,175,55,.4),0 0 0 10px rgba(212,175,55,.1)}}
.tools-fab-label{position:fixed;bottom:100px;left:84px;z-index:45;background:rgba(10,22,40,.9);color:#d4af37;font-family:'Cairo',sans-serif;font-size:12px;font-weight:700;padding:6px 14px;border-radius:8px;pointer-events:none;opacity:0;transition:opacity .3s;white-space:nowrap;border:1px solid rgba(212,175,55,.2)}
.tools-fab:hover+.tools-fab-label{opacity:1}

/* Tools Modal */
.tools-modal{position:fixed;inset:0;z-index:200;display:none;align-items:center;justify-content:center;padding:15px}
.tools-modal.open{display:flex}
.tools-modal-overlay{position:absolute;inset:0;background:rgba(0,0,0,.7);backdrop-filter:blur(6px)}
.tools-modal-content{position:relative;z-index:1;width:100%;max-width:900px;max-height:90vh;background:linear-gradient(145deg,#0d1a12,#0a1628);border:2px solid rgba(212,175,55,.2);border-radius:24px;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 30px 80px rgba(0,0,0,.6)}
.tools-modal-header{display:flex;align-items:center;justify-content:space-between;padding:18px 24px;border-bottom:1px solid rgba(212,175,55,.15);flex-shrink:0}
.tools-modal-title{font-family:'Cairo',sans-serif;font-size:20px;font-weight:800;color:#d4af37;display:flex;align-items:center;gap:10px}
.tools-modal-close{width:40px;height:40px;border-radius:50%;background:rgba(212,175,55,.1);border:1px solid rgba(212,175,55,.2);color:#d4af37;font-size:18px;cursor:pointer;transition:all .3s;display:flex;align-items:center;justify-content:center}
.tools-modal-close:hover{background:rgba(212,175,55,.2);transform:rotate(90deg)}
.tools-modal-body{padding:24px;overflow-y:auto;flex-grow:1}

/* Tools Grid */
.tools-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:16px}
.tool-card{background:rgba(26,58,42,.5);border:1px solid rgba(212,175,55,.12);border-radius:18px;padding:22px 16px;text-align:center;cursor:pointer;transition:all .3s;display:flex;flex-direction:column;align-items:center;gap:12px}
.tool-card:hover{border-color:rgba(212,175,55,.4);transform:translateY(-4px);box-shadow:0 12px 35px rgba(212,175,55,.1)}
.tool-card-icon{width:56px;height:56px;border-radius:50%;background:linear-gradient(135deg,rgba(212,175,55,.12),rgba(212,175,55,.04));border:1px solid rgba(212,175,55,.2);display:flex;align-items:center;justify-content:center;font-size:24px;color:#d4af37;transition:all .3s}
.tool-card:hover .tool-card-icon{background:linear-gradient(135deg,rgba(212,175,55,.25),rgba(212,175,55,.1));transform:scale(1.1)}
.tool-card-name{font-family:'Cairo',sans-serif;font-size:13px;font-weight:700;color:#e8e0c8}

/* Tool View (inner content) */
.tool-view{display:none}
.tool-view.active{display:block}
.tool-back-btn{background:none;border:none;color:#d4af37;font-family:'Cairo',sans-serif;font-size:14px;font-weight:700;cursor:pointer;display:flex;align-items:center;gap:6px;margin-bottom:18px;transition:color .3s;padding:0}
.tool-back-btn:hover{color:#f5e6a3}
.tool-section-title{font-family:'Cairo',sans-serif;font-size:18px;font-weight:800;color:#d4af37;margin-bottom:16px;text-align:center}

/* Form Elements */
.tool-label{font-family:'Cairo',sans-serif;font-size:13px;font-weight:600;color:#8fbc8f;margin-bottom:6px;display:block}
.tool-input,.tool-select{width:100%;padding:10px 14px;background:rgba(255,255,255,.05);border:1px solid rgba(212,175,55,.15);border-radius:12px;color:#e8e0c8;font-family:'Cairo',sans-serif;font-size:14px;outline:none;transition:border-color .3s;box-sizing:border-box}
.tool-input:focus,.tool-select:focus{border-color:rgba(212,175,55,.4)}
.tool-select option{background:#0a1628;color:#e8e0c8}
.tool-btn{padding:10px 24px;background:linear-gradient(135deg,#d4af37,#c4a030);border:none;border-radius:12px;color:#0a1628;font-family:'Cairo',sans-serif;font-size:14px;font-weight:700;cursor:pointer;transition:all .3s}
.tool-btn:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(212,175,55,.3)}
.tool-result{background:rgba(212,175,55,.06);border:1px solid rgba(212,175,55,.15);border-radius:14px;padding:16px;margin-top:16px}
.tool-result-row{display:flex;justify-content:space-between;align-items:center;padding:8px 0;border-bottom:1px solid rgba(212,175,55,.06);font-family:'Cairo',sans-serif;font-size:13px}
.tool-result-row:last-child{border:none}
.tool-result-label{color:#8fbc8f;font-weight:600}
.tool-result-value{color:#d4af37;font-weight:700}
.tool-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:600px){.tool-form-grid{grid-template-columns:1fr}}

/* Tasbih */
.tasbih-counter{width:160px;height:160px;border-radius:50%;background:linear-gradient(145deg,rgba(26,58,42,.8),rgba(10,22,40,.9));border:3px solid rgba(212,175,55,.3);display:flex;align-items:center;justify-content:center;margin:0 auto 20px;cursor:pointer;transition:all .15s;user-select:none;-webkit-user-select:none;position:relative}
.tasbih-counter:active{transform:scale(.93);border-color:#d4af37;box-shadow:0 0 30px rgba(212,175,55,.3)}
.tasbih-count{font-family:'Cairo',sans-serif;font-size:52px;font-weight:800;color:#d4af37}
.tasbih-target{font-family:'Cairo',sans-serif;font-size:12px;color:rgba(212,175,55,.5);text-align:center;margin-bottom:10px}
.tasbih-dhikr{font-family:'Cairo',sans-serif;font-size:18px;font-weight:700;color:#e8e0c8;text-align:center;margin-bottom:15px}
.tasbih-presets{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-bottom:16px}
.tasbih-preset{padding:6px 14px;background:rgba(212,175,55,.08);border:1px solid rgba(212,175,55,.15);border-radius:20px;color:#8fbc8f;font-family:'Cairo',sans-serif;font-size:11px;font-weight:700;cursor:pointer;transition:all .3s}
.tasbih-preset:hover,.tasbih-preset.active{background:rgba(212,175,55,.2);color:#d4af37;border-color:rgba(212,175,55,.4)}
.tasbih-actions{display:flex;justify-content:center;gap:10px}
.tasbih-action-btn{padding:8px 20px;border-radius:10px;border:1px solid rgba(212,175,55,.2);background:rgba(212,175,55,.06);color:#d4af37;font-family:'Cairo',sans-serif;font-size:12px;font-weight:700;cursor:pointer;transition:all .3s}
.tasbih-action-btn:hover{background:rgba(212,175,55,.15)}
.tasbih-progress{width:180px;height:4px;background:rgba(212,175,55,.1);border-radius:4px;margin:12px auto;overflow:hidden}
.tasbih-progress-bar{height:100%;background:#d4af37;border-radius:4px;transition:width .2s}

/* Calendar */
.cal-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.cal-nav{width:36px;height:36px;border-radius:50%;background:rgba(212,175,55,.08);border:1px solid rgba(212,175,55,.15);color:#d4af37;cursor:pointer;transition:all .3s;display:flex;align-items:center;justify-content:center;font-size:14px}
.cal-nav:hover{background:rgba(212,175,55,.2)}
.cal-month-year{font-family:'Cairo',sans-serif;font-size:16px;font-weight:700;color:#d4af37;text-align:center}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;text-align:center}
.cal-day-name{font-family:'Cairo',sans-serif;font-size:10px;color:rgba(212,175,55,.5);font-weight:700;padding:6px 0}
.cal-day{font-family:'Cairo',sans-serif;font-size:12px;color:#8fbc8f;padding:8px 4px;border-radius:8px;cursor:default;transition:all .2s}
.cal-day.today{background:rgba(212,175,55,.2);color:#d4af37;font-weight:700;border:1px solid rgba(212,175,55,.3)}
.cal-day.empty{visibility:hidden}
.cal-converter{margin-top:20px;padding-top:16px;border-top:1px solid rgba(212,175,55,.1)}

/* Prayer Times */
.prayer-city-select{margin-bottom:20px}
.prayer-times-grid{display:grid;gap:8px}
.prayer-time-row{display:flex;justify-content:space-between;align-items:center;padding:14px 18px;background:rgba(26,58,42,.4);border:1px solid rgba(212,175,55,.1);border-radius:14px;transition:all .3s}
.prayer-time-row:hover{border-color:rgba(212,175,55,.3)}
.prayer-name{font-family:'Cairo',sans-serif;font-size:15px;font-weight:700;color:#e8e0c8;display:flex;align-items:center;gap:8px}
.prayer-name i{color:#d4af37;font-size:14px}
.prayer-time{font-family:'Cairo',sans-serif;font-size:16px;font-weight:800;color:#d4af37}
.prayer-date-info{text-align:center;margin-bottom:16px;font-family:'Cairo',sans-serif;font-size:13px;color:#8fbc8f}

/* Inheritance form */
.heir-checkbox{display:flex;align-items:center;gap:8px;padding:8px 12px;background:rgba(26,58,42,.3);border:1px solid rgba(212,175,55,.08);border-radius:10px;cursor:pointer;transition:all .3s;font-family:'Cairo',sans-serif;font-size:12px;color:#8fbc8f}
.heir-checkbox:hover{border-color:rgba(212,175,55,.25)}
.heir-checkbox input{accent-color:#d4af37;width:16px;height:16px}
.heir-checkbox.checked{border-color:rgba(212,175,55,.3);background:rgba(212,175,55,.06);color:#d4af37}
.heir-count{width:50px;padding:4px 8px;background:rgba(255,255,255,.05);border:1px solid rgba(212,175,55,.15);border-radius:6px;color:#d4af37;font-size:12px;text-align:center;font-family:'Cairo',sans-serif}

@media(max-width:768px){
.tools-grid{grid-template-columns:repeat(2,1fr)}
.tools-fab{bottom:auto; top:85px; left:15px; width:48px; height:48px; font-size:18px; z-index:150;}
.tools-fab-label{bottom:auto; top:95px; left:75px; opacity:0 !important;} /* Hide label on mobile to save space */
.tasbih-counter{width:130px;height:130px}
.tasbih-count{font-size:40px}
}


/* ===== Tashahhud & Toggle ===== */
.forum-title-wrapper {display:flex;align-items:center;justify-content:center;gap:15px;position:relative;z-index:20;}
.tashahhud-icon {color:#d4af37;margin-left:10px;animation:tashahhudAnim 2s infinite alternate ease-in-out;transform-origin:bottom center;display:inline-block;}
@keyframes tashahhudAnim{0%{transform:rotateZ(-10deg) translateY(0)}100%{transform:rotateZ(10deg) translateY(-5px)}}
.forum-toggle-btn {width:45px;height:45px;border-radius:12px;background:linear-gradient(135deg,rgba(212,175,55,.15),rgba(212,175,55,.05));border:2px solid rgba(212,175,55,.4);color:#d4af37;font-size:20px;cursor:pointer;transition:all .4s;transform-style:preserve-3d;}
.forum-toggle-btn:hover {background:rgba(212,175,55,.2);transform:rotateX(15deg) translateZ(10px);box-shadow:0 10px 20px rgba(0,0,0,.5), inset 0 2px 10px rgba(212,175,55,.3);}
/* Mosque full fit fix */
.islamic-forum-section {display:flex; flex-direction:column; align-items:center; justify-content:flex-start; padding:15px 0; min-height:100vh; position:relative;}
.forum-title-container {position:relative; z-index:20; margin-bottom:15px; transform:translateY(-15px); width:100%; top:auto; left:auto;}
/* 3D Title Hover Effects */
.forum-main-title { position: relative; display: inline-block; cursor: default; }
.hover-crescents { position: absolute; inset: 0; pointer-events: none; z-index:-1; }
.hover-crescents i { position: absolute; top: 50%; left: 50%; margin:-10px 0 0 -10px; color: #d4af37; font-size: 24px; opacity: 0; transition: all 0.8s cubic-bezier(0.34, 1.56, 0.64, 1); transform: translate(0, 0) scale(0.2) rotateX(90deg); filter: drop-shadow(0 0 5px rgba(212,175,55,0.8)); }
.forum-main-title:hover .hc-1 { opacity: 1; transform: translate(-80px, -60px) scale(1.1) rotate(-20deg) rotateX(0deg); transition-delay: 0s;}
.forum-main-title:hover .hc-2 { opacity: 1; transform: translate(90px, -70px) scale(1.3) rotate(35deg) rotateX(0deg); transition-delay: 0.1s;}
.forum-main-title:hover .hc-3 { opacity: 1; transform: translate(-100px, 30px) scale(0.9) rotate(-60deg) rotateX(0deg); transition-delay: 0.2s;}
.forum-main-title:hover .hc-4 { opacity: 1; transform: translate(110px, 20px) scale(1.2) rotate(50deg) rotateX(0deg); transition-delay: 0.15s;}
.forum-main-title:hover .hc-5 { opacity: 1; transform: translate(0px, -90px) scale(1.4) rotate(10deg) rotateX(0deg); transition-delay: 0.05s;}
.mihrab-frame {position:relative; width:100%; max-width:1200px; flex-grow:1; min-height:650px; display:flex; justify-content:center; align-items:center; inset:auto; overflow:visible;}
.mihrab-arch {position:absolute; top:-120px; left:0; right:0; bottom:auto; height:calc(100% + 120px); width:100%; object-fit:fill;}
.mihrab-content {position:relative; z-index:10; width:100%; height:100%; display:flex; align-items:center; justify-content:center;}
.dhikr-wrapper {transform:scale(1);}
@media(max-width:768px){.dhikr-wrapper{transform:scale(0.8);}.mihrab-frame{min-height:450px;}}
/* Hide section logic */
.islamic-forum-section.section-hidden { height:80px !important; min-height:80px !important; overflow:hidden !important; padding-bottom:0 !important; }
.islamic-forum-section.section-hidden .mihrab-frame, .islamic-forum-section.section-hidden .carousel-nav {opacity:0;pointer-events:none;transform:scale(0.8);transition:all 0.8s cubic-bezier(.4,0,.2,1);}
.mihrab-frame {transition:all 0.8s cubic-bezier(.4,0,.2,1);transform:scale(1);opacity:1;}
.carousel-nav {transition:all 0.8s cubic-bezier(.4,0,.2,1);transform:scale(1);opacity:1;}

/* Full Section Hover Erupt Particles */
.section-erupt-particles { position:absolute; inset:0; pointer-events:none; z-index:15; overflow:hidden; }
.section-erupt-particles i { position:absolute; top:50%; left:50%; color:rgba(212,175,55,0.7); filter:drop-shadow(0 0 10px rgba(212,175,55,0.9)); opacity:0; transition:all 1.5s cubic-bezier(0.175, 0.885, 0.32, 1.275); transform:translate(-50%, -50%) scale(0) rotate(0deg); }
.islamic-forum-section:hover .section-erupt-particles .sp-1 { opacity:1; transform:translate(-300px, -250px) scale(1.8) rotate(45deg); transition-delay:0s; }
.islamic-forum-section:hover .section-erupt-particles .sp-2 { opacity:1; transform:translate(350px, -200px) scale(2.2) rotate(-30deg); transition-delay:0.1s; }
.islamic-forum-section:hover .section-erupt-particles .sp-3 { opacity:1; transform:translate(-450px, 150px) scale(1.3) rotate(60deg); transition-delay:0.2s; }
.islamic-forum-section:hover .section-erupt-particles .sp-4 { opacity:1; transform:translate(400px, 250px) scale(2) rotate(-90deg); transition-delay:0.15s; }
.islamic-forum-section:hover .section-erupt-particles .sp-5 { opacity:1; transform:translate(0px, -350px) scale(2.8) rotate(15deg); transition-delay:0.05s; }
.islamic-forum-section:hover .section-erupt-particles .sp-6 { opacity:1; transform:translate(-200px, 350px) scale(1.5) rotate(120deg); transition-delay:0.3s; }
.islamic-forum-section:hover .section-erupt-particles .sp-7 { opacity:1; transform:translate(250px, -50px) scale(1.7) rotate(-75deg); transition-delay:0.25s; }

/* Header right layout fixes */
.header-right-actions {display:flex;align-items:center;gap:30px;}
.navbar-tabs-bar {display:flex;align-items:center;background:rgba(10,22,40,0.6);border:1px solid rgba(212,175,55,.15);border-radius:14px;padding:4px;perspective:500px;box-shadow:inset 0 4px 10px rgba(0,0,0,.5);width:max-content;}
.navbar-tab-btn {background:transparent;border:none;color:#8fbc8f;font-family:'Cairo',sans-serif;font-size:14px;font-weight:700;padding:8px 20px;border-radius:10px;cursor:pointer;transition:all .4s;display:flex;align-items:center;gap:8px;transform-style:preserve-3d;}
.navbar-tab-btn.tab-active {background:linear-gradient(135deg,#d4af37,#c4a030);color:#0a1628;box-shadow:0 8px 20px rgba(212,175,55,.4);transform:translateZ(10px) scale(1.05);}

@media(max-width:1024px){
  .header-right-actions {flex-direction:column-reverse; width:100%; gap:15px; margin-top:20px; align-items:center;}
  .navbar-tabs-bar {width:100%;justify-content:space-between;}
  .navbar-tab-btn {flex:1;justify-content:center;}
}

/* 3D Orbiting Stars Config */
.logo-text-wrapper { position: relative; display: flex; align-items: center; justify-content: center; perspective: 1000px; transform-style: preserve-3d; padding: 0 15px;}
.orbiting-container { position: absolute; top: 50%; left: 50%; width: 100%; height: 100%; pointer-events: none; transform-style: preserve-3d; animation: orbit-system 12s linear infinite; }
.orbit-item { position: absolute; top: 50%; left: 50%; display: flex; align-items: center; justify-content: center; color: #d4af37; font-size: 15px; filter: drop-shadow(0 0 6px rgba(212,175,55,0.9)); margin: -7px 0 0 -7px; }
.oi-1 { transform: rotateY(0deg) translateZ(85px); }
.oi-2 { transform: rotateY(120deg) translateZ(85px); }
.oi-3 { transform: rotateY(240deg) translateZ(85px); }
@keyframes orbit-system { 0% { transform: rotateX(15deg) rotateY(0deg) rotateZ(-5deg); } 100% { transform: rotateX(15deg) rotateY(360deg) rotateZ(-5deg); } }
@keyframes counter-orbit { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(-360deg); } }

/* Mobile Menu Override */
@media(max-width:768px){
  .navbar-toggle { display:block; z-index:100; }
  .header-right-actions { display:none; position:absolute; top:100%; left:0; right:0; background:linear-gradient(135deg,#0a1628,#112a1f); flex-direction:column-reverse; padding:15px; border-top:1px solid rgba(212,175,55,.15); gap:10px; margin-top:0 !important; align-items:stretch !important; border-bottom-left-radius: 20px; border-bottom-right-radius: 20px; box-shadow: 0 10px 30px rgba(0,0,0,0.5); }
  .header-right-actions.mobile-open { display:flex; }
  .nav-links { display:flex; flex-direction:column; width:100%; }
}

/* ===== Creative 3D Footer Optimized ===== */
.main-footer {
    position: relative;
    padding: 60px 0 30px;
    background: linear-gradient(180deg, rgba(13, 21, 32, 0) 0%, #0a1628 30%, #050a10 100%) !important;
    color: #e8e0c8;
    perspective: 1500px;
    overflow: hidden;
    z-index: 40;
    margin-top: 20px;
}

.footer-wave {
    position: absolute;
    top: 0;
    left: 15%;
    right: 15%;
    height: 2px;
    background: linear-gradient(90deg, transparent, #d4af37, #f5e6a3, #d4af37, transparent);
    box-shadow: 0 0 20px rgba(212, 175, 55, 0.5);
    z-index: 10;
}

.footer-3d-bg {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 100%, rgba(4, 120, 87, 0.15), transparent 70%);
    transform: rotateX(25deg) translateZ(-80px) scale(1.1);
    opacity: 0.8;
    pointer-events: none;
}

.footer-content {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px;
    position: relative;
    z-index: 5;
    transform-style: preserve-3d;
}

.footer-social {
    display: flex;
    gap: 15px;
    transform-style: preserve-3d;
}

.social-item {
    width: 48px;
    height: 48px;
    background: rgba(10, 22, 40, 0.7);
    border: 1px solid rgba(212, 175, 55, 0.2);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #d4af37;
    font-size: 20px;
    text-decoration: none !important;
    transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    transform-style: preserve-3d;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}

.social-item:hover {
    background: linear-gradient(135deg, #d4af37, #c4a030);
    color: #0a1628 !important;
    transform: translateZ(30px) scale(1.15) rotateX(10deg);
    border-color: #f5e6a3;
    box-shadow: 0 15px 30px rgba(212, 175, 55, 0.4);
}

.footer-info {
    text-align: center;
    transform: translateZ(15px);
}

.footer-logo {
    display: block;
    font-family: 'Cairo', sans-serif;
    font-size: 28px;
    font-weight: 900;
    background: linear-gradient(135deg, #f5e6a3, #d4af37);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 8px;
    filter: drop-shadow(0 5px 10px rgba(212,175,55,0.2));
}

.copyright-text {
    font-family: 'Cairo', sans-serif;
    font-size: 13px;
    line-height: 1.6;
    color: #8fbc8f;
    opacity: 0.9;
}

.copyright-text span {
    color: #d4af37;
    font-weight: 700;
}

@media (max-width: 768px) {
    .main-footer { padding: 50px 0 110px; }
    .social-item { width: 42px; height: 42px; font-size: 16px; }
    .footer-logo { font-size: 24px; }
}

/* Footer Particles */
.footer-particle {
    position: absolute;
    width: 2px;
    height: 2px;
    background: #d4af37;
    border-radius: 50%;
    opacity: 0.2;
    pointer-events: none;
    animation: footerFloat 12s infinite linear;
}
@keyframes footerFloat {
    0% { transform: translateY(0) scale(0); opacity: 0; }
    20% { opacity: 0.3; scale: 1; }
    80% { opacity: 0.3; }
    100% { transform: translateY(-80px) scale(0.5); opacity: 0; }
}
.footer-content {
    transition: transform 0.1s ease-out;
}