/* =========================================================
   Noori Bootstrap Theme
   Bootstrap 5.3.8 Personalization Layer

   Load order:
   1) vendor/bootstrap5/css/bootstrap.rtl.min.css
   2) noori-forms.css

   This file does not replace Bootstrap.
   It modernizes Bootstrap components and keeps only the
   project-specific components that Bootstrap does not provide.
========================================================= */


/* =========================================================
   1. Design Tokens
========================================================= */

:root {
    --noori-blue: #3fa0f2;
    --noori-blue-dark: #2879c6;
    --noori-blue-deep: #0b6bff;
    --noori-blue-soft: #eaf6ff;

    --noori-bg: #f6fbff;
    --noori-white: #ffffff;
    --noori-text: #162033;
    --noori-muted: #6f7f94;
    --noori-border: #dbeeff;

    --noori-success: #16a36a;
    --noori-success-soft: rgba(22, 163, 106, .1);

    --noori-danger: #dc3545;
    --noori-danger-soft: rgba(220, 53, 69, .09);

    --noori-warning: #f2a900;
    --noori-warning-soft: rgba(242, 169, 0, .12);

    --noori-secondary: #64748b;
    --noori-secondary-soft: #f1f5f9;

    --noori-radius-sm: 14px;
    --noori-radius: 18px;
    --noori-radius-lg: 24px;
    --noori-radius-xl: 30px;

    --noori-shadow-sm: 0 10px 26px rgba(22, 136, 232, .07);
    --noori-shadow: 0 18px 45px rgba(22, 136, 232, .12);
    --noori-shadow-lg: 0 26px 64px rgba(22, 136, 232, .17);

    --noori-focus: 0 0 0 4px rgba(22, 136, 232, .13);

    /* Aliases used by some older files */
    --noori-primary: var(--noori-blue);
    --noori-primary-dark: var(--noori-blue-dark);
}


/* =========================================================
   2. Base
========================================================= */
    .text-white-75{
        color: rgba(255, 255, 255, 0.75) !important;
    }

html,
body {
    max-width: 100%;
}

body {
    color: var(--noori-text);
    background-color: var(--noori-bg);
}

::selection {
    color: #fff;
    background: var(--noori-blue-dark);
}

a {
    transition:
        color .2s ease,
        background-color .2s ease,
        border-color .2s ease,
        box-shadow .2s ease;
}

.bi {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    vertical-align: middle;
}

.bi::before {
    display: block;
    line-height: 1;
}


/* =========================================================
   3. Bootstrap Cards
========================================================= */

.card {
    min-width: 0;
    color: var(--noori-text);
    background: rgba(255, 255, 255, .96);
    border: 1px solid var(--noori-border);
    border-radius: var(--noori-radius);
    box-shadow: var(--noori-shadow-sm);
}

.card-header,
.card-footer {
    color: var(--noori-text);
    background: rgba(248, 252, 255, .82);
    border-color: var(--noori-border);
}

.card-header:first-child {
    border-radius:
        calc(var(--noori-radius) - 1px)
        calc(var(--noori-radius) - 1px)
        0
        0;
}

.card-footer:last-child {
    border-radius:
        0
        0
        calc(var(--noori-radius) - 1px)
        calc(var(--noori-radius) - 1px);
}

.card-title {
    color: var(--noori-text);
    font-weight: 900;
    line-height: 1.7;
}

.card-subtitle,
.card-text {
    line-height: 1.9;
}

.card-subtitle {
    color: var(--noori-muted);
}

.card-img-top {
    border-top-left-radius: calc(var(--noori-radius) - 1px);
    border-top-right-radius: calc(var(--noori-radius) - 1px);
}

.card-img-bottom {
    border-bottom-right-radius: calc(var(--noori-radius) - 1px);
    border-bottom-left-radius: calc(var(--noori-radius) - 1px);
}


/* Apply only to cards that should move on hover */
.hover-card {
    transition:
        transform .25s ease,
        border-color .25s ease,
        box-shadow .25s ease,
        background-color .25s ease;
}

.hover-card:hover {
    transform: translateY(-5px);
    border-color: var(--noori-blue-deep) !important;
    box-shadow: 0 14px 32px rgba(11, 107, 255, .13);
}


