/* Reset and base styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --accent: #4CAF50;
}

hr {
   margin:20px;
}
body, html {
    
    max-height:fit-content;
    width: 100%;
    font-family: 'Roboto', Arial, sans-serif;
    color: #fff;
    overflow-x: hidden;
    overflow-y: auto;
}

/* Background and canvas */
li {
   padding: 4px;
}

h2 {
    padding: 4px 0px;
}
html {
    min-height: 100%;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    -webkit-text-size-adjust: 100%;
}

body {
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    background: black;
    color: #fff;
    font-family: 'Roboto', Arial, sans-serif;
    margin: 0;
    padding: 0;
}

.container {
    flex: 1 0 auto;
    position: relative;
    z-index: 1;
    padding: 20px;
}

.site-footer {
    flex-shrink: 0;
    position: relative;
    z-index: 1;
    background-color: rgba(0, 0, 0, 0.8);
}

/* Keep page content layered above the fixed starfield background */
main, footer, .about-content {
    position: relative;
    z-index: 1;
}

#stars, #stars2, #stars3 {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}
  
  #stars {
    width: 1px;
    height: 1px;
    background: transparent;
    box-shadow: 1803px 1436px #FFF , 190px 1657px #FFF , 1286px 449px #FFF , 1685px 1052px #FFF , 444px 1248px #FFF , 1851px 1318px #FFF , 805px 1837px #FFF , 1675px 1268px #FFF , 1631px 1954px #FFF , 1559px 1469px #FFF , 1015px 1724px #FFF , 1433px 15px #FFF , 1273px 1509px #FFF , 472px 1119px #FFF , 1077px 291px #FFF , 1525px 1034px #FFF , 7px 209px #FFF , 520px 1620px #FFF , 38px 1026px #FFF , 1718px 551px #FFF , 1703px 650px #FFF , 1649px 1407px #FFF , 1179px 1593px #FFF , 1976px 1883px #FFF , 1286px 832px #FFF , 1465px 308px #FFF , 301px 1102px #FFF , 1233px 569px #FFF , 36px 1154px #FFF , 1329px 1237px #FFF , 1053px 1871px #FFF , 1px 1260px #FFF , 342px 1394px #FFF , 530px 1369px #FFF , 1283px 1903px #FFF , 1751px 92px #FFF , 1862px 589px #FFF , 384px 211px #FFF , 213px 619px #FFF , 1321px 1463px #FFF , 1284px 1651px #FFF , 570px 1982px #FFF , 982px 69px #FFF , 1772px 390px #FFF , 521px 1367px #FFF , 275px 698px #FFF , 1096px 765px #FFF , 415px 601px #FFF , 1724px 1807px #FFF , 1898px 1133px #FFF , 639px 57px #FFF , 1082px 484px #FFF , 706px 1203px #FFF , 1978px 952px #FFF , 1430px 1154px #FFF , 1739px 1015px #FFF , 1564px 443px #FFF , 1886px 1668px #FFF , 1048px 1185px #FFF , 188px 293px #FFF , 1818px 932px #FFF , 47px 1664px #FFF , 1591px 1146px #FFF , 928px 299px #FFF , 843px 588px #FFF , 968px 1184px #FFF , 1793px 448px #FFF , 1978px 1924px #FFF , 1274px 1367px #FFF , 68px 1478px #FFF , 1621px 613px #FFF , 748px 773px #FFF , 1508px 628px #FFF , 215px 1017px #FFF , 1837px 381px #FFF , 444px 1920px #FFF , 1779px 1093px #FFF , 96px 1845px #FFF , 294px 1362px #FFF , 130px 134px #FFF , 1667px 524px #FFF , 1613px 436px #FFF , 1018px 258px #FFF , 411px 1977px #FFF , 1160px 175px #FFF , 458px 1020px #FFF , 265px 1460px #FFF , 622px 1200px #FFF , 469px 969px #FFF , 707px 492px #FFF , 389px 1958px #FFF , 1442px 1819px #FFF , 283px 721px #FFF , 940px 1140px #FFF , 1954px 850px #FFF , 1829px 1565px #FFF , 1225px 712px #FFF , 1449px 1157px #FFF , 1380px 1619px #FFF , 832px 1548px #FFF , 1115px 1753px #FFF , 1897px 1706px #FFF , 1125px 1611px #FFF , 1578px 425px #FFF , 1965px 1581px #FFF , 1249px 1710px #FFF , 1571px 1453px #FFF , 371px 1867px #FFF , 394px 1873px #FFF , 1126px 1794px #FFF;
    animation: animStar 50s linear infinite;
  }
  
  #stars:after {
    content: " ";
    position: absolute;
    
    width: 1px;
    height: 1px;
    background: transparent;
    box-shadow: 1803px 1436px #FFF , 190px 1657px #FFF , 1286px 449px #FFF , 1685px 1052px #FFF , 444px 1248px #FFF , 1851px 1318px #FFF , 805px 1837px #FFF , 1675px 1268px #FFF , 1631px 1954px #FFF , 1559px 1469px #FFF , 1015px 1724px #FFF , 1433px 15px #FFF , 1273px 1509px #FFF , 472px 1119px #FFF , 1077px 291px #FFF , 1525px 1034px #FFF , 7px 209px #FFF , 520px 1620px #FFF , 38px 1026px #FFF , 1718px 551px #FFF , 1703px 650px #FFF , 1649px 1407px #FFF , 1179px 1593px #FFF , 1976px 1883px #FFF , 1286px 832px #FFF , 1465px 308px #FFF , 301px 1102px #FFF , 1233px 569px #FFF , 36px 1154px #FFF , 1329px 1237px #FFF , 1053px 1871px #FFF , 1px 1260px #FFF , 342px 1394px #FFF , 530px 1369px #FFF , 1283px 1903px #FFF , 1751px 92px #FFF , 1862px 589px #FFF , 384px 211px #FFF , 213px 619px #FFF , 1321px 1463px #FFF , 1284px 1651px #FFF , 570px 1982px #FFF , 982px 69px #FFF , 1772px 390px #FFF , 521px 1367px #FFF , 275px 698px #FFF , 1096px 765px #FFF , 415px 601px #FFF , 1724px 1807px #FFF , 1898px 1133px #FFF , 639px 57px #FFF , 1082px 484px #FFF , 706px 1203px #FFF , 1978px 952px #FFF , 1430px 1154px #FFF , 1739px 1015px #FFF , 1564px 443px #FFF , 1886px 1668px #FFF , 1048px 1185px #FFF , 188px 293px #FFF , 1818px 932px #FFF , 47px 1664px #FFF , 1591px 1146px #FFF , 928px 299px #FFF , 843px 588px #FFF , 968px 1184px #FFF , 1793px 448px #FFF , 1978px 1924px #FFF , 1274px 1367px #FFF , 68px 1478px #FFF , 1621px 613px #FFF , 748px 773px #FFF , 1508px 628px #FFF , 215px 1017px #FFF , 1837px 381px #FFF , 444px 1920px #FFF , 1779px 1093px #FFF , 96px 1845px #FFF , 294px 1362px #FFF , 130px 134px #FFF , 1667px 524px #FFF , 1613px 436px #FFF , 1018px 258px #FFF , 411px 1977px #FFF , 1160px 175px #FFF , 458px 1020px #FFF , 265px 1460px #FFF , 622px 1200px #FFF , 469px 969px #FFF , 707px 492px #FFF , 389px 1958px #FFF , 1442px 1819px #FFF , 283px 721px #FFF , 940px 1140px #FFF , 1954px 850px #FFF , 1829px 1565px #FFF , 1225px 712px #FFF , 1449px 1157px #FFF , 1380px 1619px #FFF , 832px 1548px #FFF , 1115px 1753px #FFF , 1897px 1706px #FFF , 1125px 1611px #FFF , 1578px 425px #FFF , 1965px 1581px #FFF , 1249px 1710px #FFF , 1571px 1453px #FFF , 371px 1867px #FFF , 394px 1873px #FFF , 1126px 1794px #FFF;
  }
  
  #stars2 {
    width: 2px;
    height: 2px;
    background: transparent;
    box-shadow: 1488px 1131px #FFF , 1615px 973px #FFF , 1037px 980px #FFF , 1462px 1029px #FFF , 307px 481px #FFF , 1637px 1093px #FFF , 206px 340px #FFF , 1241px 500px #FFF , 760px 976px #FFF , 311px 1910px #FFF , 1661px 820px #FFF , 1775px 1841px #FFF , 1186px 808px #FFF , 1758px 1658px #FFF , 1303px 1033px #FFF , 720px 831px #FFF , 490px 354px #FFF , 1245px 1995px #FFF , 1849px 805px #FFF , 1514px 1678px #FFF , 1441px 155px #FFF , 669px 1403px #FFF , 826px 1605px #FFF , 1364px 1870px #FFF , 1655px 930px #FFF , 1302px 1439px #FFF , 1920px 1969px #FFF , 1250px 1253px #FFF , 514px 1945px #FFF , 496px 1464px #FFF , 1065px 1387px #FFF , 535px 652px #FFF , 849px 1438px #FFF , 472px 411px #FFF , 1954px 1766px #FFF , 419px 1360px #FFF , 1706px 1573px #FFF , 934px 1588px #FFF , 264px 112px #FFF , 832px 779px #FFF , 1996px 1379px #FFF , 1411px 211px #FFF , 1222px 1886px #FFF , 1850px 1661px #FFF , 605px 436px #FFF , 1029px 237px #FFF , 298px 675px #FFF , 354px 39px #FFF , 1337px 1251px #FFF , 1235px 331px #FFF , 1510px 723px #FFF , 1352px 429px #FFF , 753px 525px #FFF , 1070px 1261px #FFF , 347px 1146px #FFF , 1476px 1189px #FFF , 846px 721px #FFF , 1590px 828px #FFF , 580px 1694px #FFF , 1281px 1079px #FFF , 154px 578px #FFF , 1490px 232px #FFF , 1280px 666px #FFF , 1664px 1694px #FFF , 830px 1139px #FFF , 1186px 1089px #FFF , 183px 1849px #FFF , 1643px 1068px #FFF , 921px 1916px #FFF , 666px 224px #FFF , 1485px 218px #FFF , 1134px 296px #FFF , 1312px 823px #FFF , 700px 1016px #FFF , 161px 829px #FFF , 97px 1493px #FFF , 698px 1771px #FFF , 1585px 462px #FFF , 1293px 513px #FFF , 1964px 1063px #FFF , 804px 1715px #FFF , 501px 1183px #FFF , 1282px 1953px #FFF , 1632px 1824px #FFF , 117px 1998px #FFF , 1869px 1057px #FFF , 948px 656px #FFF , 439px 1742px #FFF , 15px 283px #FFF , 1867px 1903px #FFF , 1337px 195px #FFF , 1621px 1945px #FFF , 1502px 1187px #FFF , 1905px 1909px #FFF , 283px 1307px #FFF , 1993px 1802px #FFF , 632px 1039px #FFF , 1669px 1922px #FFF , 1761px 1537px #FFF , 629px 484px #FFF , 1392px 1247px #FFF , 424px 485px #FFF , 318px 1650px #FFF , 1229px 745px #FFF , 714px 1721px #FFF , 1884px 366px #FFF , 1629px 1944px #FFF , 1874px 874px #FFF , 185px 252px #FFF , 1127px 751px #FFF , 1803px 230px #FFF , 1733px 1677px #FFF , 1437px 1820px #FFF , 1822px 384px #FFF , 750px 1723px #FFF;
    animation: animStar 100s linear infinite;
  }
  
  #stars2:after {
    content: " ";
    position: absolute;
    
    width: 2px;
    height: 2px;
    background: transparent;
    box-shadow: 1488px 1131px #FFF , 1615px 973px #FFF , 1037px 980px #FFF , 1462px 1029px #FFF , 307px 481px #FFF , 1637px 1093px #FFF , 206px 340px #FFF , 1241px 500px #FFF , 760px 976px #FFF , 311px 1910px #FFF , 1661px 820px #FFF , 1775px 1841px #FFF , 1186px 808px #FFF , 1758px 1658px #FFF , 1303px 1033px #FFF , 720px 831px #FFF , 490px 354px #FFF , 1245px 1995px #FFF , 1849px 805px #FFF , 1514px 1678px #FFF , 1441px 155px #FFF , 669px 1403px #FFF , 826px 1605px #FFF , 1364px 1870px #FFF , 1655px 930px #FFF , 1302px 1439px #FFF , 1920px 1969px #FFF , 1250px 1253px #FFF , 514px 1945px #FFF , 496px 1464px #FFF , 1065px 1387px #FFF , 535px 652px #FFF , 849px 1438px #FFF , 472px 411px #FFF , 1954px 1766px #FFF , 419px 1360px #FFF , 1706px 1573px #FFF , 934px 1588px #FFF , 264px 112px #FFF , 832px 779px #FFF , 1996px 1379px #FFF , 1411px 211px #FFF , 1222px 1886px #FFF , 1850px 1661px #FFF , 605px 436px #FFF , 1029px 237px #FFF , 298px 675px #FFF , 354px 39px #FFF , 1337px 1251px #FFF , 1235px 331px #FFF , 1510px 723px #FFF , 1352px 429px #FFF , 753px 525px #FFF , 1070px 1261px #FFF , 347px 1146px #FFF , 1476px 1189px #FFF , 846px 721px #FFF , 1590px 828px #FFF , 580px 1694px #FFF , 1281px 1079px #FFF , 154px 578px #FFF , 1490px 232px #FFF , 1280px 666px #FFF , 1664px 1694px #FFF , 830px 1139px #FFF , 1186px 1089px #FFF , 183px 1849px #FFF , 1643px 1068px #FFF , 921px 1916px #FFF , 666px 224px #FFF , 1485px 218px #FFF , 1134px 296px #FFF , 1312px 823px #FFF , 700px 1016px #FFF , 161px 829px #FFF , 97px 1493px #FFF , 698px 1771px #FFF , 1585px 462px #FFF , 1293px 513px #FFF , 1964px 1063px #FFF , 804px 1715px #FFF , 501px 1183px #FFF , 1282px 1953px #FFF , 1632px 1824px #FFF , 117px 1998px #FFF , 1869px 1057px #FFF , 948px 656px #FFF , 439px 1742px #FFF , 15px 283px #FFF , 1867px 1903px #FFF , 1337px 195px #FFF , 1621px 1945px #FFF , 1502px 1187px #FFF , 1905px 1909px #FFF , 283px 1307px #FFF , 1993px 1802px #FFF , 632px 1039px #FFF , 1669px 1922px #FFF , 1761px 1537px #FFF , 629px 484px #FFF , 1392px 1247px #FFF , 424px 485px #FFF , 318px 1650px #FFF , 1229px 745px #FFF , 714px 1721px #FFF , 1884px 366px #FFF , 1629px 1944px #FFF , 1874px 874px #FFF , 185px 252px #FFF , 1127px 751px #FFF , 1803px 230px #FFF , 1733px 1677px #FFF , 1437px 1820px #FFF , 1822px 384px #FFF , 750px 1723px #FFF;
  }
  
  #stars3 {
    width: 3px;
    height: 3px;
    background: transparent;
    box-shadow: 387px 1878px #FFF , 760px 1564px #FFF , 1487px 999px #FFF , 948px 1828px #FFF , 1977px 1001px #FFF , 1284px 1963px #FFF , 656px 284px #FFF , 1268px 1635px #FFF , 1820px 598px #FFF , 642px 1900px #FFF , 296px 57px #FFF , 921px 1620px #FFF , 476px 1858px #FFF , 1323px 1803px #FFF , 1079px 1223px #FFF , 103px 1994px #FFF , 1944px 344px #FFF , 1743px 254px #FFF , 1959px 1361px #FFF , 1127px 971px #FFF , 1875px 1941px #FFF , 1190px 1545px #FFF , 1787px 374px #FFF , 1781px 1000px #FFF , 513px 1880px #FFF , 1153px 60px #FFF , 1502px 1624px #FFF , 1549px 473px #FFF , 1336px 89px #FFF , 1478px 1977px #FFF , 1126px 1606px #FFF , 288px 1577px #FFF , 1829px 1410px #FFF , 1683px 1950px #FFF , 824px 58px #FFF , 1051px 1766px #FFF , 233px 1035px #FFF , 1293px 1490px #FFF , 468px 77px #FFF , 1872px 1481px #FFF , 1550px 1191px #FFF , 729px 1062px #FFF , 524px 1149px #FFF , 82px 1776px #FFF , 1762px 285px #FFF , 1894px 887px #FFF , 311px 1388px #FFF , 491px 1936px #FFF , 981px 156px #FFF , 1215px 1206px #FFF , 843px 1367px #FFF , 789px 1532px #FFF , 1026px 159px #FFF , 1315px 765px #FFF , 1530px 1928px #FFF , 953px 779px #FFF , 440px 1109px #FFF , 1775px 237px #FFF , 1832px 253px #FFF , 1259px 1790px #FFF , 154px 1103px #FFF , 1624px 726px #FFF , 1013px 815px #FFF , 1964px 1136px #FFF , 820px 1084px #FFF , 963px 580px #FFF , 1907px 1941px #FFF , 77px 523px #FFF , 915px 636px #FFF , 102px 1419px #FFF , 78px 1041px #FFF , 263px 496px #FFF , 1264px 1901px #FFF , 1601px 1458px #FFF , 69px 1541px #FFF , 1612px 579px #FFF , 1757px 508px #FFF , 1951px 1395px #FFF , 1169px 1219px #FFF , 415px 329px #FFF , 452px 766px #FFF , 1646px 1911px #FFF , 1730px 1638px #FFF , 1400px 1741px #FFF , 461px 1170px #FFF , 1895px 1576px #FFF , 231px 762px #FFF , 594px 1452px #FFF , 280px 1623px #FFF , 144px 815px #FFF , 605px 92px #FFF , 1407px 229px #FFF , 1051px 1652px #FFF , 1718px 94px #FFF , 1729px 1190px #FFF , 1943px 996px #FFF , 1588px 1189px #FFF , 1438px 1517px #FFF , 1627px 1852px #FFF , 894px 1757px #FFF , 888px 1438px #FFF , 522px 302px #FFF , 901px 817px #FFF , 156px 1266px #FFF , 1478px 516px #FFF , 1294px 427px #FFF , 141px 936px #FFF , 978px 831px #FFF , 1673px 1408px #FFF , 1729px 1825px #FFF , 1775px 1595px #FFF;
    animation: animStar 150s linear infinite;
  }
  
  #stars3:after {
    content: " ";
    position: absolute;
    
    width: 3px;
    height: 3px;
    background: transparent;
    box-shadow: 387px 1878px #FFF , 760px 1564px #FFF , 1487px 999px #FFF , 948px 1828px #FFF , 1977px 1001px #FFF , 1284px 1963px #FFF , 656px 284px #FFF , 1268px 1635px #FFF , 1820px 598px #FFF , 642px 1900px #FFF , 296px 57px #FFF , 921px 1620px #FFF , 476px 1858px #FFF , 1323px 1803px #FFF , 1079px 1223px #FFF , 103px 1994px #FFF , 1944px 344px #FFF , 1743px 254px #FFF , 1959px 1361px #FFF , 1127px 971px #FFF , 1875px 1941px #FFF , 1190px 1545px #FFF , 1787px 374px #FFF , 1781px 1000px #FFF , 513px 1880px #FFF , 1153px 60px #FFF , 1502px 1624px #FFF , 1549px 473px #FFF , 1336px 89px #FFF , 1478px 1977px #FFF , 1126px 1606px #FFF , 288px 1577px #FFF , 1829px 1410px #FFF , 1683px 1950px #FFF , 824px 58px #FFF , 1051px 1766px #FFF , 233px 1035px #FFF , 1293px 1490px #FFF , 468px 77px #FFF , 1872px 1481px #FFF , 1550px 1191px #FFF , 729px 1062px #FFF , 524px 1149px #FFF , 82px 1776px #FFF , 1762px 285px #FFF , 1894px 887px #FFF , 311px 1388px #FFF , 491px 1936px #FFF , 981px 156px #FFF , 1215px 1206px #FFF , 843px 1367px #FFF , 789px 1532px #FFF , 1026px 159px #FFF , 1315px 765px #FFF , 1530px 1928px #FFF , 953px 779px #FFF , 440px 1109px #FFF , 1775px 237px #FFF , 1832px 253px #FFF , 1259px 1790px #FFF , 154px 1103px #FFF , 1624px 726px #FFF , 1013px 815px #FFF , 1964px 1136px #FFF , 820px 1084px #FFF , 963px 580px #FFF , 1907px 1941px #FFF , 77px 523px #FFF , 915px 636px #FFF , 102px 1419px #FFF , 78px 1041px #FFF , 263px 496px #FFF , 1264px 1901px #FFF , 1601px 1458px #FFF , 69px 1541px #FFF , 1612px 579px #FFF , 1757px 508px #FFF , 1951px 1395px #FFF , 1169px 1219px #FFF , 415px 329px #FFF , 452px 766px #FFF , 1646px 1911px #FFF , 1730px 1638px #FFF , 1400px 1741px #FFF , 461px 1170px #FFF , 1895px 1576px #FFF , 231px 762px #FFF , 594px 1452px #FFF , 280px 1623px #FFF , 144px 815px #FFF , 605px 92px #FFF , 1407px 229px #FFF , 1051px 1652px #FFF , 1718px 94px #FFF , 1729px 1190px #FFF , 1943px 996px #FFF , 1588px 1189px #FFF , 1438px 1517px #FFF , 1627px 1852px #FFF , 894px 1757px #FFF , 888px 1438px #FFF , 522px 302px #FFF , 901px 817px #FFF , 156px 1266px #FFF , 1478px 516px #FFF , 1294px 427px #FFF , 141px 936px #FFF , 978px 831px #FFF , 1673px 1408px #FFF , 1729px 1825px #FFF , 1775px 1595px #FFF;
  }
  
  #stars::after, #stars2::after, #stars3::after {
    content: " ";
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
}

