.islamic-calc-wrapper {
    max-width: 800px;
    margin: 20px auto;
    background: #ffffff;
    padding: 25px;
    border-radius: 15px;
    box-shadow: 0 5px 25px rgba(0,0,0,0.1);
    font-family: 'Poppins', sans-serif;
    border-top: 8px solid #1b5e20;
}

.header-section { text-align: center; margin-bottom: 30px; }
.header-section h1 { color: #1b5e20; font-size: 24px; margin: 0; }
.header-section h2 { color: #2e7d32; font-size: 22px; margin-top: 10px; font-family: 'Noto Nastaliq Urdu', serif; }

.input-container { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 20px; }
.input-group label { display: block; margin-bottom: 8px; font-weight: 600; font-size: 14px; text-align: center; }
.input-group input { width: 100%; padding: 12px; border: 2px solid #ddd; border-radius: 8px; font-size: 18px; text-align: center; box-sizing: border-box; }
.input-group input:focus { border-color: #1b5e20; outline: none; }

.calc-btn { width: 100%; background: #1b5e20; color: #fff; border: none; padding: 15px; border-radius: 8px; font-size: 20px; font-weight: bold; cursor: pointer; transition: 0.3s; }
.calc-btn:hover { background: #2e7d32; }

.result-area { margin-top: 30px; background: #e8f5e9; padding: 20px; border-radius: 10px; border: 1px solid #c8e6c9; }
.res-row { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; border-bottom: 1px solid #c8e6c9; }
.res-label { font-weight: 600; color: #1b5e20; }
.res-val { font-size: 22px; font-weight: bold; color: #1b5e20; }
.riba-row { border: none; color: #b71c1c !important; }
.riba-row .res-val, .riba-row .res-label { color: #b71c1c; }

.quran-guidelines { margin-top: 40px; background: #fffcf0; padding: 20px; border-radius: 12px; border: 1px solid #d4af37; }
.q-title { text-align: center; color: #856404; border-bottom: 2px solid #d4af37; padding-bottom: 10px; margin-bottom: 25px; }
.verse-box { margin-bottom: 30px; padding-bottom: 20px; border-bottom: 1px dashed #d4af37; }
.verse-box:last-child { border: none; }

.arabic { font-size: 24px; text-align: center; direction: rtl; color: #1b5e20; line-height: 1.8; font-weight: bold; margin-bottom: 15px; display: block;}
.small-text { font-size: 20px; line-height: 1.6; } /* For long verse 282 */
.urdu { display: block; direction: rtl; text-align: right; font-size: 18px; line-height: 2; margin-bottom: 10px; color: #222; }
.english { font-size: 14px; color: #555; font-style: italic; border-left: 3px solid #d4af37; padding-left: 10px; }
.ref { display: block; text-align: center; font-size: 12px; font-weight: bold; color: #856404; margin-top: 10px; }

@media (max-width: 600px) {
    .input-container { grid-template-columns: 1fr; }
    .res-row { flex-direction: column; text-align: center; }
    .arabic { font-size: 20px; }
    .urdu { font-size: 16px; }
}