/* =========================================================
   4. Bootstrap Buttons
========================================================= */

.btn {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 20px;
    border-radius: 15px;
    font-size: 14px;
    font-weight: 900;
    line-height: 1.4;
    box-shadow: none;
    transition:
        color .2s ease,
        background-color .2s ease,
        border-color .2s ease,
        box-shadow .2s ease,
        transform .2s ease;
}

.btn:hover:not(:disabled):not(.disabled) {
    transform: translateY(-2px);
}

.btn:focus,
.btn.focus {
    box-shadow: var(--noori-focus);
}

.btn:disabled,
.btn.disabled {
    transform: none !important;
    box-shadow: none !important;
    opacity: .62;
}

.btn-sm {
    min-height: 36px;
    padding: 7px 14px;
    border-radius: 12px;
    font-size: 12px;
}

.btn-lg {
    min-height: 52px;
    padding: 13px 26px;
    border-radius: 17px;
    font-size: 15px;
}

.btn-primary {
    color: #fff !important;
    border-color: transparent !important;
    background:
        linear-gradient(
            135deg,
            var(--noori-blue),
            var(--noori-blue-dark)
        ) !important;
    box-shadow: 0 14px 28px rgba(22, 136, 232, .24);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active {
    color: #fff !important;
    border-color: transparent !important;
    background:
        linear-gradient(
            135deg,
            #35a8ff,
            var(--noori-blue-dark)
        ) !important;
    box-shadow: 0 18px 36px rgba(22, 136, 232, .32);
}

.btn-secondary {
    color: #fff !important;
    border-color: var(--noori-secondary) !important;
    background: var(--noori-secondary) !important;
}

.btn-secondary:hover,
.btn-secondary:focus,
.btn-secondary:active,
.btn-secondary.active {
    color: #fff !important;
    border-color: #475569 !important;
    background: #475569 !important;
}

.btn-success {
    color: #fff !important;
    border-color: var(--noori-success) !important;
    background:
        linear-gradient(
            135deg,
            #22b879,
            var(--noori-success)
        ) !important;
    box-shadow: 0 12px 26px rgba(22, 163, 106, .2);
}

.btn-success:hover,
.btn-success:focus,
.btn-success:active,
.btn-success.active {
    color: #fff !important;
    border-color: #118557 !important;
    background:
        linear-gradient(
            135deg,
            var(--noori-success),
            #118557
        ) !important;
}

.btn-danger {
    color: #fff !important;
    border-color: var(--noori-danger) !important;
    background:
        linear-gradient(
            135deg,
            #f04b59,
            var(--noori-danger)
        ) !important;
    box-shadow: 0 12px 26px rgba(220, 53, 69, .2);
}

.btn-danger:hover,
.btn-danger:focus,
.btn-danger:active,
.btn-danger.active {
    color: #fff !important;
    border-color: #b82635 !important;
    background:
        linear-gradient(
            135deg,
            var(--noori-danger),
            #b82635
        ) !important;
}

.btn-warning {
    color: #533800 !important;
    border-color: #ffc247 !important;
    background:
        linear-gradient(
            135deg,
            #ffd36f,
            #f5b82e
        ) !important;
}

.btn-warning:hover,
.btn-warning:focus,
.btn-warning:active,
.btn-warning.active {
    color: #3e2a00 !important;
    border-color: #e5a81f !important;
    background:
        linear-gradient(
            135deg,
            #ffc94f,
            #e5a81f
        ) !important;
}

.btn-light {
    color: var(--noori-blue-dark) !important;
    border-color: var(--noori-border) !important;
    background: #fff !important;
}

.btn-light:hover,
.btn-light:focus,
.btn-light:active,
.btn-light.active {
    color: var(--noori-blue-dark) !important;
    border-color: rgba(22, 136, 232, .34) !important;
    background: var(--noori-blue-soft) !important;
}

.btn-dark {
    color: #fff !important;
    border-color: #162033 !important;
    background: #162033 !important;
}

.btn-outline-primary {
    color: var(--noori-blue-dark);
    border-color: rgba(22, 136, 232, .42);
    background: #fff;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active,
.btn-outline-primary.active,
.btn-check:checked + .btn-outline-primary {
    color: #fff !important;
    border-color: var(--noori-blue) !important;
    background:
        linear-gradient(
            135deg,
            var(--noori-blue),
            var(--noori-blue-dark)
        ) !important;
    box-shadow: 0 10px 24px rgba(22, 136, 232, .2);
}

.btn-outline-secondary {
    color: var(--noori-secondary);
    border-color: #cbd5e1;
    background: #fff;
}

.btn-outline-secondary:hover,
.btn-outline-secondary:focus,
.btn-outline-secondary:active,
.btn-outline-secondary.active {
    color: #fff;
    border-color: var(--noori-secondary);
    background: var(--noori-secondary);
}

.btn-link {
    min-height: auto;
    padding: 0;
    color: var(--noori-blue-dark);
    border-radius: 0;
    text-decoration: none;
    box-shadow: none !important;
}

.btn-link:hover,
.btn-link:focus {
    color: var(--noori-blue);
    text-decoration: none;
    transform: none !important;
}

.btn-group > .btn {
    border-radius: 0;
}

.btn-group > .btn:first-child {
    border-top-right-radius: 15px;
    border-bottom-right-radius: 15px;
}

.btn-group > .btn:last-child {
    border-top-left-radius: 15px;
    border-bottom-left-radius: 15px;
}


/* =========================================================
   5. Bootstrap Badges
========================================================= */

.badge {
    min-height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 900;
    line-height: 1.2;
    vertical-align: middle;
}

.badge i {
    flex-shrink: 0;
}

.badge.bg-primary {
    color: var(--noori-blue-dark) !important;
    background: var(--noori-blue-soft) !important;
    border: 1px solid rgba(22, 136, 232, .2);
}

.badge.bg-success {
    color: var(--noori-success) !important;
    background: var(--noori-success-soft) !important;
    border: 1px solid rgba(22, 163, 106, .2);
}

.badge.bg-danger {
    color: var(--noori-danger) !important;
    background: var(--noori-danger-soft) !important;
    border: 1px solid rgba(220, 53, 69, .18);
}

.badge.bg-warning {
    color: #8a5b00 !important;
    background: var(--noori-warning-soft) !important;
    border: 1px solid rgba(242, 169, 0, .24);
}

.badge.bg-secondary {
    color: var(--noori-secondary) !important;
    background: var(--noori-secondary-soft) !important;
    border: 1px solid #e2e8f0;
}

.badge.bg-dark {
    color: #fff !important;
    background: #162033 !important;
    border: 1px solid #162033;
}

.badge.bg-light {
    color: var(--noori-muted) !important;
    background: #fff !important;
    border: 1px solid var(--noori-border);
}

.badge.bg-light.text-primary {
    color: var(--noori-blue-dark) !important;
    background: var(--noori-blue-soft) !important;
    border-color: rgba(22, 136, 232, .2);
}

a.badge {
    text-decoration: none;
    transition:
        color .2s ease,
        background-color .2s ease,
        border-color .2s ease,
        box-shadow .2s ease,
        transform .2s ease;
}

a.badge:hover {
    transform: translateY(-1px);
    color: #fff !important;
    background: var(--noori-blue) !important;
    border-color: var(--noori-blue) !important;
    box-shadow: 0 8px 18px rgba(22, 136, 232, .18);
}


/* =========================================================
   6. Bootstrap Forms
========================================================= */

.form-label {
    margin-bottom: 8px;
    color: var(--noori-text);
    font-size: 13px;
    font-weight: 800;
}

.form-control,
.form-select {
    min-height: 50px;
    padding: 12px 15px;
    color: var(--noori-text);
    background-color: #fff;
    border: 1px solid var(--noori-border);
    border-radius: 15px;
    box-shadow: none;
    font-size: 14px;
    font-weight: 600;
    transition:
        border-color .2s ease,
        box-shadow .2s ease,
        background-color .2s ease;
}

.form-control:hover,
.form-select:hover {
    border-color: rgba(22, 136, 232, .45);
}

.form-control:focus,
.form-select:focus {
    color: var(--noori-text);
    background-color: #fff;
    border-color: var(--noori-blue);
    box-shadow: var(--noori-focus);
}

.form-control::placeholder {
    color: #9aa8ba;
    opacity: 1;
}

.form-control:disabled,
.form-control[readonly],
.form-select:disabled {
    color: #7c8ba0;
    background-color: #f4f8fc;
    border-color: #e4eef7;
    opacity: 1;
}

.form-control-sm,
.form-select-sm {
    min-height: 40px;
    padding: 8px 12px;
    border-radius: 12px;
    font-size: 12px;
}

.form-control-lg,
.form-select-lg {
    min-height: 56px;
    padding: 14px 17px;
    border-radius: 17px;
    font-size: 15px;
}

textarea.form-control {
    min-height: 120px;
    line-height: 2;
    resize: vertical;
}

.form-text {
    margin-top: 7px;
    color: var(--noori-muted);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.8;
}

.invalid-feedback,
.valid-feedback {
    margin-top: 7px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.8;
}

.invalid-feedback {
    color: var(--noori-danger);
}

.valid-feedback {
    color: var(--noori-success);
}

.is-invalid,
.was-validated .form-control:invalid,
.was-validated .form-select:invalid {
    border-color: var(--noori-danger) !important;
}

.is-invalid:focus,
.was-validated .form-control:invalid:focus,
.was-validated .form-select:invalid:focus {
    box-shadow: 0 0 0 4px rgba(220, 53, 69, .12) !important;
}

.is-valid,
.was-validated .form-control:valid,
.was-validated .form-select:valid {
    border-color: var(--noori-success) !important;
}

.is-valid:focus,
.was-validated .form-control:valid:focus,
.was-validated .form-select:valid:focus {
    box-shadow: 0 0 0 4px rgba(22, 163, 106, .12) !important;
}


/* Input groups */

.input-group-text {
    min-height: 50px;
    color: var(--noori-blue-dark);
    background: var(--noori-blue-soft);
    border-color: var(--noori-border);
    font-size: 13px;
    font-weight: 900;
}

.input-group > .form-control:not(:last-child),
.input-group > .form-select:not(:last-child) {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.input-group > .form-control:not(:first-child),
.input-group > .form-select:not(:first-child) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}


/* Floating labels */

.form-floating > .form-control,
.form-floating > .form-select {
    min-height: 58px;
    height: 58px;
    padding-top: 1.55rem;
    padding-bottom: .55rem;
}

.form-floating > label {
    color: var(--noori-muted);
    font-size: 13px;
    font-weight: 700;
}


/* File fields */

input[type="file"].form-control {
    height: 50px;
    min-height: 50px;
    padding: 5px 12px 5px 5px;
    line-height: 38px;
    overflow: hidden;
}

input[type="file"].form-control::file-selector-button {
    height: 38px;
    margin: 0 0 0 12px;
    padding: 0 14px;
    vertical-align: middle;
    color: var(--noori-blue-dark);
    background: var(--noori-blue-soft);
    border: 0;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 900;
    line-height: 38px;
    cursor: pointer;
    transition:
        color .2s ease,
        background-color .2s ease;
}

input[type="file"].form-control::file-selector-button:hover {
    color: #fff;
    background: var(--noori-blue);
}


/* Checkboxes and radios */

.form-check {
    min-height: 28px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding-right: 0;
    margin-bottom: 0;
}

.form-check .form-check-input {
    float: none;
    position: static;
    width: 19px;
    height: 19px;
    flex: 0 0 19px;
    margin: 0;
    border: 1.8px solid rgba(22, 136, 232, .38);
    box-shadow: none;
    cursor: pointer;
    transition:
        background-color .2s ease,
        border-color .2s ease,
        box-shadow .2s ease,
        transform .2s ease;
}

.form-check-input[type="checkbox"] {
    border-radius: 6px;
}

.form-check-input[type="radio"] {
    border-radius: 50%;
}

.form-check-input:hover {
    border-color: var(--noori-blue);
    box-shadow: 0 0 0 4px rgba(22, 136, 232, .08);
}

.form-check-input:checked {
    background-color: var(--noori-blue);
    border-color: var(--noori-blue);
    box-shadow: 0 8px 18px rgba(22, 136, 232, .2);
}

.form-check-input:focus {
    border-color: var(--noori-blue);
    box-shadow: var(--noori-focus);
}

.form-check-input:active {
    transform: scale(.92);
}

.form-check-input:disabled {
    opacity: .52;
    cursor: not-allowed;
}

.form-check-label {
    margin: 0;
    color: var(--noori-text);
    font-size: 13px;
    font-weight: 800;
    line-height: 1.9;
    cursor: pointer;
    user-select: none;
}

.form-check-input:disabled ~ .form-check-label {
    opacity: .58;
    cursor: not-allowed;
}


/* Switches */

.form-switch {
    padding-right: 0;
}

.form-switch .form-check-input {
    width: 40px;
    height: 22px;
    flex-basis: 40px;
    border-radius: 999px;
    background-position: right center;
}

.form-switch .form-check-input:checked {
    background-position: left center;
}


/* Range */

.form-range::-webkit-slider-thumb {
    background: var(--noori-blue);
    box-shadow: 0 6px 14px rgba(22, 136, 232, .22);
}

.form-range::-moz-range-thumb {
    background: var(--noori-blue);
    box-shadow: 0 6px 14px rgba(22, 136, 232, .22);
}


/* LTR form values */
.form-control[dir="ltr"],
.form-select[dir="ltr"],
input[dir="ltr"],
textarea[dir="ltr"] {
    direction: ltr;
}


/* =========================================================
   7. Bootstrap Alerts
========================================================= */

.alert {
    padding: 16px 18px;
    border-width: 1px;
    border-radius: var(--noori-radius);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.9;
    box-shadow: var(--noori-shadow-sm);
}

.alert-heading {
    margin-bottom: 6px;
    font-weight: 900;
}

.alert-primary {
    color: var(--noori-blue-dark);
    background: var(--noori-blue-soft);
    border-color: rgba(22, 136, 232, .2);
}

.alert-success {
    color: #11754d;
    background: var(--noori-success-soft);
    border-color: rgba(22, 163, 106, .2);
}

.alert-danger {
    color: #b32635;
    background: var(--noori-danger-soft);
    border-color: rgba(220, 53, 69, .18);
}

.alert-warning {
    color: #815700;
    background: var(--noori-warning-soft);
    border-color: rgba(242, 169, 0, .24);
}

.alert-secondary {
    color: #526174;
    background: var(--noori-secondary-soft);
    border-color: #e2e8f0;
}

.alert-light {
    color: var(--noori-text);
    background: #fff;
    border-color: var(--noori-border);
}

.alert .btn-close {
    padding: 1.15rem;
}


/* =========================================================
   8. Bootstrap Dropdowns
========================================================= */

.dropdown-menu {
    padding: 8px;
    color: var(--noori-text);
    background: rgba(255, 255, 255, .98);
    border: 1px solid var(--noori-border);
    border-radius: var(--noori-radius);
    box-shadow: var(--noori-shadow);
    backdrop-filter: blur(14px);
}

.dropdown-header {
    padding: 8px 12px;
    color: var(--noori-muted);
    font-size: 11px;
    font-weight: 900;
}

.dropdown-item {
    padding: 10px 12px;
    color: var(--noori-text);
    border-radius: 12px;
    font-size: 13px;
    font-weight: 800;
    transition:
        color .18s ease,
        background-color .18s ease,
        transform .18s ease;
}

.dropdown-item:hover,
.dropdown-item:focus {
    color: var(--noori-blue-dark);
    background: var(--noori-blue-soft);
    transform: translateX(-2px);
}

.dropdown-item.active,
.dropdown-item:active {
    color: #fff;
    background:
        linear-gradient(
            135deg,
            var(--noori-blue),
            var(--noori-blue-dark)
        );
}

.dropdown-item.disabled,
.dropdown-item:disabled {
    color: #a3afbf;
    background: transparent;
}

.dropdown-divider {
    border-color: var(--noori-border);
}


/* =========================================================
   9. Bootstrap Modals and Offcanvas
========================================================= */

.modal-content,
.offcanvas {
    color: var(--noori-text);
    background: rgba(255, 255, 255, .98);
    border: 1px solid var(--noori-border);
    box-shadow: var(--noori-shadow-lg);
    backdrop-filter: blur(16px);
}

.modal-content {
    border-radius: var(--noori-radius-lg);
}

.modal-header,
.modal-footer,
.offcanvas-header {
    border-color: var(--noori-border);
}

.modal-title,
.offcanvas-title {
    font-weight: 900;
    line-height: 1.7;
}

.modal-backdrop.show {
    opacity: .38;
}

.offcanvas {
    border-color: var(--noori-border);
}


/* =========================================================
   10. Bootstrap Accordion
========================================================= */

.accordion-item {
    overflow: hidden;
    color: var(--noori-text);
    background: #fff;
    border: 1px solid var(--noori-border);
    border-radius: var(--noori-radius) !important;
    box-shadow: var(--noori-shadow-sm);
}

.accordion-item + .accordion-item {
    margin-top: 10px;
}

.accordion-button {
    padding: 16px 18px;
    color: var(--noori-text);
    background: #fff;
    font-size: 14px;
    font-weight: 900;
    box-shadow: none !important;
}

.accordion-button:not(.collapsed) {
    color: var(--noori-blue-dark);
    background: var(--noori-blue-soft);
}

.accordion-button:focus {
    border-color: var(--noori-blue);
    box-shadow: var(--noori-focus) !important;
}

.accordion-body {
    color: var(--noori-muted);
    line-height: 2;
}


/* =========================================================
   11. Bootstrap List Groups
========================================================= */

.list-group {
    border-radius: var(--noori-radius);
}

.list-group-item {
    padding: 13px 15px;
    color: var(--noori-text);
    background: #fff;
    border-color: var(--noori-border);
    line-height: 1.8;
}

.list-group-item-action {
    transition:
        color .18s ease,
        background-color .18s ease,
        transform .18s ease;
}

.list-group-item-action:hover,
.list-group-item-action:focus {
    color: var(--noori-blue-dark);
    background: var(--noori-blue-soft);
    transform: translateX(-2px);
}

.list-group-item.active {
    color: #fff;
    background:
        linear-gradient(
            135deg,
            var(--noori-blue),
            var(--noori-blue-dark)
        );
    border-color: var(--noori-blue);
}


/* =========================================================
   12. Bootstrap Navigation
========================================================= */

.nav-tabs {
    gap: 6px;
    border-color: var(--noori-border);
}

.nav-tabs .nav-link {
    color: var(--noori-muted);
    border: 1px solid transparent;
    border-radius: 13px 13px 0 0;
    font-size: 13px;
    font-weight: 900;
}

.nav-tabs .nav-link:hover,
.nav-tabs .nav-link:focus {
    color: var(--noori-blue-dark);
    border-color: var(--noori-border);
    background: var(--noori-blue-soft);
}

.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
    color: var(--noori-blue-dark);
    background: #fff;
    border-color:
        var(--noori-border)
        var(--noori-border)
        #fff;
}

.nav-pills {
    gap: 6px;
}

.nav-pills .nav-link {
    color: var(--noori-muted);
    border-radius: 13px;
    font-size: 13px;
    font-weight: 900;
}

.nav-pills .nav-link:hover {
    color: var(--noori-blue-dark);
    background: var(--noori-blue-soft);
}

.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
    color: #fff;
    background:
        linear-gradient(
            135deg,
            var(--noori-blue),
            var(--noori-blue-dark)
        );
    box-shadow: 0 10px 24px rgba(22, 136, 232, .18);
}


