:root{
  --noor-teal:#0f766e;
  --noor-teal-2:#115e59;
  --noor-gold:#d4af37;
  --noor-bg:#f7faf9;
  --noor-text:#1f2937;
}
*{font-family:"Noto Sans",system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif}
body{background:var(--noor-bg);color:var(--noor-text)}
.noor-navbar{
  background: linear-gradient(90deg, var(--noor-teal), var(--noor-teal-2));
  position:sticky; top:0; z-index:1030;
}
.brand-mark{width:12px;height:12px;border-radius:50%;background:var(--noor-gold)}
.basmala{
  font-family:"Amiri",serif;
  color:#fff; font-size:1.2rem; letter-spacing:0.5px;
  opacity:0; transform:translateY(-6px);
  transition:opacity .8s ease, transform .8s ease;
}
.basmala.show{opacity:1; transform:none}
.bg-pattern{
  background-image:
   radial-gradient(rgba(212,175,55,.12) 1px, transparent 1px),
   radial-gradient(rgba(15,118,110,.08) 1px, transparent 1px);
  background-position: 0 0, 25px 25px;
  background-size: 50px 50px;
}
.card.noor-card{border:0;border-radius:1rem;box-shadow:0 .5rem 1rem rgba(0,0,0,.06)}
.card.noor-card .card-header{background:transparent;border-bottom:0;font-weight:600}
.btn-outline-pink{--bs-btn-color:#d63384;--bs-btn-border-color:#d63384;--bs-btn-hover-bg:#d63384;--bs-btn-hover-border-color:#d63384;--bs-btn-active-bg:#c22574;--bs-btn-active-border-color:#c22574}
.btn-noor{background:var(--noor-teal);color:#fff;border:none}
.btn-noor:hover{background:#0b4f4a;color:#fff}
.sticky-search{position:sticky; top:70px; z-index:1020; background:#ffffffb8; backdrop-filter: blur(8px); border:1px solid rgba(0,0,0,.05); border-radius:1rem; box-shadow:0 .5rem 1rem rgba(0,0,0,.08)}
@media print{ .no-print{display:none !important} }


.table th, .table td {
    vertical-align: middle;
}

.input-group-text {
    background-color: #008080;
    color: white;
    font-weight: 600;
}

.btn-outline-pink {
    --bs-btn-color: #d63384;
    --bs-btn-border-color: #d63384;
    --bs-btn-hover-bg: #d63384;
    --bs-btn-hover-border-color: #d63384;
}


.btn-pink {
    background-color: #d63384;
    color: white;
}


.btn-noor {
    background: linear-gradient(90deg, #008080 0%, #c1a24a 100%);
    color: white;
    border: none;
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease;
}

    .btn-noor:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    }

.btn-success {
    background: linear-gradient(90deg, #008080, #c1a24a);
    border: none;
}

    .btn-success:hover {
        background: linear-gradient(90deg, #006f6f, #b39035);
    }


.custom-alert-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1050;
    backdrop-filter: blur(2px);
    animation: fadeIn 0.3s ease;
}

.custom-alert {
    background: #fff;
    color: #333;
    border-radius: 16px;
    padding: 1.5rem 2rem;
    box-shadow: 0 10px 25px rgba(0,0,0,0.2);
    max-width: 420px;
    width: 90%;
    text-align: center;
    animation: slideUp 0.3s ease;
}

    .custom-alert h5 {
        color: #c22574;
        margin-bottom: 0.5rem;
        font-weight: 600;
    }

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes slideUp {
    from {
        transform: translateY(30px);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.custom-alert button {
    border-radius: 8px;
    min-width: 140px;
    transition: all 0.25s ease-in-out;
}

    .custom-alert button:hover {
        transform: scale(1.05);
    }

/* ===== Modern Alert Popup ===== */
.custom-alert-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1050;
    backdrop-filter: blur(5px);
    animation: fadeIn 0.3s ease-in-out;
}

.custom-alert {
    background: #ffffff;
    color: #333;
    border-radius: 18px;
    padding: 1.8rem 2.2rem;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.3);
    max-width: 440px;
    width: 90%;
    text-align: center;
    border-top: 5px solid #ffc107;
    animation: slideUp 0.35s ease-out;
    position: relative;
}

/* Animated warning icon */
.alert-icon-container {
    display: flex;
    justify-content: center;
    align-items: center;
}

.alert-icon-pulse {
    background: rgba(255, 193, 7, 0.15);
    border-radius: 50%;
    width: 75px;
    height: 75px;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: pulseGlow 1.8s infinite ease-in-out;
}

.alert-icon {
    color: #ffc107;
    font-size: 2.8rem;
}

.alert-text {
    font-size: 1.05rem;
    margin-top: 0.5rem;
    color: #555;
}

/* Buttons */
.custom-alert button {
    border-radius: 8px;
    min-width: 140px;
    font-weight: 500;
    transition: all 0.25s ease-in-out;
}

    .custom-alert button:hover {
        transform: scale(1.05);
    }

/* Animations */
@@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@@keyframes slideUp {
    from {
        transform: translateY(40px);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@@keyframes pulseGlow {
    0% {
        box-shadow: 0 0 0 0 rgba(255, 193, 7, 0.4);
    }

    70% {
        box-shadow: 0 0 0 20px rgba(255, 193, 7, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(255, 193, 7, 0);
    }
}