@keyframes animStar {
    from {
        transform: translateY(0);
    }
    to {
        transform: translateY(-100vh);
    }
}

#verse-content, #random-verse-btn, #verse-navigation, .verse-details-overlay {
    position: relative;
    z-index: 2;
}
/* Container and main content */
.container {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 100svh;
    width: 100%;
    max-width: 100%;
    padding: 20px;
    box-sizing: border-box;
    text-align: center;
    
}

h1 {
    font-size: clamp(28px, 7vw, 40px);
    margin: 20px 0px;
    color: #fff;
    text-shadow: 0 0 20px rgba(255, 255, 255, 0.5);
    font-weight: 300;
    letter-spacing: 2px;
}


#verse-content {
    border-radius: 15px;
    margin: 10px auto;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    max-width: 800px;
    width: 100%;
    backdrop-filter: blur(2px);
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Arabic text styles */
.arabic {
    font-family: 'Amiri', serif;
    font-size: clamp(18px, 4vw, 32px);
    direction: rtl;
    margin-bottom: 30px;
    line-height: 1.8;
    color: #fff;
    text-shadow: 0 0 15px rgba(255, 255, 255, 0.5);
    text-align: center;
    width: 100%;
}

/* Navigation styles */
#verse-navigation {
    display: none;
    justify-content: center;
    align-items: center;
    gap: 20px;
    margin-bottom: 3rem;
}