/* =========================================================
   13. Bootstrap Breadcrumb
========================================================= */

.breadcrumb {
    align-items: center;
    gap: 2px;
    color: var(--noori-muted);
    font-size: 13px;
    font-weight: 800;
}

.breadcrumb-item a {
    color: var(--noori-blue-dark);
    text-decoration: none;
}

.breadcrumb-item a:hover {
    color: var(--noori-blue);
}

.breadcrumb-item.active {
    color: var(--noori-muted);
}

.breadcrumb-item + .breadcrumb-item {
    padding-right: .5rem;
    padding-left: 0;
}

.breadcrumb-item + .breadcrumb-item::before {
    float: right;
    padding-right: 0;
    padding-left: .5rem;
    color: #a4b1c0;
}


/* =========================================================
   14. Bootstrap Progress
========================================================= */

.progress {
    height: 10px;
    overflow: hidden;
    background: var(--noori-blue-soft);
    border-radius: 999px;
}

.progress-bar {
    background:
        linear-gradient(
            90deg,
            var(--noori-blue),
            var(--noori-blue-dark)
        );
    border-radius: 999px;
}


/* =========================================================
   15. Bootstrap Popovers and Tooltips
========================================================= */

.popover {
    border-color: var(--noori-border);
    border-radius: var(--noori-radius);
    box-shadow: var(--noori-shadow);
}

