/* ============================================
   DUNJ 404 Page
   dunj-theme/assets/css/dunj-404.css
   ============================================ */

.error404-wrap {
    position: relative;
    min-height: 80vh;
    background: radial-gradient(ellipse at 60% 20%, #1e4a5f 0%, var(--navy) 60%);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    color: var(--white);
    padding: 80px 0;
    border-top: 3px solid rgba(200, 151, 58, 0.3);
}

/* ── Content ── */
.error404-inner {
    position: relative;
    z-index: 1;
    text-align: center;
    max-width: 680px;
    margin: 0 auto;
}

/* Arabic 404 */
.error404-number {
    font-size: 120px;
    font-weight: 700;
    color: var(--gold);
    line-height: 1;
    margin-bottom: 16px;
    font-family: var(--font-serif);
    opacity: 0.9;
}

/* Quranic verse */
.error404-arabic {
    font-size: 22px;
    color: var(--gold);
    margin-bottom: 6px;
    direction: rtl;
    font-family: 'Amiri', var(--font-serif);
    letter-spacing: 1px;
}

.error404-arabic-trans {
    font-size: 12px;
    color: rgba(200, 151, 58, 0.7);
    margin-bottom: 32px;
    font-style: italic;
    letter-spacing: 0.5px;
}

/* Heading */
.error404-heading {
    font-family: var(--font-serif);
    font-size: 32px;
    color: var(--white);
    margin-bottom: 12px;
}

.error404-message {
    font-size: 15px;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.7;
    margin-bottom: 40px;
}

/* ── Search ── */
.error404-search {
    margin-bottom: 48px;
}

.error404-search-form {
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(200, 151, 58, 0.4);
    border-radius: 999px;
    overflow: hidden;
    max-width: 440px;
    margin: 0 auto;
    height: 48px;
    transition: border-color 0.2s;
}

.error404-search-form:focus-within {
    border-color: var(--gold);
}

.error404-search-input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    padding: 0 16px;
    font-family: var(--font-sans);
    font-size: 15px;
    color: var(--white);
    margin: 0;
    -webkit-appearance: none;
    appearance: none;
    height: 100%;
}

.error404-search-input::placeholder {
    color: rgba(255, 255, 255, 0.45);
}

.error404-search-submit {
    background: var(--gold);
    border: none;
    cursor: pointer;
    color: var(--navy);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    transition: background 0.2s;
}

.error404-search-submit:hover {
    background: var(--gold-light);
}

/* ── Quick links ── */
.error404-links {
    margin-bottom: 48px;
}

.error404-links-label {
    font-size: 12px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.5);
    margin-bottom: 20px;
}

.error404-links-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
}

.error404-link {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 999px;
    color: var(--white);
    text-decoration: none;
    font-size: 14px;
    transition: background 0.2s, border-color 0.2s;
}

.error404-link:hover {
    background: rgba(200, 151, 58, 0.15);
    border-color: var(--gold);
    color: var(--gold);
}

.error404-link-icon {
    font-size: 16px;
}

/* ── Prayer times ── */
.error404-prayer {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 32px;
}

.error404-prayer-label {
    font-size: 11px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 20px;
}

.error404-prayer-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    justify-content: center;
}

.error404-prayer-item {
    text-align: center;
    min-width: 80px;
}

.error404-prayer-name {
    font-size: 10px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.5);
    margin-bottom: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

.error404-prayer-time {
    font-size: 15px;
    font-weight: 600;
    color: var(--white);
}

.error404-prayer-item.is-next .error404-prayer-name {
    color: var(--gold);
}

.error404-prayer-item.is-next .error404-prayer-time {
    color: var(--gold);
}

.error404-next-badge {
    color: var(--gold);
}

/* ── Mobile ── */
@media (max-width: 640px) {
    .error404-number {
        font-size: 80px;
    }

    .error404-heading {
        font-size: 24px;
    }

    .error404-arabic {
        font-size: 18px;
    }
}