#verse-navigation[style*="display: flex"] {
    display: flex !important;
}

.nav-buttons {
    display: flex;
    justify-content: space-between;
    width: 100%;
}

.nav-btn, #verse-details-btn, .chevron-icon {
    display: none;
    background-color: rgba(0, 0, 0, 0.2);
    color: #fff;
    border: 2px solid rgba(255, 255, 255, 0.5);
    cursor: pointer;
    border-radius: 50px;
    transition: all 0.3s ease;
}

.nav-btn, .chevron-icon {
    padding: 10px;
    font-size: clamp(10px, 2.5vw, 13px);
    text-transform: uppercase;
    letter-spacing: 1px;
}

#verse-details-btn {
    font-size: 11px;
    margin: 0 15px 15px;
}

.nav-btn {
    flex: 1;
    margin: 20px 10px 5px;
    min-width: 50px;
    max-width: 200px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.nav-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Button styles */
/* Button styles */
/* Button styles */
#random-verse-btn, .next-translation-btn, .nav-btn {
    background-color: rgba(0, 0, 0, 0.2);
    color: #fff;
    border: 2px solid rgba(255, 255, 255, 0.5);
    cursor: pointer;
    border-radius: 30px;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 1px;
    backdrop-filter: blur(5px);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

#random-verse-btn {
    padding: 12px 24px;
    font-size: clamp(14px, 5vw, 18px);
}