.popover-header {
    color: var(--noori-text);
    background: var(--noori-blue-soft);
    border-color: var(--noori-border);
    font-weight: 900;
}

.popover-body {
    color: var(--noori-muted);
    line-height: 1.9;
}

.tooltip-inner {
    padding: 7px 10px;
    background: #162033;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 800;
}


/* =========================================================
   16. Project-Specific Modifier Classes
   Bootstrap does not provide these behaviors.
========================================================= */

/* Decorative box used for purchase, summary or highlighted content */
.purchase-box {
    position: relative;
    overflow: hidden;
    padding: 20px;
    background:
        radial-gradient(
            circle at top left,
            rgba(22, 136, 232, .13),
            transparent 34%
        ),
        linear-gradient(
            180deg,
            #f8fcff,
            #ffffff
        );
    border: 1px solid var(--noori-border);
    border-radius: var(--noori-radius-lg);
}

.purchase-box::before {
    content: "";
    position: absolute;
    left: -80px;
    bottom: -90px;
    width: 200px;
    height: 200px;
    border: 28px solid rgba(22, 136, 232, .05);
    border-radius: 50%;
    pointer-events: none;
}

.purchase-box > * {
    position: relative;
    z-index: 1;
}


/* =========================================================
   17. Project-Specific Hero
   Kept because Bootstrap has no equivalent component.
========================================================= */