#e404-stars {
    width: 1px;
    height: 1px;
    background: transparent;
    position: absolute;
    top: 0; left: 0;
    box-shadow: 1310px 229px var(--gold), 52px 1519px var(--gold), 564px 502px var(--gold), 458px 286px var(--gold), 1509px 210px var(--gold), 1386px 1517px var(--gold), 1828px 1117px var(--gold), 179px 1210px var(--gold), 865px 66px var(--gold), 62px 192px var(--gold), 448px 477px var(--gold), 1035px 1233px var(--gold), 55px 1150px var(--gold), 408px 1467px var(--gold), 1331px 1437px var(--gold), 1117px 860px var(--gold), 452px 920px var(--gold), 1207px 570px var(--gold), 1658px 1781px var(--gold), 14px 1555px var(--gold), 1651px 327px var(--gold), 1430px 866px var(--gold), 697px 570px var(--gold), 319px 441px var(--gold), 1564px 690px var(--gold), 210px 190px var(--gold), 779px 199px var(--gold), 736px 1736px var(--gold), 705px 1237px var(--gold), 542px 1653px var(--gold), 89px 1495px var(--gold), 941px 1099px var(--gold), 256px 1993px var(--gold), 1889px 776px var(--gold), 162px 1131px var(--gold), 601px 1699px var(--gold), 1288px 1267px var(--gold), 1814px 1765px var(--gold), 741px 1183px var(--gold), 394px 1443px var(--gold), 143px 94px var(--gold), 1355px 467px var(--gold), 1584px 593px var(--gold), 164px 1752px var(--gold), 477px 1775px var(--gold), 207px 779px var(--gold), 570px 929px var(--gold), 1302px 1709px var(--gold), 748px 334px var(--gold), 759px 728px var(--gold), 430px 1373px var(--gold), 547px 1438px var(--gold), 1919px 1400px var(--gold), 1328px 147px var(--gold), 1248px 1301px var(--gold), 351px 1094px var(--gold), 1494px 502px var(--gold), 335px 947px var(--gold), 778px 553px var(--gold), 1896px 1311px var(--gold), 1410px 1141px var(--gold), 450px 1403px var(--gold), 665px 1727px var(--gold), 1574px 1590px var(--gold), 115px 470px var(--gold), 1684px 66px var(--gold), 1649px 647px var(--gold), 822px 549px var(--gold), 136px 433px var(--gold), 1871px 1932px var(--gold), 1162px 1795px var(--gold), 1471px 645px var(--gold), 436px 1343px var(--gold), 1023px 811px var(--gold), 1812px 1873px var(--gold), 1317px 940px var(--gold), 293px 543px var(--gold), 286px 506px var(--gold), 1526px 1150px var(--gold), 1104px 539px var(--gold), 1530px 1198px var(--gold), 878px 1839px var(--gold), 1196px 818px var(--gold), 742px 450px var(--gold), 284px 1044px var(--gold), 1011px 187px var(--gold), 1548px 97px var(--gold), 1764px 225px var(--gold), 314px 1286px var(--gold), 328px 1623px var(--gold), 1394px 865px var(--gold), 1222px 131px var(--gold), 789px 782px var(--gold), 1221px 959px var(--gold), 1084px 515px var(--gold), 1134px 1763px var(--gold), 24px 1394px var(--gold), 1477px 235px var(--gold), 1397px 1813px var(--gold), 1100px 1538px var(--gold), 547px 1575px var(--gold), 1313px 697px var(--gold), 229px 602px var(--gold), 891px 324px var(--gold), 930px 7px var(--gold), 1479px 1794px var(--gold), 1474px 540px var(--gold), 1026px 1561px var(--gold), 366px 1040px var(--gold), 1870px 218px var(--gold), 1783px 1281px var(--gold), 612px 1724px var(--gold), 1309px 1040px var(--gold), 1248px 408px var(--gold), 314px 766px var(--gold), 1562px 331px var(--gold), 1105px 1953px var(--gold), 1595px 1890px var(--gold), 1087px 1882px var(--gold), 2px 1227px var(--gold), 664px 1001px var(--gold), 40px 230px var(--gold), 1903px 744px var(--gold), 1800px 1704px var(--gold), 1653px 630px var(--gold), 491px 119px var(--gold), 494px 1799px var(--gold), 1162px 1940px var(--gold), 162px 176px var(--gold), 1499px 996px var(--gold), 1672px 142px var(--gold), 1558px 1091px var(--gold), 1569px 258px var(--gold), 263px 1352px var(--gold), 974px 1940px var(--gold), 1126px 339px var(--gold), 543px 1081px var(--gold), 1787px 1243px var(--gold), 867px 1976px var(--gold), 434px 1903px var(--gold), 1105px 1547px var(--gold), 1495px 1413px var(--gold), 412px 1461px var(--gold), 639px 818px var(--gold), 1376px 1331px var(--gold), 765px 898px var(--gold), 1843px 1060px var(--gold), 925px 248px var(--gold), 508px 461px var(--gold), 132px 693px var(--gold);
    opacity: 0.7;
    animation: animStar404small 60s linear infinite;
}