#random-verse-btn:hover, .next-translation-btn:hover, .nav-btn:hover {
    background-color: rgba(0, 0, 0, 0.4);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
    transform: translateY(-2px);
}

.next-translation-btn {
    
    padding: 8px 16px;
    margin-top: 15px;
    font-size: clamp(8px, 3vw, 18px);
}


/* Specific styles for random verse button */
#random-verse-btn {
    margin-top: 20px;
}


/* Animation for next translation button */
.next-translation-btn.shake {
    animation: shake 0.5s ease-in-out;
}



/* Translation styles */
.translation {
    margin-bottom: 20px;
    width: 100%;
}

.translation-text {
    font-size: clamp(14px, 3vw, 20px);
    margin-bottom: 15px;
    line-height: 1.7;
    color: #e0e0e0;
    text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    text-align: center;
    transition: opacity 0.3s ease-out;
}

.translation-info {
    font-size: clamp(10px, 2vw, 14px);
    color: #bbb;
    margin-bottom: 20px;
    font-style: italic;
    text-align: center;
}

.reference {
    font-size: clamp(12px, 2.5vw, 16px);
    font-style: italic;
    margin-top: 20px;
    color: #bbb;
    text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    text-align: center;
    width: 100%;
}

/* Loading animation */
.loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.lds-ripple {
    display: inline-block;
    position: relative;
    width: 80px;
    height: 80px;
}