.noori-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 22px;
    padding: 28px;
    overflow: hidden;
    color: #fff;
    background:
        radial-gradient(
            circle at top left,
            rgba(255, 255, 255, .28),
            transparent 30%
        ),
        linear-gradient(
            135deg,
            var(--noori-blue),
            var(--noori-blue-dark)
        );
    border-radius: var(--noori-radius-xl);
    box-shadow: var(--noori-shadow);
    text-align: right;
}

.noori-hero > div:first-child {
    flex: 1 1 auto;
}

.noori-hero span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 12px;
    padding: 7px 13px;
    color: rgba(255, 255, 255, .92);
    background: rgba(255, 255, 255, .16);
    border-radius: 999px;
    font-size: 12px;
    font-weight: 800;
}

.noori-hero h1 {
    margin: 0 0 8px;
    color: #fff;
    font-size: 28px;
    font-weight: 900;
    line-height: 1.7;
}

.noori-hero p {
    max-width: 620px;
    margin: 0;
    color: rgba(255, 255, 255, .82);
    font-size: 14px;
    line-height: 2;
}


/* Hero user summary */

.noori-user-box {
    min-width: 270px;
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 14px;
    background: rgba(255, 255, 255, .13);
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 22px;
}

.noori-avatar {
    width: 58px;
    height: 58px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 58px;
    color: var(--noori-blue-dark);
    background: #fff;
    border-radius: 20px;
    font-size: 26px;
    font-weight: 900;
}

