/*
 * OM Ramadan Component Styles
 * Isolated component CSS
 */

.omRamadan{
    --brand:#004851;
    --accent:#92842C;
    --text:#0f172a;
    --muted:#475569;
    --bd:rgba(2,6,23,.12);
    --soft:rgba(0,72,81,.06);

    width:100%;
    max-width:100%;
    padding:18px 14px;
    border:1px solid var(--bd);
    border-radius:16px;
    background:linear-gradient(180deg,#fff,#f8fafc);
}

.omRamadan,
.omRamadan *,
.omRamadan *::before,
.omRamadan *::after{
    box-sizing:border-box;
}

.omRamadan h2{
    margin:0 0 10px;
    color:var(--brand);
    font-size:20px;
    line-height:1.7;
    font-weight:800;
}

.omRamadan p{
    margin:0 0 14px;
    color:var(--text);
    line-height:1.9;
    font-size:15px;
}

.omRamadan .omTabs{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    padding:10px;
    background:var(--soft);
    border:1px solid rgba(0,72,81,.16);
    border-radius:14px;
    align-items:center;
}

.omRamadan .omTabs label{
    margin:0;
}

.omRamadan .omTabs input{
    position:absolute;
    opacity:0;
    pointer-events:none;
}

.omRamadan .omTab{
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding:10px 14px;
    border-radius:12px;
    border:1px solid rgba(2,6,23,.10);
    background:#fff;
    color:var(--text);
    cursor:pointer;
    user-select:none;
    transition:.2s ease;
}

.omRamadan .omDot{
    width:14px;
    height:14px;
    border-radius:50%;
    border:2px solid rgba(0,72,81,.35);
    position:relative;
}

.omRamadan .omTab:hover{
    transform:translateY(-1px);
    box-shadow:0 10px 26px rgba(2,6,23,.08);
}

.omRamadan .omTabs input:checked + .omTab{
    border-color:rgba(146,132,44,.55);
    box-shadow:0 12px 30px rgba(2,6,23,.10);
}

.omRamadan .omTabs input:checked + .omTab .omDot{
    border-color:var(--accent);
}

.omRamadan .omTabs input:checked + .omTab .omDot::after{
    content:"";
    position:absolute;
    inset:3px;
    border-radius:50%;
    background:var(--accent);
}

.omRamadan .omForms{
    margin-top:14px;
}

.omRamadan .omFormBox{
    margin-top:12px;
    padding:14px 12px;
    border:1px solid rgba(2,6,23,.10);
    border-radius:14px;
    background:#fff;
}

.omRamadan .omFormBox.is-hidden{
    display:none;
}

.omRamadan .gform_wrapper input,
.omRamadan .gform_wrapper select,
.omRamadan .gform_wrapper textarea{
    max-width:100%;
}

.omRamadan a{
    text-decoration:none;
}

@media(min-width:900px){
    .omRamadan{
        padding:22px 18px;
    }

    .omRamadan h2{
        font-size:22px;
    }
}