.lds-ripple div {
    position: absolute;
    border: 4px solid #fff;
    opacity: 1;
    border-radius: 50%;
    animation: lds-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
}

.lds-ripple div:nth-child(2) {
    animation-delay: -0.5s;
}

/* Custom audio player styles */
#audioplayer {
    display: none;
    width: 100%;
    max-width: 480px;
    height: 60px;
    margin: 20px auto;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 15px;
    align-items: center;
    padding: 0 10px;
    position: relative;
}

.play { background-image: url(play.png); }
.pause { background-image: url(pause.png); }

#pButton {
    height: 40px; 
    width: 40px;
    border: none;
    background-size: 50% 50%;
    background-repeat: no-repeat;
    background-position: center;
    background-color: white;
    outline: none;
    cursor: pointer;
    filter: invert(1);
    z-index: 2;
}

#timeline {
    width: calc(100% - 60px);
    height: 10px;
    margin-left: 10px;
    border-radius: 5px;
    background: rgba(255,255,255,.3);
    position: relative;
    overflow: visible;
}

#playhead {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 5px rgba(0,0,0,0.5);
}

/* Verse details overlay */
.verse-details-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(5px);
    z-index: 9999;
    display: none;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: none;
}

.verse-details-overlay.active {
    display: flex;
    opacity: 1;
    top: 0 !important;
    animation: fadeInUp 0.3s ease-out forwards;
}