.noori-avatar i::before {
    line-height: 1;
}

.noori-user-box strong,
.noori-user-box small {
    display: block;
}

.noori-user-box strong {
    margin-bottom: 5px;
    color: #fff;
    font-size: 14px;
    font-weight: 900;
}

.noori-user-box small {
    color: rgba(255, 255, 255, .78);
    font-size: 12px;
}


/* Hero count summary */

.noori-count-box {
    min-width: 180px;
    padding: 18px;
    color: #fff;
    background: rgba(255, 255, 255, .13);
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 22px;
    text-align: center;
}

.noori-count-box strong {
    display: block;
    margin-bottom: 4px;
    color: #fff;
    font-size: 30px;
    font-weight: 900;
    line-height: 1.4;
    text-align: center;
}

.noori-count-box span,
.noori-count-box small {
    display: block;
    color: rgba(255, 255, 255, .78);
    font-size: 12px;
    font-weight: 800;
    line-height: 1.9;
    text-align: center;
}


/* =========================================================
   18. Compatibility Helpers
   Keep old pages working while future pages use Bootstrap.
========================================================= */

/*
   Future pages should normally use:
   - card
   - badge bg-light text-primary
   - Bootstrap spacing and grid classes

   These two tiny aliases remain temporarily because they are
   already used across existing Blade files.
*/