#e404-stars::after {
    content: " ";
    position: absolute;
    top: 2000px;
    left: 0;
    width: 1px;
    height: 1px;
    background: transparent;
    box-shadow: 1310px 229px var(--gold), 52px 1519px var(--gold), 564px 502px var(--gold), 458px 286px var(--gold), 1509px 210px var(--gold), 1386px 1517px var(--gold), 1828px 1117px var(--gold), 179px 1210px var(--gold), 865px 66px var(--gold), 62px 192px var(--gold), 448px 477px var(--gold), 1035px 1233px var(--gold), 55px 1150px var(--gold), 408px 1467px var(--gold), 1331px 1437px var(--gold), 1117px 860px var(--gold), 452px 920px var(--gold), 1207px 570px var(--gold), 1658px 1781px var(--gold), 14px 1555px var(--gold), 1651px 327px var(--gold), 1430px 866px var(--gold), 697px 570px var(--gold), 319px 441px var(--gold), 1564px 690px var(--gold), 210px 190px var(--gold), 779px 199px var(--gold), 736px 1736px var(--gold), 705px 1237px var(--gold), 542px 1653px var(--gold), 89px 1495px var(--gold), 941px 1099px var(--gold), 256px 1993px var(--gold), 1889px 776px var(--gold), 162px 1131px var(--gold), 601px 1699px var(--gold), 1288px 1267px var(--gold), 1814px 1765px var(--gold), 741px 1183px var(--gold), 394px 1443px var(--gold), 143px 94px var(--gold), 1355px 467px var(--gold), 1584px 593px var(--gold), 164px 1752px var(--gold), 477px 1775px var(--gold), 207px 779px var(--gold), 570px 929px var(--gold), 1302px 1709px var(--gold), 748px 334px var(--gold), 759px 728px var(--gold), 430px 1373px var(--gold), 547px 1438px var(--gold), 1919px 1400px var(--gold), 1328px 147px var(--gold), 1248px 1301px var(--gold), 351px 1094px var(--gold), 1494px 502px var(--gold), 335px 947px var(--gold), 778px 553px var(--gold), 1896px 1311px var(--gold), 1410px 1141px var(--gold), 450px 1403px var(--gold), 665px 1727px var(--gold), 1574px 1590px var(--gold), 115px 470px var(--gold), 1684px 66px var(--gold), 1649px 647px var(--gold), 822px 549px var(--gold), 136px 433px var(--gold), 1871px 1932px var(--gold), 1162px 1795px var(--gold), 1471px 645px var(--gold), 436px 1343px var(--gold), 1023px 811px var(--gold), 1812px 1873px var(--gold), 1317px 940px var(--gold), 293px 543px var(--gold), 286px 506px var(--gold), 1526px 1150px var(--gold), 1104px 539px var(--gold), 1530px 1198px var(--gold), 878px 1839px var(--gold), 1196px 818px var(--gold), 742px 450px var(--gold), 284px 1044px var(--gold), 1011px 187px var(--gold), 1548px 97px var(--gold), 1764px 225px var(--gold), 314px 1286px var(--gold), 328px 1623px var(--gold), 1394px 865px var(--gold), 1222px 131px var(--gold), 789px 782px var(--gold), 1221px 959px var(--gold), 1084px 515px var(--gold), 1134px 1763px var(--gold), 24px 1394px var(--gold), 1477px 235px var(--gold), 1397px 1813px var(--gold), 1100px 1538px var(--gold), 547px 1575px var(--gold), 1313px 697px var(--gold), 229px 602px var(--gold), 891px 324px var(--gold), 930px 7px var(--gold), 1479px 1794px var(--gold), 1474px 540px var(--gold), 1026px 1561px var(--gold), 366px 1040px var(--gold), 1870px 218px var(--gold), 1783px 1281px var(--gold), 612px 1724px var(--gold), 1309px 1040px var(--gold), 1248px 408px var(--gold), 314px 766px var(--gold), 1562px 331px var(--gold), 1105px 1953px var(--gold), 1595px 1890px var(--gold), 1087px 1882px var(--gold), 2px 1227px var(--gold), 664px 1001px var(--gold), 40px 230px var(--gold), 1903px 744px var(--gold), 1800px 1704px var(--gold), 1653px 630px var(--gold), 491px 119px var(--gold), 494px 1799px var(--gold), 1162px 1940px var(--gold), 162px 176px var(--gold), 1499px 996px var(--gold), 1672px 142px var(--gold), 1558px 1091px var(--gold), 1569px 258px var(--gold), 263px 1352px var(--gold), 974px 1940px var(--gold), 1126px 339px var(--gold), 543px 1081px var(--gold), 1787px 1243px var(--gold), 867px 1976px var(--gold), 434px 1903px var(--gold), 1105px 1547px var(--gold), 1495px 1413px var(--gold), 412px 1461px var(--gold), 639px 818px var(--gold), 1376px 1331px var(--gold), 765px 898px var(--gold), 1843px 1060px var(--gold), 925px 248px var(--gold), 508px 461px var(--gold), 132px 693px var(--gold);
}

