:root{

    --primary:#c95d63;
    --primary2:#e47a80;

    --primary-dark:#a9474d;

    --light:#fff2f3;

    --border:#d45b61;

    --focus:rgba(212,91,97,.15);

}
html,
body{
    width:100%;
    min-height:100%;
    overflow-x:hidden;
}

.container{
    display:block !important;
    width:100% !important;
    max-width:760px;
    height:auto !important;
    min-height:100vh;
    overflow:visible !important;
}
.form-box, .poster-doazikir {
    background: #fff;
    border: 2px solid #9ad3bc;
    border-radius: 18px;
    padding: 16px;
    margin-bottom: 18px;
    box-shadow: 0 5px 14px rgba(0,0,0,0.12);
}
.kad-pilihan,
.kad-kandungan,
.seksyen,
.isi-seksyen{
    display:block !important;
    visibility:visible !important;
    opacity:1 !important;
    width:100% !important;
    height:auto !important;
    max-height:none !important;
    overflow:visible !important;
}
.baris {
    margin-bottom: 12px;
    line-height: 1.6;
}
.kategori-doazikir{
    text-align: center;
    font-size: 1.1rem;
    font-weight: bold;
    color: #08735f;
    background: #e8f8f0;
    padding: 8px 12px;
    border-radius: 8px;
    margin-bottom: 12px;
}
.label {
    font-weight: bold;
    color: #08735f;
}

.tajuk-wrap {
    display: flex;
    align-items: center;
    gap: 12px;
}

.tajuk-text {
    flex: 1;
    font-weight: bold;
    color: #064b3b;
}
.kad-kandungan{
    position:relative !important;
    transform:none !important;
    margin-bottom:20px;
}

.isi-seksyen{
    white-space:normal !important;
    overflow-wrap:anywhere;
    word-break:normal;
}

.gambar-doazikir{
    display:block;
    width:100%;
    height:auto;
    max-height:none;
    object-fit:contain;
}

@media (max-width:600px){
    .container{
        padding:10px;
    }

    .kad-pilihan,
    .kad-kandungan{
        padding:13px;
        border-radius:10px;
    }

    .isi-seksyen{
        font-size:16px;
        line-height:1.7;
        text-align:left;
    }

    .isi-doa{
        text-align:justify;
    }
}
.status-mobile{
    display:block;
    margin-bottom:10px;
    padding:9px 12px;
    border-radius:8px;
    background:#e8f2fb;
    color:#1c4f7f;
    font-size:14px;
    text-align:center;
}
.kad-kandungan{
    display:block !important;
    visibility:visible !important;
    opacity:1 !important;
    position:relative !important;
    width:100% !important;
    height:auto !important;
    max-height:none !important;
    overflow:visible !important;
}

@media (max-width:600px){
    .kad-kandungan{
        display:block !important;
        visibility:visible !important;
        opacity:1 !important;
    }
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    padding: 0;
    background: #f3f7fc;
    color: #243447;
    font-family:
        Arial,
        Helvetica,
        sans-serif;
}
label {
    font-weight: bold;
    color: #08735f;
}
select {
    width: 100%;
    padding: 12px;
    margin: 8px 0 15px;
    border-radius: 10px;
    border: 1px solid #aaa;
    font-size: 1rem;
}
.container {
    width: 100%;
    max-width: 760px;
    margin: 0 auto;
    padding: 14px;
}

.tajuk-utama {
    margin-bottom: 16px;
    padding: 20px 14px;
    border-radius: 16px;
    background:linear-gradient(
        135deg,
        var(--primary),
        var(--primary2)
    );
    color: #ffffff;
    text-align: center;
    box-shadow: 0 5px 16px
        rgba(0, 0, 0, 0.12);
}

.tajuk-utama h1 {
    margin: 0;
    font-size: 24px;
    line-height: 1.3;
    letter-spacing: 0.5px;
}

.kad-pilihan,
.kad-kandungan {
    margin-bottom: 16px;
    padding: 16px;
    border: 1px solid #d9e5f2;
    border-radius: 14px;
    background: #ffffff;
    box-shadow: 0 3px 12px
        rgba(0, 0, 0, 0.06);
}

.label-pilihan {
    display: block;
    margin-bottom: 8px;
    color:var(--primary-dark);
    font-size: 15px;
    font-weight: bold;
}

.select-doazikir {
    width: 100%;
    min-height: 48px;
    padding: 10px 12px;
    border: 1px solid #9eb6cc;
    border-radius: 10px;
    background: #ffffff;
    color: #243447;
    font-size: 16px;
    outline: none;
}

.select-doazikir:focus {
    border-color:var(--border);
    box-shadow:0 0 0 3px var(--focus);
}

.gambar-doazikir {
    width: 100%;
    max-height: 360px;
    margin-bottom: 16px;
    border-radius: 12px;
    object-fit: contain;
    background: #eef4fa;
    display: block;
}

.nama-doazikir {
    margin: 0 0 16px;
    color: #1e5fa8;
    text-align: center;
    font-size: 25px;
    line-height: 1.4;
}

.seksyen {
    margin-bottom: 18px;
}

.seksyen:last-child {
    margin-bottom: 0;
}

.tajuk-seksyen {
    margin: 0 0 10px;
    padding: 9px 12px;
    border-left: 5px solid #2f76b7;
    border-radius: 6px;
    background: #edf5fc;
    color: #1c4f7f;
    font-size: 18px;
}

.isi-seksyen {
    direction: auto;
    font-size: 16px;
    line-height: 1.75;
    text-align: justify;
    overflow-wrap: anywhere;
}
.isi-seksyen p{
    margin:0 0 12px;
    text-align:justify;
    line-height:1.8;
}
.isi-doa {
    direction: auto;
    unicode-bidi: plaintext;
    white-space: normal;
}

.rujukan {
    padding: 11px 12px;
    border-radius: 8px;
    background: #fff8e8;
    color: #66511d;
    font-size: 14px;
    line-height: 1.6;
    text-align: center;
}

.rujukan strong {
    color: #4f3e13;
}

.mesej-awal {
    padding: 24px 16px;
    border: 1px dashed #9bb6cf;
    border-radius: 12px;
    background: #f8fbfe;
    color: #536b82;
    text-align: center;
    line-height: 1.6;
}

.ralat {
    margin-bottom: 16px;
    padding: 12px;
    border: 1px solid #e7aaa7;
    border-radius: 9px;
    background: #fff0ef;
    color: #a5221c;
    text-align: center;
}

.tiada-data {
    margin: 0;
    color: #777777;
    font-style: italic;
}

@media (min-width: 600px) {
    .container {
        padding: 24px;
    }

    .tajuk-utama h1 {
        font-size: 30px;
    }

    .kad-pilihan,
    .kad-kandungan {
        padding: 22px;
    }

    .nama-doazikir {
        font-size: 29px;
    }
}
html{
    scroll-behavior:smooth;
}

.btn-papar{
    display:block;
    width:100%;
    margin-top:12px;
    padding:13px;
    border:none;
    border-radius:9px;
    background:var(--primary);
    color:#ffffff;
    font-size:16px;
    font-weight:bold;
    cursor:pointer;
}

#kandungandoazikir{
    scroll-margin-top:12px;
}
.intro-doazikir{
    margin:20px 0;
    padding:18px;
    background:#ffffff;
    border:1px solid #ddd5ef;
    border-radius:12px;

    text-align:justify;
    line-height:1.8;
    font-size:16px;
    color:#333;

    overflow-wrap:anywhere;
}