.official-agency-card {
    border-radius: var(--noori-radius);
}

.section-badge {
    min-height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 6px 12px;
    color: var(--noori-blue-dark);
    background: var(--noori-blue-soft);
    border: 1px solid rgba(22, 136, 232, .18);
    border-radius: 999px;
    font-size: 12px;
    font-weight: 900;
    line-height: 1.2;
}


/* =========================================================
   19. Datepicker
========================================================= */

input[data-jdp] {
    cursor: pointer;
}

jdp-container,
.jdp-container {
    z-index: 99999 !important;
}


/* =========================================================
   20. Scrollbars
========================================================= */

* {
    scrollbar-width: thin;
    scrollbar-color:
        rgba(22, 136, 232, .45)
        rgba(234, 246, 255, .7);
}

::-webkit-scrollbar {
    width: 9px;
    height: 9px;
}

::-webkit-scrollbar-track {
    background: rgba(234, 246, 255, .7);
    border-radius: 999px;
}

::-webkit-scrollbar-thumb {
    background:
        linear-gradient(
            180deg,
            var(--noori-blue),
            var(--noori-blue-dark)
        );
    border: 2px solid rgba(234, 246, 255, .9);
    border-radius: 999px;
}

::-webkit-scrollbar-thumb:hover {
    background:
        linear-gradient(
            180deg,
            #35a8ff,
            var(--noori-blue)
        );
}