.verse-details-overlay.closing {
    animation: fadeOutUp 0.3s ease-in forwards;
}

.verse-details-content {
    background-color: rgba(255, 255, 255, 0.1);
    padding: 20px;
    border-radius: 10px;
    max-width: 80%;
    max-height: 80%;
    overflow-y: auto;
    color: white;
    transition: opacity 0.1s ease;
}

.verse-details-overlay.active .verse-details-content {
    transform: scale(1);
    opacity: 1;
}

.verse-details-overlay:not(.active) .verse-details-content {
    opacity: 0;
}

.verse-details-content p {
    opacity: 0;
    animation: fadeInUp 0.5s ease-out forwards;
}


.verse-details-content {
    line-height: 1.3; /* Reduces line spacing */
}

.verse-details-content p {
    margin-bottom: 0.5em; /* Reduces space between paragraphs */
}

.surah-details {
    margin-top: 1em;
}

.surah-details p {
    margin-bottom: 0.3em; /* Even less space between details */
}




.verse-details-content p:nth-child(1) { animation-delay: 0.1s; }
.verse-details-content p:nth-child(2) { animation-delay: 0.2s; }
.verse-details-content p:nth-child(3) { animation-delay: 0.3s; }
.verse-details-content p:nth-child(4) { animation-delay: 0.4s; }