#e404-stars2 {
    width: 2px;
    height: 2px;
    background: transparent;
    position: absolute;
    top: 0; left: 0;
    box-shadow: 44px 1205px var(--gold), 1135px 472px var(--gold), 1206px 452px var(--gold), 15px 146px var(--gold), 1450px 1293px var(--gold), 121px 469px var(--gold), 139px 1855px var(--gold), 65px 1761px var(--gold), 677px 146px var(--gold), 1053px 488px var(--gold), 571px 1371px var(--gold), 995px 439px var(--gold), 1105px 271px var(--gold), 1482px 1916px var(--gold), 1808px 1170px var(--gold), 1181px 969px var(--gold), 498px 1607px var(--gold), 969px 1654px var(--gold), 834px 390px var(--gold), 194px 199px var(--gold), 1350px 883px var(--gold), 726px 868px var(--gold), 842px 957px var(--gold), 1770px 1494px var(--gold), 111px 1380px var(--gold), 1339px 1324px var(--gold), 202px 125px var(--gold), 825px 1492px var(--gold), 695px 1640px var(--gold), 1765px 224px var(--gold), 510px 393px var(--gold), 390px 1099px var(--gold), 919px 288px var(--gold), 865px 376px var(--gold), 571px 948px var(--gold), 512px 1791px var(--gold), 1891px 155px var(--gold), 908px 1655px var(--gold), 1765px 1754px var(--gold), 1128px 201px var(--gold), 104px 1336px var(--gold), 1108px 1713px var(--gold), 31px 1985px var(--gold), 192px 1898px var(--gold), 1544px 1739px var(--gold), 485px 341px var(--gold), 833px 995px var(--gold), 986px 438px var(--gold), 1771px 822px var(--gold), 1849px 121px var(--gold), 338px 777px var(--gold), 5px 800px var(--gold), 544px 1898px var(--gold), 1606px 1608px var(--gold), 932px 585px var(--gold), 867px 1427px var(--gold), 1497px 1605px var(--gold), 1139px 1356px var(--gold), 1472px 997px var(--gold), 318px 389px var(--gold), 608px 446px var(--gold), 120px 1187px var(--gold), 1507px 1111px var(--gold), 125px 1532px var(--gold), 643px 118px var(--gold), 103px 1197px var(--gold), 977px 1030px var(--gold), 1883px 1747px var(--gold), 1088px 323px var(--gold), 117px 1968px var(--gold), 1041px 165px var(--gold), 1744px 381px var(--gold), 141px 1219px var(--gold), 140px 1383px var(--gold), 1766px 482px var(--gold), 827px 246px var(--gold), 1824px 1167px var(--gold), 505px 1186px var(--gold), 1218px 82px var(--gold), 1269px 168px var(--gold);
    opacity: 0.5;
    animation: animStar404medium 100s linear infinite;
}

#e404-stars2::after {
    content: " ";
    position: absolute;
    top: 2000px;
    left: 0;
    width: 2px;
    height: 2px;
    background: transparent;
    box-shadow: 44px 1205px var(--gold), 1135px 472px var(--gold), 1206px 452px var(--gold), 15px 146px var(--gold), 1450px 1293px var(--gold), 121px 469px var(--gold), 139px 1855px var(--gold), 65px 1761px var(--gold), 677px 146px var(--gold), 1053px 488px var(--gold), 571px 1371px var(--gold), 995px 439px var(--gold), 1105px 271px var(--gold), 1482px 1916px var(--gold), 1808px 1170px var(--gold), 1181px 969px var(--gold), 498px 1607px var(--gold), 969px 1654px var(--gold), 834px 390px var(--gold), 194px 199px var(--gold), 1350px 883px var(--gold), 726px 868px var(--gold), 842px 957px var(--gold), 1770px 1494px var(--gold), 111px 1380px var(--gold), 1339px 1324px var(--gold), 202px 125px var(--gold), 825px 1492px var(--gold), 695px 1640px var(--gold), 1765px 224px var(--gold), 510px 393px var(--gold), 390px 1099px var(--gold), 919px 288px var(--gold), 865px 376px var(--gold), 571px 948px var(--gold), 512px 1791px var(--gold), 1891px 155px var(--gold), 908px 1655px var(--gold), 1765px 1754px var(--gold), 1128px 201px var(--gold), 104px 1336px var(--gold), 1108px 1713px var(--gold), 31px 1985px var(--gold), 192px 1898px var(--gold), 1544px 1739px var(--gold), 485px 341px var(--gold), 833px 995px var(--gold), 986px 438px var(--gold), 1771px 822px var(--gold), 1849px 121px var(--gold), 338px 777px var(--gold), 5px 800px var(--gold), 544px 1898px var(--gold), 1606px 1608px var(--gold), 932px 585px var(--gold), 867px 1427px var(--gold), 1497px 1605px var(--gold), 1139px 1356px var(--gold), 1472px 997px var(--gold), 318px 389px var(--gold), 608px 446px var(--gold), 120px 1187px var(--gold), 1507px 1111px var(--gold), 125px 1532px var(--gold), 643px 118px var(--gold), 103px 1197px var(--gold), 977px 1030px var(--gold), 1883px 1747px var(--gold), 1088px 323px var(--gold), 117px 1968px var(--gold), 1041px 165px var(--gold), 1744px 381px var(--gold), 141px 1219px var(--gold), 140px 1383px var(--gold), 1766px 482px var(--gold), 827px 246px var(--gold), 1824px 1167px var(--gold), 505px 1186px var(--gold), 1218px 82px var(--gold), 1269px 168px var(--gold);
}