::-webkit-scrollbar-corner {
    background: transparent;
}

.dropdown-menu,
.modal-body,
.offcanvas-body {
    scrollbar-width: thin;
    scrollbar-color:
        rgba(22, 136, 232, .45)
        rgba(234, 246, 255, .75);
}

.dropdown-menu::-webkit-scrollbar,
.modal-body::-webkit-scrollbar,
.offcanvas-body::-webkit-scrollbar {
    width: 7px;
    height: 7px;
}


/* =========================================================
   21. Responsive
========================================================= */

@media (max-width: 767.98px) {
    .card {
        border-radius: 16px;
    }

    .card-header:first-child {
        border-radius: 15px 15px 0 0;
    }

    .card-footer:last-child {
        border-radius: 0 0 15px 15px;
    }

    .btn {
        min-height: 42px;
        padding: 9px 17px;
        border-radius: 14px;
        font-size: 13px;
    }

    .form-control,
    .form-select {
        min-height: 48px;
        padding: 11px 14px;
        border-radius: 14px;
        font-size: 13px;
    }

    .alert,
    .dropdown-menu {
        border-radius: 16px;
    }

    .modal-content {
        border-radius: 20px;
    }

    .purchase-box {
        padding: 16px;
        border-radius: 20px;
    }

    .noori-hero {
        flex-direction: column;
        align-items: flex-start;
        padding: 22px 18px;
        border-radius: 24px;
    }

    .noori-hero h1 {
        font-size: 22px;
    }

    .noori-hero p {
        font-size: 13px;
    }

    .noori-user-box,
    .noori-count-box {
        width: 100%;
        min-width: 0;
    }
}

@media (max-width: 419.98px) {
    .noori-hero {
        padding: 20px 14px;
        border-radius: 22px;
    }

    .noori-user-box {
        align-items: flex-start;
    }

    .noori-user-box small {
        white-space: normal;
    }
}


/* =========================================================
   22. Reduced Motion
========================================================= */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
    }

    .hover-card:hover,
    .btn:hover:not(:disabled):not(.disabled),
    .dropdown-item:hover,
    .list-group-item-action:hover {
        transform: none !important;
    }
}