.arabic-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(5px);
    z-index: 9999;
    display: none;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: opacity 0.3s ease-out;
}

.arabic-overlay.active {
    display: flex;
    opacity: 1;
}

.arabic-overlay-content {
    background-color: rgba(255, 255, 255, 0.1);
    padding: 40px;
    border-radius: 10px;
    max-width: 90%;
    max-height: 90%;
    overflow-y: auto;
    color: white;
    font-size: 1rem;
    text-align: center;
}

.arabic-overlay-content {
    font-family: 'Amiri', serif;
    direction: rtl;
}

.clickable {
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.clickable:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

.site-footer {
    background-color: rgba(0, 0, 0, 0.8);
    color: #fff;
    padding: 20px 0 20px;
    font-size: 14px;
    line-height: 1.6;
    text-align: center;
}

.footer-content {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.footer-section {
    flex: 1;
    min-width: 200px;
    margin-bottom: 20px;
}

.footer-section h3 {
    color: #4CAF50;
    margin-bottom: 15px;
    font-size: 18px;
}

.footer-section ul {
    list-style-type: none;
    padding: 0;
}

.footer-section ul li {
    margin-bottom: 8px;
}

.footer-section a {
    color: #fff;
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-section a:hover {
    color: #4CAF50;
}

.footer-bottom {
    text-align: center;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    margin:10px;
}

.footer-bottom p {
    margin: 5px 0;
}


/* Animations */
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    75% { transform: translateX(5px); }
}

@keyframes cosmic-reveal {
    0% {
        opacity: 0;
        transform: scale(0.9) translateY(20px);
        text-shadow: 0 0 0 rgba(255, 255, 255, 0);
    }
    50% {
        opacity: 0.5;
        text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
    }
    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
        text-shadow: 0 0 20px rgba(255, 255, 255, 0.3);
    }
}

@keyframes lds-ripple {
    0%, 4.9% {
        top: 36px;
        left: 36px;
        width: 8px;
        height: 8px;
        opacity: 0;
    }
    5% {
        opacity: 1;
    }
    100% {
        top: 0;
        left: 0;
        width: 80px;
        height: 80px;
        opacity: 0;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeOutUp {
    from {
        opacity: 1;
        transform: translateY(0);
    }
    to {
        opacity: 0;
        transform: translateY(-20px);
    }
}

.next-translation-btn.shake {
    animation: shake 0.5s ease-in-out;
}

.cosmic-reveal {
    animation: cosmic-reveal 0.8s ease-out forwards;
}

footer {
    height: fit-content;
}

/* Media queries */
@media (max-width: 768px) {
    .verse-detail-card {
        width: 100%;
    }

    #verse-navigation {
        flex-direction: row;
        align-items: center;
        gap: 12px;
    }

    .nav-btn, #verse-details-btn {
        margin: 5px 0;
        min-width: 40px;
        max-width: 200px;
    }
    .footer-content {
        flex-direction: column;
        align-items: center;
    }

    .footer-section {
        width: 100%;
        text-align: center;
        margin-bottom: 30px;
    }
}

@media (max-width: 480px) {
    .container {
        padding: 16px 12px;
    }

    #verse-content {
        margin: 8px auto;
    }

    .arabic {
        margin-bottom: 22px;
    }

    #verse-navigation {
        gap: 8px;
    }

    #verse-details-btn {
        margin: 0 8px 12px;
    }

    #audioplayer {
        height: 54px;
    }

    .verse-details-content,
    .arabic-overlay-content,
    .english-overlay-content {
        max-width: 92%;
        padding: 20px;
    }

    .footer-section {
        margin-bottom: 24px;
    }
}

/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
    #stars, #stars2, #stars3,
    .cosmic-reveal,
    .next-translation-btn.shake,
    .verse-details-content p {
        animation: none !important;
    }

    /* Keep animation-revealed text visible when motion is disabled */
    .verse-details-content p {
        opacity: 1 !important;
    }
}