#e404-stars3 {
    width: 3px;
    height: 3px;
    background: transparent;
    position: absolute;
    top: 0; left: 0;
    box-shadow: 859px 1347px var(--gold), 1196px 1158px var(--gold), 1071px 648px var(--gold), 1915px 535px var(--gold), 419px 1372px var(--gold), 1467px 644px var(--gold), 489px 544px var(--gold), 811px 269px var(--gold), 1376px 1322px var(--gold), 615px 937px var(--gold), 648px 1903px var(--gold), 1540px 1917px var(--gold), 149px 20px var(--gold), 939px 1273px var(--gold), 1154px 205px var(--gold), 151px 1102px var(--gold), 437px 1037px var(--gold), 544px 272px var(--gold), 1912px 715px var(--gold), 1805px 141px var(--gold), 1801px 501px var(--gold), 757px 584px var(--gold), 324px 898px var(--gold), 1708px 1113px var(--gold), 1441px 620px var(--gold), 1253px 1653px var(--gold), 1340px 1084px var(--gold), 17px 1368px var(--gold), 1674px 1136px var(--gold), 614px 1909px var(--gold), 1359px 213px var(--gold), 1799px 276px var(--gold), 542px 237px var(--gold), 1823px 220px var(--gold), 1521px 1134px var(--gold), 319px 558px var(--gold), 578px 1239px var(--gold), 432px 1470px var(--gold), 703px 417px var(--gold), 1408px 1299px var(--gold);
    opacity: 0.4;
    animation: animStar404large 150s linear infinite;
}

#e404-stars3::after {
    content: " ";
    position: absolute;
    top: 2000px;
    left: 0;
    width: 3px;
    height: 3px;
    background: transparent;
    box-shadow: 859px 1347px var(--gold), 1196px 1158px var(--gold), 1071px 648px var(--gold), 1915px 535px var(--gold), 419px 1372px var(--gold), 1467px 644px var(--gold), 489px 544px var(--gold), 811px 269px var(--gold), 1376px 1322px var(--gold), 615px 937px var(--gold), 648px 1903px var(--gold), 1540px 1917px var(--gold), 149px 20px var(--gold), 939px 1273px var(--gold), 1154px 205px var(--gold), 151px 1102px var(--gold), 437px 1037px var(--gold), 544px 272px var(--gold), 1912px 715px var(--gold), 1805px 141px var(--gold), 1801px 501px var(--gold), 757px 584px var(--gold), 324px 898px var(--gold), 1708px 1113px var(--gold), 1441px 620px var(--gold), 1253px 1653px var(--gold), 1340px 1084px var(--gold), 17px 1368px var(--gold), 1674px 1136px var(--gold), 614px 1909px var(--gold), 1359px 213px var(--gold), 1799px 276px var(--gold), 542px 237px var(--gold), 1823px 220px var(--gold), 1521px 1134px var(--gold), 319px 558px var(--gold), 578px 1239px var(--gold), 432px 1470px var(--gold), 703px 417px var(--gold), 1408px 1299px var(--gold);
}

@keyframes animStar404small  { from { transform: translateY(0); } to { transform: translateY(-2000px); } }
@keyframes animStar404medium { from { transform: translateY(0); } to { transform: translateY(-2000px); } }
@keyframes animStar404large  { from { transform: translateY(0); } to { transform: translateY(-2000px); } }