/* /Components/AddDonorModal.razor.rz.scp.css */
/* =====================================================
   AddDonorModal.razor.css
   Scoped styles for the Add Donor Modal
   ===================================================== */

/* ── Overlay ── */
.adm-overlay[b-ihkite2br5] {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(3px);
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    animation: adm-fade-in-b-ihkite2br5 0.2s ease;
}

@keyframes adm-fade-in-b-ihkite2br5 {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* ── Panel ── */
.adm-panel[b-ihkite2br5] {
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.18);
    width: 100%;
    max-width: 480px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: adm-slide-up-b-ihkite2br5 0.25s ease;
}

/* Wide variant for inline AddPet — match AddPet/EditPet container width */
.adm-panel--wide[b-ihkite2br5] {
    max-width: 1200px;
}

@keyframes adm-slide-up-b-ihkite2br5 {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

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

/* ── Header ── */
.adm-header[b-ihkite2br5] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px 16px;
    /*border-bottom: 1px solid #f1f5f9;*/
    flex-shrink: 0;
    /*background: linear-gradient(135deg, #60707a70 0%, #60707a7d 100%);*/
    background: linear-gradient(135deg, #1e293bf2 10%, #1e293bf2 100%);
}

.adm-header-left[b-ihkite2br5] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.adm-header-right[b-ihkite2br5] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.adm-icon[b-ihkite2br5] {
    width: 40px;
    height: 40px;
    background: #fef0ee;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
}

.adm-title[b-ihkite2br5] {
    font-size: 17px;
    font-weight: 700;
    color: #ffde59;
}

.adm-breadcrumb[b-ihkite2br5] {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    margin-top: 2px;
}

.bc-active[b-ihkite2br5] {
    color: #64748b;
    font-weight: 500;
}

.bc-done[b-ihkite2br5] {
    color: #94a3b8;
    cursor: pointer;
}

    .bc-done:hover[b-ihkite2br5] {
        color: #475569;
        text-decoration: underline;
    }

.bc-sep[b-ihkite2br5] {
    color: #cbd5e1;
}

.adm-close[b-ihkite2br5] {
    height: 32px;
    padding: 0 10px;
    border-radius: 8px;
    border: none;
    background: #f8fafc;
    color: #64748b;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    font-family: inherit;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transition: all 0.15s;
    flex-shrink: 0;
}

    .adm-close:hover[b-ihkite2br5] {
        background: #f1f5f9;
        color: #1e293b;
    }

/* ── Body ── */
.adm-body[b-ihkite2br5] {
    padding: 24px;
    overflow-y: auto;
    flex: 1;
}

.adm-body--center[b-ihkite2br5] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.adm-body--noPad[b-ihkite2br5] {
    padding: 0;
}

/* When AddPet is embedded for "Add new pet": this div is the single scroll container.
   The sticky behaviour & overflow overrides for AddPet's own wrappers live inside
   AddPet.razor.css under .add-pet-page--embedded so they share scope and apply. */
.adm-body--addpet[b-ihkite2br5] {
    padding: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    flex: 1;
    min-height: 0;
}

/* ── Step 1: Ask ── */
.adm-ask-icon[b-ihkite2br5] {
    font-size: 52px;
    margin-bottom: 16px;
    margin-top: 8px;
}

.adm-ask-title[b-ihkite2br5] {
    font-size: 20px;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 10px;
    line-height: 1.3;
}

.adm-ask-sub[b-ihkite2br5] {
    font-size: 14px;
    color: #64748b;
    line-height: 1.6;
    margin-bottom: 28px;
    max-width: 360px;
}

.adm-ask-actions[b-ihkite2br5] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    width: 100%;
    max-width: 380px;
}

.adm-choice-btn[b-ihkite2br5] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 22px 16px;
    border-radius: 16px;
    border: 2px solid #e2e8f0;
    background: #f8fafc;
    cursor: pointer;
    transition: all 0.2s;
    font-family: inherit;
}

    .adm-choice-btn:hover[b-ihkite2br5] {
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(0,0,0,0.08);
    }

.adm-choice-yes:hover[b-ihkite2br5] {
    border-color: #22c55e;
    background: #f0fdf4;
}

.adm-choice-no:hover[b-ihkite2br5] {
    border-color: #3b82f6;
    background: #eff6ff;
}

.choice-emoji[b-ihkite2br5] {
    font-size: 28px;
}

.choice-label[b-ihkite2br5] {
    font-size: 14px;
    font-weight: 700;
    color: #0f172a;
}

.choice-hint[b-ihkite2br5] {
    font-size: 12px;
    color: #94a3b8;
}

/* ── Step 2a: Pet list ── */
.adm-pick-hint[b-ihkite2br5] {
    font-size: 13px;
    color: #64748b;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 12px 14px;
    margin-bottom: 16px;
    line-height: 1.5;
}

.adm-pet-list[b-ihkite2br5] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.adm-pet-card[b-ihkite2br5] {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    border-radius: 14px;
    border: 2px solid #e2e8f0;
    background: #fff;
    cursor: pointer;
    transition: all 0.2s;
}

    .adm-pet-card:hover:not(.adm-pet-card--donor)[b-ihkite2br5] {
        border-color: #3b82f6;
        background: #eff6ff;
    }

.adm-pet-card--selected[b-ihkite2br5] {
    border-color: #3b82f6 !important;
    background: #eff6ff !important;
}

.adm-pet-card--donor[b-ihkite2br5] {
    opacity: 0.55;
    cursor: default;
    background: #f8fafc;
}

.apc-avatar[b-ihkite2br5] {
    width: 46px;
    height: 46px;
    border-radius: 12px;
    background: #f1f5f9;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    overflow: hidden;
    flex-shrink: 0;
}

    .apc-avatar img[b-ihkite2br5] {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.apc-info[b-ihkite2br5] {
    flex: 1;
    min-width: 0;
}

.apc-name[b-ihkite2br5] {
    font-weight: 700;
    font-size: 15px;
    color: #0f172a;
    margin-bottom: 3px;
}

.apc-meta[b-ihkite2br5] {
    font-size: 13px;
    color: #64748b;
    display: flex;
    gap: 8px;
    align-items: center;
}

.apc-blood[b-ihkite2br5] {
    background: #fef0ee;
    color: #ef4444;
    border-radius: 6px;
    padding: 1px 8px;
    font-size: 12px;
    font-weight: 600;
}

.apc-right[b-ihkite2br5] {
    flex-shrink: 0;
}

.apc-badge[b-ihkite2br5] {
    font-size: 11px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 100px;
}

.apc-badge--donor[b-ihkite2br5] {
    background: #f0fdf4;
    color: #16a34a;
}

.apc-badge--selected[b-ihkite2br5] {
    background: #eff6ff;
    color: #2563eb;
}

.apc-radio[b-ihkite2br5] {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid #cbd5e1;
    display: block;
    transition: all 0.15s;
}

.adm-pet-card--selected .apc-radio[b-ihkite2br5] {
    background: #3b82f6;
    border-color: #3b82f6;
}

/* ── Empty / All-done states ── */
.adm-empty[b-ihkite2br5], .adm-all-done[b-ihkite2br5] {
    text-align: center;
    padding: 32px 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.adm-empty-icon[b-ihkite2br5], .adm-all-done-icon[b-ihkite2br5] {
    font-size: 48px;
}

.adm-empty h3[b-ihkite2br5], .adm-all-done h3[b-ihkite2br5] {
    font-size: 18px;
    font-weight: 700;
    color: #0f172a;
}

.adm-empty p[b-ihkite2br5], .adm-all-done p[b-ihkite2br5] {
    font-size: 14px;
    color: #64748b;
    margin-bottom: 8px;
}

/* ── Step 3: Confirm ── */
.adm-confirm-avatar[b-ihkite2br5] {
    font-size: 56px;
    margin-top: 8px;
    margin-bottom: 12px;
}

.adm-confirm-title[b-ihkite2br5] {
    font-size: 20px;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 20px;
}

.adm-confirm-card[b-ihkite2br5] {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 4px 0;
    width: 100%;
    max-width: 340px;
    margin-bottom: 18px;
}

.adm-confirm-row[b-ihkite2br5] {
    display: flex;
    justify-content: space-between;
    padding: 12px 18px;
    border-bottom: 1px solid #f1f5f9;
}

    .adm-confirm-row:last-child[b-ihkite2br5] {
        border-bottom: none;
    }

.acr-label[b-ihkite2br5] {
    font-size: 13px;
    color: #94a3b8;
    font-weight: 500;
}

.acr-value[b-ihkite2br5] {
    font-size: 13px;
    color: #0f172a;
    font-weight: 600;
}

.acr-avail[b-ihkite2br5] {
    color: #16a34a;
}

.adm-confirm-note[b-ihkite2br5] {
    font-size: 12px;
    color: #94a3b8;
    line-height: 1.6;
    max-width: 340px;
}

/* ── Step 4: Success ── */
.adm-success[b-ihkite2br5] {
    padding: 32px 24px;
}

.adm-success-ring[b-ihkite2br5] {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: linear-gradient(135deg, #22c55e, #16a34a);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 36px;
    color: white;
    margin-bottom: 20px;
    animation: adm-pop-b-ihkite2br5 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes adm-pop-b-ihkite2br5 {
    from {
        transform: scale(0);
        opacity: 0;
    }

    to {
        transform: scale(1);
        opacity: 1;
    }
}

.adm-success-title[b-ihkite2br5] {
    font-size: 22px;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 10px;
}

.adm-success-sub[b-ihkite2br5] {
    font-size: 14px;
    color: #64748b;
    line-height: 1.6;
    max-width: 340px;
    margin-bottom: 8px;
}

/* ── Error ── */
.adm-error[b-ihkite2br5] {
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #dc2626;
    border-radius: 10px;
    padding: 12px 16px;
    font-size: 13px;
    margin-top: 12px;
    width: 100%;
    max-width: 340px;
}

/* ── Footer ── */
.adm-footer[b-ihkite2br5] {
    padding: 16px 24px;
    border-top: 1px solid #f1f5f9;
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    flex-shrink: 0;
}

.adm-footer--center[b-ihkite2br5] {
    justify-content: center;
    border-top: none;
    padding-top: 4px;
}

/* ── Buttons ── */
.adm-btn[b-ihkite2br5] {
    padding: 10px 22px;
    border-radius: 10px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    border: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

    .adm-btn:disabled[b-ihkite2br5] {
        opacity: 0.5;
        cursor: not-allowed;
    }

.adm-btn--primary[b-ihkite2br5] {
    /* background: #f8fafc; */
    /* color: #64748b; */ 
    background: #3b82f6;
    color: white;
    height: 32px;
    padding: 0 10px;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    font-family: inherit;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transition: all 0.15s;
    flex-shrink: 0;
}

    .adm-btn--primary:hover:not(:disabled)[b-ihkite2br5] {
        background: #334155;
        transform: translateY(-1px);
    }

.adm-btn--register[b-ihkite2br5] {
    background: linear-gradient(135deg, #ef4444, #dc2626);
    color: white;
    box-shadow: 0 4px 14px rgba(239, 68, 68, 0.35);
}

    .adm-btn--register:hover:not(:disabled)[b-ihkite2br5] {
        box-shadow: 0 6px 20px rgba(239, 68, 68, 0.45);
        transform: translateY(-1px);
    }

.adm-btn--ghost[b-ihkite2br5] {
    background: transparent;
    border: 1px solid #e2e8f0;
    color: #64748b;
}

    .adm-btn--ghost:hover:not(:disabled)[b-ihkite2br5] {
        background: #f8fafc;
        color: #1e293b;
    }

/* ── Spinner ── */
.adm-loading[b-ihkite2br5] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 40px;
    color: #64748b;
    font-size: 14px;
}

.adm-spinner[b-ihkite2br5] {
    width: 28px;
    height: 28px;
    border: 3px solid #e2e8f0;
    border-top-color: #3b82f6;
    border-radius: 50%;
    animation: adm-spin-b-ihkite2br5 0.8s linear infinite;
}

.adm-spinner--sm[b-ihkite2br5] {
    width: 15px;
    height: 15px;
    border-width: 2px;
    border-top-color: white;
}

@keyframes adm-spin-b-ihkite2br5 {
    to {
        transform: rotate(360deg);
    }
}

/* ── Header button label (hidden on mobile) ── */
.adm-btn-label[b-ihkite2br5] {
    display: inline;
}

/* ── Responsive ── */
@media (max-width: 520px) {
    .adm-btn-label[b-ihkite2br5] {
        display: none;
    }

    .adm-header-save[b-ihkite2br5] {
        padding: 8px 12px;
    }

    .adm-close[b-ihkite2br5] {
        gap: 0;
    }

    .adm-panel[b-ihkite2br5], .adm-panel--wide[b-ihkite2br5] {
        max-width: 100%;
        border-radius: 20px 20px 0 0;
    }

    .adm-overlay[b-ihkite2br5] {
        align-items: flex-end;
        padding: 0;
    }

    .adm-ask-actions[b-ihkite2br5] {
        grid-template-columns: 1fr;
    }

    .adm-panel--wide[b-ihkite2br5] {
        max-height: 95vh;
    }
}
/* /Components/BreedAutocomplete.razor.rz.scp.css */
.breed-autocomplete[b-yzb07101m2] {
    position: relative;
}

.breed-autocomplete.is-disabled[b-yzb07101m2] {
    cursor: not-allowed;
}

.breed-autocomplete.is-disabled input[b-yzb07101m2] {
    background: #f3f4f6;
    color: #9ca3af;
    cursor: not-allowed;
    pointer-events: none;
}

.breed-autocomplete.is-disabled .rpbd2-flabel[b-yzb07101m2] {
    color: #9ca3af;
}

.breed-dropdown[b-yzb07101m2] {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #fff;
    border: 1px solid #d1d5db;
    border-top: none;
    border-radius: 0 0 8px 8px;
    max-height: 240px;
    overflow-y: auto;
    list-style: none;
    margin: 0;
    padding: 0;
    z-index: 200;
    box-shadow: 0 4px 12px rgba(0,0,0,0.10);
}

.breed-option[b-yzb07101m2] {
    padding: 10px 14px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.breed-option:hover[b-yzb07101m2],
.breed-option.is-highlighted[b-yzb07101m2] {
    background: #f3f4f6;
}

.breed-option.is-highlighted[b-yzb07101m2] {
    border-left: 3px solid #6366f1;
    padding-left: 11px;
}

.breed-option__name[b-yzb07101m2] {
    font-size: 0.95rem;
    color: #111827;
}

.breed-option__alias[b-yzb07101m2] {
    font-size: 0.78rem;
    color: #6b7280;
}

.breed-option--mixed[b-yzb07101m2] {
    border-top: 1px solid #e5e7eb;
    color: #6b7280;
    font-style: italic;
}

.breed-option--empty[b-yzb07101m2] {
    color: #9ca3af;
    font-style: italic;
    cursor: default;
}

.breed-mix-input[b-yzb07101m2] {
    margin-top: 10px;
}
/* /Components/ContactDonorModal.razor.rz.scp.css */
/* =====================================================
   ContactDonorModal.razor.css
   Scoped styles for the Contact Donor Modal
   ===================================================== */

/* ── Overlay ── */
.cdm-overlay[b-iqzaiszl2m] {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(3px);
    z-index: 2100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    animation: cdm-fade-in-b-iqzaiszl2m 0.2s ease;
}

@keyframes cdm-fade-in-b-iqzaiszl2m {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* ── Panel ── */
.cdm-panel[b-iqzaiszl2m] {
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.18);
    width: 100%;
    max-width: 420px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: cdm-slide-up-b-iqzaiszl2m 0.25s ease;
}

@keyframes cdm-slide-up-b-iqzaiszl2m {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0);    }
}

/* ── Header ── */
.cdm-header[b-iqzaiszl2m] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 20px 14px;
    background: linear-gradient(135deg, #1e293bf2 10%, #1e293bf2 100%);
    flex-shrink: 0;
}

.cdm-header-left[b-iqzaiszl2m] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.cdm-pet-avatar[b-iqzaiszl2m] {
    width: 42px;
    height: 42px;
    background: rgba(255,255,255,0.12);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    flex-shrink: 0;
}

.cdm-title[b-iqzaiszl2m] {
    font-size: 16px;
    font-weight: 700;
    color: #ffde59;
    line-height: 1.2;
}

.cdm-subtitle[b-iqzaiszl2m] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: #94a3b8;
    margin-top: 3px;
}

.cdm-blood-chip[b-iqzaiszl2m] {
    background: rgba(239, 68, 68, 0.15);
    color: #fca5a5;
    border-radius: 20px;
    padding: 1px 8px;
    font-size: 11px;
    font-weight: 600;
}

.cdm-close[b-iqzaiszl2m] {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: none;
    background: rgba(255,255,255,0.1);
    color: #94a3b8;
    cursor: pointer;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
    flex-shrink: 0;
}

    .cdm-close:hover[b-iqzaiszl2m] {
        background: rgba(255,255,255,0.2);
        color: #fff;
    }

/* ── Body ── */
.cdm-body[b-iqzaiszl2m] {
    padding: 20px;
}

.cdm-intro[b-iqzaiszl2m] {
    font-size: 14px;
    color: #475569;
    line-height: 1.6;
    margin-bottom: 18px;
}

.cdm-note[b-iqzaiszl2m] {
    font-size: 12px;
    color: #94a3b8;
}

/* ── Channel buttons ── */
.cdm-channels[b-iqzaiszl2m] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.cdm-channel-btn[b-iqzaiszl2m] {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    border-radius: 14px;
    border: 2px solid transparent;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s;
    background: #f8fafc;
}

    .cdm-channel-btn:hover[b-iqzaiszl2m] {
        transform: translateY(-1px);
        box-shadow: 0 4px 14px rgba(0,0,0,0.08);
        text-decoration: none;
    }

.cdm-whatsapp[b-iqzaiszl2m] {
    border-color: #dcfce7;
}

    .cdm-whatsapp:hover[b-iqzaiszl2m] {
        background: #f0fdf4;
        border-color: #86efac;
    }

    .cdm-whatsapp .cdm-ch-icon[b-iqzaiszl2m] {
        background: #25D366;
        color: #fff;
    }

    .cdm-whatsapp .cdm-ch-label[b-iqzaiszl2m] {
        color: #15803d;
    }

.cdm-call[b-iqzaiszl2m] {
    border-color: #dbeafe;
}

    .cdm-call:hover[b-iqzaiszl2m] {
        background: #eff6ff;
        border-color: #93c5fd;
    }

    .cdm-call .cdm-ch-icon[b-iqzaiszl2m] {
        background: #3b82f6;
        color: #fff;
    }

    .cdm-call .cdm-ch-label[b-iqzaiszl2m] {
        color: #1d4ed8;
    }

.cdm-email[b-iqzaiszl2m] {
    border-color: #e2e8f0;
}

    .cdm-email:hover[b-iqzaiszl2m] {
        background: #f1f5f9;
        border-color: #94a3b8;
    }

    .cdm-email .cdm-ch-icon[b-iqzaiszl2m] {
        background: #64748b;
        color: #fff;
    }

    .cdm-email .cdm-ch-label[b-iqzaiszl2m] {
        color: #334155;
    }

.cdm-ch-icon[b-iqzaiszl2m] {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}

.cdm-ch-info[b-iqzaiszl2m] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.cdm-ch-label[b-iqzaiszl2m] {
    font-size: 15px;
    font-weight: 700;
}

.cdm-ch-hint[b-iqzaiszl2m] {
    font-size: 12px;
    color: #94a3b8;
}

.cdm-ch-arrow[b-iqzaiszl2m] {
    color: #cbd5e1;
    font-size: 12px;
    flex-shrink: 0;
}

/* ── Empty state ── */
.cdm-empty[b-iqzaiszl2m] {
    text-align: center;
    padding: 20px 8px 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.cdm-empty-icon[b-iqzaiszl2m] {
    font-size: 44px;
}

.cdm-empty h3[b-iqzaiszl2m] {
    font-size: 17px;
    font-weight: 700;
    color: #0f172a;
    margin: 0;
}

.cdm-empty p[b-iqzaiszl2m] {
    font-size: 13px;
    color: #64748b;
    line-height: 1.6;
    max-width: 300px;
    margin: 0;
}

/* ── Responsive ── */
@media (max-width: 480px) {
    .cdm-panel[b-iqzaiszl2m] {
        max-width: 100%;
        border-radius: 20px 20px 0 0;
    }

    .cdm-overlay[b-iqzaiszl2m] {
        align-items: flex-end;
        padding: 0;
    }
}
/* /Components/DocumentUpload.razor.rz.scp.css */
/* DocumentUpload Component Styles */
.document-upload-container[b-kof0e2vyih] {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* Upload Section */
.upload-section[b-kof0e2vyih] {
    margin-bottom: 2rem;
}

.upload-header[b-kof0e2vyih] {
    margin-bottom: 1rem;
}

    .upload-header h4[b-kof0e2vyih] {
        color: #1e293b;
        font-weight: 600;
        margin-bottom: 0.5rem;
    }

.upload-description[b-kof0e2vyih] {
    color: #64748b;
    margin-bottom: 0;
    font-size: 0.875rem;
}

.upload-area[b-kof0e2vyih] {
    border: 2px dashed #cbd5e1;
    border-radius: 8px;
    padding: 2rem;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    background-color: #f8fafc;
}

    .upload-area:hover[b-kof0e2vyih] {
        border-color: #3b82f6;
        background-color: #eff6ff;
    }

    .upload-area.uploading[b-kof0e2vyih] {
        border-color: #3b82f6;
        background-color: #eff6ff;
        cursor: default;
    }

.upload-icon[b-kof0e2vyih] {
    font-size: 3rem;
    color: #94a3b8;
    margin-bottom: 1rem;
}

.upload-prompt h5[b-kof0e2vyih] {
    color: #334155;
    margin-bottom: 0.5rem;
}

.upload-prompt p[b-kof0e2vyih] {
    color: #64748b;
    margin-bottom: 0.25rem;
    font-size: 0.875rem;
}

.file-limit[b-kof0e2vyih] {
    font-size: 0.75rem !important;
    color: #94a3b8 !important;
}

.upload-progress[b-kof0e2vyih] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

    .upload-progress .spinner-border[b-kof0e2vyih] {
        color: #3b82f6;
    }

/* Filter Section */
.filter-section[b-kof0e2vyih] {
    margin-bottom: 1.5rem;
}

.filter-buttons[b-kof0e2vyih] {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.btn-filter[b-kof0e2vyih] {
    padding: 0.5rem 1rem;
    border: 1px solid #e2e8f0;
    background-color: #ffffff;
    color: #64748b;
    border-radius: 20px;
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

    .btn-filter:hover[b-kof0e2vyih] {
        border-color: #3b82f6;
        color: #3b82f6;
    }

    .btn-filter.active[b-kof0e2vyih] {
        background-color: #3b82f6;
        border-color: #3b82f6;
        color: white;
    }

/* Documents Grid */
.documents-grid[b-kof0e2vyih] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1rem;
}

.document-card[b-kof0e2vyih] {
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 1rem;
    background-color: #ffffff;
    transition: all 0.2s ease;
    position: relative;
}

    .document-card:hover[b-kof0e2vyih] {
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        border-color: #cbd5e1;
    }

    .document-card.expired[b-kof0e2vyih] {
        border-color: #ef4444;
        background-color: #fef2f2;
    }

    .document-card.expiring[b-kof0e2vyih] {
        border-color: #f59e0b;
        background-color: #fffbeb;
    }

.document-header[b-kof0e2vyih] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.document-icon[b-kof0e2vyih] {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f1f5f9;
    border-radius: 6px;
    font-size: 1.25rem;
    color: #3b82f6;
}

.document-info[b-kof0e2vyih] {
    flex: 1;
    min-width: 0;
}

.document-title[b-kof0e2vyih] {
    font-weight: 600;
    color: #1e293b;
    margin: 0;
    font-size: 0.875rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.document-type-badge[b-kof0e2vyih] {
    display: inline-block;
    background-color: #e2e8f0;
    color: #475569;
    padding: 0.125rem 0.5rem;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 500;
}

.document-actions[b-kof0e2vyih] {
    display: flex;
    gap: 0.25rem;
}

    .document-actions .btn[b-kof0e2vyih] {
        padding: 0.25rem 0.5rem;
        font-size: 0.75rem;
    }

.document-description[b-kof0e2vyih] {
    margin-bottom: 0.75rem;
}

    .document-description p[b-kof0e2vyih] {
        color: #64748b;
        font-size: 0.875rem;
        margin: 0;
        line-height: 1.4;
    }

.document-footer[b-kof0e2vyih] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.75rem;
    color: #94a3b8;
}

.document-meta[b-kof0e2vyih] {
    display: flex;
    gap: 0.5rem;
}

.expiry-info .badge[b-kof0e2vyih] {
    font-size: 0.625rem;
    padding: 0.25rem 0.5rem;
}

.badge-danger[b-kof0e2vyih] {
    background-color: #ef4444;
    color: white;
}

.badge-warning[b-kof0e2vyih] {
    background-color: #f59e0b;
    color: white;
}

.badge-info[b-kof0e2vyih] {
    background-color: #3b82f6;
    color: white;
}

/* No Documents State */
.no-documents[b-kof0e2vyih] {
    text-align: center;
    padding: 3rem 1rem;
    color: #64748b;
}

.empty-icon[b-kof0e2vyih] {
    font-size: 4rem;
    color: #cbd5e1;
    margin-bottom: 1rem;
}

.no-documents h5[b-kof0e2vyih] {
    color: #475569;
    margin-bottom: 0.5rem;
}

/* Modal Styles */
.modal-overlay[b-kof0e2vyih] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.modal-content[b-kof0e2vyih] {
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
    max-height: 90vh;
    overflow-y: auto;
    width: 90%;
    max-width: 600px;
}

.document-upload-modal[b-kof0e2vyih] {
    max-width: 500px;
}

.document-viewer-modal[b-kof0e2vyih] {
    max-width: 800px;
    width: 95%;
}

.modal-header[b-kof0e2vyih] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid #e2e8f0;
}

    .modal-header h5[b-kof0e2vyih] {
        margin: 0;
        font-weight: 600;
        color: #1e293b;
    }

.close-button[b-kof0e2vyih] {
    background: none;
    border: none;
    font-size: 1.5rem;
    color: #94a3b8;
    cursor: pointer;
    padding: 0;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .close-button:hover[b-kof0e2vyih] {
        color: #64748b;
    }

.modal-body[b-kof0e2vyih] {
    padding: 1.5rem;
}

.modal-footer[b-kof0e2vyih] {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 1rem 1.5rem;
    border-top: 1px solid #e2e8f0;
}

/* Form Styles */
.form-group[b-kof0e2vyih] {
    margin-bottom: 1rem;
}

    .form-group label[b-kof0e2vyih] {
        display: block;
        margin-bottom: 0.25rem;
        font-weight: 500;
        color: #374151;
        font-size: 0.875rem;
    }

.form-control[b-kof0e2vyih] {
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 0.875rem;
    transition: border-color 0.2s ease;
}

    .form-control:focus[b-kof0e2vyih] {
        outline: none;
        border-color: #3b82f6;
        box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
    }

.form-text[b-kof0e2vyih] {
    font-size: 0.75rem;
    color: #6b7280;
    margin-top: 0.25rem;
}

/* Selected Files */
.selected-files[b-kof0e2vyih] {
    margin-top: 1rem;
    padding: 1rem;
    background-color: #f8fafc;
    border-radius: 6px;
}

    .selected-files h6[b-kof0e2vyih] {
        margin: 0 0 0.75rem 0;
        color: #374151;
        font-size: 0.875rem;
    }

.selected-file[b-kof0e2vyih] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid #e5e7eb;
}

    .selected-file:last-child[b-kof0e2vyih] {
        border-bottom: none;
    }

    .selected-file i[b-kof0e2vyih] {
        color: #3b82f6;
        width: 16px;
    }

    .selected-file .file-size[b-kof0e2vyih] {
        color: #6b7280;
        font-size: 0.75rem;
        margin-left: auto;
    }

/* Document Viewer */
.image-viewer[b-kof0e2vyih] {
    text-align: center;
}

.document-image[b-kof0e2vyih] {
    max-width: 100%;
    max-height: 600px;
    border-radius: 6px;
}

.pdf-viewer iframe[b-kof0e2vyih] {
    border: none;
    border-radius: 6px;
}

.document-preview[b-kof0e2vyih] {
    text-align: center;
    padding: 2rem;
}

.preview-icon[b-kof0e2vyih] {
    font-size: 4rem;
    color: #3b82f6;
    margin-bottom: 1rem;
}

.document-preview h6[b-kof0e2vyih] {
    color: #1e293b;
    margin-bottom: 0.5rem;
}

.document-preview p[b-kof0e2vyih] {
    color: #64748b;
    margin-bottom: 0.5rem;
}

.description[b-kof0e2vyih] {
    text-align: left;
    margin: 1rem 0;
    padding: 1rem;
    background-color: #f8fafc;
    border-radius: 6px;
}

    .description strong[b-kof0e2vyih] {
        color: #374151;
        display: block;
        margin-bottom: 0.5rem;
    }

/* Button Styles */
.btn[b-kof0e2vyih] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border: 1px solid transparent;
    border-radius: 6px;
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-primary[b-kof0e2vyih] {
    background-color: #3b82f6;
    border-color: #3b82f6;
    color: white;
}

    .btn-primary:hover:not(:disabled)[b-kof0e2vyih] {
        background-color: #2563eb;
        border-color: #2563eb;
    }

    .btn-primary:disabled[b-kof0e2vyih] {
        opacity: 0.5;
        cursor: not-allowed;
    }

.btn-outline-primary[b-kof0e2vyih] {
    border-color: #3b82f6;
    color: #3b82f6;
    background-color: transparent;
}

    .btn-outline-primary:hover[b-kof0e2vyih] {
        background-color: #3b82f6;
        color: white;
    }

.btn-outline-secondary[b-kof0e2vyih] {
    border-color: #6b7280;
    color: #6b7280;
    background-color: transparent;
}

    .btn-outline-secondary:hover[b-kof0e2vyih] {
        background-color: #6b7280;
        color: white;
    }

.btn-outline-danger[b-kof0e2vyih] {
    border-color: #ef4444;
    color: #ef4444;
    background-color: transparent;
}

    .btn-outline-danger:hover[b-kof0e2vyih] {
        background-color: #ef4444;
        color: white;
    }

.btn-sm[b-kof0e2vyih] {
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
}

/* Responsive Design */
@media (max-width: 768px) {
    .documents-grid[b-kof0e2vyih] {
        grid-template-columns: 1fr;
    }

    .modal-content[b-kof0e2vyih] {
        width: 95%;
        margin: 1rem;
    }

    .document-header[b-kof0e2vyih] {
        flex-wrap: wrap;
    }

    .document-actions[b-kof0e2vyih] {
        width: 100%;
        justify-content: flex-end;
        margin-top: 0.5rem;
    }

    .filter-buttons[b-kof0e2vyih] {
        justify-content: center;
    }

    .upload-area[b-kof0e2vyih] {
        padding: 1.5rem 1rem;
    }

    .upload-icon[b-kof0e2vyih] {
        font-size: 2rem;
    }
}

@media (max-width: 480px) {
    .modal-header[b-kof0e2vyih],
    .modal-body[b-kof0e2vyih],
    .modal-footer[b-kof0e2vyih] {
        padding: 1rem;
    }

    .documents-grid[b-kof0e2vyih] {
        gap: 0.75rem;
    }

    .document-card[b-kof0e2vyih] {
        padding: 0.75rem;
    }

    .filter-buttons[b-kof0e2vyih] {
        gap: 0.25rem;
    }

    .btn-filter[b-kof0e2vyih] {
        padding: 0.375rem 0.75rem;
        font-size: 0.75rem;
    }
}

/* Alert Styles */
.alert[b-kof0e2vyih] {
    padding: 0.75rem 1rem;
    border-radius: 6px;
    margin-top: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.alert-danger[b-kof0e2vyih] {
    background-color: #fef2f2;
    border: 1px solid #fecaca;
    color: #dc2626;
}

.alert i[b-kof0e2vyih] {
    font-size: 1rem;
}

/* Storage Quota Bar */
.storage-quota[b-kof0e2vyih] {
    margin: 0.75rem 0 1rem;
    padding: 0.6rem 0.85rem;
    border-radius: 6px;
    background-color: #f8fafc;
    border: 1px solid #e2e8f0;
    font-size: 0.8rem;
}

.storage-quota-label[b-kof0e2vyih] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.4rem;
    color: #475569;
}

.storage-quota-remaining[b-kof0e2vyih] {
    color: #64748b;
    font-size: 0.75rem;
}

.storage-quota-bar[b-kof0e2vyih] {
    width: 100%;
    height: 6px;
    background-color: #e2e8f0;
    border-radius: 3px;
    overflow: hidden;
}

.storage-quota-fill[b-kof0e2vyih] {
    height: 100%;
    background-color: #3b82f6;
    transition: width 0.3s ease;
}

.storage-quota.quota-warn[b-kof0e2vyih] {
    background-color: #fffbeb;
    border-color: #fde68a;
}

.storage-quota.quota-warn .storage-quota-fill[b-kof0e2vyih] {
    background-color: #f59e0b;
}

.storage-quota.quota-full[b-kof0e2vyih] {
    background-color: #fef2f2;
    border-color: #fecaca;
}

.storage-quota.quota-full .storage-quota-fill[b-kof0e2vyih] {
    background-color: #dc2626;
}

.upload-area.disabled[b-kof0e2vyih] {
    opacity: 0.6;
    cursor: not-allowed;
}
/* /Components/DonorGroupedMapPanel.razor.rz.scp.css */
.cbr-grouped-map-wrapper[b-ik645r83k0] {
    width: 100%;
}

.cbr-map-group-toolbar[b-ik645r83k0] {
    display: flex;
    justify-content: center;
    padding: 10px;
    gap: 0;
}

.cbr-group-toggle[b-ik645r83k0] {
    padding: 6px 20px;
    font-size: 0.78rem;
    font-weight: 500;
    color: #94a3b8;
    background: #1e293b;
    border: 1px solid #334155;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.cbr-group-toggle:first-child[b-ik645r83k0] {
    border-radius: 8px 0 0 8px;
}

.cbr-group-toggle:last-child[b-ik645r83k0] {
    border-radius: 0 8px 8px 0;
}

.cbr-group-toggle + .cbr-group-toggle[b-ik645r83k0] {
    border-left: none;
}

.cbr-group-toggle.cbr-active[b-ik645r83k0] {
    background: #1d4ed8;
    color: #fff;
    border-color: #1d4ed8;
}

.cbr-group-toggle:not(.cbr-active):hover[b-ik645r83k0] {
    background: #334155;
    color: #e2e8f0;
}

.cbr-map-loading-overlay[b-ik645r83k0] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(15, 23, 42, 0.55);
    color: #94a3b8;
    font-size: 0.85rem;
    z-index: 1000;
    pointer-events: none;
}

.cbr-privacy-note[b-ik645r83k0] {
    padding: 7px 14px;
    font-size: 0.72rem;
    color: #4ade80;
    background: rgba(15, 23, 42, 0.9);
    border: 1px solid #166534;
    border-radius: 0 0 8px 8px;
    text-align: center;
}
/* /Components/DonorMapPanel.razor.rz.scp.css */
/* ════════════════════════════════════════════════════════════════
   DonorMapPanel  —  Scoped styles (embedded map panel)
   ════════════════════════════════════════════════════════════════ */

/* ── Design tokens ─────────────────────────────────────────────── */
:root[b-n66s7y568v] {
    --dcm-navy:      #0f172a;
    --dcm-navy-mid:  #1e293b;
    --dcm-teal:      #06b6d4;
    --dcm-red:       #dc2626;
    --dcm-gold:      #f59e0b;
    --dcm-green:     #16a34a;
    --dcm-border:    #e2e8f0;
    --dcm-text:      #1e293b;
    --dcm-muted:     #64748b;
    --dcm-sidebar-w: 280px;
}

/* ── Root container ─────────────────────────────────────────────── */
.dcm-root[b-n66s7y568v] {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    font-family: 'Sora', 'DM Sans', sans-serif;
    color: var(--dcm-text);
    background: #f1f5f9;
    height: calc(100vh - 220px);
    min-height: 480px;
    border-radius: 0 0 8px 8px;
}

/* ── Stat bar ───────────────────────────────────────────────────── */
.dcm-statbar[b-n66s7y568v] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    height: 50px;
    min-height: 50px;
    background: var(--dcm-navy-mid);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    flex-shrink: 0;
    gap: 12px;
    z-index: 200;
}

.dcm-statbar-left[b-n66s7y568v] {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.dcm-statbar-title[b-n66s7y568v] {
    font-size: 13px;
    font-weight: 600;
    color: #e2e8f0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: flex;
    align-items: center;
    gap: 7px;
}

.dcm-statbar-title i[b-n66s7y568v] {
    color: var(--dcm-teal);
    font-size: 14px;
}

.dcm-toggle-btn[b-n66s7y568v] {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    background: rgba(255, 255, 255, 0.08);
    color: #e2e8f0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s;
    flex-shrink: 0;
}

.dcm-toggle-btn:hover[b-n66s7y568v] { background: rgba(255, 255, 255, 0.16); }

.dcm-statbar-pills[b-n66s7y568v] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.dcm-stat-pill[b-n66s7y568v] {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 4px 11px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

.dcm-pill-teal[b-n66s7y568v]  { background: rgba(6, 182, 212, 0.18);  color: #67e8f9; border: 1px solid rgba(6, 182, 212, 0.3); }
.dcm-pill-green[b-n66s7y568v] { background: rgba(22, 163, 74, 0.18);  color: #86efac; border: 1px solid rgba(22, 163, 74, 0.3); }
.dcm-pill-gold[b-n66s7y568v]  { background: rgba(245, 158, 11, 0.18); color: #fcd34d; border: 1px solid rgba(245, 158, 11, 0.3); }

.dcm-dot[b-n66s7y568v] {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}

/* ── Body layout ────────────────────────────────────────────────── */
.dcm-body[b-n66s7y568v] {
    display: flex;
    flex: 1;
    min-height: 0;
    position: relative;
    overflow: hidden;
}

/* ── Mobile backdrop ────────────────────────────────────────────── */
.dcm-backdrop[b-n66s7y568v] {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(2px);
    z-index: 480;
}

/* ── Sidebar ────────────────────────────────────────────────────── */
.dcm-sidebar[b-n66s7y568v] {
    width: var(--dcm-sidebar-w);
    flex-shrink: 0;
    background: #ffffff;
    border-right: 1px solid var(--dcm-border);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
    transition: width 0.25s ease;
    z-index: 300;
}

.dcm-sidebar[b-n66s7y568v]::-webkit-scrollbar            { width: 4px; }
.dcm-sidebar[b-n66s7y568v]::-webkit-scrollbar-track      { background: transparent; }
.dcm-sidebar[b-n66s7y568v]::-webkit-scrollbar-thumb      { background: #cbd5e1; border-radius: 2px; }
.dcm-sidebar[b-n66s7y568v]::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

.dcm-sidebar:not(.dcm-sidebar--open)[b-n66s7y568v] { width: 0; border-right: none; }

.dcm-sidebar-hd[b-n66s7y568v] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 13px 16px;
    border-bottom: 1px solid var(--dcm-border);
    font-family: 'DM Mono', monospace;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--dcm-muted);
    flex-shrink: 0;
}

.dcm-close-btn[b-n66s7y568v] {
    background: none;
    border: none;
    color: var(--dcm-muted);
    cursor: pointer;
    padding: 4px 6px;
    border-radius: 4px;
    display: none;
    align-items: center;
    justify-content: center;
}

.dcm-close-btn:hover[b-n66s7y568v] { background: #f1f5f9; color: var(--dcm-text); }

.dcm-section[b-n66s7y568v] {
    padding: 14px 16px;
    border-bottom: 1px solid var(--dcm-border);
    flex-shrink: 0;
}

.dcm-section-title[b-n66s7y568v] {
    font-family: 'DM Mono', monospace;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #94a3b8;
    margin-bottom: 11px;
}

.dcm-view-toggle[b-n66s7y568v] {
    display: flex;
    background: #f1f5f9;
    border-radius: 8px;
    padding: 3px;
    gap: 2px;
}

.dcm-view-btn[b-n66s7y568v] {
    flex: 1;
    padding: 6px 0;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--dcm-muted);
    font-family: 'Sora', sans-serif;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
}

.dcm-view-btn.active[b-n66s7y568v] {
    background: var(--dcm-red);
    color: #ffffff;
    box-shadow: 0 1px 4px rgba(220, 38, 38, 0.35);
}

.dcm-heat-legend[b-n66s7y568v] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: 'DM Mono', monospace;
    font-size: 10px;
    color: var(--dcm-muted);
}

.dcm-heat-grad[b-n66s7y568v] {
    flex: 1;
    height: 6px;
    border-radius: 3px;
    background: linear-gradient(to right, #fecaca, #f87171, #ef4444, #dc2626, #7f1d1d);
}

.dcm-species-legend[b-n66s7y568v] { display: flex; gap: 12px; flex-wrap: wrap; }

.dcm-lgd-item[b-n66s7y568v] {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    color: #475569;
}

.dcm-lgd-dot[b-n66s7y568v] {
    display: inline-block;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    flex-shrink: 0;
}

.dcm-filter-grp[b-n66s7y568v] { margin-bottom: 10px; }

.dcm-filter-lbl[b-n66s7y568v] {
    display: block;
    font-size: 11px;
    color: #475569;
    margin-bottom: 5px;
    font-weight: 500;
}

.dcm-select[b-n66s7y568v] {
    width: 100%;
    background: #f8fafc;
    border: 1px solid var(--dcm-border);
    border-radius: 7px;
    color: var(--dcm-text);
    font-family: 'Sora', sans-serif;
    font-size: 12px;
    padding: 7px 10px;
    appearance: none;
    cursor: pointer;
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%2364748b' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    padding-right: 28px;
}

.dcm-select:focus[b-n66s7y568v] {
    border-color: var(--dcm-teal);
    box-shadow: 0 0 0 3px rgba(6, 182, 212, 0.12);
}

.dcm-table[b-n66s7y568v] { width: 100%; border-collapse: collapse; }

.dcm-table td[b-n66s7y568v] {
    padding: 5px 2px;
    font-size: 11px;
    vertical-align: middle;
}

.dcm-table td:first-child[b-n66s7y568v] { color: #475569; }

.dcm-table td:nth-child(2)[b-n66s7y568v] {
    font-family: 'DM Mono', monospace;
    color: var(--dcm-red);
    font-weight: 600;
    text-align: right;
    padding-right: 8px;
    font-size: 11px;
}

.dcm-bar-cell[b-n66s7y568v] { width: 64px; }

.dcm-bar[b-n66s7y568v] { height: 4px; background: #f1f5f9; border-radius: 2px; overflow: hidden; }

.dcm-bar-fill[b-n66s7y568v] {
    height: 100%;
    background: var(--dcm-red);
    border-radius: 2px;
    transition: width 0.4s ease;
}

.dcm-bar-gold[b-n66s7y568v] { background: var(--dcm-gold) !important; }

/* ── Map area ───────────────────────────────────────────────────── */
.dcm-map-wrap[b-n66s7y568v] {
    flex: 1;
    position: relative;
    min-width: 0;
}

[b-n66s7y568v] #donor-map {
    width: 100%;
    height: 100%;
}

/* ── Overlay cards ──────────────────────────────────────────────── */
.dcm-overlay[b-n66s7y568v] {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 400;
    display: flex;
    flex-direction: column;
    gap: 8px;
    pointer-events: none;
}

.dcm-overlay-card[b-n66s7y568v] {
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(14px);
    border: 1px solid var(--dcm-border);
    border-radius: 12px;
    padding: 10px 14px;
    pointer-events: all;
    min-width: 110px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

.dcm-overlay-lbl[b-n66s7y568v] {
    font-family: 'DM Mono', monospace;
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--dcm-muted);
    margin-bottom: 4px;
}

.dcm-overlay-num[b-n66s7y568v] {
    font-family: 'DM Mono', monospace;
    font-size: 26px;
    font-weight: 500;
    line-height: 1;
}

.dcm-num-red[b-n66s7y568v]  { color: var(--dcm-red); }
.dcm-num-dark[b-n66s7y568v] { color: var(--dcm-navy); }

.dcm-overlay-sub[b-n66s7y568v] { font-size: 10px; color: var(--dcm-muted); margin-top: 3px; }

/* ── FAB (mobile) ───────────────────────────────────────────────── */
.dcm-fab[b-n66s7y568v] {
    position: absolute;
    bottom: 20px;
    right: 16px;
    z-index: 600;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--dcm-red);
    color: #ffffff;
    border: none;
    box-shadow: 0 4px 18px rgba(220, 38, 38, 0.45);
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    transition: transform 0.15s, box-shadow 0.15s;
}

.dcm-fab:active[b-n66s7y568v] { transform: scale(0.94); }

/* ════════════════════════════════════════════════════════════════
   RESPONSIVE
   ════════════════════════════════════════════════════════════════ */

@media (max-width: 767.98px) {

    .dcm-statbar-title[b-n66s7y568v] { font-size: 12px; }
    .dcm-pill-label[b-n66s7y568v]    { display: none; }

    .dcm-sidebar[b-n66s7y568v] {
        position: fixed;
        top: 0;
        bottom: 0;
        left: -100%;
        width: min(300px, 85vw) !important;
        border-right: 1px solid var(--dcm-border);
        box-shadow: 4px 0 24px rgba(0, 0, 0, 0.18);
        transition: left 0.28s cubic-bezier(0.4, 0, 0.2, 1);
        z-index: 490;
    }

    .dcm-sidebar.dcm-sidebar--open[b-n66s7y568v] { left: 0; }
    .dcm-backdrop.dcm-backdrop--visible[b-n66s7y568v] { display: block; }
    .dcm-close-btn[b-n66s7y568v] { display: flex; }
    .dcm-fab[b-n66s7y568v]       { display: flex; }

    .dcm-overlay-card[b-n66s7y568v] { padding: 8px 11px; min-width: 90px; }
    .dcm-overlay-num[b-n66s7y568v]  { font-size: 22px; }
    .dcm-overlay[b-n66s7y568v]      { top: 10px; right: 76px; }
}

@media (min-width: 768px) and (max-width: 1023.98px) {
    :root[b-n66s7y568v] { --dcm-sidebar-w: 245px; }
    .dcm-statbar-title[b-n66s7y568v] { font-size: 12px; }
    .dcm-pill-label[b-n66s7y568v]    { display: none; }
}

@media (min-width: 1024px) {
    .dcm-stat-pill[b-n66s7y568v] { font-size: 12px; padding: 4px 12px; }
}

@media (max-width: 399.98px) {
    .dcm-statbar[b-n66s7y568v] { padding: 0 12px; }
    .dcm-statbar-title span[b-n66s7y568v] { display: none; }
    .dcm-stat-pill[b-n66s7y568v] { padding: 3px 8px; font-size: 11px; }
}
/* /Components/DonorPetSelection.razor.rz.scp.css */
/* PetSelectionModal.razor.css */

.modal-overlay[b-3dse43r0sz] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    padding: 20px;
    animation: fadeIn-b-3dse43r0sz 0.3s ease;
}

    .modal-overlay.show[b-3dse43r0sz] {
        display: flex;
    }

@keyframes fadeIn-b-3dse43r0sz {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes slideUp-b-3dse43r0sz {
    from {
        opacity: 0;
        transform: translateY(50px);
    }

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

.modal-content[b-3dse43r0sz] {
    background: white;
    border-radius: 16px;
    width: 100%;
    max-width: 480px;
    max-height: 90vh;
    overflow: hidden;
    animation: slideUp-b-3dse43r0sz 0.3s ease;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    position: relative;
}

/* Header with Purple Gradient */
.modal-header[b-3dse43r0sz] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    padding: 30px 24px 24px;
    color: white;
    position: relative;
}

.close-btn[b-3dse43r0sz] {
    position: absolute;
    top: 20px;
    right: 20px;
    background: rgba(255, 255, 255, 0.2);
    border: none;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    font-size: 24px;
    cursor: pointer;
    color: white;
    line-height: 1;
    z-index: 10;
    transition: background 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .close-btn:hover[b-3dse43r0sz] {
        background: rgba(255, 255, 255, 0.3);
    }

.modal-icon[b-3dse43r0sz] {
    font-size: 28px;
    margin-bottom: 8px;
}

.modal-title[b-3dse43r0sz] {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 8px;
    opacity: 0.95;
}

.request-for[b-3dse43r0sz] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    margin-top: 8px;
}

.blood-type-badge[b-3dse43r0sz] {
    display: inline-block;
    background: #ef4444;
    color: white;
    padding: 4px 10px;
    border-radius: 5px;
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 0.5px;
}

/* Modal Body */
.modal-body[b-3dse43r0sz] {
    padding: 24px;
    max-height: 50vh;
    overflow-y: auto;
}

    .modal-body[b-3dse43r0sz]::-webkit-scrollbar {
        width: 6px;
    }

    .modal-body[b-3dse43r0sz]::-webkit-scrollbar-track {
        background: #f3f4f6;
    }

    .modal-body[b-3dse43r0sz]::-webkit-scrollbar-thumb {
        background: #d1d5db;
        border-radius: 3px;
    }

        .modal-body[b-3dse43r0sz]::-webkit-scrollbar-thumb:hover {
            background: #9ca3af;
        }

.section-title[b-3dse43r0sz] {
    font-size: 12px;
    font-weight: 700;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin-bottom: 16px;
}

/* Pet Cards */
.pet-card[b-3dse43r0sz] {
    border: 2px solid #e5e7eb;
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    gap: 14px;
    align-items: start;
    background: white;
}

    .pet-card:hover:not(.disabled)[b-3dse43r0sz] {
        border-color: #667eea;
        background: #f9fafb;
        transform: translateY(-1px);
    }

    .pet-card.selected[b-3dse43r0sz] {
        border-color: #667eea;
        background: #eef2ff;
        box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.15);
    }

    .pet-card.disabled[b-3dse43r0sz] {
        opacity: 0.6;
        cursor: not-allowed;
        background: #fafafa;
    }

        .pet-card.disabled:hover[b-3dse43r0sz] {
            border-color: #e5e7eb;
            background: #fafafa;
            transform: none;
        }
    /* Special styling for already offered pets */
    .pet-card.already-offered[b-3dse43r0sz] {
        background: #f0fdf4;
        border-color: #86efac;
        opacity: 0.8;
    }
        .pet-card.already-offered:hover[b-3dse43r0sz] {
            background: #f0fdf4;
            border-color: #86efac;
            transform: none;
        }

.pet-avatar[b-3dse43r0sz] {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
    overflow: hidden;
}

    .pet-avatar img[b-3dse43r0sz] {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .pet-avatar .pet-icon[b-3dse43r0sz] {
        font-size: 32px;
    }

.pet-details[b-3dse43r0sz] {
    flex: 1;
    min-width: 0;
}

.pet-name-row[b-3dse43r0sz] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
    flex-wrap: wrap;
}

.pet-name[b-3dse43r0sz] {
    font-size: 17px;
    font-weight: 700;
    color: #1f2937;
}

.match-badge[b-3dse43r0sz] {
    font-size: 9px;
    padding: 3px 8px;
    border-radius: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background: #d1fae5;
    color: #065f46;
}

    /* Badge for already offered */
    .match-badge.offered[b-3dse43r0sz] {
        background: #4ade80;
        color: white;
    }
.pet-info[b-3dse43r0sz] {
    font-size: 14px;
    color: #6b7280;
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.blood-icon[b-3dse43r0sz] {
    color: #ef4444;
    font-size: 14px;
}

.pet-status[b-3dse43r0sz] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 500;
}

    .pet-status.eligible[b-3dse43r0sz] {
        color: #10b981;
    }

    .pet-status.waiting[b-3dse43r0sz] {
        color: #f59e0b;
    }

    .pet-status.ineligible[b-3dse43r0sz] {
        color: #ef4444;
    }
    /* Status for already offered pets */
    .pet-status.offered[b-3dse43r0sz] {
        color: #16a34a;
        font-weight: 600;
    }

.radio-button[b-3dse43r0sz] {
    width: 20px;
    height: 20px;
    border: 2px solid #d1d5db;
    border-radius: 50%;
    position: relative;
    flex-shrink: 0;
    margin-top: 4px;
    transition: all 0.2s;
}

.pet-card.selected .radio-button[b-3dse43r0sz] {
    border-color: #667eea;
    border-width: 2px;
}

    .pet-card.selected .radio-button[b-3dse43r0sz]::after {
        content: '';
        position: absolute;
        top: 3px;
        left: 3px;
        right: 3px;
        bottom: 3px;
        background: #667eea;
        border-radius: 50%;
        animation: radioFill-b-3dse43r0sz 0.2s ease;
    }

@keyframes radioFill-b-3dse43r0sz {
    from {
        transform: scale(0);
    }

    to {
        transform: scale(1);
    }
}

/* No Pets State */
.no-pets[b-3dse43r0sz] {
    text-align: center;
    padding: 40px 20px;
}

.no-pets-icon[b-3dse43r0sz] {
    font-size: 48px;
    margin-bottom: 16px;
    opacity: 0.5;
}

.no-pets p[b-3dse43r0sz] {
    color: #6b7280;
    margin-bottom: 20px;
    font-size: 15px;
}
/* All Pets Offered Message */
.all-pets-offered-message[b-3dse43r0sz] {
    text-align: center;
    padding: 30px 20px;
    margin-top: 20px;
    background: #f0fdf4;
    border-radius: 12px;
    border: 2px dashed #86efac;
}
.all-pets-offered-message .message-icon[b-3dse43r0sz] {
    font-size: 40px;
    margin-bottom: 12px;
}
.all-pets-offered-message p[b-3dse43r0sz] {
    color: #166534;
    font-size: 15px;
    font-weight: 500;
    margin: 0;
}

/* Modal Footer */
.modal-footer[b-3dse43r0sz] {
    padding: 20px 24px;
    border-top: 1px solid #e5e7eb;
    display: flex;
    gap: 12px;
    background: #fafafa;
}

.btn[b-3dse43r0sz] {
    flex: 1;
    padding: 14px 24px;
    border-radius: 10px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
}

.btn-cancel[b-3dse43r0sz] {
    background: #f3f4f6;
    color: #6b7280;
    border: 1px solid #e5e7eb;
}

    .btn-cancel:hover[b-3dse43r0sz] {
        background: #e5e7eb;
    }

.btn-primary[b-3dse43r0sz] {
    background: #667eea;
    color: white;
}

    .btn-primary:hover:not(:disabled)[b-3dse43r0sz] {
        background: #5568d3;
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
    }

    .btn-primary:disabled[b-3dse43r0sz] {
        background: #d1d5db;
        cursor: not-allowed;
        transform: none;
        box-shadow: none;
    }

/* Responsive */
@media (max-width: 640px) {
    .modal-overlay[b-3dse43r0sz] {
        align-items: flex-end;
        padding: 0;
    }

    .modal-content[b-3dse43r0sz] {
        border-radius: 16px 16px 0 0;
        max-height: 85vh;
    }

    .modal-body[b-3dse43r0sz] {
        max-height: 60vh;
    }

    .pet-card[b-3dse43r0sz] {
        padding: 14px;
    }

    .pet-avatar[b-3dse43r0sz] {
        width: 50px;
        height: 50px;
        font-size: 26px;
    }

    .pet-name[b-3dse43r0sz] {
        font-size: 15px;
    }

    .pet-info[b-3dse43r0sz] {
        font-size: 13px;
    }

    .modal-footer[b-3dse43r0sz] {
        flex-direction: column-reverse;
        gap: 10px;
    }

    .btn[b-3dse43r0sz] {
        width: 100%;
    }
}
/* /Components/GooglePlacesLocationPicker.razor.rz.scp.css */
.gp-location-picker[b-te9xwwfeeo] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 8px;
}

.gp-label[b-te9xwwfeeo] {
    font-weight: 600;
    font-size: 0.9rem;
    color: #333;
}

.gp-input[b-te9xwwfeeo] {
    padding: 10px 12px;
    border: 1px solid #d0d0d0;
    border-radius: 8px;
    font-size: 1rem;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.gp-input:focus[b-te9xwwfeeo] {
    outline: none;
    border-color: #fc466b;
    box-shadow: 0 0 0 3px rgba(252, 70, 107, 0.12);
}

.gp-helper[b-te9xwwfeeo] {
    color: #666;
    font-size: 0.78rem;
}
/* /Components/NotAuthorizedContent.razor.rz.scp.css */
/* ============================================================
   NotAuthorizedContent — PetRyt 403 page
   Colors: navy #1a1a3e · gold #f0b429 · coral #e8735a · purple #6b4fa0
   Fonts: DM Serif Display (heading) · DM Sans (body) — already loaded
   ============================================================ */

.na-root[b-whox6andfe] {
    min-height: calc(100vh - 72px);
    background: #fdf8f0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2.5rem 1rem 3rem;
    position: relative;
    overflow: hidden;
    font-family: 'DM Sans', system-ui, sans-serif;
}

/* ---- Decorative ambient blobs ---- */

.na-blob[b-whox6andfe] {
    position: absolute;
    border-radius: 50%;
    filter: blur(72px);
    pointer-events: none;
    animation: na-drift-b-whox6andfe 10s ease-in-out infinite alternate;
}

.na-blob-gold[b-whox6andfe] {
    width: 520px;
    height: 520px;
    background: radial-gradient(circle, rgba(240,180,41,0.22) 0%, transparent 70%);
    top: -160px;
    left: -120px;
}

.na-blob-purple[b-whox6andfe] {
    width: 380px;
    height: 380px;
    background: radial-gradient(circle, rgba(107,79,160,0.18) 0%, transparent 70%);
    bottom: -120px;
    right: -100px;
    animation-delay: -4s;
    animation-duration: 13s;
}

.na-blob-coral[b-whox6andfe] {
    width: 240px;
    height: 240px;
    background: radial-gradient(circle, rgba(232,115,90,0.15) 0%, transparent 70%);
    top: 45%;
    right: 12%;
    animation-delay: -7s;
    animation-duration: 9s;
}

@keyframes na-drift-b-whox6andfe {
    from { transform: translate(0, 0) scale(1); }
    to   { transform: translate(16px, -20px) scale(1.06); }
}

/* ---- Card ---- */

.na-card[b-whox6andfe] {
    position: relative;
    background: rgba(255, 253, 248, 0.88);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(240, 180, 41, 0.22);
    border-radius: 28px;
    padding: 3.5rem 3rem 2.5rem;
    max-width: 480px;
    width: 100%;
    text-align: center;
    box-shadow:
        0 0 0 1px rgba(255,255,255,0.7) inset,
        0 24px 64px rgba(26, 26, 62, 0.09),
        0 6px 20px rgba(26, 26, 62, 0.06);
    overflow: hidden;
    animation: na-card-rise-b-whox6andfe 0.55s cubic-bezier(0.34, 1.45, 0.64, 1) both;
}

@keyframes na-card-rise-b-whox6andfe {
    from { opacity: 0; transform: translateY(28px) scale(0.96); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ---- Ghost "403" watermark ---- */

.na-ghost-num[b-whox6andfe] {
    position: absolute;
    top: -18px;
    left: 50%;
    transform: translateX(-50%);
    font-family: 'DM Serif Display', Georgia, serif;
    font-size: clamp(90px, 18vw, 130px);
    font-weight: 700;
    color: rgba(26, 26, 62, 0.045);
    letter-spacing: -3px;
    white-space: nowrap;
    user-select: none;
    pointer-events: none;
    line-height: 1;
    z-index: 0;
}

/* ---- Icon stack ---- */

.na-icon-wrap[b-whox6andfe] {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100px;
    height: 100px;
    margin: 0 auto 1.75rem;
    z-index: 1;
    animation: na-icon-in-b-whox6andfe 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.15s both;
}

@keyframes na-icon-in-b-whox6andfe {
    from { opacity: 0; transform: scale(0.6) rotate(-10deg); }
    to   { opacity: 1; transform: scale(1) rotate(0deg); }
}

.na-ring[b-whox6andfe] {
    position: absolute;
    border-radius: 50%;
}

.na-ring-outer[b-whox6andfe] {
    inset: -10px;
    border: 1.5px solid rgba(240, 180, 41, 0.35);
    animation: na-pulse-b-whox6andfe 3.5s ease-in-out infinite;
}

.na-ring-inner[b-whox6andfe] {
    inset: 0;
    background: linear-gradient(
        145deg,
        rgba(240, 180, 41, 0.14) 0%,
        rgba(107, 79, 160, 0.10) 100%
    );
    border: 1px solid rgba(240, 180, 41, 0.18);
}

@keyframes na-pulse-b-whox6andfe {
    0%, 100% { transform: scale(1);    opacity: 0.5; }
    50%       { transform: scale(1.09); opacity: 1;   }
}

.na-paw[b-whox6andfe] {
    position: relative;
    z-index: 1;
    font-size: 2.6rem;
    color: #1a1a3e;
    filter: drop-shadow(0 3px 6px rgba(26, 26, 62, 0.18));
}

.na-lock[b-whox6andfe] {
    position: absolute;
    bottom: -2px;
    right: -4px;
    width: 32px;
    height: 32px;
    background: linear-gradient(135deg, #e8735a 0%, #c9502e 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2.5px solid #fdf8f0;
    box-shadow: 0 3px 10px rgba(232, 115, 90, 0.45);
    z-index: 2;
    animation: na-badge-pop-b-whox6andfe 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) 0.45s both;
}

@keyframes na-badge-pop-b-whox6andfe {
    from { transform: scale(0) rotate(-45deg); opacity: 0; }
    to   { transform: scale(1) rotate(0deg);   opacity: 1; }
}

.na-lock i[b-whox6andfe] {
    font-size: 0.72rem;
    color: #fff;
}

/* ---- Eyebrow ---- */

.na-eyebrow[b-whox6andfe] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.8rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #e8735a;
    margin: 0 0 0.8rem;
    z-index: 1;
    position: relative;
    animation: na-fade-up-b-whox6andfe 0.4s ease 0.3s both;
}

.na-rule[b-whox6andfe] {
    flex: 1;
    height: 1px;
    max-width: 56px;
    background: linear-gradient(to right, transparent, rgba(232,115,90,0.5));
}

.na-rule-flip[b-whox6andfe] {
    background: linear-gradient(to left, transparent, rgba(232,115,90,0.5));
}

/* ---- Heading ---- */

.na-heading[b-whox6andfe] {
    font-family: 'DM Serif Display', Georgia, serif;
    font-size: clamp(1.85rem, 4.5vw, 2.35rem);
    font-weight: 400;
    color: #1a1a3e;
    line-height: 1.18;
    margin: 0 0 1rem;
    letter-spacing: -0.025em;
    position: relative;
    z-index: 1;
    animation: na-fade-up-b-whox6andfe 0.4s ease 0.35s both;
}

/* ---- Body ---- */

.na-body[b-whox6andfe] {
    font-size: 0.935rem;
    line-height: 1.7;
    color: #5e5475;
    margin: 0 0 2rem;
    max-width: 370px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    z-index: 1;
    animation: na-fade-up-b-whox6andfe 0.4s ease 0.4s both;
}

/* ---- Action buttons ---- */

.na-actions[b-whox6andfe] {
    display: flex;
    gap: 0.75rem;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 2rem;
    position: relative;
    z-index: 1;
    animation: na-fade-up-b-whox6andfe 0.4s ease 0.48s both;
}

.na-btn[b-whox6andfe] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.68rem 1.6rem;
    border-radius: 100px;
    font-family: 'DM Sans', system-ui, sans-serif;
    font-size: 0.88rem;
    font-weight: 600;
    text-decoration: none;
    transition:
        transform 0.18s ease,
        box-shadow 0.18s ease;
    cursor: pointer;
    border: none;
    white-space: nowrap;
}

.na-btn:active[b-whox6andfe] {
    transform: translateY(0) scale(0.97);
}

.na-btn-primary[b-whox6andfe] {
    background: linear-gradient(135deg, #1a1a3e 0%, #2e2870 100%);
    color: #fff;
    box-shadow: 0 4px 18px rgba(26, 26, 62, 0.28);
}

.na-btn-primary:hover[b-whox6andfe] {
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(26, 26, 62, 0.38);
    color: #fff;
}

.na-btn-secondary[b-whox6andfe] {
    background: #fff;
    color: #1a1a3e;
    border: 1.5px solid rgba(26, 26, 62, 0.16);
    box-shadow: 0 2px 8px rgba(26, 26, 62, 0.07);
}

.na-btn-secondary:hover[b-whox6andfe] {
    transform: translateY(-2px);
    border-color: rgba(26, 26, 62, 0.32);
    box-shadow: 0 6px 18px rgba(26, 26, 62, 0.12);
    color: #1a1a3e;
}

/* ---- Brand footer note ---- */

.na-brand-note[b-whox6andfe] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    font-size: 0.78rem;
    color: #a89ec0;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(26, 26, 62, 0.07);
    margin-bottom: 0;
    position: relative;
    z-index: 1;
    animation: na-fade-up-b-whox6andfe 0.4s ease 0.56s both;
}

.na-brand-note i[b-whox6andfe] {
    color: #e8735a;
    font-size: 0.82rem;
}

/* ---- Shared fade-up entry ---- */

@keyframes na-fade-up-b-whox6andfe {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ---- Responsive ---- */

@media (max-width: 520px) {
    .na-card[b-whox6andfe] {
        padding: 3rem 1.5rem 2rem;
        border-radius: 22px;
    }

    .na-actions[b-whox6andfe] {
        flex-direction: column;
        align-items: stretch;
    }

    .na-btn[b-whox6andfe] {
        justify-content: center;
    }
}
/* /Components/PetDetailsModal.razor.rz.scp.css */
/* Modal Overlay */
.modal-overlay[b-wpouxaal66] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: flex-end;
    z-index: 1050;
    animation: fadeIn-b-wpouxaal66 0.2s ease-out;
}

@keyframes fadeIn-b-wpouxaal66 {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* Sheet Container */
.sheet-container[b-wpouxaal66] {
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
    background: white;
    border-radius: 24px 24px 0 0;
    max-height: 90vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    animation: slideDown 0.3s ease-out;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
}

@keyframes slideUp-b-wpouxaal66 {
    from {
        transform: translateY(100%);
    }

    to {
        transform: translateY(0);
    }
}

/* Handle */
.sheet-handle[b-wpouxaal66] {
    padding: 12px;
    text-align: center;
    cursor: grab;
}

    .sheet-handle:active[b-wpouxaal66] {
        cursor: grabbing;
    }

.handle-bar[b-wpouxaal66] {
    width: 40px;
    height: 4px;
    background: #d1d5db;
    border-radius: 2px;
    margin: 0 auto;
}

/* Header */
.sheet-header[b-wpouxaal66] {
    padding: 0 24px 20px;
    border-bottom: 1px solid #f3f4f6;
}

.pet-header-row[b-wpouxaal66] {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 16px;
    position: relative;
}

.pet-avatar-small[b-wpouxaal66] {
    width: 72px;
    height: 72px;
    border-radius: 16px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    flex-shrink: 0;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.2s;
}

    .pet-avatar-small:hover[b-wpouxaal66] {
        transform: scale(1.05);
    }

    .pet-avatar-small img[b-wpouxaal66] {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.close-btn[b-wpouxaal66] {
    position: absolute;
    top: 0;
    right: 0;
    background: #f3f4f6;
    border: none;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
    color: #6b7280;
}

    .close-btn:hover[b-wpouxaal66] {
        background: #e5e7eb;
        color: #111827;
    }

.pet-title-info[b-wpouxaal66] {
    flex: 1;
}

.pet-name-header[b-wpouxaal66] {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 4px;
    color: #111827;
    margin: 0;
}

.pet-meta[b-wpouxaal66] {
    font-size: 14px;
    color: #6b7280;
    margin: 0;
}

/* Quick Stats */
.quick-stats[b-wpouxaal66] {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    padding: 2px;
    margin-bottom: 16px;
    scrollbar-width: none;
}

    .quick-stats[b-wpouxaal66]::-webkit-scrollbar {
        display: none;
    }

.stat-chip[b-wpouxaal66] {
    flex-shrink: 0;
    padding: 8px 14px;
    background: #f9fafb;
    border-radius: 12px;
    font-size: 13px;
    color: #374151;
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

    .stat-chip i[b-wpouxaal66] {
        color: #9ca3af;
        font-size: 12px;
    }

/* Tabs Navigation */
.tabs-nav[b-wpouxaal66] {
    /*display: flex;
    gap: 4px;
    overflow-x: auto;
    padding: 4px;
    scrollbar-width: none;*/
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    padding: 4px;
}

    .tabs-nav[b-wpouxaal66]::-webkit-scrollbar {
        display: none;
    }

/*.tab-btn {
    flex-shrink: 0;
    padding: 5px 8px;
    border: none;
    background: transparent;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 6px;
    color: #6b7280;
    white-space: nowrap;
}*/
.tab-btn[b-wpouxaal66] {
    padding: 8px 10px;
    border: 1px solid #8080804a;
    background: transparent;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    color: #6b7280;
    white-space: nowrap;
}

    .tab-btn:hover[b-wpouxaal66] {
        background: #f9fafb;
    }

    .tab-btn.active[b-wpouxaal66] {
        background: #eff6ff;
        border: 2px solid #2563eb;
        color: #2563eb;
        font-weight: 600;
    }

.tab-count[b-wpouxaal66] {
    background: rgba(0, 0, 0, 0.08);
    padding: 2px 7px;
    border-radius: 10px;
    font-size: 12px;
    min-width: 20px;
    text-align: center;
}

.tab-btn.active .tab-count[b-wpouxaal66] {
    background: #dbeafe;
    color: #2563eb;
}

/* Content Area */
.sheet-content[b-wpouxaal66] {
    flex: 1;
    overflow-y: auto;
    padding: 24px;
}

/* Loading State */
.loading-state[b-wpouxaal66] {
    text-align: center;
    padding: 48px 24px;
    color: #6b7280;
}

.spinner-border[b-wpouxaal66] {
    width: 3rem;
    height: 3rem;
    border: 0.25rem solid #e5e7eb;
    border-right-color: #3b82f6;
    border-radius: 50%;
    animation: spinner-rotation-b-wpouxaal66 0.75s linear infinite;
    margin-bottom: 16px;
}

@keyframes spinner-rotation-b-wpouxaal66 {
    to {
        transform: rotate(360deg);
    }
}

/* Medical Conditions Cards */
.condition-card[b-wpouxaal66] {
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    padding: 20px;
    margin-bottom: 16px;
    transition: all 0.2s;
}

    .condition-card:hover[b-wpouxaal66] {
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    }

.condition-header[b-wpouxaal66] {
    font-size: 18px;
    font-weight: 600;
    color: #111827;
    margin-bottom: 12px;
}

.condition-description[b-wpouxaal66] {
    color: #4b5563;
    line-height: 1.6;
    margin-bottom: 12px;
}

.condition-meta[b-wpouxaal66] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #9ca3af;
    margin-bottom: 12px;
}

    .condition-meta i[b-wpouxaal66] {
        font-size: 12px;
    }

.additional-details[b-wpouxaal66] {
    background: #f9fafb;
    border-radius: 12px;
    padding: 14px;
    margin-top: 12px;
}

.additional-details-label[b-wpouxaal66] {
    font-size: 13px;
    font-weight: 600;
    color: #374151;
    margin-bottom: 6px;
}

.additional-details-text[b-wpouxaal66] {
    font-size: 14px;
    color: #6b7280;
    line-height: 1.5;
}

/* Medication Cards */
.med-card[b-wpouxaal66] {
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    padding: 20px;
    margin-bottom: 16px;
    transition: all 0.2s;
}

    .med-card:hover[b-wpouxaal66] {
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    }

.med-header[b-wpouxaal66] {
    font-size: 18px;
    font-weight: 600;
    color: #111827;
    margin-bottom: 10px;
}

.med-description[b-wpouxaal66] {
    color: #6b7280;
    font-size: 14px;
    line-height: 1.5;
    margin-bottom: 14px;
}

.med-details-grid[b-wpouxaal66] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 12px;
}

.med-detail-item[b-wpouxaal66] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.med-detail-label[b-wpouxaal66] {
    font-size: 12px;
    color: #9ca3af;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.med-detail-value[b-wpouxaal66] {
    font-size: 14px;
    color: #374151;
    font-weight: 500;
}

/* Vaccination Cards */
.vacc-card[b-wpouxaal66] {
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    padding: 20px;
    margin-bottom: 16px;
    transition: all 0.2s;
}

    .vacc-card:hover[b-wpouxaal66] {
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    }

.vacc-header[b-wpouxaal66] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 10px;
}

.vacc-name[b-wpouxaal66] {
    font-size: 18px;
    font-weight: 600;
    color: #111827;
}

.vacc-description[b-wpouxaal66] {
    color: #6b7280;
    font-size: 14px;
    line-height: 1.5;
    margin-bottom: 14px;
}

.vacc-details[b-wpouxaal66] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.vacc-detail-row[b-wpouxaal66] {
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    align-items: center;
}

.vacc-detail-label[b-wpouxaal66] {
    color: #9ca3af;
}

.vacc-detail-value[b-wpouxaal66] {
    color: #374151;
    font-weight: 500;
}

.status-badge[b-wpouxaal66] {
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
    display: inline-block;
    margin-left: 8px;
}

.badge-success[b-wpouxaal66] {
    background: #dcfce7;
    color: #16a34a;
}

.badge-warning[b-wpouxaal66] {
    background: #fef3c7;
    color: #d97706;
}

.badge-danger[b-wpouxaal66] {
    background: #fee2e2;
    color: #dc2626;
}

.additional-box[b-wpouxaal66] {
    background: #f9fafb;
    border-radius: 12px;
    padding: 14px;
    margin-top: 12px;
}

.additional-label[b-wpouxaal66] {
    font-size: 13px;
    font-weight: 600;
    color: #374151;
    margin-bottom: 6px;
}

.additional-text[b-wpouxaal66] {
    font-size: 14px;
    color: #6b7280;
    line-height: 1.5;
}

/* Allergen Cards */
.allergen-card[b-wpouxaal66] {
    background: white;
    border: 1px solid #e5e7eb;
    border-left: 4px solid #ef4444;
    border-radius: 16px;
    padding: 20px;
    margin-bottom: 16px;
    transition: all 0.2s;
}

    .allergen-card:hover[b-wpouxaal66] {
        box-shadow: 0 4px 12px rgba(239, 68, 68, 0.15);
    }

.allergen-header[b-wpouxaal66] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 12px;
}

.allergen-name[b-wpouxaal66] {
    font-size: 18px;
    font-weight: 600;
    color: #111827;
}

.severity-badge[b-wpouxaal66] {
    padding: 6px 12px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
    background: #fee2e2;
    color: #dc2626;
}

.allergen-description[b-wpouxaal66] {
    color: #4b5563;
    font-size: 14px;
    line-height: 1.6;
    margin-bottom: 14px;
}

.allergen-section[b-wpouxaal66] {
    margin-bottom: 12px;
}

.section-label[b-wpouxaal66] {
    font-size: 13px;
    font-weight: 600;
    color: #6b7280;
    margin-bottom: 4px;
}

.section-value[b-wpouxaal66] {
    font-size: 14px;
    color: #374151;
    line-height: 1.5;
}

.emergency-alert[b-wpouxaal66] {
    background: #fef3c7;
    border: 1px solid #fcd34d;
    border-radius: 12px;
    padding: 14px;
    margin-top: 12px;
    display: flex;
    gap: 10px;
}

.emergency-icon[b-wpouxaal66] {
    color: #d97706;
    font-size: 16px;
    flex-shrink: 0;
}

.emergency-content[b-wpouxaal66] {
    flex: 1;
}

.emergency-title[b-wpouxaal66] {
    font-size: 13px;
    font-weight: 600;
    color: #92400e;
    margin-bottom: 4px;
}

.emergency-text[b-wpouxaal66] {
    font-size: 13px;
    color: #78350f;
    line-height: 1.5;
}

.info-box[b-wpouxaal66] {
    background: #f9fafb;
    border-radius: 12px;
    padding: 14px;
    margin-top: 12px;
}

.info-box-label[b-wpouxaal66] {
    font-size: 13px;
    font-weight: 600;
    color: #374151;
    margin-bottom: 6px;
}

.info-box-text[b-wpouxaal66] {
    font-size: 14px;
    color: #6b7280;
    line-height: 1.5;
}

/* Empty State */
.empty-state[b-wpouxaal66] {
    text-align: center;
    padding: 48px 24px;
    color: #9ca3af;
}

    .empty-state i[b-wpouxaal66] {
        font-size: 48px;
        margin-bottom: 16px;
        opacity: 0.5;
    }

    .empty-state p[b-wpouxaal66] {
        margin: 0;
    }

/* Photo Viewer Modal */
.photo-viewer-modal[b-wpouxaal66] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1060;
    padding: 20px;
}

.photo-viewer-content[b-wpouxaal66] {
    background: white;
    border-radius: 16px;
    max-width: 900px;
    width: 100%;
    max-height: 90vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.photo-viewer-header[b-wpouxaal66] {
    padding: 20px;
    border-bottom: 1px solid #e5e7eb;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.photo-info h5[b-wpouxaal66] {
    margin: 0 0 8px 0;
    font-size: 18px;
    font-weight: 600;
    color: #111827;
}

.close-button[b-wpouxaal66] {
    background: #f3f4f6;
    border: none;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    font-size: 24px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #6b7280;
    transition: all 0.2s;
}

    .close-button:hover[b-wpouxaal66] {
        background: #e5e7eb;
        color: #111827;
    }

.photo-viewer-body[b-wpouxaal66] {
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.main-photo[b-wpouxaal66] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: #f9fafb;
}

.modal-photo[b-wpouxaal66] {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 8px;
}

.photo-navigation[b-wpouxaal66] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    background: white;
    border-top: 1px solid #e5e7eb;
}

.nav-btn[b-wpouxaal66] {
    background: #f3f4f6;
    border: none;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #6b7280;
    transition: all 0.2s;
    flex-shrink: 0;
}

    .nav-btn:hover:not(:disabled)[b-wpouxaal66] {
        background: #e5e7eb;
        color: #111827;
    }

    .nav-btn:disabled[b-wpouxaal66] {
        opacity: 0.3;
        cursor: not-allowed;
    }

.photo-thumbnails[b-wpouxaal66] {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    flex: 1;
    scrollbar-width: thin;
}

.thumb-nav[b-wpouxaal66] {
    width: 60px;
    height: 60px;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    border: 2px solid transparent;
    transition: all 0.2s;
    flex-shrink: 0;
}

    .thumb-nav:hover[b-wpouxaal66] {
        border-color: #d1d5db;
    }

    .thumb-nav.active[b-wpouxaal66] {
        border-color: #3b82f6;
    }

    .thumb-nav img[b-wpouxaal66] {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.photo-viewer-footer[b-wpouxaal66] {
    padding: 20px;
    border-top: 1px solid #e5e7eb;
    background: #f9fafb;
}

.photo-description[b-wpouxaal66] {
    margin: 0 0 8px 0;
    color: #374151;
    line-height: 1.6;
}

.text-muted[b-wpouxaal66] {
    color: #6b7280;
    font-size: 13px;
}

/* Responsive Design */
@media (min-width: 640px) {
    .modal-overlay[b-wpouxaal66] {
        align-items: center;
        padding: 24px;
    }

    .sheet-container[b-wpouxaal66] {
        border-radius: 24px;
        max-height: 85vh;
    }
}

@media (max-width: 480px) {
    .sheet-header[b-wpouxaal66] {
        padding: 0 16px 16px;
    }

    .sheet-content[b-wpouxaal66] {
        padding: 16px;
    }

    .pet-name-header[b-wpouxaal66] {
        font-size: 20px;
    }

    .condition-card[b-wpouxaal66],
    .med-card[b-wpouxaal66],
    .vacc-card[b-wpouxaal66],
    .allergen-card[b-wpouxaal66] {
        padding: 16px;
    }

    .med-details-grid[b-wpouxaal66] {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .photo-viewer-modal[b-wpouxaal66] {
        padding: 0;
    }

    .photo-viewer-content[b-wpouxaal66] {
        border-radius: 0;
        max-height: 100vh;
    }

    .tabs-nav[b-wpouxaal66] {
        grid-template-columns: repeat(2, 1fr);
        gap: 4px;
    }

    .tab-btn[b-wpouxaal66] {
        font-size: 11px;
        padding: 6px 8px;
        gap: 3px;
    }

        .tab-btn i[b-wpouxaal66] {
            font-size: 10px;
        }
}
/* /Components/PhotoCropperModal.razor.rz.scp.css */
/* Intentionally empty.
   Styles live in wwwroot/css/photo-cropper-modal.css so they apply to the
   modal after it is teleported to <body>. Blazor scoped CSS was misfiring
   on the moved element. */
/* /Components/PhotoGallery.razor.rz.scp.css */
/* PhotoGallery Component Styles */
.photo-gallery-container[b-5sj0t7xb9b] {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* Upload Section (adapted from DocumentUpload) */
.upload-section[b-5sj0t7xb9b] {
    margin-bottom: 2rem;
}

.upload-header[b-5sj0t7xb9b] {
    margin-bottom: 1rem;
}

    .upload-header h4[b-5sj0t7xb9b] {
        color: #1e293b;
        font-weight: 600;
        margin-bottom: 0.5rem;
    }

.upload-description[b-5sj0t7xb9b] {
    color: #64748b;
    margin-bottom: 0;
    font-size: 0.875rem;
}

/* ── Photo Guide ── */
.photo-guide[b-5sj0t7xb9b] {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 0.875rem 1rem;
    margin-bottom: 1rem;
}

.photo-guide-intro[b-5sj0t7xb9b] {
    font-size: 0.8125rem;
    color: #475569;
    margin: 0 0 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

    .photo-guide-intro i[b-5sj0t7xb9b] {
        color: #3b82f6;
        font-size: 0.75rem;
    }

.photo-guide-chips[b-5sj0t7xb9b] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.guide-chip[b-5sj0t7xb9b] {
    display: flex;
    align-items: flex-start;
    gap: 0.4rem;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 0.5rem 0.625rem;
}

.chip-icon[b-5sj0t7xb9b] {
    font-size: 1rem;
    line-height: 1;
    flex-shrink: 0;
}

.chip-text[b-5sj0t7xb9b] {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.chip-label[b-5sj0t7xb9b] {
    font-size: 0.75rem;
    font-weight: 600;
    color: #1e293b;
    line-height: 1.2;
}

.chip-hint[b-5sj0t7xb9b] {
    font-size: 0.675rem;
    color: #94a3b8;
    line-height: 1.3;
}

.photo-guide-tips[b-5sj0t7xb9b] {
    font-size: 0.75rem;
    color: #94a3b8;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

    .photo-guide-tips i[b-5sj0t7xb9b] {
        color: #f59e0b;
        font-size: 0.7rem;
    }

@@media (max-width: 480px) {
    .photo-guide-chips[b-5sj0t7xb9b] {
        grid-template-columns: repeat(2, 1fr);
    }
}

.upload-area[b-5sj0t7xb9b] {
    border: 2px dashed #cbd5e1;
    border-radius: 8px;
    padding: 2rem;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    background-color: #f8fafc;
}

    .upload-area:hover[b-5sj0t7xb9b] {
        border-color: #3b82f6;
        background-color: #eff6ff;
    }

    .upload-area.uploading[b-5sj0t7xb9b] {
        border-color: #3b82f6;
        background-color: #eff6ff;
        cursor: default;
    }

.upload-icon[b-5sj0t7xb9b] {
    font-size: 3rem;
    color: #94a3b8;
    margin-bottom: 1rem;
}

.upload-prompt h5[b-5sj0t7xb9b] {
    color: #334155;
    margin-bottom: 0.5rem;
}

.upload-prompt p[b-5sj0t7xb9b] {
    color: #64748b;
    margin-bottom: 0.25rem;
    font-size: 0.875rem;
}

.file-limit[b-5sj0t7xb9b] {
    font-size: 0.75rem !important;
    color: #94a3b8 !important;
}

.upload-progress[b-5sj0t7xb9b] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

    .upload-progress .spinner-border[b-5sj0t7xb9b] {
        color: #3b82f6;
    }

/* Photo Gallery */
.photo-gallery[b-5sj0t7xb9b] {
    margin-top: 1rem;
}

    .photo-gallery h6[b-5sj0t7xb9b] {
        font-size: 0.875rem;
        font-weight: 600;
        color: #374151;
        margin-bottom: 0.75rem;
    }

.photo-grid[b-5sj0t7xb9b] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 1rem;
    max-height: none; /* Remove height limit for photos tab */
}

.photo-item[b-5sj0t7xb9b] {
    position: relative;
    border-radius: 0.5rem;
    overflow: hidden;
    background-color: #f8fafc;
    border: 2px solid #e2e8f0;
    transition: all 0.2s ease;
}

    .photo-item:hover[b-5sj0t7xb9b] {
        border-color: #3b82f6;
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    }

        .photo-item:hover .photo-controls[b-5sj0t7xb9b] {
            opacity: 1;
        }

    .photo-item.profile-photo[b-5sj0t7xb9b] {
        border-color: #10b981;
        background-color: #f0fdf4;
    }

.photo-thumbnail[b-5sj0t7xb9b] {
    width: 100%;
    height: 120px; /* Slightly larger for gallery view */
    position: relative;
    cursor: pointer;
    overflow: hidden;
}

    .photo-thumbnail img[b-5sj0t7xb9b] {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.2s ease;
    }

    .photo-thumbnail:hover img[b-5sj0t7xb9b] {
        transform: scale(1.05);
    }

.profile-badge[b-5sj0t7xb9b] {
    position: absolute;
    top: 0.25rem;
    right: 0.25rem;
    background-color: #10b981;
    color: white;
    border-radius: 50%;
    width: 1.5rem;
    height: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.photo-controls[b-5sj0t7xb9b] {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
    display: flex;
    justify-content: center;
    gap: 0.25rem;
    padding: 0.5rem 0.25rem;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.btn-icon[b-5sj0t7xb9b] {
    background: rgba(255, 255, 255, 0.9);
    border: none;
    border-radius: 50%;
    width: 1.75rem;
    height: 1.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 0.75rem;
    color: #374151;
}

    .btn-icon:hover[b-5sj0t7xb9b] {
        background: white;
        transform: scale(1.1);
    }

    .btn-icon.delete[b-5sj0t7xb9b] {
        color: #dc2626;
    }

        .btn-icon.delete:hover[b-5sj0t7xb9b] {
            background-color: #dc2626;
            color: white;
        }

.photo-caption[b-5sj0t7xb9b] {
    padding: 0.5rem;
    font-size: 0.75rem;
    color: #64748b;
    text-align: center;
    background-color: #f8fafc;
    border-top: 1px solid #e2e8f0;
}

/* No Photos State */
.no-photos[b-5sj0t7xb9b] {
    text-align: center;
    padding: 3rem 1rem;
    color: #64748b;
}

.empty-icon[b-5sj0t7xb9b] {
    font-size: 4rem;
    color: #cbd5e1;
    margin-bottom: 1rem;
}

.no-photos h5[b-5sj0t7xb9b] {
    color: #475569;
    margin-bottom: 0.5rem;
}

/* Photo Viewer Modal */
.photo-viewer-modal[b-5sj0t7xb9b] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    animation: fadeIn-b-5sj0t7xb9b 0.3s ease;
}

.photo-viewer-content[b-5sj0t7xb9b] {
    background-color: white;
    border-radius: 0.5rem;
    max-width: 90vw;
    max-height: 90vh;
    overflow: hidden;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
}

.photo-viewer-header[b-5sj0t7xb9b] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    border-bottom: 1px solid #e2e8f0;
    background-color: #f8fafc;
}

    .photo-viewer-header h5[b-5sj0t7xb9b] {
        margin: 0;
        font-size: 1.125rem;
        font-weight: 600;
        color: #1e293b;
    }

.photo-viewer-body[b-5sj0t7xb9b] {
    display: flex;
    align-items: center;
    justify-content: center;
    max-height: 70vh;
    overflow: hidden;
}

.modal-photo[b-5sj0t7xb9b] {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.photo-viewer-footer[b-5sj0t7xb9b] {
    padding: 1rem;
    border-top: 1px solid #e2e8f0;
    background-color: #f8fafc;
}

    .photo-viewer-footer p[b-5sj0t7xb9b] {
        margin: 0;
        color: #64748b;
        text-align: center;
    }

/* Caption Edit Modal */
.caption-edit-modal[b-5sj0t7xb9b] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    animation: fadeIn-b-5sj0t7xb9b 0.3s ease;
}

.caption-edit-content[b-5sj0t7xb9b] {
    background-color: white;
    border-radius: 0.5rem;
    width: 90%;
    max-width: 500px;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
}

.modal-header[b-5sj0t7xb9b] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid #e2e8f0;
    background-color: #f8fafc;
}

    .modal-header h5[b-5sj0t7xb9b] {
        margin: 0;
        font-size: 1.125rem;
        font-weight: 600;
        color: #1e293b;
    }

.modal-body[b-5sj0t7xb9b] {
    padding: 1.5rem;
}

.modal-footer[b-5sj0t7xb9b] {
    display: flex;
    justify-content: flex-end;
    gap: 1rem;
    padding: 1rem 1.5rem;
    border-top: 1px solid #e2e8f0;
    background-color: #f8fafc;
}

.close-button[b-5sj0t7xb9b] {
    background: none;
    border: none;
    font-size: 1.5rem;
    color: #64748b;
    cursor: pointer;
    line-height: 1;
    transition: color 0.2s ease;
}

    .close-button:hover[b-5sj0t7xb9b] {
        color: #0f172a;
    }

/* Form Styles */
.form-group[b-5sj0t7xb9b] {
    margin-bottom: 1rem;
}

    .form-group label[b-5sj0t7xb9b] {
        display: block;
        font-weight: 500;
        font-size: 0.875rem;
        margin-bottom: 0.5rem;
        color: #374151;
    }

.form-control[b-5sj0t7xb9b] {
    width: 100%;
    padding: 0.625rem;
    border: 1px solid #e2e8f0;
    border-radius: 0.25rem;
    font-size: 0.875rem;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

    .form-control:focus[b-5sj0t7xb9b] {
        outline: none;
        border-color: #93c5fd;
        box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
    }

textarea.form-control[b-5sj0t7xb9b] {
    resize: vertical;
    min-height: 80px;
}

/* Button Styles */
.btn[b-5sj0t7xb9b] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.625rem 1.25rem;
    border-radius: 0.375rem;
    font-weight: 600;
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
    text-decoration: none;
    gap: 0.5rem;
}

    .btn:disabled[b-5sj0t7xb9b] {
        opacity: 0.6;
        cursor: not-allowed;
    }

.btn-primary[b-5sj0t7xb9b] {
    background-color: #3b82f6;
    color: #ffffff;
}

    .btn-primary:hover:not(:disabled)[b-5sj0t7xb9b] {
        background-color: #2563eb;
    }

.btn-outline-secondary[b-5sj0t7xb9b] {
    background-color: #ffffff;
    color: #64748b;
    border: 1px solid #cbd5e1;
}

    .btn-outline-secondary:hover:not(:disabled)[b-5sj0t7xb9b] {
        background-color: #f1f5f9;
    }

/* Alert Styles */
.alert[b-5sj0t7xb9b] {
    padding: 0.75rem 1rem;
    border-radius: 6px;
    margin-top: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.alert-danger[b-5sj0t7xb9b] {
    background-color: #fef2f2;
    border: 1px solid #fecaca;
    color: #dc2626;
}

.alert i[b-5sj0t7xb9b] {
    font-size: 1rem;
}

/* Spinner */
.spinner-border[b-5sj0t7xb9b] {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    vertical-align: text-bottom;
    border: 0.125rem solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: spinner-border-b-5sj0t7xb9b 0.75s linear infinite;
}

@keyframes spinner-border-b-5sj0t7xb9b {
    to {
        transform: rotate(360deg);
    }
}

@keyframes fadeIn-b-5sj0t7xb9b {
    from {
        opacity: 0;
        transform: scale(0.95);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Responsive Design */
@media (max-width: 768px) {
    .photo-grid[b-5sj0t7xb9b] {
        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
        gap: 0.75rem;
    }

    .photo-thumbnail[b-5sj0t7xb9b] {
        height: 100px;
    }

    .upload-area[b-5sj0t7xb9b] {
        padding: 1.5rem 1rem;
    }

    .upload-icon[b-5sj0t7xb9b] {
        font-size: 2rem;
    }

    .photo-viewer-content[b-5sj0t7xb9b] {
        max-width: 95vw;
        max-height: 95vh;
    }

    .caption-edit-content[b-5sj0t7xb9b] {
        width: 95%;
    }
}

@media (max-width: 480px) {
    .photo-grid[b-5sj0t7xb9b] {
        grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    }

    .photo-thumbnail[b-5sj0t7xb9b] {
        height: 80px;
    }

    .btn-icon[b-5sj0t7xb9b] {
        width: 1.5rem;
        height: 1.5rem;
        font-size: 0.625rem;
    }

    .photo-controls[b-5sj0t7xb9b] {
        gap: 0.125rem;
        padding: 0.25rem;
    }
}

/* Accessibility */
.photo-thumbnail:focus[b-5sj0t7xb9b],
.btn:focus[b-5sj0t7xb9b],
.btn-icon:focus[b-5sj0t7xb9b] {
    outline: 2px solid #3b82f6;
    outline-offset: 2px;
}
/* /Components/PhotoUpload.razor.rz.scp.css */
/* Enhanced Photo Upload Component Styles */
.photo-upload-container[b-q96hx1l8ks] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.main-photo-section[b-q96hx1l8ks] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    margin-bottom:15px;
}

.pet-avatar[b-q96hx1l8ks] {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background-color: #f1f5f9;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    border: 3px solid #e2e8f0;
    overflow: hidden;
    position: relative;
    cursor: pointer;
    transition: all 0.3s ease;
}

    .pet-avatar:hover[b-q96hx1l8ks] {
        border-color: #3b82f6;
        transform: scale(1.02);
    }

        .pet-avatar:hover .photo-overlay[b-q96hx1l8ks] {
            opacity: 1;
        }

.pet-photo[b-q96hx1l8ks] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.photo-overlay[b-q96hx1l8ks] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    opacity: 0;
    transition: opacity 0.3s ease;
    color: white;
    font-size: 1.5rem;
}

.photo-actions[b-q96hx1l8ks] {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    justify-content: center;
}

.photo-error[b-q96hx1l8ks] {
    margin-top: 0.5rem;
    padding: 0.5rem;
    border-radius: 0.375rem;
    background-color: #fef2f2;
    border: 1px solid #fecaca;
    color: #dc2626;
    font-size: 0.875rem;
    text-align: center;
    max-width: 250px;
}

/* Photo Gallery */
/*.photo-gallery {
    margin-top: 1rem;
}

    .photo-gallery h6 {
        font-size: 0.875rem;
        font-weight: 600;
        color: #374151;
        margin-bottom: 0.75rem;
    }

.photo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 1rem;
    max-height: 300px;
    overflow-y: auto;
}

.photo-item {
    position: relative;
    border-radius: 0.5rem;
    overflow: hidden;
    background-color: #f8fafc;
    border: 2px solid #e2e8f0;
    transition: all 0.2s ease;
}

    .photo-item:hover {
        border-color: #3b82f6;
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    }

        .photo-item:hover .photo-controls {
            opacity: 1;
        }

    .photo-item.profile-photo {
        border-color: #10b981;
        background-color: #f0fdf4;
    }

.photo-thumbnail {
    width: 100%;
    height: 100px;
    position: relative;
    cursor: pointer;
    overflow: hidden;
}

    .photo-thumbnail img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.2s ease;
    }

    .photo-thumbnail:hover img {
        transform: scale(1.05);
    }

.profile-badge {
    position: absolute;
    top: 0.25rem;
    right: 0.25rem;
    background-color: #10b981;
    color: white;
    border-radius: 50%;
    width: 1.5rem;
    height: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.photo-controls {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
    display: flex;
    justify-content: center;
    gap: 0.25rem;
    padding: 0.5rem 0.25rem;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.btn-icon {
    background: rgba(255, 255, 255, 0.9);
    border: none;
    border-radius: 50%;
    width: 1.75rem;
    height: 1.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 0.75rem;
    color: #374151;
}

    .btn-icon:hover {
        background: white;
        transform: scale(1.1);
    }

    .btn-icon.delete {
        color: #dc2626;
    }

        .btn-icon.delete:hover {
            background-color: #dc2626;
            color: white;
        }

.photo-caption {
    padding: 0.5rem;
    font-size: 0.75rem;
    color: #64748b;
    text-align: center;
    background-color: #f8fafc;
    border-top: 1px solid #e2e8f0;
}*/

/* Photo Viewer Modal */
/*.photo-viewer-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    animation: fadeIn 0.3s ease;
}

.photo-viewer-content {
    background-color: white;
    border-radius: 0.5rem;
    max-width: 90vw;
    max-height: 90vh;
    overflow: hidden;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
}

.photo-viewer-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    border-bottom: 1px solid #e2e8f0;
    background-color: #f8fafc;
}

    .photo-viewer-header h5 {
        margin: 0;
        font-size: 1.125rem;
        font-weight: 600;
        color: #1e293b;
    }

.photo-viewer-body {
    display: flex;
    align-items: center;
    justify-content: center;
    max-height: 70vh;
    overflow: hidden;
}

.modal-photo {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.photo-viewer-footer {
    padding: 1rem;
    border-top: 1px solid #e2e8f0;
    background-color: #f8fafc;
}

    .photo-viewer-footer p {
        margin: 0;
        color: #64748b;
        text-align: center;
    }*/

/* Caption Edit Modal */
/*.caption-edit-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    animation: fadeIn 0.3s ease;
}

.caption-edit-content {
    background-color: white;
    border-radius: 0.5rem;
    width: 90%;
    max-width: 500px;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
}*/

.modal-header[b-q96hx1l8ks] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid #e2e8f0;
    background-color: #f8fafc;
}

    .modal-header h5[b-q96hx1l8ks] {
        margin: 0;
        font-size: 1.125rem;
        font-weight: 600;
        color: #1e293b;
    }

.modal-body[b-q96hx1l8ks] {
    padding: 1.5rem;
}

.modal-footer[b-q96hx1l8ks] {
    display: flex;
    justify-content: flex-end;
    gap: 1rem;
    padding: 1rem 1.5rem;
    border-top: 1px solid #e2e8f0;
    background-color: #f8fafc;
}

.close-button[b-q96hx1l8ks] {
    background: none;
    border: none;
    font-size: 1.5rem;
    color: #64748b;
    cursor: pointer;
    line-height: 1;
    transition: color 0.2s ease;
}

    .close-button:hover[b-q96hx1l8ks] {
        color: #0f172a;
    }

/* Form Styles */
.form-group[b-q96hx1l8ks] {
    /*margin-bottom: 1rem;*/
}

    .form-group label[b-q96hx1l8ks] {
        display: block;
        font-weight: 500;
        font-size: 0.875rem;
        margin-bottom: 0.5rem;
        color: #374151;
    }

.form-control[b-q96hx1l8ks] {
    width: 100%;
    padding: 0.625rem;
    border: 1px solid #e2e8f0;
    border-radius: 0.25rem;
    font-size: 0.875rem;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

    .form-control:focus[b-q96hx1l8ks] {
        outline: none;
        border-color: #93c5fd;
        box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
    }

textarea.form-control[b-q96hx1l8ks] {
    resize: vertical;
    min-height: 80px;
}

/* Button Styles */
.btn[b-q96hx1l8ks] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.625rem 1.25rem;
    border-radius: 0.375rem;
    font-weight: 600;
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
    text-decoration: none;
    gap: 0.5rem;
}

    .btn:disabled[b-q96hx1l8ks] {
        opacity: 0.6;
        cursor: not-allowed;
    }

.btn-small[b-q96hx1l8ks] {
    padding: 0.375rem 0.75rem;
    font-size: 0.75rem;
}

.btn-primary[b-q96hx1l8ks] {
    background-color: #3b82f6;
    color: #ffffff;
}

    .btn-primary:hover:not(:disabled)[b-q96hx1l8ks] {
        background-color: #2563eb;
    }

.btn-outline-primary[b-q96hx1l8ks] {
    background-color: #eff6ff;
    color: #3b82f6;
    border: 1px solid #bfdbfe;
}

    .btn-outline-primary:hover:not(:disabled)[b-q96hx1l8ks] {
        background-color: #dbeafe;
        border-color: #93c5fd;
    }

.btn-outline-secondary[b-q96hx1l8ks] {
    background-color: #ffffff;
    color: #64748b;
    border: 1px solid #cbd5e1;
}

    .btn-outline-secondary:hover:not(:disabled)[b-q96hx1l8ks] {
        background-color: #f1f5f9;
    }

/* Spinner */
.spinner-border[b-q96hx1l8ks] {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    vertical-align: text-bottom;
    border: 0.125rem solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: spinner-border-b-q96hx1l8ks 0.75s linear infinite;
}

.spinner-border-sm[b-q96hx1l8ks] {
    width: 0.875rem;
    height: 0.875rem;
    border-width: 0.125rem;
}

@keyframes spinner-border-b-q96hx1l8ks {
    to {
        transform: rotate(360deg);
    }
}

@keyframes fadeIn-b-q96hx1l8ks {
    from {
        opacity: 0;
        transform: scale(0.95);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Responsive Design */
@media (max-width: 768px) {
    .photo-grid[b-q96hx1l8ks] {
        grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
        gap: 0.75rem;
    }

    .photo-thumbnail[b-q96hx1l8ks] {
        height: 80px;
    }

    .pet-avatar[b-q96hx1l8ks] {
        width: 100px;
        height: 100px;
        font-size: 2rem;
    }

    .photo-actions[b-q96hx1l8ks] {
        flex-direction: column;
        width: 100%;
        max-width: 200px;
    }

        .photo-actions .btn[b-q96hx1l8ks] {
            justify-content: center;
            width: 100%;
        }

    .photo-viewer-content[b-q96hx1l8ks] {
        max-width: 95vw;
        max-height: 95vh;
    }

    .caption-edit-content[b-q96hx1l8ks] {
        width: 95%;
    }
}

@media (max-width: 480px) {
    .pet-avatar[b-q96hx1l8ks] {
        width: 80px;
        height: 80px;
        font-size: 1.5rem;
    }

    .photo-grid[b-q96hx1l8ks] {
        grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
    }

    .photo-thumbnail[b-q96hx1l8ks] {
        height: 60px;
    }

    .btn-icon[b-q96hx1l8ks] {
        width: 1.5rem;
        height: 1.5rem;
        font-size: 0.625rem;
    }

    .photo-controls[b-q96hx1l8ks] {
        gap: 0.125rem;
        padding: 0.25rem;
    }
}

/* Accessibility */
.pet-avatar:focus[b-q96hx1l8ks],
.photo-thumbnail:focus[b-q96hx1l8ks],
.btn:focus[b-q96hx1l8ks],
.btn-icon:focus[b-q96hx1l8ks] {
    outline: 2px solid #3b82f6;
    outline-offset: 2px;
}

/* Upload Progress Animation */
.pet-avatar.uploading[b-q96hx1l8ks] {
    position: relative;
}

    .pet-avatar.uploading[b-q96hx1l8ks]::after {
        content: '';
        position: absolute;
        top: -3px;
        left: -3px;
        right: -3px;
        bottom: -3px;
        border: 3px solid transparent;
        border-top-color: #3b82f6;
        border-radius: 50%;
        animation: photoUploadSpin-b-q96hx1l8ks 1s linear infinite;
    }

@keyframes photoUploadSpin-b-q96hx1l8ks {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/* Enhanced Visual States */
.photo-item.uploading[b-q96hx1l8ks] {
    opacity: 0.7;
    pointer-events: none;
}

.photo-item.error[b-q96hx1l8ks] {
    border-color: #dc2626;
    background-color: #fef2f2;
}

/* Drag and Drop Styles (for future enhancement) */
.photo-upload-container.drag-over[b-q96hx1l8ks] {
    background-color: #eff6ff;
    border: 2px dashed #3b82f6;
    border-radius: 0.5rem;
    padding: 1rem;
}

/* Custom Scrollbar */
.photo-grid[b-q96hx1l8ks]::-webkit-scrollbar {
    width: 6px;
}

.photo-grid[b-q96hx1l8ks]::-webkit-scrollbar-track {
    background: #f1f5f9;
    border-radius: 3px;
}

.photo-grid[b-q96hx1l8ks]::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 3px;
}

    .photo-grid[b-q96hx1l8ks]::-webkit-scrollbar-thumb:hover {
        background: #94a3b8;
    }
/* /Components/VaccineGuide.razor.rz.scp.css */
/* ── wrapper ──────────────────────────────────────────── */
.vg-wrap[b-574in1jy00] {
    margin-bottom: 16px;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid #E8D9B8;
    font-family: 'DM Sans', sans-serif;
}

/* ── toggle strip ─────────────────────────────────────── */
.vg-toggle[b-574in1jy00] {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 11px 14px;
    background: #FDF6E8;
    border: none;
    cursor: pointer;
    text-align: left;
    gap: 8px;
    border-left: 3px solid #D4A017;
}

.vg-toggle:hover[b-574in1jy00] {
    background: #FAF0D5;
}

.vg-toggle-left[b-574in1jy00] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.vg-icon[b-574in1jy00] {
    font-size: 15px;
    line-height: 1;
}

.vg-title[b-574in1jy00] {
    font-size: 13px;
    font-weight: 600;
    color: #5A3E10;
    letter-spacing: 0.01em;
}

.vg-subtitle[b-574in1jy00] {
    font-size: 11px;
    color: #9A7A3A;
    font-weight: 400;
}

.vg-chevron[b-574in1jy00] {
    font-size: 18px;
    color: #D4A017;
    transition: transform 0.2s ease;
    line-height: 1;
    display: inline-block;
    flex-shrink: 0;
}

.vg-chevron--open[b-574in1jy00] {
    transform: rotate(180deg);
}

/* ── species toggle ───────────────────────────────────── */
.vg-species-toggle[b-574in1jy00] {
    display: flex;
    gap: 0;
    background: #EDE0C4;
    border-radius: 8px;
    padding: 3px;
    margin-bottom: 16px;
}

.vg-species-btn[b-574in1jy00] {
    flex: 1;
    padding: 7px 12px;
    border: none;
    border-radius: 6px;
    background: transparent;
    font-family: 'DM Sans', sans-serif;
    font-size: 13px;
    font-weight: 500;
    color: #7A6030;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.vg-species-btn--active[b-574in1jy00] {
    background: #D4A017;
    color: #fff;
    font-weight: 600;
}

.vg-species-btn:not(.vg-species-btn--active):hover[b-574in1jy00] {
    background: #E0CC90;
    color: #5A3E10;
}

/* ── body ─────────────────────────────────────────────── */
.vg-body[b-574in1jy00] {
    background: #FFFDF7;
    padding: 16px 14px;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.vg-divider[b-574in1jy00] {
    height: 1px;
    background: #EDE0C4;
    margin: 14px 0;
}

/* ── section label ────────────────────────────────────── */
.vg-section-label[b-574in1jy00] {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #B8901A;
    margin: 0 0 10px 0;
}

/* ── pill decoder ─────────────────────────────────────── */
.vg-pills[b-574in1jy00] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 10px;
}

.vg-pill[b-574in1jy00] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    background: #FFF8E8;
    border: 1px solid #E8D08A;
    border-radius: 8px;
    padding: 8px 10px;
    min-width: 58px;
}

.vg-letter[b-574in1jy00] {
    font-family: 'DM Serif Display', serif;
    font-size: 18px;
    font-weight: 700;
    color: #C4880A;
    line-height: 1;
}

.vg-disease[b-574in1jy00] {
    font-size: 10px;
    font-weight: 600;
    color: #4A3800;
    text-align: center;
    line-height: 1.2;
}

.vg-code[b-574in1jy00] {
    font-size: 9px;
    color: #9A7A30;
    text-align: center;
    font-style: italic;
}

/* ── note ─────────────────────────────────────────────── */
.vg-note[b-574in1jy00] {
    font-size: 11px;
    color: #7A6030;
    margin: 0;
    line-height: 1.5;
}

.vg-note--tip[b-574in1jy00] {
    background: #FFF3CC;
    border-left: 3px solid #D4A017;
    padding: 8px 10px;
    border-radius: 0 6px 6px 0;
    margin-top: 12px;
}

/* ── main vaccines ────────────────────────────────────── */
.vg-vaccines[b-574in1jy00] {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.vg-vaccine[b-574in1jy00] {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 6px 0;
    border-bottom: 1px dashed #EDE0C4;
}

.vg-vaccine:last-child[b-574in1jy00] {
    border-bottom: none;
}

.vg-vname[b-574in1jy00] {
    font-family: 'DM Serif Display', serif;
    font-size: 13px;
    color: #3A2800;
    white-space: nowrap;
    min-width: 80px;
}

.vg-vdetail[b-574in1jy00] {
    font-size: 11px;
    color: #7A6030;
    line-height: 1.4;
}

/* ── schedule grid ────────────────────────────────────── */
.vg-schedule-grid[b-574in1jy00] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

@media (max-width: 480px) {
    .vg-schedule-grid[b-574in1jy00] {
        grid-template-columns: 1fr;
    }
}

.vg-schedule-col[b-574in1jy00] {
    background: #FDF6E8;
    border-radius: 8px;
    padding: 10px;
    border: 1px solid #E8D8A0;
}

.vg-sched-head[b-574in1jy00] {
    font-size: 11px;
    font-weight: 700;
    color: #5A3E10;
    margin: 0 0 8px 0;
}

.vg-sched-row[b-574in1jy00] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 7px;
}

.vg-sched-row:last-child[b-574in1jy00] {
    margin-bottom: 0;
}

.vg-dose-badge[b-574in1jy00] {
    background: #D4A017;
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 4px;
    white-space: nowrap;
    flex-shrink: 0;
    margin-top: 2px;
    letter-spacing: 0.02em;
}

.vg-dose-badge--annual[b-574in1jy00] {
    background: #4A7C59;
}

.vg-sched-row--annual .vg-sched-detail strong[b-574in1jy00] {
    color: #2E5C3A;
}

.vg-sched-detail[b-574in1jy00] {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.vg-sched-detail strong[b-574in1jy00] {
    font-size: 11px;
    font-weight: 600;
    color: #3A2800;
    line-height: 1.3;
}

.vg-sched-detail em[b-574in1jy00] {
    font-size: 10px;
    color: #9A7A3A;
    font-style: normal;
    line-height: 1.3;
}
/* /Layout/BottomTabBar.razor.rz.scp.css */
.bottom-tab-bar[b-z7jt8a3cqj] {
    display: none; /* Hidden on desktop by default */
}

@media (max-width: 768px) {
    .bottom-tab-bar[b-z7jt8a3cqj] {
        display: flex;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        height: 62px;
        padding-bottom: env(safe-area-inset-bottom, 0px);
        background: white;
        border-top: 1px solid #e2e8f0;
        box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.08);
        z-index: 1001;
    }
}

.tab-item[b-z7jt8a3cqj] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    cursor: pointer;
    color: #64748b;
    transition: color 0.2s ease, background-color 0.2s ease;
    padding: 6px 0;
    -webkit-tap-highlight-color: transparent;
}

    .tab-item:hover:not(.disabled)[b-z7jt8a3cqj] {
        background-color: #f1f5f9;
        color: #1e40af;
    }

    .tab-item.active[b-z7jt8a3cqj] {
        color: #1e40af;
    }

    .tab-item.disabled[b-z7jt8a3cqj] {
        color: #577bae;
        opacity: 0.6;
        pointer-events: none;
        cursor: not-allowed;
    }

.tab-icon-wrapper[b-z7jt8a3cqj] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tab-icon[b-z7jt8a3cqj] {
    font-size: 20px;
    line-height: 1;
}

.tab-label[b-z7jt8a3cqj] {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.3px;
    line-height: 1;
}

.coming-soon-badge[b-z7jt8a3cqj] {
    position: absolute;
    top: -8px;
    right: -20px;
    background: red;
    color: white;
    font-size: 8.5px;
    font-weight: 700;
    letter-spacing: 0.45px;
    padding: 1.5px 3px;
    border-radius: 99px;
    line-height: 1.4;
    white-space: nowrap;
}
/* /Layout/LandingLayout.razor.rz.scp.css */
.nav-wrapper[b-ugatjpprws] {
    position: sticky;
    top: 0;
    z-index: 1000;
}

.top-row[b-ugatjpprws] {
    /*background: linear-gradient(135deg, #1e293b70 0%, #3341557d 100%);*/
    backdrop-filter: blur(20px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap;
    /*height: 5rem;*/
    padding: 0;
}

.mobile-nav-controls[b-ugatjpprws] {
    display: none;
}

.hamburger-btn[b-ugatjpprws] {
    background: none;
    border: none;
    cursor: pointer;
    color: #d05a23cf;
    font-size: 1.3rem;
    padding: 6px 8px;
    line-height: 1;
}

.page[b-ugatjpprws] {
    /*background: linear-gradient( 135deg, #34425F, 0%, #2E4878 25%, #5D5972 50%, #8B6B76 75%, #627CBD 100%);*/
    /*background: linear-gradient(135deg, #3a3525 0%, #2e3c59 20%, #34425F 40%, #2E4878 60%, #7186B1 80%, #FFFFFF 100%);*/
    /*background: linear-gradient(135deg, #69665c 0%, #3e4149 20%, #505a6e 40%, #546586 60%, #a9b2c6 80%, #3a3525 100%);*/
    /*background: radial-gradient(120% 60% at 10% 0%, #fff5e8 0%, transparent 55%), radial-gradient(80% 60% at 100% 0%, #e7f6f3 0%, transparent 55%), linear-gradient(180deg, #fffaf3 0%, #fcf3e6 100%);*/
    background: radial-gradient(120% 60% at 10% 0%, #fff5e8 0%, transparent 55%), radial-gradient(80% 60% at 100% 0%, #e7f6f3 0%, transparent 55%), linear-gradient(180deg, #fffaf3 0%, #fcf3e6 100%);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

    .page.landing-v2-page[b-ugatjpprws] {
        background: radial-gradient(120% 60% at 10% 0%, #fff5e8 0%, transparent 55%), radial-gradient(80% 60% at 100% 0%, #e7f6f3 0%, transparent 55%), linear-gradient(180deg, #fffaf3 0%, #fcf3e6 100%);
    }

main[b-ugatjpprws] {
    flex: 1;
    display: flex;
    flex-direction: column;
}

article[b-ugatjpprws] {
    flex: 1;
    margin: 20px;
}

/*main {
    flex: 1;
}*/
.nav-link[b-ugatjpprws] {
    color: orange !important;
}

.btn-none[b-ugatjpprws] {
    text-decoration: none; /* remove underline */
    color: #d05a23cf; /* keep your color */
    font-weight: 500; /* normal weight */
    display: inline-block; /* required for transform */
    transition: all 0.2s ease; /* smooth hover effect */
}

    .btn-none:hover[b-ugatjpprws] {
        text-decoration: none; /* ensure no underline on hover */
        color: #d05a23cf; /* same color */
        font-weight: 500; /* slightly bolder */
        transform: scale(1.15); /* slightly bigger */
    }

.btn-primary[b-ugatjpprws] {
    background-color: #d05a23;
    border-color: #d05a23;
}

.btn-outline-primary[b-ugatjpprws] {
    border-color: #d05a23;
    color: #d05a23;
}

@media (max-width: 640px) {
    .desktop-nav[b-ugatjpprws] {
        display: none !important;
    }

    .mobile-nav-controls[b-ugatjpprws] {
        display: flex;
        align-items: center;
        gap: 4px;
    }

    .mobile-nav-dropdown[b-ugatjpprws] {
        display: flex;
        flex-direction: column;
        background: rgba(255, 250, 243, 0.97);
        backdrop-filter: blur(20px);
        border-top: 1px solid rgba(208, 90, 35, 0.15);
        padding: 4px 0;
    }

    .mobile-nav-link[b-ugatjpprws] {
        display: block;
        padding: 14px 20px;
        color: #d05a23cf;
        font-weight: 500;
        text-decoration: none;
        border-bottom: 1px solid rgba(208, 90, 35, 0.08);
        transition: background 0.15s ease;
    }

        .mobile-nav-link:last-child[b-ugatjpprws] {
            border-bottom: none;
        }

        .mobile-nav-link:hover[b-ugatjpprws] {
            background: rgba(208, 90, 35, 0.06);
            text-decoration: none;
            color: #d05a23cf;
        }
}

/* ========== LAYOUT FOOTER ========== */
.layout-footer[b-ugatjpprws] {
    padding: 28px 20px 24px;
    text-align: center;
    background: #111827;
    margin-top: 40px;
}

.layout-footer-links[b-ugatjpprws] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px 18px;
    margin-bottom: 12px;
}

    .layout-footer-links a[b-ugatjpprws] {
        color: #f79a6f;
        font-size: 0.82rem;
        text-decoration: none;
        transition: color 0.2s;
        white-space: nowrap;
    }

    .layout-footer-links a:hover[b-ugatjpprws] {
        color: #fff;
        text-decoration: underline;
    }

.layout-footer-copy[b-ugatjpprws] {
    color: #6b7280;
    font-size: 0.77rem;
    margin: 0;
}

@media (max-width: 480px) {
    article[b-ugatjpprws] {
        margin: 0px;
    }
    .layout-footer-links[b-ugatjpprws] {
        gap: 8px 12px;
    }

    .layout-footer-links a[b-ugatjpprws] {
        font-size: 0.78rem;
    }
}
/* /Layout/MainLayout.razor.rz.scp.css */
.sf-top-banner[b-fvv0zfl1d6] {
    position: sticky;
    top: 4rem;
    z-index: 999;
    width: 100%;
    background: linear-gradient(90deg, #2f9061, #b09d4b, #75ffbf);
    background-size: 200% 100%;
    color: wheat;
    font-size: 0.8rem;
    font-weight: 600;
    padding: 7px 16px;
    letter-spacing: 0.03em;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: nowrap;
    animation: sf-banner-slide-b-fvv0zfl1d6 4s ease-in-out infinite;
}

.sf-banner-text[b-fvv0zfl1d6] {
    flex: 1;
    min-width: 0;
}

.sf-top-dot[b-fvv0zfl1d6] {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #e74c3c;
    flex-shrink: 0;
    animation: sf-dot-blink-b-fvv0zfl1d6 2s ease-in-out infinite;
}

@keyframes sf-banner-slide-b-fvv0zfl1d6 {
    0%, 100% { background-position: 0% 50%; }
    50%       { background-position: 100% 50%; }
}

.sf-banner-close[b-fvv0zfl1d6] {
    background: none;
    border: none;
    color: #8b2c2c;
    font-size: 14px;
    cursor: pointer;
    margin-left: auto;
    padding: 0 4px;
    line-height: 1;
    opacity: 0.7;
}

    .sf-banner-close:hover[b-fvv0zfl1d6] {
        opacity: 1;
    }

.sf-banner-link[b-fvv0zfl1d6] {
    color: #8b2c2c;
    font-weight: bolder;
    text-decoration: underline;
    margin-left: 8px;
    white-space: nowrap;
}

    .sf-banner-link:hover[b-fvv0zfl1d6] {
        color: #c0392b;
    }

@keyframes sf-dot-blink-b-fvv0zfl1d6 {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%       { opacity: 0.35; transform: scale(0.65); }
}

.page[b-fvv0zfl1d6] {
    position: relative;
    display: flex;
    flex-direction: column;
    height:100%;
    /*background: linear-gradient( 135deg, #34425F, 0%, #2E4878 25%, #5D5972 50%, #8B6B76 75%, #627CBD 100%);*/
}

main[b-fvv0zfl1d6] {
    flex: 1;
    /*background-color: #f5f5f5;*/
    /*background-image: url(../img/pastal_bg.png)*/
    /*background-image: url(../img/background.png)*/
    background: radial-gradient(120% 60% at 10% 0%, #fff5e8 0%, transparent 55%), radial-gradient(80% 60% at 100% 0%, #e7f6f3 0%, transparent 55%), linear-gradient(180deg, #fffaf3 0%, #f7e9d3 100%);
}

/* Top Navigation Bar */
.top-row[b-fvv0zfl1d6] {
    /*background-color:#ffa750;*/
    /*background: linear-gradient( 135deg, #34425F, 0%, #2E4878 25%, #5D5972 50%, #8B6B76 75%, #627CBD 100%);*/
    /*background: rgba(255, 255, 255, 0.15);*/
    background: radial-gradient(120% 60% at 10% 0%, #fff5e8 0%, transparent 55%), radial-gradient(80% 60% at 100% 0%, #e7f6f3 0%, transparent 55%), linear-gradient(180deg, #fffaf3 0%, #f7e9d3 100%);
    /*background: radial-gradient(120% 60% at 10% 0%, #ffffff00 0%, transparent 55%), radial-gradient(80% 60% at 100% 0%, #e7f6f3 0%, transparent 55% 55% ), linear-gradient(90deg, #c18f44 0%, #f7e9d3 100%);*/
    backdrop-filter: blur(10px);
    justify-content: space-between;
    height: 4rem;
    display: flex;
    align-items: center;
    padding: 0 1rem;
    color: black;
    position: sticky;
    top: 0;
    z-index: 1000;
    color: whitesmoke;
    border-bottom: 2px solid #fed7aa;
}

.container-fluid[b-fvv0zfl1d6] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

/* Logo on left */
.navbar-brand[b-fvv0zfl1d6] {
    padding: 0;
    margin-right: 0;
    flex: 0 0 auto;
    color: #495057;
    text-decoration: none;
    font-size: 1.25rem;
    font-weight: 600;
    display: flex;
    align-items: center;
}

    .navbar-brand:hover[b-fvv0zfl1d6] {
        color: #495057;
        text-decoration: none;
    }

/* Navigation Links */
.nav-links[b-fvv0zfl1d6] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1 1 auto;
    margin: 0 auto;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    color: #9a3412;
}

.nav-item[b-fvv0zfl1d6] {
    padding: 5px;
    cursor: pointer;
    font-weight: 500;
    font-size: 0.75rem;
    transition: all 0.2s ease;
    border-radius: 9999px;
    margin: 0 0.25rem;
}

    .nav-item:hover[b-fvv0zfl1d6] {
        color: #9a3412;
        background-color: rgba(255, 255, 255, 0.2);
        border: none;
        font-weight: 700; /* Remove the border */
        /* background-color: #93adc7;
        border: 2px solid #0f172a;*/
    }

    .nav-item.active[b-fvv0zfl1d6] {
        color: #0f172a;
        background-color: #deede6;
        font-weight: bold;
    }
/* Dropdown Navigation Styles */
.nav-dropdown[b-fvv0zfl1d6] {
    position: relative;
    display: inline-block;
}
    /* Prevent double hover effect on dropdown items */
    .nav-dropdown .nav-item:hover[b-fvv0zfl1d6] {
        border: none;
        color: #9a3412;
    }

.dropdown-content[b-fvv0zfl1d6] {
    /*   display: none;
    position: absolute;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    min-width: 200px;
    border-radius: 12px;
    z-index: 1001;
    top: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    padding: 12px 0;
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;*/
    display: none;
    position: absolute;
    /*background: rgba(255, 255, 255, 0.8);*/
    /*background-color: #786374;*/
    background: linear-gradient(135deg, #1e293b70 0%, #3341557d 100%);
    backdrop-filter: blur(10px);
    min-width: min(max-content, 90vw);
    width: max-content;
    max-width: 90vw;
    border-radius: 12px;
    z-index: 1001;
    top: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    padding: 12px 0;
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}
    /* Create an invisible bridge between nav item and dropdown */
    .dropdown-content[b-fvv0zfl1d6]::before {
        content: '';
        position: absolute;
        top: -8px;
        left: 0;
        right: 0;
        height: 8px;
        background: transparent;
    }
    /*.nav-dropdown:hover .dropdown-content,
    .dropdown-content:hover {*/
.nav-dropdown:hover .dropdown-content[b-fvv0zfl1d6] {
    display: block;
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(-2px);
    background-color: #786374;
}

.dropdown-content a[b-fvv0zfl1d6] {
    /*color: #374151;
    padding: 12px 20px;
    text-decoration: none;
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    transition: all 0.2s ease;
    border-radius: 8px;
    margin: 0 8px;*/
    color: #e2e8f0;
    padding: 12px 20px;
    text-decoration: none;
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    transition: all 0.2s ease;
    border-radius: 8px;
    margin: 0 8px;
    white-space: nowrap;
}

    .dropdown-content a:hover[b-fvv0zfl1d6] {
        /*background: linear-gradient(135deg, #f8fafc, #e2e8f0);
        color: #1f2937;
        transform: translateX(4px);*/
        background: rgba(255, 255, 255, 0.2);
        color: #ffffff;
        transform: translateX(4px);
    }

/* Improve nav item styling for dropdowns */
.nav-dropdown .nav-item[b-fvv0zfl1d6] {
    display: flex;
    align-items: center;
    cursor: pointer;
}

    .nav-dropdown .nav-item[b-fvv0zfl1d6]::after {
        content: '▼';
        font-size: 0.65rem;
        margin-left: 8px;
        opacity: 0.7;
        transition: all 0.2s ease;
    }

.nav-dropdown:hover .nav-item[b-fvv0zfl1d6]::after {
    transform: rotate(180deg);
    opacity: 1;
}

.nav-dropdown:hover .nav-item[b-fvv0zfl1d6] {
    color: #0f172a;
    background-color: rgba(255, 255, 255, 0.2);
}
.desktop-only[b-fvv0zfl1d6] {
    display: flex;
}
/* User Menu */
.user-menu[b-fvv0zfl1d6] {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    margin-left: auto;
}

    .user-menu .nav-item[b-fvv0zfl1d6] {
        position: relative;
        margin-left: 1rem;
        padding: 0;
        border: #3b82f6;
    }

.nav-link[b-fvv0zfl1d6] {
    color: #ea580c;
    font-size: 1.25rem;
    padding: 0.5rem;
    display: flex;
    align-items: center;
    position: relative;
}

    .nav-link:hover[b-fvv0zfl1d6] {
        color: #3b82f6;
    }

/* User Avatar */
.user-img[b-fvv0zfl1d6] {
    position: relative;
    display: inline-block;
}

    .user-img img[b-fvv0zfl1d6] {
        width: 32px;
        height: 32px;
        border-radius: 50%;
        border: 2px solid #ea580c;
    }

.status[b-fvv0zfl1d6] {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 10px;
    height: 10px;
    border: 2px solid #ffffff;
    border-radius: 50%;
}

    .status.online[b-fvv0zfl1d6] {
        background-color: #16a34a;
    }
/* Facebook-Style Notification Panel */
.notifications[b-fvv0zfl1d6] {
    position: absolute;
    top: 100%;
    right: 0;
    width: min(360px, 92vw);
    /*background-color: #1c2733;
    color: #e4e6eb;*/
    color: black;
    border-radius: 8px;
    box-shadow: 0 12px 28px 0 rgba(0, 0, 0, 0.2);
    z-index: 1000;
    max-height: 80vh;
    overflow-y: hidden;
    display: none;
}

.notifications.show[b-fvv0zfl1d6] {
    display: block;
}

.notifications-header[b-fvv0zfl1d6] {
    padding: 12px 16px;
    border-bottom: 1px solid #3e4042;
}

    .notifications-header h3[b-fvv0zfl1d6] {
        font-size: 14px;
        font-weight: 700;
        margin: 0 0 12px 0;
    }

/*.nav-item {
    padding: 0.5rem 1rem;
    color: #64748b;
    cursor: pointer;
    font-weight: 500;
    font-size: 0.875rem;
    transition: all 0.2s ease;
    border-radius: 9999px;
}

    .nav-item:hover {
        color: #0f172a;
        background-color: #f1f5f9;
    }

    .nav-item.active {
        color: #3b82f6;
        background-color: #eff6ff;
        border: 1px solid #bfdbfe;
        font-weight: 400;
    }*/
.notifications-tabs[b-fvv0zfl1d6] {
    display: flex;
    gap: 12px;
}

    .notifications-tabs .tab[b-fvv0zfl1d6] {
        padding: 4px 12px;
        border-radius: 16px;
        cursor: pointer;
        font-size: 12px;
    }

        .notifications-tabs .tab.active[b-fvv0zfl1d6] {
            /* background-color: #263850;
    color: #2d88ff;*/
            color: #3b82f6;
            background-color: #eff6ff;
            border: 1px solid #bfdbfe;
            font-weight: 400;
        }

.notifications-subheader[b-fvv0zfl1d6] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    font-size: 12px;
    font-weight: 600;
}

.see-all-link[b-fvv0zfl1d6] {
    color: #2d88ff;
    text-decoration: none;
}

.notifications-menu-options[b-fvv0zfl1d6] {
    position: absolute;
    top: 12px;
    right: 16px;
}
.menu-button[b-fvv0zfl1d6] {
    background: none;
    border: none;
    color: #e4e6eb;
    font-size: 16px;
    cursor: pointer;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .menu-button:hover[b-fvv0zfl1d6] {
        background-color: #3a3b3c;
    }

.menu-dropdown[b-fvv0zfl1d6] {
    position: absolute;
    top: 40px;
    right: 0;
    background-color: #334155;
    border-radius: 8px;
    box-shadow: 0 12px 28px 0 rgba(0, 0, 0, 0.2);
    min-width: 200px;
    display: none;
}

    .menu-dropdown.show[b-fvv0zfl1d6] {
        display: block;
    }

.noti-content[b-fvv0zfl1d6] {
    max-height: calc(80vh - 180px);
    overflow-y: auto;
}

.notification-list[b-fvv0zfl1d6] {
    list-style: none;
    padding: 0;
    margin: 0;
}

.notification-message[b-fvv0zfl1d6] {
    border-bottom: 1px solid #3e4042;
}

    .notification-message a[b-fvv0zfl1d6] {
        text-decoration: none;
        /*color: #e4e6eb;*/
        color: black;
        display: block;
    }

.notification-item[b-fvv0zfl1d6] {
    display: flex;
    align-items: flex-start;
    padding: 12px 16px;
    position: relative;
}

.notification-avatar[b-fvv0zfl1d6] {
    margin-right: 12px;
    position: relative;
}

    .notification-avatar img[b-fvv0zfl1d6] {
        width: 56px;
        height: 56px;
        border-radius: 50%;
        object-fit: cover;
    }

.icon-overlay[b-fvv0zfl1d6] {
    position: absolute;
    right: -4px;
    bottom: -4px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: #fff;
}

.match-icon[b-fvv0zfl1d6] {
    background-color: #2d88ff;
}

.urgent-icon[b-fvv0zfl1d6] {
    background-color: #f42c30;
}

.status-icon[b-fvv0zfl1d6] {
    background-color: #7839d9;
}

.thanks-icon[b-fvv0zfl1d6] {
    background-color: #e94878;
}

.reminder-icon[b-fvv0zfl1d6] {
    background-color: #f7923b;
}

.expiring-icon[b-fvv0zfl1d6] {
    background-color: #f7b928;
}

.nearby-icon[b-fvv0zfl1d6] {
    background-color: #45bd62;
}

.notification-content[b-fvv0zfl1d6] {
    flex: 1;
}

.notification-text[b-fvv0zfl1d6] {
    margin: 0 0 4px 0;
    font-size: 14px;
    line-height: 1.25;
}

    .notification-text strong[b-fvv0zfl1d6] {
        font-weight: 600;
    }

.notification-time[b-fvv0zfl1d6] {
    margin: 0;
    font-size: 13px;
    color: #b0b3b8;
}

.notification-indicator[b-fvv0zfl1d6] {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: #2d88ff;
    margin-left: 12px;
    flex-shrink: 0;
}

.notification-actions[b-fvv0zfl1d6] {
    display: flex;
    gap: 8px;
    padding: 0 16px 12px 84px;
}
.dropdown-menu[b-fvv0zfl1d6] {
    position: absolute;
    top: 100%;
    right: 0;
    left: auto;
    z-index: 1000;
    min-width: min(240px, 80vw);
    padding: 0;
    margin: 0.125rem 0 0;
    /*background-color: #242526;*/
    border: 1px solid #3e4042;
    border-radius: 0.25rem;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
    display: none;
}

    .dropdown-menu.show[b-fvv0zfl1d6] {
        display: block;
    }

.userRolesMenu[b-fvv0zfl1d6] {
    /*background-color: #242526;*/
    width: min(280px, 92vw);
    padding: 0;
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
    border: none;
    color: #050505;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* User Profile Section */
.user-profile-section[b-fvv0zfl1d6] {
    padding: 10px;
    border-bottom: 1px solid #dddfe2;
}

.user-profile-info[b-fvv0zfl1d6] {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

    .user-profile-info img[b-fvv0zfl1d6] {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        margin-right: 8px;
        border: 2px solid #ea580c;
    }

.user-name[b-fvv0zfl1d6] {
    font-weight: 600;
    font-size: 15px;
    color: #050505;
}


/* Switch Profile Button - more compact */
.see-all-profiles[b-fvv0zfl1d6] {
    background-color: #e4e6eb;
    color: #050505;
    /*padding: 8px;*/
    padding: 6px 10px;
    border-radius: 6px;
    text-align: center;
    cursor: pointer;
    font-size: 20px;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 30px; /* Reduced from 36px */
}

    .see-all-profiles:hover[b-fvv0zfl1d6] {
        background-color: #d8dadf;
    }

    .see-all-profiles i[b-fvv0zfl1d6] {
        margin-right: 6px;
        font-size: 14px;
    }




/* Role Selection View Inside Dropdown */
.role-selection-view[b-fvv0zfl1d6] {
    width: 100%;
}
.role-header[b-fvv0zfl1d6] {
    /* display: flex;
    align-items: center;
    padding: 16px;*/
    padding: 8px 10px;
    border-bottom: 1px solid #dddfe2;
}

    .role-header h2[b-fvv0zfl1d6] {
        font-size: 16px;
        font-weight: 700;
        margin: 0;
        color: #050505;
    }

.role-list[b-fvv0zfl1d6] {
    padding: 8px 0;
}

.role-item[b-fvv0zfl1d6], .create-role-item[b-fvv0zfl1d6] {
    display: flex;
    align-items: center;
    padding: 8px 10px;
    cursor: pointer;
}

    .role-item:hover[b-fvv0zfl1d6], .create-role-item:hover[b-fvv0zfl1d6] {
        background-color: #f2f2f2;
    }

    .role-item img[b-fvv0zfl1d6] {
        width: 30px;
        height: 30px;
        border-radius: 50%;
        margin-right: 8px;
    }

    .role-item.active[b-fvv0zfl1d6] {
        background-color: #e7f3ff;
    }

.role-name[b-fvv0zfl1d6] {
    flex: 1;
    font-size: 15px;
    font-weight: 500;
}

.role-check[b-fvv0zfl1d6] {
    color: #1877f2;
    font-size: 16px;
}

/* Footer */
.menu-footer[b-fvv0zfl1d6] {
    padding: 8px 10px;
    border-top: 1px solid #dddfe2;
    color: #65676b;
    font-size: 10px;
    line-height: 1.4;
}

    .menu-footer span[b-fvv0zfl1d6] {
        cursor: pointer;
    }

        .menu-footer span:hover[b-fvv0zfl1d6] {
            text-decoration: underline;
        }


/* Menu Items */
.menu-items[b-fvv0zfl1d6] {
    padding: 4px 0;
}

.menu-item[b-fvv0zfl1d6] {
    display: flex;
    align-items: center;
    padding: 8px 10px;
    text-decoration: none;
    color: #f3d03c;
    cursor: pointer;
    transition: background-color 0.2s;
    font-size: 14px;
}

    .menu-item:hover[b-fvv0zfl1d6] {
        background-color: #3b82f6;
        color: white;
        font-weight: 700;
    }

   /* .menu-item:hover {
        background-color: #ea580c;
        color: white;
        font-weight:700;
    }*/

    .menu-item i[b-fvv0zfl1d6] {
        margin-right: 8px;
        width: 16px;
    }

.menu-icon[b-fvv0zfl1d6] {
    /*   width: 30px;
    height: 30px;
    background-color: #e4e6eb;*/
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 8px;
    font-size: 14px;
    color: #ea580c;
}

.menu-text[b-fvv0zfl1d6] {
    flex: 1;
    font-size: 14px;
    font-weight: 500;
    color: #050505;
}
.menu-text:hover[b-fvv0zfl1d6] {
    color: white;
}
.menu-arrow[b-fvv0zfl1d6] {
    color: #65676b;
    font-size: 12px;
}

.menu-shortcut[b-fvv0zfl1d6] {
    color: #65676b;
    font-size: 12px;
}


/* Right side content */
.nav-right[b-fvv0zfl1d6] {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    margin-left: auto;
}

/* Mobile Navigation Toggle Button */
.navbar-toggler[b-fvv0zfl1d6] {
    background-color: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #495057;
    width: 40px;
    height: 40px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    position: relative;
    overflow: hidden;
    z-index: 1001; /* Higher than nav-right to ensure it's clickable */
}

    .navbar-toggler:hover[b-fvv0zfl1d6] {
        background-color: rgba(255, 255, 255, 0.2);
        transform: scale(1.05);
    }

    .navbar-toggler:focus[b-fvv0zfl1d6] {
        box-shadow: 0 0 0 0.2rem rgba(99, 102, 241, 0.25);
        outline: none;
    }

    /* Toggle button active state */
    .navbar-toggler.active[b-fvv0zfl1d6] {
        background-color: rgba(255, 255, 255, 0.3);
        border-color: rgba(255, 255, 255, 0.4);
    }

        .navbar-toggler.active[b-fvv0zfl1d6]::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: rgba(147, 173, 199, 0.3);
            animation: pulse-b-fvv0zfl1d6 0.3s ease-out;
        }

@keyframes pulse-b-fvv0zfl1d6 {
    0% {
        transform: scale(0);
        opacity: 1;
    }

    100% {
        transform: scale(1);
        opacity: 0;
    }
}

/* Mobile Quick Action Bar */
.mobile-quick-actions[b-fvv0zfl1d6] {
    background: #f1f5f9;
    padding: 12px 15px;
    display: none; /* Hidden by default, shown only on mobile */
    gap: 10px;
    border-bottom: 1px solid #e2e8f0;
    position: sticky;
    top: 3.5rem; /* Below the top navigation */
    z-index: 999;
}

.quick-action-btn[b-fvv0zfl1d6] {
    flex: 1;
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 12px 8px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 13px;
    font-weight: 600;
    color: #475569;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .quick-action-btn:hover[b-fvv0zfl1d6] {
        transform: translateY(-1px);
        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        background: #79acff;
        color: white;
        border-color: #1e40af;
    }

    .quick-action-btn.primary[b-fvv0zfl1d6] {
        background: white;
        color: #475569;
        border: 1px solid #e2e8f0;
    }

        .quick-action-btn.primary:hover[b-fvv0zfl1d6] {
            transform: translateY(-1px);
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
            background: #79acff;
            color: white;
            border-color: #1e40af;
        }

    .quick-action-btn.active[b-fvv0zfl1d6] {
        background: #1e40af;
        color: white;
        border-color: #1e40af;
    }

    .quick-action-btn.primary.active[b-fvv0zfl1d6] {
        background: #1e40af;
        color: white;
        border-color: #1e40af;
    }
/* Mobile Navigation */
.mobile-nav[b-fvv0zfl1d6] {
    position: fixed;
    top: 3.5rem;
    left: 0;
    right: 0;
    background-color: #f8fafc;
    border-bottom: 1px solid #bfdbfe;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    z-index: 999;
    max-height: calc(100vh - 3.5rem);
    overflow-y: auto;
    transform: translateY(-100%);
    transition: transform 0.3s ease-in-out;
    padding: 0;
}

    .mobile-nav:not(.collapse)[b-fvv0zfl1d6] {
        transform: translateY(0);
    }

    .mobile-nav.collapse[b-fvv0zfl1d6] {
        transform: translateY(-100%);
    }

.mobile-nav-content[b-fvv0zfl1d6] {
    padding: 1rem;
}

.mobile-nav-item[b-fvv0zfl1d6] {
    padding: 0.75rem 1rem;
    color: #495057;
    cursor: pointer;
    font-weight: 500;
    font-size: 0.9rem;
    border-radius: 8px;
    margin-bottom: 0.5rem;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
}

    .mobile-nav-item:hover[b-fvv0zfl1d6] {
        background-color: #e2e8f0;
        color: #1e293b;
        transform: translateX(4px);
    }

    .mobile-nav-item:last-child[b-fvv0zfl1d6] {
        margin-bottom: 0;
    }

/* Add backdrop for mobile nav */
.mobile-nav-backdrop[b-fvv0zfl1d6] {
    position: fixed;
    top: 3.5rem;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 998;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
}

    .mobile-nav-backdrop.show[b-fvv0zfl1d6] {
        opacity: 1;
        visibility: visible;
    }

/* Backdrop to close dropdowns on outside click */
.dropdown-close-backdrop[b-fvv0zfl1d6] {
    position: fixed;
    top: 3.5rem;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 997;
    background: transparent;
    cursor: default;
}

/* Content area */
.content[b-fvv0zfl1d6] {
    padding: 1rem;
}
.disabled-link[b-fvv0zfl1d6] {
    color: #aaa !important;
    pointer-events: none;
    cursor: not-allowed;
    text-decoration: line-through;
    opacity: 0.7;
}
/* Responsive Design */
@media (max-width: 768px) {
    .desktop-only[b-fvv0zfl1d6] {
        display: none;
    }

    .nav-links[b-fvv0zfl1d6] {
        display: none;
    }

    .top-row[b-fvv0zfl1d6] {
        padding: 0 8px !important;
    }

    .container-fluid[b-fvv0zfl1d6] {
        position: relative;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .navbar-brand img[b-fvv0zfl1d6] {
        height: 36px !important;
    }

    .navbar-brand[b-fvv0zfl1d6] {
        font-size: 1.1rem;
    }

    /* Article now uses Bootstrap responsive `px-0 px-md-4` so left/right
       padding is 0 on mobile and 1.5rem on desktop — no class override
       needed for those. Keep the mobile bottom-padding here so page content
       isn't hidden behind the fixed BottomTabBar. */
    .content[b-fvv0zfl1d6] {
        padding: 0rem !important;
        padding-bottom: 60px !important;
    }

    /* Mobile dropdown panels — constrained size */
    .dropdown-menu.notifications[b-fvv0zfl1d6] {
        position: fixed !important;
        top: 3.5rem !important;
        right: 4px !important;
        left: auto !important;
        width: min(300px, 96vw) !important;
        max-height: calc(100vh - 3.5rem - 70px) !important;
        overflow-y: auto;
        z-index: 1002;
        font-size: 0.8rem;
    }

    .dropdown-menu.userRolesMenu[b-fvv0zfl1d6] {
        position: fixed !important;
        top: 3.5rem !important;
        right: 4px !important;
        left: auto !important;
        width: min(260px, 88vw) !important;
        max-height: calc(100vh - 3.5rem - 70px) !important;
        overflow-y: auto;
        z-index: 1002;
        font-size: 0.82rem;
    }

    .menu-text[b-fvv0zfl1d6] {
        font-size: 0.82rem;
    }

    .menu-icon[b-fvv0zfl1d6] {
        width: 26px;
        height: 26px;
        font-size: 12px;
        margin-right: 6px;
    }

    .menu-footer[b-fvv0zfl1d6] {
        font-size: 9px;
    }

    .notifications-header h3[b-fvv0zfl1d6] {
        font-size: 13px;
    }

    .notification-text[b-fvv0zfl1d6] {
        font-size: 12px;
    }

    /* Adjust nav-right positioning to not overlap hamburger */
    .nav-right[b-fvv0zfl1d6] {
        position: relative;
        margin-right: 55px; /* Increased space for hamburger button */
        max-width: calc(100vw - 200px); /* Prevent overflow on small screens */
    }
        /* Ensure OfflineIndicator badges wrap properly on mobile */

        /*.nav-right .offline-indicator {
        display: flex;
        flex-wrap: wrap;
        gap: 4px;
        justify-content: flex-end;
        align-items: center;
    }*/
        /* .nav-right .offline-indicator {
            display: flex !important;
            flex-direction: column !important;
            align-items: flex-end !important;
            gap: 2px !important;
        }*/
        /* Make badges smaller on mobile if needed */
        .nav-right .badge[b-fvv0zfl1d6] {
            font-size: 10px !important;
            padding: 3px 6px !important;
            white-space: nowrap;
        }
    /* Prevent body scroll when mobile nav is open */
    body.mobile-nav-open[b-fvv0zfl1d6] {
        overflow: hidden;
    }
}

@media (min-width: 769px) {
    .navbar-toggler[b-fvv0zfl1d6] {
        display: none;
    }

    .mobile-nav[b-fvv0zfl1d6] {
        display: none !important;
    }

    .mobile-nav-backdrop[b-fvv0zfl1d6] {
        display: none !important;
    }

    .mobile-quick-actions[b-fvv0zfl1d6] {
        display: none !important;
    }
}

/* ========== COMPACT APP FOOTER ========== */
.app-footer[b-fvv0zfl1d6] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 2px 4px;
    padding: 10px 16px 14px;
    border-top: 1px solid #e2e8f0;
    /*margin-top*/: 32px;
    font-size: 0.7rem;
    color: #d05a23cf;
    /* Keep clear of the fixed BottomTabBar on mobile */
    margin-bottom: 70px;
}

    .app-footer a[b-fvv0zfl1d6] {
        color: #d05a23cf;
        text-decoration: none;
        font-size: 0.7rem;
        transition: color 0.15s;
        white-space: nowrap;
    }

        .app-footer a:hover[b-fvv0zfl1d6] {
            color: #d05a23;
            text-decoration: underline;
        }

.app-footer-sep[b-fvv0zfl1d6] {
    color: #cbd5e1;
    padding: 0 2px;
    user-select: none;
}

.app-footer-copy[b-fvv0zfl1d6] {
    color: #94a3b8;
    white-space: nowrap;
}

@media (min-width: 769px) {
    /* Desktop: tab bar is hidden, no need for the extra bottom margin */
    .app-footer[b-fvv0zfl1d6] {
        margin-bottom: 0;
        padding-bottom: 20px;
    }
}
/* /Pages/AboutUs.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════
   About Page  ·  PetRyt  ·  Claymorphism Warm
   "The Journal" — intimate, editorial, tactile
   Fonts : DM Serif Display (display) · DM Sans (body)
   ═══════════════════════════════════════════════════════════ */

/* ── Design tokens ──────────────────────────────────────── */
.about-container[b-jof9abjejq] {
    --cp:       #f97316;   /* primary orange            */
    --cpd:      #ea580c;   /* primary dark              */
    --cps:      #c2410c;   /* primary clay shadow       */
    --cpm:      #fdba74;   /* primary muted             */
    --ch:       #9a3412;   /* heading                   */
    --cb:       #78350f;   /* body text                 */
    --cm:       #92400e;   /* meta / italic close       */
    --csp:      #fdf6ed;   /* surface page              */
    --csc:      #ffffff;   /* surface card              */
    --csw:      #fff7ed;   /* surface warm              */
    --cbw:      #fed7aa;   /* border warm               */
    --cbl:      #fde8cb;   /* border warm light         */
    --cby:      #ffde59;   /* accent yellow             */
    --r:        14px;      /* card radius               */
    --clay-sm:  0 4px 0;
    --clay-md:  0 5px 0;
    --clay-lg:  0 7px 0;

    font-family: 'DM Sans', 'Segoe UI', sans-serif;
    margin: 0 auto;
    max-width: 1200px;
    border: 3px solid var(--cbw);
    border-radius: 18px;
    background: var(--csp);
    overflow: hidden;
    color: var(--cb);
}

/* ── Hero ────────────────────────────────────────────────── */

.as-hero[b-jof9abjejq] {
    position: relative;
    background: linear-gradient(155deg, #000000b8 0%, #833a1ea8 100%);
    text-align: center;
    border-bottom: 3px solid var(--cbw);
    overflow: hidden;
}

/* giant watermark paw — atmospheric depth */
.as-hero__bg-paw[b-jof9abjejq] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: start;
    font-size: clamp(16rem, 36vw, 26rem);
    color: rgb(255 255 255 / 14%);
    pointer-events: none;
    user-select: none;
    transform: rotate(-15deg) translate(15%, 8%);
}

.as-hero__inner[b-jof9abjejq] {
    position: relative;
    z-index: 1;
}

    .as-hero__inner h4[b-jof9abjejq] {
        font-size: 2.5rem;
        font-weight: 600;
        margin-bottom: 8px;
        font-weight: 400;
        color: var(--cby);
        line-height: 1.12;
        letter-spacing: -0.015em;
        font-family: 'DM Serif Display', Georgia, serif;
       /* font-size: clamp(2rem, 6.5vw, 3rem);
        font-weight: 400;
        color: var(--cby);
        margin: 0 0 16px;
        line-height: 1.12;
        letter-spacing: -0.015em;*/
    }

.as-hero__logo[b-jof9abjejq] {
    display: block;
    margin: 25px auto;
}

.as-hero__headline[b-jof9abjejq] {
    font-family: 'DM Serif Display', Georgia, serif;
    font-size: clamp(2rem, 6.5vw, 3rem);
    font-weight: 400;
    color: var(--cby);
    margin: 0 0 16px;
    line-height: 1.12;
    letter-spacing: -0.015em;
}

.as-hero__headline span[b-jof9abjejq] {
    display: block;
}

/* staggered line entrance */
@media (prefers-reduced-motion: no-preference) {
    .as-hero__headline span[b-jof9abjejq] {
        animation: hero-line-b-jof9abjejq 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
    }
    .as-hero__headline span:nth-child(2)[b-jof9abjejq] {
        animation-delay: 0.1s;
    }
    @keyframes hero-line-b-jof9abjejq {
        from { opacity: 0; transform: translateY(14px); }
        to   { opacity: 1; transform: translateY(0); }
    }
}

.as-hero__lead[b-jof9abjejq] {
    font-size: 1rem;
    color: #fde8cb;
    max-width: 380px;
    margin: 0 auto 28px;
    line-height: 1.65;
    opacity: 0.87;
}

.as-hero__scroll-cue[b-jof9abjejq] {
    color: rgba(253, 232, 203, 0.4);
    font-size: 0.9rem;
    animation: cue-bounce-b-jof9abjejq 2.4s ease-in-out infinite;
}

@keyframes cue-bounce-b-jof9abjejq {
    0%, 100% { transform: translateY(0);   opacity: 0.38; }
    50%       { transform: translateY(8px); opacity: 0.75; }
}

@media (prefers-reduced-motion: reduce) {
    .as-hero__headline span[b-jof9abjejq] { animation: none; }
    .as-hero__scroll-cue[b-jof9abjejq]    { animation: none; }
}

/* ── Body wrapper ────────────────────────────────────────── */

.as-body[b-jof9abjejq] {
    padding: 44px 32px 36px;
    display: flex;
    flex-direction: column;
    gap: 52px;
}

/* ── Section container ───────────────────────────────────── */

.as-section[b-jof9abjejq] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* scroll-triggered reveal — progressive enhancement */
@supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
        .as-section[b-jof9abjejq] {
            animation: section-reveal-b-jof9abjejq linear both;
            animation-timeline: view();
            animation-range: entry 0% entry 28%;
        }
        @keyframes section-reveal-b-jof9abjejq {
            from { opacity: 0; transform: translateY(24px); }
            to   { opacity: 1; transform: translateY(0); }
        }
    }
}

/* ── Eyebrow label ───────────────────────────────────────── */

.as-eyebrow[b-jof9abjejq] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--cp);
}

/* ── Story card ──────────────────────────────────────────── */

.as-story-card[b-jof9abjejq] {
    background: var(--csc);
    border: 2px solid var(--cbw);
    border-left: 5px solid var(--cp);
    border-radius: var(--r);
    box-shadow: var(--clay-md) var(--cbl);
    padding: 28px 32px 24px;
    position: relative;
    overflow: hidden;
}

/* large decorative opening quote */
.as-story-card[b-jof9abjejq]::before {
    content: '\201C';
    position: absolute;
    top: -6px;
    left: 18px;
    font-family: 'DM Serif Display', Georgia, serif;
    font-size: 8rem;
    line-height: 1;
    color: var(--cp);
    opacity: 0.1;
    pointer-events: none;
    user-select: none;
}

.as-story-card__text[b-jof9abjejq] {
    position: relative;
}

.as-story-card__text p[b-jof9abjejq] {
    font-size: 1.06rem;
    line-height: 1.82;
    color: var(--cb);
    margin: 0 0 16px;
}

.as-story-card__text p:last-child[b-jof9abjejq] {
    margin-bottom: 0;
}

.as-story-card__close[b-jof9abjejq] {
    font-style: italic;
    font-size: 1.02rem;
    line-height: 1.75;
    color: var(--cm);
    margin: 18px 0 0;
    padding-top: 16px;
    border-top: 1px solid var(--cbl);
    position: relative;
}

/* ── Section title (editorial scale) ────────────────────── */

.as-section-title[b-jof9abjejq] {
    font-family: 'DM Serif Display', Georgia, serif;
    font-size: clamp(1.45rem, 4vw, 1.95rem);
    font-weight: 400;
    color: var(--ch);
    margin: 0;
    line-height: 1.18;
    letter-spacing: -0.01em;
}

/* ── Generic content card ────────────────────────────────── */

.as-card[b-jof9abjejq] {
    background: var(--csc);
    border: 2px solid var(--cbw);
    border-radius: var(--r);
    box-shadow: var(--clay-md) var(--cbl);
    padding: 22px 26px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.as-card p[b-jof9abjejq] {
    font-size: 0.97rem;
    line-height: 1.74;
    color: var(--cb);
    margin: 0;
}

/* ── How it works — 3-step flow ──────────────────────────── */

.as-flow[b-jof9abjejq] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px 16px;
    background: var(--csw);
    border: 2px solid var(--cbw);
    border-radius: var(--r);
    box-shadow: var(--clay-sm) var(--cbl);
    gap: 4px;
}

.as-flow__step[b-jof9abjejq] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 9px;
    flex: 1;
}

.as-flow__icon[b-jof9abjejq] {
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, var(--cp), var(--cpd));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.05rem;
    box-shadow: var(--clay-sm) var(--cps);
    flex-shrink: 0;
}

.as-flow__label[b-jof9abjejq] {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--ch);
    text-align: center;
    line-height: 1.3;
    max-width: 80px;
}

.as-flow__arrow[b-jof9abjejq] {
    color: var(--cpm);
    font-size: 0.8rem;
    padding: 0 6px;
    margin-bottom: 22px; /* vertically align with icon centre */
    flex-shrink: 0;
}

/* ── Mission / Vision side-by-side ───────────────────────── */

.as-mv-grid[b-jof9abjejq] {
    display: grid;
    grid-template-columns: 1fr 1px 1fr;
    gap: 28px;
    align-items: start;
    background: var(--csc);
    border: 2px solid var(--cbw);
    border-radius: var(--r);
    box-shadow: var(--clay-md) var(--cbl);
    padding: 28px;
}

.as-mv-rule[b-jof9abjejq] {
    background: var(--cbl);
    border-radius: 2px;
    align-self: stretch;
}

.as-mv-text[b-jof9abjejq] {
    font-size: 1.01rem;
    line-height: 1.78;
    color: var(--cb);
    margin: 0;
}

/* ── Future goals ────────────────────────────────────────── */

.as-goals[b-jof9abjejq] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.as-goal[b-jof9abjejq] {
    background: var(--csc);
    border: 2px dashed #fdba74;
    border-radius: var(--r);
    padding: 22px 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.as-goal:hover[b-jof9abjejq] {
    transform: translateY(-3px);
    box-shadow: 0 9px 0 var(--cbl);
}

.as-goal__header[b-jof9abjejq] {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.as-goal__badge[b-jof9abjejq] {
    background: linear-gradient(135deg, var(--cp), var(--cpd));
    color: #fff;
    font-size: 0.63rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    padding: 3px 10px;
    border-radius: 20px;
    box-shadow: var(--clay-sm) var(--cps);
}

.as-goal__icon[b-jof9abjejq] {
    width: 40px;
    height: 40px;
    background: var(--csc);
    border: 2px solid var(--cbw);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--cp);
    font-size: 1rem;
    flex-shrink: 0;
}

.as-goal__title[b-jof9abjejq] {
    font-family: 'DM Serif Display', Georgia, serif;
    font-size: 1.08rem;
    font-weight: 400;
    color: var(--ch);
    margin: 0;
    line-height: 1.3;
}

.as-goal__desc[b-jof9abjejq] {
    font-size: 0.87rem;
    line-height: 1.7;
    color: var(--cb);
    margin: 0;
}

/* ── Founders ────────────────────────────────────────────── */

.as-founders[b-jof9abjejq] {
    display: flex;
    flex-direction: column;
    gap: 25px;
}

/* horizontal layout — editorial, interview-style */
.as-founder[b-jof9abjejq] {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    background: var(--csc);
    border: 2px solid var(--cbw);
    border-radius: var(--r);
    box-shadow: var(--clay-md) var(--cps);
    padding: 22px 24px;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.as-founder:hover[b-jof9abjejq] {
    transform: translateY(-3px);
    box-shadow: var(--clay-lg) var(--cps);
}

.as-founder__avatar[b-jof9abjejq] {
    width: 58px;
    height: 58px;
    background: linear-gradient(135deg, var(--cp), var(--cpd));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 700;
    font-size: 1.1rem;
    box-shadow: var(--clay-sm) var(--cps);
    flex-shrink: 0;
}

.as-founder__body[b-jof9abjejq] {
    display: flex;
    flex-direction: column;
    gap: 3px;
    flex: 1;
}

.as-founder__name[b-jof9abjejq] {
    font-family: 'DM Serif Display', Georgia, serif;
    font-size: 1.1rem;
    color: var(--ch);
    line-height: 1.2;
}

.as-founder__role[b-jof9abjejq] {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--cp);
    margin-bottom: 7px;
}

.as-founder__bio[b-jof9abjejq] {
    font-size: 0.9rem;
    line-height: 1.65;
    color: var(--cb);
    margin: 0;
}

/* ── CTA ─────────────────────────────────────────────────── */

.as-cta[b-jof9abjejq] {
    background: linear-gradient(155deg, #000000b8 0%, #833a1ea8 100%);
    border-top: 3px solid var(--cbw);
    position: relative;
    overflow: hidden;
}

/* matching paw watermark */
.as-cta__bg-paw[b-jof9abjejq] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(12rem, 28vw, 20rem);
    color: rgb(255 255 255 / 14%);    
    pointer-events: none;
    user-select: none;
    transform: rotate(20deg) translate(-10%, 5%);
}

.as-cta__inner[b-jof9abjejq] {
    position: relative;
    z-index: 1;
    padding: 52px 32px 48px;
    text-align: center;
}

.as-cta__heading[b-jof9abjejq] {
    font-family: 'DM Serif Display', Georgia, serif;
    font-size: clamp(1.7rem, 5vw, 2.4rem);
    font-weight: 400;
    color: var(--cby);
    margin: 0 0 14px;
    line-height: 1.12;
    letter-spacing: -0.01em;
}

.as-cta__desc[b-jof9abjejq] {
    font-size: 1rem;
    color: #fde8cb;
    max-width: 430px;
    margin: 0 auto 32px;
    line-height: 1.68;
    opacity: 0.87;
}

.as-cta__btns[b-jof9abjejq] {
    display: flex;
    gap: 14px;
    justify-content: center;
    flex-wrap: wrap;
}

.as-cta__btn[b-jof9abjejq] {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 13px 28px;
    border-radius: 12px;
    font-size: 0.95rem;
    font-weight: 600;
    text-decoration: none;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    cursor: pointer;
    min-height: 44px;
    outline-offset: 3px;
}

.as-cta__btn--primary[b-jof9abjejq] {
    background: linear-gradient(135deg, var(--cp), var(--cpd));
    color: #fff;
    box-shadow: 0 4px 0 var(--cps);
}

.as-cta__btn--primary:hover[b-jof9abjejq] {
    transform: translateY(-2px);
    box-shadow: 0 6px 0 var(--cps);
    color: #fff;
    text-decoration: none;
}

.as-cta__btn--primary:active[b-jof9abjejq] {
    transform: translateY(2px);
    box-shadow: 0 2px 0 var(--cps);
}

.as-cta__btn--ghost[b-jof9abjejq] {
    background: transparent;
    color: #fde8cb;
    border: 2px solid rgba(254, 215, 170, 0.45);
}

.as-cta__btn--ghost:hover[b-jof9abjejq] {
    background: rgba(254, 215, 170, 0.07);
    color: #fde8cb;
    border-color: rgba(254, 215, 170, 0.7);
    transform: translateY(-2px);
    text-decoration: none;
}

.as-cta__btn--ghost:active[b-jof9abjejq] {
    transform: translateY(2px);
}

.as-cta__btn:focus-visible[b-jof9abjejq] {
    outline: 3px solid var(--cby);
}

/* ── Responsive: tablet ──────────────────────────────────── */

@media (max-width: 1024px) and (min-width: 769px) {
    .about-container[b-jof9abjejq] { max-width: 100%; }
}

/* ── Responsive: mobile ──────────────────────────────────── */

@media (max-width: 768px) {
    .as-hero[b-jof9abjejq]      { padding: 34px 16px 28px; }
    .as-body[b-jof9abjejq]      { padding: 30px 16px 24px; gap: 40px; }
    .as-story-card[b-jof9abjejq] { padding: 22px 18px 20px; }

    .as-flow[b-jof9abjejq] {
        flex-direction: column;
        gap: 8px;
        padding: 18px 14px;
    }

    .as-flow__step[b-jof9abjejq] {
        flex-direction: row;
        width: 100%;
        gap: 14px;
        justify-content: flex-start;
    }

    .as-flow__label[b-jof9abjejq] {
        text-align: left;
        max-width: none;
    }

    .as-flow__arrow[b-jof9abjejq] {
        transform: rotate(90deg);
        margin-bottom: 0;
        align-self: center;
        padding: 4px 0;
    }

    .as-mv-grid[b-jof9abjejq] {
        grid-template-columns: 1fr;
        gap: 24px;
        padding: 22px 18px;
    }

    .as-mv-rule[b-jof9abjejq] { display: none; }

    .as-goals[b-jof9abjejq] { grid-template-columns: 1fr; }

    .as-founder[b-jof9abjejq] {
        gap: 14px;
        padding: 18px 16px;
    }

    .as-cta__inner[b-jof9abjejq] { padding: 36px 16px 32px; }

    .as-cta__btns[b-jof9abjejq] {
        flex-direction: column;
        align-items: center;
    }

    .as-cta__btn[b-jof9abjejq] {
        width: 100%;
        max-width: 280px;
        justify-content: center;
    }
}

/* ── Responsive: small mobile ────────────────────────────── */

@media (max-width: 480px) {
    .as-body[b-jof9abjejq]       { padding: 22px 12px 18px; gap: 32px; }
    .as-story-card[b-jof9abjejq] { padding: 18px 14px 16px; }
    .as-card[b-jof9abjejq]       { padding: 16px 14px; }
    .as-mv-grid[b-jof9abjejq]    { padding: 18px 14px; }
    .as-goal[b-jof9abjejq]       { padding: 18px 14px; }
    .as-founder[b-jof9abjejq]    { padding: 16px 12px; }
    .as-cta__inner[b-jof9abjejq] { padding: 28px 12px 24px; }
}
/* /Pages/AccountPages/EditProfile.razor.rz.scp.css */
/* Edit Profile Page Styles - Based on EditPet.razor.css */
.edit-profile-page[b-cttwgyafxn] {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    /*padding: 1rem;*/
    max-width: 1200px;
    margin: 0 auto;
    color: #9a3412;
    /*background: linear-gradient(135deg, rgba(30, 41, 59, 0.95) 10%, rgba(30, 41, 59, 0.95) 100%)*/
    border-radius: 10px;
    /*border: 3px solid #fed7aa !important;*/
    background: #ffefdba6;
}

.page-header[b-cttwgyafxn] {
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 10px;
    padding-bottom: 5px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    background: linear-gradient(155deg, #000000b8 0%, #833a1ea8 100%);
    color: #ffde59;
}

.header-content[b-cttwgyafxn] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 10px;
}

.header-left[b-cttwgyafxn] {
    display: flex;
    flex-direction: column;
}



.back-link[b-cttwgyafxn] {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    font-size: 0.875rem;
}

    .back-link:hover[b-cttwgyafxn] {
        color: #2196f3;
        font-weight: bolder;
        text-decoration: underline;
    }

.back-icon[b-cttwgyafxn] {
    margin-right: 0.5rem;
}

.page-title[b-cttwgyafxn] {
    font-size: 1.8rem;
    font-weight: 600;
    margin-bottom: 8px;
}

.header-right[b-cttwgyafxn] {
    display: flex;
    flex-direction: row;
    gap: 5px;
}

.action-buttons[b-cttwgyafxn] {
    display: flex;
    gap: 0.75rem;
}

    .action-buttons button[b-cttwgyafxn] {
        border-radius: 3rem;
        font-weight: 600;
        cursor: pointer;
        border: 1px solid rgba(255, 255, 255, 0.3);
        transition: all 0.2s ease;
    }

.header-btn[b-cttwgyafxn] {
    backdrop-filter: blur(10px);
    padding: 8px 12px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
}

    .header-btn:hover[b-cttwgyafxn] {
        transform: translateY(-2px);
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
        font-weight: bolder;
    }

.header-save-btn[b-cttwgyafxn] {
    background: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #ffffff;
}

    .header-save-btn:hover[b-cttwgyafxn] {
        background: #ea580c;
        color: #ffffff;
    }

.header-delete-btn[b-cttwgyafxn] {
    background: #d71818;
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #ffffff;
}

    .header-delete-btn:hover[b-cttwgyafxn] {
        background: #ff5454;
        color: #ffffff;
        font-weight: bolder;
        transform: translateY(-2px);
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
    }

.header-cancel-btn[b-cttwgyafxn] {
    background: #64748b;
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: white;
}

    .header-cancel-btn:hover[b-cttwgyafxn] {
        font-weight: bolder;
        transform: translateY(-2px);
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
    }
.footer-btn[b-cttwgyafxn] {
    backdrop-filter: blur(10px);
    padding: 8px 12px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
}

    .footer-btn:hover[b-cttwgyafxn] {
        transform: translateY(-2px);
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
        font-weight: bolder;
    }

.footer-save-btn[b-cttwgyafxn] {
    background: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #ffffff;
}

    .footer-save-btn:hover[b-cttwgyafxn] {
        background: #2563eb;
        color: #ffffff;
    }
/* Loading and Error States */
.loading-container[b-cttwgyafxn],
.error-container[b-cttwgyafxn] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 1rem;
    text-align: center;
}

    .loading-container p[b-cttwgyafxn],
    .error-container p[b-cttwgyafxn] {
        margin-top: 1rem;
        color: #64748b;
    }

.error-message[b-cttwgyafxn] {
    color: #dc2626;
    font-weight: 500;
}

.warning-text[b-cttwgyafxn] {
    color: #dc2626;
    font-size: 0.875rem;
    margin-top: 0.5rem;
}

/* Tab Navigation */
.tab-navigation[b-cttwgyafxn] {
    display: flex;
    background-color: #ffffff;
    border: 1px solid #e2e8f0;
    border-bottom: none;
}

.tab[b-cttwgyafxn] {
    padding: 1rem;
    flex: 1;
    text-align: center;
    font-weight: 500;
    font-size: 0.875rem;
    color: #64748b;
    cursor: pointer;
    background-color: #f1f5f9;
    transition: all 0.2s ease;
    border-right: 1px solid #e2e8f0;
}

    .tab:first-child[b-cttwgyafxn] {
        border-radius: 0 0 0 0;
    }

    .tab:last-child[b-cttwgyafxn] {
        border-radius: 0 0 0 0;
        border-right: none;
    }

    .tab.active[b-cttwgyafxn] {
        background-color: #eff6ff;
        color: #d05a23;
        /*color: #3b82f6;*/
        font-weight: 600;
        font-size: 1rem;
        border-bottom: 2px solid #3b82f6;
    }

    .tab:hover:not(.active)[b-cttwgyafxn] {
        background-color: #e2e8f0;
        color: #475569;
    }

/* Tab Content */
.tab-content[b-cttwgyafxn] {
    background-color: #ffffff;
    border: 1px solid #e2e8f0;
    padding: 1.5rem;
    min-height: 400px;
}

/* Profile Picture Section */
.profile-picture-section[b-cttwgyafxn] {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 2rem;
}

.profile-picture-container[b-cttwgyafxn] {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.profile-avatar[b-cttwgyafxn] {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background-color: #f1f5f9;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    margin-bottom: 0.5rem;
    border: 2px solid #e2e8f0;
    overflow: hidden;
    position: relative;
}

.profile-photo[b-cttwgyafxn] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.profile-initials[b-cttwgyafxn] {
    color: #6b7280;
    font-weight: 600;
}

.upload-btn[b-cttwgyafxn] {
    margin-top: 0.5rem;
}

/* Form Styling */
.form-group[b-cttwgyafxn] {
    margin-bottom: 1rem;
    position: relative;
}

.form-row[b-cttwgyafxn] {
    display: flex;
    gap: 1rem;
    margin-bottom: 1rem;
}

.half-width[b-cttwgyafxn] {
    width: calc(50% - 0.5rem);
}

label[b-cttwgyafxn] {
    display: block;
    font-weight: 500;
    font-size: 0.875rem;
    margin-bottom: 0.5rem;
    color: #374151;
}

.form-control[b-cttwgyafxn] {
    width: 100%;
    padding: 0.625rem;
    border: 1px solid #e2e8f0;
    border-radius: 0.25rem;
    font-size: 0.875rem;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

    .form-control:focus[b-cttwgyafxn] {
        outline: none;
        border-color: #93c5fd;
        box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
    }

    .form-control.verified[b-cttwgyafxn] {
        border-color: #10b981;
        border-width: 2px;
    }

    .form-control.pending[b-cttwgyafxn] {
        border-color: #f59e0b;
        border-width: 2px;
    }

textarea.form-control[b-cttwgyafxn] {
    resize: vertical;
    min-height: 80px;
}

/* Form Grid for Basic Info */
.form-grid[b-cttwgyafxn] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1rem;
}

/* Field Indicators */
.field-indicator[b-cttwgyafxn] {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: bold;
    color: white;
}

    .field-indicator.complete[b-cttwgyafxn] {
        background-color: #10b981;
    }

    .field-indicator.incomplete[b-cttwgyafxn] {
        background-color: #ef4444;
    }

/* Input with Status */
.input-with-status[b-cttwgyafxn] {
    position: relative;
}

/* Inline action variant — primary input (with absolute badge inside) + an inline button (e.g. Send OTP) */
.input-with-action[b-cttwgyafxn] {
    display: flex;
    align-items: stretch;
    gap: 8px;
}

    .input-with-action .input-with-status[b-cttwgyafxn] {
        flex: 1;
        min-width: 0;
    }

    .input-with-action .form-control[b-cttwgyafxn] {
        width: 100%;
        /* Reserve space inside the input so the absolute badge doesn't overlap typed text. */
        padding-right: 5.5rem;
    }

.inline-action-btn[b-cttwgyafxn] {
    flex-shrink: 0;
    padding: 0.5rem 0.85rem;
    border-radius: 0.375rem;
    font-size: 0.85rem;
    font-weight: 600;
    white-space: nowrap;
}

.verification-badge[b-cttwgyafxn] {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 10px;
    font-weight: 500;
    color: white;
}

.verification-hint[b-cttwgyafxn] {
    font-size: 0.85rem;
    color: #475569;
    margin: 0 0 0.75rem 0;
}

/* 2-second pulse used to nudge the user to a freshly-relevant input
   (e.g. New Password after email verification). */
.input-highlight-pulse[b-cttwgyafxn] {
    animation: input-highlight-pulse-b-cttwgyafxn 2s ease-out;
    border-color: #3b82f6 !important;
}

@keyframes input-highlight-pulse-b-cttwgyafxn {
    0% {
        box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.55);
        border-color: #3b82f6;
    }

    50% {
        box-shadow: 0 0 0 6px rgba(59, 130, 246, 0.25);
        border-color: #3b82f6;
    }

    100% {
        box-shadow: 0 0 0 0 rgba(59, 130, 246, 0);
        border-color: #3b82f6;
    }
}

@media (max-width: 480px) {
    .input-with-action[b-cttwgyafxn] {
        flex-direction: column;
        align-items: stretch;
    }
}

    .verification-badge.verified[b-cttwgyafxn] {
        background-color: #10b981;
    }

    .verification-badge.pending[b-cttwgyafxn] {
        background-color: #f59e0b;
    }

/* Profile Completion Card */
.profile-completion-card[b-cttwgyafxn] {
    background: linear-gradient(135deg, #fef3c7 0%, #fbbf24 100%);
    padding: 1.5rem;
    position: relative;
}

.completion-card-close[b-cttwgyafxn] {
    position: absolute;
    top: 10px;
    right: 12px;
    background: none;
    border: none;
    font-size: 14px;
    color: #92400e;
    cursor: pointer;
    opacity: 0.6;
    line-height: 1;
    padding: 2px 4px;
}

    .completion-card-close:hover[b-cttwgyafxn] {
        opacity: 1;
    }

.completion-header h3[b-cttwgyafxn] {
    color: #92400e;
    font-size: 1rem;
    font-weight: 600;
    margin: 0 0 0.5rem 0;
}

.completion-header p[b-cttwgyafxn] {
    color: #92400e;
    font-size: 0.875rem;
    margin: 0 0 1rem 0;
}

.completion-details[b-cttwgyafxn] {
    color: #92400e;
    font-size: 0.75rem;
    margin-bottom: 0.75rem;
}

.progress-bar[b-cttwgyafxn] {
    width: 100%;
    height: 8px;
    background-color: #fbbf24;
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 1rem;
}

.progress-fill[b-cttwgyafxn] {
    height: 100%;
    border-radius: 4px;
    transition: width 0.5s ease, background 0.5s ease;
}

.missing-fields[b-cttwgyafxn] {
    color: #92400e;
    font-size: 0.75rem;
}

    .missing-fields strong[b-cttwgyafxn] {
        font-weight: 600;
    }

    .missing-fields ul[b-cttwgyafxn] {
        margin: 0.5rem 0 0 1rem;
        padding: 0;
    }

    .missing-fields li[b-cttwgyafxn] {
        margin-bottom: 0.25rem;
    }

/* Section Headers */
.section-header[b-cttwgyafxn] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
}

    .section-header h2[b-cttwgyafxn] {
        font-size: 1rem;
        font-weight: 600;
        margin: 0;
        color: #1e293b;
    }

    .section-header.danger-header h2[b-cttwgyafxn] {
        color: #ef4444;
    }

/* Verification Section */
.verification-section[b-cttwgyafxn] {
    background-color: #f0f9ff;
    border: 1px solid #bae6fd;
    border-radius: 0.5rem;
    padding: 1rem;
    margin: 1rem 0;
}

    .verification-section h3[b-cttwgyafxn] {
        color: #0369a1;
        font-size: 0.875rem;
        font-weight: 600;
        margin: 0 0 1rem 0;
    }

/* Benefits Card */
.benefits-card[b-cttwgyafxn] {
    background-color: #fef3c7;
    border: 1px solid #f59e0b;
    border-radius: 0.5rem;
    padding: 1rem;
    margin: 1rem 0;
}

    .benefits-card h3[b-cttwgyafxn] {
        color: #92400e;
        font-size: 0.875rem;
        font-weight: 600;
        margin: 0 0 0.5rem 0;
    }

    .benefits-card p[b-cttwgyafxn] {
        color: #92400e;
        font-size: 0.75rem;
        margin: 0 0 0.5rem 0;
    }

    .benefits-card ul[b-cttwgyafxn] {
        color: #92400e;
        font-size: 0.75rem;
        margin: 0;
        padding-left: 1rem;
    }

/* Warning Card */
.warning-card[b-cttwgyafxn] {
    background-color: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 0.5rem;
    padding: 1rem;
    margin: 1rem 0;
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}

.warning-icon[b-cttwgyafxn] {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background-color: #ef4444;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    flex-shrink: 0;
}

.warning-content h3[b-cttwgyafxn] {
    color: #ef4444;
    font-size: 0.875rem;
    font-weight: 600;
    margin: 0 0 0.5rem 0;
}

.warning-content p[b-cttwgyafxn] {
    color: #6b7280;
    font-size: 0.75rem;
    margin: 0 0 1rem 0;
}

/* Disabled Section */
.disabled-section[b-cttwgyafxn] {
    background-color: #f8fafc;
    border: 1px dashed #e2e8f0;
    border-radius: 0.5rem;
    padding: 1rem;
    margin: 1rem 0;
}

.disabled-text[b-cttwgyafxn] {
    color: #9ca3af;
    font-style: italic;
    font-size: 0.75rem;
    margin-bottom: 1rem;
}

.disabled-input[b-cttwgyafxn] {
    background-color: #f1f5f9;
    color: #9ca3af;
    cursor: not-allowed;
}

.disabled-btn[b-cttwgyafxn] {
    background-color: #e5e7eb;
    color: #9ca3af;
    cursor: not-allowed;
}

/* Password Section */
.password-section[b-cttwgyafxn] {
    margin: 1rem 0;
}

/* Two-Factor Authentication */
.tfa-section[b-cttwgyafxn] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #f0f9ff;
    border: 1px solid #bae6fd;
    border-radius: 0.5rem;
    padding: 1rem;
    margin: 1rem 0;
}

.tfa-info[b-cttwgyafxn] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.tfa-icon[b-cttwgyafxn] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: #3b82f6;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: bold;
}

.tfa-content h3[b-cttwgyafxn] {
    color: #0f172a;
    font-size: 0.875rem;
    font-weight: 600;
    margin: 0 0 0.25rem 0;
}

.tfa-content p[b-cttwgyafxn] {
    color: #64748b;
    font-size: 0.75rem;
    margin: 0 0 0.25rem 0;
}

.tfa-status[b-cttwgyafxn] {
    font-size: 0.7rem;
    font-weight: 500;
}

    .tfa-status.enabled[b-cttwgyafxn] {
        color: #10b981;
    }

    .tfa-status.disabled[b-cttwgyafxn] {
        color: #ef4444;
    }

/* Toggle Switch */
.toggle-switch[b-cttwgyafxn] {
    position: relative;
    display: inline-block;
    width: 40px;
    height: 20px;
}

    .toggle-switch input[b-cttwgyafxn] {
        opacity: 0;
        width: 0;
        height: 0;
    }

.toggle-slider[b-cttwgyafxn] {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #e5e7eb;
    transition: 0.2s;
    border-radius: 20px;
}

    .toggle-slider[b-cttwgyafxn]:before {
        position: absolute;
        content: "";
        height: 16px;
        width: 16px;
        left: 2px;
        bottom: 2px;
        background-color: white;
        transition: 0.2s;
        border-radius: 50%;
    }

input:checked + .toggle-slider[b-cttwgyafxn] {
    background-color: #3b82f6;
}

    input:checked + .toggle-slider[b-cttwgyafxn]:before {
        transform: translateX(20px);
    }

input:disabled + .toggle-slider[b-cttwgyafxn] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Danger Zone */
.danger-zone[b-cttwgyafxn] {
    background-color: #fef2f2;
    border: 2px solid #fecaca;
    border-radius: 0.5rem;
    padding: 1rem;
    margin: 1rem 0;
}

.danger-actions[b-cttwgyafxn] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 2rem;
}

.danger-action[b-cttwgyafxn] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.danger-description[b-cttwgyafxn] {
    display: flex;
    flex-direction: column;
}

    .danger-description span[b-cttwgyafxn] {
        color: #6b7280;
        font-size: 0.75rem;
        font-weight: 500;
    }

    .danger-description small[b-cttwgyafxn] {
        color: #9ca3af;
        font-size: 0.625rem;
    }

.danger-warning[b-cttwgyafxn] {
    color: #ef4444;
    font-size: 0.875rem;
}

/* Notification Sections */
.notification-sections[b-cttwgyafxn] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin-bottom: 2rem;
}

.notification-section[b-cttwgyafxn] {
    background-color: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 0.5rem;
    padding: 1rem;
}

    .notification-section h3[b-cttwgyafxn] {
        color: #374151;
        font-size: 0.875rem;
        font-weight: 600;
        margin: 0 0 1rem 0;
    }

.notification-options[b-cttwgyafxn] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.notification-option[b-cttwgyafxn] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

    .notification-option label[b-cttwgyafxn] {
        color: #374151;
        font-size: 0.75rem;
        margin: 0;
        cursor: pointer;
    }

/* Settings Row */
.settings-row[b-cttwgyafxn] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    margin-bottom: 2rem;
}

.setting-group h3[b-cttwgyafxn] {
    color: #1e293b;
    font-size: 1rem;
    font-weight: 600;
    margin: 0 0 1rem 0;
}

.privacy-options[b-cttwgyafxn] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.privacy-option[b-cttwgyafxn] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 0.5rem;
    padding: 0.75rem;
}

    .privacy-option label[b-cttwgyafxn] {
        color: #374151;
        font-size: 0.75rem;
        margin: 0;
        cursor: pointer;
    }

/* Notification Summary */
.notification-summary[b-cttwgyafxn] {
    background-color: #f0f9ff;
    border: 1px solid #bae6fd;
    border-radius: 0.5rem;
    padding: 1rem;
    margin: 1rem 0;
}

    .notification-summary h3[b-cttwgyafxn] {
        color: #0369a1;
        font-size: 0.875rem;
        font-weight: 600;
        margin: 0 0 0.5rem 0;
    }

    .notification-summary p[b-cttwgyafxn] {
        color: #0369a1;
        font-size: 0.75rem;
        margin: 0 0 0.5rem 0;
    }

.last-updated[b-cttwgyafxn] {
    color: #0369a1;
    font-size: 0.7rem;
}

/* Bottom Navigation */
.bottom-navigation[b-cttwgyafxn] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    border-top: 1px solid #e2e8f0;
    background: #fff;
}

    .bottom-navigation .last-updated[b-cttwgyafxn] {
        font-size: 0.75rem;
        color: #64748b;
        font-style: italic;
    }

/* Button Styles */
.btn[b-cttwgyafxn] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.625rem 1.25rem;
    border-radius: 9999px;
    font-weight: 600;
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
    text-decoration: none;
}

    .btn:disabled[b-cttwgyafxn] {
        opacity: 0.6;
        cursor: not-allowed;
    }

.btn-small[b-cttwgyafxn] {
    padding: 0.375rem 0.75rem;
    font-size: 0.75rem;
}

.btn-primary[b-cttwgyafxn] {
    background-color: #3b82f6;
    color: #ffffff;
}

    .btn-primary:hover:not(:disabled)[b-cttwgyafxn] {
        background-color: #2563eb;
    }

.btn-success[b-cttwgyafxn] {
    background-color: #10b981;
    color: #ffffff;
}

    .btn-success:hover:not(:disabled)[b-cttwgyafxn] {
        background-color: #059669;
    }

.btn-danger[b-cttwgyafxn] {
    background-color: #dc2626;
    color: #ffffff;
}

    .btn-danger:hover:not(:disabled)[b-cttwgyafxn] {
        background-color: #b91c1c;
    }

.btn-outline-primary[b-cttwgyafxn] {
    background-color: #eff6ff;
    color: #3b82f6;
    border: 1px solid #bfdbfe;
}

    .btn-outline-primary:hover:not(:disabled)[b-cttwgyafxn] {
        background-color: #dbeafe;
    }

.btn-outline-secondary[b-cttwgyafxn] {
    background-color: #ffffff;
    color: #64748b;
    border: 1px solid #cbd5e1;
}

    .btn-outline-secondary:hover:not(:disabled)[b-cttwgyafxn] {
        background-color: #f1f5f9;
    }

/* Modal Styles */
.modal-container[b-cttwgyafxn] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.modal-content[b-cttwgyafxn] {
    background-color: #ffffff;
    border-radius: 0.5rem;
    width: 90%;
    max-width: 600px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

.modal-header[b-cttwgyafxn] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid #e2e8f0;
}

    .modal-header h2[b-cttwgyafxn] {
        font-size: 1.25rem;
        font-weight: 600;
        margin: 0;
        color: #1e293b;
    }

.delete-header[b-cttwgyafxn] {
    background-color: #fef2f2;
    border-bottom-color: #fca5a5;
}

    .delete-header h2[b-cttwgyafxn] {
        color: #ef4444;
    }

.close-button[b-cttwgyafxn] {
    background: none;
    border: none;
    font-size: 1.5rem;
    color: #64748b;
    cursor: pointer;
    line-height: 1;
    transition: color 0.2s ease;
}

    .close-button:hover[b-cttwgyafxn] {
        color: #0f172a;
    }

.modal-body[b-cttwgyafxn] {
    padding: 1.5rem;
}

.modal-footer[b-cttwgyafxn] {
    display: flex;
    justify-content: flex-end;
    gap: 1rem;
    padding: 1rem 1.5rem;
    border-top: 1px solid #e2e8f0;
    background-color: #f8fafc;
}

/* Spinner */
.spinner-border[b-cttwgyafxn] {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    vertical-align: text-bottom;
    border: 0.125rem solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: spinner-border-b-cttwgyafxn 0.75s linear infinite;
}

.spinner-border-sm[b-cttwgyafxn] {
    width: 0.875rem;
    height: 0.875rem;
    border-width: 0.125rem;
}

@keyframes spinner-border-b-cttwgyafxn {
    to {
        transform: rotate(360deg);
    }
}

/* Responsive Styles */
@media (max-width: 768px) {
    .missing-fields ul[b-cttwgyafxn] {
        display: flex;
        flex-wrap: wrap;
        gap: 4px 10px;
        list-style: none;
        margin: 0.4rem 0 0;
        padding: 0;
    }

    .missing-fields li[b-cttwgyafxn] {
        margin-bottom: 0;
        white-space: nowrap;
    }

    .missing-fields li[b-cttwgyafxn]::before {
        content: "·";
        margin-right: 4px;
    }

    .page-header[b-cttwgyafxn] {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }

    .action-buttons[b-cttwgyafxn] {
        /*width: 100%;*/
        justify-content: space-between;
    }

    .tab-navigation[b-cttwgyafxn] {
        flex-wrap: wrap;
    }

    .tab[b-cttwgyafxn] {
        flex-basis: 50%;
        font-size: 0.75rem;
        padding: 0.75rem 0.5rem;
    }

        .tab.active[b-cttwgyafxn] {
            font-size: 0.875rem;
        }

    .form-grid[b-cttwgyafxn] {
        grid-template-columns: 1fr;
    }

    .form-row[b-cttwgyafxn] {
        flex-direction: column;
        gap: 1rem;
    }

    .half-width[b-cttwgyafxn] {
        width: 100%;
    }

    .settings-row[b-cttwgyafxn] {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .notification-sections[b-cttwgyafxn] {
        grid-template-columns: 1fr;
    }

    .danger-actions[b-cttwgyafxn] {
        flex-direction: column;
        gap: 1rem;
    }

    .modal-content[b-cttwgyafxn] {
        width: 95%;
        max-height: 85vh;
    }

    .bottom-navigation[b-cttwgyafxn] {
        flex-direction: row;
        gap: 1rem;
        text-align: center;
    }
}

@media (max-width: 480px) {
    .edit-profile-page[b-cttwgyafxn] {
        /*padding: 0.5rem;*/
    }

    .tab-navigation[b-cttwgyafxn] {
        flex-wrap: nowrap;
        overflow-x: auto;
    }

    .tab[b-cttwgyafxn] {
        flex: 0 0 auto;
        padding: 0.75rem 1rem;
        white-space: nowrap;
        min-width: 90px;
    }

    .action-buttons[b-cttwgyafxn] {
        flex-direction: row;
        gap: 0.4rem;
        flex-wrap: nowrap;
    }

    .btn[b-cttwgyafxn] {
        width: auto;
        justify-content: center;
    }

    /* Icon-only header buttons on small screens (mirrors EditPet) */
    .action-buttons .header-btn[b-cttwgyafxn] {
        padding: 8px 12px;
        border-radius: 8px;
        font-size: 13px;
        gap: 0;
        display: inline-flex;
        align-items: center;
        width: auto;
    }

        .action-buttons .header-btn .btn-label[b-cttwgyafxn] {
            display: none;
        }

        .action-buttons .header-btn i[b-cttwgyafxn] {
            font-size: 1rem;
        }

    .bottom-navigation .action-button[b-cttwgyafxn] {
        width: 100%;
    }

    .profile-avatar[b-cttwgyafxn] {
        width: 80px;
        height: 80px;
        font-size: 2rem;
    }
}

/* Enhanced focus states for accessibility */
.btn:focus[b-cttwgyafxn],
.form-control:focus[b-cttwgyafxn],
.tab:focus[b-cttwgyafxn],
.toggle-switch input:focus + .toggle-slider[b-cttwgyafxn] {
    outline: 2px solid #3b82f6;
    outline-offset: 2px;
}

/* Improved contrast for better readability */
.notification-option label[b-cttwgyafxn],
.privacy-option label[b-cttwgyafxn] {
    color: #4b5563;
}

/* Better visual hierarchy */
.section-header h2[b-cttwgyafxn] {
    border-bottom: 2px solid #e2e8f0;
    padding-bottom: 0.5rem;
}

/* ── Address Section ──────────────────────────────────────────────── */
.ep-addr-group[b-cttwgyafxn] {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid #e2e8f0;
}

.ep-addr-group-head[b-cttwgyafxn] {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    margin-bottom: 1rem;
}

.ep-addr-group-icon[b-cttwgyafxn] {
    color: #e05c97;
    font-size: 1.1rem;
    margin-top: 2px;
}

.ep-addr-group-title[b-cttwgyafxn] {
    font-weight: 700;
    color: #1e293b;
    font-size: 0.95rem;
    margin: 0;
}

.ep-addr-group-sub[b-cttwgyafxn] {
    font-size: 0.8rem;
    color: #64748b;
    margin-top: 3px;
    line-height: 1.5;
}

.ep-addr-grid[b-cttwgyafxn] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
}

.ep-addr-field-full[b-cttwgyafxn] {
    grid-column: 1 / -1;
}

.ep-addr-optional[b-cttwgyafxn] {
    color: #94a3b8;
    font-size: 0.8em;
    font-weight: 400;
}

.ep-addr-mirror[b-cttwgyafxn] {
    position: absolute !important;
    left: -9999px !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

@media (max-width: 600px) {
    .ep-addr-grid[b-cttwgyafxn] {
        grid-template-columns: 1fr;
    }
}
/* /Pages/AccountPages/ForgotPassword.razor.rz.scp.css */
/* Match LoginPage/RegisterUser layout — image on the left, form on the right,
   transparent card over the landing-layout background. */

[b-8z4q1gmtyg] .form-control {
    border: none;
    background-color: transparent;
    border-bottom: 1px solid rgba(247, 154, 111, 0.3);
    border-radius: 0;
    box-shadow: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    color: #9cd0ff;
}

    [b-8z4q1gmtyg] .form-control:focus {
        background-color: transparent;
        border-bottom: 1px solid #f79a6f;
        box-shadow: 0 2px 0 -1px #f79a6f;
        outline: none;
        color: #9cd0ff;
    }

    [b-8z4q1gmtyg] .form-control:disabled {
        background-color: transparent;
        opacity: 0.65;
    }

    [b-8z4q1gmtyg] .form-control::placeholder {
        color: rgba(156, 208, 255, 0.45);
        opacity: 1;
        font-style: italic;
    }

.form-label[b-8z4q1gmtyg] {
    color: #f79a6f;
}

.card[b-8z4q1gmtyg] {
    border: none;
    border-radius: 10px;
    background: transparent;
}

.card-header[b-8z4q1gmtyg] {
    color: #f79a6f;
    border-radius: 10px 10px 0 0 !important;
}

.text-primary[b-8z4q1gmtyg] {
    color: #cff4fc;
}

.text-link[b-8z4q1gmtyg] {
    color: #f79a6f;
    text-decoration: none;
}

    .text-link:hover[b-8z4q1gmtyg] {
        text-decoration: underline;
        font-weight: bolder;
    }

.text-muted[b-8z4q1gmtyg] {
    color: #8f939a !important;
}

@keyframes fadeIn-b-8z4q1gmtyg {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }

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

.alert[b-8z4q1gmtyg] {
    animation: fadeIn-b-8z4q1gmtyg 0.5s ease-out;
}

/* Success icon keeps its pop-in affordance */
@keyframes popIn-b-8z4q1gmtyg {
    from {
        transform: scale(0.5);
        opacity: 0;
    }

    to {
        transform: scale(1);
        opacity: 1;
    }
}

.fa-envelope-open-text.fa-3x[b-8z4q1gmtyg] {
    animation: popIn-b-8z4q1gmtyg 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
/* /Pages/AccountPages/LoginPage.razor.rz.scp.css */
.login-card[b-fbyxq4lwtr] {
    border-radius: 10px;
    border: 2px solid #fed7aa !important;
    background: white !important;
    border-radius: 10px;
}

.collapsible-field[b-fbyxq4lwtr] {
    overflow: hidden;
    transition: max-height 0.3s ease, opacity 0.25s ease, transform 0.25s ease;
}

    .collapsible-field.is-shown[b-fbyxq4lwtr] {
        max-height: 240px;
        opacity: 1;
        transform: translateY(0);
    }

    .collapsible-field.is-hidden[b-fbyxq4lwtr] {
        max-height: 0;
        opacity: 0;
        transform: translateY(-6px);
        pointer-events: none;
    }

.otp-input[b-fbyxq4lwtr] {
    font-family: 'Courier New', monospace;
    text-align: center;
    letter-spacing: 0.5em;
    font-size: 1.5em;
    font-weight: bold;
    border: 2px solid #ced4da;
    border-radius: 8px;
    padding: 12px;
    transition: border-color 0.3s ease;
}

    .otp-input:focus[b-fbyxq4lwtr] {
        border-color: #28a745;
        box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.25);
    }

.btn-success:hover[b-fbyxq4lwtr] {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.login-method-toggle[b-fbyxq4lwtr] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    border-radius: 10px;
    padding: 1rem;
    margin-bottom: 1rem;
}
/* ::deep is needed because <InputText> is a child component — its rendered <input> doesn't carry this component's scope attribute */
[b-fbyxq4lwtr] .form-control {
    border: none;
    background-color: transparent;
    border-bottom: 1px solid rgba(247, 154, 111, 0.3);
    border-radius: 0;
    box-shadow: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    color: #9cd0ff;
}

    [b-fbyxq4lwtr] .form-control:focus {
        background-color: transparent;
        border-bottom: 1px solid #f79a6f;
        box-shadow: 0 2px 0 -1px #f79a6f;
        outline: none;
        color: #9cd0ff;
    }

    [b-fbyxq4lwtr] .form-control:disabled {
        background-color: #e9ecef;
        opacity: 0.65;
    }

    [b-fbyxq4lwtr] .form-control::placeholder {
        /*color: rgba(247, 154, 111, 0.45);*/
        color: rgba(156, 208, 255, 0.45);
        opacity: 1;
        font-style: italic;
    }

    /* Edge's built-in password reveal (eye) icon — tint to #f79a6f.
       The icon is a masked SVG, so `color` has no effect; filter maps black ? #f79a6f. */
    [b-fbyxq4lwtr] input[type="password"]::-ms-reveal {
        filter: brightness(0) saturate(100%) invert(79%) sepia(18%) saturate(1544%) hue-rotate(326deg) brightness(102%) contrast(93%);
    }
.form-label[b-fbyxq4lwtr] {
    color: #d05a23cf;
}

/* Input-group (e.g., +91 prefix): move the underline to the group so prefix and input share one line */
.input-group[b-fbyxq4lwtr] {
    border-bottom: 1px solid rgba(247, 154, 111, 0.3);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

    .input-group:focus-within[b-fbyxq4lwtr] {
        border-bottom: 1px solid #f79a6f;
        box-shadow: 0 2px 0 -1px #f79a6f;
    }

    .input-group[b-fbyxq4lwtr]  .form-control,
    .input-group .input-group-text[b-fbyxq4lwtr] {
        border-bottom: none;
        box-shadow: none;
    }

        .input-group[b-fbyxq4lwtr]  .form-control:focus {
            border-bottom: none;
            box-shadow: none;
        }

.input-group-text[b-fbyxq4lwtr] {
    background-color: transparent !important;
    border: none;
    border-color: #ced4da;
    /*color: #f79a6f;*/
    color: #0000004f;
}

.card[b-fbyxq4lwtr] {
    /*box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);*/
    border: none;
    border-radius: 10px;
    background: transparent;
}

.card-header[b-fbyxq4lwtr] {
    /*background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);*/
    color: #d05a23cf;
    border-radius: 10px 10px 0 0 !important;
}

.text-primary[b-fbyxq4lwtr] {
    color: #cff4fc;
}

.text-link[b-fbyxq4lwtr] {
    color: #d05a23cf;
    /*font-size: 0.85rem;*/
    /*margin: 0 10px;*/
    text-decoration: none;
    /*transition: color 0.2s;*/
}
    .text-link:hover[b-fbyxq4lwtr] {
        text-decoration: underline;
        font-weight: bolder;
    }

.text-muted[b-fbyxq4lwtr] {
    color: #8f939a !important;
}


@keyframes fadeIn-b-fbyxq4lwtr {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }

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

.alert[b-fbyxq4lwtr] {
    animation: fadeIn-b-fbyxq4lwtr 0.5s ease-out;
}
.login-card-header[b-fbyxq4lwtr] {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.btn-reset-form[b-fbyxq4lwtr] {
    background: none;
    border: none;
    padding: 4px 6px;
    border-radius: 6px;
    color: #f79a6f;
    opacity: 0.7;
    cursor: pointer;
    font-size: 0.95rem;
    line-height: 1;
    transition: opacity 0.2s ease, transform 0.35s ease;
}
    .btn-reset-form:hover[b-fbyxq4lwtr] {
        opacity: 1;
        transform: rotate(-180deg);
    }
    .btn-reset-form:focus-visible[b-fbyxq4lwtr] {
        outline: 2px solid #f79a6f;
        outline-offset: 2px;
    }
/* /Pages/AccountPages/ResetPassword.razor.rz.scp.css */
/* =====================================================
   Shared styles for ForgotPassword.razor and ResetPassword.razor
   Place as ForgotPassword.razor.css and ResetPassword.razor.css
   (identical content — Blazor CSS isolation scopes them automatically)
   ===================================================== */

.auth-page[b-ps290gntfv] {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: linear-gradient(135deg, #f5f7fa 0%, #e8ecf0 100%);
}

.auth-card[b-ps290gntfv] {
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    width: 100%;
    max-width: 440px;
    overflow: hidden;
}

.auth-header[b-ps290gntfv] {
    background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);
    padding: 32px 32px 24px;
    text-align: center;
    color: white;
}

.auth-logo[b-ps290gntfv] {
    font-size: 2.5rem;
    margin-bottom: 8px;
}

.auth-title[b-ps290gntfv] {
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0 0 8px;
}

.auth-subtitle[b-ps290gntfv] {
    font-size: 0.9rem;
    opacity: 0.9;
    margin: 0;
}

.auth-body[b-ps290gntfv] {
    padding: 28px 32px 32px;
}

/* Form */
.form-label[b-ps290gntfv] {
    font-weight: 600;
    font-size: 0.875rem;
    color: #495057;
    margin-bottom: 6px;
    display: block;
}

.form-control[b-ps290gntfv] {
    border-radius: 8px;
    border: 1.5px solid #dee2e6;
    padding: 10px 14px;
    font-size: 0.95rem;
    transition: border-color 0.2s, box-shadow 0.2s;
}

    .form-control:focus[b-ps290gntfv] {
        border-color: #e74c3c;
        box-shadow: 0 0 0 3px rgba(231, 76, 60, 0.12);
    }

    .form-control.is-valid[b-ps290gntfv] {
        border-color: #28a745;
    }

    .form-control.is-invalid[b-ps290gntfv] {
        border-color: #dc3545;
    }

/* Buttons */
.btn-primary[b-ps290gntfv] {
    background: linear-gradient(135deg, #e74c3c, #c0392b);
    border: none;
    border-radius: 8px;
    font-weight: 600;
    padding: 11px 20px;
    font-size: 0.95rem;
    transition: transform 0.15s, box-shadow 0.15s;
}

    .btn-primary:hover:not(:disabled)[b-ps290gntfv] {
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(231, 76, 60, 0.35);
    }

    .btn-primary:disabled[b-ps290gntfv] {
        opacity: 0.6;
        cursor: not-allowed;
    }

.btn-outline-secondary[b-ps290gntfv] {
    border-radius: 8px;
    font-weight: 500;
    padding: 10px 20px;
}

/* Password strength hints */
.password-strength[b-ps290gntfv] {
    background: #f8f9fa;
    border-radius: 6px;
    padding: 8px 10px;
    font-size: 0.8rem;
}

/* Success icon */
.success-icon[b-ps290gntfv] {
    animation: popIn-b-ps290gntfv 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes popIn-b-ps290gntfv {
    from {
        transform: scale(0.5);
        opacity: 0;
    }

    to {
        transform: scale(1);
        opacity: 1;
    }
}

/* Links */
.auth-footer-links a[b-ps290gntfv] {
    text-decoration: none;
}

    .auth-footer-links a:hover[b-ps290gntfv] {
        text-decoration: underline;
    }

/* Alerts */
.alert-danger[b-ps290gntfv] {
    border-radius: 8px;
    font-size: 0.875rem;
    margin-bottom: 16px;
}

/* Mobile */
@media (max-width: 480px) {
    .auth-card[b-ps290gntfv] {
        border-radius: 12px;
        margin: 0 4px;
    }

    .auth-header[b-ps290gntfv] {
        padding: 24px 20px 18px;
    }

    .auth-body[b-ps290gntfv] {
        padding: 20px;
    }
}
/* /Pages/BloodServices/BloodDonorProfile.razor.rz.scp.css */
/* BloodDonorProfileV2 — Claymorphism Warm */

/* ── Page ── */
.bdpv2-page[b-dwspw14ko4] {
    max-width: 1200px;
    margin: 0 auto;
    background: #ffefdba6;
    border: 2px solid #fed7aa;
    border-radius: 10px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    overflow: hidden;
}

.bdpv2-has-sticky[b-dwspw14ko4] {
    padding-bottom: 72px;
}

/* ── Header ── */
.bdpv2-header[b-dwspw14ko4] {
    border-bottom: 2px solid #fed7aa;
}

.bdpv2-header-content[b-dwspw14ko4] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem 1.5rem;
    gap: 1rem;
    flex-wrap: wrap;
}

.bdpv2-header-left[b-dwspw14ko4] {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.bdpv2-back-link[b-dwspw14ko4] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: #92400e;
    cursor: pointer;
    font-size: 0.875rem;
    font-weight: 500;
    transition: color 0.15s;
    background: none;
    border: none;
    padding: 0;
    font-family: inherit;
}
.bdpv2-back-link:hover[b-dwspw14ko4] { color: #f97316; text-decoration: underline; }

.bdpv2-title[b-dwspw14ko4] {
    font-size: 1.6rem;
    font-weight: 700;
    color: #9a3412;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    letter-spacing: -0.01em;
}

.bdpv2-title-icon[b-dwspw14ko4] {
    width: 38px;
    height: 38px;
    background: linear-gradient(135deg, #f97316, #ea580c);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1rem;
    box-shadow: 0 4px 0 #c2410c, 0 6px 14px rgba(249,115,22,0.3);
    flex-shrink: 0;
}

.bdpv2-action-btns[b-dwspw14ko4] {
    display: flex;
    gap: 0.75rem;
    align-items: center;
}

/* Edit — warm outline */
.bdpv2-btn-edit[b-dwspw14ko4] {
    background: #fff7ed;
    color: #78350f;
    border: 1.5px solid #fed7aa;
    border-radius: 12px;
    padding: 0.55rem 1.1rem;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.45rem;
    text-decoration: none;
    box-shadow: 0 3px 0 #fed7aa;
    transition: background 0.15s;
}
.bdpv2-btn-edit:hover[b-dwspw14ko4] { background: #fde8cb; }

/* Send Message — orange clay primary */
.bdpv2-btn-message[b-dwspw14ko4] {
    background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
    border: none;
    color: white;
    padding: 0.55rem 1.1rem;
    border-radius: 12px;
    font-weight: 600;
    font-size: 0.85rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.45rem;
    box-shadow: 0 4px 0 #c2410c, 0 6px 18px rgba(249,115,22,0.35);
    transition: transform 0.15s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.15s ease;
}
.bdpv2-btn-message:hover[b-dwspw14ko4] {
    transform: translateY(-2px);
    box-shadow: 0 6px 0 #c2410c, 0 10px 26px rgba(249,115,22,0.4);
}
.bdpv2-btn-message:active[b-dwspw14ko4] {
    transform: translateY(2px);
    box-shadow: 0 2px 0 #c2410c, 0 4px 10px rgba(249,115,22,0.25);
}

/* ── Loading ── */
.bdpv2-loading[b-dwspw14ko4] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
    gap: 1rem;
    color: #9a3412;
}

.bdpv2-spinner[b-dwspw14ko4] {
    width: 2.75rem;
    height: 2.75rem;
    border: 4px solid #fed7aa;
    border-top-color: #f97316;
    border-radius: 50%;
    animation: bdpv2-spin-b-dwspw14ko4 0.9s linear infinite;
}

@keyframes bdpv2-spin-b-dwspw14ko4 { to { transform: rotate(360deg); } }

/* ── Empty / Error state ── */
.bdpv2-empty-state[b-dwspw14ko4] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
    background: white;
    border: 2px solid #fed7aa;
    border-radius: 1.25rem;
    box-shadow: 0 4px 0 #fed7aa, 0 8px 24px rgba(0,0,0,0.06);
    text-align: center;
    gap: 0.75rem;
    margin: 1.5rem;
}

.bdpv2-empty-icon[b-dwspw14ko4] { font-size: 3.5rem; color: #fdba74; }

.bdpv2-empty-state h4[b-dwspw14ko4] {
    font-size: 1.4rem;
    font-weight: 700;
    color: #9a3412;
    margin: 0;
}

.bdpv2-empty-state p[b-dwspw14ko4] {
    font-size: 0.9rem;
    color: #78350f;
    margin: 0;
    max-width: 380px;
    line-height: 1.6;
    opacity: 0.75;
}

/* ── Primary button (reused: empty state + hero contact + sticky bar) ── */
.bdpv2-btn-primary[b-dwspw14ko4] {
    background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
    border: none;
    color: white;
    padding: 0.65rem 1.5rem;
    border-radius: 12px;
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    box-shadow: 0 4px 0 #c2410c, 0 6px 18px rgba(249,115,22,0.35);
    transition: transform 0.15s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.15s ease;
    text-decoration: none;
}
.bdpv2-btn-primary:hover[b-dwspw14ko4] {
    transform: translateY(-2px);
    box-shadow: 0 6px 0 #c2410c, 0 10px 26px rgba(249,115,22,0.4);
}
.bdpv2-btn-primary:active[b-dwspw14ko4] {
    transform: translateY(2px);
    box-shadow: 0 2px 0 #c2410c, 0 4px 10px rgba(249,115,22,0.25);
}

/* ── Hero card ── */
.bdpv2-hero[b-dwspw14ko4] {
    background: white;
    border-bottom: 1.5px solid #fed7aa;
    display: flex;
    gap: 1.5rem;
    align-items: flex-start;
    padding: 1.5rem;
}

/* ── Left zone ── */
.bdpv2-hero-left[b-dwspw14ko4] {
    flex: 3 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
}

.bdpv2-avatar[b-dwspw14ko4] {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    border: 4px solid white;
    box-shadow: 0 6px 0 rgba(0,0,0,0.1), 0 10px 28px rgba(0,0,0,0.12),
                inset 0 2px 5px rgba(255,255,255,0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
}

.bdpv2-avatar img[b-dwspw14ko4] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.bdpv2-avatar-emoji[b-dwspw14ko4] {
    font-size: 3.5rem;
    line-height: 1;
    user-select: none;
}

.bdpv2-pet-name[b-dwspw14ko4] {
    font-size: 1.6rem;
    font-weight: 700;
    color: #9a3412;
    letter-spacing: -0.01em;
    margin-top: 0.25rem;
}

/* ── Badge row ── */
.bdpv2-badge-row[b-dwspw14ko4] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}

/* All badges share the clay pill base */
.bdpv2-blood-badge[b-dwspw14ko4],
.bdpv2-level-badge[b-dwspw14ko4],
.bdpv2-status-badge[b-dwspw14ko4] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: white;
    border-radius: 40px;
    padding: 4px 11px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.02em;
    border: 1.5px solid;
}

/* Blood type */
.bdpv2-blood-badge[b-dwspw14ko4] {
    color: #dc2626;
    border-color: #fca5a5;
    box-shadow: 0 2px 0 #fca5a5;
}
.bdpv2-blood-badge i[b-dwspw14ko4] { font-size: 9px; }

/* Level */
.bdpv2-level-badge.bronze[b-dwspw14ko4]   { color: #92400e; border-color: #fed7aa;  box-shadow: 0 2px 0 #fed7aa; }
.bdpv2-level-badge.silver[b-dwspw14ko4]   { color: #57534e; border-color: #d6d3d1;  box-shadow: 0 2px 0 #d6d3d1; }
.bdpv2-level-badge.gold[b-dwspw14ko4]     { color: #b45309; border-color: #fcd34d;  box-shadow: 0 2px 0 #fcd34d; }
.bdpv2-level-badge.platinum[b-dwspw14ko4] { color: #7c3aed; border-color: #c4b5fd;  box-shadow: 0 2px 0 #c4b5fd; }

/* Status */
.bdpv2-status-badge.available[b-dwspw14ko4]   { color: #16a34a; border-color: #86efac; box-shadow: 0 2px 0 #86efac; }
.bdpv2-status-badge.unavailable[b-dwspw14ko4] { color: #d97706; border-color: #fcd34d; box-shadow: 0 2px 0 #fcd34d; }
.bdpv2-status-badge i[b-dwspw14ko4] { font-size: 7px; }

/* Meta line */
.bdpv2-meta[b-dwspw14ko4] {
    font-size: 0.85rem;
    color: #92400e;
    margin: 0;
    opacity: 0.85;
}

/* ── Right zone ── */
.bdpv2-hero-right[b-dwspw14ko4] {
    flex: 2 1 0;
    min-width: 0;
    background: #fff7ed;
    border: 1px solid #fde8cb;
    border-radius: 10px;
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

/* Stats 2×2 grid */
.bdpv2-stats-grid[b-dwspw14ko4] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.65rem;
}

.bdpv2-stat-box[b-dwspw14ko4] {
    background: white;
    border: 1.5px solid #fed7aa;
    border-radius: 12px;
    box-shadow: 0 3px 0 #fed7aa;
    padding: 0.875rem 0.5rem;
    text-align: center;
}

.bdpv2-stat-value[b-dwspw14ko4] {
    font-size: 1.5rem;
    font-weight: 700;
    color: #1c1917;
    line-height: 1.2;
}

.bdpv2-stat-label[b-dwspw14ko4] {
    font-size: 0.7rem;
    font-weight: 700;
    color: #92400e;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-top: 2px;
}

/* Eligibility chip */
.bdpv2-eligibility-chip[b-dwspw14ko4] {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 40px;
    padding: 0.4rem 0.9rem;
    font-size: 0.82rem;
    font-weight: 600;
    border: 1.5px solid;
    text-align: center;
}
.bdpv2-eligibility-chip.eligible[b-dwspw14ko4] {
    color: #059669;
    border-color: #86efac;
    box-shadow: 0 2px 0 #86efac;
}
.bdpv2-eligibility-chip.recovery[b-dwspw14ko4] {
    color: #d97706;
    border-color: #fcd34d;
    box-shadow: 0 2px 0 #fcd34d;
}

/* Full-width contact button inside right zone */
.bdpv2-btn-contact[b-dwspw14ko4] {
    width: 100%;
    justify-content: center;
}

/* ── Cards grid ── */
.bdpv2-cards-grid[b-dwspw14ko4] {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

/* ── Card ── */
.bdpv2-card[b-dwspw14ko4] {
    background: white;
    border: 1px solid #fde8cb;
    border-top: none;
    padding: 1.5rem;
}
.bdpv2-card:nth-child(odd)[b-dwspw14ko4] {
    border-right: 1px solid #fde8cb;
}

/* ── Card header ── */
.bdpv2-card-header[b-dwspw14ko4] {
    font-size: 1rem;
    font-weight: 700;
    color: #9a3412;
    margin: 0 0 1rem 0;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid #fde8cb;
    display: flex;
    align-items: center;
    gap: 0.6rem;
}
.bdpv2-card-header i[b-dwspw14ko4] { color: #f87171; }

/* ── Info rows ── */
.bdpv2-info-row[b-dwspw14ko4] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 0.65rem 0;
    border-bottom: 1px solid #fde8cb;
    gap: 1rem;
}
.bdpv2-info-rows > .bdpv2-info-row:last-child[b-dwspw14ko4] { border-bottom: none; }

.bdpv2-info-label[b-dwspw14ko4] {
    font-size: 0.85rem;
    color: #92400e;
    flex-shrink: 0;
}

.bdpv2-info-value[b-dwspw14ko4] {
    font-size: 0.9rem;
    color: #1c1917;
    font-weight: 500;
    text-align: right;
}

/* ── Dashed divider ── */
.bdpv2-divider[b-dwspw14ko4] {
    border-top: 1.5px dashed #fde8cb;
    margin: 0.75rem 0;
}

/* ── Inline status indicators ── */
.bdpv2-status[b-dwspw14ko4] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.875rem;
}
.bdpv2-status.success[b-dwspw14ko4] { color: #16a34a; }
.bdpv2-status.warning[b-dwspw14ko4] { color: #d97706; }
.bdpv2-status.error[b-dwspw14ko4]   { color: #dc2626; }
.bdpv2-status.neutral[b-dwspw14ko4] { color: #92400e; }

/* ── Inline eligibility pill (Next Eligible date cell) ── */
.bdpv2-inline-pill[b-dwspw14ko4] {
    display: inline-flex;
    align-items: center;
    border-radius: 40px;
    padding: 2px 10px;
    font-size: 0.78rem;
    font-weight: 700;
    border: 1.5px solid;
}
.bdpv2-inline-pill.eligible[b-dwspw14ko4] { color: #059669; border-color: #86efac; box-shadow: 0 2px 0 #86efac; }
.bdpv2-inline-pill.recovery[b-dwspw14ko4] { color: #d97706; border-color: #fcd34d; box-shadow: 0 2px 0 #fcd34d; }

/* ── Guardian mini-card ── */
.bdpv2-guardian-card[b-dwspw14ko4] {
    background: #fff7ed;
    border: 1px solid #fde8cb;
    border-radius: 10px;
    padding: 0.875rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.bdpv2-guardian-avatar[b-dwspw14ko4] {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #fed7aa;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border: 2px solid white;
    box-shadow: 0 2px 0 #fed7aa;
}
.bdpv2-guardian-avatar i[b-dwspw14ko4] { color: #f97316; font-size: 1.1rem; }

.bdpv2-guardian-info[b-dwspw14ko4] { flex: 1; min-width: 0; }

.bdpv2-guardian-name[b-dwspw14ko4] {
    font-size: 0.9rem;
    font-weight: 700;
    color: #1c1917;
    margin-bottom: 3px;
}

.bdpv2-guardian-detail[b-dwspw14ko4] {
    font-size: 0.82rem;
    color: #92400e;
    display: flex;
    align-items: center;
    gap: 5px;
    margin-top: 2px;
}
.bdpv2-guardian-detail i[b-dwspw14ko4] { font-size: 0.7rem; color: #fdba74; width: 12px; }

/* ── History card (full width) ── */
.bdpv2-history-card[b-dwspw14ko4] {
    grid-column: 1 / -1;
    border-right: none; /* cancels nth-child(odd) border-right from .bdpv2-card rule */
}

.bdpv2-history-summary[b-dwspw14ko4] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 2rem 1rem;
    gap: 0.6rem;
}

.bdpv2-history-emoji[b-dwspw14ko4] { font-size: 2.5rem; line-height: 1; }

.bdpv2-history-summary p[b-dwspw14ko4] {
    font-size: 0.9rem;
    color: #78350f;
    margin: 0;
    line-height: 1.6;
}

.bdpv2-history-sub[b-dwspw14ko4] {
    color: #92400e !important;
    font-size: 0.82rem !important;
    opacity: 0.75;
}

.bdpv2-stat-chip[b-dwspw14ko4] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: #d97706;
    border: 1.5px solid #fcd34d;
    border-radius: 40px;
    padding: 3px 12px;
    font-size: 0.78rem;
    font-weight: 700;
    box-shadow: 0 2px 0 #fcd34d;
    background: white;
}

/* ── Sticky bottom bar ── */
.bdpv2-sticky-bar[b-dwspw14ko4] {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 100;
    background: white;
    border-top: 2px solid #fed7aa;
    box-shadow: 0 -4px 0 #fed7aa;
    padding: 0.875rem 1.5rem;
}

.bdpv2-sticky-inner[b-dwspw14ko4] {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.bdpv2-sticky-text[b-dwspw14ko4] {
    font-size: 0.9rem;
    color: #78350f;
    font-weight: 500;
}

/* ── 2-col info tiles ── */
.bdpv2-info-tiles[b-dwspw14ko4] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.65rem;
    margin-bottom: 0.75rem;
}

.bdpv2-info-tile[b-dwspw14ko4] {
    background: #fff7ed;
    border: 1.5px solid #fde8cb;
    border-radius: 10px;
    padding: 0.65rem 0.75rem;
    box-shadow: 0 2px 0 #fde8cb;
}

.bdpv2-info-tile-label[b-dwspw14ko4] {
    font-size: 0.7rem;
    font-weight: 700;
    color: #92400e;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 3px;
}

.bdpv2-info-tile-value[b-dwspw14ko4] {
    font-size: 0.95rem;
    font-weight: 600;
    color: #1c1917;
}

/* ── 2×2 status chip grid ── */
.bdpv2-status-chips[b-dwspw14ko4] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.bdpv2-status-chip[b-dwspw14ko4] {
    display: flex;
    align-items: center;
    gap: 5px;
    background: white;
    border: 1.5px solid;
    border-radius: 10px;
    padding: 0.5rem 0.65rem;
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1.3;
}

.bdpv2-status-chip i[b-dwspw14ko4] { font-size: 0.7rem; flex-shrink: 0; }

.bdpv2-status-chip.success[b-dwspw14ko4] { color: #16a34a; border-color: #86efac; box-shadow: 0 2px 0 #86efac; }
.bdpv2-status-chip.warning[b-dwspw14ko4] { color: #d97706; border-color: #fcd34d; box-shadow: 0 2px 0 #fcd34d; }
.bdpv2-status-chip.error[b-dwspw14ko4]   { color: #dc2626; border-color: #fca5a5; box-shadow: 0 2px 0 #fca5a5; }
.bdpv2-status-chip.neutral[b-dwspw14ko4] { color: #92400e; border-color: #fed7aa; box-shadow: 0 2px 0 #fed7aa; }

/* ============================================================
   RESPONSIVE
   ============================================================ */

/* Tablet (≤1024px) — cards stay 2-col, hero slightly compressed */
@media (max-width: 1024px) {
    .bdpv2-stat-value[b-dwspw14ko4] { font-size: 1.3rem; }
}

/* Tablet portrait (≤768px) — hero stacks, cards single column */
@media (max-width: 768px) {
    .bdpv2-sticky-bar[b-dwspw14ko4] { bottom: 62px; }
    .bdpv2-has-sticky[b-dwspw14ko4] { padding-bottom: 134px; }

    .bdpv2-hero[b-dwspw14ko4] {
        flex-direction: column;
        align-items: center;
    }

    .bdpv2-hero-left[b-dwspw14ko4] {
        align-items: center;
        text-align: center;
    }

    .bdpv2-badge-row[b-dwspw14ko4] { justify-content: center; }

    .bdpv2-hero-right[b-dwspw14ko4] { width: 100%; }

    .bdpv2-stats-grid[b-dwspw14ko4] { grid-template-columns: repeat(4, 1fr); }

    .bdpv2-cards-grid[b-dwspw14ko4] { grid-template-columns: 1fr; }

    .bdpv2-card:nth-child(odd)[b-dwspw14ko4] { border-right: none; }

    .bdpv2-info-value[b-dwspw14ko4] { text-align: left; }

    .bdpv2-header-content[b-dwspw14ko4] {
        padding: 0.875rem 1rem;
        flex-wrap: nowrap;
    }
    .bdpv2-header-left[b-dwspw14ko4] { flex: 1 1 auto; min-width: 0; }
    .bdpv2-title[b-dwspw14ko4] { font-size: 1.2rem; }
    .bdpv2-btn-message[b-dwspw14ko4] { padding: 0.45rem 0.85rem; font-size: 0.75rem; flex-shrink: 0; }
    .bdpv2-btn-edit[b-dwspw14ko4]    { padding: 0.45rem 0.85rem; font-size: 0.75rem; flex-shrink: 0; }

    .bdpv2-sticky-text[b-dwspw14ko4] { font-size: 0.82rem; }
}

/* Mobile (≤480px) */
@media (max-width: 480px) {
    .bdpv2-page[b-dwspw14ko4] { border-radius: 0; }

    .bdpv2-avatar[b-dwspw14ko4] { width: 88px; height: 88px; }
    .bdpv2-avatar-emoji[b-dwspw14ko4] { font-size: 2.75rem; }
    .bdpv2-pet-name[b-dwspw14ko4] { font-size: 1.25rem; }

    .bdpv2-stats-grid[b-dwspw14ko4] { grid-template-columns: repeat(2, 1fr); }
    .bdpv2-stat-value[b-dwspw14ko4] { font-size: 1.25rem; }
    .bdpv2-stat-label[b-dwspw14ko4] { font-size: 0.65rem; }

    .bdpv2-info-row[b-dwspw14ko4] {
        flex-direction: column;
        gap: 3px;
        align-items: flex-start;
    }
    .bdpv2-info-value[b-dwspw14ko4] { text-align: left; }

    .bdpv2-card[b-dwspw14ko4] { padding: 1rem; }

    .bdpv2-sticky-inner[b-dwspw14ko4] { gap: 0.5rem; }
    .bdpv2-sticky-text[b-dwspw14ko4] { display: none; }
    .bdpv2-btn-primary[b-dwspw14ko4] { width: 100%; justify-content: center; }
}

/* Small mobile (≤360px) */
@media (max-width: 360px) {
    .bdpv2-avatar[b-dwspw14ko4] { width: 72px; height: 72px; }
    .bdpv2-pet-name[b-dwspw14ko4] { font-size: 1.1rem; }
    .bdpv2-title[b-dwspw14ko4] { font-size: 1.1rem; }

    .bdpv2-stats-grid[b-dwspw14ko4] { grid-template-columns: repeat(4, 1fr); }
    .bdpv2-stat-box[b-dwspw14ko4] { padding: 0.5rem 0.25rem; }
    .bdpv2-stat-value[b-dwspw14ko4] { font-size: 1rem; }
    .bdpv2-stat-label[b-dwspw14ko4] { font-size: 0.6rem; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .bdpv2-spinner[b-dwspw14ko4] { animation: none; }
    .bdpv2-btn-primary[b-dwspw14ko4],
    .bdpv2-btn-message[b-dwspw14ko4],
    .bdpv2-btn-edit[b-dwspw14ko4] { transition: none; }
}

/* Focus rings */
.bdpv2-btn-primary:focus[b-dwspw14ko4],
.bdpv2-btn-message:focus[b-dwspw14ko4],
.bdpv2-btn-edit:focus[b-dwspw14ko4],
.bdpv2-back-link:focus[b-dwspw14ko4] {
    outline: 2px solid #f97316;
    outline-offset: 2px;
}
/* /Pages/BloodServices/BloodDonorsIndex.razor.rz.scp.css */
/* =====================================================
   BloodDonorsIndex.razor.css
   Scoped styles for Blood Donors listing page
   Fully responsive - no data hidden on smaller screens
   ===================================================== */

/* Page Container */
.blood-donors-page[b-lufsciibcc] {
    max-width: 1200px;
    margin: 0 auto;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    overflow: hidden;
    border-radius: 10px;
    border: 2px solid #fed7aa;
}

/* =====================================================
   HEADER SECTION
   ===================================================== */
.page-header[b-lufsciibcc] {
    background: #ffefdba6;
    border-bottom: 2px solid #fed7aa;
    margin-bottom: 0;
}

.header-content[b-lufsciibcc] {
    padding: 1.25rem 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
}

.header-left[b-lufsciibcc] {
    flex: 0 0 auto;
}

.header-title[b-lufsciibcc] {
    font-size: 1.6rem;
    font-weight: 700;
    color: #9a3412;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    letter-spacing: -0.01em;
}

    .header-title i[b-lufsciibcc] {
        color: #f87171;
    }

.header-subtitle[b-lufsciibcc] {
    font-size: 0.85rem;
    color: #78350f;
    opacity: 0.75;
    display: flex;
    align-items: center;
    gap: 8px;
}

.breadcrumb-nav[b-lufsciibcc] {
    display: flex;
    gap: 8px;
    font-size: 13px;
}

    .breadcrumb-nav a[b-lufsciibcc] {
        color: #93c5fd;
        text-decoration: none;
    }

        .breadcrumb-nav a:hover[b-lufsciibcc] {
            text-decoration: underline;
        }

    .breadcrumb-nav span[b-lufsciibcc] {
        color: #bfdbfe;
    }

/* Add Donor Button */
.btn-add-donor[b-lufsciibcc] {
    background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
    border: none;
    color: white;
    padding: 0.6rem 1.3rem;
    border-radius: 12px;
    font-weight: 600;
    font-size: 0.85rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.45rem;
    text-decoration: none;
    box-shadow: 0 4px 0 #c2410c, 0 6px 18px rgba(249,115,22,0.35);
    transition: transform 0.15s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.15s ease;
}

    .btn-add-donor:hover[b-lufsciibcc] {
        transform: translateY(-2px);
        box-shadow: 0 6px 0 #c2410c, 0 10px 26px rgba(249,115,22,0.4);
    }

    .btn-add-donor:active[b-lufsciibcc] {
        transform: translateY(2px);
        box-shadow: 0 2px 0 #c2410c, 0 4px 10px rgba(249,115,22,0.25);
    }

/* Content Area */
.content-area[b-lufsciibcc] {
    padding: 20px;
    background-color: transparent;
}
/* =====================================================
   TAB NAVIGATION
   ===================================================== */
.tab-navigation[b-lufsciibcc] {
    display: flex;
    background-color: #fffcf8;
    border-bottom: 1px solid #e8ddd2;
    border-top: none;
}

.tab[b-lufsciibcc] {
    padding: 1rem 1.5rem;
    flex: 1;
    text-align: center;
    font-weight: 500;
    font-size: 14px;
    color: #8a7260;
    cursor: pointer;
    background-color: #faf5ee;
    transition: all 0.2s ease;
    border-right: 1px solid #e8ddd2;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

    .tab:last-child[b-lufsciibcc] {
        border-right: none;
    }

    .tab.active[b-lufsciibcc] {
        background-color: #fff7ed;
        color: #ea580c;
        font-weight: 600;
        border-bottom: 2px solid #f97316;
    }

    .tab:hover:not(.active)[b-lufsciibcc] {
        background-color: #f0e8dc;
    }

    .tab i[b-lufsciibcc] {
        font-size: 14px;
    }

    .tab .count[b-lufsciibcc] {
        background: #ecdfd3;
        padding: 2px 8px;
        border-radius: 10px;
        font-size: 12px;
        margin-left: 4px;
    }

    .tab.active .count[b-lufsciibcc] {
        background: #f97316;
        color: white;
    }

/* =====================================================
   FILTER SECTION
   ===================================================== */
.filter-card[b-lufsciibcc] {
    background: #fffcf8;
    padding: 20px 25px;
    box-shadow: 0 5px 15px rgba(100, 50, 20, 0.06);
    border-bottom: 1px solid #e8ddd2;
    border-top: none;
}

.filter-row[b-lufsciibcc] {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
    align-items: center;
}

.search-box[b-lufsciibcc] {
    flex: 1;
    min-width: 280px;
    position: relative;
}

    .search-box input[b-lufsciibcc] {
        width: 100%;
        padding: 12px 15px 12px 45px;
        border: 2px solid #e0d4c8;
        border-radius: 10px;
        font-size: 14px;
        transition: all 0.3s ease;
        background: #faf6f1;
    }

        .search-box input:focus[b-lufsciibcc] {
            border-color: #0d9488;
            outline: none;
            box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.12);
        }

        .search-box input[b-lufsciibcc]::placeholder {
            color: #b0988a;
        }

    .search-box i[b-lufsciibcc] {
        position: absolute;
        left: 16px;
        top: 50%;
        transform: translateY(-50%);
        color: #8a7260;
    }

.filter-select[b-lufsciibcc] {
    padding: 12px 16px;
    border: 2px solid #e0d4c8;
    border-radius: 10px;
    font-size: 14px;
    background: #faf6f1;
    min-width: 160px;
    cursor: pointer;
    color: #2d1a0e;
}

    .filter-select:focus[b-lufsciibcc] {
        border-color: #0d9488;
        outline: none;
    }

/* =====================================================
   DONOR LIST - DESKTOP (Grid Layout)
   ===================================================== */
.donor-list[b-lufsciibcc] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.donor-item[b-lufsciibcc] {
    display: grid;
    grid-template-columns: 200px 110px 70px 120px 110px 170px;
    justify-content: space-between;
    align-items: center;
    padding: 14px 20px;
    background: white;
    border: 1.5px solid #fed7aa;
    border-radius: 14px;
    box-shadow: 0 2px 0 #fed7aa, 0 6px 20px rgb(21 14 14 / 26%);
    transition: transform 0.18s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.18s ease, border-color 0.18s ease;
}

    .donor-item:hover[b-lufsciibcc] {
        transform: translateY(-3px);
        border-color: #fdba74;
        box-shadow: 0 7px 0 #fed7aa, 0 14px 28px rgba(249,115,22,0.1);
    }

/* Pet Info */
.pet-info[b-lufsciibcc] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.donor-avatar[b-lufsciibcc] {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    flex-shrink: 0;
    /*border: 2.5px solid white;*/
    /*box-shadow: 0 4px 0 #d97706, 0 6px 14px rgba(245,158,11,0.25);*/
}

.donor-details[b-lufsciibcc] {
    min-width: 0;
}

.donor-name[b-lufsciibcc] {
    font-size: 14px;
    font-weight: 700;
    color: #1c1917;
    margin-bottom: 3px;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.donor-meta[b-lufsciibcc] {
    font-size: 11px;
    color: #92400e;
    opacity: 0.8;
}

/* Level Badge — pill style matching V3 spoke chips */
.level-badge[b-lufsciibcc] {
    padding: 2px 8px;
    border-radius: 40px;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.02em;
    border: 1.5px solid;
    box-shadow: 0 2px 0;
}

    .level-badge.bronze[b-lufsciibcc] {
        background: white;
        color: #92400e;
        border-color: #fed7aa;
        box-shadow: 0 2px 0 #fed7aa;
    }

    .level-badge.silver[b-lufsciibcc] {
        background: white;
        color: #57534e;
        border-color: #d6d3d1;
        box-shadow: 0 2px 0 #d6d3d1;
    }

    .level-badge.gold[b-lufsciibcc] {
        background: white;
        color: #b45309;
        border-color: #fcd34d;
        box-shadow: 0 2px 0 #fcd34d;
    }

    .level-badge.platinum[b-lufsciibcc] {
        background: white;
        color: #7c3aed;
        border-color: #c4b5fd;
        box-shadow: 0 2px 0 #c4b5fd;
    }

/* Blood Type Badge */
.blood-badge[b-lufsciibcc] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: white;
    color: #dc2626;
    border: 1.5px solid #fca5a5;
    padding: 4px 11px;
    border-radius: 40px;
    font-weight: 700;
    font-size: 11px;
    box-shadow: 0 2px 0 #fca5a5;
}

    .blood-badge i[b-lufsciibcc] {
        font-size: 9px;
    }

/* Weight */
.donor-weight[b-lufsciibcc] {
    font-size: 13px;
    color: #78350f;
    font-weight: 600;
}

.meta-weight-inline[b-lufsciibcc] { display: none; }

/* Donation Stats */
.donor-stats[b-lufsciibcc] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

    .donor-stats span[b-lufsciibcc] {
        font-size: 11px;
        color: #92400e;
        opacity: 0.85;
    }

    .donor-stats strong[b-lufsciibcc] {
        color: #1c1917;
        font-weight: 700;
    }

/* Status Badge */
.status-badge[b-lufsciibcc] {
    padding: 5px 12px;
    border-radius: 40px;
    font-size: 11px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    justify-content: center;
    border: 1.5px solid;
}

    .status-badge.available[b-lufsciibcc] {
        background: white;
        color: #16a34a;
        border-color: #86efac;
        box-shadow: 0 2px 0 #86efac;
    }

    .status-badge.unavailable[b-lufsciibcc] {
        background: white;
        color: #d97706;
        border-color: #fcd34d;
        box-shadow: 0 2px 0 #fcd34d;
    }

    .status-badge i[b-lufsciibcc] {
        font-size: 7px;
    }

/* Action Buttons */
.action-btns[b-lufsciibcc] {
    display: flex;
    gap: 8px;
}

.action-btn[b-lufsciibcc] {
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.15s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.15s ease;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 5px;
    border: 1.5px solid;
}

    .action-btn.view[b-lufsciibcc] {
        background: white;
        color: #78350f;
        border-color: #fed7aa;
        box-shadow: 0 3px 0 #fed7aa;
    }

        .action-btn.view:hover[b-lufsciibcc] {
            transform: translateY(-1px);
            box-shadow: 0 4px 0 #fed7aa, 0 6px 12px rgba(249,115,22,0.1);
        }

    .action-btn.contact[b-lufsciibcc] {
        background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
        color: white;
        border-color: transparent;
        box-shadow: 0 3px 0 #c2410c, 0 5px 14px rgba(249,115,22,0.3);
    }

        .action-btn.contact:hover[b-lufsciibcc] {
            transform: translateY(-1px);
            box-shadow: 0 5px 0 #c2410c, 0 8px 20px rgba(249,115,22,0.4);
        }

        .action-btn.contact:active[b-lufsciibcc] {
            transform: translateY(1px);
            box-shadow: 0 2px 0 #c2410c;
        }

/* =====================================================
   LOADING & EMPTY STATES
   ===================================================== */
.loading-state[b-lufsciibcc] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    background: #fffcf8;
    border-radius: 12px;
    border: 1px solid #e8ddd2;
}

    .loading-state p[b-lufsciibcc] {
        margin-top: 15px;
        color: #8a7260;
    }

.empty-state[b-lufsciibcc] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    background: #fffcf8;
    border-radius: 12px;
    border: 1px solid #e8ddd2;
    text-align: center;
}

    .empty-state i[b-lufsciibcc] {
        font-size: 48px;
        color: #d4c0b0;
        margin-bottom: 15px;
    }

    .empty-state p[b-lufsciibcc] {
        color: #8a7260;
        margin-bottom: 20px;
    }

/* =====================================================
   PAGINATION
   ===================================================== */
.pagination[b-lufsciibcc] {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 25px;
    flex-wrap: wrap;
}

.page-item[b-lufsciibcc] {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: #fffcf8;
    border: 1px solid #e8ddd2;
    color: #8a7260;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

    .page-item:hover[b-lufsciibcc] {
        background: #faf0e6;
        border-color: #d4c0b0;
    }

    .page-item.active[b-lufsciibcc] {
        background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
        border-color: transparent;
        color: white;
        box-shadow: 0 3px 0 #c2410c;
    }

/* =====================================================
   STATUS BAR
   ===================================================== */
.status-bar[b-lufsciibcc] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    background: #faf5ee;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    font-size: 13px;
    color: #8a7260;
}

/* =====================================================
   RESPONSIVE - TABLET (max-width: 1024px)
   Using card layout instead of grid to show all data
   ===================================================== */
@media (max-width: 1024px) {
    .donor-item[b-lufsciibcc] {
        grid-template-columns: 1fr auto;
        grid-template-rows: auto auto auto;
        gap: 12px;
        padding: 16px;
    }

    .pet-info[b-lufsciibcc] {
        grid-column: 1;
        grid-row: 1;
    }

    .blood-badge[b-lufsciibcc] {
        grid-column: 2;
        grid-row: 1;
        justify-self: end;
    }

    .donor-weight[b-lufsciibcc] {
        grid-column: 1;
        grid-row: 2;
    }

    .donor-stats[b-lufsciibcc] {
        grid-column: 2;
        grid-row: 2;
        flex-direction: row;
        gap: 15px;
        justify-self: end;
    }

    .status-badge[b-lufsciibcc] {
        grid-column: 1;
        grid-row: 3;
    }

    .action-btns[b-lufsciibcc] {
        grid-column: 2;
        grid-row: 3;
        justify-self: end;
    }

    .filter-row[b-lufsciibcc] {
        flex-direction: column;
    }

    .search-box[b-lufsciibcc],
    .filter-select[b-lufsciibcc] {
        width: 100%;
        min-width: unset;
    }
}

/* =====================================================
   RESPONSIVE - MOBILE (max-width: 768px)
   Full card layout with all data visible
   ===================================================== */
@media (max-width: 768px) {
    .blood-donors-page[b-lufsciibcc] {
        border-radius: 0px;
    }
    /* Header — keep title + button on same row */
    .header-content[b-lufsciibcc] {
        flex-direction: row;
        align-items: center;
        padding: 12px 15px;
        gap: 10px;
        flex-wrap: nowrap;
    }

    .header-left[b-lufsciibcc] {
        flex: 1 1 auto;
        min-width: 0;
    }

    .header-title[b-lufsciibcc] {
        font-size: 18px;
        margin-bottom: 2px;
    }

    .btn-add-donor[b-lufsciibcc] {
        flex-shrink: 0;
        padding: 0.45rem 0.85rem;
        font-size: 0.75rem;
        white-space: nowrap;
    }

    /* Tab Navigation - 2×2 grid with labels */
    .tab-navigation[b-lufsciibcc] {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .tab[b-lufsciibcc] {
        padding: 10px 8px;
        font-size: 12px;
        flex-direction: column;
        gap: 3px;
        border-right: 1px solid #e8ddd2;
        border-bottom: 1px solid #e8ddd2;
    }

        .tab:nth-child(2)[b-lufsciibcc],
        .tab:nth-child(4)[b-lufsciibcc] {
            /*border-right: none;*/
        }

        .tab:nth-child(3)[b-lufsciibcc],
        .tab:nth-child(4)[b-lufsciibcc] {
            border-bottom: none;
        }

        .tab .tab-text[b-lufsciibcc] {
            font-size: 11px;
        }

        .tab .count[b-lufsciibcc] {
            margin-left: 0;
            margin-top: 1px;
        }

    /* Filter — search full-width, selects in one row */
    .filter-card[b-lufsciibcc] {
        padding: 12px 15px;
    }

    .filter-row[b-lufsciibcc] {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 8px;
    }

    .search-box[b-lufsciibcc] {
        flex: 0 0 100%;
        min-width: unset;
    }

    .filter-select[b-lufsciibcc] {
        flex: 1 1 calc(50% - 4px);
        min-width: 0;
        padding: 9px 8px;
        font-size: 12px;
    }

    /* Donor Card — compact 2-column grid */
    .donor-item[b-lufsciibcc] {
        display: grid;
        grid-template-columns: 1fr auto;
        grid-template-rows: auto auto auto;
        gap: 6px 10px;
        padding: 11px 12px;
        position: relative;
    }

    .pet-info[b-lufsciibcc] {
        grid-column: 1;
        grid-row: 1;
    }

    .blood-badge[b-lufsciibcc] {
        position: absolute;
        right: 12px;
        top: 11px;
        font-size: 11px;
        padding: 4px 9px;
    }

    .donor-avatar[b-lufsciibcc] {
        width: 40px;
        height: 40px;
        font-size: 18px;
        align-self: center;
    }

    .donor-details[b-lufsciibcc] {
        min-width: 0;
        overflow: hidden;
    }

    .donor-name[b-lufsciibcc] {
        font-size: 13px;
        flex-wrap: nowrap;
        overflow: hidden;
    }

    .donor-meta[b-lufsciibcc] {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: 11px;
    }

    /* Row 2: weight (left) — stats (right) */
    .donor-weight[b-lufsciibcc] {
        grid-column: 1;
        grid-row: 2;
        font-size: 12px;
        align-self: center;
    }

    .donor-stats[b-lufsciibcc] {
        grid-column: 2;
        grid-row: 2;
        flex-direction: column;
        gap: 2px;
        justify-self: end;
        align-self: center;
        white-space: nowrap;
    }

        .donor-stats span[b-lufsciibcc] {
            font-size: 11px;
            white-space: nowrap;
        }

    /* Row 3: status (left) — action buttons (right) */
    .status-badge[b-lufsciibcc] {
        grid-column: 1;
        grid-row: 3;
        font-size: 10px;
        padding: 4px 10px;
        align-self: center;
        justify-self: start;
    }

    .action-btns[b-lufsciibcc] {
        grid-column: 2;
        grid-row: 3;
        width: auto;
        justify-self: end;
        gap: 5px;
    }

    .action-btn[b-lufsciibcc] {
        flex: 0 0 auto;
        width: 30px;
        height: 30px;
        padding: 0;
        justify-content: center;
        border-radius: 6px;
    }

    .action-btn .btn-text[b-lufsciibcc] {
        display: none;
    }

    /* Status Bar */
    .status-bar[b-lufsciibcc] {
        flex-direction: column;
        gap: 5px;
        text-align: center;
        font-size: 12px;
    }
}

/* =====================================================
   RESPONSIVE - SMALL MOBILE (max-width: 480px)
   ===================================================== */
@media (max-width: 480px) {
    .blood-donors-page[b-lufsciibcc] {
        border-radius:0px;
    }
    .header-title[b-lufsciibcc] {
        font-size: 1.2rem;
    }

        .header-title i[b-lufsciibcc] {
            font-size: 1rem;
        }

    .breadcrumb-nav[b-lufsciibcc] {
        font-size: 11px;
    }

    /* Tab Navigation — keep 2×2 grid, show labels */
    .tab-navigation[b-lufsciibcc] {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
        overflow-x: unset;
    }

    .tab[b-lufsciibcc] {
        flex: unset;
        min-width: unset;
        padding: 8px 6px;
        flex-direction: column;
        gap: 2px;
        border-bottom: 1px solid #e8ddd2;
    }

        .tab .tab-text[b-lufsciibcc] {
            display: block;
            font-size: 10px;
        }

        .tab i[b-lufsciibcc] {
            font-size: 12px;
        }

    /* Filter selects — 2 per row on very narrow screens */
    .filter-select[b-lufsciibcc] {
        flex: 1 1 calc(50% - 4px);
    }

    /* ── Donor Card — 3-col 4-row layout ──
       Col:  [42px avatar] [1fr content] [auto status/actions]
       Row 1: avatar (rows 1-2) | Whiskoo [Bronze]                  | [● Available]
       Row 2: avatar            | 🩸 DEA 1.1+ plain text (cols 2-3) |
       ── separator line (border-top on meta + action-btns) ───────────────
       Row 3: Indian pariah • 4 yrs • 20 kg (cols 1-2)        | CTAs (rows 3-4)
       Row 4: 0 donations  0 points (cols 1-2)                 | CTAs (cont)
       ──────────────────────────────────────── */
    .pet-info[b-lufsciibcc]    { display: contents; }
    .donor-details[b-lufsciibcc] { display: contents; }

    .donor-item[b-lufsciibcc] {
        display: grid;
        grid-template-columns: 42px 1fr auto;
        grid-template-rows: auto auto auto auto;
        column-gap: 6px;
        row-gap: 3px;
        padding: 13px 14px;
        position: static;
        border-radius: 16px;
        touch-action: manipulation;
        transition: transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1),
                    box-shadow 0.15s ease;
    }

    .donor-item:active[b-lufsciibcc] {
        transform: scale(0.975);
        box-shadow: 0 2px 0 #fed7aa, 0 4px 10px rgba(0,0,0,0.06);
    }

    /* Avatar spans rows 1-2 (name + blood badge) */
    .donor-avatar[b-lufsciibcc] {
        grid-column: 1;
        grid-row: 1 / 3;
        align-self: center;
        width: 42px;
        height: 42px;
        font-size: 19px;
        border-radius: 11px;
    }

    /* Row 1 col 2: Whiskoo + Bronze */
    .donor-name[b-lufsciibcc] {
        grid-column: 2;
        grid-row: 1;
        align-self: end;
        font-size: 13px;
        font-weight: 700;
        min-width: 0;
        flex-wrap: nowrap;
        overflow: hidden;
        margin-bottom: 0;
    }

    .level-badge[b-lufsciibcc] {
        font-size: 9px;
        padding: 2px 7px;
        flex-shrink: 0;
    }

    /* Row 1 col 3: ● Available */
    .status-badge[b-lufsciibcc] {
        grid-column: 3;
        grid-row: 1;
        align-self: end;
        justify-self: end;
        font-size: 10px;
        padding: 3px 9px;
        white-space: nowrap;
    }

    /* Row 2 cols 2-3: blood type as plain text, no badge */
    .blood-badge[b-lufsciibcc] {
        grid-column: 2 / -1;
        grid-row: 2;
        display: inline-flex;
        align-items: center;
        position: static;
        inset: unset;
        align-self: center;
        justify-self: start;
        font-size: 12px;
        font-weight: 700;
        color: #dc2626;
        background: none;
        border: none;
        box-shadow: none;
        padding: 0;
        margin-top: 2px;
        white-space: nowrap;
    }

    /* Row 3 cols 1-2: breed • age • weight — below separator */
    .donor-meta[b-lufsciibcc] {
        grid-column: 1 / 3;
        grid-row: 3;
        align-self: center;
        font-size: 11px;
        color: #92400e;
        opacity: 0.8;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        border-top: 1px solid #fde8cb;
        margin-top: 6px;
        padding-top: 7px;
    }

    .meta-weight-inline[b-lufsciibcc] { display: inline; }

    /* Weight hidden — merged into donor-meta via .meta-weight-inline */
    .donor-weight[b-lufsciibcc] { display: none; }

    /* Row 4 cols 1-2: stats left-aligned, no separator (separator is on meta row) */
    .donor-stats[b-lufsciibcc] {
        grid-column: 1 / 3;
        grid-row: 4;
        flex-direction: row;
        justify-content: flex-start;
        justify-self: start;
        gap: 12px;
        align-self: center;
        margin-top: 0;
        padding-top: 4px;
    }

    .donor-stats span[b-lufsciibcc] {
        font-size: 10px;
        white-space: nowrap;
    }

    /* Rows 3-4 col 3: CTAs span both meta+stats rows
       align-self:stretch lets border-top sit at the separator line
       while align-items:center keeps buttons vertically centred */
    .action-btns[b-lufsciibcc] {
        grid-column: 3;
        grid-row: 3 / 5;
        justify-self: end;
        align-self: stretch;
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 5px;
        border-top: 1px solid #fde8cb;
        margin-top: 6px;
    }

    .action-btn[b-lufsciibcc] {
        flex: 0 0 auto;
        width: 32px;
        height: 32px;
        padding: 0;
        justify-content: center;
        border-radius: 50%;
        border-width: 1.5px;
        transition: transform 0.12s cubic-bezier(0.34, 1.56, 0.64, 1),
                    box-shadow 0.12s ease;
    }

    .action-btn:active[b-lufsciibcc] { transform: scale(0.9); }
    .action-btn .btn-text[b-lufsciibcc] { display: none; }
    .action-btn i[b-lufsciibcc] { font-size: 13px; }

    /* Pagination */
    .page-item[b-lufsciibcc] {
        width: 32px;
        height: 32px;
        font-size: 12px;
    }
}

/* =====================================================
   ACCESSIBILITY & FOCUS STATES
   ===================================================== */
.btn-add-donor:focus[b-lufsciibcc],
.action-btn:focus[b-lufsciibcc],
.filter-select:focus[b-lufsciibcc],
.tab:focus[b-lufsciibcc],
.page-item:focus[b-lufsciibcc] {
    outline: 2px solid #f97316;
    outline-offset: 2px;
}

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
    .donor-item[b-lufsciibcc],
    .btn-add-donor[b-lufsciibcc],
    .action-btn[b-lufsciibcc],
    .tab[b-lufsciibcc] {
        transition: none;
    }
}
/* /Pages/BloodServices/BloodServicesHub.razor.rz.scp.css */
/* Blood Requests Page Styles */
.blood-requests-page[b-3tk3xfquk6] {
    /*font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    padding: 0;
    margin: 0 auto;
    color: #0f172a;*/
    /*background-color: #f8fafc00;*/
    /*max-width: 1200px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    background: #4a5e72a3;*/

    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    max-width: 1200px;
    margin: 0 auto;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background: linear-gradient(135deg, #1e293b70 0%, #3341557d 100%);
    overflow: hidden;
    /*min-height: 100vh;*/
}

/* Top Navigation Bar */
.top-nav[b-3tk3xfquk6] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1.5rem;
    background-color: #ffffff;
    border-bottom: 1px solid #e2e8f0;
    position: sticky;
    top: 0;
    z-index: 10;
}

.app-logo[b-3tk3xfquk6] {
    font-size: 1rem;
    font-weight: bold;
    color: #3b82f6;
}

.nav-items[b-3tk3xfquk6] {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.nav-item[b-3tk3xfquk6] {
    font-size: 0.875rem;
    color: #64748b;
    cursor: pointer;
    padding: 0.5rem 0.75rem;
    border-radius: 9999px;
}

    .nav-item.active[b-3tk3xfquk6] {
        background-color: #fee2e2;
        color: #dc2626;
        font-weight: bold;
    }

.user-menu[b-3tk3xfquk6] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.user-name[b-3tk3xfquk6] {
    font-size: 0.875rem;
    color: #64748b;
}

.user-avatar[b-3tk3xfquk6] {
    width: 1.875rem;
    height: 1.875rem;
    border-radius: 50%;
    background-color: #cbd5e1;
}



.page-header[b-3tk3xfquk6] {
    /*display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;*/
    /*background-color: #deede6;*/
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 10px;
    padding-bottom: 5px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    border-bottom: 1px solid #cdbc76;
}

.page-title[b-3tk3xfquk6] {
    font-size: 1.75rem;
    font-weight: 700;
    color: #f3d03c;
    margin: 0 0 0.5rem 0;
}
.header-content[b-3tk3xfquk6] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    /*background-color: #ffffff;*/
    /*padding: 1.5rem;*/
    border-radius: 0.75rem;
    /*box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);*/
}
.header-left[b-3tk3xfquk6] {
    display: flex;
    flex-direction: column;
}
.back-button[b-3tk3xfquk6] {
    background: none;
    border: none;
    color: #2196f3;
    font-size: 0.875rem;
    cursor: pointer;
    padding: 0.5rem;
}

    .back-button:hover[b-3tk3xfquk6] {
        color: #2196f3;
        font-weight:bolder;
        text-decoration: underline;
    }
/* Back Link */
.back-link[b-3tk3xfquk6] {
    color: #64748b;
    font-size: 0.875rem;
    /*margin-bottom: 1rem;*/
    cursor: pointer;
    display: inline-flex;
    align-items: center;
}

    .back-link:hover[b-3tk3xfquk6] {
        color: #475569;
        text-decoration: underline;
    }

/* Main Content */
.main-content[b-3tk3xfquk6] {
    /* max-width: 1024px; */
    /*margin-top: 2rem;*/
    padding: 20px;
    /* padding-right: 20px; */
    background-color: #f8fafceb;
    /*border-radius: 10px;*/
}

/* Blood Requests Header with Button */
.blood-requests-header[b-3tk3xfquk6] {
    padding: 1rem 1.5rem;
    background-color: rgba(254, 226, 226, 0.5);
    border-radius: 0.5rem;
    margin-bottom: 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

    .blood-requests-header h1[b-3tk3xfquk6] {
        font-size: 1.5rem;
        font-weight: bold;
        color: #dc2626;
        margin: 0;
    }

.request-blood-btn[b-3tk3xfquk6] {
    background-color: #dc2626;
    color: #ffffff;
    border: 1px solid #b91c1c;
    padding: 0.625rem 1.25rem;
    border-radius: 9999px;
    font-weight: bold;
    font-size: 0.875rem;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

    .request-blood-btn:hover[b-3tk3xfquk6] {
        background-color: #b91c1c;
    }
/* Updated Quick Action Cards Styles */
.quick-action-cards[b-3tk3xfquk6] {
    display: flex;
    gap: 1.5rem;
    margin-bottom: 2rem;
    flex-wrap: wrap;
}

.action-card[b-3tk3xfquk6] {
    flex: 1;
    min-width: 200px;
    background-color: white;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
    padding: 0.5rem;
    transition: all 0.3s ease;
    cursor: pointer;
    display: flex;
    flex-direction: row;
    align-items: center;
    /*text-align: center;*/
    border: 1px solid #e2e8f0;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15); /* lighter shadow by default */
}

    .action-card:hover[b-3tk3xfquk6] {
        transform: translateY(-5px);
        box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2);
        background-color: #f9fafb;
    }

        .action-card:hover .card-icon svg[b-3tk3xfquk6] {
            transform: scale(1.1);
            transition: transform 0.3s ease;
        }

    .action-card.standard[b-3tk3xfquk6] {
        border-left: 4px solid #009688;
        background: linear-gradient(135deg, #e0f2f1, #ffffff);
    }

    .action-card.emergency[b-3tk3xfquk6] {
        border-left: 4px solid #ef4444;
        background: linear-gradient(135deg, #fdecea, #ffffff);
    }

    .action-card.donors[b-3tk3xfquk6] {
        border-left: 4px solid #3b82f6;
        background: linear-gradient(135deg, #e3f2fd, #ffffff);
    }

.cta-text[b-3tk3xfquk6] {
    color: #2563eb !important; 
    font-weight: 500;
    margin-top: 0.5rem;
    display: inline-block;
    transition: all 0.2s ease;
}

    .cta-text.red-text[b-3tk3xfquk6] {
        color: #ef4444;
    }

.action-card:hover .cta-text[b-3tk3xfquk6] {
    text-decoration: underline;
    transform: translateX(4px);
}


.card-icon[b-3tk3xfquk6] {
    background-color: #f8fafc;
    border-radius: 50%;
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
}

.action-card .card-icon[b-3tk3xfquk6] {
    color: #dc2626;
}

.action-card.emergency .card-icon[b-3tk3xfquk6] {
    color: #ef4444;
}

.action-card.donors .card-icon[b-3tk3xfquk6] {
    color: #3b82f6;
}

.card-icon svg[b-3tk3xfquk6] {
    width: 30px;
    height: 30px;
}

.card-content h3[b-3tk3xfquk6] {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: #0f172a;
}

.card-content p[b-3tk3xfquk6] {
    font-size: 0.875rem;
    color: #64748b;
    margin: 0;
    line-height: 1.4;
}
/* Summary Stats */
.summary-stats[b-3tk3xfquk6] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}

.stat-card[b-3tk3xfquk6] {
    background-color: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 0.5rem;
    padding: 1rem;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.stat-label[b-3tk3xfquk6] {
    font-size: 0.75rem;
    font-weight: 500;
    color: #64748b;
    margin-bottom: 0.5rem;
}

.stat-value[b-3tk3xfquk6] {
    font-size: 1.5rem;
    font-weight: bold;
    color: #0f172a;
}

    .stat-value.urgent[b-3tk3xfquk6] {
        color: #dc2626;
    }

    .stat-value.matches[b-3tk3xfquk6] {
        color: #16a34a;
    }

/* Tab Navigation */
.tab-navigation[b-3tk3xfquk6] {
    display: flex;
    background-color: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 0.5rem;
    margin-bottom: 1.25rem;
    overflow: hidden;
}

.tab[b-3tk3xfquk6] {
    flex: 1;
    padding: 0.75rem 1rem;
    text-align: center;
    font-size: 0.875rem;
    color: #64748b;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

    .tab.active[b-3tk3xfquk6] {
        background-color: #eff6ff;
        color: #3b82f6;
        font-weight: bold;
    }

    .tab:hover:not(.active)[b-3tk3xfquk6] {
        background-color: #f1f5f9;
    }

/* Search and Filter Bar */
.search-filter-bar[b-3tk3xfquk6] {
    display: flex;
    gap: 0.75rem;
    /* margin-bottom: 0.75rem; */
    flex-wrap: wrap;
    justify-content: space-between;
}

.search-box[b-3tk3xfquk6] {
    flex: 2;
    min-width: 15rem;
}

    .search-box input[b-3tk3xfquk6] {
        width: 100%;
        padding: 0.625rem 1rem;
        border: none;
        border-radius: 9999px;
        background-color: #f1f5f9;
        font-size: 0.875rem;
        color: #0f172a;
    }

        .search-box input:focus[b-3tk3xfquk6] {
            outline: none;
            box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.3);
        }

.filter-box[b-3tk3xfquk6] {
    flex: 1;
    min-width: 8rem;
}

    .filter-box select[b-3tk3xfquk6] {
        width: 100%;
        padding: 0.625rem 1rem;
        border: 1px solid #e2e8f0;
        border-radius: 9999px;
        background-color: #ffffff;
        font-size: 0.875rem;
        color: #64748b;
        appearance: none;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2364748b' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right 0.75rem center;
        background-size: 1rem;
    }

        .filter-box select:focus[b-3tk3xfquk6] {
            outline: none;
            border-color: #93c5fd;
            box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.3);
        }

/* Selected Blood Type Tags */
.selected-blood-types[b-3tk3xfquk6] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    /*margin-bottom: 1.25rem;*/
    padding:10px;
}

.blood-type-tag[b-3tk3xfquk6] {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.5rem;
    background-color: #f1f5f9;
    border: 1px solid #e2e8f0;
    border-radius: 9999px;
    font-size: 0.75rem;
    color: #0f172a;
}

.remove-tag[b-3tk3xfquk6] {
    margin-left: 0.375rem;
    width: 1rem;
    height: 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
    border-radius: 50%;
}

    .remove-tag:hover[b-3tk3xfquk6] {
        background-color: #e2e8f0;
        color: #dc2626;
    }


.request-section-columns[b-3tk3xfquk6] {
    display: grid;
    grid-template-columns: 1fr 350px;
    gap: 1.25rem;
}
/* Blood Requests List */
.blood-requests-list[b-3tk3xfquk6] {
    display: flex;
    flex-direction: column;
    /* gap: 0.75rem;
    margin-bottom: 1.5rem;*/
    /*background-color: #ffffff;*/
}

.your-pets[b-3tk3xfquk6] {
    background-color: #ffffff;
    border-radius: 0.5rem;
    padding: 1.25rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

    .your-pets h3[b-3tk3xfquk6] {
        font-size: 1rem;
        font-weight: 600;
        color: #0f172a;
        margin: 0 0 1rem 0;
    }

.pets-list[b-3tk3xfquk6] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.pet-item[b-3tk3xfquk6] {
    display: flex;
    align-items: center;
    padding: 1rem;
    background-color: #f9fafb;
    border-radius: 0.375rem;
}

.pet-card[b-3tk3xfquk6] {
    display: flex;
    align-items: center;
    padding: 1rem;
    border-radius: 0.5rem;
    border: 1px solid #e2e8f0;
    cursor: pointer;
    transition: all 0.2s ease;
    background-color: #f9fafb;
}

    .pet-card:hover[b-3tk3xfquk6] {
        border-color: #cbd5e1;
        background-color: #f8fafc;
    }

    .pet-card.selected[b-3tk3xfquk6] {
        border-color: #ef4444;
        background-color: #fef2f2;
    }

.pet-avatar[b-3tk3xfquk6] {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background-color: #d1d5db;
    margin-right: 1rem;
}

.pet-info[b-3tk3xfquk6] {
    flex-grow: 1;
}

    .pet-info h4[b-3tk3xfquk6] {
        font-size: 0.875rem;
        font-weight: 600;
        color: #0f172a;
        margin: 0 0 0.25rem 0;
    }

    .pet-info p[b-3tk3xfquk6] {
        font-size: 0.75rem;
        color: #64748b;
        margin: 0 0 0.5rem 0;
    }

.donation-status[b-3tk3xfquk6] {
    width: 100%;
    max-width: 8rem;
}

/*.status-bar {
    height: 0.5rem;
    background-color: #d1d5db;
    border-radius: 9999px;
    overflow: hidden;
}*/

/* Status Bar */
.status-bar[b-3tk3xfquk6] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    /*padding: 0.75rem 1rem;*/
    background-color: #f1f5f9;
    border-radius: 0.25rem;
    font-size: 0.75rem;
    color: #64748b;
    /*margin-bottom: 1.5rem;*/
}

.status-progress[b-3tk3xfquk6] {
    height: 100%;
    border-radius: 9999px;
}

    .status-progress.ready[b-3tk3xfquk6] {
        background-color: #10b981;
    }

    .status-progress.recovery[b-3tk3xfquk6] {
        background-color: #ef4444;
    }

.request-card[b-3tk3xfquk6] {
    display: flex;
    align-items: stretch;
    background-color: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 0.5rem;
    height: 100px;
    padding: 0;
    position: relative;
    margin-bottom: 0.75rem;
}

    .request-card.emergency[b-3tk3xfquk6] {
        border-color: #dc2626;
    }

/* Blood Type Container */
.blood-type-container[b-3tk3xfquk6] {
    width: 140px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 0.75rem;
}

.blood-type[b-3tk3xfquk6] {
    font-size: 1rem;
    font-weight: bold;
    text-align: center;
}

.red-font[b-3tk3xfquk6] {
    color: #dc2626;
}

.blue-font[b-3tk3xfquk6] {
    color: #3b82f6;
}

.green-font[b-3tk3xfquk6] {
    color: #16a34a;
}

.gold-font[b-3tk3xfquk6] {
    color: #ca8a04;
}

/* Request Details */
.request-details[b-3tk3xfquk6] {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 1rem;
}

.request-title[b-3tk3xfquk6] {
    font-size: 1rem;
    font-weight: bold;
    color: #0f172a;
    margin-bottom: 0.25rem;
}

.request-info[b-3tk3xfquk6] {
    font-size: 0.75rem;
    color: #64748b;
    margin-bottom: 0.25rem;
}

.request-location[b-3tk3xfquk6] {
    font-size: 0.75rem;
    color: #64748b;
    margin-bottom: 0.25rem;
}

.request-date[b-3tk3xfquk6] {
    font-size: 0.6875rem;
    color: #94a3b8;
}

/* Request Actions */
.request-actions[b-3tk3xfquk6] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0 1rem;
}

.action-btn[b-3tk3xfquk6] {
    padding: 0.5rem 1rem;
    font-size: 0.75rem;
    font-weight: bold;
    border: none;
    border-radius: 9999px;
    cursor: pointer;
    width: 70px;
    text-align: center;
}

.details-btn[b-3tk3xfquk6] {
    background-color: #3b82f6;
    color: #ffffff;
}

.edit-btn[b-3tk3xfquk6] {
    background-color: #eab308;
    color: #ffffff;
}

.delete-btn[b-3tk3xfquk6] {
    background-color: #ef4444;
    color: #ffffff;
}

.accept-btn[b-3tk3xfquk6], .confirm-btn[b-3tk3xfquk6] {
    background-color: #16a34a;
    color: #ffffff;
}

.action-btn:hover[b-3tk3xfquk6] {
    opacity: 0.9;
}

/* Empty State */
.empty-state[b-3tk3xfquk6] {
    padding: 2rem;
    text-align: center;
    background-color: #f8fafc;
    border: 1px dashed #e2e8f0;
    border-radius: 0.5rem;
    color: #64748b;
    margin-bottom: 1.5rem;
}

/* Pagination */
.pagination[b-3tk3xfquk6] {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    margin: 1.5rem 0;
}

.page-item[b-3tk3xfquk6] {
    width: 2.5rem;
    height: 2.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 0.25rem;
    font-size: 0.875rem;
    cursor: pointer;
    border: 1px solid #e2e8f0;
    background-color: #ffffff;
    color: #64748b;
}

    .page-item.active[b-3tk3xfquk6] {
        background-color: #eff6ff;
        border-color: #bfdbfe;
        color: #3b82f6;
        font-weight: bold;
    }

    .page-item:hover:not(.active)[b-3tk3xfquk6] {
        background-color: #f1f5f9;
    }


/* Modal for Delete Confirmation */
.modal-backdrop[b-3tk3xfquk6] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 100;
}

.modal-container[b-3tk3xfquk6] {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 101;
    width: 90%;
    max-width: 28rem;
}

.modal-content[b-3tk3xfquk6] {
    background-color: #ffffff;
    border-radius: 0.5rem;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    overflow: hidden;
}

.modal-header[b-3tk3xfquk6] {
    padding: 1rem 1.5rem;
    border-bottom: 1px solid #e2e8f0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

    .modal-header h3[b-3tk3xfquk6] {
        font-size: 1.25rem;
        font-weight: bold;
        margin: 0;
    }

.close-button[b-3tk3xfquk6] {
    background: none;
    border: none;
    font-size: 1.5rem;
    color: #64748b;
    cursor: pointer;
    line-height: 1;
}

.modal-body[b-3tk3xfquk6] {
    padding: 1.5rem;
}

.modal-footer[b-3tk3xfquk6] {
    padding: 1rem 1.5rem;
    border-top: 1px solid #e2e8f0;
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    background-color: #f8fafc;
}

/* Button Styles */
.btn[b-3tk3xfquk6] {
    padding: 0.625rem 1rem;
    font-size: 0.875rem;
    font-weight: 600;
    border-radius: 0.25rem;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.btn-secondary[b-3tk3xfquk6] {
    background-color: #f1f5f9;
    color: #64748b;
    border: 1px solid #cbd5e1;
}

.btn-danger[b-3tk3xfquk6] {
    background-color: #ef4444;
    color: #ffffff;
    border: none;
}

.btn-secondary:hover[b-3tk3xfquk6] {
    background-color: #e2e8f0;
}

.btn-danger:hover[b-3tk3xfquk6] {
    background-color: #dc2626;
}

/* Add these new styles for clickable summary stats */
.stat-card.clickable[b-3tk3xfquk6] {
    cursor: pointer;
    transition: all 0.2s ease;
}

    .stat-card.clickable:hover[b-3tk3xfquk6] {
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        transform: translateY(-2px);
    }

/* Styles for compact search box */
.search-box.compact[b-3tk3xfquk6] {
    flex: 1;
    width: 12rem; /* Half the size of the original search box */
}

/* My Requests checkbox styling */
.my-requests-filter[b-3tk3xfquk6] {
    display: flex;
    align-items: center;
    padding: 0.5rem 0.75rem;
}

    .my-requests-filter input[type="checkbox"][b-3tk3xfquk6] {
        width: 1rem;
        height: 1rem;
        margin-right: 0.5rem;
        cursor: pointer;
        accent-color: #3b82f6;
    }

    .my-requests-filter label[b-3tk3xfquk6] {
        font-size: 0.875rem;
        color: #64748b;
        cursor: pointer;
    }

        .my-requests-filter label:hover[b-3tk3xfquk6] {
            color: #0f172a;
        }
.offered-btn[b-3tk3xfquk6] {
    background-color: #10b981;
    color: #ffffff;
    opacity: 0.7;
}
/* Responsive adjustments for the new layout */
@media (max-width: 768px) {
    .search-box.compact[b-3tk3xfquk6] {
        width: 100%;
    }

    .my-requests-filter[b-3tk3xfquk6] {
        width: 100%;
        padding: 0.5rem 0;
    }
}

@media (max-width: 480px) {
    .my-requests-filter[b-3tk3xfquk6] {
        padding: 0.25rem 0;
    }
}


/* Responsive Styles */
@media (max-width: 1024px) {
    .main-content[b-3tk3xfquk6] {
        padding: 1rem;
    }

    .request-actions[b-3tk3xfquk6] {
        gap: 0.25rem;
    }

    .action-btn[b-3tk3xfquk6] {
        width: auto;
        min-width: 70px;
    }
}

@media (max-width: 768px) {
    .top-nav[b-3tk3xfquk6] {
        padding: 0.5rem 1rem;
    }

    .nav-items[b-3tk3xfquk6] {
        display: none;
    }

    .main-content[b-3tk3xfquk6] {
        padding: 0.75rem;
    }

    .blood-requests-header[b-3tk3xfquk6] {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
        padding: 1rem;
    }

    .request-blood-btn[b-3tk3xfquk6] {
        width: 100%;
    }

    .search-filter-bar[b-3tk3xfquk6] {
        flex-direction: column;
        gap: 0.5rem;
    }

    .search-box[b-3tk3xfquk6], .filter-box[b-3tk3xfquk6] {
        width: 100%;
    }

    .request-card[b-3tk3xfquk6] {
        flex-direction: column;
        align-items: flex-start;
        height: auto;
        padding: 1rem;
    }

    .blood-type-container[b-3tk3xfquk6] {
        width: 100%;
        justify-content: flex-start;
        margin-bottom: 0.5rem;
        padding: 0;
    }

    .request-details[b-3tk3xfquk6] {
        width: 100%;
        padding: 0.5rem 0;
    }

    .request-actions[b-3tk3xfquk6] {
        width: 100%;
        justify-content: space-between;
        padding: 0;
        margin-top: 0.75rem;
    }

    .action-btn[b-3tk3xfquk6] {
        flex: 1;
    }

    .pagination[b-3tk3xfquk6] {
        flex-wrap: wrap;
        justify-content: center;
    }

    .page-item[b-3tk3xfquk6] {
        width: 2rem;
        height: 2rem;
    }

    .request-section-columns[b-3tk3xfquk6] {
        grid-template-columns: 1fr;
    }
}



@media (max-width: 480px) {
    .top-nav[b-3tk3xfquk6] {
        padding: 0.5rem;
    }

    .user-name[b-3tk3xfquk6] {
        display: none;
    }

    .blood-requests-header h1[b-3tk3xfquk6] {
        font-size: 1.25rem;
    }

    .blood-type-tag[b-3tk3xfquk6] {
        font-size: 0.6875rem;
    }

    .stat-card[b-3tk3xfquk6] {
        padding: 0.75rem;
    }

    .stat-value[b-3tk3xfquk6] {
        font-size: 1.25rem;
    }

    .action-btn[b-3tk3xfquk6] {
        padding: 0.375rem 0.5rem;
        font-size: 0.6875rem;
        min-width: auto;
    }

    .status-bar[b-3tk3xfquk6] {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }

    .modal-container[b-3tk3xfquk6] {
        width: 95%;
    }

    .request-title[b-3tk3xfquk6] {
        font-size: 0.8125rem;
    }

    .request-info[b-3tk3xfquk6], .request-location[b-3tk3xfquk6] {
        font-size: 0.6875rem;
    }

    .request-date[b-3tk3xfquk6] {
        font-size: 0.625rem;
    }
}
/* /Pages/ContactUs.razor.rz.scp.css */
/* Contact Page Styles */
.contact-page[b-ywqufqwu58] {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    padding: 0;
    margin: 0 auto;
    max-width: 1200px;
    border-radius: 10px;
    background: #ffefdba6;
    overflow: hidden;
}

/* Header Section */
.page-header[b-ywqufqwu58] {
    padding: 25px;
    border-bottom: 1px solid #cdbc76;
    text-align: center;
    margin-bottom: 0px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    background: linear-gradient(155deg, #000000b8 0%, #833a1ea8 100%);
    color: #ffde59;
}

    .page-header h4[b-ywqufqwu58] {
        font-size: 1.8rem;
        font-weight: 600;
        margin-bottom: 8px;
    }

    .page-header p[b-ywqufqwu58] {
        font-size: 1rem;
        opacity: 0.9;
        margin-bottom: 5px;
        /*color: #212529;*/
    }
/* Main Content */
.main-content[b-ywqufqwu58] {
}
/* Contact Options */
.contact-options[b-ywqufqwu58] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    padding: 25px;
    /*margin-bottom: 20px;*/
    background: white;
    border-bottom: 1px solid #cdbc76;
}

.option-card[b-ywqufqwu58] {
    background: white;
    padding: 25px;
    border-radius: 15px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    border: 2px solid #e2e8f0;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}

    .option-card:hover[b-ywqufqwu58] {
        transform: translateY(-5px);
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
        border-color: #06b6d4;
    }

    .option-card.active[b-ywqufqwu58] {
        border-color: #06b6d4;
        background: linear-gradient(135deg, #f0f9ff 0%, #e0f7fa 100%);
        transform: translateY(-5px);
        box-shadow: 0 10px 25px rgba(6, 182, 212, 0.2);
    }

.option-icon[b-ywqufqwu58] {
    font-size: 3rem;
    margin-bottom: 15px;
}

.option-card h3[b-ywqufqwu58] {
    font-size: 1.3rem;
    font-weight: 600;
    color: #1e293b;
    margin-bottom: 8px;
}

.option-card p[b-ywqufqwu58] {
    color: #64748b;
    font-size: 0.95rem;
    margin: 0;
}

/* Forms Section */
.forms-section[b-ywqufqwu58] {
    border-bottom: 1px solid #cdbc76;
    background: white;
    /*    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    margin-bottom: 20px;
*/
}

.form-card[b-ywqufqwu58] {
    padding: 30px;
}

    .form-card h2[b-ywqufqwu58] {
        color: #f97316;
        font-size: 1.5rem;
        font-weight: 600;
        margin-bottom: 25px;
        padding-bottom: 15px;
        border-bottom: 2px solid #e2e8f0;
    }

.form-row[b-ywqufqwu58] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    /*margin-bottom: 20px;*/
}

.form-group[b-ywqufqwu58] {
    margin-bottom: 5px;
}

.form-label[b-ywqufqwu58] {
    font-size: 0.9rem;
    color: #1e293b;
    font-weight: 500;
    margin-bottom: 8px;
    display: block;
}

.form-control[b-ywqufqwu58], .form-select[b-ywqufqwu58], .form-textarea[b-ywqufqwu58] {
    width: 100%;
    padding: 12px 15px;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    font-size: 0.95rem;
    transition: all 0.3s ease;
    background: white;
    font-family: inherit;
}

    .form-control:focus[b-ywqufqwu58], .form-select:focus[b-ywqufqwu58], .form-textarea:focus[b-ywqufqwu58] {
        outline: none;
        border-color: #06b6d4;
        box-shadow: 0 0 0 3px rgba(6, 182, 212, 0.1);
    }

    .form-control:disabled[b-ywqufqwu58], .form-select:disabled[b-ywqufqwu58], .form-textarea:disabled[b-ywqufqwu58] {
        background-color: #f8fafc;
        color: #64748b;
        cursor: not-allowed;
    }

.form-textarea[b-ywqufqwu58] {
    resize: vertical;
    min-height: 120px;
    line-height: 1.5;
}

.checkbox-item[b-ywqufqwu58] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px;
    border: 2px solid #e2e8f0;
    border-radius: 10px;
    transition: all 0.3s ease;
    background: #f8fafc;
    margin-bottom: 5px;
    cursor: pointer;
}

.checkbox-item:hover[b-ywqufqwu58] {
    border-color: #06b6d4;
    background: rgba(6, 182, 212, 0.05);
}

.form-check[b-ywqufqwu58] {
    width: 18px;
    height: 18px;
    accent-color: #06b6d4;
    cursor: pointer;
    flex-shrink: 0;
}

.form-check-label[b-ywqufqwu58] {
    font-size: 0.9rem;
    color: #1e293b;
    font-weight: 500;
    cursor: pointer;
    margin: 0;
}

.submit-button[b-ywqufqwu58] {
    background: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%);
    border: none;
    color: white;
    padding: 0.6rem 1.3rem;
    border-radius: 12px;
    font-weight: 600;
    font-size: 0.85rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.45rem;
    box-shadow: 0 4px 0 #094554, 0 6px 18px rgba(249, 115, 22, 0.35);
    transition: transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.15s ease;
    width:fit-content;
    margin: 0 auto;
}

    .submit-button:hover:not(:disabled)[b-ywqufqwu58] {
        transform: translateY(-2px);
        box-shadow: 0 8px 20px rgba(6, 182, 212, 0.3);
    }

    .submit-button:disabled[b-ywqufqwu58] {
        opacity: 0.6;
        cursor: not-allowed;
        transform: none;
        background: #94a3b8;
    }

/* Success and Error Messages */
.success-message[b-ywqufqwu58] {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: white;
    padding: 20px;
    border-radius: 10px;
    text-align: center;
    margin-bottom: 20px;
    box-shadow: 0 4px 15px rgba(16, 185, 129, 0.2);
}

    .success-message h3[b-ywqufqwu58] {
        margin-bottom: 10px;
        font-size: 1.2rem;
    }

    .success-message p[b-ywqufqwu58] {
        margin: 5px 0;
        font-size: 0.95rem;
    }

.error-message[b-ywqufqwu58] {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    color: white;
    padding: 15px;
    border-radius: 8px;
    margin-top: 15px;
    box-shadow: 0 4px 15px rgba(239, 68, 68, 0.2);
}

    .error-message p[b-ywqufqwu58] {
        margin: 0;
        font-size: 0.9rem;
    }

/* Validation Messages */
[b-ywqufqwu58] .validation-message {
    color: #dc2626;
    font-size: 0.8rem;
    margin-top: 5px;
    display: block;
}

/* Direct Contact Info */
.direct-contact[b-ywqufqwu58] {
    background: white;
    padding: 25px;
    border-radius: 10px;
    /*margin-top: 30px;*/
    /*border-left: 4px solid #06b6d4;*/
}

    .direct-contact h3[b-ywqufqwu58] {
        color: #1e293b;
        margin-bottom: 15px;
        font-size: 1.2rem;
    }

.contact-info[b-ywqufqwu58] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
}

.contact-item[b-ywqufqwu58] {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #475569;
    font-size: 0.95rem;
}

    .contact-item i[b-ywqufqwu58] {
        color: #06b6d4;
        width: 20px;
        font-size: 1rem;
    }


/* Floating Label Styles */
.floating-input[b-ywqufqwu58] {
    position: relative;
    margin-bottom: 20px;
}

    .floating-input input[b-ywqufqwu58],
    .floating-input select[b-ywqufqwu58],
    .floating-input textarea[b-ywqufqwu58] {
        width: 100%;
        padding: 16px 12px 8px 12px;
        font-size: 14px;
        border: 2px solid #e2e8f0;
        border-radius: 8px;
        /*background: transparent;*/
        outline: none;
        transition: all 0.3s ease;
        box-sizing: border-box;
    }

        .floating-input input:focus[b-ywqufqwu58],
        .floating-input select:focus[b-ywqufqwu58],
        .floating-input textarea:focus[b-ywqufqwu58] {
            border-color: #2196f3;
            box-shadow: 0 0 0 3px rgba(33, 150, 243, 0.1);
        }

    .floating-input label[b-ywqufqwu58] {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        left: 12px;
        font-size: 14px;
        color: #6b7280;
        pointer-events: none;
        transition: all 0.3s ease;
        background: white;
        padding: 0 4px;
        transform-origin: left;
    }

    /* Label moves up when input is focused or has content */
    .floating-input input:focus + label[b-ywqufqwu58],
    .floating-input input:not(:placeholder-shown) + label[b-ywqufqwu58],
    .floating-input select:focus + label[b-ywqufqwu58],
    .floating-input textarea:focus + label[b-ywqufqwu58],
    .floating-input textarea:not(:placeholder-shown) + label[b-ywqufqwu58],
    .floating-input.has-value label[b-ywqufqwu58] {
        top: -8px;
        transform: translateY(0);
        left: 8px;
        font-size: 12px;
        color: #2196f3;
        font-weight: 600;
    }

    .floating-input label.required[b-ywqufqwu58]::after {
        content: " *";
        color: #dc3545;
    }

    .floating-input select[b-ywqufqwu58] {
        appearance: none;
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
        background-position: right 12px center;
        background-repeat: no-repeat;
        background-size: 16px;
        padding-right: 40px;
    }

        .floating-input select:focus[b-ywqufqwu58] {
            background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%232196f3' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
        }

    .floating-input textarea[b-ywqufqwu58] {
        resize: vertical;
        min-height: 80px;
    }

    .floating-input input[type="date"]:not(:focus):not(:valid)[b-ywqufqwu58] {
        color: transparent;
    }

/* Responsive Design */
@media (max-width: 1024px) {
    .contact-container[b-ywqufqwu58] {
        max-width: 100%;
        padding: 15px;
    }

    .contact-options[b-ywqufqwu58] {
        gap: 15px;
    }

    .form-card[b-ywqufqwu58] {
        padding: 25px;
    }
}

@media (max-width: 768px) {
    .contact-container[b-ywqufqwu58] {
        padding: 15px;
    }

    .contact-header[b-ywqufqwu58] {
        padding: 20px;
    }

        .contact-header h1[b-ywqufqwu58] {
            font-size: 1.6rem;
        }

        .contact-header p[b-ywqufqwu58] {
            font-size: 1rem;
        }

    .contact-options[b-ywqufqwu58] {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .option-card[b-ywqufqwu58] {
        padding: 20px;
    }

    .option-icon[b-ywqufqwu58] {
        font-size: 2.5rem;
        margin-bottom: 10px;
    }

    .form-card[b-ywqufqwu58] {
        padding: 20px;
    }

        .form-card h2[b-ywqufqwu58] {
            font-size: 1.3rem;
            margin-bottom: 20px;
        }

    .form-row[b-ywqufqwu58] {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .contact-info[b-ywqufqwu58] {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .form-control[b-ywqufqwu58], .form-select[b-ywqufqwu58], .form-textarea[b-ywqufqwu58] {
        padding: 10px 12px;
        font-size: 0.9rem;
    }

    .submit-button[b-ywqufqwu58] {
        padding: 12px 25px;
        font-size: 0.95rem;
    }
}

@media (max-width: 480px) {
    .contact-container[b-ywqufqwu58] {
        padding: 10px;
    }

    .contact-header[b-ywqufqwu58] {
        padding: 15px;
    }

        .contact-header h1[b-ywqufqwu58] {
            font-size: 1.4rem;
        }

        .contact-header p[b-ywqufqwu58] {
            font-size: 0.9rem;
        }

    .form-card[b-ywqufqwu58] {
        padding: 15px;
    }

    .option-card[b-ywqufqwu58] {
        padding: 15px;
    }

    .option-icon[b-ywqufqwu58] {
        font-size: 2rem;
    }

    .option-card h3[b-ywqufqwu58] {
        font-size: 1.1rem;
    }

    .option-card p[b-ywqufqwu58] {
        font-size: 0.85rem;
    }

    .form-card h2[b-ywqufqwu58] {
        font-size: 1.2rem;
    }

    .form-label[b-ywqufqwu58] {
        font-size: 0.85rem;
    }

    .form-control[b-ywqufqwu58], .form-select[b-ywqufqwu58], .form-textarea[b-ywqufqwu58] {
        padding: 8px 10px;
        font-size: 0.85rem;
    }

    .submit-button[b-ywqufqwu58] {
        padding: 10px 20px;
        font-size: 0.9rem;
    }

    .direct-contact[b-ywqufqwu58] {
        padding: 15px;
    }

        .direct-contact h3[b-ywqufqwu58] {
            font-size: 1.1rem;
        }

    .contact-item[b-ywqufqwu58] {
        font-size: 0.85rem;
    }
}
/* /Pages/CookiePolicy.razor.rz.scp.css */
.terms-container[b-k90b8s2sbe] {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
    color: #1e293b;
    background: white;
    border-radius: 10px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
}

.terms-header[b-k90b8s2sbe] {
    background: linear-gradient(155deg, #000000b8 0%, #833a1ea8 100%);
    color: #ffde59;
    padding: 30px;
    border-radius: 10px 10px 0 0;
    margin: -20px -20px 30px -20px;
    text-align: center;
}

    .terms-header h4[b-k90b8s2sbe] {
        font-size: 1.8rem;
        font-weight: 600;
        margin-bottom: 8px;
    }

    .terms-header p[b-k90b8s2sbe] {
        font-size: 1rem;
        opacity: 0.9;
        margin-bottom: 5px;
    }

.last-updated[b-k90b8s2sbe] {
    font-size: 0.9rem;
    opacity: 0.9;
    margin: 0;
}

.terms-content[b-k90b8s2sbe] {
    padding: 0 20px 20px;
}

.terms-section[b-k90b8s2sbe] {
    margin-bottom: 35px;
}

    .terms-section h2[b-k90b8s2sbe] {
        color: #f97316;
        font-size: 1.6rem;
        margin-bottom: 15px;
        padding-bottom: 10px;
        border-bottom: 2px solid #e2e8f0;
        font-weight: 600;
    }

    .terms-section h3[b-k90b8s2sbe] {
        color: #334155;
        font-size: 1.2rem;
        margin: 20px 0 10px;
        font-weight: 600;
    }

    .terms-section p[b-k90b8s2sbe] {
        font-size: 1rem;
        line-height: 1.8;
        color: #475569;
        margin-bottom: 15px;
    }

    .terms-section ul[b-k90b8s2sbe] {
        margin: 15px 0;
        padding-left: 25px;
    }

    .terms-section li[b-k90b8s2sbe] {
        font-size: 1rem;
        line-height: 1.8;
        color: #475569;
        margin-bottom: 10px;
    }

        .terms-section li strong[b-k90b8s2sbe] {
            color: #1e293b;
        }

    .terms-section a[b-k90b8s2sbe] {
        color: #06b6d4;
        text-decoration: none;
        font-weight: 500;
    }

        .terms-section a:hover[b-k90b8s2sbe] {
            text-decoration: underline;
        }

.contact-details[b-k90b8s2sbe] {
    background: #f8fafc;
    padding: 20px;
    border-radius: 8px;
    border-left: 4px solid #06b6d4;
    margin-top: 15px;
}

    .contact-details p[b-k90b8s2sbe] {
        margin: 8px 0;
        font-size: 0.95rem;
    }

@media (max-width: 768px) {
    .terms-container[b-k90b8s2sbe] {
        padding: 15px;
        margin: 10px;
    }

    .terms-header[b-k90b8s2sbe] {
        padding: 20px;
        margin: -15px -15px 20px -15px;
    }

        .terms-header h1[b-k90b8s2sbe] {
            font-size: 1.8rem;
        }

    .terms-content[b-k90b8s2sbe] {
        padding: 0 10px 15px;
    }

    .terms-section h2[b-k90b8s2sbe] {
        font-size: 1.3rem;
    }

    .terms-section p[b-k90b8s2sbe],
    .terms-section li[b-k90b8s2sbe] {
        font-size: 0.95rem;
    }
}

@media (max-width: 480px) {
    .terms-container[b-k90b8s2sbe] {
        margin: 5px;
        padding: 10px;
    }

        .terms-header h1[b-k90b8s2sbe] {
            font-size: 1.5rem;
        }

    .terms-section h2[b-k90b8s2sbe] {
        font-size: 1.2rem;
    }
}
/* /Pages/Landing.razor.rz.scp.css */
/* =====================================================================
   LandingV2 — "Vital Pulse"
   Emergency-response platform with warmth. Brand: #019b87 teal · #f79a6f peach.
   All animations are CSS-only and respect prefers-reduced-motion.
   ===================================================================== */

/* --------- Custom property for count-up animation (global; @property
   cannot be scoped, so the names are namespaced with lv2-) --------- */
@property --lv2-count {
    syntax: '<integer>';
    initial-value: 0;
    inherits: false;
}

/* --------- Root tokens (scoped by .lv2-root wrapper) --------- */
.lv2-root[b-5kvx8hb1bi] {
    --lv2-teal: #019b87;
    --lv2-teal-deep: #02463f;
    --lv2-teal-ink: #062c28;
    --lv2-peach: #f79a6f;
    --lv2-peach-deep: #e87a4a;
    --lv2-cream: #fffaf3;
    --lv2-bone: #fdf6ec;
    --lv2-ink: #1c2424;
    --lv2-muted: #5b6a68;
    --lv2-hairline: rgba(2, 70, 63, 0.12);
    --lv2-ribbon-live-a: #f79a6f;
    --lv2-ribbon-live-b: #e87a4a;
    --lv2-ribbon-soon-a: #c84545;
    --lv2-ribbon-soon-b: #8a2222;

    --lv2-shadow-soft: 0 1px 2px rgba(2, 44, 40, 0.05), 0 8px 24px rgba(2, 44, 40, 0.06);
    --lv2-shadow-lift: 0 2px 4px rgba(2, 44, 40, 0.06), 0 24px 48px -16px rgba(2, 44, 40, 0.18);

    --lv2-display: "DM Serif Display", "Playfair Display", Georgia, serif;
    --lv2-sans: "DM Sans", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

    background: transparent;
    color: var(--lv2-ink);
    font-family: var(--lv2-sans);
    overflow: hidden;
}

/* =====================================================================
   HERO
   ===================================================================== */
.lv2-hero[b-5kvx8hb1bi] {
    /*position: relative;*/
    isolation: isolate;
    /*padding: clamp(48px, 6vw, 84px) 0 clamp(40px, 5vw, 64px);*/
    overflow: hidden;
}

.lv2-hero-inner[b-5kvx8hb1bi] {
    position: relative;
    z-index: 2;
    padding-left: 0;
    padding-right: 0;
}

.lv2-hero-row[b-5kvx8hb1bi] {
    /*min-height: 56vh;*/
}

/* --- Animated aurora blobs --- */
.lv2-hero-aurora[b-5kvx8hb1bi] {
    position: absolute;
    inset: -10% -5% -10% -5%;
    z-index: 0;
    pointer-events: none;
    filter: blur(60px);
    opacity: 0.55;
}

.lv2-blob[b-5kvx8hb1bi] {
    position: absolute;
    border-radius: 50%;
    will-change: transform;
}

.lv2-blob-a[b-5kvx8hb1bi] {
    width: 38vmax;
    height: 38vmax;
    top: -8vmax;
    left: -8vmax;
    background: radial-gradient(circle at 30% 30%, #b3e8df 0%, rgba(179, 232, 223, 0) 70%);
    animation: lv2-drift-a-b-5kvx8hb1bi 22s ease-in-out infinite alternate;
}

.lv2-blob-b[b-5kvx8hb1bi] {
    width: 32vmax;
    height: 32vmax;
    top: 10%;
    right: -10vmax;
    background: radial-gradient(circle at 40% 40%, #ffcdb1 0%, rgba(255, 205, 177, 0) 72%);
    animation: lv2-drift-b-b-5kvx8hb1bi 26s ease-in-out infinite alternate;
}

.lv2-blob-c[b-5kvx8hb1bi] {
    width: 26vmax;
    height: 26vmax;
    bottom: -10vmax;
    left: 30%;
    background: radial-gradient(circle at 50% 50%, #ffe6cf 0%, rgba(255, 230, 207, 0) 72%);
    animation: lv2-drift-c-b-5kvx8hb1bi 30s ease-in-out infinite alternate;
}

@keyframes lv2-drift-a-b-5kvx8hb1bi {
    from { transform: translate(0, 0) scale(1); }
    to { transform: translate(4vmax, 3vmax) scale(1.08); }
}
@keyframes lv2-drift-b-b-5kvx8hb1bi {
    from { transform: translate(0, 0) scale(1); }
    to { transform: translate(-3vmax, 4vmax) scale(1.12); }
}
@keyframes lv2-drift-c-b-5kvx8hb1bi {
    from { transform: translate(0, 0) scale(1); }
    to { transform: translate(3vmax, -3vmax) scale(1.05); }
}

/* --- Faint engineering grid lines --- */
.lv2-hero-grid-lines[b-5kvx8hb1bi] {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background-image:
        linear-gradient(to right, rgba(2, 70, 63, 0.05) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(2, 70, 63, 0.05) 1px, transparent 1px);
    background-size: 64px 64px;
    mask-image: radial-gradient(ellipse at 50% 30%, #000 30%, transparent 75%);
    -webkit-mask-image: radial-gradient(ellipse at 50% 30%, #000 30%, transparent 75%);
}

/* --- Subtle grain (pure CSS noise via SVG data-URI) --- */
.lv2-hero-grain[b-5kvx8hb1bi] {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    opacity: 0.06;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.6 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
    mix-blend-mode: multiply;
}

/* --- Eyebrow tag --- */
.lv2-eyebrow[b-5kvx8hb1bi] {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px 8px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--lv2-hairline);
    color: var(--lv2-teal-deep);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 26px;
}

.lv2-eyebrow-dot[b-5kvx8hb1bi] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--lv2-peach);
    box-shadow: 0 0 0 0 rgba(247, 154, 111, 0.55);
    animation: lv2-pulse-dot-b-5kvx8hb1bi 2.4s ease-out infinite;
}

@keyframes lv2-pulse-dot-b-5kvx8hb1bi {
    0% { box-shadow: 0 0 0 0 rgba(247, 154, 111, 0.55); }
    70% { box-shadow: 0 0 0 12px rgba(247, 154, 111, 0); }
    100% { box-shadow: 0 0 0 0 rgba(247, 154, 111, 0); }
}

/* --- Headline --- */
.lv2-headline[b-5kvx8hb1bi] {
    font-family: var(--lv2-display);
    font-weight: 400;
    font-size: clamp(40px, 6.2vw, 84px);
    line-height: 0.98;
    letter-spacing: -0.015em;
    color: #1e8f84;
    margin: 0 0 22px;
    text-transform: uppercase;
}

.lv2-headline-line[b-5kvx8hb1bi] {
    display: block;
}

.lv2-headline-accent[b-5kvx8hb1bi] {
    color: var(--lv2-peach-deep);
    font-style: italic;
}

/* shimmer sweep on accent line — replays on hover */
.lv2-shimmer[b-5kvx8hb1bi] {
    background: linear-gradient(
        100deg,
        var(--lv2-ribbon-soon-b) 0%,
        var(--lv2-ribbon-soon-b) 30%,
        #fff7f0 45%,
        #ffd4ba 52%,
        var(--lv2-ribbon-soon-b) 65%,
        var(--lv2-ribbon-soon-b) 100%
    );
    background-size: 250% 100%;
    background-position: 100% 0;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    animation: lv2-shimmer-sweep-b-5kvx8hb1bi 4s ease-in-out 1.2s infinite;
}

@keyframes lv2-shimmer-sweep-b-5kvx8hb1bi {
    0%   { background-position: 100% 0; }
    20%  { background-position: -40% 0; }
    100% { background-position: -40% 0; }
}

/* --- Sub text --- */
.lv2-sub[b-5kvx8hb1bi] {
    font-size: clamp(16px, 1.4vw, 19px);
    line-height: 1.55;
    color: var(--lv2-muted);
    margin: 0 0 32px;
    max-width: 36em;
}

/* --- CTA Row --- */
.lv2-cta-row[b-5kvx8hb1bi] {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    align-items: center;
}

.lv2-btn[b-5kvx8hb1bi] {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 16px 28px;
    border-radius: 999px;
    font-weight: 600;
    font-size: 15px;
    letter-spacing: 0.01em;
    text-decoration: none;
    transition: transform 0.28s cubic-bezier(0.2, 0.7, 0.2, 1),
                box-shadow 0.28s ease, background-color 0.28s ease, color 0.2s ease;
    isolation: isolate;
    overflow: hidden;
    white-space: nowrap;
}

.lv2-btn-primary[b-5kvx8hb1bi] {
    color: #fff;
    background: linear-gradient(135deg, var(--lv2-peach) 0%, var(--lv2-peach-deep) 100%);
    box-shadow:
        0 1px 2px rgba(232, 122, 74, 0.4),
        0 14px 30px -10px rgba(232, 122, 74, 0.55),
        inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

.lv2-btn-primary[b-5kvx8hb1bi]::after {
    /* hover sheen */
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, 0.35) 50%, transparent 70%);
    transform: translateX(-110%);
    transition: transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
    z-index: 1;
    pointer-events: none;
}

.lv2-btn-primary:hover[b-5kvx8hb1bi] { transform: translateY(-2px); box-shadow: 0 1px 2px rgba(232,122,74,0.45), 0 22px 38px -12px rgba(232,122,74,0.6); }
.lv2-btn-primary:hover[b-5kvx8hb1bi]::after { transform: translateX(110%); }
.lv2-btn-primary:active[b-5kvx8hb1bi] { transform: translateY(0); }

.lv2-btn-pulse[b-5kvx8hb1bi] {
    position: absolute;
    inset: -2px;
    border-radius: inherit;
    pointer-events: none;
    z-index: 0;
    box-shadow: 0 0 0 0 rgba(247, 154, 111, 0.55);
    animation: lv2-cta-heartbeat-b-5kvx8hb1bi 2.6s ease-out infinite;
}

@keyframes lv2-cta-heartbeat-b-5kvx8hb1bi {
    0%   { box-shadow: 0 0 0 0   rgba(247, 154, 111, 0.55); }
    60%  { box-shadow: 0 0 0 18px rgba(247, 154, 111, 0); }
    100% { box-shadow: 0 0 0 0   rgba(247, 154, 111, 0); }
}

.lv2-btn-label[b-5kvx8hb1bi] {
    position: relative;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.lv2-btn-icon[b-5kvx8hb1bi] {
    font-size: 14px;
    animation: lv2-icon-beat-b-5kvx8hb1bi 1.6s ease-in-out infinite;
    transform-origin: center;
}

@keyframes lv2-icon-beat-b-5kvx8hb1bi {
    0%, 60%, 100% { transform: scale(1); }
    30% { transform: scale(1.18); }
    45% { transform: scale(0.96); }
}

.lv2-btn-ghost[b-5kvx8hb1bi] {
    color: var(--lv2-teal-deep);
    background: transparent;
    border: 1.5px solid var(--lv2-teal-deep);
}

.lv2-btn-ghost:hover[b-5kvx8hb1bi] {
    background: var(--lv2-teal-deep);
    color: #fff;
    transform: translateY(-2px);
}

.lv2-btn-arrow[b-5kvx8hb1bi] {
    transition: transform 0.28s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.lv2-btn-ghost:hover .lv2-btn-arrow[b-5kvx8hb1bi] {
    transform: translateX(4px);
}

/* --- Hero illustration --- */
.lv2-hero-illustration[b-5kvx8hb1bi] {
    position: relative;
}

.lv2-hero-illu-frame[b-5kvx8hb1bi] {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    max-width: 520px;
    margin-left: auto;
}

.lv2-hero-illu-img[b-5kvx8hb1bi] {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 100%;
    object-fit: contain;
    animation: lv2-illu-zoom-b-5kvx8hb1bi 14s ease-in-out infinite alternate;
    transform-origin: 60% 70%;
    filter: drop-shadow(0 30px 30px rgba(2, 44, 40, 0.18));
}

@keyframes lv2-illu-zoom-b-5kvx8hb1bi {
    from { transform: scale(1)    translateY(0); }
    to   { transform: scale(1.04) translateY(-4px); }
}

.lv2-hero-illu-ring[b-5kvx8hb1bi] {
    position: absolute;
    border-radius: 50%;
    border: 1.5px dashed rgba(1, 155, 135, 0.25);
    pointer-events: none;
    z-index: 1;
}

.lv2-hero-illu-ring-a[b-5kvx8hb1bi] {
    inset: 6%;
    animation: lv2-ring-spin-b-5kvx8hb1bi 60s linear infinite;
}

.lv2-hero-illu-ring-b[b-5kvx8hb1bi] {
    inset: 16%;
    border-style: dotted;
    border-color: rgba(247, 154, 111, 0.35);
    animation: lv2-ring-spin-b-5kvx8hb1bi 90s linear reverse infinite;
}

@keyframes lv2-ring-spin-b-5kvx8hb1bi {
    to { transform: rotate(360deg); }
}

/* --- HOW IT WORKS --- */
.lv2-hiw[b-5kvx8hb1bi] {
    /*margin-top: clamp(48px, 6vw, 84px);*/
    padding: 28px clamp(20px, 3vw, 36px);
    background: rgba(255, 255, 255, 0.62);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid var(--lv2-hairline);
    border-radius: 24px;
    box-shadow: var(--lv2-shadow-soft);
}

.lv2-hiw-head[b-5kvx8hb1bi] {
    display: flex;
    align-items: baseline;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 22px;
}

.lv2-hiw-eyebrow[b-5kvx8hb1bi] {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--lv2-peach-deep);
    padding: 5px 10px;
    border-radius: 999px;
    background: rgba(247, 154, 111, 0.12);
}

.lv2-hiw-title[b-5kvx8hb1bi] {
    font-family: var(--lv2-display);
    font-weight: 400;
    color: var(--lv2-teal-deep);
    font-size: clamp(20px, 2vw, 26px);
    margin: 0;
    letter-spacing: -0.005em;
}

.lv2-hiw-grid[b-5kvx8hb1bi] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
}

.lv2-hiw-step[b-5kvx8hb1bi] {
    position: relative;
    padding: 0 18px 0 0;
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-rows: auto auto;
    align-items: center;
    column-gap: 10px;
    row-gap: 10px;
}

.lv2-hiw-step + .lv2-hiw-step[b-5kvx8hb1bi] {
    padding-left: 28px;
    border-left: 1px solid var(--lv2-hairline);
}

.lv2-hiw-num[b-5kvx8hb1bi] {
    grid-column: 1;
    grid-row: 1;
    font-family: var(--lv2-display);
    font-size: 16px;
    font-weight: 400;
    color: var(--lv2-peach-deep);
    letter-spacing: 0.06em;
}

.lv2-hiw-icon[b-5kvx8hb1bi] {
    grid-column: 3;
    grid-row: 1;
    width: 38px;
    height: 38px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #e6f5f2 0%, #d5ebe6 100%);
    color: var(--lv2-teal-deep);
    transition: transform 0.4s ease;
}

.lv2-hiw-step:hover .lv2-hiw-icon[b-5kvx8hb1bi] {
    transform: translateY(-2px) rotate(-4deg);
}

.lv2-hiw-step h4[b-5kvx8hb1bi] {
    grid-column: 2;
    grid-row: 1;
    font-family: var(--lv2-sans);
    font-size: 16px;
    font-weight: 700;
    color: var(--lv2-teal-deep);
    margin: 0;
}

.lv2-hiw-step p[b-5kvx8hb1bi] {
    grid-column: 1 / -1;
    grid-row: 2;
    font-size: 14px;
    line-height: 1.55;
    color: var(--lv2-muted);
    margin: 0;
}

/* =====================================================================
   STAGGERED ENTRANCE (hero content)
   ===================================================================== */
[data-anim][b-5kvx8hb1bi] {
    opacity: 0;
    transform: translateY(18px);
    animation: lv2-rise-b-5kvx8hb1bi 0.85s cubic-bezier(0.2, 0.7, 0.2, 1) forwards;
}

[data-anim="1"][b-5kvx8hb1bi] { animation-delay: 0.10s; }
[data-anim="2"][b-5kvx8hb1bi] { animation-delay: 0.22s; }
[data-anim="3"][b-5kvx8hb1bi] { animation-delay: 0.36s; }
[data-anim="4"][b-5kvx8hb1bi] { animation-delay: 0.55s; }
[data-anim="5"][b-5kvx8hb1bi] { animation-delay: 0.70s; }
[data-anim="6"][b-5kvx8hb1bi] { animation-delay: 0.30s; transform: translateY(0) scale(0.96); }
[data-anim="7"][b-5kvx8hb1bi] { animation-delay: 0.95s; }

@keyframes lv2-rise-b-5kvx8hb1bi {
    to { opacity: 1; transform: translateY(0) scale(1); }
}

/* =====================================================================
   TRUST STRIP
   ===================================================================== */
.lv2-trust[b-5kvx8hb1bi] {
    position: relative;
    background:
        radial-gradient(120% 200% at 50% 0%, rgba(247,154,111,0.10) 0%, transparent 50%),
        linear-gradient(180deg, #02463f 0%, #062c28 100%);
    color: #f3ece0;
    padding: clamp(28px, 3.5vw, 44px) 0;
    margin-top: clamp(0px, 4vw, 56px);
    overflow: hidden;
}

.lv2-trust-rail[b-5kvx8hb1bi] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(247, 154, 111, 0) 10%,
        rgba(247, 154, 111, 0.9) 50%,
        rgba(247, 154, 111, 0) 90%,
        transparent 100%);
    background-size: 200% 100%;
    animation: lv2-rail-pulse-b-5kvx8hb1bi 8s linear infinite;
}

@keyframes lv2-rail-pulse-b-5kvx8hb1bi {
    0%   { background-position: -100% 0; }
    100% { background-position: 200% 0; }
}

.lv2-trust-grid[b-5kvx8hb1bi] {
    display: grid;
    grid-template-columns: 1.1fr auto 1.4fr auto 1.1fr auto 1.1fr;
    align-items: center;
    gap: clamp(16px, 2vw, 36px);
}

.lv2-trust-item[b-5kvx8hb1bi] {
    text-align: center;
}

.lv2-trust-num[b-5kvx8hb1bi] {
    font-family: var(--lv2-display);
    font-size: clamp(32px, 4.4vw, 54px);
    line-height: 1;
    color: #fff;
    letter-spacing: -0.01em;
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
}

.lv2-trust-num-text[b-5kvx8hb1bi] {
    font-style: italic;
    color: var(--lv2-peach);
}

.lv2-trust-prefix[b-5kvx8hb1bi] {
    font-size: 0.65em;
    margin-right: 2px;
    color: var(--lv2-peach);
}

.lv2-trust-plus[b-5kvx8hb1bi] {
    font-size: 0.55em;
    color: var(--lv2-peach);
    margin-left: 2px;
}

.lv2-trust-unit[b-5kvx8hb1bi] {
    font-family: var(--lv2-sans);
    font-size: 0.42em;
    font-weight: 600;
    margin-left: 6px;
    color: #b8d5d0;
    align-self: center;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.lv2-trust-label[b-5kvx8hb1bi] {
    margin-top: 8px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: #95b3ad;
}

.lv2-trust-sep[b-5kvx8hb1bi] {
    width: 1px;
    height: 56px;
    background: linear-gradient(180deg, transparent 0%, rgba(255,255,255,0.18) 50%, transparent 100%);
}

/* --- Counter (CSS-only count-up) --- */
.lv2-counter[b-5kvx8hb1bi] {
    counter-reset: lv2-c var(--lv2-count, 0);
    animation: lv2-countup-b-5kvx8hb1bi 2.4s ease-out 0.4s both;
}

.lv2-counter[b-5kvx8hb1bi]::after {
    content: counter(lv2-c);
}

@keyframes lv2-countup-b-5kvx8hb1bi {
    from { --lv2-count: 0; }
    to   { --lv2-count: var(--lv2-target, 0); }
}

/* Use scroll-trigger when supported for the counter */
@supports (animation-timeline: view()) {
    .lv2-counter[b-5kvx8hb1bi] {
        animation-delay: 0s;
        animation-timeline: view();
        animation-range: entry 5% entry 60%;
    }
}

/* --- Live pill --- */
.lv2-trust-item-live[b-5kvx8hb1bi] {
    text-align: center;
}

.lv2-live-pill[b-5kvx8hb1bi] {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #f3ece0;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.lv2-live-dot[b-5kvx8hb1bi] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #3ddc97;
    box-shadow: 0 0 0 0 rgba(61, 220, 151, 0.6);
    animation: lv2-live-dot-b-5kvx8hb1bi 2s ease-out infinite;
}

@keyframes lv2-live-dot-b-5kvx8hb1bi {
    0%   { box-shadow: 0 0 0 0 rgba(61, 220, 151, 0.6); }
    70%  { box-shadow: 0 0 0 12px rgba(61, 220, 151, 0); }
    100% { box-shadow: 0 0 0 0 rgba(61, 220, 151, 0); }
}

/* =====================================================================
   DIVIDER
   ===================================================================== */
.lv2-divider[b-5kvx8hb1bi] {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 48px clamp(20px, 5vw, 80px);
    max-width: 880px;
    margin: 0 auto;
}

.lv2-divider-rule[b-5kvx8hb1bi] {
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, var(--lv2-teal-deep) 50%, transparent 100%);
    opacity: 0.18;
}

.lv2-divider-mark[b-5kvx8hb1bi] {
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--lv2-cream);
    color: var(--lv2-teal-deep);
    border: 1px solid var(--lv2-hairline);
    box-shadow: var(--lv2-shadow-soft);
    transform: rotate(-12deg);
}

.lv2-divider-mark i[b-5kvx8hb1bi] {
    font-size: 16px;
}

/* =====================================================================
   SERVICES
   ===================================================================== */
.lv2-services[b-5kvx8hb1bi] {
    /*padding: clamp(8px, 2vw, 24px) 0 clamp(64px, 8vw, 100px);*/
    padding: clamp(8px, 2vw, 24px) 0 ;
    position: relative;
}

.lv2-services-head[b-5kvx8hb1bi] {
    max-width: 720px;
    margin: 0 auto 40px;
    text-align: center;
    padding: 0 16px;
}

.lv2-services-eyebrow[b-5kvx8hb1bi] {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--lv2-peach-deep);
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(247, 154, 111, 0.12);
    margin-bottom: 14px;
}

.lv2-services-title[b-5kvx8hb1bi] {
    font-family: var(--lv2-display);
    font-weight: 400;
    font-size: clamp(28px, 3.6vw, 44px);
    line-height: 1.1;
    color: var(--lv2-teal-deep);
    margin: 0;
    letter-spacing: -0.01em;
}

.lv2-services-title em[b-5kvx8hb1bi] {
    color: var(--lv2-peach-deep);
    font-style: italic;
}

.lv2-services-grid[b-5kvx8hb1bi] {
    row-gap: 24px;
    align-items: stretch;
}

.lv2-services-grid > [class*="col-"][b-5kvx8hb1bi] {
    display: flex;
}

/* --- Card --- */
.lv2-card[b-5kvx8hb1bi] {
    position: relative;
    width: 100%;
    background: #fff;
    border-radius: 22px;
    padding: 28px 26px;
    box-shadow: var(--lv2-shadow-soft);
    border: 1px solid var(--lv2-hairline);
    overflow: hidden;
    transition: transform 0.45s cubic-bezier(0.2, 0.7, 0.2, 1),
                box-shadow 0.45s ease;
    isolation: isolate;
    opacity: 0;
    transform: translateY(36px);
    animation: lv2-card-in-b-5kvx8hb1bi 0.85s cubic-bezier(0.2, 0.7, 0.2, 1) forwards;
}

/* Stagger card load if scroll-driven isn't available */
.lv2-services-grid > [class*="col-"]:nth-child(1) .lv2-card[b-5kvx8hb1bi] { animation-delay: 0.15s; }
.lv2-services-grid > [class*="col-"]:nth-child(2) .lv2-card[b-5kvx8hb1bi] { animation-delay: 0.30s; }
.lv2-services-grid > [class*="col-"]:nth-child(3) .lv2-card[b-5kvx8hb1bi] { animation-delay: 0.45s; }

@keyframes lv2-card-in-b-5kvx8hb1bi {
    to { opacity: 1; transform: translateY(0); }
}

/* Scroll-driven entrance when supported */
@supports (animation-timeline: view()) {
    .lv2-card[b-5kvx8hb1bi] {
        animation-timeline: view();
        animation-range: entry 0% cover 25%;
        animation-delay: 0s !important;
    }
}

.lv2-card:hover[b-5kvx8hb1bi] {
    transform: translateY(-8px);
    box-shadow: var(--lv2-shadow-lift);
}

/* Accent bar at top of card */
.lv2-card-accent[b-5kvx8hb1bi] {
    position: absolute;
    top: 0;
    left: 22px;
    right: 22px;
    height: 3px;
    border-radius: 0 0 4px 4px;
    background: linear-gradient(135deg, #7545c8 0%, var(--lv2-ribbon-soon-b) 100%);
    opacity: 0.85;
    transition: opacity 0.3s ease;
}
.lv2-card-accent-live[b-5kvx8hb1bi] {
    position: absolute;
    top: 0;
    left: 22px;
    right: 22px;
    height: 3px;
    border-radius: 0 0 4px 4px;
    background: linear-gradient(90deg, var(--lv2-teal) 0%, var(--lv2-peach) 100%);
    opacity: 0.85;
    transition: opacity 0.3s ease;
}

/* Card body layout */
.lv2-card-body[b-5kvx8hb1bi] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    height: 100%;
}

.lv2-card-text[b-5kvx8hb1bi] {
    flex: 1 1 auto;
    min-width: 0;
}

.lv2-card-status[b-5kvx8hb1bi] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--lv2-teal);
    padding: 4px 10px;
    background: rgba(1, 155, 135, 0.10);
    border-radius: 999px;
    margin-bottom: 12px;
}

.lv2-card-status-dot[b-5kvx8hb1bi] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--lv2-teal);
    box-shadow: 0 0 0 0 rgba(1, 155, 135, 0.5);
    animation: lv2-pulse-mini-b-5kvx8hb1bi 2.4s ease-out infinite;
}

@keyframes lv2-pulse-mini-b-5kvx8hb1bi {
    0%   { box-shadow: 0 0 0 0 rgba(1, 155, 135, 0.5); }
    70%  { box-shadow: 0 0 0 8px rgba(1, 155, 135, 0); }
    100% { box-shadow: 0 0 0 0 rgba(1, 155, 135, 0); }
}

.lv2-card-status-soon[b-5kvx8hb1bi] {
    color: #97694e;
    background: rgba(151, 105, 78, 0.10);
}

.lv2-card-text h3[b-5kvx8hb1bi] {
    font-family: var(--lv2-display);
    font-weight: 400;
    font-size: 22px;
    line-height: 1.15;
    color: var(--lv2-teal-deep);
    margin: 0 0 6px;
    letter-spacing: -0.005em;
}

.lv2-card-text p[b-5kvx8hb1bi] {
    font-size: 14px;
    line-height: 1.5;
    color: var(--lv2-muted);
    margin: 0 0 14px;
}

.lv2-card-link[b-5kvx8hb1bi] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 700;
    color: var(--lv2-teal-deep);
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    transition: gap 0.28s ease, color 0.2s ease;
}

.lv2-card-link:hover[b-5kvx8hb1bi] {
    color: var(--lv2-peach-deep);
    gap: 12px;
}

.lv2-card-link-arrow[b-5kvx8hb1bi] {
    transition: transform 0.28s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.lv2-card-link:hover .lv2-card-link-arrow[b-5kvx8hb1bi] {
    transform: translateX(2px);
}

.lv2-card-link-muted[b-5kvx8hb1bi] {
    color: #97694e;
    cursor: default;
    pointer-events: none;
    opacity: 0.7;
}

/* Card icon */
.lv2-card-icon[b-5kvx8hb1bi] {
    position: relative;
    flex: 0 0 auto;
    width: 96px;
    height: 96px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.lv2-card-icon img[b-5kvx8hb1bi] {
    position: relative;
    z-index: 2;
    max-width: 84px;
    max-height: 84px;
    display: block;
    transition: transform 0.45s cubic-bezier(0.2, 0.7, 0.2, 1);
    transform-origin: 50% 60%;
}

.lv2-card:hover .lv2-card-icon img[b-5kvx8hb1bi] {
    transform: translateY(-4px) scale(1.06) rotate(-3deg);
}

.lv2-card-icon-halo[b-5kvx8hb1bi] {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    z-index: 1;
    background: radial-gradient(circle, rgba(247, 154, 111, 0.25) 0%, transparent 70%);
    opacity: 0;
    transition: opacity 0.45s ease;
}

.lv2-card-live .lv2-card-icon-halo[b-5kvx8hb1bi] {
    opacity: 1;
    animation: lv2-halo-breathe-b-5kvx8hb1bi 4s ease-in-out infinite;
}

@keyframes lv2-halo-breathe-b-5kvx8hb1bi {
    0%, 100% { transform: scale(0.9); opacity: 0.6; }
    50%      { transform: scale(1.1); opacity: 1; }
}

/* Live card subtle glow */
.lv2-card-live[b-5kvx8hb1bi] {
    background:
        radial-gradient(120% 80% at 100% 0%, rgba(247, 154, 111, 0.10) 0%, transparent 55%),
        #fff;
    box-shadow:
        0 1px 2px rgba(2, 44, 40, 0.05),
        0 10px 30px rgba(2, 44, 40, 0.08),
        0 0 0 1px rgba(247, 154, 111, 0.15);
}

.lv2-card-live:hover[b-5kvx8hb1bi] {
    box-shadow:
        var(--lv2-shadow-lift),
        0 0 0 1px rgba(247, 154, 111, 0.25);
}

/* Coming-soon cards: muted */
.lv2-card-soon[b-5kvx8hb1bi] {
    filter: saturate(0.55);
    opacity: 0.92;
    transition: filter 0.4s ease, opacity 0.4s ease, transform 0.45s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.45s ease;
}

.lv2-card-soon:hover[b-5kvx8hb1bi] {
    filter: saturate(0.8);
    opacity: 1;
}

/* =====================================================================
   RIBBONS
   ===================================================================== */
.lv2-ribbon[b-5kvx8hb1bi] {
    position: absolute;
    top: 0;
    right: 0;
    width: 110px;
    height: 110px;
    overflow: hidden;
    pointer-events: none;
    z-index: 3;
}

.lv2-ribbon span[b-5kvx8hb1bi] {
    position: absolute;
    top: 22px;
    right: -36px;
    transform: rotate(45deg);
    display: block;
    width: 160px;
    text-align: center;
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    padding: 7px 0;
    box-shadow: 0 8px 16px -8px rgba(0, 0, 0, 0.45);
}

/* NEW ribbon — peach/coral with shimmer */
.lv2-ribbon-new span[b-5kvx8hb1bi] {
    background: linear-gradient(90deg, var(--lv2-teal) 0%, var(--lv2-peach) 100%);
    overflow: hidden;
    isolation: isolate;
}

.lv2-ribbon-new span[b-5kvx8hb1bi]::before {
    /* shimmer sweep */
    content: "";
    position: absolute;
    top: 0;
    left: -120%;
    width: 60%;
    height: 100%;
    background: linear-gradient(
        100deg,
        transparent 0%,
        rgba(255, 255, 255, 0.55) 50%,
        transparent 100%
    );
    transform: skewX(-15deg);
    animation: lv2-ribbon-shimmer-b-5kvx8hb1bi 3.2s ease-in-out infinite;
}

@keyframes lv2-ribbon-shimmer-b-5kvx8hb1bi {
    0%   { left: -120%; }
    60%  { left: 200%; }
    100% { left: 200%; }
}

/* COMING SOON ribbon — red, muted */
.lv2-ribbon-soon span[b-5kvx8hb1bi] {
    background:linear-gradient(135deg, #ff3b3b 0%, #ff2525 100%);
    opacity: 0.85;
}

/* =====================================================================
   FOOTER
   ===================================================================== */
.lv2-footer[b-5kvx8hb1bi] {
    background: #02211e;
    color: #9aaeaa;
    padding: 28px 0;
    position: relative;
}

.lv2-footer[b-5kvx8hb1bi]::before {
    content: "";
    position: absolute;
    top: 0;
    left: 5%;
    right: 5%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.08), transparent);
}

.lv2-footer-row[b-5kvx8hb1bi] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
}

.lv2-footer-copy[b-5kvx8hb1bi] {
    margin: 0;
    font-size: 13px;
    color: #6c8581;
}

.lv2-footer-links[b-5kvx8hb1bi] {
    display: flex;
    flex-wrap: wrap;
    gap: 22px;
}

.lv2-footer-links a[b-5kvx8hb1bi] {
    color: #c2d4d0;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    letter-spacing: 0.02em;
    transition: color 0.2s ease;
}

.lv2-footer-links a:hover[b-5kvx8hb1bi] {
    color: var(--lv2-peach);
}

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media (max-width: 1199px) {
    .lv2-card-body[b-5kvx8hb1bi] { flex-direction: column; align-items: flex-start; text-align: left; }
    .lv2-card-icon[b-5kvx8hb1bi] { width: 72px; height: 72px; align-self: flex-end; margin-top: -8px; }
    .lv2-card-icon img[b-5kvx8hb1bi] { max-width: 64px; max-height: 64px; }
}

@media (max-width: 991px) {
    .lv2-trust-grid[b-5kvx8hb1bi] {
        grid-template-columns: 1fr 1fr;
        gap: 22px 18px;
    }
    .lv2-trust-sep[b-5kvx8hb1bi] { display: none; }
    .lv2-trust-item-live[b-5kvx8hb1bi] { grid-column: 1 / -1; }
}

@media (max-width: 768px) {
    .lv2-hero[b-5kvx8hb1bi] {
        padding: 32px 0 40px;
    }
    .lv2-hero-row[b-5kvx8hb1bi] {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(132px, 42%);
        grid-template-areas:
            "headline illustration"
            "sub sub"
            "cta cta"
            "eyebrow eyebrow";
        align-items: start;
        column-gap: 10px;
        min-height: unset;
    }
    .lv2-hero-row > [class*="col-"][b-5kvx8hb1bi] {
        width: auto;
        max-width: none;
    }
    .lv2-hero-row > .col-12.col-md-7[b-5kvx8hb1bi] {
        display: contents;
    }
    .lv2-hero-content[b-5kvx8hb1bi] {
        display: contents;
    }
    .lv2-eyebrow[b-5kvx8hb1bi] {
        grid-area: eyebrow;
        justify-self: stretch;
        margin: 18px 0 0;
    }
    .lv2-headline[b-5kvx8hb1bi] {
        grid-area: headline;
        align-self: start;
        margin-bottom: 18px;
    }
    .lv2-sub[b-5kvx8hb1bi] {
        grid-area: sub;
        max-width: 32em;
    }
    .lv2-cta-row[b-5kvx8hb1bi] {
        grid-area: cta;
        display: grid;
        grid-template-columns: 1fr;
    }
    .lv2-cta-row .lv2-btn[b-5kvx8hb1bi] {
        width: 100%;
        justify-content: center;
    }
    .lv2-hero-illustration[b-5kvx8hb1bi] {
        grid-area: illustration;
        order: 0;
        align-self: start;
        justify-self: end;
        margin-bottom: 4px;
    }
    .lv2-hero-illu-frame[b-5kvx8hb1bi] {
        max-width: 220px;
        margin: 0 0 0 auto;
    }
    .lv2-headline[b-5kvx8hb1bi] { font-size: clamp(36px, 8vw, 48px); }
    .lv2-eyebrow[b-5kvx8hb1bi] { font-size: 11px; padding: 6px 12px; }
    .lv2-cta-row .lv2-btn[b-5kvx8hb1bi] { padding: 14px 22px; font-size: 14px; }
    .lv2-hiw[b-5kvx8hb1bi] { padding: 22px 18px; border-radius: 18px; margin-top: 36px; }
    .lv2-hiw-grid[b-5kvx8hb1bi] { grid-template-columns: 1fr; gap: 22px; }
    .lv2-hiw-step + .lv2-hiw-step[b-5kvx8hb1bi] {
        padding-left: 0;
        padding-top: 22px;
        border-left: none;
        border-top: 1px solid var(--lv2-hairline);
    }
    .lv2-services-title[b-5kvx8hb1bi] { font-size: clamp(26px, 6vw, 32px); }
    .lv2-card[b-5kvx8hb1bi] { padding: 22px 20px; }
    .lv2-card-body[b-5kvx8hb1bi] { flex-direction: row; align-items: center; }
    .lv2-card-icon[b-5kvx8hb1bi] { align-self: center; margin-top: 0; }
    .lv2-trust-num[b-5kvx8hb1bi] { font-size: clamp(28px, 7vw, 40px); }
    .lv2-trust-label[b-5kvx8hb1bi] { font-size: 10px; }
    .lv2-divider[b-5kvx8hb1bi] { padding: 32px 16px; gap: 12px; }
    .lv2-divider-mark[b-5kvx8hb1bi] { width: 38px; height: 38px; }
    .lv2-footer-row[b-5kvx8hb1bi] { justify-content: center; text-align: center; }
    .lv2-footer-links[b-5kvx8hb1bi] { justify-content: center; }
}

@media (max-width: 480px) {
    .lv2-hero[b-5kvx8hb1bi] { padding: 24px 15px 32px; }
    .lv2-hero-row[b-5kvx8hb1bi] {
        grid-template-columns: minmax(0, 1fr) minmax(124px, 41%);
        column-gap: 8px;
        padding: 15px;
    }
    .lv2-hero-illu-frame[b-5kvx8hb1bi] { max-width: 168px; }
    .lv2-headline[b-5kvx8hb1bi] {
        font-size: clamp(34px, 9vw, 40px);
        margin-bottom: 16px;
    }
    .lv2-cta-row[b-5kvx8hb1bi] { flex-direction: column; align-items: stretch; }
    .lv2-cta-row .lv2-btn[b-5kvx8hb1bi] { justify-content: center; }
    .lv2-trust-grid[b-5kvx8hb1bi] { grid-template-columns: 1fr; text-align: center; }
    .lv2-trust-item-live[b-5kvx8hb1bi] { grid-column: auto; }
    .lv2-card-body[b-5kvx8hb1bi] { flex-direction: row; align-items: flex-start; }
    /*.lv2-card-icon { align-self: flex-end; }*/
    .lv2-card-text h3[b-5kvx8hb1bi] { font-size: 19px; }
    .lv2-ribbon[b-5kvx8hb1bi] { width: 90px; height: 90px; }
    .lv2-ribbon span[b-5kvx8hb1bi] { font-size: 10px; top: 16px; right: -40px; width: 140px; }
}

/* =====================================================================
   REDUCED MOTION
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
    .lv2-root *[b-5kvx8hb1bi],
    .lv2-root *[b-5kvx8hb1bi]::before,
    .lv2-root *[b-5kvx8hb1bi]::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
    [data-anim][b-5kvx8hb1bi] { opacity: 1 !important; transform: none !important; }
    .lv2-card[b-5kvx8hb1bi] { opacity: 1 !important; transform: none !important; }
    .lv2-shimmer[b-5kvx8hb1bi] {
        background: none;
        -webkit-text-fill-color: var(--lv2-peach-deep);
        color: var(--lv2-peach-deep);
    }
    .lv2-counter[b-5kvx8hb1bi]::after { content: counter(lv2-c, decimal); }
    .lv2-counter[b-5kvx8hb1bi] { --lv2-count: var(--lv2-target); }
}
/* /Pages/MedicalDisclaimer.razor.rz.scp.css */
.terms-container[b-jmcvm1y7ir] {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
    color: #1e293b;
    background: white;
    border-radius: 10px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
}

.terms-header[b-jmcvm1y7ir] {
    background: linear-gradient(155deg, #000000b8 0%, #833a1ea8 100%);
    color: #ffde59;
    padding: 25px;
    border-radius: 10px 10px 0 0;
    margin: -20px -20px 30px -20px;
    text-align: center;
}

    .terms-header h4[b-jmcvm1y7ir] {
        font-size: 1.8rem;
        font-weight: 600;
        margin-bottom: 8px;
    }

.last-updated[b-jmcvm1y7ir] {
    font-size: 0.9rem;
    opacity: 0.9;
    margin: 0;
}

.terms-content[b-jmcvm1y7ir] {
    padding: 0 20px 20px;
}

.terms-section[b-jmcvm1y7ir] {
    margin-bottom: 35px;
}

    .terms-section h2[b-jmcvm1y7ir] {
        color: #f97316;
        font-size: 1.6rem;
        margin-bottom: 15px;
        padding-bottom: 10px;
        border-bottom: 2px solid #fecaca;
        font-weight: 600;
    }

    .terms-section p[b-jmcvm1y7ir] {
        font-size: 1rem;
        line-height: 1.8;
        color: #475569;
        margin-bottom: 15px;
    }

    .terms-section ul[b-jmcvm1y7ir] {
        margin: 15px 0;
        padding-left: 25px;
    }

    .terms-section li[b-jmcvm1y7ir] {
        font-size: 1rem;
        line-height: 1.8;
        color: #475569;
        margin-bottom: 10px;
    }

        .terms-section li strong[b-jmcvm1y7ir] {
            color: #1e293b;
        }

    .terms-section a[b-jmcvm1y7ir] {
        color: #06b6d4;
        text-decoration: none;
        font-weight: 500;
    }

        .terms-section a:hover[b-jmcvm1y7ir] {
            text-decoration: underline;
        }

.contact-details[b-jmcvm1y7ir] {
    background: #f8fafc;
    padding: 20px;
    border-radius: 8px;
    border-left: 4px solid #06b6d4;
    margin-top: 15px;
}

    .contact-details p[b-jmcvm1y7ir] {
        margin: 8px 0;
        font-size: 0.95rem;
    }

@media (max-width: 768px) {
    .terms-container[b-jmcvm1y7ir] {
        padding: 15px;
        margin: 10px;
    }

    .terms-header[b-jmcvm1y7ir] {
        padding: 20px;
        margin: -15px -15px 20px -15px;
    }

        .terms-header h1[b-jmcvm1y7ir] {
            font-size: 1.8rem;
        }

    .terms-content[b-jmcvm1y7ir] {
        padding: 0 10px 15px;
    }

    .terms-section h2[b-jmcvm1y7ir] {
        font-size: 1.3rem;
    }

    .terms-section p[b-jmcvm1y7ir],
    .terms-section li[b-jmcvm1y7ir] {
        font-size: 0.95rem;
    }
}

@media (max-width: 480px) {
    .terms-container[b-jmcvm1y7ir] {
        margin: 5px;
        padding: 10px;
    }

        .terms-header h1[b-jmcvm1y7ir] {
            font-size: 1.5rem;
        }

    .terms-section h2[b-jmcvm1y7ir] {
        font-size: 1.2rem;
    }
}
/* /Pages/Pets/AddPet.razor.rz.scp.css */
/* Embedded mode (rendered inside AddDonorModal) — neutralize the page chrome and let
   the outer modal own scrolling. .add-pet-page setting overflow:hidden makes IT the
   nearest scroll-container for sticky descendants; with overflow:visible, the modal
   body becomes the scroll-container and .tab-navigation can stick inside it. */
.pet-form-container--embedded[b-9n5w1gncho],
.add-pet-page--embedded[b-9n5w1gncho] {
    overflow: visible !important;
    max-width: 100% !important;
    margin: 0 !important;
    background: transparent !important;
    height: auto !important;
    max-height: none !important;
}

.add-pet-page--embedded .tab-navigation[b-9n5w1gncho] {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 20;
}

/* Add Pet Page Styles */
.add-pet-page[b-9n5w1gncho] {
    max-width: 1200px;
    margin: 0 auto;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    border-radius: 10px;
    background: #ffefdba6;
    /*border: 2px solid #fed7aa;*/
    overflow: hidden;
}

/* Back Navigation Link */
.back-link[b-9n5w1gncho] {
    display: inline-flex;
    align-items: center;
    /*color: #9a3412;*/
    cursor: pointer;
    font-size: 0.875rem;
}

    .back-link:hover[b-9n5w1gncho] {
        color: #2196f3;
        font-weight: bolder;
        text-decoration: underline;
    }

.back-icon[b-9n5w1gncho] {
    margin-right: 0.5rem;
}


/* Page Header */
.page-header[b-9n5w1gncho] {
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 10px;
    padding-bottom: 5px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    background: linear-gradient(155deg, #000000b8 0%, #833a1ea8 100%);
    color: #ffde59;
}

.page-title[b-9n5w1gncho] {
    font-size: 1.75rem;
    font-weight: 700;
    margin: 0 0 0.5rem 0;
}

.header-content[b-9n5w1gncho] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 10px;
}

.header-left[b-9n5w1gncho] {
    display: flex;
    flex-direction: column;
}

.header-right[b-9n5w1gncho] {
    display: flex;
    flex-direction: row;
    gap: 5px;
}

.header-btn[b-9n5w1gncho] {
    backdrop-filter: blur(10px);
    padding: 8px 12px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
}

    .header-btn:hover[b-9n5w1gncho] {
        transform: translateY(-2px);
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
        font-weight: bolder;
    }

.header-save-btn[b-9n5w1gncho] {
    background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
    border: none;
    color: white;
    padding: 0.6rem 1.3rem;
    border-radius: 12px;
    font-weight: 600;
    font-size: 0.85rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.45rem;
    box-shadow: 0 4px 0 #c2410c, 0 6px 18px rgba(249, 115, 22, 0.35);
    transition: transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.15s ease;
}

    .header-save-btn:hover[b-9n5w1gncho] {
        background: #c2410c;
        /*box-shadow: 0 4px 0 #c2410c, 0 6px 18px rgba(249, 115, 22, 0.35);*/
    }
.header-cancel-btn[b-9n5w1gncho] {
    background: #64748b;
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #ffffff;
    box-shadow: 0 1px 0 #ffffff, 0 6px 18px rgba(249, 115, 22, 0.35);
}

    .header-cancel-btn:hover[b-9n5w1gncho] {
        font-weight: bolder;
        transform: translateY(-2px);
        /*box-shadow: 0 2px 0 #64748b, 0 6px 18px rgba(249, 115, 22, 0.35);*/
    }

.action-buttons[b-9n5w1gncho] {
    display: flex;
    gap: 0.75rem;
}

    .action-buttons button[b-9n5w1gncho] {
        border-radius: 3rem;
        font-weight: 600;
        cursor: pointer;
        border: none;
        transition: all 0.2s ease;
    }

/* Responsive media queries */
@media (max-width: 768px) {
    .page-header[b-9n5w1gncho] {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }

    .action-buttons[b-9n5w1gncho] {
        width: 100%;
        justify-content: space-between;
    }

    .tab-navigation[b-9n5w1gncho] {
        /*padding: 0.4rem 0.4rem 0;*/
    }

    .tab[b-9n5w1gncho] {
        flex: 1 1 0;
        min-width: 54px;
        padding: 0.6rem 0.4rem 0.5rem;
    }

        .tab.active[b-9n5w1gncho] {
            padding-top: 1.2rem;
        }

    .form-grid[b-9n5w1gncho] {
        grid-template-columns: 1fr;
    }

    .form-row[b-9n5w1gncho] {
        flex-direction: column;
        gap: 1rem;
    }

    .half-width[b-9n5w1gncho] {
        width: 100%;
    }
}

@media (max-width: 480px) {
    .add-pet-page[b-9n5w1gncho] {
        /*padding: 0.5rem;*/
    }

    .tab-navigation[b-9n5w1gncho] {
        /*padding: 0.35rem 0.3rem 0;*/
    }

    .tab[b-9n5w1gncho] {
        flex: 1 1 0;
        min-width: 44px;
        padding: 0.55rem 0.25rem 0.45rem;
    }

        .tab.active[b-9n5w1gncho] {
            padding-top: 1.1rem;
        }

    .tab-label[b-9n5w1gncho] {
        display: none;
    }

    .tab i[b-9n5w1gncho] {
        font-size: 1.4rem;
    }

    /* Icon-only header buttons on small screens */
    .header-btn[b-9n5w1gncho] {
        padding: 8px 12px;
        border-radius: 8px;
        font-size: 13px;
        gap: 0;
    }

    .btn-label[b-9n5w1gncho] {
        display: none;
    }
}

/* Tab Navigation */
.tab-navigation[b-9n5w1gncho] {
    display: flex;
    align-items: flex-end;
    overflow-x: auto;
    scrollbar-width: none;
}

    .tab-navigation[b-9n5w1gncho]::-webkit-scrollbar {
        display: none;
    }

.tab[b-9n5w1gncho] {
    padding: 0.7rem 0.55rem 0.55rem;
    flex: 1 1 0;
    min-width: 62px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: 0.3rem;
    text-align: center;
    font-weight: 500;
    font-size: 0.72rem;
    color: #64748b;
    cursor: pointer;
    background-color: #e2e8f0;
    border: 1px solid #c6cfdb;
    border-radius: 0.75rem 0.75rem 0 0;
    position: relative;
    z-index: 1;
    transition: background-color 0.2s, color 0.2s, padding-top 0.18s ease;
}

.tab i[b-9n5w1gncho] {
    font-size: 1.5rem;
    line-height: 1;
    color: #94a3b8;
}

/* Icon + badge wrapper */
.tab-icon-wrap[b-9n5w1gncho] {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.tab-badge[b-9n5w1gncho] {
    position: absolute;
    top: -6px;
    right: -8px;
    background: cadetblue;
    color: #fff;
    font-size: 0.55rem;
    font-weight: 700;
    min-width: 14px;
    height: 14px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 2px;
    line-height: 1;
}

    .tab.active[b-9n5w1gncho] {
        background-color: #ffffff;
        color: #d05a23;
        font-weight: 700;
        padding-top: 1.4rem;
        border: 2px solid #94a3b8;
        border-bottom: none;
        border-radius: 0.9rem 0.9rem 0 0;
        z-index: 3;
        margin-left: -3px;
        margin-right: -3px;
    }

        .tab.active i[b-9n5w1gncho] {
            color: #d05a23;
        }

    .tab:hover:not(.active)[b-9n5w1gncho] {
        background-color: #cbd5e1;
        color: #475569;
    }

.tab-lock-icon[b-9n5w1gncho] {
    font-size: 0.65rem;
    margin-left: 0.35rem;
    color: #94a3b8;
    vertical-align: middle;
}

.tab.active .tab-lock-icon[b-9n5w1gncho] {
    color: #3b82f6;
}

/* Tab Content */
.tab-content[b-9n5w1gncho] {
    background-color: #ffffff;
    border: 1px solid #e2e8f0;
    /*border-radius: 0 0 0.5rem 0.5rem;*/
    padding: 1.5rem;
    min-height: 300px;
}

/* Section Styling */
.section-header[b-9n5w1gncho] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

    .section-header h2[b-9n5w1gncho] {
        font-size: 1rem;
        font-weight: 600;
        margin: 0;
    }

.allergens-header[b-9n5w1gncho] {
    margin-top: 2rem;
}

/* Empty State */
.empty-state[b-9n5w1gncho] {
    padding: 2rem;
    text-align: center;
    background-color: #f8fafc;
    border: 1px dashed #e2e8f0;
    border-radius: 0.5rem;
    color: #94a3b8;
}

/* Form Styling */
.form-group[b-9n5w1gncho] {
    /*margin-bottom: 1rem;*/
}

.form-row[b-9n5w1gncho] {
    display: flex;
    gap: 1rem;
    margin-bottom: 1rem;
}
.form-check-input[b-9n5w1gncho]{
    border: solid 1px grey;
}
.half-width[b-9n5w1gncho] {
    width: calc(50% - 0.5rem);
}

label[b-9n5w1gncho] {
    display: block;
    font-weight: 500;
    font-size: 0.875rem;
    margin-bottom: 0.5rem;
}

.form-control[b-9n5w1gncho] {
    width: 100%;
    /*padding: 0.625rem*/;
    border: 2px solid #e2e8f0;
    /*border-radius: 0.25rem;*/
    font-size: 1rem;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

    .form-control:focus[b-9n5w1gncho] {
        outline: none;
        border-color: #93c5fd;
        box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
    }

textarea.form-control[b-9n5w1gncho] {
    resize: vertical;
    min-height: 80px;
}

/* Form Grid for Basic Info */
.form-grid[b-9n5w1gncho] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}

@media (max-width: 992px) {
    .form-grid[b-9n5w1gncho] {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Pet Avatar */
.pet-avatar-container[b-9n5w1gncho] {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-right: 2rem;
    margin-bottom: 1rem;
}

.pet-avatar[b-9n5w1gncho] {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background-color: #f1f5f9;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    margin-bottom: 0.5rem;
    border: 1px solid #e2e8f0;
}

/* Medical Conditions, Vaccinations, Medications, Allergens Lists */
.medical-list[b-9n5w1gncho],
.vaccination-list[b-9n5w1gncho],
.medication-list[b-9n5w1gncho],
.allergen-list[b-9n5w1gncho] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.medical-item[b-9n5w1gncho],
.vaccination-item[b-9n5w1gncho],
.medication-item[b-9n5w1gncho],
.allergen-item[b-9n5w1gncho] {
    padding: 1rem;
    border-radius: 0.5rem;
    border: 1px solid #e2e8f0;
    background-color: #ffffff;
}

.medical-item-header[b-9n5w1gncho],
.vaccination-item-header[b-9n5w1gncho],
.medication-item-header[b-9n5w1gncho],
.allergen-item-header[b-9n5w1gncho] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
}

    .medical-item-header h3[b-9n5w1gncho],
    .vaccination-item-header h3[b-9n5w1gncho],
    .medication-item-header h3[b-9n5w1gncho],
    .allergen-item-header h3[b-9n5w1gncho] {
        font-size: 1rem;
        font-weight: 600;
        margin: 0;
    }

.item-actions[b-9n5w1gncho] {
    display: flex;
    gap: 0.5rem;
}

.action-button[b-9n5w1gncho] {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1rem;
    color: #64748b;
    padding: 0.25rem;
}

    .action-button:hover[b-9n5w1gncho] {
        color: #0f172a;
    }

.medical-item-details[b-9n5w1gncho],
.vaccination-item-details[b-9n5w1gncho],
.medication-item-details[b-9n5w1gncho] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.medical-item-description[b-9n5w1gncho],
.vaccination-item-description[b-9n5w1gncho],
.medication-item-description[b-9n5w1gncho] {
    font-size: 0.75rem;
    color: #64748b;
    line-height: 1.5;
}

/* Allergen Specific Styling */
.allergen-item.severe[b-9n5w1gncho] {
    background-color: #fff1f2;
    border-color: #fda4af;
}

.allergen-item.moderate[b-9n5w1gncho] {
    background-color: #fef9c3;
    border-color: #fed7aa;
}

.allergen-item.mild[b-9n5w1gncho] {
    background-color: #f0fdf4;
    border-color: #bbf7d0;
}

.allergen-item-details[b-9n5w1gncho] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.detail-item[b-9n5w1gncho] {
    font-size: 0.75rem;
    color: #64748b;
    line-height: 1.5;
}

.detail-label[b-9n5w1gncho] {
    font-weight: 600;
    margin-right: 0.25rem;
}

/* Tags */
.tag[b-9n5w1gncho] {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.75rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 500;
}

    .tag.severe[b-9n5w1gncho] {
        background-color: #fecdd3;
        color: #e11d48;
    }

    .tag.moderate[b-9n5w1gncho] {
        background-color: #fef9c3;
        color: #ca8a04;
    }

    .tag.mild[b-9n5w1gncho] {
        background-color: #dcfce7;
        color: #16a34a;
    }

    .tag.light[b-9n5w1gncho] {
        background-color: #f1f5f9;
        color: #64748b;
    }

    .tag.dosage[b-9n5w1gncho] {
        background-color: #fee2e2;
        color: #ef4444;
    }

    .tag.frequency[b-9n5w1gncho] {
        background-color: #dbeafe;
        color: #3b82f6;
    }

    .tag.duration[b-9n5w1gncho] {
        background-color: #fef9c3;
        color: #ca8a04;
    }

    .tag.prescriber[b-9n5w1gncho] {
        background-color: #f1f5f9;
        color: #64748b;
    }

    .tag.administered[b-9n5w1gncho] {
        background-color: #bae6fd;
        color: #0284c7;
    }

    .tag.expiration[b-9n5w1gncho] {
        background-color: #fecdd3;
        color: #e11d48;
    }

    .tag.period[b-9n5w1gncho] {
        background-color: #dbeafe;
        color: #3b82f6;
    }

.severity-tag[b-9n5w1gncho] {
    padding: 0.25rem 0.75rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    margin-right: 0.75rem;
}

    .severity-tag.severe[b-9n5w1gncho] {
        background-color: #fecdd3;
        color: #e11d48;
    }

    .severity-tag.moderate[b-9n5w1gncho] {
        background-color: #fef9c3;
        color: #ca8a04;
    }

    .severity-tag.mild[b-9n5w1gncho] {
        background-color: #dcfce7;
        color: #16a34a;
    }

/* Bottom Navigation */
.bottom-navigation[b-9n5w1gncho] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    /*margin-top: 1rem;*/
    padding: 10px;
    border-top: 1px solid #cdbc76;
    background: white;
    border-radius: 0 0 0.5rem 0.5rem;
}

.required-notice[b-9n5w1gncho] {
    font-size: 0.75rem;
    color: #64748b;
}

/* Modal Styles */
.modal-container[b-9n5w1gncho] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.modal-content[b-9n5w1gncho] {
    background-color: #ffffff;
    border-radius: 0.5rem;
    width: 90%;
    max-width: 600px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

.modal-header[b-9n5w1gncho] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid #e2e8f0;
}

    .modal-header h2[b-9n5w1gncho] {
        font-size: 1.25rem;
        font-weight: 600;
        margin: 0;
    }

.medical-header[b-9n5w1gncho] {
    background-color: #f1f5f9;
}

.vaccination-header[b-9n5w1gncho] {
    background-color: #dbeafe;
}

.medication-header[b-9n5w1gncho] {
    background-color: #eff6ff;
}

.allergen-header[b-9n5w1gncho] {
    background-color: #fef2f2;
}

.close-button[b-9n5w1gncho] {
    background: none;
    border: none;
    font-size: 1.5rem;
    color: #64748b;
    cursor: pointer;
    line-height: 1;
}

.modal-body[b-9n5w1gncho] {
    padding: 1.5rem;
}

.modal-footer[b-9n5w1gncho] {
    display: flex;
    justify-content: flex-end;
    gap: 1rem;
    padding: 1rem 1.5rem;
    border-top: 1px solid #cdbc76;
    background-color: #f8fafc;
}

/* Button Styles */
.btn[b-9n5w1gncho] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.625rem 1.25rem;
    border-radius: 9999px;
    font-weight: 600;
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
}

.btn-small[b-9n5w1gncho] {
    padding: 0.375rem 0.75rem;
    font-size: 0.75rem;
}

.btn-primary[b-9n5w1gncho] {
    background-color: #3b82f6;
    color: #ffffff;
    background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
    border: none;
    color: white;
    padding: 0.6rem 1.3rem;
    /*border-radius: 12px;
    font-weight: 600;
    font-size: 0.85rem;
    cursor: pointer;*/
    display: flex;
    align-items: center;
    gap: 0.45rem;
    box-shadow: 0 4px 0 #c2410c, 0 6px 18px rgba(249, 115, 22, 0.35);
    transition: transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.15s ease;
}

    .btn-primary:hover[b-9n5w1gncho] {
        background-color: #c2410c;
        box-shadow: 0 4px 0 #c2410c, 0 6px 18px rgba(249, 115, 22, 0.35);
    }

.btn-outline-primary[b-9n5w1gncho] {
    background-color: #eff6ff;
    color: #3b82f6;
    border: 1px solid #bfdbfe;
}

    .btn-outline-primary:hover[b-9n5w1gncho] {
        background-color: #dbeafe;
    }

.btn-outline-secondary[b-9n5w1gncho] {
    background-color: #ffffff;
    color: #64748b;
    border: 1px solid #cbd5e1;
}

    .btn-outline-secondary:hover[b-9n5w1gncho] {
        background-color: #f1f5f9;
    }
/* =====================================================================
   BLOOD DONOR SECTION — Add to AddPet.razor.css
   ===================================================================== */

/* ── Section container ── */
.donor-section[b-9n5w1gncho] {
    margin-top: 2rem;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
}

/* ── Main card ── */
.donor-card[b-9n5w1gncho] {
    position: relative;
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    user-select: none;
}

    .donor-card:hover[b-9n5w1gncho] {
        transform: translateY(-2px);
        box-shadow: 0 10px 32px rgba(220, 38, 38, 0.22);
    }

.donor-card-inner[b-9n5w1gncho] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.1rem 1.25rem;
    /*background: linear-gradient(135deg, #1e293b 0%, #1a2540 100%);*/
    /*border: 2px solid #334155;*/
    border-radius: 14px;
    transition: border-color 0.3s ease, background 0.3s ease;
}

/* Blood-drop icon */
.donor-icon[b-9n5w1gncho] {
    flex-shrink: 0;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: rgba(220, 38, 38, 0.1);
    border: 2px solid rgba(220, 38, 38, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    transition: background 0.3s ease, border-color 0.3s ease;
}

.donor-card:hover .donor-icon[b-9n5w1gncho] {
    animation: heartbeat-b-9n5w1gncho 1s ease-in-out infinite;
}

/* Text area */
.donor-text[b-9n5w1gncho] {
    flex: 1;
    min-width: 0;
}

.donor-title[b-9n5w1gncho] {
    font-weight: 700;
    font-size: 1rem;
    color: black;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin-bottom: 0.2rem;
}

.donor-badge[b-9n5w1gncho] {
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    padding: 2px 8px;
    border-radius: 100px;
    background: rgba(220, 38, 38, 0.12);
    color: #f87171;
    border: 1px solid rgba(220, 38, 38, 0.28);
    white-space: nowrap;
}

.donor-subtitle[b-9n5w1gncho] {
    font-size: 0.8rem;
    color: #94a3b8;
    line-height: 1.4;
}

/* Toggle switch */
.donor-toggle[b-9n5w1gncho] {
    flex-shrink: 0;
}

.toggle-track[b-9n5w1gncho] {
    width: 50px;
    height: 27px;
    border-radius: 14px;
    background: #ffffff;
    border: 2px solid #475569;
    position: relative;
    transition: background 0.3s ease, border-color 0.3s ease;
}

.toggle-thumb[b-9n5w1gncho] {
    width: 19px;
    height: 19px;
    border-radius: 50%;
    background: #64748b;
    position: absolute;
    top: 2px;
    left: 2px;
    transition: transform 0.3s ease, background 0.3s ease;
    box-shadow: 0 1px 4px rgba(0,0,0,0.3);
}

/* ── DONOR ON state ── */
.donor-card.is-donor .donor-card-inner[b-9n5w1gncho] {
    /*background: linear-gradient(135deg, #1e0a0a 0%, #2d0f0f 60%, #1e1a0a 100%);*/
    /*border-color: rgba(220, 38, 38, 0.55);*/
}

.donor-card.is-donor .donor-icon[b-9n5w1gncho] {
    background: rgba(220, 38, 38, 0.22);
    border-color: rgba(220, 38, 38, 0.65);
    animation: heartbeat-b-9n5w1gncho 1.3s ease-in-out infinite;
}

.donor-card.is-donor .toggle-track[b-9n5w1gncho] {
    background: #dc2626;
    border-color: #ef4444;
}

.donor-card.is-donor .toggle-thumb[b-9n5w1gncho] {
    transform: translateX(23px);
    background: #fff;
}

.donor-card.is-donor[b-9n5w1gncho] {
    animation: glowPulse-b-9n5w1gncho 2.8s ease-in-out infinite;
}

/* ── Motivational hook strip ── */
.donor-hook[b-9n5w1gncho] {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    /*padding: 0.65rem 1.25rem;*/
    padding: 0;
    background: rgba(220, 38, 38, 0.06);
    /*border-top: 1px solid rgba(220, 38, 38, 0.14);*/
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    transition: opacity 0.3s ease, max-height 0.4s ease, padding 0.3s ease;
    pointer-events: none;
}

.donor-card.is-donor .donor-hook[b-9n5w1gncho] {
    opacity: 1;
    max-height: 70px;
    pointer-events: auto;
    padding: 0.65rem 1.25rem;
}

.hook-icon[b-9n5w1gncho] {
    font-size: 1rem;
    flex-shrink: 0;
    margin-top: 1px;
}

.hook-text[b-9n5w1gncho] {
    font-size: 0.78rem;
    color: #fca5a5;
    line-height: 1.5;
    font-style: italic;
}

/* ── Details panel ── */
.donor-details-panel[b-9n5w1gncho] {
    margin-top: 0.75rem;
    border-radius: 12px;
    /*background: linear-gradient(160deg, #1a0a0a 0%, #1e1520 100%);*/
    /*border: 1px solid rgba(220, 38, 38, 0.22);*/
    overflow: hidden;
    /* Blazor uses @if so visibility is controlled by DOM presence.
       Add an entry animation instead: */
    animation: slideDown-b-9n5w1gncho 0.35s ease;
}

@keyframes slideDown-b-9n5w1gncho {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }

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

.panel-header[b-9n5w1gncho] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.85rem 1.1rem 0.65rem;
    border-bottom: 1px solid rgba(220, 38, 38, 0.12);
}

.panel-header-icon[b-9n5w1gncho] {
    font-size: 0.95rem;
}

.panel-header-title[b-9n5w1gncho] {
    font-weight: 700;
    font-size: 0.78rem;
    color: #fca5a5;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.panel-header-sub[b-9n5w1gncho] {
    font-size: 0.72rem;
    color: #64748b;
    margin-left: auto;
}

.panel-body[b-9n5w1gncho] {
    padding: 1rem 1.1rem 1.1rem;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 0.9rem;
}

/* Donor address layout: full-address row / area+city+state row / pincode+landmark row */
.donor-addr-grid[b-9n5w1gncho] {
    grid-template-columns: repeat(6, 1fr);
}

.donor-addr-grid .floating-input:nth-child(1)[b-9n5w1gncho] { grid-column: 1 / -1; }

.donor-addr-grid .floating-input:nth-child(2)[b-9n5w1gncho],
.donor-addr-grid .floating-input:nth-child(3)[b-9n5w1gncho],
.donor-addr-grid .floating-input:nth-child(4)[b-9n5w1gncho] { grid-column: span 2; }

.donor-addr-grid .floating-input:nth-child(5)[b-9n5w1gncho],
.donor-addr-grid .floating-input:nth-child(6)[b-9n5w1gncho] { grid-column: span 3; }

/* Donor fields */
.donor-field[b-9n5w1gncho] {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.field-label[b-9n5w1gncho] {
    font-size: 0.72rem;
    font-weight: 600;
    color: #94a3b8;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.field-icon[b-9n5w1gncho] {
    font-size: 0.82rem;
}

.field-input[b-9n5w1gncho] {
    background: rgba(15, 23, 42, 0.7);
    border: 1.5px solid #334155;
    border-radius: 8px;
    padding: 0.55rem 0.8rem;
    font-size: 0.86rem;
    color: #e2e8f0;
    font-family: inherit;
    width: 100%;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    color-scheme: dark;
}

    .field-input:focus[b-9n5w1gncho] {
        outline: none;
        border-color: rgba(220, 38, 38, 0.55);
        box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1);
    }

/* Vaccination row */
.vaccination-row[b-9n5w1gncho] {
    /*grid-column: 1 / -1;*/
    display: flex;
    align-items: center;
    justify-content: space-between;
    /*background: rgba(15, 23, 42, 0.5);*/
    border: 2px solid #e2e8f0;
    border-radius: 10px;
    padding: 0rem 0.5rem;
    cursor: pointer;
    transition: border-color 0.25s ease, background 0.25s ease;
}

    .vaccination-row:hover[b-9n5w1gncho] {
        border-color: rgba(34, 197, 94, 0.3);
        background: rgba(21, 61, 38, 0.3);
    }

    .vaccination-row.vaccinated[b-9n5w1gncho] {
        border-color: rgba(34, 197, 94, 0.5);
        /*background: rgba(21, 61, 38, 0.3);*/
    }

.vacc-left[b-9n5w1gncho] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.vacc-icon[b-9n5w1gncho] {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    /*background: rgba(34, 197, 94, 0.08);*/
    /*border: 1.5px solid rgba(34, 197, 94, 0.18);*/
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    transition: background 0.25s, border-color 0.25s;
}

.vaccination-row.vaccinated .vacc-icon[b-9n5w1gncho] {
    /*background: rgba(34, 197, 94, 0.18);*/
    border-color: rgba(34, 197, 94, 0.45);
}

.vacc-text-title[b-9n5w1gncho] {
    font-weight: 600;
    font-size: 0.86rem;
    color: #2196f3;
}

.vacc-text-sub[b-9n5w1gncho] {
    font-size: 0.73rem;
    color: #16a34a;
    font-weight: bold;
}

.vaccination-row.vaccinated .vacc-text-sub[b-9n5w1gncho] {
    color: #16a34a;
}

.vacc-toggle .toggle-track[b-9n5w1gncho] {
    border-color: #1e3a2e;
}

.vaccination-row.vaccinated .vacc-toggle .toggle-track[b-9n5w1gncho] {
    background: #16a34a;
    border-color: #22c55e;
}

.vaccination-row.vaccinated .vacc-toggle .toggle-thumb[b-9n5w1gncho] {
    transform: translateX(23px);
    background: #fff;
}

/* Footer chips */
.panel-footer[b-9n5w1gncho] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    padding: 0.65rem 1.1rem;
    border-top: 1px solid rgba(220, 38, 38, 0.1);
    /*background: rgba(0,0,0,0.12);*/
}

.stat-chip[b-9n5w1gncho] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.65rem;
    border-radius: 100px;
    background: rgba(220, 38, 38, 0.07);
    border: 1px solid rgba(220, 38, 38, 0.14);
    font-size: 0.7rem;
    color: #f87171;
    font-weight: 600;
}

/* Neutered / Spayed row */
.check-row[b-9n5w1gncho] {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.7rem 1rem;
    border-radius: 10px;
    /*background: #1e293b;*/
    border: 2px solid #e2e8f0;
    cursor: pointer;
    font-size: 0.88rem;
    /*color: #e2e8f0;*/
    transition: border-color 0.2s ease;
}

    .check-row:hover[b-9n5w1gncho] {
        border-color: #475569;
    }
    /* Modifier */
    .check-row.no-border[b-9n5w1gncho] {
        border: none;
        padding: 0.7rem 1rem 0;
    }
.hidden-checkbox[b-9n5w1gncho] {
    display: none;
}

.check-visual[b-9n5w1gncho] {
    width: 18px;
    height: 18px;
    border-radius: 5px;
    border: 2px solid #a3aebd;
    background: transparent;
    transition: background 0.2s, border-color 0.2s;
    flex-shrink: 0;
    position: relative;
}

    .check-visual.checked[b-9n5w1gncho] {
        background: #6366f1;
        border-color: #6366f1;
    }

        .check-visual.checked[b-9n5w1gncho]::after {
            content: '✓';
            position: absolute;
            inset: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 0.7rem;
            font-weight: 700;
        }

.check-label[b-9n5w1gncho] {
    flex: 1;
    margin: 0;
    color: #6b7280;
}

/* ── Animations ── */
@keyframes heartbeat-b-9n5w1gncho {
    0%, 100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.12);
    }
}

@keyframes glowPulse-b-9n5w1gncho {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(220, 38, 38, 0);
    }

    50% {
        box-shadow: 0 0 18px 3px rgba(220, 38, 38, 0.18);
    }
}
/* ── Question row: "Do you know your pet's blood type?" ── */
.cbr-bt-question[b-9n5w1gncho] {
    flex: 1;
    min-width: 220px;
    margin-bottom: 12px;
}

.cbr-qa-label[b-9n5w1gncho] {
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 10px;
    color: #374151;
}

/* ── Yes / No toggle buttons ── */
.cbr-toggle-row[b-9n5w1gncho] {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.cbr-toggle-btn[b-9n5w1gncho] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 10px 18px;
    border-radius: 10px;
    border: 2px solid #e2e8f0;
    background: #f8fafc;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    color: #4b5563;
    transition: all .18s;
    white-space: nowrap;
    line-height: 1.4;
    appearance: none;
    -webkit-appearance: none;
    width:150px;
}

    .cbr-toggle-btn:hover[b-9n5w1gncho] {
        border-color: #fca5a5;
        background: #fff0f0;
    }

    /* "Yes, I know it" — green accent */
    .cbr-toggle-btn.active-yes[b-9n5w1gncho] {
        border-color: #1f9e5e;
        background: #e8f5e9;
        color: #1f9e5e;
    }

    /* "No, I don't know" — amber accent */
    .cbr-toggle-btn.active-no[b-9n5w1gncho] {
        border-color: #d4760c;
        background: #fff8e1;
        color: #d4760c;
    }

/* ── Blood type chip panel ── */
.cbr-bt-chip-panel[b-9n5w1gncho] {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 16px 20px;
    margin-top: 4px;
    margin-bottom: 8px;
    animation: cbrFadeSlide-b-9n5w1gncho .2s ease;
}

@keyframes cbrFadeSlide-b-9n5w1gncho {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }

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

.cbr-bt-group[b-9n5w1gncho] {
    margin-bottom: 14px;
}

    .cbr-bt-group:last-of-type[b-9n5w1gncho] {
        margin-bottom: 0;
    }

.cbr-bt-group-label[b-9n5w1gncho] {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .7px;
    text-transform: uppercase;
    color: #9ca3af;
    margin-bottom: 8px;
}

.cbr-bt-chips[b-9n5w1gncho] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.cbr-bt-chip[b-9n5w1gncho] {
    padding: 6px 14px;
    border-radius: 20px;
    border: 1.5px solid #e2e8f0;
    background: #ffffff;
    font-family: 'Courier New', monospace;
    font-size: 12px;
    cursor: pointer;
    transition: all .15s;
    color: #4b5563;
    user-select: none;
    line-height: 1.4;
    -webkit-appearance: none;
    appearance: none;
}

    .cbr-bt-chip:hover:not([disabled])[b-9n5w1gncho] {
        border-color: #fca5a5;
    }

    .cbr-bt-chip.sel[b-9n5w1gncho] {
        border-color: #dc2626;
        background: #fff0f0;
        color: #dc2626;
        font-weight: 700;
    }

    .cbr-bt-chip.disabled[b-9n5w1gncho],
    .cbr-bt-chip[disabled][b-9n5w1gncho] {
        opacity: .35;
        cursor: not-allowed;
    }

/* ── Selected summary + clear ── */
.cbr-bt-clear-row[b-9n5w1gncho] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid #e2e8f0;
    flex-wrap: wrap;
    gap: 8px;
}

.cbr-bt-selected-summary[b-9n5w1gncho] {
    font-size: 12px;
    color: #4b5563;
    font-weight: 500;
}

.cbr-bt-clear-btn[b-9n5w1gncho] {
    padding: 5px 14px;
    border-radius: 20px;
    border: 1px solid #e2e8f0;
    background: transparent;
    font-family: inherit;
    font-size: 12px;
    cursor: pointer;
    color: #9ca3af;
    transition: all .15s;
}

    .cbr-bt-clear-btn:hover[b-9n5w1gncho] {
        border-color: #dc2626;
        color: #dc2626;
    }

/* ── Unknown blood type info box ── */
.cbr-unknown-box[b-9n5w1gncho] {
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: 10px;
    padding: 12px 16px;
    font-size: 12px;
    color: #92400e;
    line-height: 1.7;
    margin-top: 4px;
    margin-bottom: 8px;
    animation: cbrFadeSlide-b-9n5w1gncho .2s ease;
}

    .cbr-unknown-box strong[b-9n5w1gncho] {
        color: #78350f;
    }

.cbr-unknown-tip[b-9n5w1gncho] {
    display: block;
    margin-top: 5px;
    font-style: italic;
}
/* Gender info icon — inline next to the * in the label */
.gender-info-icon[b-9n5w1gncho] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    color: #64748b;
    background: transparent;
    cursor: help;
    outline: none;
    vertical-align: middle;
    margin-left: 4px;
    position: relative;
    pointer-events: auto;
}

    .gender-info-icon i[b-9n5w1gncho] {
        font-size: 0.85rem;
        line-height: 1;
        pointer-events: none;
    }

    .gender-info-icon:hover[b-9n5w1gncho],
    .gender-info-icon:focus[b-9n5w1gncho] {
        color: #2563eb;
    }

.gender-info-tooltip[b-9n5w1gncho] {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    bottom: calc(100% + 8px);
    left: 0;
    background: #1e293b;
    color: #fff;
    font-size: 0.75rem;
    font-weight: 400;
    line-height: 1.4;
    padding: 8px 10px;
    border-radius: 6px;
    width: 260px;
    max-width: calc(100vw - 24px);
    z-index: 9999;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
    transition: opacity 0.15s ease;
    pointer-events: none;
    white-space: normal;
    text-align: left;
}

    .gender-info-tooltip[b-9n5w1gncho]::after {
        content: "";
        position: absolute;
        top: 100%;
        left: 8px;
        border: 5px solid transparent;
        border-top-color: #1e293b;
    }

.gender-info-icon:hover .gender-info-tooltip[b-9n5w1gncho],
.gender-info-icon:focus .gender-info-tooltip[b-9n5w1gncho],
.gender-info-icon:focus-within .gender-info-tooltip[b-9n5w1gncho] {
    visibility: visible;
    opacity: 1;
}

.blood-type-full-row[b-9n5w1gncho] {
    grid-column: 1 / -1; /* span every column of .form-grid */
    display: flex;
    flex-direction: column;
    gap: 12px;
}

    /* Ensure the chip panel and unknown box fill the full width inside it */
    .blood-type-full-row .cbr-bt-chip-panel[b-9n5w1gncho],
    .blood-type-full-row .cbr-unknown-box[b-9n5w1gncho] {
        width: 100%;
        box-sizing: border-box;
    }







/* ── Responsive ── */
@media (max-width: 540px) {
    .panel-body[b-9n5w1gncho] {
        grid-template-columns: 1fr;
        padding: 1rem 1.1rem 0 1.1rem;
    }

    .donor-addr-grid[b-9n5w1gncho] { grid-template-columns: 1fr; }

    .donor-addr-grid .floating-input:nth-child(n)[b-9n5w1gncho] { grid-column: 1; }

    .donor-card-inner[b-9n5w1gncho] {
        flex-wrap: wrap;
        gap: 0.75rem;
    }

    .panel-header-sub[b-9n5w1gncho] {
        display: none;
    }
    .cbr-toggle-btn[b-9n5w1gncho] {
        padding: 8px 14px;
        font-size: 12px;
        width: 140px;
    }


    .cbr-bt-question[b-9n5w1gncho] {
        min-width: 100%;
    }
}
/* Responsive Styles */
@media (max-width: 768px) {
    .page-header[b-9n5w1gncho] {
        flex-direction: column;
        align-items: flex-start;
    }

    .action-buttons[b-9n5w1gncho] {
        margin-top: 1rem;
        width: 100%;
    }

    .tab-navigation[b-9n5w1gncho] {
        flex-wrap: wrap;
    }

    /*.tab {
        flex-basis: 50%;
        font-size: 0.75rem;
        padding: 0.75rem 0.5rem;
    }*/
    .tab[b-9n5w1gncho] {
        flex-basis: 33.33%; /* 3 tabs per row on smaller screens */
        font-size: 0.75rem;
        padding: 0.75rem 0.5rem;
    }

        .tab.active[b-9n5w1gncho] {
            font-size: 0.875rem;
        }

    .pet-avatar-container[b-9n5w1gncho] {
        margin-right: 0;
        margin-bottom: 1.5rem;
    }

    .form-grid[b-9n5w1gncho] {
        grid-template-columns: 1fr;
    }

    .form-row[b-9n5w1gncho] {
        flex-direction: column;
        gap: 1rem;
    }

    .half-width[b-9n5w1gncho] {
        width: 100%;
    }

    .medical-item-details[b-9n5w1gncho],
    .vaccination-item-details[b-9n5w1gncho],
    .medication-item-details[b-9n5w1gncho] {
        flex-direction: column;
        align-items: flex-start;
    }

    .modal-content[b-9n5w1gncho] {
        width: 95%;
        max-height: 85vh;
    }
}

@media (max-width: 480px) {
    .tab-navigation[b-9n5w1gncho] {
        flex-wrap: nowrap;
        overflow-x: auto;
    }

    /*.tab {
        flex: 0 0 auto;
        padding: 0.75rem 1rem;
        white-space: nowrap;
    }*/
    .tab[b-9n5w1gncho] {
        flex: 0 0 auto;
        padding: 0.75rem 0.75rem;
        white-space: nowrap;
        min-width: 100px;
    }

    .bottom-navigation[b-9n5w1gncho] {
        flex-direction: column;
        gap: 1rem;
    }

        .bottom-navigation .action-button[b-9n5w1gncho] {
            width: 100%;
        }
}

/* Download Button */
.download-button[b-9n5w1gncho] {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    background-color: #3b82f6;
    color: white;
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    cursor: pointer;
    transition: transform 0.2s ease;
    z-index: 50;
}

    .download-button:hover[b-9n5w1gncho] {
        transform: scale(1.05);
    }

.download-icon[b-9n5w1gncho] {
    font-size: 1.5rem;
}

.download-options[b-9n5w1gncho] {
    position: fixed;
    bottom: 5rem;
    right: 1.5rem;
    background-color: white;
    border-radius: 0.5rem;
    padding: 0.5rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    z-index: 49;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.download-option[b-9n5w1gncho] {
    padding: 0.5rem 1rem;
    border-radius: 0.25rem;
    cursor: pointer;
    transition: background-color 0.2s ease;
    white-space: nowrap;
}

    .download-option:hover[b-9n5w1gncho] {
        background-color: #f1f5f9;
    }

.validation-summary[b-9n5w1gncho] {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem;
    /*margin: 1rem 0;*/
    background-color: #fef3cd;
    border: 1px solid #ffc107;
    /*border-radius: 0.5rem;*/
    color: #856404;
}

.validation-icon[b-9n5w1gncho] {
    font-size: 1.5rem;
    flex-shrink: 0;
}

.validation-message[b-9n5w1gncho] {
    flex: 1;
}

    .validation-message strong[b-9n5w1gncho] {
        display: block;
        margin-bottom: 0.5rem;
        color: #664d03;
    }

.validation-list[b-9n5w1gncho] {
    margin: 0;
    padding-left: 1.25rem;
    font-size: 0.875rem;
}

    .validation-list li[b-9n5w1gncho] {
        margin-bottom: 0.25rem;
    }

.tab-lock-icon[b-9n5w1gncho] {
    font-size: 0.65rem;
    margin-left: 0.35rem;
    color: #94a3b8;
    vertical-align: middle;
}

.tab.active .tab-lock-icon[b-9n5w1gncho] {
    color: #3b82f6;
}

/* Photos tab AI/lock badge + tooltip — mirror of EditPet.razor.css rules */
.tab-ai-badge[b-9n5w1gncho] {
    position: absolute;
    top: -9px;
    right: -10px;
    background: orangered;
    color: #ffffff;
    font-size: 0.7rem;
    font-weight: 700;
    min-width: 20px;
    height: 20px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 2px;
    line-height: 1;
    cursor: help;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}

.tab-ai-badge i[b-9n5w1gncho] {
    font-size: 0.7rem;
    color: #ffffff;
}

.tab-ai-tooltip[b-9n5w1gncho] {
    position: absolute;
    top: calc(100% + 10px);
    right: -10px;
    width: 280px;
    background: rgba(30, 41, 59, 0.96);
    color: #f1f5f9;
    font-size: 0.78rem;
    font-weight: 400;
    line-height: 1.45;
    padding: 10px 12px 10px 14px;
    border-radius: 8px;
    border-left: 4px solid #f79a6f;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
    white-space: normal;
    text-align: left;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition: opacity 0.15s ease, transform 0.15s ease, visibility 0s linear 0.15s;
    z-index: 9999;
    pointer-events: none;
}

.tab-ai-tooltip[b-9n5w1gncho]::before {
    content: "";
    position: absolute;
    top: -7px;
    right: 14px;
    border: 7px solid transparent;
    border-top: 0;
    border-bottom-color: #f79a6f;
}

.tab-ai-badge:hover .tab-ai-tooltip[b-9n5w1gncho] {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition: opacity 0.15s ease, transform 0.15s ease, visibility 0s;
}

/* Tab-navigation uses overflow-x: auto, which clips the tooltip vertically too.
   When the badge is hovered, let the navigation overflow so the tooltip is visible. */
.tab-navigation:has(.tab-ai-badge:hover)[b-9n5w1gncho] {
    overflow: visible;
    z-index: 9999;
}

/* Images-tab progress badge — distinct from the cadetblue .tab-badge used by
   other tabs (Vaccinations, Conditions, etc.) so the count never blends in.
   Three states:
   - --alert (count < 4 required): red, urgent — required slots missing.
   - --ok    (count >= 4):          emerald — required slots filled.
   - --shield (Lost & Found AI active, R2): emerald gradient shield, no count.
   Hidden when the Images tab is active — the in-tab progress strip already
   shows the same information at higher fidelity. */
.tab-progress-badge[b-9n5w1gncho] {
    position: absolute;
    top: -7px;
    right: -10px;
    min-width: 22px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    color: #ffffff;
    font-size: 0.62rem;
    font-weight: 700;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* Punch-out ring matches the inactive tab background. */
    box-shadow: 0 0 0 2px #e2e8f0;
    cursor: help;
}

.tab-progress-badge--alert[b-9n5w1gncho] {
    background: #dc2626;
}

.tab-progress-badge--ok[b-9n5w1gncho] {
    background: #10b981;
}

.tab-progress-badge--shield[b-9n5w1gncho] {
    background: linear-gradient(135deg, #059669 0%, #10b981 100%);
    min-width: 18px;
    padding: 0;
}

.tab-progress-badge--shield i[b-9n5w1gncho] {
    font-size: 0.65rem;
}

/* Active tab is white — adapt the punched-out ring so the badge still
   reads as separated from its host. */
.tab.active .tab-progress-badge[b-9n5w1gncho] {
    box-shadow: 0 0 0 2px #ffffff;
}

/* Tooltip — slate bg, appears below the badge on hover/focus. */
.tab-progress-tooltip[b-9n5w1gncho] {
    position: absolute;
    top: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    background: #0f172a;
    color: #f1f5f9;
    padding: 0.35rem 0.6rem;
    border-radius: 0.35rem;
    font-size: 0.7rem;
    font-weight: 500;
    white-space: nowrap;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
    visibility: hidden;
    opacity: 0;
    transition: visibility 0s linear 0.15s, opacity 0.15s ease;
    pointer-events: none;
    z-index: 30;
}

.tab-progress-tooltip[b-9n5w1gncho]::after {
    content: "";
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-bottom-color: #0f172a;
}

.tab-progress-badge:hover .tab-progress-tooltip[b-9n5w1gncho],
.tab-progress-badge:focus-visible .tab-progress-tooltip[b-9n5w1gncho],
.tab:hover .tab-progress-tooltip[b-9n5w1gncho],
.tab:focus-visible .tab-progress-tooltip[b-9n5w1gncho] {
    visibility: visible;
    opacity: 1;
    transition-delay: 0s;
}

/* Tab strip clips overflow by default; let it expand when the tooltip
   is showing. Same trick the legacy .tab-ai-badge used. */
.tab-navigation:has(.tab-progress-badge:hover)[b-9n5w1gncho],
.tab-navigation:has(.tab:hover)[b-9n5w1gncho] {
    overflow: visible;
}
/* /Pages/Pets/EditPet.razor.rz.scp.css */
/* Edit Pet Page Styles */
.edit-pet-page[b-7t5th1c7q8] {
    /*    border-top-left-radius: 10px;
    border-top-right-radius: 10px;*/
    max-width: 1200px;
    margin: 0 auto;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    /*background: linear-gradient(135deg, #1e293bf2 10%, #3341557d 100%);*/
    /*background: linear-gradient(135deg, rgba(30, 41, 59, 0.95) 10%, rgba(30, 41, 59, 0.95) 100%);*/
    border-radius: 10px;
    background: #ffefdba6;
    border: 2px solid #fed7aa;
    overflow: hidden;
}
/* Page Header */
.page-header[b-7t5th1c7q8] {
    /*background-color: #60707a;*/
    /*background: linear-gradient(135deg, #1e293b70 0%, #3341557d 100%);*/
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 10px;
    padding-bottom: 5px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    background: linear-gradient(155deg, #000000b8 0%, #833a1ea8 100%);
    color: #ffde59;
}

.header-content[b-7t5th1c7q8] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    /*background-color: #ffffff;*/
    /*padding: 1.5rem;*/
    border-radius: 10px;
    /*box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);*/
}

.header-left[b-7t5th1c7q8] {
    display: flex;
    flex-direction: column;
}



/* Back Navigation Link */
.back-link[b-7t5th1c7q8] {
    display: inline-flex;
    align-items: center;
    /*color: #2196f3;*/
    cursor: pointer;
    /*margin-bottom: 1rem;*/
    font-size: 0.875rem;
}

    .back-link:hover[b-7t5th1c7q8] {
        color: #2196f3;
        font-weight: bolder;
        text-decoration: underline;
    }

.back-icon[b-7t5th1c7q8] {
    margin-right: 0.5rem;
}

.page-title[b-7t5th1c7q8] {
    font-size: 1.75rem;
    font-weight: 700;
    margin: 0 0 0.5rem 0;
}

.header-right[b-7t5th1c7q8] {
    display: flex;
    flex-direction: row;
    gap: 5px;
}

.action-buttons[b-7t5th1c7q8] {
    display: flex;
    gap: 0.75rem;
}

    .action-buttons button[b-7t5th1c7q8] {
        /*padding: 0.375rem 0.75rem;*/
        border-radius: 3rem;
        /*font-size: 0.75rem;*/
        font-weight: 600;
        cursor: pointer;
        border: none;
        transition: all 0.2s ease;
    }

.header-btn[b-7t5th1c7q8] {
    backdrop-filter: blur(10px);
    padding: 8px 12px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
}

    .header-btn:hover[b-7t5th1c7q8] {
        transform: translateY(-2px);
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
        font-weight: bolder;
    }

.header-save-btn[b-7t5th1c7q8] {
    background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
    border: none;
    color: white;
    padding: 0.6rem 1.3rem;
    border-radius: 12px;
    font-weight: 600;
    font-size: 0.85rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.45rem;
    box-shadow: 0 4px 0 #c2410c, 0 6px 18px rgba(249, 115, 22, 0.35);
    transition: transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.15s ease;
}

    .header-save-btn:hover[b-7t5th1c7q8] {
        background: #c2410c;
    }

.header-delete-btn[b-7t5th1c7q8] {
    background: #dc2626;
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #ffffff;
    box-shadow: 0 1px 0 #ffffff, 0 6px 18px rgba(249, 115, 22, 0.35);
}

    .header-delete-btn:hover[b-7t5th1c7q8] {
        font-weight: bolder;
        transform: translateY(-2px);
    }

.header-cancel-btn[b-7t5th1c7q8] {
    background: #64748b;
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #ffffff;
    box-shadow: 0 1px 0 #ffffff, 0 6px 18px rgba(249, 115, 22, 0.35);
}

    .header-cancel-btn:hover[b-7t5th1c7q8] {
        font-weight: bolder;
        transform: translateY(-2px);
    }




/* Main Content */
.main-content[b-7t5th1c7q8] {
    /*max-width: 1024px;*/
    /*margin: 0 auto;
    padding: 1.5rem;*/
    /*    margin-top: 2rem;
    padding-left: 20px;
    padding-right: 20px;*/
}

/* Loading and Error States */
.loading-container[b-7t5th1c7q8],
.error-container[b-7t5th1c7q8] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 1rem;
    text-align: center;
}

    .loading-container p[b-7t5th1c7q8],
    .error-container p[b-7t5th1c7q8] {
        margin-top: 1rem;
        color: #64748b;
    }

.error-message[b-7t5th1c7q8] {
    color: #dc2626;
    font-weight: 500;
}

.warning-text[b-7t5th1c7q8] {
    color: #dc2626;
    font-size: 0.875rem;
    margin-top: 0.5rem;
}

/* Tab Navigation */
.tab-navigation[b-7t5th1c7q8] {
    display: flex;
    align-items: flex-end;
    /*background-color: #f1f5f9;*/
    /*border-radius: 0.75rem 0.75rem 0 0;*/
    /*padding: 0.3rem 0.3rem 0;*/
    gap: 0;
    overflow-x: auto;
    scrollbar-width: none;
}

    .tab-navigation[b-7t5th1c7q8]::-webkit-scrollbar {
        display: none;
    }

.tab[b-7t5th1c7q8] {
    padding: 0.7rem 0.55rem 0.55rem;
    flex: 1 1 0;
    min-width: 62px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: 0.3rem;
    text-align: center;
    font-weight: 500;
    font-size: 0.72rem;
    color: #64748b;
    cursor: pointer;
    background-color: #e2e8f0;
    border-radius: 0.75rem 0.75rem 0 0;
    position: relative;
    z-index: 1;
    transition: background-color 0.2s, color 0.2s, padding-top 0.18s ease;
    border: 1px #64748b26 solid;
}

    .tab i[b-7t5th1c7q8] {
        font-size: 1.5rem;
        line-height: 1;
        color: #94a3b8;
    }

/* Icon + badge wrapper — badge sits as superscript in top-right corner */
.tab-icon-wrap[b-7t5th1c7q8] {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.tab-badge[b-7t5th1c7q8] {
    position: absolute;
    top: -6px;
    right: -8px;
    background: cadetblue;
    color: #fff;
    font-size: 0.55rem;
    font-weight: 700;
    min-width: 14px;
    height: 14px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 2px;
    line-height: 1;
}

.tab.active[b-7t5th1c7q8] {
    background-color: #ffffff;
    color: #d05a23;
    font-weight: 700;
    padding-top: 1.4rem;
    border: 2px solid #94a3b8;
    border-bottom: none;
    border-radius: 0.9rem 0.9rem 0 0;
    z-index: 3;
    margin-left: -3px;
    margin-right: -3px;
}

    .tab.active i[b-7t5th1c7q8] {
        color: #d05a23;
    }

.tab:hover:not(.active)[b-7t5th1c7q8] {
    background-color: #cbd5e1;
    color: #475569;
}

/* Tab Content */
.tab-content[b-7t5th1c7q8] {
    background-color: #ffffff;
    border: 1px solid #e2e8f0;
    /*border-radius: 0 0 0.5rem 0.5rem;*/
    padding: 1.5rem;
    min-height: 300px;
}

/* Pet Photo */
.pet-photo[b-7t5th1c7q8] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

/* Section Styling */
.section-header[b-7t5th1c7q8] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

    .section-header h2[b-7t5th1c7q8] {
        font-size: 1rem;
        font-weight: 600;
        margin: 0;
        color: #1e293b;
    }

.allergens-header[b-7t5th1c7q8] {
    margin-top: 2rem;
}

/* Empty State */
.empty-state[b-7t5th1c7q8] {
    padding: 2rem;
    text-align: center;
    background-color: #f8fafc;
    border: 1px dashed #e2e8f0;
    border-radius: 0.5rem;
    color: #94a3b8;
}

/* Form Styling */
.form-group[b-7t5th1c7q8] {
    /*margin-bottom: 1rem;*/
}

.form-row[b-7t5th1c7q8] {
    display: flex;
    gap: 1rem;
    margin-bottom: 1rem;
}

.half-width[b-7t5th1c7q8] {
    width: calc(50% - 0.5rem);
}

label[b-7t5th1c7q8] {
    display: block;
    font-weight: 500;
    font-size: 0.875rem;
    margin-bottom: 0.5rem;
    color: #374151;
}

.form-control[b-7t5th1c7q8] {
    width: 100%;
    /*padding: 0.625rem*/;
    border: 2px solid #e2e8f0;
    /*border-radius: 0.25rem;*/
    font-size: 1rem;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

    .form-control:focus[b-7t5th1c7q8] {
        outline: none;
        border-color: #93c5fd;
        box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
    }

textarea.form-control[b-7t5th1c7q8] {
    resize: vertical;
    min-height: 80px;
}

/* Form Grid for Basic Info */
.form-grid[b-7t5th1c7q8] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}

@media (max-width: 992px) {
    .form-grid[b-7t5th1c7q8] {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Pet Avatar */
.pet-avatar-container[b-7t5th1c7q8] {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-right: 2rem;
    margin-bottom: 1rem;
}

.pet-avatar[b-7t5th1c7q8] {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background-color: #f1f5f9;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    margin-bottom: 0.5rem;
    border: 2px solid #e2e8f0;
    overflow: hidden;
    position: relative;
}

/* Medical Conditions, Vaccinations, Medications, Allergens Lists */
.medical-list[b-7t5th1c7q8],
.vaccination-list[b-7t5th1c7q8],
.medication-list[b-7t5th1c7q8],
.allergen-list[b-7t5th1c7q8] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.medical-item[b-7t5th1c7q8],
.vaccination-item[b-7t5th1c7q8],
.medication-item[b-7t5th1c7q8],
.allergen-item[b-7t5th1c7q8] {
    padding: 1rem;
    border-radius: 0.5rem;
    border: 1px solid #e2e8f0;
    background-color: #ffffff;
    transition: box-shadow 0.2s ease;
}

    .medical-item:hover[b-7t5th1c7q8],
    .vaccination-item:hover[b-7t5th1c7q8],
    .medication-item:hover[b-7t5th1c7q8],
    .allergen-item:hover[b-7t5th1c7q8] {
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }

.medical-item-header[b-7t5th1c7q8],
.vaccination-item-header[b-7t5th1c7q8],
.medication-item-header[b-7t5th1c7q8],
.allergen-item-header[b-7t5th1c7q8] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
}

    .medical-item-header h3[b-7t5th1c7q8],
    .vaccination-item-header h3[b-7t5th1c7q8],
    .medication-item-header h3[b-7t5th1c7q8],
    .allergen-item-header h3[b-7t5th1c7q8] {
        font-size: 1rem;
        font-weight: 600;
        margin: 0;
        color: #1e293b;
    }

.item-actions[b-7t5th1c7q8] {
    display: flex;
    gap: 0.5rem;
}

.action-button[b-7t5th1c7q8] {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1rem;
    color: #64748b;
    padding: 0.25rem;
    border-radius: 0.25rem;
    transition: all 0.2s ease;
}

    .action-button:hover[b-7t5th1c7q8] {
        color: #0f172a;
        background-color: #f1f5f9;
    }

.medical-item-details[b-7t5th1c7q8],
.vaccination-item-details[b-7t5th1c7q8],
.medication-item-details[b-7t5th1c7q8] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.medical-item-description[b-7t5th1c7q8],
.vaccination-item-description[b-7t5th1c7q8],
.medication-item-description[b-7t5th1c7q8] {
    font-size: 0.875rem;
    color: #64748b;
    line-height: 1.5;
}

/* Allergen Specific Styling */
.allergen-item.severe[b-7t5th1c7q8] {
    background-color: #fff1f2;
    border-color: #fda4af;
}

.allergen-item.moderate[b-7t5th1c7q8] {
    background-color: #fef9c3;
    border-color: #fed7aa;
}

.allergen-item.mild[b-7t5th1c7q8] {
    background-color: #f0fdf4;
    border-color: #bbf7d0;
}

.allergen-item-details[b-7t5th1c7q8] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.detail-item[b-7t5th1c7q8] {
    font-size: 0.875rem;
    color: #64748b;
    line-height: 1.5;
}

.detail-label[b-7t5th1c7q8] {
    font-weight: 600;
    margin-right: 0.25rem;
    color: #374151;
}

/* Tags */
.tag[b-7t5th1c7q8] {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.75rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 500;
    white-space: nowrap;
}

    .tag.severe[b-7t5th1c7q8] {
        background-color: #fecdd3;
        color: #e11d48;
    }

    .tag.moderate[b-7t5th1c7q8] {
        background-color: #fef9c3;
        color: #ca8a04;
    }

    .tag.mild[b-7t5th1c7q8] {
        background-color: #dcfce7;
        color: #16a34a;
    }

    .tag.light[b-7t5th1c7q8] {
        background-color: #f1f5f9;
        color: #64748b;
    }

    .tag.dosage[b-7t5th1c7q8] {
        background-color: #fee2e2;
        color: #ef4444;
    }

    .tag.frequency[b-7t5th1c7q8] {
        background-color: #dbeafe;
        color: #3b82f6;
    }

    .tag.duration[b-7t5th1c7q8] {
        background-color: #fef9c3;
        color: #ca8a04;
    }

    .tag.prescriber[b-7t5th1c7q8] {
        background-color: #f1f5f9;
        color: #64748b;
    }

    .tag.administered[b-7t5th1c7q8] {
        background-color: #bae6fd;
        color: #0284c7;
    }

    .tag.expiration[b-7t5th1c7q8] {
        background-color: #fecdd3;
        color: #e11d48;
    }

    .tag.period[b-7t5th1c7q8] {
        background-color: #dbeafe;
        color: #3b82f6;
    }

.severity-tag[b-7t5th1c7q8] {
    padding: 0.25rem 0.75rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    margin-right: 0.75rem;
}

    .severity-tag.severe[b-7t5th1c7q8] {
        background-color: #fecdd3;
        color: #e11d48;
    }

    .severity-tag.moderate[b-7t5th1c7q8] {
        background-color: #fef9c3;
        color: #ca8a04;
    }

    .severity-tag.mild[b-7t5th1c7q8] {
        background-color: #dcfce7;
        color: #16a34a;
    }

/* Bottom Navigation */
.bottom-navigation[b-7t5th1c7q8] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    /*margin-top: 1rem;*/
    padding: 10px;
    border-top: 1px solid #cdbc76;
    background: white;
    border-radius: 0 0 0.5rem 0.5rem;
}

.last-updated[b-7t5th1c7q8] {
    font-size: 0.75rem;
    color: #64748b;
    font-style: italic;
}

/* Modal Styles */
.modal-container[b-7t5th1c7q8] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.modal-content[b-7t5th1c7q8] {
    background-color: #ffffff;
    border-radius: 0.5rem;
    width: 90%;
    max-width: 600px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

.modal-header[b-7t5th1c7q8] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid #e2e8f0;
}

    .modal-header h2[b-7t5th1c7q8] {
        font-size: 1.25rem;
        font-weight: 600;
        margin: 0;
        color: #1e293b;
    }

.medical-header[b-7t5th1c7q8] {
    background-color: #f1f5f9;
}

.vaccination-header[b-7t5th1c7q8] {
    background-color: #dbeafe;
}

.medication-header[b-7t5th1c7q8] {
    background-color: #eff6ff;
}

.allergen-header[b-7t5th1c7q8] {
    background-color: #fef2f2;
}

.delete-header[b-7t5th1c7q8] {
    background-color: #fef2f2;
    border-bottom-color: #fca5a5;
}

.close-button[b-7t5th1c7q8] {
    background: none;
    border: none;
    font-size: 1.5rem;
    color: #64748b;
    cursor: pointer;
    line-height: 1;
    transition: color 0.2s ease;
}

    .close-button:hover[b-7t5th1c7q8] {
        color: #0f172a;
    }

.modal-body[b-7t5th1c7q8] {
    padding: 1.5rem;
}

.modal-footer[b-7t5th1c7q8] {
    display: flex;
    justify-content: flex-end;
    gap: 1rem;
    padding: 1rem 1.5rem;
    border-top: 1px solid #e2e8f0;
    background-color: #f8fafc;
}

/* Button Styles */
.btn[b-7t5th1c7q8] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.625rem 1.25rem;
    border-radius: 9999px;
    font-weight: 600;
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
    text-decoration: none;
}

    .btn:disabled[b-7t5th1c7q8] {
        opacity: 0.6;
        cursor: not-allowed;
    }

.btn-small[b-7t5th1c7q8] {
    padding: 0.375rem 0.75rem;
    font-size: 0.75rem;
}


.header-save-btn[b-7t5th1c7q8] {
    background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
    border: none;
    color: white;
    padding: 0.6rem 1.3rem;
    border-radius: 12px;
    font-weight: 600;
    font-size: 0.85rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.45rem;
    box-shadow: 0 4px 0 #c2410c, 0 6px 18px rgba(249, 115, 22, 0.35);
    transition: transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.15s ease;
}

    .header-save-btn:hover[b-7t5th1c7q8] {
        background: #c2410c;
    }


.btn-primary[b-7t5th1c7q8] {
    /*background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
    color: #ffffff;*/
    background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
    border: none;
    color: white;
    padding: 0.6rem 1.3rem;
    /*border-radius: 12px;
    font-weight: 600;
    font-size: 0.85rem;
    cursor: pointer;*/
    display: flex;
    align-items: center;
    gap: 0.45rem;
    box-shadow: 0 4px 0 #c2410c, 0 6px 18px rgba(249, 115, 22, 0.35);
    transition: transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.15s ease;
}

    .btn-primary:hover:not(:disabled)[b-7t5th1c7q8] {
        background: #c2410c;
    }

.btn-danger[b-7t5th1c7q8] {
    background-color: #dc2626;
    color: #ffffff;
}

    .btn-danger:hover:not(:disabled)[b-7t5th1c7q8] {
        background-color: #b91c1c;
    }

.btn-outline-primary[b-7t5th1c7q8] {
    background-color: #eff6ff;
    color: #3b82f6;
    border: 1px solid #bfdbfe;
}

    .btn-outline-primary:hover:not(:disabled)[b-7t5th1c7q8] {
        background-color: #dbeafe;
    }

.btn-outline-secondary[b-7t5th1c7q8] {
    background-color: #ffffff;
    color: #64748b;
    border: 1px solid #cbd5e1;
}

    .btn-outline-secondary:hover:not(:disabled)[b-7t5th1c7q8] {
        background-color: #f1f5f9;
    }

/* Spinner */
.spinner-border[b-7t5th1c7q8] {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    vertical-align: text-bottom;
    border: 0.125rem solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: spinner-border-b-7t5th1c7q8 0.75s linear infinite;
}

.spinner-border-sm[b-7t5th1c7q8] {
    width: 0.875rem;
    height: 0.875rem;
    border-width: 0.125rem;
}

@keyframes spinner-border-b-7t5th1c7q8 {
    to {
        transform: rotate(360deg);
    }
}

/* Form Check (Checkboxes) */
.form-check-input[b-7t5th1c7q8] {
    margin: 0;
    flex-shrink: 0;
    margin-top: 2px;
    border-color: red;
}
/*.form-check {
    display: flex;
    align-items: center;
    margin-bottom: 0.5rem;
}

.form-check-input {
    margin-right: 0.5rem;
    width: 1rem;
    height: 1rem;
}

.form-check-label {
    font-size: 0.875rem;
    color: #374151;
    margin-bottom: 0;
}
*/
.row[b-7t5th1c7q8] {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -0.5rem;
}

.col-md-6[b-7t5th1c7q8] {
    flex: 0 0 50%;
    max-width: 50%;
    padding: 0 0.5rem;
}
/* Floating Label Styles */

/* Responsive Styles */
@media (max-width: 768px) {
    .page-header[b-7t5th1c7q8] {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }

    .page-title[b-7t5th1c7q8] {
        font-size: 1.25rem;
    }

    .action-buttons[b-7t5th1c7q8] {
        width: 100%;
        justify-content: space-between;
    }

    .tab-navigation[b-7t5th1c7q8] {
        padding: 0.4rem 0.4rem 0;
    }

    .tab[b-7t5th1c7q8] {
        flex: 1 1 0;
        min-width: 54px;
        padding: 0.6rem 0.4rem 0.5rem;
    }

        .tab.active[b-7t5th1c7q8] {
            padding-top: 1.2rem;
        }

    .pet-avatar-container[b-7t5th1c7q8] {
        margin-right: 0;
        margin-bottom: 1.5rem;
    }

    .form-grid[b-7t5th1c7q8] {
        grid-template-columns: 1fr;
        /*gap:0;*/
    }

    .form-row[b-7t5th1c7q8] {
        flex-direction: column;
        gap: 1rem;
    }

    .half-width[b-7t5th1c7q8] {
        width: 100%;
    }

    .medical-item-details[b-7t5th1c7q8],
    .vaccination-item-details[b-7t5th1c7q8],
    .medication-item-details[b-7t5th1c7q8] {
        flex-direction: column;
        align-items: flex-start;
    }

    .modal-content[b-7t5th1c7q8] {
        width: 95%;
        max-height: 85vh;
    }

    .bottom-navigation[b-7t5th1c7q8] {
        gap: 1rem;
        text-align: center;
    }

    .col-md-6[b-7t5th1c7q8] {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

@media (max-width: 480px) {
    .edit-pet-page[b-7t5th1c7q8] {
        /*padding: 0.5rem;*/
    }

    .tab-navigation[b-7t5th1c7q8] {
        padding: 0;
    }

    /* Icon-only tabs on small screens */
    .tab[b-7t5th1c7q8] {
        flex: 1 1 0;
        min-width: 44px;
        padding: 0.55rem 0.25rem 0.45rem;
    }

        .tab.active[b-7t5th1c7q8] {
            padding-top: 1.1rem;
        }

    .tab-label[b-7t5th1c7q8] {
        display: none;
    }

    .tab i[b-7t5th1c7q8] {
        font-size: 1.4rem;
    }

    /* Compact icon-only header buttons */
    .header-btn[b-7t5th1c7q8] {
        padding: 8px 12px;
        border-radius: 8px;
        font-size: 13px;
        gap: 0;
    }

    .btn-label[b-7t5th1c7q8] {
        display: none;
    }

    .bottom-navigation .action-button[b-7t5th1c7q8] {
        /*width: 100%;*/
    }

    .pet-avatar[b-7t5th1c7q8] {
        width: 80px;
        height: 80px;
        font-size: 2rem;
    }

    .bottom-navigation[b-7t5th1c7q8] {
        flex-direction: row;
        text-align: center;
    }
}

/* Enhanced focus states for accessibility */
.btn:focus[b-7t5th1c7q8],
.form-control:focus[b-7t5th1c7q8],
.tab:focus[b-7t5th1c7q8] {
    outline: 2px solid #3b82f6;
    outline-offset: 2px;
}

/* Improved contrast for better readability */
.medical-item-description[b-7t5th1c7q8],
.vaccination-item-description[b-7t5th1c7q8],
.medication-item-description[b-7t5th1c7q8] {
    color: #4b5563;
}

/* Better visual hierarchy */
.section-header h2[b-7t5th1c7q8] {
    border-bottom: 2px solid #e2e8f0;
    padding-bottom: 0.5rem;
}

.badge-pill[b-7t5th1c7q8] {
    background-color: cadetblue;
    border-radius: 50%;
    /*font-size: 0.6rem;*/
    min-width: 1rem;
    height: 1rem;
    align-items: center;
    justify-content: center;
    /*padding: 0.25rem;*/
}

.tab-lock-icon[b-7t5th1c7q8] {
    position: absolute;
    top: -6px;
    right: -8px;
    font-size: 0.55rem;
    min-width: 14px;
    height: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    color: darkgoldenrod !important;
    vertical-align: middle;
}

.tab-ai-badge[b-7t5th1c7q8] {
    position: absolute;
    top: -9px;
    right: -10px;
    background: orangered;
    color: #ffffff;
    font-size: 0.7rem;
    font-weight: 700;
    min-width: 20px;
    height: 20px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 2px;
    line-height: 1;
    cursor: help;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}

    .tab-ai-badge i[b-7t5th1c7q8] {
        font-size: 0.7rem;
        color: #ffffff;
    }

.tab-ai-tooltip[b-7t5th1c7q8] {
    position: absolute;
    top: calc(100% + 10px);
    right: -10px;
    width: 280px;
    background: rgba(30, 41, 59, 0.96);
    color: #f1f5f9;
    font-size: 0.78rem;
    font-weight: 400;
    line-height: 1.45;
    padding: 10px 12px 10px 14px;
    border-radius: 8px;
    border-left: 4px solid #f79a6f;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
    white-space: normal;
    text-align: left;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition: opacity 0.15s ease, transform 0.15s ease, visibility 0s linear 0.15s;
    z-index: 9999;
    pointer-events: none;
}

    .tab-ai-tooltip[b-7t5th1c7q8]::before {
        content: "";
        position: absolute;
        top: -7px;
        right: 14px;
        border: 7px solid transparent;
        border-top: 0;
        border-bottom-color: #f79a6f;
    }

.tab-ai-badge:hover .tab-ai-tooltip[b-7t5th1c7q8] {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition: opacity 0.15s ease, transform 0.15s ease, visibility 0s;
}

/* Tab-navigation uses overflow-x: auto, which clips the tooltip vertically too.
   When the badge is hovered, let the navigation overflow so the tooltip is visible. */
.tab-navigation:has(.tab-ai-badge:hover)[b-7t5th1c7q8] {
    overflow: visible;
    z-index: 9999;
}

.tab.active .tab-lock-icon[b-7t5th1c7q8] {
    color: darkgoldenrod !important;
}

/* ===================================================================== */
/* Donor + Blood-Type sections — copied from AddPet.razor.css to keep */
/* the Edit Pet page visually identical to Add Pet for these sections.    */
/* ===================================================================== */
/* =====================================================================
   BLOOD DONOR SECTION — Add to AddPet.razor.css
   ===================================================================== */

/* ── Section container ── */
.donor-section[b-7t5th1c7q8] {
    margin-top: 2rem;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
}

/* ── Main card ── */
.donor-card[b-7t5th1c7q8] {
    position: relative;
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    user-select: none;
}

    .donor-card:hover[b-7t5th1c7q8] {
        transform: translateY(-2px);
        box-shadow: 0 10px 32px rgba(220, 38, 38, 0.22);
    }

.donor-card-inner[b-7t5th1c7q8] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.1rem 1.25rem;
    /*background: linear-gradient(135deg, #1e293b 0%, #1a2540 100%);*/
    /*border: 2px solid #334155;*/
    border-radius: 14px;
    transition: border-color 0.3s ease, background 0.3s ease;
}

/* Blood-drop icon */
.donor-icon[b-7t5th1c7q8] {
    flex-shrink: 0;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: rgba(220, 38, 38, 0.1);
    border: 2px solid rgba(220, 38, 38, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    transition: background 0.3s ease, border-color 0.3s ease;
}

.donor-card:hover .donor-icon[b-7t5th1c7q8] {
    animation: heartbeat-b-7t5th1c7q8 1s ease-in-out infinite;
}

/* Text area */
.donor-text[b-7t5th1c7q8] {
    flex: 1;
    min-width: 0;
}

.donor-title[b-7t5th1c7q8] {
    font-weight: 700;
    font-size: 1rem;
    color: black;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin-bottom: 0.2rem;
}

.donor-badge[b-7t5th1c7q8] {
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    padding: 2px 8px;
    border-radius: 100px;
    background: rgba(220, 38, 38, 0.12);
    color: #f87171;
    border: 1px solid rgba(220, 38, 38, 0.28);
    white-space: nowrap;
}

.donor-subtitle[b-7t5th1c7q8] {
    font-size: 0.8rem;
    color: #94a3b8;
    line-height: 1.4;
}

/* Toggle switch */
.donor-toggle[b-7t5th1c7q8] {
    flex-shrink: 0;
}

.toggle-track[b-7t5th1c7q8] {
    width: 50px;
    height: 27px;
    border-radius: 14px;
    background: #ffffff;
    border: 2px solid #475569;
    position: relative;
    transition: background 0.3s ease, border-color 0.3s ease;
}

.toggle-thumb[b-7t5th1c7q8] {
    width: 19px;
    height: 19px;
    border-radius: 50%;
    background: #64748b;
    position: absolute;
    top: 2px;
    left: 2px;
    transition: transform 0.3s ease, background 0.3s ease;
    box-shadow: 0 1px 4px rgba(0,0,0,0.3);
}

/* ── DONOR ON state ── */
.donor-card.is-donor .donor-card-inner[b-7t5th1c7q8] {
    /*background: linear-gradient(135deg, #1e0a0a 0%, #2d0f0f 60%, #1e1a0a 100%);*/
    /*border-color: rgba(220, 38, 38, 0.55);*/
}

.donor-card.is-donor .donor-icon[b-7t5th1c7q8] {
    background: rgba(220, 38, 38, 0.22);
    border-color: rgba(220, 38, 38, 0.65);
    animation: heartbeat-b-7t5th1c7q8 1.3s ease-in-out infinite;
}

.donor-card.is-donor .toggle-track[b-7t5th1c7q8] {
    background: #dc2626;
    border-color: #ef4444;
}

.donor-card.is-donor .toggle-thumb[b-7t5th1c7q8] {
    transform: translateX(23px);
    background: #fff;
}

.donor-card.is-donor[b-7t5th1c7q8] {
    animation: glowPulse-b-7t5th1c7q8 2.8s ease-in-out infinite;
}

/* ── Motivational hook strip ── */
.donor-hook[b-7t5th1c7q8] {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    /*padding: 0.65rem 1.25rem;*/
    padding: 0;
    background: rgba(220, 38, 38, 0.06);
    /*border-top: 1px solid rgba(220, 38, 38, 0.14);*/
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    transition: opacity 0.3s ease, max-height 0.4s ease, padding 0.3s ease;
    pointer-events: none;
}

.donor-card.is-donor .donor-hook[b-7t5th1c7q8] {
    opacity: 1;
    max-height: 70px;
    pointer-events: auto;
    padding: 0.65rem 1.25rem;
}

.hook-icon[b-7t5th1c7q8] {
    font-size: 1rem;
    flex-shrink: 0;
    margin-top: 1px;
}

.hook-text[b-7t5th1c7q8] {
    font-size: 0.78rem;
    color: #fca5a5;
    line-height: 1.5;
    font-style: italic;
}

/* ── Details panel ── */
.donor-details-panel[b-7t5th1c7q8] {
    margin-top: 0.75rem;
    border-radius: 12px;
    /*background: linear-gradient(160deg, #1a0a0a 0%, #1e1520 100%);*/
    /*border: 1px solid rgba(220, 38, 38, 0.22);*/
    overflow: hidden;
    /* Blazor uses @if so visibility is controlled by DOM presence.
       Add an entry animation instead: */
    animation: slideDown-b-7t5th1c7q8 0.35s ease;
}

@keyframes slideDown-b-7t5th1c7q8 {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }

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

.panel-header[b-7t5th1c7q8] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.85rem 1.1rem 0.65rem;
    border-bottom: 1px solid rgba(220, 38, 38, 0.12);
}

.panel-header-icon[b-7t5th1c7q8] {
    font-size: 0.95rem;
}

.panel-header-title[b-7t5th1c7q8] {
    font-weight: 700;
    font-size: 0.78rem;
    color: #fca5a5;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.panel-header-sub[b-7t5th1c7q8] {
    font-size: 0.72rem;
    color: #64748b;
    margin-left: auto;
}

.panel-body[b-7t5th1c7q8] {
    padding: 1rem 1.1rem 1.1rem;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 0.9rem;
}

/* Donor address layout: full-address row / area+city+state row / pincode+landmark row */
.donor-addr-grid[b-7t5th1c7q8] {
    grid-template-columns: repeat(6, 1fr);
}

.donor-addr-grid .floating-input:nth-child(1)[b-7t5th1c7q8] { grid-column: 1 / -1; }

.donor-addr-grid .floating-input:nth-child(2)[b-7t5th1c7q8],
.donor-addr-grid .floating-input:nth-child(3)[b-7t5th1c7q8],
.donor-addr-grid .floating-input:nth-child(4)[b-7t5th1c7q8] { grid-column: span 2; }

.donor-addr-grid .floating-input:nth-child(5)[b-7t5th1c7q8],
.donor-addr-grid .floating-input:nth-child(6)[b-7t5th1c7q8] { grid-column: span 3; }

/* Donor fields */
.donor-field[b-7t5th1c7q8] {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.field-label[b-7t5th1c7q8] {
    font-size: 0.72rem;
    font-weight: 600;
    color: #94a3b8;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.field-icon[b-7t5th1c7q8] {
    font-size: 0.82rem;
}

.field-input[b-7t5th1c7q8] {
    background: rgba(15, 23, 42, 0.7);
    border: 1.5px solid #334155;
    border-radius: 8px;
    padding: 0.55rem 0.8rem;
    font-size: 0.86rem;
    color: #e2e8f0;
    font-family: inherit;
    width: 100%;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    color-scheme: dark;
}

    .field-input:focus[b-7t5th1c7q8] {
        outline: none;
        border-color: rgba(220, 38, 38, 0.55);
        box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1);
    }

/* Vaccination row */
.vaccination-row[b-7t5th1c7q8] {
    /*grid-column: 1 / -1;*/
    display: flex;
    align-items: center;
    justify-content: space-between;
    /*background: rgba(15, 23, 42, 0.5);*/
    border: 2px solid #e2e8f0;
    border-radius: 10px;
    padding: 0rem 0.5rem;
    cursor: pointer;
    transition: border-color 0.25s ease, background 0.25s ease;
}

    .vaccination-row:hover[b-7t5th1c7q8] {
        border-color: rgba(34, 197, 94, 0.3);
        background: rgba(21, 61, 38, 0.3);
    }

    .vaccination-row.vaccinated[b-7t5th1c7q8] {
        border-color: rgba(34, 197, 94, 0.5);
        /*background: rgba(21, 61, 38, 0.3);*/
    }

.vacc-left[b-7t5th1c7q8] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.vacc-icon[b-7t5th1c7q8] {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    /*background: rgba(34, 197, 94, 0.08);*/
    /*border: 1.5px solid rgba(34, 197, 94, 0.18);*/
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    transition: background 0.25s, border-color 0.25s;
}

.vaccination-row.vaccinated .vacc-icon[b-7t5th1c7q8] {
    /*background: rgba(34, 197, 94, 0.18);*/
    border-color: rgba(34, 197, 94, 0.45);
}

.vacc-text-title[b-7t5th1c7q8] {
    font-weight: 600;
    font-size: 0.86rem;
    color: #2196f3;
}

.vacc-text-sub[b-7t5th1c7q8] {
    font-size: 0.73rem;
    color: #16a34a;
    font-weight: bold;
}

.vaccination-row.vaccinated .vacc-text-sub[b-7t5th1c7q8] {
    color: #16a34a;
}

.vacc-toggle .toggle-track[b-7t5th1c7q8] {
    border-color: #1e3a2e;
}

.vaccination-row.vaccinated .vacc-toggle .toggle-track[b-7t5th1c7q8] {
    background: #16a34a;
    border-color: #22c55e;
}

.vaccination-row.vaccinated .vacc-toggle .toggle-thumb[b-7t5th1c7q8] {
    transform: translateX(23px);
    background: #fff;
}

/* Footer chips */
.panel-footer[b-7t5th1c7q8] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    padding: 0.65rem 1.1rem;
    border-top: 1px solid rgba(220, 38, 38, 0.1);
    /*background: rgba(0,0,0,0.12);*/
}

.stat-chip[b-7t5th1c7q8] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.65rem;
    border-radius: 100px;
    background: rgba(220, 38, 38, 0.07);
    border: 1px solid rgba(220, 38, 38, 0.14);
    font-size: 0.7rem;
    color: #f87171;
    font-weight: 600;
}

/* Neutered / Spayed row */
.check-row[b-7t5th1c7q8] {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.7rem 1rem;
    border-radius: 10px;
    /*background: #1e293b;*/
    border: 2px solid #e2e8f0;
    cursor: pointer;
    font-size: 0.88rem;
    /*color: #e2e8f0;*/
    transition: border-color 0.2s ease;
}

    .check-row:hover[b-7t5th1c7q8] {
        border-color: #475569;
    }

    /* Modifier */
    .check-row.no-border[b-7t5th1c7q8] {
        border: none;
        padding: 0.7rem 1rem 0;
    }

.hidden-checkbox[b-7t5th1c7q8] {
    display: none;
}

.check-visual[b-7t5th1c7q8] {
    width: 18px;
    height: 18px;
    border-radius: 5px;
    border: 2px solid #a3aebd;
    background: transparent;
    transition: background 0.2s, border-color 0.2s;
    flex-shrink: 0;
    position: relative;
}

    .check-visual.checked[b-7t5th1c7q8] {
        background: #6366f1;
        border-color: #6366f1;
    }

        .check-visual.checked[b-7t5th1c7q8]::after {
            content: '✓';
            position: absolute;
            inset: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 0.7rem;
            font-weight: 700;
        }

.check-label[b-7t5th1c7q8] {
    flex: 1;
    margin: 0;
    color: #6b7280;
}

/* ── Animations ── */
@keyframes heartbeat-b-7t5th1c7q8 {
    0%, 100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.12);
    }
}

@keyframes glowPulse-b-7t5th1c7q8 {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(220, 38, 38, 0);
    }

    50% {
        box-shadow: 0 0 18px 3px rgba(220, 38, 38, 0.18);
    }
}
/* ── Question row: "Do you know your pet's blood type?" ── */
.cbr-bt-question[b-7t5th1c7q8] {
    flex: 1;
    min-width: 220px;
    margin-bottom: 12px;
}

.cbr-qa-label[b-7t5th1c7q8] {
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 10px;
    color: #374151;
}

/* ── Yes / No toggle buttons ── */
.cbr-toggle-row[b-7t5th1c7q8] {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.cbr-toggle-btn[b-7t5th1c7q8] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 10px 18px;
    border-radius: 10px;
    border: 2px solid #e2e8f0;
    background: #f8fafc;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    color: #4b5563;
    transition: all .18s;
    white-space: nowrap;
    line-height: 1.4;
    appearance: none;
    -webkit-appearance: none;
    width:150px;
}

    .cbr-toggle-btn:hover[b-7t5th1c7q8] {
        border-color: #fca5a5;
        background: #fff0f0;
    }

    /* "Yes, I know it" — green accent */
    .cbr-toggle-btn.active-yes[b-7t5th1c7q8] {
        border-color: #1f9e5e;
        background: #e8f5e9;
        color: #1f9e5e;
    }

    /* "No, I don't know" — amber accent */
    .cbr-toggle-btn.active-no[b-7t5th1c7q8] {
        border-color: #d4760c;
        background: #fff8e1;
        color: #d4760c;
    }

/* ── Blood type chip panel ── */
.cbr-bt-chip-panel[b-7t5th1c7q8] {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 16px 20px;
    margin-top: 4px;
    margin-bottom: 8px;
    animation: cbrFadeSlide-b-7t5th1c7q8 .2s ease;
}

@keyframes cbrFadeSlide-b-7t5th1c7q8 {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }

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

.cbr-bt-group[b-7t5th1c7q8] {
    margin-bottom: 14px;
}

    .cbr-bt-group:last-of-type[b-7t5th1c7q8] {
        margin-bottom: 0;
    }

.cbr-bt-group-label[b-7t5th1c7q8] {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .7px;
    text-transform: uppercase;
    color: #9ca3af;
    margin-bottom: 8px;
}

.cbr-bt-chips[b-7t5th1c7q8] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.cbr-bt-chip[b-7t5th1c7q8] {
    padding: 6px 14px;
    border-radius: 20px;
    border: 1.5px solid #e2e8f0;
    background: #ffffff;
    font-family: 'Courier New', monospace;
    font-size: 12px;
    cursor: pointer;
    transition: all .15s;
    color: #4b5563;
    user-select: none;
    line-height: 1.4;
    -webkit-appearance: none;
    appearance: none;
}

    .cbr-bt-chip:hover:not([disabled])[b-7t5th1c7q8] {
        border-color: #fca5a5;
    }

    .cbr-bt-chip.sel[b-7t5th1c7q8] {
        border-color: #dc2626;
        background: #fff0f0;
        color: #dc2626;
        font-weight: 700;
    }

    .cbr-bt-chip.disabled[b-7t5th1c7q8],
    .cbr-bt-chip[disabled][b-7t5th1c7q8] {
        opacity: .35;
        cursor: not-allowed;
    }

/* ── Selected summary + clear ── */
.cbr-bt-clear-row[b-7t5th1c7q8] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid #e2e8f0;
    flex-wrap: wrap;
    gap: 8px;
}

.cbr-bt-selected-summary[b-7t5th1c7q8] {
    font-size: 12px;
    color: #4b5563;
    font-weight: 500;
}

.cbr-bt-clear-btn[b-7t5th1c7q8] {
    padding: 5px 14px;
    border-radius: 20px;
    border: 1px solid #e2e8f0;
    background: transparent;
    font-family: inherit;
    font-size: 12px;
    cursor: pointer;
    color: #9ca3af;
    transition: all .15s;
}

    .cbr-bt-clear-btn:hover[b-7t5th1c7q8] {
        border-color: #dc2626;
        color: #dc2626;
    }

/* ── Unknown blood type info box ── */
.cbr-unknown-box[b-7t5th1c7q8] {
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: 10px;
    padding: 12px 16px;
    font-size: 12px;
    color: #92400e;
    line-height: 1.7;
    margin-top: 4px;
    margin-bottom: 8px;
    animation: cbrFadeSlide-b-7t5th1c7q8 .2s ease;
}

    .cbr-unknown-box strong[b-7t5th1c7q8] {
        color: #78350f;
    }

.cbr-unknown-tip[b-7t5th1c7q8] {
    display: block;
    margin-top: 5px;
    font-style: italic;
}
/* Gender info icon — inline next to the * in the label */
.gender-info-icon[b-7t5th1c7q8] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    color: #64748b;
    background: transparent;
    cursor: help;
    outline: none;
    vertical-align: middle;
    margin-left: 4px;
    position: relative;
    pointer-events: auto;
}

    .gender-info-icon i[b-7t5th1c7q8] {
        font-size: 0.85rem;
        line-height: 1;
        pointer-events: none;
    }

    .gender-info-icon:hover[b-7t5th1c7q8],
    .gender-info-icon:focus[b-7t5th1c7q8] {
        color: #2563eb;
    }

.gender-info-tooltip[b-7t5th1c7q8] {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    bottom: calc(100% + 8px);
    left: 0;
    background: #1e293b;
    color: #fff;
    font-size: 0.75rem;
    font-weight: 400;
    line-height: 1.4;
    padding: 8px 10px;
    border-radius: 6px;
    width: 260px;
    max-width: calc(100vw - 24px);
    z-index: 9999;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
    transition: opacity 0.15s ease;
    pointer-events: none;
    white-space: normal;
    text-align: left;
}

    .gender-info-tooltip[b-7t5th1c7q8]::after {
        content: "";
        position: absolute;
        top: 100%;
        left: 8px;
        border: 5px solid transparent;
        border-top-color: #1e293b;
    }

.gender-info-icon:hover .gender-info-tooltip[b-7t5th1c7q8],
.gender-info-icon:focus .gender-info-tooltip[b-7t5th1c7q8],
.gender-info-icon:focus-within .gender-info-tooltip[b-7t5th1c7q8] {
    visibility: visible;
    opacity: 1;
}

.blood-type-full-row[b-7t5th1c7q8] {
    grid-column: 1 / -1; /* span every column of .form-grid */
    display: flex;
    flex-direction: column;
    gap: 12px;
}

    /* Ensure the chip panel and unknown box fill the full width inside it */
    .blood-type-full-row .cbr-bt-chip-panel[b-7t5th1c7q8],
    .blood-type-full-row .cbr-unknown-box[b-7t5th1c7q8] {
        width: 100%;
        box-sizing: border-box;
    }







/* ── Responsive ── */
@media (max-width: 540px) {
    .panel-body[b-7t5th1c7q8] {
        grid-template-columns: 1fr;
        padding: 1rem 1.1rem 0 1.1rem;
    }

    .donor-addr-grid[b-7t5th1c7q8] { grid-template-columns: 1fr; }

    .donor-addr-grid .floating-input:nth-child(n)[b-7t5th1c7q8] { grid-column: 1; }

    .donor-card-inner[b-7t5th1c7q8] {
        flex-wrap: wrap;
        gap: 0.75rem;
    }

    .panel-header-sub[b-7t5th1c7q8] {
        display: none;
    }

    .cbr-toggle-btn[b-7t5th1c7q8] {
        padding: 8px 14px;
        font-size: 12px;
        width: 140px;
    }

    .cbr-bt-question[b-7t5th1c7q8] {
        min-width: 100%;
    }
}

/* Images-tab progress badge — distinct from the cadetblue .tab-badge used by
   other tabs so the count never blends in.
   Three states:
   - --alert (count < 4 required): red, urgent — required slots missing.
   - --ok    (count >= 4):          emerald — required slots filled.
   - --shield (Lost & Found AI active, R2): emerald gradient shield, no count.
   Hidden when the Images tab is active. */
.tab-progress-badge[b-7t5th1c7q8] {
    position: absolute;
    top: -7px;
    right: -10px;
    min-width: 22px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    color: #ffffff;
    font-size: 0.62rem;
    font-weight: 700;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 0 2px #e2e8f0;
    cursor: help;
}

.tab-progress-badge--alert[b-7t5th1c7q8] {
    background: #dc2626;
}

.tab-progress-badge--ok[b-7t5th1c7q8] {
    background: #10b981;
}

.tab-progress-badge--shield[b-7t5th1c7q8] {
    background: linear-gradient(135deg, #059669 0%, #10b981 100%);
    min-width: 18px;
    padding: 0;
}

    .tab-progress-badge--shield i[b-7t5th1c7q8] {
        font-size: 0.65rem;
    }

/* Active tab is white — adapt the punched-out ring. */
.tab.active .tab-progress-badge[b-7t5th1c7q8] {
    box-shadow: 0 0 0 2px #ffffff;
}

.tab-progress-tooltip[b-7t5th1c7q8] {
    position: absolute;
    top: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    background: #0f172a;
    color: #f1f5f9;
    padding: 0.35rem 0.6rem;
    border-radius: 0.35rem;
    font-size: 0.7rem;
    font-weight: 500;
    white-space: nowrap;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
    visibility: hidden;
    opacity: 0;
    transition: visibility 0s linear 0.15s, opacity 0.15s ease;
    pointer-events: none;
    z-index: 30;
}

    .tab-progress-tooltip[b-7t5th1c7q8]::after {
        content: "";
        position: absolute;
        bottom: 100%;
        left: 50%;
        transform: translateX(-50%);
        border: 5px solid transparent;
        border-bottom-color: #0f172a;
    }

.tab-progress-badge:hover .tab-progress-tooltip[b-7t5th1c7q8],
.tab-progress-badge:focus-visible .tab-progress-tooltip[b-7t5th1c7q8],
.tab:hover .tab-progress-tooltip[b-7t5th1c7q8],
.tab:focus-visible .tab-progress-tooltip[b-7t5th1c7q8] {
    visibility: visible;
    opacity: 1;
    transition-delay: 0s;
}

.tab-navigation:has(.tab-progress-badge:hover)[b-7t5th1c7q8],
.tab-navigation:has(.tab:hover)[b-7t5th1c7q8] {
    overflow: visible;
}
/* /Pages/Pets/PetManagement.razor.rz.scp.css */
/* ============================================================
   PetManagement — Claymorphism Warm (desktop) + V2 mobile layout
   pmv3-* for page structure | pmv2-* kept for JS-queried elements
   ============================================================ */

/* ── Page ── */
.pmv3-page[b-xf0y8et1i3] {
    max-width: 1200px;
    margin: 0 auto;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    overflow: hidden;
    border-radius: 10px;
    background: #fff;
    /*border: 3px solid #fed7aa;*/
}

/* ── Header ── */
.pmv3-header[b-xf0y8et1i3] {
    background: linear-gradient(155deg, #000000b8 0%, #833a1ea8 100%);
    color: #ffde59;
    /*border-bottom: 2px solid #fed7aa;*/
}

.pmv3-header-content[b-xf0y8et1i3] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem 1.5rem;
    gap: 1rem;
    flex-wrap: wrap;
}

.pmv3-header-left[b-xf0y8et1i3] { flex: 0 0 auto; }

.pmv3-title[b-xf0y8et1i3] {
    font-size: 1.6rem;
    font-weight: 700;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    letter-spacing: -0.01em;
}

.pmv3-title-icon[b-xf0y8et1i3] {
    width: 38px;
    height: 38px;
    background: linear-gradient(135deg, #f97316, #ea580c);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1rem;
    box-shadow: 0 4px 0 #c2410c, 0 6px 14px rgba(249,115,22,0.3);
    flex-shrink: 0;
}

/* ── Add button — clay orange ── */
.pmv3-add-btn[b-xf0y8et1i3] {
    background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
    border: none;
    color: white;
    padding: 0.6rem 1.3rem;
    border-radius: 12px;
    font-weight: 600;
    font-size: 0.85rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.45rem;
    box-shadow: 0 4px 0 #c2410c, 0 6px 18px rgba(249,115,22,0.35);
    transition: transform 0.15s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.15s ease;
}
.pmv3-add-btn:hover[b-xf0y8et1i3] {
    transform: translateY(-2px);
    box-shadow: 0 6px 0 #c2410c, 0 10px 26px rgba(249,115,22,0.4);
}
.pmv3-add-btn:active[b-xf0y8et1i3] {
    transform: translateY(2px);
    box-shadow: 0 2px 0 #c2410c, 0 4px 10px rgba(249,115,22,0.25);
}

/* ── Summary strip ── */
.pmv3-summary-strip[b-xf0y8et1i3] {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid #fde8cb;
}

.pmv3-summary-chip[b-xf0y8et1i3] {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    background: white;
    border: 1.5px solid #fed7aa;
    border-radius: 40px;
    padding: 0.3rem 0.9rem;
    font-size: 0.78rem;
    font-weight: 600;
    color: #78350f;
    box-shadow: 0 2px 0 #fed7aa, 0 3px 8px rgba(0,0,0,0.05);
}

.pmv3-chip-dot[b-xf0y8et1i3] {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
}
.pmv3-chip-total  .pmv3-chip-dot[b-xf0y8et1i3] { background: #f97316; }
.pmv3-chip-donors .pmv3-chip-dot[b-xf0y8et1i3] { background: #10b981; }
.pmv3-chip-photo  .pmv3-chip-dot[b-xf0y8et1i3] { background: #8b5cf6; }

/* ── Content ── */
.pmv3-content[b-xf0y8et1i3] {
    padding: 2.5rem 1rem 4rem;
}

/* ── Loading ── */
.pmv3-loading[b-xf0y8et1i3] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
    gap: 1rem;
    color: #9a3412;
}

.pmv3-spinner[b-xf0y8et1i3] {
    width: 2.75rem;
    height: 2.75rem;
    border: 4px solid #fed7aa;
    border-top-color: #f97316;
    border-radius: 50%;
    animation: pmv3-spin-b-xf0y8et1i3 0.9s linear infinite;
}
@keyframes pmv3-spin-b-xf0y8et1i3 { to { transform: rotate(360deg); } }

/* ── Empty state ── */
.pmv3-empty[b-xf0y8et1i3] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
    background: white;
    border: 2px solid #fed7aa;
    border-radius: 1.25rem;
    box-shadow: 0 4px 0 #fed7aa, 0 8px 24px rgba(0,0,0,0.06);
    text-align: center;
    gap: 0.75rem;
}

.pmv3-empty-icon[b-xf0y8et1i3] { font-size: 3.5rem; color: #fdba74; }

.pmv3-empty h4[b-xf0y8et1i3] {
    font-size: 1.4rem;
    font-weight: 700;
    color: #9a3412;
    margin: 0;
}

.pmv3-empty p[b-xf0y8et1i3] {
    font-size: 0.9rem;
    color: #78350f;
    margin: 0;
    max-width: 380px;
    line-height: 1.6;
    opacity: 0.75;
}

.pmv3-empty-btn[b-xf0y8et1i3] {
    margin-top: 0.5rem;
    background: linear-gradient(135deg, #f97316, #ea580c);
    color: white;
    border: none;
    border-radius: 10px;
    padding: 0.75rem 1.75rem;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 4px 0 #c2410c, 0 6px 18px rgba(249,115,22,0.35);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    display: flex; align-items: center; gap: 0.45rem;
}
.pmv3-empty-btn:hover[b-xf0y8et1i3] {
    transform: translateY(-2px);
    box-shadow: 0 6px 0 #c2410c, 0 10px 26px rgba(249,115,22,0.4);
}

/* ============================================================
   Grid — column-centered (matching V2 layout intent)
   Chips are absolutely positioned so horizontal space is
   handled by the parent layout rather than grid cells.
   ============================================================ */
.pmv3-grid[b-xf0y8et1i3] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5rem;
    overflow: visible;
    padding: 1rem 0;
}

/* ============================================================
   Pet wrapper — functional hover kept identical to V2
   ============================================================ */
.pmv3-wrapper[b-xf0y8et1i3] {
    position: relative;
    flex-shrink: 0;
    padding-bottom: 3.5rem;
    overflow: visible;
    transition: filter 0.25s ease;
}

.pmv3-wrapper:hover[b-xf0y8et1i3] { z-index: 20; }

.pmv3-dimmed[b-xf0y8et1i3] {
    filter: blur(2px) brightness(0.6) !important;
    transition: filter 0.25s ease;
}

/* ============================================================
   Circle wrap — sized up to 140 px for clay impact.
   JS uses getBoundingClientRect so size is dynamic — no changes needed there.
   ============================================================ */
.pmv2-circle-wrap[b-xf0y8et1i3] {
    position: relative;
    width: 140px;
    height: 140px;
    cursor: pointer;
}

/* SVG spoke canvas */
.pmv2-lines-svg[b-xf0y8et1i3] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: visible;
    z-index: 1;
}

/* ============================================================
   Chip columns
   ============================================================ */
.pmv3-left-chips[b-xf0y8et1i3] {
    position: absolute;
    right: calc(100% + 14px);
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.45rem;
    z-index: 10;
    pointer-events: none;
}

.pmv3-right-chips[b-xf0y8et1i3] {
    position: absolute;
    left: calc(100% + 14px);
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.45rem;
    z-index: 10;
    pointer-events: none;
}

/* ── Individual chip — warm claymorphism ── */
.pmv2-spoke-chip[b-xf0y8et1i3] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    background: white;
    border: 1.5px solid #fed7aa;
    border-radius: 40px;
    padding: 0.3rem 0.75rem;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    box-shadow: 0 3px 0 #fed7aa, 0 5px 14px rgba(0,0,0,0.08), inset 0 1px 0 rgba(255,255,255,0.9);
    transition: opacity 0.2s ease;
}

.pmv3-chip-delay1[b-xf0y8et1i3] { transition-delay: 0.04s; }
.pmv3-chip-delay2[b-xf0y8et1i3] { transition-delay: 0.08s; }

.pmv3-chip-vis[b-xf0y8et1i3] {
    opacity: 1;
    pointer-events: all;
}

.pmv3-chip-emoji[b-xf0y8et1i3] { font-size: 0.85rem; line-height: 1; }

.pmv3-chip-label[b-xf0y8et1i3] {
    font-size: 0.58rem;
    font-weight: 700;
    color: #f97316;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.pmv3-chip-value[b-xf0y8et1i3] {
    font-size: 0.75rem;
    font-weight: 600;
    color: #1c1917;
}

/* ============================================================
   Pet Circle — clay treatment
   ============================================================ */
.pmv2-circle[b-xf0y8et1i3] {
    width: 140px;
    height: 140px;
    border-radius: 50%;
    overflow: hidden;
    border: 4px solid #fed7aa;
    box-shadow: 0 2px 0 #fed7aa, 0 3px 8px rgba(0, 0, 0, 0.05);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 2;
    transition: transform 0.2s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.2s ease, border-color 0.2s ease;
}

.pmv2-circle-active[b-xf0y8et1i3] {
    transform: scale(1.07) translateY(-5px);
    border-color: #f97316;
    box-shadow:
        0 10px 0 rgba(249,115,22,0.25),
        0 18px 40px rgba(249,115,22,0.2),
        inset 0 2px 5px rgba(255,255,255,0.55);
}

.pmv3-circle-emoji[b-xf0y8et1i3] {
    font-size: 4rem;
    line-height: 1;
    pointer-events: none;
    user-select: none;
}

.pmv3-circle-img[b-xf0y8et1i3] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ── View button inside circle ── */
.pmv3-view-btn[b-xf0y8et1i3] {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.28rem 0.85rem;
    background: rgba(249,115,22,0.88);
    color: white;
    border: none;
    border-radius: 20px;
    font-size: 0.65rem;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
    z-index: 5;
    opacity: 0;
    transition: opacity 0.2s ease, background 0.15s;
}
.pmv3-view-vis[b-xf0y8et1i3]    { opacity: 1; }
.pmv3-view-btn:hover[b-xf0y8et1i3] { background: #f97316; }

/* ── Pet name ── */
.pmv3-pet-name[b-xf0y8et1i3] {
    position: absolute;
    top: calc(100% + 0.5rem);
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.85rem;
    font-weight: 700;
    color: #92400e;
    white-space: nowrap;
    letter-spacing: 0.01em;
    transition: color 0.2s;
    z-index: 2;
}

.pmv3-name-active[b-xf0y8et1i3] {
    color: #ea580c;
    text-decoration: underline;
}

/* ============================================================
   Action buttons
   ============================================================ */
.pmv3-actions[b-xf0y8et1i3] {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 0.4rem;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease 0.05s;
    white-space: nowrap;
}

.pmv3-actions-vis[b-xf0y8et1i3] {
    opacity: 1;
    pointer-events: all;
}

.pmv3-action-btn[b-xf0y8et1i3] {
    font-size: 0.68rem;
    cursor: pointer;
    padding: 0.28rem 0.7rem;
    border-radius: 20px;
    background: white;
    border: 1.5px solid #fed7aa;
    color: #78350f;
    box-shadow: 0 2px 0 #fed7aa, 0 3px 8px rgba(0,0,0,0.06);
    transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.15s;
}
.pmv3-action-edit:hover[b-xf0y8et1i3]   { background: #eff6ff; color: #2563eb; border-color: #93c5fd; box-shadow: 0 2px 0 #93c5fd; }
.pmv3-action-poster:hover[b-xf0y8et1i3] { background: #ecfdf5; color: #059669; border-color: #6ee7b7; box-shadow: 0 2px 0 #6ee7b7; }
.pmv3-action-delete:hover[b-xf0y8et1i3] { background: #fef2f2; color: #dc2626; border-color: #fca5a5; box-shadow: 0 2px 0 #fca5a5; }

/* ============================================================
   Add new pet circle
   ============================================================ */
.pmv3-add-wrapper[b-xf0y8et1i3] {
    flex-shrink: 0;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-bottom: 3.5rem;
    transition: filter 0.25s ease;
}

.pmv3-add-circle[b-xf0y8et1i3] {
    width: 140px;
    height: 140px;
    border-radius: 50%;
    border: 3px dashed #fb923c;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    cursor: pointer;
    color: #fb923c;
    font-size: 0.78rem;
    font-weight: 600;
    background: white;
    box-shadow: 0 4px 0 #fed7aa, 0 6px 18px rgba(0,0,0,0.07);
    transition: border-color 0.2s, color 0.2s, background 0.2s, transform 0.2s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.2s;
}
.pmv3-add-circle:hover[b-xf0y8et1i3] {
    border-color: #f97316;
    color: #f97316;
    background: #fff7ed;
    transform: translateY(-3px);
    box-shadow: 0 7px 0 #fed7aa, 0 12px 26px rgba(249,115,22,0.15);
}

.pmv3-plus[b-xf0y8et1i3] { font-size: 2rem; line-height: 1; font-weight: 300; }

/* ============================================================
   LF Badge
   ============================================================ */
.pmv3-lf-badge[b-xf0y8et1i3] {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 28px;
    height: 28px;
    border-radius: 999px;
    background: linear-gradient(135deg, #059669 0%, #10b981 100%);
    border: 2.5px solid white;
    box-shadow: 0 2px 6px rgba(16,185,129,0.45), 0 2px 0 rgba(5,150,105,0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    z-index: 5;
    cursor: help;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.pmv3-lf-badge:hover[b-xf0y8et1i3],
.pmv3-lf-badge:focus-visible[b-xf0y8et1i3] {
    transform: scale(1.08);
    box-shadow: 0 3px 10px rgba(16,185,129,0.6);
    outline: none;
}
.pmv3-lf-badge i[b-xf0y8et1i3] { font-size: 0.8rem; }

.pmv3-lf-tooltip[b-xf0y8et1i3] {
    position: absolute;
    bottom: calc(100% + 10px);
    left: 50%;
    transform: translateX(-25%);
    background: #059669;
    color: white;
    padding: 0.45rem 0.7rem;
    border-radius: 0.4rem;
    font-size: 0.72rem;
    font-weight: 500;
    white-space: nowrap;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    visibility: hidden;
    opacity: 0;
    transition: visibility 0s linear 0.15s, opacity 0.15s ease;
    pointer-events: none;
    z-index: 20;
}
.pmv3-lf-tooltip[b-xf0y8et1i3]::after {
    content: '';
    position: absolute;
    top: 100%; left: 25%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: #059669;
}
.pmv3-lf-badge:hover .pmv3-lf-tooltip[b-xf0y8et1i3],
.pmv3-lf-badge:focus-visible .pmv3-lf-tooltip[b-xf0y8et1i3] {
    visibility: visible;
    opacity: 1;
    transition-delay: 0s;
}

/* L&F ring on circle */
.pmv2-circle-wrap.is-lf-ready .pmv2-circle[b-xf0y8et1i3] {
    box-shadow:
        0 0 0 3px #10b981,
        0 0 0 5px rgba(255,222,89,0.45),
        0 6px 0 rgba(0,0,0,0.1),
        0 10px 28px rgba(16,185,129,0.2);
}

/* ============================================================
   Delete modal — warm styled
   ============================================================ */
.pmv3-modal-overlay[b-xf0y8et1i3] {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.pmv3-delete-modal[b-xf0y8et1i3] {
    background: white;
    border: 2px solid #fed7aa;
    border-radius: 1rem;
    max-width: 480px;
    width: 90%;
    box-shadow: 0 8px 0 #fed7aa, 0 16px 40px rgba(0,0,0,0.15);
}

.pmv3-modal-header[b-xf0y8et1i3] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.25rem 1.5rem;
    border-bottom: 1.5px solid #fde8cb;
}
.pmv3-modal-header h5[b-xf0y8et1i3] { font-size: 1.1rem; font-weight: 700; color: #9a3412; margin: 0; }

.pmv3-close-btn[b-xf0y8et1i3] {
    background: none;
    border: none;
    font-size: 1.4rem;
    color: #9a6650;
    cursor: pointer;
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background 0.15s;
}
.pmv3-close-btn:hover[b-xf0y8et1i3] { background: #fff7ed; }

.pmv3-modal-body[b-xf0y8et1i3] { padding: 1.5rem; }
.pmv3-modal-body p[b-xf0y8et1i3] { margin: 0 0 0.75rem; color: #78350f; font-size: 0.9rem; }
.pmv3-modal-body p:last-child[b-xf0y8et1i3] { margin: 0; }
.pmv3-warning-text[b-xf0y8et1i3] { color: #a8744e; font-size: 0.82rem; opacity: 0.85; }

.pmv3-modal-footer[b-xf0y8et1i3] {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 1.25rem 1.5rem;
    border-top: 1.5px solid #fde8cb;
}

.pmv3-btn[b-xf0y8et1i3] {
    padding: 0.5rem 1.1rem;
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    border: none;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.pmv3-btn-secondary[b-xf0y8et1i3] {
    background: #fff7ed;
    color: #78350f;
    border: 1.5px solid #fed7aa;
    box-shadow: 0 2px 0 #fed7aa;
}
.pmv3-btn-secondary:hover[b-xf0y8et1i3] { background: #fde8cb; }
.pmv3-btn-danger[b-xf0y8et1i3] {
    background: linear-gradient(135deg, #ef4444, #dc2626);
    color: white;
    box-shadow: 0 3px 0 #b91c1c, 0 5px 14px rgba(239,68,68,0.3);
}
.pmv3-btn-danger:hover[b-xf0y8et1i3] { transform: translateY(-1px); box-shadow: 0 5px 0 #b91c1c, 0 8px 20px rgba(239,68,68,0.4); }

/* ============================================================
   Reduced motion
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    .pmv3-wrapper[b-xf0y8et1i3], .pmv3-add-btn[b-xf0y8et1i3], .pmv3-action-btn[b-xf0y8et1i3],
    .pmv2-circle[b-xf0y8et1i3], .pmv2-spoke-chip[b-xf0y8et1i3], .pmv3-add-circle[b-xf0y8et1i3] { transition: none; }
}

/* ============================================================
   MOBILE ≤ 700px
   Same layout as V2 — chips + actions always visible.
   Only visual properties change (warm colors, no dark bg).
   ============================================================ */
@@media (max-width: 700px) {

    .pmv3-page[b-xf0y8et1i3] { border-radius: 0; }

    .pmv3-header-content[b-xf0y8et1i3] {
        flex-direction: row;
        align-items: center;
        padding: 0.875rem 1rem;
        flex-wrap: nowrap;
    }
    .pmv3-header-left[b-xf0y8et1i3] { flex: 1 1 auto; min-width: 0; }
    .pmv3-title[b-xf0y8et1i3]       { font-size: 1.2rem; }
    .pmv3-add-btn[b-xf0y8et1i3]     { padding: 0.45rem 0.85rem; font-size: 0.75rem; flex-shrink: 0; }

    .pmv3-summary-strip[b-xf0y8et1i3] { padding: 0.75rem 1rem; gap: 0.5rem; }
    .pmv3-summary-chip[b-xf0y8et1i3]  { font-size: 0.72rem; padding: 0.25rem 0.7rem; }

    .pmv3-content[b-xf0y8et1i3] { padding: 1.5rem 1rem 4rem; }

    /* Grid — vertical column, centered */
    .pmv3-grid[b-xf0y8et1i3] { gap: 4.5rem; }

    /* Circle size back to 120px on mobile (matching V2) */
    .pmv2-circle-wrap[b-xf0y8et1i3] { width: 120px; height: 120px; }
    .pmv2-circle[b-xf0y8et1i3] { width: 120px; height: 120px; border-width: 3px; }
    .pmv3-add-circle[b-xf0y8et1i3] { width: 120px; height: 120px; }

    /* Chips — always visible on mobile */
    .pmv2-spoke-chip[b-xf0y8et1i3] {
        opacity: 1;
        pointer-events: all;
    }

    /* View btn — always visible on mobile */
    .pmv3-view-btn[b-xf0y8et1i3] { opacity: 1; }

    /* Actions — always visible on mobile */
    .pmv3-actions[b-xf0y8et1i3] {
        opacity: 1;
        pointer-events: all;
    }

    /* No dimming on touch — no hover events */
    .pmv3-dimmed[b-xf0y8et1i3] { filter: none !important; }

    .pmv3-modal-footer[b-xf0y8et1i3] { flex-direction: column; }
    .pmv3-modal-footer .pmv3-btn[b-xf0y8et1i3] { width: 100%; text-align: center; }
}

/* ============================================================
   DESKTOP > 480px — row layout, 200 px circles, centered
   Each wrapper is 560 px wide so spoke chips stay fully inside
   and never reach an adjacent circle.
   ============================================================ */
@media (min-width: 481px) {

    .pmv3-grid[b-xf0y8et1i3] {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        align-items: flex-start;
        gap: 4rem 1rem;
    }

    .pmv3-wrapper[b-xf0y8et1i3] {
        width: 460px;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .pmv2-circle-wrap[b-xf0y8et1i3] {
        width: 200px;
        height: 200px;
    }

    .pmv2-circle[b-xf0y8et1i3] {
        width: 200px;
        height: 200px;
    }

    .pmv3-add-wrapper[b-xf0y8et1i3] {
        width: 460px;
        justify-content: center;
    }

    .pmv3-add-circle[b-xf0y8et1i3] {
        width: 200px;
        height: 200px;
    }
}
/* /Pages/Pets/Tabs/Components/ImageSlotCard.razor.rz.scp.css */
.slot-card[b-w167nabck0] {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 0.6rem;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.slot-card:hover[b-w167nabck0] {
    border-color: #c7d2fe;
    box-shadow: 0 2px 6px rgba(99, 102, 241, 0.12);
}

.slot-card--required-empty[b-w167nabck0] {
    border-color: #fca5a5;
}

.slot-card-thumb[b-w167nabck0] {
    position: relative;
    aspect-ratio: 1 / 1;
    background: #f3f4f6;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.slot-card-thumb img[b-w167nabck0] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.slot-empty-state[b-w167nabck0] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    color: #9ca3af;
}

.slot-silhouette[b-w167nabck0] {
    font-size: 2.4rem;
}

.slot-required-pill[b-w167nabck0] {
    background: #fee2e2;
    color: #b91c1c;
    font-size: 0.7rem;
    font-weight: 600;
    padding: 0.1rem 0.45rem;
    border-radius: 999px;
}

.slot-profile-badge[b-w167nabck0] {
    position: absolute;
    top: 6px;
    right: 6px;
    background: rgba(99, 102, 241, 0.9);
    color: #ffffff;
    border-radius: 999px;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
}

.slot-card-meta[b-w167nabck0] {
    padding: 0.6rem 0.7rem 0.7rem;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.slot-card-label[b-w167nabck0] {
    font-weight: 600;
    color: #1f2937;
    font-size: 0.92rem;
}

.slot-card-guidance[b-w167nabck0] {
    color: #6b7280;
    font-size: 0.78rem;
    line-height: 1.3;
    min-height: 2.6em;
}

.slot-card-actions[b-w167nabck0] {
    display: flex;
    gap: 0.4rem;
    margin-top: 0.25rem;
}

.slot-action-btn[b-w167nabck0] {
    flex: 1 1 auto;
    min-height: 32px;
    border: 1px solid #e5e7eb;
    background: #ffffff;
    border-radius: 0.4rem;
    font-size: 0.8rem;
    cursor: pointer;
    transition: background 0.15s ease;
}

.slot-action-btn:hover[b-w167nabck0] {
    background: #f3f4f6;
}

.slot-action-btn--upload[b-w167nabck0] {
    border-color: #6366f1;
    color: #4338ca;
    flex: 1 1 100%;
}

.slot-action-btn--replace[b-w167nabck0] {
    color: #4338ca;
}

.slot-action-btn--delete[b-w167nabck0] {
    flex: 0 0 auto;
    color: #b91c1c;
    width: 38px;
}
/* /Pages/Pets/Tabs/Components/ImageUploadDialog.razor.rz.scp.css */
.image-upload-dialog-backdrop[b-7ww8l81ko9] {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
    z-index: 1040;
}

.image-upload-dialog[b-7ww8l81ko9] {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #ffffff;
    border-radius: 0.75rem;
    width: min(520px, 92vw);
    max-height: 88vh;
    overflow: auto;
    z-index: 1050;
    box-shadow: 0 16px 32px rgba(15, 23, 42, 0.25);
}

.image-upload-dialog-header[b-7ww8l81ko9] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.85rem 1rem;
    border-bottom: 1px solid #e5e7eb;
}

.image-upload-dialog-header h5[b-7ww8l81ko9] {
    margin: 0;
    font-weight: 600;
}

.image-upload-close[b-7ww8l81ko9] {
    border: none;
    background: transparent;
    font-size: 1.05rem;
    color: #6b7280;
    cursor: pointer;
    padding: 0.25rem;
}

.image-upload-close:disabled[b-7ww8l81ko9] {
    opacity: 0.5;
    cursor: not-allowed;
}

.image-upload-dialog-body[b-7ww8l81ko9] {
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.image-upload-guidance[b-7ww8l81ko9] {
    background: #eef2ff;
    color: #3730a3;
    border-radius: 0.4rem;
    padding: 0.55rem 0.7rem;
    margin: 0;
    font-size: 0.88rem;
}

.image-upload-quality-tips ul[b-7ww8l81ko9] {
    color: #4b5563;
    font-size: 0.85rem;
    margin: 0;
    padding-left: 1.1rem;
}

.image-upload-warning[b-7ww8l81ko9] {
    background: #fef3c7;
    color: #92400e;
    border-radius: 0.4rem;
    padding: 0.55rem 0.7rem;
    font-size: 0.85rem;
}

.image-upload-error[b-7ww8l81ko9] {
    background: #fee2e2;
    color: #b91c1c;
    border-radius: 0.4rem;
    padding: 0.55rem 0.7rem;
    font-size: 0.85rem;
}

.image-upload-input-row input[type="file"][b-7ww8l81ko9] {
    width: 100%;
}

.image-upload-progress[b-7ww8l81ko9] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #4338ca;
    font-size: 0.9rem;
}
/* /Pages/Pets/Tabs/PetImagesTab.razor.rz.scp.css */
.pet-images-tab[b-iqtglkxgh1] {
    padding: 1rem 0.25rem;
}

.pet-images-header[b-iqtglkxgh1] {
    margin-bottom: 1rem;
}

.pet-images-header h4[b-iqtglkxgh1] {
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.pet-images-subhead[b-iqtglkxgh1] {
    color: #6b7280;
    font-size: 0.95rem;
    margin: 0;
}

.pet-images-progress[b-iqtglkxgh1] {
    background: #f8fafc;
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
    padding: 0.85rem 1rem;
    margin-bottom: 1.25rem;
}

.progress-label[b-iqtglkxgh1] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
    font-size: 0.95rem;
}

.progress-count[b-iqtglkxgh1] {
    color: #1f2937;
    font-weight: 600;
}

.progress-required-hint[b-iqtglkxgh1] {
    color: #6b7280;
    font-size: 0.85rem;
    margin-left: auto;
}

.progress-badge[b-iqtglkxgh1] {
    background: #dcfce7;
    color: #15803d;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 600;
    margin-left: auto;
}

.progress-bar-track[b-iqtglkxgh1] {
    background: #e5e7eb;
    border-radius: 999px;
    height: 8px;
    overflow: hidden;
}

.progress-bar-fill[b-iqtglkxgh1] {
    background: linear-gradient(90deg, #6366f1, #8b5cf6);
    height: 100%;
    transition: width 0.3s ease;
}

.pet-images-grid[b-iqtglkxgh1] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.85rem;
    margin-bottom: 1.25rem;
}

@media (min-width: 768px) {
    .pet-images-grid[b-iqtglkxgh1] {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 1rem;
    }
}

.pet-images-loading[b-iqtglkxgh1] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 2rem 0;
    color: #6b7280;
}

.pet-images-footer-microcopy[b-iqtglkxgh1] {
    background: #eef2ff;
    color: #3730a3;
    border-radius: 0.5rem;
    padding: 0.75rem 1rem;
    margin: 0;
    font-size: 0.9rem;
}

.pet-images-footer-microcopy i[b-iqtglkxgh1] {
    margin-right: 0.4rem;
}

/* "What this unlocks" panel — appears once all 4 required slots are filled. */
.pet-images-unlocked[b-iqtglkxgh1] {
    display: flex;
    gap: 0.85rem;
    background: linear-gradient(135deg, #ecfdf5 0%, #f0fdf4 100%);
    border: 1px solid #86efac;
    border-radius: 0.6rem;
    padding: 1rem 1.1rem;
    margin-bottom: 1.1rem;
    box-shadow: 0 1px 4px rgba(34, 197, 94, 0.12);
}

.unlocked-icon[b-iqtglkxgh1] {
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    border-radius: 999px;
    background: #16a34a;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
}

.unlocked-body[b-iqtglkxgh1] {
    flex: 1 1 auto;
    min-width: 0;
}

.unlocked-headline[b-iqtglkxgh1] {
    font-weight: 700;
    color: #15803d;
    font-size: 1rem;
    margin-bottom: 0.15rem;
}

.unlocked-subhead[b-iqtglkxgh1] {
    color: #166534;
    font-size: 0.85rem;
    margin-bottom: 0.45rem;
}

.unlocked-list[b-iqtglkxgh1] {
    list-style: none;
    padding: 0;
    margin: 0 0 0.55rem;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.unlocked-list li[b-iqtglkxgh1] {
    color: #166534;
    font-size: 0.85rem;
    line-height: 1.4;
    padding-left: 1.4rem;
    position: relative;
}

.unlocked-list li i[b-iqtglkxgh1] {
    position: absolute;
    left: 0;
    top: 0.22rem;
    color: #16a34a;
    font-size: 0.78rem;
}

.unlocked-footnote[b-iqtglkxgh1] {
    color: #4d7c0f;
    font-size: 0.78rem;
    font-style: italic;
    border-top: 1px dashed rgba(22, 163, 74, 0.3);
    padding-top: 0.45rem;
    margin-top: 0.25rem;
}

.unlocked-footnote i[b-iqtglkxgh1] {
    color: #65a30d;
    margin-right: 0.3rem;
}

/* ===========================================================
   Panel A — Profile completion checklist
   =========================================================== */
.profile-completion-card[b-iqtglkxgh1] {
    margin-top: 1.25rem;
    background: linear-gradient(180deg, #fffbeb 0%, #fff7ed 100%);
    border: 1px solid #fcd34d;
    border-radius: 0.65rem;
    padding: 1rem 1.1rem;
}

.profile-completion-header[b-iqtglkxgh1] {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
    margin-bottom: 0.75rem;
}

.profile-completion-header > i[b-iqtglkxgh1] {
    color: #b45309;
    font-size: 1.15rem;
    margin-top: 0.15rem;
}

.profile-completion-header strong[b-iqtglkxgh1] {
    color: #92400e;
    font-size: 0.98rem;
}

.profile-completion-sub[b-iqtglkxgh1] {
    color: #78350f;
    font-size: 0.82rem;
    margin-top: 0.15rem;
    line-height: 1.4;
}

.profile-completion-list[b-iqtglkxgh1] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.completion-item[b-iqtglkxgh1] {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 0.75rem;
    background: #ffffff;
    border: 1px solid #fde68a;
    border-radius: 0.5rem;
    padding: 0.65rem 0.85rem;
    cursor: pointer;
    transition: border-color 0.15s ease, transform 0.1s ease, box-shadow 0.15s ease;
}

.completion-item:hover[b-iqtglkxgh1],
.completion-item:focus-visible[b-iqtglkxgh1] {
    border-color: #f59e0b;
    box-shadow: 0 2px 8px rgba(245, 158, 11, 0.18);
    outline: none;
}

.completion-item:active[b-iqtglkxgh1] {
    transform: translateY(1px);
}

.ci-icon[b-iqtglkxgh1] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 999px;
    background: #fef3c7;
    color: #b45309;
    font-size: 0.9rem;
}

.ci-body[b-iqtglkxgh1] {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.ci-label[b-iqtglkxgh1] {
    font-weight: 600;
    color: #1f2937;
    font-size: 0.92rem;
}

.ci-hint[b-iqtglkxgh1] {
    font-size: 0.78rem;
    color: #6b7280;
    line-height: 1.35;
}

.ci-action[b-iqtglkxgh1] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.82rem;
    font-weight: 600;
    color: #b45309;
    white-space: nowrap;
}

.ci-action i[b-iqtglkxgh1] {
    font-size: 0.7rem;
}

@media (max-width: 480px) {
    .completion-item[b-iqtglkxgh1] {
        grid-template-columns: auto 1fr;
    }

    .ci-action[b-iqtglkxgh1] {
        grid-column: 1 / -1;
        justify-content: flex-end;
        font-size: 0.78rem;
    }
}

/* ===========================================================
   Panel B — Lost & Found AI Profile
   =========================================================== */
.lostfound-profile-panel[b-iqtglkxgh1] {
    position: relative;
    margin-top: 1.25rem;
    background: #f8fafc;
    border: 1px solid #cbd5e1;
    border-radius: 0.75rem;
    padding: 1.1rem 1.15rem;
    overflow: hidden;
}

.lostfound-profile-panel.is-unlocked[b-iqtglkxgh1] {
    background: linear-gradient(180deg, #ecfeff 0%, #f0f9ff 100%);
    border-color: #67e8f9;
}

.lostfound-profile-header[b-iqtglkxgh1] {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
    margin-bottom: 1rem;
}

.lf-header-icon[b-iqtglkxgh1] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 999px;
    background: #e0f2fe;
    color: #0369a1;
    font-size: 1rem;
    flex-shrink: 0;
}

.lostfound-profile-panel.is-unlocked .lf-header-icon[b-iqtglkxgh1] {
    background: #cffafe;
    color: #0e7490;
}

.lf-header-text strong[b-iqtglkxgh1] {
    color: #0f172a;
    font-size: 1rem;
    display: block;
}

.lf-header-sub[b-iqtglkxgh1] {
    color: #475569;
    font-size: 0.83rem;
    margin-top: 0.2rem;
    line-height: 1.45;
}

.lostfound-profile-body[b-iqtglkxgh1] {
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
}

.lostfound-profile-body.is-blurred[b-iqtglkxgh1] {
    filter: blur(0.4px);
    opacity: 0.9;
    pointer-events: none;
    user-select: none;
}

.lf-form-grid[b-iqtglkxgh1] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.95rem;
}

@media (min-width: 768px) {
    .lf-form-grid[b-iqtglkxgh1] {
        grid-template-columns: 1fr 1fr;
    }

    .lf-form-group.lf-full[b-iqtglkxgh1] {
        grid-column: 1 / -1;
    }
}

.lf-form-group .floating-input[b-iqtglkxgh1] {
    position: relative;
}

.lf-form-group textarea.form-control[b-iqtglkxgh1] {
    width: 100%;
    border: 1px solid #cbd5e1;
    border-radius: 0.5rem;
    padding: 1.1rem 0.75rem 0.55rem;
    font-size: 0.9rem;
    background: #ffffff;
    resize: vertical;
    min-height: 4.5rem;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.lf-form-group textarea.form-control:focus[b-iqtglkxgh1] {
    outline: none;
    border-color: #0891b2;
    box-shadow: 0 0 0 3px rgba(8, 145, 178, 0.18);
}

.lf-form-group textarea.form-control:disabled[b-iqtglkxgh1] {
    background: #f1f5f9;
    color: #64748b;
    cursor: not-allowed;
}

.lf-form-group .floating-input label[b-iqtglkxgh1] {
    position: absolute;
    left: 0.75rem;
    top: 0.55rem;
    font-size: 0.72rem;
    color: #64748b;
    font-weight: 500;
    pointer-events: none;
    background: transparent;
}

.lf-hint[b-iqtglkxgh1] {
    margin-top: 0.3rem;
    font-size: 0.72rem;
    color: #64748b;
    line-height: 1.35;
}

/* Temperament chips */
.lf-temperament-section[b-iqtglkxgh1] {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 0.5rem;
    padding: 0.85rem 0.95rem;
}

.lf-section-label[b-iqtglkxgh1] {
    font-weight: 600;
    color: #1f2937;
    font-size: 0.92rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 0.6rem;
}

.lf-section-help[b-iqtglkxgh1] {
    font-weight: 400;
    font-size: 0.76rem;
    color: #6b7280;
}

.temperament-chips[b-iqtglkxgh1] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.temperament-chip[b-iqtglkxgh1] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    background: #f1f5f9;
    color: #334155;
    border: 1px solid #cbd5e1;
    border-radius: 999px;
    padding: 0.35rem 0.85rem;
    font-size: 0.82rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
}

.temperament-chip:hover:not(:disabled)[b-iqtglkxgh1] {
    background: #e2e8f0;
    border-color: #94a3b8;
}

.temperament-chip:focus-visible[b-iqtglkxgh1] {
    outline: 2px solid #0891b2;
    outline-offset: 2px;
}

.temperament-chip.is-selected[b-iqtglkxgh1] {
    background: #0891b2;
    color: #ffffff;
    border-color: #0e7490;
}

.temperament-chip.is-selected:hover:not(:disabled)[b-iqtglkxgh1] {
    background: #0e7490;
    border-color: #155e75;
}

.temperament-chip i[b-iqtglkxgh1] {
    font-size: 0.7rem;
}

.temperament-chip:disabled[b-iqtglkxgh1] {
    cursor: not-allowed;
    opacity: 0.7;
}

/* Locked overlay — keep the underlying content legible so the user can
   see what they'll get once the subscription is active. The CTA card
   inside this overlay carries the visual weight via its contrast. */
.lostfound-locked-overlay[b-iqtglkxgh1] {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 1.25rem;
    background: linear-gradient(180deg,
        rgba(248, 250, 252, 0.15) 0%,
        rgba(248, 250, 252, 0.55) 45%,
        rgba(248, 250, 252, 0.75) 100%);
}

.locked-overlay-card[b-iqtglkxgh1] {
    position: relative;
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid #e2e8f0;
    border-radius: 0.75rem;
    padding: 1.5rem 1.4rem 1.25rem;
    box-shadow: 0 8px 28px rgba(15, 23, 42, 0.18);
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 24rem;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    overflow: hidden;
}

/* Corner ribbon — matches landing page lv2-ribbon-soon style */
.coming-soon-ribbon[b-iqtglkxgh1] {
    position: absolute;
    top: 0;
    right: 0;
    width: 110px;
    height: 110px;
    overflow: hidden;
    pointer-events: none;
    z-index: 3;
}

.coming-soon-ribbon span[b-iqtglkxgh1] {
    position: absolute;
    top: 22px;
    right: -36px;
    transform: rotate(45deg);
    display: block;
    width: 160px;
    text-align: center;
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    padding: 7px 0;
    background: linear-gradient(135deg, #c84545 0%, #8a2222 100%);
    box-shadow: 0 8px 16px -8px rgba(0, 0, 0, 0.45);
}

.locked-icon[b-iqtglkxgh1] {
    width: 44px;
    height: 44px;
    border-radius: 999px;
    background: #0f172a;
    color: #fef9c3;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
    margin-bottom: 0.6rem;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.25);
}

.locked-headline[b-iqtglkxgh1] {
    color: #0f172a;
    font-weight: 700;
    font-size: 1rem;
    margin-bottom: 0.25rem;
}

.locked-sub[b-iqtglkxgh1] {
    color: #475569;
    font-size: 0.83rem;
    max-width: 28rem;
    line-height: 1.45;
    margin-bottom: 0.95rem;
}

.activate-cta[b-iqtglkxgh1] {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    background: linear-gradient(135deg, #f59e0b 0%, #ea580c 100%);
    color: #ffffff;
    border: none;
    border-radius: 999px;
    padding: 0.65rem 1.4rem;
    font-size: 0.88rem;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(234, 88, 12, 0.35);
    transition: transform 0.12s ease, box-shadow 0.15s ease;
}

.activate-cta:hover:not(.is-disabled):not(:disabled)[b-iqtglkxgh1] {
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(234, 88, 12, 0.45);
}

.activate-cta:active:not(.is-disabled):not(:disabled)[b-iqtglkxgh1] {
    transform: translateY(0);
}

.activate-cta i[b-iqtglkxgh1] {
    font-size: 0.78rem;
}

.activate-cta.is-disabled[b-iqtglkxgh1],
.activate-cta:disabled[b-iqtglkxgh1] {
    background: linear-gradient(135deg, #cbd5e1 0%, #94a3b8 100%);
    color: #f8fafc;
    cursor: not-allowed;
    box-shadow: 0 2px 6px rgba(100, 116, 139, 0.25);
    opacity: 0.95;
}

.activate-cta.is-disabled:hover[b-iqtglkxgh1],
.activate-cta:disabled:hover[b-iqtglkxgh1] {
    transform: none;
    box-shadow: 0 2px 6px rgba(100, 116, 139, 0.25);
}

/* === Lost-pet poster CTA (only when L&F AI is active for this pet) === */
.pet-images-poster-cta[b-iqtglkxgh1] {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    padding: 0.9rem 1.05rem;
    margin-bottom: 1.1rem;
    background: linear-gradient(135deg, #fff7ed 0%, #ffedd5 100%);
    border: 1px solid #fdba74;
    border-radius: 0.6rem;
    box-shadow: 0 1px 4px rgba(234, 88, 12, 0.10);
    flex-wrap: wrap;
}

.poster-cta-icon[b-iqtglkxgh1] {
    flex: 0 0 auto;
    font-size: 1.5rem;
    line-height: 1;
}

.poster-cta-body[b-iqtglkxgh1] {
    flex: 1 1 280px;
    min-width: 200px;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    color: #7c2d12;
}

.poster-cta-headline[b-iqtglkxgh1] {
    font-weight: 700;
    font-size: 1rem;
    color: #7c2d12;
}

.poster-cta-sub[b-iqtglkxgh1] {
    font-size: 0.85rem;
    color: #9a3412;
    line-height: 1.4;
}

.poster-cta-btn[b-iqtglkxgh1] {
    flex: 0 0 auto;
    padding: 0.55rem 1rem;
    background: #c2410c;
    color: #ffffff;
    border: none;
    border-radius: 999px;
    font-weight: 700;
    font-size: 0.875rem;
    cursor: pointer;
    transition: background-color 120ms ease, transform 80ms ease;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
}

.poster-cta-btn:hover[b-iqtglkxgh1] {
    background: #9a3412;
}

.poster-cta-btn:active[b-iqtglkxgh1] {
    transform: translateY(1px);
}
/* /Pages/Prelaunch/DonorHomePage.razor.rz.scp.css */
/* =========================================
   PetRyt Donor Home - Post-Login Homepage
   Aesthetic: Warm clinical — like a pet
   hospital that actually cares. Deep navy,
   warm red accent, soft cream backgrounds.
   Font: DM Serif Display + DM Sans
   ========================================= */

/*@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=DM+Sans:wght@300;400;500;600;700&display=swap');*/

/* === Root === */
.donor-home[b-43b1ulxlqk] {
    font-family: 'DM Sans', sans-serif;
    background: radial-gradient(120% 60% at 10% 0%, #fff5e8 0%, transparent 55%), radial-gradient(80% 60% at 100% 0%, #e7f6f3 0%, transparent 55%), linear-gradient(180deg, #fffaf3 0%, #f7e9d3 100%);
    min-height: 100vh;
    color: #1a1a2e;
    overflow: hidden;
    /* Bleed out of article.content padding (1rem top, 1.5rem horizontal via px-md-4) */
    margin: -1rem -1.5rem 0;
}

.donor-home-inner[b-43b1ulxlqk] {
    /*max-width: 1200px;*/
    margin: 0 auto;
}

/* === Emergency Banner === */
.emergency-banner[b-43b1ulxlqk] {
    background: linear-gradient(135deg, #c0392b, #e74c3c);
    color: white;
    padding: 0;
    position: relative;
    overflow: hidden;
    animation: emergency-slide-in-b-43b1ulxlqk 0.4s ease;
}

@keyframes emergency-slide-in-b-43b1ulxlqk {
    from {
        transform: translateY(-100%);
        opacity: 0;
    }

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

.emergency-pulse[b-43b1ulxlqk] {
    position: absolute;
    inset: 0;
    background: rgba(255,255,255,0.05);
    animation: pulse-bg-b-43b1ulxlqk 2s ease-in-out infinite;
}

@keyframes pulse-bg-b-43b1ulxlqk {
    0%, 100% {
        opacity: 0;
    }

    50% {
        opacity: 1;
    }
}

.emergency-inner[b-43b1ulxlqk] {
    max-width: 1100px;
    margin: 0 auto;
    padding: 14px 24px;
    display: flex;
    align-items: center;
    gap: 16px;
    position: relative;
    z-index: 1;
}

.emergency-icon[b-43b1ulxlqk] {
    font-size: 24px;
    animation: shake-b-43b1ulxlqk 0.5s infinite;
}

@keyframes shake-b-43b1ulxlqk {
    0%, 100% {
        transform: rotate(0deg);
    }

    25% {
        transform: rotate(-8deg);
    }

    75% {
        transform: rotate(8deg);
    }
}

.emergency-text[b-43b1ulxlqk] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

    .emergency-text strong[b-43b1ulxlqk] {
        font-size: 15px;
        font-weight: 700;
    }

    .emergency-text span[b-43b1ulxlqk] {
        font-size: 13px;
        opacity: 0.9;
    }

.emergency-actions[b-43b1ulxlqk] {
    display: flex;
    gap: 10px;
    align-items: center;
}

.btn-respond[b-43b1ulxlqk] {
    background: white;
    color: #c0392b;
    border: none;
    padding: 8px 20px;
    border-radius: 8px;
    font-weight: 700;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s;
    font-family: 'DM Sans', sans-serif;
}

    .btn-respond:hover[b-43b1ulxlqk] {
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    }

.btn-dismiss-x[b-43b1ulxlqk] {
    background: rgba(255,255,255,0.2);
    border: none;
    color: white;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 14px;
    transition: background 0.2s;
}

    .btn-dismiss-x:hover[b-43b1ulxlqk] {
        background: rgba(255,255,255,0.35);
    }

/* === Hero === */
.hero[b-43b1ulxlqk] {
    background: #1a1a2e;
    color: white;
    padding: 64px clamp(24px, 5vw, 250px) 72px;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    /*justify-content: center;*/
    gap: clamp(32px, 4vw, 200px);
    /* max-width: 1200px; */
    margin: 0 auto;
}

.hero-bg[b-43b1ulxlqk] {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.hero-orb[b-43b1ulxlqk] {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.25;
}

.orb-1[b-43b1ulxlqk] {
    width: 400px;
    height: 400px;
    background: #c0392b;
    top: -100px;
    right: -100px;
}

.orb-2[b-43b1ulxlqk] {
    width: 250px;
    height: 250px;
    background: #8e44ad;
    bottom: -60px;
    left: 200px;
}

.orb-3[b-43b1ulxlqk] {
    width: 180px;
    height: 180px;
    background: #e74c3c;
    top: 50%;
    left: -60px;
}

.hero-content[b-43b1ulxlqk] {
    position: relative;
    z-index: 1;
    max-width: 100%;
    flex: 0 1 auto;
    animation: fade-up-b-43b1ulxlqk 0.7s ease both;
}

@keyframes fade-up-b-43b1ulxlqk {
    from {
        opacity: 0;
        transform: translateY(24px);
    }

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

.welcome-chip[b-43b1ulxlqk] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.2);
    padding: 6px 16px;
    border-radius: 100px;
    font-size: 13px;
    font-weight: 500;
    margin-bottom: 24px;
    backdrop-filter: blur(8px);
}

.chip-dot[b-43b1ulxlqk] {
    width: 7px;
    height: 7px;
    background: #2ecc71;
    border-radius: 50%;
    animation: blink-b-43b1ulxlqk 2s ease-in-out infinite;
}

@keyframes blink-b-43b1ulxlqk {
    0%, 100% {
        opacity: 1;
    }

    50% {
        opacity: 0.3;
    }
}

.hero-headline[b-43b1ulxlqk] {
    font-family: 'DM Serif Display', serif;
    font-size: clamp(40px, 5vw, 64px);
    line-height: 1.1;
    margin-bottom: 20px;
    font-weight: 400;
}

.headline-accent[b-43b1ulxlqk] {
    color: #e74c3c;
    font-style: italic;
}

.hero-sub[b-43b1ulxlqk] {
    font-size: 17px;
    line-height: 1.65;
    opacity: 0.8;
    margin-bottom: 36px;
    max-width: 660px;
}

.hero-cta-group[b-43b1ulxlqk] {
    display: flex;
    gap: 16px;
    align-items: center;
    flex-wrap: wrap;
}

.cta-primary[b-43b1ulxlqk] {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: #e74c3c;
    color: white;
    border: none;
    padding: 14px 28px;
    border-radius: 12px;
    font-family: 'DM Sans', sans-serif;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.25s;
    box-shadow: 0 4px 20px rgba(231, 76, 60, 0.4);
}

    .cta-primary:hover[b-43b1ulxlqk] {
        background: #c0392b;
        transform: translateY(-2px);
        box-shadow: 0 8px 28px rgba(231, 76, 60, 0.5);
    }

    .cta-primary .cta-icon[b-43b1ulxlqk] {
        font-size: 18px;
    }

.cta-secondary[b-43b1ulxlqk] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: transparent;
    color: rgba(255,255,255,0.8);
    border: 1px solid rgba(255,255,255,0.25);
    padding: 14px 24px;
    border-radius: 12px;
    font-family: 'DM Sans', sans-serif;
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.25s;
}

    .cta-secondary:hover[b-43b1ulxlqk] {
        background: rgba(255,255,255,0.1);
        color: white;
        border-color: rgba(255,255,255,0.4);
    }

/* Hero Visual */
.hero-visual[b-43b1ulxlqk] {
    position: relative;
    z-index: 1;
    flex-shrink: 0;
    margin-left: auto;
    animation: fade-up-b-43b1ulxlqk 0.9s 0.2s ease both;
}

/* === Hero "How it works" card === */
.how-card[b-43b1ulxlqk] {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 20px;
    padding: 24px 26px;
    backdrop-filter: blur(10px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.22);
    width: min(560px, 42vw);
    flex-shrink: 0;
}

.how-card-title[b-43b1ulxlqk] {
    font-family: 'DM Serif Display', serif;
    font-size: 1.35rem;
    color: #ffffff;
    margin-bottom: 18px;
    letter-spacing: 0.2px;
}

.how-steps[b-43b1ulxlqk] {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.how-step[b-43b1ulxlqk] {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.how-step-num[b-43b1ulxlqk] {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, #e74c3c, #c0392b);
    color: #ffffff;
    font-weight: 700;
    font-size: 0.95rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 10px rgba(231, 76, 60, 0.35);
}

.how-step-body[b-43b1ulxlqk] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.how-step-title[b-43b1ulxlqk] {
    font-weight: 600;
    color: #ffffff;
    font-size: 0.98rem;
    line-height: 1.3;
}

.how-step-sub[b-43b1ulxlqk] {
    color: rgba(255, 255, 255, 0.62);
    font-size: 0.82rem;
    line-height: 1.4;
}

@media (max-width: 768px) {
    .how-card[b-43b1ulxlqk] {
        max-width: 100%;
        padding: 18px 18px;
        width: 360px;
    }

    .hero-sub[b-43b1ulxlqk] {
        max-width: 460px;
        font-size:15px;
    }
    .status-section[b-43b1ulxlqk] {
        padding: 32px 24px 0;
    }
    .impact-section[b-43b1ulxlqk] {
        padding: 0 24px;
    }
    .quick-links-section[b-43b1ulxlqk] {
        padding: 0 24px;
    }
}

/* === Status tiles (Profile / Pets / Donors) === */
.status-section[b-43b1ulxlqk] {
    /*max-width: 1100px;*/
    margin: 0 auto;
    padding: 64px clamp(24px, 5vw, 250px) 0px;
    animation: fade-up-b-43b1ulxlqk 0.6s 0.1s ease both;
}

.status-section--all-set[b-43b1ulxlqk] {
    padding-top: 24px;
}

.status-header[b-43b1ulxlqk] {
    margin-bottom: 16px;
}

    .status-header h2[b-43b1ulxlqk] {
        font-family: 'DM Serif Display', serif;
        font-size: 1.6rem;
        color: #1a1a2e;
        margin: 0;
        font-weight: 400;
    }

.status-tiles[b-43b1ulxlqk] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.status-tile[b-43b1ulxlqk] {
    background: #ffffff;
    border: 1px solid rgba(26, 26, 46, 0.08);
    border-radius: 16px;
    padding: 18px 20px;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
    display: flex;
    flex-direction: column;
    gap: 6px;
    position: relative;
    /*min-height: 200px;*/
}

    .status-tile:hover[b-43b1ulxlqk] {
        transform: translateY(-2px);
        box-shadow: 0 10px 24px rgba(26, 26, 46, 0.08);
        border-color: rgba(231, 76, 60, 0.35);
    }

.status-tile--done[b-43b1ulxlqk] {
    border-color: rgba(46, 204, 113, 0.35);
}

    .status-tile--done .status-tile-metric[b-43b1ulxlqk] {
        color: #2ecc71;
    }

    .status-tile--done .status-tile-cta[b-43b1ulxlqk] {
        color: #2ecc71;
    }

.status-tile--empty[b-43b1ulxlqk] {
    background: rgba(255, 255, 255, 0.7);
    border-style: dashed;
}

.status-tile--disabled[b-43b1ulxlqk] {
    opacity: 0.6;
    cursor: not-allowed;
}

    .status-tile--disabled:hover[b-43b1ulxlqk] {
        transform: none;
        box-shadow: none;
        border-color: rgba(26, 26, 46, 0.08);
    }

.status-tile-head[b-43b1ulxlqk] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.status-tile-icon[b-43b1ulxlqk] {
    font-size: 1.1rem;
}

.status-tile-label[b-43b1ulxlqk] {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: rgba(26, 26, 46, 0.6);
    font-weight: 600;
}

.status-tile-metric[b-43b1ulxlqk] {
    font-family: 'DM Serif Display', serif;
    font-size: 2.6rem;
    line-height: 1;
    color: #1a1a2e;
    margin-top: 4px;
}

    .status-tile-metric .status-tile-unit[b-43b1ulxlqk] {
        font-size: 1.2rem;
        color: rgba(26, 26, 46, 0.5);
        margin-left: 2px;
    }

    .status-tile-metric .status-tile-frac[b-43b1ulxlqk] {
        font-size: 1.3rem;
        color: rgba(26, 26, 46, 0.45);
        margin-left: 6px;
        font-family: 'DM Sans', sans-serif;
    }

.status-tile-metric--muted[b-43b1ulxlqk] {
    color: rgba(26, 26, 46, 0.3);
}

.status-tile-caption[b-43b1ulxlqk] {
    font-size: 1rem;
    color: rgba(26, 26, 46, 0.6);
    font-family: "DM Sans", sans-serif;
}

.status-tile-sub[b-43b1ulxlqk] {
    font-size: 0.82rem;
    color: rgba(26, 26, 46, 0.7);
    margin-top: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.status-tile-sub--muted[b-43b1ulxlqk] {
    color: rgba(26, 26, 46, 0.4);
    font-style: italic;
}

.status-tile-bar[b-43b1ulxlqk] {
    height: 6px;
    background: rgba(26, 26, 46, 0.08);
    border-radius: 999px;
    overflow: hidden;
    margin-top: 8px;
}

.status-tile-bar-fill[b-43b1ulxlqk] {
    height: 100%;
    transition: width 0.3s ease;
    border-radius: 999px;
}

.status-tile-cta[b-43b1ulxlqk] {
    /*margin-top: auto;*/
    padding-top: 10px;
    font-size: 0.88rem;
    font-weight: 600;
    color: #e74c3c;
}

/* All-set celebration row */
.status-allset-card[b-43b1ulxlqk] {
    background: linear-gradient(135deg, rgba(46, 204, 113, 0.12), rgba(46, 204, 113, 0.04));
    border: 1px solid rgba(46, 204, 113, 0.25);
    border-radius: 16px;
    padding: 16px 20px;
    display: flex;
    align-items: center;
    gap: 14px;
}

.status-allset-icon[b-43b1ulxlqk] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #2ecc71;
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    flex-shrink: 0;
}

.status-allset-text[b-43b1ulxlqk] {
    flex: 1;
    font-size: 0.95rem;
    color: #1a1a2e;
}

    .status-allset-text strong[b-43b1ulxlqk] {
        display: block;
        font-size: 1.05rem;
        margin-bottom: 2px;
    }

.status-allset-cta[b-43b1ulxlqk] {
    background: transparent;
    border: 1px solid rgba(46, 204, 113, 0.4);
    color: #1a8a4a;
    border-radius: 10px;
    padding: 8px 14px;
    cursor: pointer;
    font-weight: 600;
    font-family: 'DM Sans', sans-serif;
    transition: background 0.15s ease;
}

    .status-allset-cta:hover[b-43b1ulxlqk] {
        background: rgba(46, 204, 113, 0.12);
    }

@media (max-width: 768px) {
    .status-tiles[b-43b1ulxlqk] {
        grid-template-columns: 1fr;
    }
}

/* === My Donors Section === */
.my-donors-section[b-43b1ulxlqk] {
    max-width: 1100px;
    margin: 0 auto;
    padding: 48px 24px 0;
}

.section-header-row[b-43b1ulxlqk] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 24px;
}

.section-title[b-43b1ulxlqk] {
    font-family: 'DM Serif Display', serif;
    font-size: 26px;
    font-weight: 400;
    color: #1a1a2e;
    margin-bottom: 4px;
}

.section-sub[b-43b1ulxlqk] {
    color: #7a7a8c;
    font-size: 14px;
}

.add-donor-btn[b-43b1ulxlqk] {
    background: transparent;
    border: 1.5px solid #1a1a2e;
    color: #1a1a2e;
    padding: 8px 18px;
    border-radius: 10px;
    font-family: 'DM Sans', sans-serif;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

    .add-donor-btn:hover[b-43b1ulxlqk] {
        background: #1a1a2e;
        color: white;
    }

.donor-cards-row[b-43b1ulxlqk] {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    padding-bottom: 8px;
    scrollbar-width: thin;
}

.donor-card[b-43b1ulxlqk] {
    background: white;
    border-radius: 18px;
    padding: 24px 20px;
    border: 1px solid #e8e2d9;
    min-width: 180px;
    flex-shrink: 0;
    cursor: pointer;
    transition: all 0.25s;
    box-shadow: 0 2px 12px rgba(0,0,0,0.04);
    position: relative;
}

    .donor-card:hover[b-43b1ulxlqk] {
        transform: translateY(-4px);
        box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    }

    .donor-card.unavailable[b-43b1ulxlqk] {
        opacity: 0.6;
    }

.donor-card-top[b-43b1ulxlqk] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 12px;
}

.pet-avatar[b-43b1ulxlqk] {
    font-size: 36px;
    line-height: 1;
}

.availability-dot[b-43b1ulxlqk] {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-top: 4px;
}

.avail[b-43b1ulxlqk] {
    background: #2ecc71;
    box-shadow: 0 0 0 3px rgba(46,204,113,0.2);
}

.unavail[b-43b1ulxlqk] {
    background: #95a5a6;
}

.donor-name[b-43b1ulxlqk] {
    font-weight: 700;
    font-size: 16px;
    color: #1a1a2e;
    margin-bottom: 3px;
}

.donor-meta[b-43b1ulxlqk] {
    font-size: 12px;
    color: #9a9aaa;
    margin-bottom: 10px;
}

.blood-tag[b-43b1ulxlqk] {
    background: #fef0ee;
    color: #e74c3c;
    border-radius: 8px;
    padding: 3px 10px;
    font-size: 12px;
    font-weight: 600;
}

.donor-stat-row[b-43b1ulxlqk] {
    display: flex;
    justify-content: space-between;
    margin-top: 12px;
    font-size: 12px;
    color: #7a7a8c;
}

.add-card[b-43b1ulxlqk] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 2px dashed #d0ccc5;
    background: transparent;
    gap: 8px;
}

    .add-card:hover[b-43b1ulxlqk] {
        border-color: #1a1a2e;
        background: #f9f7f4;
    }

.add-icon[b-43b1ulxlqk] {
    font-size: 28px;
    color: #c0bbb4;
    font-weight: 300;
}

.add-label[b-43b1ulxlqk] {
    font-size: 13px;
    color: #9a9aaa;
    text-align: center;
}

/* === Impact Section === */
.impact-section[b-43b1ulxlqk] {
    /*max-width: 1100px;*/
    margin: 0 auto;
    padding: 0 clamp(24px, 5vw, 250px);
}

.impact-header[b-43b1ulxlqk] {
    text-align: center;
    margin-bottom: 48px;
}

.impact-eyebrow[b-43b1ulxlqk] {
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 12px;
    font-weight: 700;
    color: #e74c3c;
    margin-bottom: 12px;
}

.impact-header h2[b-43b1ulxlqk] {
    font-family: 'DM Serif Display', serif;
    font-size: clamp(28px, 4vw, 44px);
    font-weight: 400;
    line-height: 1.2;
    color: #1a1a2e;
}

.impact-grid[b-43b1ulxlqk] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-bottom: 40px;
}

.impact-card[b-43b1ulxlqk] {
    border-radius: 20px;
    padding: 36px 28px;
    transition: transform 0.25s;
}

    .impact-card:hover[b-43b1ulxlqk] {
        transform: translateY(-4px);
    }

    .impact-card.red[b-43b1ulxlqk] {
        background: #1a1a2e;
        color: white;
    }

    .impact-card.warm[b-43b1ulxlqk] {
        /*background: #fef0ee;*/
        background: #ffa1a1;
        color: #1a1a2e;
    }

    .impact-card.teal[b-43b1ulxlqk] {
        background: #bfead4;
        color: #1a1a2e;
    }

.impact-num[b-43b1ulxlqk] {
    font-family: 'DM Serif Display', serif;
    font-size: 52px;
    font-weight: 400;
    line-height: 1;
    margin-bottom: 12px;
}

.impact-card.red .impact-num[b-43b1ulxlqk] {
    color: #e74c3c;
}

.impact-card.warm .impact-num[b-43b1ulxlqk] {
    color: #1a1a2e;
}

.impact-card.teal .impact-num[b-43b1ulxlqk] {
    color: #27ae60;
}

.impact-desc[b-43b1ulxlqk] {
    font-size: 16px;
    line-height: 1.5;
    opacity: 0.8;
}

.impact-cta-row[b-43b1ulxlqk] {
    text-align: center;
}

/* === Quick Links === */
.quick-links-section[b-43b1ulxlqk] {
    /*max-width: 1100px;*/
    margin: 0 auto;
    padding: 0 clamp(24px, 5vw, 250px) 72px;
}

.quick-links-grid[b-43b1ulxlqk] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-top: 20px;
}

.quick-link-card[b-43b1ulxlqk] {
    background: white;
    border-radius: 18px;
    padding: 28px 24px;
    border: 1px solid #e8e2d9;
    position: relative;
    overflow: hidden;
    transition: all 0.25s;
}

.coming-soon-ribbon[b-43b1ulxlqk] {
    position: absolute;
    top: 0;
    right: 0;
    width: 110px;
    height: 110px;
    overflow: hidden;
    pointer-events: none;
    z-index: 3;
}

.coming-soon-ribbon span[b-43b1ulxlqk] {
    position: absolute;
    top: 28px;
    right: -36px;
    transform: rotate(45deg);
    display: block;
    width: 160px;
    text-align: center;
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    padding: 7px 0;
    background: linear-gradient(135deg, #c84545 0%, #8a2222 100%);
    box-shadow: 0 8px 16px -8px rgba(0, 0, 0, 0.45);
    overflow: hidden;
}

.coming-soon-ribbon span[b-43b1ulxlqk]::after {
    content: '';
    position: absolute;
    top: 0;
    left: -80%;
    width: 50%;
    height: 100%;
    background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.45) 50%, transparent 100%);
    animation: ribbon-shimmer-b-43b1ulxlqk 2.8s ease-in-out infinite;
}

@keyframes ribbon-shimmer-b-43b1ulxlqk {
    0%   { left: -80%; }
    60%  { left: 160%; }
    100% { left: 160%; }
}

.active-card[b-43b1ulxlqk] {
    cursor: pointer;
}

    .active-card:hover[b-43b1ulxlqk] {
        transform: translateY(-3px);
        box-shadow: 0 10px 30px rgba(0,0,0,0.08);
        border-color: #1a1a2e;
    }

.locked-card[b-43b1ulxlqk] {
    opacity: 0.7;
}

.ql-icon[b-43b1ulxlqk] {
    font-size: 28px;
    margin-bottom: 12px;
}

.ql-title[b-43b1ulxlqk] {
    font-weight: 700;
    font-size: 17px;
    color: #1a1a2e;
    margin-bottom: 5px;
}

.ql-desc[b-43b1ulxlqk] {
    font-size: 13px;
    color: #7a7a8c;
}

.ql-arrow[b-43b1ulxlqk] {
    position: absolute;
    top: 28px;
    right: 24px;
    font-size: 20px;
    color: #c0bbb4;
    transition: all 0.2s;
}

.active-card:hover .ql-arrow[b-43b1ulxlqk] {
    color: #1a1a2e;
    transform: translateX(3px);
}

/* === Loading === */
.loading-overlay[b-43b1ulxlqk] {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.4);
    z-index: 3000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.loading-content[b-43b1ulxlqk] {
    background: white;
    padding: 40px;
    border-radius: 16px;
    text-align: center;
}

    .loading-content p[b-43b1ulxlqk] {
        margin-top: 16px;
        color: #7a7a8c;
        font-size: 14px;
    }

.loading-spinner-large[b-43b1ulxlqk] {
    width: 40px;
    height: 40px;
    border: 3px solid #e8e2d9;
    border-top-color: #e74c3c;
    border-radius: 50%;
    animation: spin-b-43b1ulxlqk 0.9s linear infinite;
    margin: 0 auto;
}

@keyframes spin-b-43b1ulxlqk {
    to {
        transform: rotate(360deg);
    }
}

.btn-label-mobile[b-43b1ulxlqk] { display: none; }
.btn-label-desktop[b-43b1ulxlqk] { display: inline; }

/* === Section Divider === */
.dh-divider[b-43b1ulxlqk] {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 40px clamp(20px, 5vw, 80px);
    max-width: 880px;
    margin: 0 auto;
}

.dh-divider-rule[b-43b1ulxlqk] {
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, #1a1a2e 50%, transparent 100%);
    opacity: 0.15;
}

.dh-divider-mark[b-43b1ulxlqk] {
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #fffaf3;
    color: #1a1a2e;
    border: 1px solid rgba(26, 26, 46, 0.12);
    box-shadow: 0 1px 2px rgba(26, 26, 46, 0.05), 0 8px 24px rgba(26, 26, 46, 0.06);
    transform: rotate(-12deg);
}

.dh-divider-mark i[b-43b1ulxlqk] {
    font-size: 16px;
}

/* === Responsive === */
@media (max-width: 900px) {
    .hero[b-43b1ulxlqk] {
        flex-direction: column;
        padding: 48px 24px;
        gap: 32px;
    }

    .hero-visual[b-43b1ulxlqk] {
        width: 100%;
        margin-left: 0;
    }

    .stat-ring[b-43b1ulxlqk] {
        justify-content: center;
    }

    /* --- Impact cards: stat-dominant chip layout --- */
    .impact-grid[b-43b1ulxlqk] {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
        align-items: start;
    }

    .impact-card[b-43b1ulxlqk] {
        padding: 14px 10px 12px;
        border-radius: 14px;
        min-height: 100px;
    }

    .impact-num[b-43b1ulxlqk] {
        font-size: 26px;
        line-height: 1;
        margin-bottom: 6px;
    }

    .impact-desc[b-43b1ulxlqk] {
        font-size: 10.5px;
        line-height: 1.35;
        opacity: 0.85;
        display: -webkit-box;
        -webkit-line-clamp: 4;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    /* --- Quick-link cards: 2-up compact navigation --- */
    .quick-links-grid[b-43b1ulxlqk] {
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
        align-items: start;
    }

    .quick-link-card[b-43b1ulxlqk] {
        padding: 14px 12px 14px;
        border-radius: 14px;
    }

    .ql-icon[b-43b1ulxlqk] {
        font-size: 22px;
        margin-bottom: 8px;
    }

    .ql-title[b-43b1ulxlqk] {
        font-size: 14px;
        margin-bottom: 3px;
    }

    .ql-desc[b-43b1ulxlqk] {
        font-size: 11px;
        line-height: 1.35;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .ql-arrow[b-43b1ulxlqk] {
        top: 14px;
        right: 12px;
        font-size: 16px;
    }


}
@media (max-width:768px){
    .donor-home[b-43b1ulxlqk] {
        margin: 0; /* article.content has no padding on mobile */
    }
    .hero-cta-group[b-43b1ulxlqk] {
        margin-bottom: 30px;
    }
    .quick-link-card .ql-desc[b-43b1ulxlqk] {
        display: none;
    }
    .btn-label-mobile[b-43b1ulxlqk] { display: inline; }
    .btn-label-desktop[b-43b1ulxlqk] { display: none; }
    .quick-link-card .coming-soon-ribbon[b-43b1ulxlqk] {
        width: 72px;
        height: 72px;
    }
        .quick-link-card .coming-soon-ribbon span[b-43b1ulxlqk] {
            top: 16px;
            right: -30px;
            width: 110px;
            font-size: 7.5px;
            padding: 3px 0;
            letter-spacing: 0.08em;
        }
}
@media (max-width: 600px) {
    .hero-headline[b-43b1ulxlqk] {
        font-size: 36px;
    }

    .hero-cta-group[b-43b1ulxlqk] {
        flex-direction: row;
        align-items: center;
        flex-wrap: nowrap;
        gap: 10px;
    }

    .cta-primary[b-43b1ulxlqk] {
        padding: 11px;
        font-size: 13px;
        gap: 6px;
        flex: 1;
        justify-content: center;
    }

    .cta-primary .cta-icon[b-43b1ulxlqk] {
        font-size: 15px;
    }

    .cta-secondary[b-43b1ulxlqk] {
        padding: 11px 14px;
        font-size: 13px;
        flex: 1;
        justify-content: center;
    }

    .emergency-inner[b-43b1ulxlqk] {
        flex-direction: column;
        text-align: center;
        gap: 10px;
    }
}


/* ── Pet profile completion nudges ── */
.nudge-section[b-43b1ulxlqk] {
    padding: 0 24px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 8px;
}

.nudge-card[b-43b1ulxlqk] {
    display: flex;
    align-items: center;
    gap: 14px;
    background: #fffbeb;
    border: 1.5px solid #fde68a;
    border-radius: 14px;
    padding: 14px 16px;
}

.nudge-avatar[b-43b1ulxlqk] {
    font-size: 28px;
    flex-shrink: 0;
    width: 40px;
    text-align: center;
}

.nudge-body[b-43b1ulxlqk] {
    flex: 1;
    min-width: 0;
}

.nudge-title[b-43b1ulxlqk] {
    font-size: 14px;
    font-weight: 700;
    color: #92400e;
    margin-bottom: 6px;
}

.nudge-missing[b-43b1ulxlqk] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 5px;
}

.nudge-tag[b-43b1ulxlqk] {
    font-size: 11px;
    font-weight: 600;
    background: #fef3c7;
    color: #b45309;
    border: 1px solid #fde68a;
    border-radius: 20px;
    padding: 2px 8px;
}

.nudge-hint[b-43b1ulxlqk] {
    font-size: 12px;
    color: #a16207;
}

.nudge-cta[b-43b1ulxlqk] {
    flex-shrink: 0;
    padding: 8px 14px;
    background: #f59e0b;
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.15s;
    white-space: nowrap;
}

    .nudge-cta:hover[b-43b1ulxlqk] {
        background: #d97706;
    }

/* === TEMPORARY: build version stamp — remove after confirming production deploy === */
.dh-version-stamp[b-43b1ulxlqk] {
    text-align: center;
    padding: 8px;
    font-size: 11px;
    font-family: 'JetBrains Mono', monospace;
    color: #f0b429;
    opacity: 0.7;
    letter-spacing: 0.05em;
}

@media (max-width: 480px) {
    .nudge-section[b-43b1ulxlqk] {
        padding: 0 16px;
    }

    .nudge-card[b-43b1ulxlqk] {
        flex-wrap: wrap;
    }

    .nudge-cta[b-43b1ulxlqk] {
        width: 100%;
        text-align: center;
    }
    .status-section[b-43b1ulxlqk] {
        padding: 32px 24px 0;
    }

    .impact-section[b-43b1ulxlqk] {
        padding: 0 24px;
    }

    .quick-links-section[b-43b1ulxlqk] {
        padding: 0 24px 24px;
    }
}
/* /Pages/Prelaunch/RegisterPetBloodDonor.razor.rz.scp.css */
/* ===================================================================
   RegisterPetBloodDonor — Scoped styles
   =================================================================== */

.rpbd2[b-aqgxc1mgcc] {
    /* PetRyt blood-domain identity */
    --rpbd2-blood-1: #dc3545;
    --rpbd2-blood-2: #d58181;
    --rpbd2-blood-deep: #b32132;
    /* Design-system tokens */
    --rpbd2-primary: #7C3AED;
    --rpbd2-primary-ink: #FFFFFF;
    --rpbd2-secondary: #A78BFA;
    --rpbd2-accent: #16A34A;
    --rpbd2-accent-ink: #FFFFFF;
    --rpbd2-bg: #FAF5FF;
    --rpbd2-fg: #4C1D95;
    --rpbd2-muted: #ECEEF9;
    --rpbd2-border: #DDD6FE;
    --rpbd2-destructive: #DC2626;
    --rpbd2-ring: rgba(124, 58, 237, 0.25);
    --rpbd2-ink: #1F2937;
    --rpbd2-ink-soft: #4B5563;
    --rpbd2-ink-faint: #6B7280;
    --rpbd2-surface: #FFFFFF;
    --rpbd2-surface-soft: #F9FAFB;
    --rpbd2-line: #E5E7EB;
    --rpbd2-s1: 4px;
    --rpbd2-s2: 8px;
    --rpbd2-s3: 12px;
    --rpbd2-s4: 16px;
    --rpbd2-s5: 24px;
    --rpbd2-s6: 32px;
    --rpbd2-s7: 48px;
    --rpbd2-r-sm: 6px;
    --rpbd2-r-md: 10px;
    --rpbd2-r-lg: 14px;
    --rpbd2-r-xl: 20px;
    --rpbd2-sh-sm: 0 1px 2px rgba(17, 24, 39, 0.06);
    --rpbd2-sh-md: 0 12px 12px rgb(17 24 39 / 28%);
    --rpbd2-sh-lg: 0 12px 32px rgba(17, 24, 39, 0.12);
    --rpbd2-sh-xl: 0 24px 48px rgba(17, 24, 39, 0.18);
    --rpbd2-ease: cubic-bezier(.2,.7,.3,1);
    --rpbd2-dur: 200ms;
    font-family: 'Varela Round', 'Nunito Sans', system-ui, -apple-system, 'Segoe UI', Tahoma, sans-serif;
    color: var(--rpbd2-ink);
    background: var(--rpbd2-surface);
    min-height: 100vh;
    margin: 0 auto;
    max-width: 1200px;
    border-radius: 10px;
}
.rpbd2-req[b-aqgxc1mgcc] {
    color: var(--rpbd2-destructive);
    margin-left: 2px;
    font-size:larger;
}

    .rpbd2 h1[b-aqgxc1mgcc],
    .rpbd2 h2[b-aqgxc1mgcc],
    .rpbd2 h3[b-aqgxc1mgcc],
    .rpbd2 .rpbd2-tab-title[b-aqgxc1mgcc],
    .rpbd2 .rpbd2-group-title[b-aqgxc1mgcc],
    .rpbd2 .rpbd2-otp-section-title[b-aqgxc1mgcc],
    .rpbd2 .rpbd2-thanks-title[b-aqgxc1mgcc],
    .rpbd2 .rpbd2-hero-title[b-aqgxc1mgcc] {
        font-family: 'Varela Round', 'Nunito Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
        letter-spacing: -0.01em;
    }

/* ======================== HERO ======================== */
.rpbd2-hero[b-aqgxc1mgcc] {
    background: radial-gradient(1200px 400px at 20% -10%, rgba(255,255,255,0.18), transparent 60%), linear-gradient(135deg, var(--rpbd2-blood-1) 0%, var(--rpbd2-blood-2) 100%);
    color: #fff;
    padding: var(--rpbd2-s6) var(--rpbd2-s5) var(--rpbd2-s6);
    text-align: center;
    border-radius: 10px;
}

.rpbd2-hero-inner[b-aqgxc1mgcc] {
    max-width: 760px;
    margin: 0 auto;
}

.rpbd2-hero-eyebrow[b-aqgxc1mgcc] {
    display: inline-flex;
    align-items: center;
    gap: var(--rpbd2-s2);
    padding: 6px 14px;
    background: rgba(255, 255, 255, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    backdrop-filter: blur(4px);
}

.rpbd2-hero-title[b-aqgxc1mgcc] {
    font-size: 36px;
    line-height: 1.15;
    margin: var(--rpbd2-s4) 0 var(--rpbd2-s3);
    font-weight: 700;
}

.rpbd2-hero-sub[b-aqgxc1mgcc] {
    font-size: 17px;
    line-height: 1.55;
    opacity: 0.95;
    max-width: 580px;
    margin: 0 auto var(--rpbd2-s5);
}

.rpbd2-trust-row[b-aqgxc1mgcc] {
    display: flex;
    justify-content: center;
    gap: var(--rpbd2-s2);
    flex-wrap: wrap;
}

.rpbd2-trust-chip[b-aqgxc1mgcc] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: rgba(255,255,255,0.14);
    border: 1px solid rgba(255,255,255,0.22);
    border-radius: 999px;
    font-size: 13px;
    color: #fff;
    backdrop-filter: blur(4px);
}

    .rpbd2-trust-chip i[b-aqgxc1mgcc] {
        font-size: 12px;
        opacity: 0.95;
    }

/* ======================== PROGRESS ======================== */
.rpbd2-progress-wrap[b-aqgxc1mgcc] {
    max-width: 1000px;
    margin: calc(var(--rpbd2-s5) * -1) auto var(--rpbd2-s5);
    padding: var(--rpbd2-s4) var(--rpbd2-s5);
    background: var(--rpbd2-surface);
    border-radius: var(--rpbd2-r-lg);
    box-shadow: var(--rpbd2-sh-md);
    position: relative;
    z-index: 1;
}

.rpbd2-progress-meta[b-aqgxc1mgcc] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--rpbd2-s3);
    margin-bottom: 10px;
    flex-wrap: wrap;
}

.rpbd2-progress-step[b-aqgxc1mgcc] {
    font-size: 13px;
    font-weight: 700;
    color: var(--rpbd2-primary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.rpbd2-progress-label[b-aqgxc1mgcc] {
    font-size: 15px;
    font-weight: 600;
    color: var(--rpbd2-ink);
}

.rpbd2-progress-bar[b-aqgxc1mgcc] {
    height: 6px;
    background: var(--rpbd2-muted);
    border-radius: 999px;
    overflow: hidden;
}

.rpbd2-progress-fill[b-aqgxc1mgcc] {
    height: 100%;
    background: linear-gradient(90deg, var(--rpbd2-primary), var(--rpbd2-accent));
    border-radius: 999px;
    transition: width 400ms var(--rpbd2-ease);
}

/* ======================== MAIN LAYOUT ======================== */
.rpbd2-form[b-aqgxc1mgcc] {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--rpbd2-s5);
}

.rpbd2-main[b-aqgxc1mgcc] {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: var(--rpbd2-s5);
    align-items: start;
}

/* ======================== SIDEBAR / TABS ======================== */
.rpbd2-sidebar[b-aqgxc1mgcc] {
    background: var(--rpbd2-surface);
    border-radius: var(--rpbd2-r-lg);
    padding: var(--rpbd2-s3);
    box-shadow: var(--rpbd2-sh-sm);
    position: sticky;
    top: var(--rpbd2-s4);
    display: flex;
    flex-direction: column;
    gap: var(--rpbd2-s2);
}

.rpbd2-tab[b-aqgxc1mgcc] {
    appearance: none;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--rpbd2-r-md);
    padding: var(--rpbd2-s3) var(--rpbd2-s4);
    cursor: pointer;
    text-align: left;
    display: flex;
    align-items: center;
    gap: var(--rpbd2-s3);
    transition: background var(--rpbd2-dur) var(--rpbd2-ease), border-color var(--rpbd2-dur) var(--rpbd2-ease), box-shadow var(--rpbd2-dur) var(--rpbd2-ease);
    width: 100%;
    color: var(--rpbd2-ink);
    font: inherit;
}

    .rpbd2-tab:hover[b-aqgxc1mgcc] {
        background: var(--rpbd2-surface-soft);
    }

    .rpbd2-tab:focus-visible[b-aqgxc1mgcc] {
        outline: none;
        box-shadow: 0 0 0 3px var(--rpbd2-ring);
    }

    .rpbd2-tab.is-active[b-aqgxc1mgcc] {
        background: linear-gradient(135deg, #FFF5F5 0%, #FEECEC 100%);
        border-color: rgba(220, 53, 69, 0.18);
        box-shadow: 0 4px 14px rgba(220, 53, 69, 0.1);
    }

    .rpbd2-tab.is-complete .rpbd2-tab-icon[b-aqgxc1mgcc] {
        background: linear-gradient(135deg, #DCFCE7 0%, #BBF7D0 100%);
        color: var(--rpbd2-accent);
    }

    .rpbd2-tab.is-active.is-complete[b-aqgxc1mgcc] {
        background: linear-gradient(135deg, #F0FDF4 0%, #DCFCE7 100%);
        border-color: rgba(22, 163, 74, 0.2);
    }

.rpbd2-tab-icon[b-aqgxc1mgcc] {
    width: 42px;
    height: 42px;
    border-radius: var(--rpbd2-r-md);
    background: var(--rpbd2-muted);
    color: var(--rpbd2-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
    transition: background var(--rpbd2-dur) var(--rpbd2-ease);
}

.rpbd2-tab.is-active .rpbd2-tab-icon[b-aqgxc1mgcc] {
    background: linear-gradient(135deg, var(--rpbd2-blood-1), var(--rpbd2-blood-2));
    color: #fff;
}

.rpbd2-tab-body[b-aqgxc1mgcc] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.rpbd2-tab-title[b-aqgxc1mgcc] {
    font-size: 15px;
    font-weight: 700;
    line-height: 1.25;
    color: var(--rpbd2-ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rpbd2-tab-sub[b-aqgxc1mgcc] {
    font-size: 12px;
    color: var(--rpbd2-ink-faint);
    margin-top: 2px;
}

.rpbd2-tab-status-complete[b-aqgxc1mgcc] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--rpbd2-accent);
    font-weight: 600;
}

.rpbd2-tab-remove[b-aqgxc1mgcc] {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--rpbd2-ink-faint);
    cursor: pointer;
    flex-shrink: 0;
    transition: background var(--rpbd2-dur) var(--rpbd2-ease), color var(--rpbd2-dur) var(--rpbd2-ease);
}

    .rpbd2-tab-remove:hover[b-aqgxc1mgcc],
    .rpbd2-tab-remove:focus-visible[b-aqgxc1mgcc] {
        background: #FEE2E2;
        color: var(--rpbd2-destructive);
        outline: none;
    }

.rpbd2-tab-add[b-aqgxc1mgcc] {
    appearance: none;
    background: transparent;
    border: 2px dashed var(--rpbd2-border);
    color: var(--rpbd2-primary);
    border-radius: var(--rpbd2-r-md);
    padding: var(--rpbd2-s3) var(--rpbd2-s4);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: var(--rpbd2-s2);
    font-weight: 600;
    font-size: 14px;
    transition: all var(--rpbd2-dur) var(--rpbd2-ease);
    margin-top: var(--rpbd2-s2);
}

    .rpbd2-tab-add:hover:not(:disabled)[b-aqgxc1mgcc] {
        background: var(--rpbd2-muted);
        border-color: var(--rpbd2-primary);
    }

    .rpbd2-tab-add:focus-visible[b-aqgxc1mgcc] {
        outline: none;
        box-shadow: 0 0 0 3px var(--rpbd2-ring);
    }

    .rpbd2-tab-add:disabled[b-aqgxc1mgcc] {
        opacity: 0.5;
        cursor: not-allowed;
    }

.rpbd2-tab-add-icon[b-aqgxc1mgcc] {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: var(--rpbd2-muted);
    color: var(--rpbd2-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* ======================== CONTENT ======================== */
.rpbd2-content[b-aqgxc1mgcc] {
    background: var(--rpbd2-surface);
    border-radius: var(--rpbd2-r-lg);
    box-shadow: var(--rpbd2-sh-sm);
    padding: var(--rpbd2-s5);
}

.rpbd2-panel[hidden][b-aqgxc1mgcc] {
    display: none;
}

.rpbd2-group[b-aqgxc1mgcc] {
    margin-bottom: var(--rpbd2-s6);
}

    .rpbd2-group:last-child[b-aqgxc1mgcc] {
        margin-bottom: 0;
    }

.rpbd2-group-head[b-aqgxc1mgcc] {
    margin-bottom: var(--rpbd2-s5);
}

.rpbd2-group-title[b-aqgxc1mgcc] {
    font-size: 20px;
    font-weight: 700;
    margin: 0;
    color: var(--rpbd2-ink);
    display: flex;
    align-items: center;
    gap: var(--rpbd2-s2);
}

    .rpbd2-group-title i[b-aqgxc1mgcc] {
        color: var(--rpbd2-primary);
        font-size: 18px;
    }

.rpbd2-group-sub[b-aqgxc1mgcc] {
    margin: 6px 0 0;
    font-size: 14px;
    color: var(--rpbd2-ink-soft);
    line-height: 1.5;
}

.rpbd2-subhead[b-aqgxc1mgcc] {
    display: flex;
    align-items: center;
    gap: var(--rpbd2-s2);
    font-size: 15px;
    font-weight: 700;
    color: var(--rpbd2-ink);
    margin-bottom: var(--rpbd2-s4);
    flex-wrap: wrap;
}

    .rpbd2-subhead i[b-aqgxc1mgcc] {
        color: var(--rpbd2-primary);
    }

.rpbd2-subhead-spaced[b-aqgxc1mgcc] {
    margin-top: var(--rpbd2-s6);
}

.rpbd2-subhead-sub[b-aqgxc1mgcc] {
    font-size: 12px;
    font-weight: 500;
    color: var(--rpbd2-ink-faint);
    width: 100%;
}

/* ======================== GRID ======================== */
.rpbd2-grid[b-aqgxc1mgcc] {
    display: grid;
    gap: var(--rpbd2-s4) var(--rpbd2-s4);
}

.rpbd2-grid-2[b-aqgxc1mgcc] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.rpbd2-grid-3[b-aqgxc1mgcc] {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.rpbd2-field[b-aqgxc1mgcc] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.rpbd2-field-full[b-aqgxc1mgcc] {
    grid-column: 1 / -1;
}

/* ======================== FLOATING INPUT (scoped overrides) ======================== */
.rpbd2 .floating-input[b-aqgxc1mgcc] {
    position: relative;
    background: var(--rpbd2-surface);
    border-radius: var(--rpbd2-r-md);
}

    /* Base input/select/textarea styling inside floating wrapper.
   Padding-top reserves space for the floated label. */
    .rpbd2 .floating-input > .rpbd2-input[b-aqgxc1mgcc] {
        width: 100%;
        padding: 15px;
        font: inherit;
        font-size: 15px;
        color: var(--rpbd2-ink);
        background: var(--rpbd2-surface);
        border: 1.5px solid var(--rpbd2-line);
        border-radius: var(--rpbd2-r-md);
        box-sizing: border-box;
        transition: border-color var(--rpbd2-dur) var(--rpbd2-ease), box-shadow var(--rpbd2-dur) var(--rpbd2-ease), background var(--rpbd2-dur) var(--rpbd2-ease);
        line-height: 1.3;
    }

        .rpbd2 .floating-input > .rpbd2-input[b-aqgxc1mgcc]::placeholder {
            color: transparent;
        }

        .rpbd2 .floating-input > .rpbd2-input:hover:not(:disabled):not([readonly])[b-aqgxc1mgcc] {
            border-color: var(--rpbd2-secondary);
        }

        .rpbd2 .floating-input > .rpbd2-input:focus[b-aqgxc1mgcc] {
            outline: none;
            border-color: var(--rpbd2-primary);
            box-shadow: 0 0 0 3px var(--rpbd2-ring);
            background: var(--rpbd2-surface);
        }

        .rpbd2 .floating-input > .rpbd2-input.is-invalid[b-aqgxc1mgcc] {
            border-color: var(--rpbd2-destructive);
            background: #FFFAFA;
        }

            .rpbd2 .floating-input > .rpbd2-input.is-invalid:focus[b-aqgxc1mgcc] {
                box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.15);
            }

        .rpbd2 .floating-input > .rpbd2-input:disabled[b-aqgxc1mgcc],
        .rpbd2 .floating-input > .rpbd2-input.rpbd2-input-readonly[b-aqgxc1mgcc],
        .rpbd2 .floating-input > .rpbd2-input[readonly][b-aqgxc1mgcc] {
            background: var(--rpbd2-surface-soft);
            color: var(--rpbd2-ink-soft);
            cursor: default;
        }

        .rpbd2 .floating-input > .rpbd2-input:disabled[b-aqgxc1mgcc] {
            opacity: 0.7;
            cursor: not-allowed;
        }

    .rpbd2 .floating-input > .rpbd2-textarea[b-aqgxc1mgcc] {
        resize: vertical;
        min-height: 72px;
        font-family: inherit;
    }

    /* Floating label */
    .rpbd2 .floating-input > .rpbd2-flabel[b-aqgxc1mgcc] {
        position: absolute;
        left: 12px;
        top: 50%;
        transform: translateY(-50%);
        font-size: 14px;
        font-weight: 500;
        color: var(--rpbd2-ink-faint);
        pointer-events: none;
        background: transparent;
        padding: 0 4px;
        border-radius: 4px;
        max-width: calc(100% - 24px);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        transition: top var(--rpbd2-dur) var(--rpbd2-ease), transform var(--rpbd2-dur) var(--rpbd2-ease), font-size var(--rpbd2-dur) var(--rpbd2-ease), color var(--rpbd2-dur) var(--rpbd2-ease), background var(--rpbd2-dur) var(--rpbd2-ease);
    }

        .rpbd2 .floating-input > .rpbd2-flabel i[b-aqgxc1mgcc] {
            color: var(--rpbd2-ink-faint);
            font-size: 11px;
            margin-right: 4px;
        }

        .rpbd2 .floating-input > .rpbd2-flabel .rpbd2-req[b-aqgxc1mgcc] {
            color: var(--rpbd2-destructive);
            margin-left: 2px;
            font-size: larger;
        }

.rpbd2 .gender-info-icon[b-aqgxc1mgcc] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    color: var(--rpbd2-ink-faint);
    cursor: help;
    outline: none;
    vertical-align: middle;
    margin-left: 4px;
    position: relative;
    pointer-events: auto;
}

    .rpbd2 .gender-info-icon i[b-aqgxc1mgcc] {
        font-size: 0.85rem;
        line-height: 1;
        pointer-events: none;
    }

    .rpbd2 .gender-info-icon:hover[b-aqgxc1mgcc],
    .rpbd2 .gender-info-icon:focus[b-aqgxc1mgcc] {
        color: var(--rpbd2-primary);
    }

.rpbd2 .gender-info-tooltip[b-aqgxc1mgcc] {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    bottom: calc(100% + 8px);
    left: 0;
    background: #1e293b;
    color: #fff;
    font-size: 0.75rem;
    font-weight: 400;
    line-height: 1.4;
    padding: 8px 10px;
    border-radius: 6px;
    width: 260px;
    max-width: calc(100vw - 24px);
    z-index: 9999;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
    transition: opacity 0.15s ease;
    pointer-events: none;
    white-space: normal;
    text-align: left;
}

    .rpbd2 .gender-info-tooltip[b-aqgxc1mgcc]::after {
        content: "";
        position: absolute;
        top: 100%;
        left: 8px;
        border: 5px solid transparent;
        border-top-color: #1e293b;
    }

.rpbd2 .gender-info-icon:hover .gender-info-tooltip[b-aqgxc1mgcc],
.rpbd2 .gender-info-icon:focus .gender-info-tooltip[b-aqgxc1mgcc],
.rpbd2 .gender-info-icon:focus-within .gender-info-tooltip[b-aqgxc1mgcc] {
    visibility: visible;
    opacity: 1;
}

.rpbd2 .floating-input > .rpbd2-flabel .rpbd2-optional[b-aqgxc1mgcc] {
    color: var(--rpbd2-ink-faint);
    font-weight: 500;
    font-size: 11px;
    margin-left: 4px;
}

/* Floated state: focused, has-value via :placeholder-shown, or class-based */
.rpbd2 .floating-input > .rpbd2-input:focus ~ .rpbd2-flabel[b-aqgxc1mgcc],
.rpbd2 .floating-input > .rpbd2-input:not(:placeholder-shown) ~ .rpbd2-flabel[b-aqgxc1mgcc],
.rpbd2 .floating-input.has-value > .rpbd2-flabel[b-aqgxc1mgcc] {
    top: 0;
    transform: translateY(-50%);
    font-size: 11px;
    font-weight: 700;
    color: var(--rpbd2-primary);
    background: var(--rpbd2-surface);
    padding: 0 6px;
}

.rpbd2 .floating-input > .rpbd2-input.is-invalid:focus ~ .rpbd2-flabel[b-aqgxc1mgcc],
.rpbd2 .floating-input > .rpbd2-input.is-invalid:not(:placeholder-shown) ~ .rpbd2-flabel[b-aqgxc1mgcc],
.rpbd2 .floating-input.has-value > .rpbd2-input.is-invalid ~ .rpbd2-flabel[b-aqgxc1mgcc] {
    color: var(--rpbd2-destructive);
}

/* Selects: custom chevron */
.rpbd2 .floating-input > .rpbd2-select[b-aqgxc1mgcc] {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%236B7280'><path d='M4 6l4 4 4-4'/></svg>");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 14px;
    padding-right: 36px;
    cursor: pointer;
}

/* Date inputs always show a placeholder via native widget, so float the label always */
.rpbd2 .floating-input > input[type="date"].rpbd2-input ~ .rpbd2-flabel[b-aqgxc1mgcc] {
    top: 0;
    transform: translateY(-50%);
    font-size: 11px;
    font-weight: 700;
    color: var(--rpbd2-primary);
    background: var(--rpbd2-surface);
    padding: 0 6px;
}

.rpbd2 .floating-input > input[type="date"].rpbd2-input.is-invalid ~ .rpbd2-flabel[b-aqgxc1mgcc] {
    color: var(--rpbd2-destructive);
}

/* Phone input variant (with +91 prefix) */
.rpbd2 .floating-input.phone-input[b-aqgxc1mgcc] {
    display: flex;
    align-items: stretch;
    border: 1.5px solid var(--rpbd2-line);
    border-radius: var(--rpbd2-r-md);
    /*overflow: hidden;*/
    background: var(--rpbd2-surface);
    transition: border-color var(--rpbd2-dur) var(--rpbd2-ease), box-shadow var(--rpbd2-dur) var(--rpbd2-ease);
}

    .rpbd2 .floating-input.phone-input:focus-within[b-aqgxc1mgcc] {
        border-color: var(--rpbd2-primary);
        box-shadow: 0 0 0 3px var(--rpbd2-ring);
    }

    .rpbd2 .floating-input.phone-input:has(.rpbd2-input.is-invalid)[b-aqgxc1mgcc] {
        border-color: var(--rpbd2-destructive);
    }

    .rpbd2 .floating-input.phone-input > .phone-prefix[b-aqgxc1mgcc] {
        background: var(--rpbd2-surface-soft);
        color: var(--rpbd2-ink-soft);
        padding: 0 14px;
        display: inline-flex;
        align-items: center;
        font-weight: 600;
        font-size: 15px;
        border-right: 1px solid var(--rpbd2-line);
        flex-shrink: 0;
        border-radius: var(--rpbd2-r-md);
    }

    .rpbd2 .floating-input.phone-input > .rpbd2-input[b-aqgxc1mgcc] {
        border: none;
        /*border-radius: 0;*/
        flex: 1;
        min-width: 0;
    }

        .rpbd2 .floating-input.phone-input > .rpbd2-input:focus[b-aqgxc1mgcc] {
            box-shadow: none;
        }

    .rpbd2 .floating-input.phone-input > .rpbd2-flabel[b-aqgxc1mgcc] {
        left: 72px;
    }

    .rpbd2 .floating-input.phone-input > .rpbd2-input:focus ~ .rpbd2-flabel[b-aqgxc1mgcc],
    .rpbd2 .floating-input.phone-input > .rpbd2-input:not(:placeholder-shown) ~ .rpbd2-flabel[b-aqgxc1mgcc],
    .rpbd2 .floating-input.phone-input.has-value > .rpbd2-flabel[b-aqgxc1mgcc] {
        left: 12px;
        background: var(--rpbd2-surface);
    }

/* Hint text below floating input */
.rpbd2 .rpbd2-hint[b-aqgxc1mgcc] {
    font-size: 12px;
    color: var(--rpbd2-ink-faint);
    line-height: 1.4;
}

/* Field error */
.rpbd2 .rpbd2-field-error[b-aqgxc1mgcc] {
    display: inline-flex;
    align-items: flex-start;
    gap: 6px;
    color: var(--rpbd2-destructive);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
}

    .rpbd2 .rpbd2-field-error i[b-aqgxc1mgcc] {
        margin-top: 2px;
        font-size: 12px;
    }

.rpbd2 .rpbd2-field-error-block[b-aqgxc1mgcc] {
    display: flex;
    background: #FEF2F2;
    border: 1px solid #FECACA;
    padding: 10px 12px;
    border-radius: var(--rpbd2-r-md);
    margin: var(--rpbd2-s3) 0;
}

/* Mirror inputs kept for JS-interop ID continuity — hidden visually */
.rpbd2 .rpbd2-input-mirror[b-aqgxc1mgcc] {
    position: absolute !important;
    left: -9999px !important;
    width: 1px !important;
    height: 1px !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* ======================== CELL SWITCH ======================== */
/* Switch that fits inside a single grid cell, looks like a form field */
.rpbd2-cell-switch[b-aqgxc1mgcc] {
    appearance: none;
    background: var(--rpbd2-surface);
    border: 1.5px solid var(--rpbd2-line);
    border-radius: var(--rpbd2-r-md);
    padding: 0 14px;
    width: 100%;
    min-height: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--rpbd2-s3);
    cursor: pointer;
    color: var(--rpbd2-ink);
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    text-align: left;
    transition: border-color var(--rpbd2-dur) var(--rpbd2-ease), background var(--rpbd2-dur) var(--rpbd2-ease), box-shadow var(--rpbd2-dur) var(--rpbd2-ease);
}

    .rpbd2-cell-switch:hover[b-aqgxc1mgcc] {
        border-color: var(--rpbd2-secondary);
    }

    .rpbd2-cell-switch:focus-visible[b-aqgxc1mgcc] {
        outline: none;
        border-color: var(--rpbd2-primary);
        box-shadow: 0 0 0 3px var(--rpbd2-ring);
    }

    .rpbd2-cell-switch.is-on[b-aqgxc1mgcc] {
        background: linear-gradient(135deg, #F0FDF4, #DCFCE7);
        border-color: var(--rpbd2-accent);
    }

.rpbd2-cell-switch-label[b-aqgxc1mgcc] {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

    .rpbd2-cell-switch-label i[b-aqgxc1mgcc] {
        color: var(--rpbd2-ink-faint);
        font-size: 14px;
    }

.rpbd2-cell-switch.is-on .rpbd2-cell-switch-label i[b-aqgxc1mgcc] {
    color: var(--rpbd2-accent);
}

/* Switch track + thumb (shared, used in cell-switch and donor toggle) */
.rpbd2-switch-track[b-aqgxc1mgcc] {
    width: 40px;
    height: 22px;
    background: #D1D5DB;
    border-radius: 999px;
    position: relative;
    flex-shrink: 0;
    transition: background var(--rpbd2-dur) var(--rpbd2-ease);
}

.rpbd2-switch-thumb[b-aqgxc1mgcc] {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 18px;
    height: 18px;
    background: #fff;
    border-radius: 50%;
    box-shadow: var(--rpbd2-sh-sm);
    transition: transform var(--rpbd2-dur) var(--rpbd2-ease);
}

.rpbd2-cell-switch.is-on .rpbd2-switch-track[b-aqgxc1mgcc] {
    background: var(--rpbd2-accent);
}

.rpbd2-cell-switch.is-on .rpbd2-switch-thumb[b-aqgxc1mgcc] {
    transform: translateX(18px);
}

/* ======================== CHECKBOX ======================== */
.rpbd2-check[b-aqgxc1mgcc] {
    display: inline-flex;
    align-items: center;
    gap: var(--rpbd2-s2);
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    color: var(--rpbd2-ink);
    margin-bottom: var(--rpbd2-s3);
    user-select: none;
}

    .rpbd2-check input[b-aqgxc1mgcc] {
        position: absolute;
        opacity: 0;
        pointer-events: none;
    }

.rpbd2-check-box[b-aqgxc1mgcc] {
    width: 22px;
    height: 22px;
    border: 2px solid var(--rpbd2-line);
    border-radius: 6px;
    background: var(--rpbd2-surface);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all var(--rpbd2-dur) var(--rpbd2-ease);
    color: transparent;
    font-size: 12px;
    flex-shrink: 0;
}

.rpbd2-check input:checked + .rpbd2-check-box[b-aqgxc1mgcc] {
    background: var(--rpbd2-accent);
    border-color: var(--rpbd2-accent);
    color: #fff;
}

.rpbd2-check input:focus-visible + .rpbd2-check-box[b-aqgxc1mgcc] {
    box-shadow: 0 0 0 3px var(--rpbd2-ring);
}

/* ======================== BLOOD TYPE ======================== */
.rpbd2-bt-question[b-aqgxc1mgcc] {
    background: var(--rpbd2-surface-soft);
    border: 1px solid var(--rpbd2-line);
    border-radius: var(--rpbd2-r-md);
    padding: var(--rpbd2-s4);
    margin-bottom: var(--rpbd2-s4);
    max-width: 560px;
}

.rpbd2-bt-question-label[b-aqgxc1mgcc] {
    font-size: 15px;
    font-weight: 700;
    margin-bottom: var(--rpbd2-s3);
    color: var(--rpbd2-ink);
}

.rpbd2-bt-options[b-aqgxc1mgcc] {
    display: grid;
    grid-template-columns: repeat(2, minmax(160px, 220px));
    gap: var(--rpbd2-s2);
}

.rpbd2-bt-option[b-aqgxc1mgcc] {
    appearance: none;
    background: var(--rpbd2-surface);
    border: 2px solid var(--rpbd2-line);
    border-radius: var(--rpbd2-r-md);
    padding: 10px 14px;
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    color: var(--rpbd2-ink);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--rpbd2-s2);
    transition: all var(--rpbd2-dur) var(--rpbd2-ease);
}

    .rpbd2-bt-option:hover[b-aqgxc1mgcc] {
        border-color: var(--rpbd2-secondary);
    }

    .rpbd2-bt-option:focus-visible[b-aqgxc1mgcc] {
        outline: none;
        box-shadow: 0 0 0 3px var(--rpbd2-ring);
    }

    .rpbd2-bt-option.is-selected[b-aqgxc1mgcc] {
        background: linear-gradient(135deg, var(--rpbd2-blood-1), var(--rpbd2-blood-2));
        border-color: var(--rpbd2-blood-1);
        color: #fff;
    }

        .rpbd2-bt-option.is-selected i[b-aqgxc1mgcc] {
            color: #fff;
        }

.rpbd2-bt-panel[b-aqgxc1mgcc] {
    padding: var(--rpbd2-s4);
    background: var(--rpbd2-bg);
    border: 1px solid var(--rpbd2-border);
    border-radius: var(--rpbd2-r-md);
}

.rpbd2-bt-hint[b-aqgxc1mgcc] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--rpbd2-ink-soft);
    font-size: 14px;
    font-style: italic;
}

.rpbd2-bt-cat[b-aqgxc1mgcc] {
    margin-bottom: var(--rpbd2-s4);
}

    .rpbd2-bt-cat:last-child[b-aqgxc1mgcc] {
        margin-bottom: 0;
    }

.rpbd2-bt-cat-label[b-aqgxc1mgcc] {
    font-size: 13px;
    font-weight: 700;
    color: var(--rpbd2-fg);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: var(--rpbd2-s2);
}

.rpbd2-bt-chips[b-aqgxc1mgcc] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--rpbd2-s2);
}

.rpbd2-bt-chip[b-aqgxc1mgcc] {
    appearance: none;
    background: var(--rpbd2-surface);
    border: 1.5px solid var(--rpbd2-border);
    color: var(--rpbd2-fg);
    padding: 8px 14px;
    border-radius: 999px;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--rpbd2-dur) var(--rpbd2-ease);
}

    .rpbd2-bt-chip:hover:not(:disabled)[b-aqgxc1mgcc] {
        border-color: var(--rpbd2-primary);
    }

    .rpbd2-bt-chip:focus-visible[b-aqgxc1mgcc] {
        outline: none;
        box-shadow: 0 0 0 3px var(--rpbd2-ring);
    }

    .rpbd2-bt-chip.is-selected[b-aqgxc1mgcc] {
        background: var(--rpbd2-primary);
        color: #fff;
        border-color: var(--rpbd2-primary);
    }

    .rpbd2-bt-chip.is-disabled[b-aqgxc1mgcc],
    .rpbd2-bt-chip:disabled[b-aqgxc1mgcc] {
        opacity: 0.45;
        cursor: not-allowed;
    }

.rpbd2-bt-summary[b-aqgxc1mgcc] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--rpbd2-s2);
    margin-top: var(--rpbd2-s4);
    padding-top: var(--rpbd2-s3);
    border-top: 1px dashed var(--rpbd2-border);
    flex-wrap: wrap;
}

.rpbd2-bt-summary-text[b-aqgxc1mgcc] {
    font-size: 13px;
    color: var(--rpbd2-ink-soft);
}

.rpbd2-bt-unknown[b-aqgxc1mgcc] {
    background: linear-gradient(135deg, #FFFBEB 0%, #FEF3C7 100%);
    border: 1px solid #FDE68A;
    border-radius: var(--rpbd2-r-md);
    padding: var(--rpbd2-s4);
    max-width: 720px;
}

.rpbd2-bt-unknown-head[b-aqgxc1mgcc] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 700;
    color: #92400E;
    margin-bottom: 6px;
}

.rpbd2-bt-unknown-body[b-aqgxc1mgcc] {
    margin: 0;
    font-size: 14px;
    color: #78350F;
    line-height: 1.5;
}

/* ======================== DONOR CARD ======================== */
.rpbd2-donor-card[b-aqgxc1mgcc] {
    background: linear-gradient(135deg, #FEF2F2 0%, #FFE4E6 100%);
    border: 2px solid #FECACA;
    border-radius: var(--rpbd2-r-lg);
    overflow: hidden;
    transition: all var(--rpbd2-dur) var(--rpbd2-ease);
}

    .rpbd2-donor-card.is-on[b-aqgxc1mgcc] {
        background: linear-gradient(135deg, #F0FDF4 0%, #DCFCE7 100%);
        border-color: #86EFAC;
    }

.rpbd2-donor-card-toggle[b-aqgxc1mgcc] {
    appearance: none;
    background: transparent;
    border: none;
    width: 100%;
    padding: var(--rpbd2-s4);
    display: flex;
    align-items: center;
    gap: var(--rpbd2-s4);
    cursor: pointer;
    text-align: left;
    font: inherit;
    color: inherit;
}

    .rpbd2-donor-card-toggle:focus-visible[b-aqgxc1mgcc] {
        outline: none;
        box-shadow: inset 0 0 0 3px var(--rpbd2-ring);
    }

.rpbd2-donor-icon[b-aqgxc1mgcc] {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: rgba(255,255,255,0.7);
    color: var(--rpbd2-blood-1);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    flex-shrink: 0;
    box-shadow: var(--rpbd2-sh-sm);
}

.rpbd2-donor-card.is-on .rpbd2-donor-icon[b-aqgxc1mgcc] {
    color: var(--rpbd2-accent);
}

.rpbd2-donor-text[b-aqgxc1mgcc] {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.rpbd2-donor-title[b-aqgxc1mgcc] {
    font-size: 16px;
    font-weight: 700;
    color: var(--rpbd2-ink);
    display: inline-flex;
    align-items: center;
    gap: var(--rpbd2-s2);
    flex-wrap: wrap;
}

.rpbd2-donor-badge[b-aqgxc1mgcc] {
    background: var(--rpbd2-blood-1);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 3px 10px;
    border-radius: 999px;
}

.rpbd2-donor-card.is-on .rpbd2-donor-badge[b-aqgxc1mgcc] {
    background: var(--rpbd2-accent);
}

.rpbd2-donor-sub[b-aqgxc1mgcc] {
    font-size: 13px;
    color: var(--rpbd2-ink-soft);
    line-height: 1.45;
    margin-top: 4px;
}

.rpbd2-donor-toggle .rpbd2-switch-track[b-aqgxc1mgcc] {
    background: #D1D5DB;
}

.rpbd2-donor-card.is-on .rpbd2-donor-toggle .rpbd2-switch-track[b-aqgxc1mgcc] {
    background: var(--rpbd2-accent);
}

.rpbd2-donor-card.is-on .rpbd2-donor-toggle .rpbd2-switch-thumb[b-aqgxc1mgcc] {
    transform: translateX(18px);
}

.rpbd2-donor-panel[b-aqgxc1mgcc] {
    background: var(--rpbd2-surface);
    padding: var(--rpbd2-s5);
    border-top: 1px solid rgba(0,0,0,0.06);
}

.rpbd2-donor-footer[b-aqgxc1mgcc] {
    display: flex;
    gap: var(--rpbd2-s2);
    flex-wrap: wrap;
    margin-top: var(--rpbd2-s4);
}

.rpbd2-pill[b-aqgxc1mgcc] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: var(--rpbd2-muted);
    color: var(--rpbd2-fg);
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
}

    .rpbd2-pill i[b-aqgxc1mgcc] {
        font-size: 11px;
        color: var(--rpbd2-primary);
    }

/* ======================== INFO TIP ======================== */
.rpbd2-info-tip[b-aqgxc1mgcc] {
    position: relative;
    display: inline-flex;
    align-items: center;
    color: var(--rpbd2-primary);
    cursor: help;
    font-size: 13px;
}

.rpbd2-info-tip-text[b-aqgxc1mgcc] {
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    background: #111827;
    color: #fff;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.4;
    padding: 8px 10px;
    border-radius: 6px;
    width: 240px;
    z-index: 20;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 150ms var(--rpbd2-ease);
}

.rpbd2-info-tip:hover .rpbd2-info-tip-text[b-aqgxc1mgcc],
.rpbd2-info-tip:focus .rpbd2-info-tip-text[b-aqgxc1mgcc] {
    opacity: 1;
    visibility: visible;
}

/* ======================== BANNERS ======================== */
.rpbd2-banner[b-aqgxc1mgcc] {
    display: flex;
    align-items: flex-start;
    gap: var(--rpbd2-s3);
    padding: 12px 16px;
    border-radius: var(--rpbd2-r-md);
    font-size: 14px;
    line-height: 1.45;
    margin-top: var(--rpbd2-s5);
}

    .rpbd2-banner i[b-aqgxc1mgcc] {
        flex-shrink: 0;
        margin-top: 2px;
    }

.rpbd2-banner-warning[b-aqgxc1mgcc] {
    background: #FFFBEB;
    color: #78350F;
    border: 1px solid #FDE68A;
}

.rpbd2-banner-error[b-aqgxc1mgcc] {
    background: #FEF2F2;
    color: #7F1D1D;
    border: 1px solid #FECACA;
}

/* ======================== BUTTONS ======================== */
.rpbd2-btn[b-aqgxc1mgcc] {
    appearance: none;
    border: none;
    padding: 12px 22px;
    border-radius: var(--rpbd2-r-md);
    font: inherit;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--rpbd2-s2);
    transition: background var(--rpbd2-dur) var(--rpbd2-ease), color var(--rpbd2-dur) var(--rpbd2-ease), box-shadow var(--rpbd2-dur) var(--rpbd2-ease), transform var(--rpbd2-dur) var(--rpbd2-ease);
    text-decoration: none;
    line-height: 1.2;
}

    .rpbd2-btn:focus-visible[b-aqgxc1mgcc] {
        outline: none;
        box-shadow: 0 0 0 3px var(--rpbd2-ring);
    }

    .rpbd2-btn:disabled[b-aqgxc1mgcc] {
        opacity: 0.55;
        cursor: not-allowed;
    }

    .rpbd2-btn:not(:disabled):hover[b-aqgxc1mgcc] {
        transform: translateY(-1px);
        box-shadow: var(--rpbd2-sh-md);
    }

    .rpbd2-btn:not(:disabled):active[b-aqgxc1mgcc] {
        transform: translateY(0);
    }

.rpbd2-btn-primary[b-aqgxc1mgcc] {
    background: var(--rpbd2-primary);
    color: var(--rpbd2-primary-ink);
}

    .rpbd2-btn-primary:not(:disabled):hover[b-aqgxc1mgcc] {
        background: #6D28D9;
    }

.rpbd2-btn-accent[b-aqgxc1mgcc] {
    background: var(--rpbd2-accent);
    color: var(--rpbd2-accent-ink);
}

    .rpbd2-btn-accent:not(:disabled):hover[b-aqgxc1mgcc] {
        background: #15803D;
    }

.rpbd2-btn-secondary[b-aqgxc1mgcc] {
    background: #e9e9e9;
    color: var(--rpbd2-ink);
    border: 1.5px solid #5d5e61;
}

    .rpbd2-btn-secondary:not(:disabled):hover[b-aqgxc1mgcc] {
        background: var(--rpbd2-surface-soft);
        border-color: var(--rpbd2-primary);
        color: var(--rpbd2-primary);
    }

.rpbd2-btn-ghost[b-aqgxc1mgcc] {
    background: transparent;
    color: var(--rpbd2-ink-soft);
}

    .rpbd2-btn-ghost:not(:disabled):hover[b-aqgxc1mgcc] {
        background: var(--rpbd2-muted);
        color: var(--rpbd2-ink);
    }

.rpbd2-btn-block[b-aqgxc1mgcc] {
    width: 100%;
}

.rpbd2-link-btn[b-aqgxc1mgcc] {
    appearance: none;
    background: transparent;
    border: none;
    padding: 0;
    color: var(--rpbd2-primary);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 3px;
}

    .rpbd2-link-btn:hover:not(:disabled)[b-aqgxc1mgcc] {
        color: #6D28D9;
    }

    .rpbd2-link-btn:focus-visible[b-aqgxc1mgcc] {
        outline: none;
        box-shadow: 0 0 0 3px var(--rpbd2-ring);
        border-radius: 4px;
    }

    .rpbd2-link-btn:disabled[b-aqgxc1mgcc] {
        opacity: 0.55;
        cursor: not-allowed;
    }

/* Spinner */
.rpbd2-spinner[b-aqgxc1mgcc] {
    width: 16px;
    height: 16px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    display: inline-block;
    animation: rpbd2-spin-b-aqgxc1mgcc 0.6s linear infinite;
}

@keyframes rpbd2-spin-b-aqgxc1mgcc {
    to {
        transform: rotate(360deg);
    }
}

.rpbd2-nav-row[b-aqgxc1mgcc] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--rpbd2-s3);
    margin-top: var(--rpbd2-s5);
   /* padding-top: var(--rpbd2-s5);
    border-top: 1px solid var(--rpbd2-line);*/
}

/* ======================== STICKY MOBILE CTA ======================== */
.rpbd2-sticky-cta[b-aqgxc1mgcc] {
    display: none;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 50;
    background: rgba(255,255,255,0.96);
    backdrop-filter: blur(8px);
    padding: 12px var(--rpbd2-s4) calc(12px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--rpbd2-line);
    box-shadow: 0 -8px 20px rgba(17,24,39,0.08);
    gap: var(--rpbd2-s2);
}

    .rpbd2-sticky-cta .rpbd2-btn[b-aqgxc1mgcc] {
        flex: 1;
        padding: 12px 16px;
        font-size: 14px;
    }

/* ======================== THANK YOU ======================== */
.rpbd2-thanks[b-aqgxc1mgcc] {
    max-width: 720px;
    margin: var(--rpbd2-s5) auto;
    padding: 0 var(--rpbd2-s5);
}

.rpbd2-thanks-card[b-aqgxc1mgcc] {
    background: var(--rpbd2-surface);
    border-radius: var(--rpbd2-r-xl);
    box-shadow: var(--rpbd2-sh-lg);
    padding: var(--rpbd2-s7) var(--rpbd2-s6);
    text-align: center;
}

.rpbd2-thanks-icon[b-aqgxc1mgcc] {
    width: 84px;
    height: 84px;
    border-radius: 50%;
    background: linear-gradient(135deg, #DCFCE7, #BBF7D0);
    color: var(--rpbd2-accent);
    font-size: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--rpbd2-s4);
}

.rpbd2-thanks-title[b-aqgxc1mgcc] {
    font-size: 30px;
    font-weight: 700;
    margin: 0 0 var(--rpbd2-s2);
    color: var(--rpbd2-ink);
}

.rpbd2-thanks-sub[b-aqgxc1mgcc] {
    font-size: 16px;
    color: var(--rpbd2-ink-soft);
    margin: 0 0 var(--rpbd2-s5);
}

.rpbd2-thanks-meta[b-aqgxc1mgcc] {
    display: flex;
    flex-direction: column;
    gap: var(--rpbd2-s3);
    background: var(--rpbd2-bg);
    border-radius: var(--rpbd2-r-md);
    padding: var(--rpbd2-s4);
    margin-bottom: var(--rpbd2-s5);
    text-align: left;
}

.rpbd2-thanks-meta-item[b-aqgxc1mgcc] {
    display: flex;
    align-items: center;
    gap: var(--rpbd2-s3);
    color: var(--rpbd2-ink);
}

    .rpbd2-thanks-meta-item > i[b-aqgxc1mgcc] {
        width: 36px;
        height: 36px;
        background: var(--rpbd2-surface);
        border-radius: 8px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        color: var(--rpbd2-primary);
        flex-shrink: 0;
    }

.rpbd2-thanks-meta-label[b-aqgxc1mgcc] {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--rpbd2-ink-faint);
    font-weight: 600;
}

.rpbd2-thanks-meta-value[b-aqgxc1mgcc] {
    font-size: 15px;
    font-weight: 700;
    color: var(--rpbd2-ink);
}

.rpbd2-next-steps[b-aqgxc1mgcc] {
    text-align: left;
    background: var(--rpbd2-surface-soft);
    border-radius: var(--rpbd2-r-md);
    padding: var(--rpbd2-s4) var(--rpbd2-s5);
    margin-bottom: var(--rpbd2-s5);
}

.rpbd2-next-steps-title[b-aqgxc1mgcc] {
    font-size: 16px;
    font-weight: 700;
    margin: 0 0 var(--rpbd2-s3);
    color: var(--rpbd2-ink);
}

.rpbd2-next-steps ul[b-aqgxc1mgcc] {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--rpbd2-s2);
}

.rpbd2-next-steps li[b-aqgxc1mgcc] {
    display: flex;
    align-items: flex-start;
    gap: var(--rpbd2-s2);
    color: var(--rpbd2-ink-soft);
    font-size: 14px;
    line-height: 1.5;
}

    .rpbd2-next-steps li i[b-aqgxc1mgcc] {
        color: var(--rpbd2-accent);
        margin-top: 4px;
        flex-shrink: 0;
    }

.rpbd2-notify-prompt[b-aqgxc1mgcc] {
    background: linear-gradient(135deg, #FFFBEB, #FEF3C7);
    border: 2px solid #FDE68A;
    border-radius: var(--rpbd2-r-lg);
    padding: var(--rpbd2-s5);
    margin-bottom: var(--rpbd2-s5);
    text-align: center;
}

.rpbd2-notify-icon[b-aqgxc1mgcc] {
    font-size: 36px;
    margin-bottom: var(--rpbd2-s2);
    color: #B45309;
}

.rpbd2-notify-title[b-aqgxc1mgcc] {
    font-size: 18px;
    font-weight: 700;
    color: #92400E;
    margin: 0 0 var(--rpbd2-s2);
}

.rpbd2-notify-body[b-aqgxc1mgcc] {
    color: #78350F;
    font-size: 14px;
    line-height: 1.5;
    margin: 0 0 var(--rpbd2-s4);
}

.rpbd2-notify-actions[b-aqgxc1mgcc] {
    display: flex;
    gap: var(--rpbd2-s2);
    justify-content: center;
    flex-wrap: wrap;
}

.rpbd2-notify-confirmed[b-aqgxc1mgcc] {
    background: linear-gradient(135deg, #F0FDF4, #DCFCE7);
    color: #166534;
    border: 1px solid #86EFAC;
    border-radius: var(--rpbd2-r-md);
    padding: var(--rpbd2-s3) var(--rpbd2-s4);
    text-align: center;
    margin-bottom: var(--rpbd2-s4);
    font-weight: 600;
}

    .rpbd2-notify-confirmed i[b-aqgxc1mgcc] {
        color: var(--rpbd2-accent);
        margin-right: 6px;
    }

/* ======================== OTP VERIFICATION ======================== */
.rpbd2-otp-input[b-aqgxc1mgcc] {
    width: 100%;
    padding: 16px;
    text-align: center;
    font-size: 28px;
    letter-spacing: 0.5em;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    border: 2px solid var(--rpbd2-line);
    border-radius: var(--rpbd2-r-md);
    background: var(--rpbd2-surface-soft);
    color: var(--rpbd2-ink);
    transition: border-color var(--rpbd2-dur) var(--rpbd2-ease), box-shadow var(--rpbd2-dur) var(--rpbd2-ease);
    box-sizing: border-box;
}

    .rpbd2-otp-input[b-aqgxc1mgcc]::placeholder {
        color: var(--rpbd2-ink-faint);
        letter-spacing: 0.25em;
    }

    .rpbd2-otp-input:focus[b-aqgxc1mgcc] {
        outline: none;
        border-color: var(--rpbd2-primary);
        box-shadow: 0 0 0 3px var(--rpbd2-ring);
        background: var(--rpbd2-surface);
    }

    .rpbd2-otp-input:disabled[b-aqgxc1mgcc] {
        opacity: 0.6;
        cursor: not-allowed;
    }

.rpbd2-otp-resend[b-aqgxc1mgcc] {
    text-align: center;
    font-size: 14px;
    color: var(--rpbd2-ink-soft);
}

.rpbd2-otp-resend-cooldown[b-aqgxc1mgcc] {
    color: var(--rpbd2-ink-faint);
    font-weight: 600;
    margin-left: 6px;
}

/* ======================== UTILITY ======================== */
.rpbd2-sr-only[b-aqgxc1mgcc] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}

/* ======================== RESPONSIVE ======================== */
@media (max-width: 1024px) {
    .rpbd2-main[b-aqgxc1mgcc] {
        grid-template-columns: 280px 1fr;
        gap: var(--rpbd2-s4);
    }

    .rpbd2-content[b-aqgxc1mgcc] {
        padding: var(--rpbd2-s5);
    }

    /* 3-col -> 2-col at narrow desktop */
    .rpbd2-grid-3[b-aqgxc1mgcc] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 768px) {
    /*.rpbd2 { padding-bottom: 100px; }*/
    .rpbd2-hero[b-aqgxc1mgcc] {
        padding: var(--rpbd2-s5) var(--rpbd2-s4);
    }

    .rpbd2-hero-title[b-aqgxc1mgcc] {
        font-size: 26px;
    }

    .rpbd2-hero-sub[b-aqgxc1mgcc] {
        font-size: 15px;
        margin-bottom: var(--rpbd2-s4);
    }

    .rpbd2-progress-wrap[b-aqgxc1mgcc] {
        margin: calc(var(--rpbd2-s4) * -1) var(--rpbd2-s3) var(--rpbd2-s4);
        padding: var(--rpbd2-s3) var(--rpbd2-s4);
    }

    .rpbd2-progress-label[b-aqgxc1mgcc] {
        font-size: 14px;
    }

    .rpbd2-form[b-aqgxc1mgcc] {
        padding: 0 var(--rpbd2-s3);
    }

    .rpbd2-main[b-aqgxc1mgcc] {
        grid-template-columns: 1fr;
    }

    .rpbd2-sidebar[b-aqgxc1mgcc] {
        position: static;
        flex-direction: row;
        overflow-x: auto;
        gap: var(--rpbd2-s2);
        padding: var(--rpbd2-s3);
        scroll-snap-type: x mandatory;
    }

    .rpbd2-tab[b-aqgxc1mgcc] {
        flex: 0 0 auto;
        min-width: 220px;
        scroll-snap-align: start;
    }

    .rpbd2-tab-add[b-aqgxc1mgcc] {
        flex: 0 0 auto;
        min-width: 180px;
    }

    .rpbd2-content[b-aqgxc1mgcc] {
        padding: var(--rpbd2-s4);
    }

    .rpbd2-grid-2[b-aqgxc1mgcc],
    .rpbd2-grid-3[b-aqgxc1mgcc] {
        grid-template-columns: 1fr;
        gap: var(--rpbd2-s3);
    }

    .rpbd2-bt-options[b-aqgxc1mgcc] {
        grid-template-columns: 1fr 1fr;
    }

    .rpbd2-group-title[b-aqgxc1mgcc] {
        font-size: 18px;
    }

    .rpbd2-nav-row[b-aqgxc1mgcc] {
        flex-direction: column-reverse;
        gap: var(--rpbd2-s2);
    }

        .rpbd2-nav-row .rpbd2-btn[b-aqgxc1mgcc] {
            width: 100%;
        }

    .rpbd2-sticky-cta[b-aqgxc1mgcc] {
        display: flex;
    }

    .rpbd2-thanks-card[b-aqgxc1mgcc] {
        padding: var(--rpbd2-s5) var(--rpbd2-s4);
    }

    .rpbd2-thanks-title[b-aqgxc1mgcc] {
        font-size: 24px;
    }
}

@media (max-width: 480px) {
    .rpbd2-hero-title[b-aqgxc1mgcc] {
        font-size: 22px;
    }

    .rpbd2-trust-chip[b-aqgxc1mgcc] {
        font-size: 12px;
        padding: 5px 10px;
    }

    .rpbd2-otp-input[b-aqgxc1mgcc] {
        font-size: 22px;
        letter-spacing: 0.35em;
    }
}

/* ======================== REDUCED MOTION ======================== */
@media (prefers-reduced-motion: reduce) {
    .rpbd2 *[b-aqgxc1mgcc],
    .rpbd2 *[b-aqgxc1mgcc]::before,
    .rpbd2 *[b-aqgxc1mgcc]::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }

    .rpbd2-btn:not(:disabled):hover[b-aqgxc1mgcc] {
        transform: none;
    }
}

/* ======================== CONSENT SECTION ======================== */
.rpbd2 .rpbd2-consent-section[b-aqgxc1mgcc] {
    background: rgba(124, 58, 237, 0.04);
    border: 1px solid var(--rpbd2-border);
    border-radius: var(--rpbd2-r-md);
    padding: var(--rpbd2-s4);
    margin-top: var(--rpbd2-s5);
}

.rpbd2 .rpbd2-consent-header[b-aqgxc1mgcc] {
    display: flex;
    align-items: center;
    gap: var(--rpbd2-s2);
    margin-bottom: var(--rpbd2-s3);
    cursor: pointer;
}

.rpbd2 .rpbd2-consent-master-check[b-aqgxc1mgcc] {
    width: 1.1rem;
    height: 1.1rem;
    flex-shrink: 0;
    accent-color: var(--rpbd2-primary);
    cursor: pointer;
}

.rpbd2 .rpbd2-consent-title[b-aqgxc1mgcc] {
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--rpbd2-primary);
    margin: 0;
    cursor: pointer;
    user-select: none;
}

.rpbd2 .rpbd2-consent-required[b-aqgxc1mgcc],
.rpbd2 .rpbd2-consent-optional[b-aqgxc1mgcc] {
    display: flex;
    flex-direction: column;
    gap: var(--rpbd2-s3);
}

.rpbd2 .rpbd2-consent-divider[b-aqgxc1mgcc] {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--rpbd2-ink-faint);
    margin: var(--rpbd2-s4) 0 var(--rpbd2-s3);
    padding-top: var(--rpbd2-s3);
    border-top: 1px solid var(--rpbd2-line);
}

.rpbd2 .rpbd2-consent-item[b-aqgxc1mgcc] {
    display: flex;
    align-items: flex-start;
    gap: var(--rpbd2-s2);
}

.rpbd2 .rpbd2-consent-check[b-aqgxc1mgcc] {
    flex-shrink: 0;
    width: 1rem;
    height: 1rem;
    margin-top: 3px;
    accent-color: var(--rpbd2-primary);
    cursor: pointer;
}

.rpbd2 .rpbd2-consent-label[b-aqgxc1mgcc] {
    font-size: 13px;
    line-height: 1.55;
    color: var(--rpbd2-ink-soft);
    cursor: pointer;
}

    .rpbd2 .rpbd2-consent-label a[b-aqgxc1mgcc] {
        color: var(--rpbd2-primary);
        text-decoration: none;
        font-weight: 500;
    }

        .rpbd2 .rpbd2-consent-label a:hover[b-aqgxc1mgcc] {
            text-decoration: underline;
        }

/* ===================================================================
   Inline OTP verification section
   =================================================================== */

.rpbd2-otp-section[b-aqgxc1mgcc] {
    max-width: 480px;
    margin: 2rem auto;
    padding: 0 1rem 4rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.rpbd2-otp-section-header[b-aqgxc1mgcc] {
    text-align: center;
}

.rpbd2-otp-success-icon[b-aqgxc1mgcc] {
    font-size: 3rem;
    color: #22c55e;
    line-height: 1;
    margin-bottom: 0.75rem;
}

.rpbd2-otp-section-title[b-aqgxc1mgcc] {
    font-family: 'DM Serif Display', serif;
    font-size: 1.75rem;
    color: var(--rpbd2-ink, #1a1a1a);
    margin: 0 0 0.5rem;
}

.rpbd2-otp-section-sub[b-aqgxc1mgcc] {
    color: var(--rpbd2-ink-soft, #6b7280);
    font-size: 0.95rem;
    margin: 0;
    line-height: 1.6;
}

.rpbd2-otp-panel[b-aqgxc1mgcc] {
    border: 1px solid var(--rpbd2-line, #e5e7eb);
    border-radius: var(--rpbd2-r-lg, 12px);
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
    background: var(--rpbd2-surface, #fff);
}

.rpbd2-otp-panel-label[b-aqgxc1mgcc] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    color: var(--rpbd2-ink-soft, #6b7280);
}

    .rpbd2-otp-panel-label i[b-aqgxc1mgcc] {
        color: var(--rpbd2-primary, #e85d04);
    }

.rpbd2-otp-actions[b-aqgxc1mgcc] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.rpbd2-otp-service-notice[b-aqgxc1mgcc] {
    display: flex;
    gap: 0.75rem;
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: var(--rpbd2-r-md, 10px);
    padding: 1rem;
    font-size: 0.875rem;
    color: #92400e;
}

    .rpbd2-otp-service-notice > i[b-aqgxc1mgcc] {
        flex-shrink: 0;
        margin-top: 2px;
        color: #f59e0b;
    }

.rpbd2-otp-service-notice-body[b-aqgxc1mgcc] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

    .rpbd2-otp-service-notice-body p[b-aqgxc1mgcc] {
        margin: 0;
        line-height: 1.5;
    }

.rpbd2-otp-resend-link[b-aqgxc1mgcc] {
    background: none;
    border: none;
    padding: 0;
    color: #92400e;
    cursor: pointer;
    font-size: 0.875rem;
    text-decoration: underline;
    text-align: left;
}

    .rpbd2-otp-resend-link:disabled[b-aqgxc1mgcc] {
        opacity: 0.5;
        cursor: not-allowed;
    }

.rpbd2-otp-login-btn[b-aqgxc1mgcc] {
    margin-top: 0.5rem;
}

.rpbd2-otp-notice[b-aqgxc1mgcc] {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.625rem 0.875rem;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: 8px;
    font-size: 0.85rem;
    color: #1e40af;
    margin-top: 0.75rem;
}

    .rpbd2-otp-notice i[b-aqgxc1mgcc] {
        flex-shrink: 0;
        margin-top: 2px;
    }

.rpbd2-otp-login-later[b-aqgxc1mgcc] {
    display: block;
    text-align: center;
    font-size: 0.875rem;
    color: var(--rpbd2-ink-soft, #6b7280);
    text-decoration: none;
    padding: 0.25rem 0;
}

    .rpbd2-otp-login-later:hover[b-aqgxc1mgcc] {
        text-decoration: underline;
    }

.rpbd2-otp-verified-badge[b-aqgxc1mgcc] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--color-success, #16a34a);
    font-weight: 600;
    padding: 0.5rem 0;
}

.rpbd2-otp-verified-badge i[b-aqgxc1mgcc] {
    font-size: 1.1rem;
}

.rpbd2-otp-channel-label[b-aqgxc1mgcc] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
    color: var(--color-text-secondary, #6b7280);
    font-size: 0.875rem;
}

.rpbd2-otp-divider[b-aqgxc1mgcc] {
    border: none;
    border-top: 1px solid var(--color-border, #e5e7eb);
    margin: 1.25rem 0;
}

.rpbd2-mt-4[b-aqgxc1mgcc] {
    margin-top: 1rem;
}
/* /Pages/Prelaunch/RegisterPetParent.razor.rz.scp.css */
/* Edge's built-in password reveal (eye) icon — tint to #f79a6f.
   The icon is a masked SVG, so `color` has no effect; filter maps black -> #f79a6f. */
[b-9f67m17z5d] input[type="password"]::-ms-reveal {
    filter: brightness(0) saturate(100%) invert(79%) sepia(18%) saturate(1544%) hue-rotate(326deg) brightness(102%) contrast(93%);
}

.error-page[b-9f67m17z5d] {
    /*display: flex;*/
    align-items: center;
    justify-content: center;
    min-height: 60vh;
}

.error-box[b-9f67m17z5d] {
    text-align: center;
    padding: 2rem;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    background: white;
}

.btn-custom[b-9f67m17z5d] {
    background-color: #007bff;
    border-color: #007bff;
    color: white;
    padding: 10px 20px;
    border-radius: 5px;
    text-decoration: none;
    display: inline-block;
    margin-top: 15px;
}

    .btn-custom:hover[b-9f67m17z5d] {
        background-color: #0056b3;
        border-color: #0056b3;
        color: white;
        text-decoration: none;
    }

.spinner-border-sm[b-9f67m17z5d] {
    width: 1rem;
    height: 1rem;
}

.card[b-9f67m17z5d] {
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    border: none;
    border-radius: 10px;
}

.card-header[b-9f67m17z5d] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border-radius: 10px 10px 0 0 !important;
}

/* User Type Selection Styles */
.user-type-selection[b-9f67m17z5d] {
    background: #f8f9fa;
    border-radius: 8px;
    padding: 15px;
    border: 1px solid #e9ecef;
}

    .user-type-selection .form-check[b-9f67m17z5d] {
        background: white;
        border: 2px solid #e9ecef;
        border-radius: 8px;
        padding: 15px;
        margin-bottom: 10px;
        transition: all 0.3s ease;
        cursor: pointer;
    }

        .user-type-selection .form-check:hover[b-9f67m17z5d] {
            border-color: #007bff;
            box-shadow: 0 2px 8px rgba(0, 123, 255, 0.15);
        }

    .user-type-selection .form-check-input:checked + .form-check-label[b-9f67m17z5d] {
        color: #007bff;
    }

    .user-type-selection .form-check:has(.form-check-input:checked)[b-9f67m17z5d] {
        border-color: #007bff;
        background: linear-gradient(135deg, #f8f9ff 0%, #e8f2ff 100%);
        box-shadow: 0 4px 12px rgba(0, 123, 255, 0.2);
    }

    .user-type-selection .form-check-label[b-9f67m17z5d] {
        cursor: pointer;
        width: 100%;
        display: block;
    }

        .user-type-selection .form-check-label strong[b-9f67m17z5d] {
            font-size: 16px;
            color: #333;
        }

    .user-type-selection .form-check-input[b-9f67m17z5d] {
        margin-top: 0.25rem;
        margin-right: 10px;
        transform: scale(1.2);
    }

/* Individual Types Grid */
.individual-types-section[b-9f67m17z5d] {
    background: #f8f9fa;
    border-radius: 8px;
    padding: 15px;
    border: 1px solid #e9ecef;
    margin-top: 15px;
}

.individual-types-grid[b-9f67m17z5d] {
    display: grid;
    /*grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));*/
    grid-template-columns: auto;
    /*justify-items:start;*/
    gap: 15px;
    margin-top: 10px;
}

    .individual-types-grid .form-check[b-9f67m17z5d] {
        background: white;
        border: 1px solid #e9ecef;
        border-radius: 6px;
        padding: 12px;
        transition: all 0.3s ease;
        cursor: pointer;
    }

        .individual-types-grid .form-check:hover[b-9f67m17z5d] {
            border-color: #007bff;
            box-shadow: 0 2px 6px rgba(0, 123, 255, 0.15);
        }

        .individual-types-grid .form-check:has(.form-check-input:checked)[b-9f67m17z5d] {
            border-color: #007bff;
            background: linear-gradient(135deg, #f8f9ff 0%, #e8f2ff 100%);
            box-shadow: 0 2px 8px rgba(0, 123, 255, 0.2);
        }

    .individual-types-grid .form-check-label[b-9f67m17z5d] {
        cursor: pointer;
        font-weight: 500;
        color: #333;
        width: 100%;
        /*display: flex;*/
        align-items: center;
    }

    .individual-types-grid .form-check-input[b-9f67m17z5d] {
        margin-right: 8px;
        transform: scale(1.1);
    }

/* Organisation Section Styles */
.organisation-section[b-9f67m17z5d] {
    background: #f8f9fa;
    border-radius: 8px;
    padding: 15px;
    border: 1px solid #e9ecef;
    margin-top: 15px;
}

.organisation-search-container[b-9f67m17z5d] {
    position: relative;
}

.organisation-search-icon[b-9f67m17z5d] {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #6c757d;
    pointer-events: none;
}

.organisation-dropdown[b-9f67m17z5d] {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: white;
    border: 1px solid #ddd;
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    max-height: 300px;
    overflow-y: auto;
    z-index: 1000;
    margin-top: 2px;
}

.organisation-option[b-9f67m17z5d] {
    padding: 12px 15px;
    cursor: pointer;
    border-bottom: 1px solid #f1f3f4;
    transition: background-color 0.2s ease;
}

    .organisation-option:hover[b-9f67m17z5d] {
        background-color: #f8f9fa;
    }

    .organisation-option:last-child[b-9f67m17z5d] {
        border-bottom: none;
    }

.org-name[b-9f67m17z5d] {
    font-weight: 600;
    color: #333;
    margin-bottom: 2px;
}

.org-type[b-9f67m17z5d] {
    font-size: 12px;
    color: #6c757d;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.no-results[b-9f67m17z5d] {
    padding: 20px;
    text-align: center;
    color: #6c757d;
    font-style: italic;
}

/* Selected Organisation Card */
.selected-organisation[b-9f67m17z5d] {
    margin-top: 10px;
}

.selected-org-card[b-9f67m17z5d] {
    background: linear-gradient(135deg, #e8f5e8 0%, #f0f8f0 100%);
    border: 1px solid #28a745;
    border-radius: 8px;
    padding: 12px 15px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.selected-org-info[b-9f67m17z5d] {
    flex: 1;
}

.selected-org-name[b-9f67m17z5d] {
    font-weight: 600;
    color: #155724;
    margin-bottom: 2px;
}

.selected-org-type[b-9f67m17z5d] {
    font-size: 12px;
    color: #6c757d;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.btn-remove-org[b-9f67m17z5d] {
    background: none;
    border: none;
    color: #6c757d;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 4px;
    transition: all 0.2s ease;
}

    .btn-remove-org:hover[b-9f67m17z5d] {
        background-color: rgba(220, 53, 69, 0.1);
        color: #dc3545;
    }

/* Form Enhancements */
.form-label[b-9f67m17z5d] {
    font-weight: 600;
    color: #333;
    margin-bottom: 8px;
}

.form-control:focus[b-9f67m17z5d],
.form-select:focus[b-9f67m17z5d] {
    border-color: #007bff;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

.password-section[b-9f67m17z5d] {
    border-left: 4px solid #007bff !important;
    background: linear-gradient(135deg, #f8f9ff 0%, #e8f2ff 100%) !important;
}

.terms-and-policy .form-check-label[b-9f67m17z5d] {
    font-size: 14px;
    line-height: 1.5;
}

    .terms-and-policy .form-check-label a[b-9f67m17z5d] {
        color: #007bff;
        text-decoration: none;
        font-weight: 500;
    }

        .terms-and-policy .form-check-label a:hover[b-9f67m17z5d] {
            text-decoration: underline;
        }

/* Alert Enhancements */
.alert-info[b-9f67m17z5d] {
    border-left: 4px solid #17a2b8;
    background: linear-gradient(135deg, #e8f7f9 0%, #f0fbfc 100%);
}

.alert-danger[b-9f67m17z5d] {
    border-left: 4px solid #dc3545;
    background: linear-gradient(135deg, #fdf2f2 0%, #fef7f7 100%);
}

.alert-success[b-9f67m17z5d] {
    border-left: 4px solid #28a745;
    background: linear-gradient(135deg, #f2f9f2 0%, #f7fcf7 100%);
}

/* Button Enhancements */
.btn-primary[b-9f67m17z5d] {
    background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);
    border: none;
    font-weight: 600;
    letter-spacing: 0.5px;
    transition: all 0.3s ease;
}

    .btn-primary:hover[b-9f67m17z5d] {
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(0, 123, 255, 0.3);
    }

    .btn-primary:disabled[b-9f67m17z5d] {
        transform: none;
        box-shadow: none;
        opacity: 0.6;
    }

/* Responsive Design */
@media (max-width: 768px) {
    .individual-types-grid[b-9f67m17z5d] {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .user-type-selection .form-check[b-9f67m17z5d] {
        padding: 12px;
    }

    .organisation-section[b-9f67m17z5d],
    .individual-types-section[b-9f67m17z5d] {
        padding: 12px;
    }

    .selected-org-card[b-9f67m17z5d] {
        padding: 10px 12px;
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .btn-remove-org[b-9f67m17z5d] {
        align-self: flex-end;
        margin-top: -30px;
    }
}

@media (max-width: 480px) {
    .individual-types-grid .form-check-label[b-9f67m17z5d] {
        font-size: 14px;
    }

    .org-name[b-9f67m17z5d] {
        font-size: 14px;
    }

    .org-type[b-9f67m17z5d] {
        font-size: 11px;
    }

    .organisation-dropdown[b-9f67m17z5d] {
        max-height: 200px;
    }
}

/* Animation for smooth transitions */
.individual-types-section[b-9f67m17z5d],
.organisation-section[b-9f67m17z5d] {
    animation: slideIn-b-9f67m17z5d 0.3s ease-out;
}

@keyframes slideIn-b-9f67m17z5d {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

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

/* Focus states for accessibility */
.form-check-input:focus[b-9f67m17z5d] {
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

.organisation-option:focus[b-9f67m17z5d] {
    background-color: #e3f2fd;
    outline: 2px solid #007bff;
    outline-offset: -2px;
}

/* Loading states */
.spinner-border[b-9f67m17z5d] {
    animation: spinner-border-b-9f67m17z5d 0.75s linear infinite;
}

@keyframes spinner-border-b-9f67m17z5d {
    to {
        transform: rotate(360deg);
    }
}
/* /Pages/PrivacyPolicy.razor.rz.scp.css */
.privacy-container[b-9pkwi0sqk4] {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
    color: #1e293b;
    background: white;
    border-radius: 10px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
}

.privacy-header[b-9pkwi0sqk4] {
    background: linear-gradient(155deg, #000000b8 0%, #833a1ea8 100%);
    color: #ffde59;
    padding: 30px;
    border-radius: 10px 10px 0 0;
    margin: -20px -20px 30px -20px;
    text-align: center;
}

    .privacy-header h4[b-9pkwi0sqk4] {
        font-size: 1.8rem;
        font-weight: 600;
        margin-bottom: 8px;
    }

    .privacy-header p[b-9pkwi0sqk4] {
        font-size: 1rem;
        opacity: 0.9;
        margin-bottom: 5px;
    }

/*.last-updated {
    font-size: 0.9rem;
    opacity: 0.9;
    margin: 0;
}*/

.privacy-content[b-9pkwi0sqk4] {
    padding: 0 20px 20px;
}

.policy-section[b-9pkwi0sqk4] {
    margin-bottom: 35px;
}

    .policy-section h2[b-9pkwi0sqk4] {
        color: #f97316;
        font-size: 1.6rem;
        margin-bottom: 15px;
        padding-bottom: 10px;
        border-bottom: 2px solid #e2e8f0;
        font-weight: 600;
    }

    .policy-section h3[b-9pkwi0sqk4] {
        color: #f97316;
        font-size: 1.2rem;
        margin: 20px 0 10px;
        font-weight: 600;
    }

    .policy-section p[b-9pkwi0sqk4] {
        font-size: 1rem;
        line-height: 1.8;
        color: #475569;
        margin-bottom: 15px;
    }

    .policy-section ul[b-9pkwi0sqk4] {
        margin: 15px 0;
        padding-left: 25px;
    }

    .policy-section li[b-9pkwi0sqk4] {
        font-size: 1rem;
        line-height: 1.8;
        color: #475569;
        margin-bottom: 10px;
    }

        .policy-section li strong[b-9pkwi0sqk4] {
            color: #1e293b;
        }

    .policy-section a[b-9pkwi0sqk4] {
        color: #06b6d4;
        text-decoration: none;
        font-weight: 500;
    }

        .policy-section a:hover[b-9pkwi0sqk4] {
            text-decoration: underline;
        }

.contact-details[b-9pkwi0sqk4] {
    background: #f8fafc;
    padding: 20px;
    border-radius: 8px;
    border-left: 4px solid #06b6d4;
    margin-top: 15px;
}

    .contact-details p[b-9pkwi0sqk4] {
        margin: 8px 0;
        font-size: 0.95rem;
    }

.acknowledgment[b-9pkwi0sqk4] {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    padding: 25px;
    border-radius: 10px;
    border-left: 4px solid #f59e0b;
}

    .acknowledgment h2[b-9pkwi0sqk4] {
        color: #92400e;
        border-bottom: none;
    }

    .acknowledgment p[b-9pkwi0sqk4] {
        color: #78350f;
        font-weight: 600;
        font-size: 1.05rem;
        margin: 0;
    }

@media (max-width: 768px) {
    .privacy-container[b-9pkwi0sqk4] {
        padding: 15px;
        margin: 10px;
    }

    .privacy-header[b-9pkwi0sqk4] {
        padding: 20px;
        margin: -15px -15px 20px -15px;
    }

        .privacy-header h1[b-9pkwi0sqk4] {
            font-size: 1.8rem;
        }

    .last-updated[b-9pkwi0sqk4] {
        font-size: 0.85rem;
    }

    .privacy-content[b-9pkwi0sqk4] {
        padding: 0 10px 15px;
    }

    .policy-section h2[b-9pkwi0sqk4] {
        font-size: 1.3rem;
    }

    .policy-section h3[b-9pkwi0sqk4] {
        font-size: 1.1rem;
    }

    .policy-section p[b-9pkwi0sqk4],
    .policy-section li[b-9pkwi0sqk4] {
        font-size: 0.95rem;
    }
}

@media (max-width: 480px) {
    .privacy-container[b-9pkwi0sqk4] {
        margin: 5px;
        padding: 10px;
    }

    .privacy-header h1[b-9pkwi0sqk4] {
        font-size: 1.5rem;
    }

    .policy-section h2[b-9pkwi0sqk4] {
        font-size: 1.2rem;
    }
}
/* /Pages/Support/Donation/SupportFund.razor.rz.scp.css */
.donation-page[b-a4we6az2tg] {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    padding: 0;
    margin: 0 auto;
    color: #0f172a;
    max-width: 1200px;
    border-radius: 10px;
    background: #ffefdba6;
    overflow: hidden;
    /*border: 2px solid #fed7aa;*/
}

/* Header Section */
.page-header[b-a4we6az2tg] {
    padding: 25px;
    border-bottom: 1px solid #cdbc76;
    text-align: center;
    margin-bottom: 0px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    background: linear-gradient(155deg, #000000b8 0%, #833a1ea8 100%);
    color: #ffde59;
}

    .page-header h4[b-a4we6az2tg] {
        font-size: 1.8rem;
        font-weight: 600;
        margin-bottom: 8px;
    }

    .page-header p[b-a4we6az2tg] {
        font-size: 1rem;
        opacity: 0.9;
        margin-bottom: 5px;
    }

.page-title[b-a4we6az2tg] {
    font-size: 1.8rem;
    font-weight: 600;
    margin-bottom: 8px;
}

.header-stats[b-a4we6az2tg] {
    display: flex;
    justify-content: center;
    gap: 30px;
    flex-wrap: wrap;
}

.stat-item[b-a4we6az2tg] {
    text-align: center;
}

.stat-number[b-a4we6az2tg] {
    display: block;
    font-size: 1.5rem;
    font-weight: bold;
    color: #06b6d4;
}

.stat-label[b-a4we6az2tg] {
    font-size: 0.8rem;
    color: #1e293b;
}

/* Main Content */
.donation-content[b-a4we6az2tg] {
    padding: 40px 70px;
}

.main-content[b-a4we6az2tg] {
    background-color: #fdf6ed;
}

.section[b-a4we6az2tg] {
    background: #fff;
    padding: 25px;
    border-bottom: 1px solid #e2e8f0;
}

.section-title[b-a4we6az2tg] {
    font-size: 0.8rem;
    display: flex;
    align-items: center;
    gap: 10px;
    opacity: 0.8;
    margin-top: 15px;
}

/* Cost Breakdown */
.cost-item[b-a4we6az2tg] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid #e2e8f0;
}

    .cost-item:last-child[b-a4we6az2tg] {
        border-bottom: none;
    }

.total-cost[b-a4we6az2tg] {
    font-weight: 600;
    color: #1e293b;
    font-size: 1.1rem;
    margin-top: 10px;
    padding-top: 15px;
    border-top: 2px solid #e2e8f0;
}

.cost-label[b-a4we6az2tg] {
    color: #64748b;
    font-size: 0.95rem;
}

.cost-amount[b-a4we6az2tg] {
    color: #1e293b;
    font-weight: 500;
}

/* Funding Progress */
.funding-progress[b-a4we6az2tg] {
    margin-top: 20px;
    padding: 20px;
    background: #f1f5f9;
    border-radius: 10px;
}

.progress-header[b-a4we6az2tg] {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
    font-size: 0.9rem;
    color: #475569;
}

.progress-bar[b-a4we6az2tg] {
    width: 100%;
    height: 8px;
    background: #e2e8f0;
    border-radius: 4px;
    overflow: hidden;
}

.progress-fill[b-a4we6az2tg] {
    height: 100%;
    transition: width 0.5s ease, background 0.5s ease;
}

.progress-text[b-a4we6az2tg] {
    display: block;
    margin-top: 5px;
    color: #64748b;
}

.funding-progress--overall[b-a4we6az2tg] {
    margin-top: 12px;
    background: #e8f4f0;
}

.progress-months[b-a4we6az2tg] {
    font-size: 0.78rem;
    opacity: 0.65;
    font-weight: 400;
}

/* Features List */
.features-list[b-a4we6az2tg] {
    list-style: none;
    padding: 0px;
}

    .features-list li[b-a4we6az2tg] {
        padding: 12px 0;
        color: #475569;
        display: flex;
        align-items: center;
        gap: 12px;
    }

        .features-list li[b-a4we6az2tg]::before {
            content: "⚡";
            font-size: 1.2rem;
        }

/* QR Section */
.qr-section[b-a4we6az2tg] {
    /*text-align: center;*/
    color: #ea580c;
    background: #fff;
    padding: 25px;
}

.qr-container[b-a4we6az2tg] {
    background: white;
    border-radius: 15px;
    /*padding: 30px;*/
    flex: 1;
    display: flex;
    flex-direction: column;
    margin: 16px 0 0;
    cursor: pointer;
    transition: transform 0.2s ease;
    box-shadow: 0 4px 16px rgba(0,0,0,0.08);
    width: 100%;
    box-sizing: border-box;
}

    .qr-container:hover[b-a4we6az2tg] {
        transform: scale(1.02);
    }

.qr-code[b-a4we6az2tg] {
    flex: 1;
    border-radius: 10px;
    display: flex;
    align-items: stretch;
    justify-content: center;
}

    .qr-code svg[b-a4we6az2tg], .qr-code img[b-a4we6az2tg] {
        width: 100%;
        height: 450px;
        object-fit: contain;
        display: block;
    }

.qr-title[b-a4we6az2tg] {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 10px;
}

.qr-instructions[b-a4we6az2tg] {
    font-size: 0.9rem;
    opacity: 0.8;
    margin-top: 15px;
    line-height: 1.4;
}

/* Razorpay badge */
.qr-badge[b-a4we6az2tg] {
    margin-top: 4px;
}

.razorpay-badge[b-a4we6az2tg] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: #072654;
    color: #fff;
    font-size: 0.72rem;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 20px;
    letter-spacing: 0.02em;
}

/* Payment Methods */
.payment-methods[b-a4we6az2tg] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 15px;
}

.payment-method[b-a4we6az2tg] {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 10px;
    border-radius: 10px;
    border: 1px solid #e2e8f0;
    cursor: pointer;
    transition: all 0.2s ease;
}

    .payment-method:hover[b-a4we6az2tg] {
        border-color: #7b9c8e;
        background: #deede6;
    }

.payment-icon[b-a4we6az2tg] {
    font-size: 1.5rem;
}

.payment-info strong[b-a4we6az2tg] {
    display: block;
    color: #1e293b;
    margin-bottom: 5px;
}

.payment-info small[b-a4we6az2tg] {
    color: #64748b;
}

/* UPI App deep-link row */
.upi-apps-row[b-a4we6az2tg] {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid #e2e8f0;
}

.upi-apps-label[b-a4we6az2tg] {
    font-size: 0.78rem;
    color: #64748b;
    margin: 0 0 10px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.upi-app-links[b-a4we6az2tg] {
    display: flex;
    gap: 30px;
    align-items: center;
}

.upi-app-btn[b-a4we6az2tg] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 0;
    border-radius: 50px;
    text-decoration: none;
    background: transparent;
    border: 1.5px solid;
    transition: background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

    .upi-app-btn:hover[b-a4we6az2tg] {
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(0,0,0,0.10);
        text-decoration: none;
    }

    .upi-app-btn:active[b-a4we6az2tg] {
        transform: translateY(0);
    }

.upi-app-icon[b-a4we6az2tg] {
    width: 80px;
    height: 25px;
    object-fit: contain;
    flex-shrink: 0;
    border-radius: 4px;
}

/* Per-app: border + text only, no background; subtle fill on hover */
.upi-gpay[b-a4we6az2tg] {
    border-color: #34a853;
    color: #1a5c1a;
}

    .upi-gpay:hover[b-a4we6az2tg] {
        background: #f1f8f1;
        color: #1a5c1a;
    }

.upi-phonepe[b-a4we6az2tg] {
    border-color: #6739b7;
    color: #3d1a8a;
}

    .upi-phonepe:hover[b-a4we6az2tg] {
        background: #f3eeff;
        color: #3d1a8a;
    }

.upi-paytm[b-a4we6az2tg] {
    border-color: #00b9f1;
    color: #004f9e;
}

    .upi-paytm:hover[b-a4we6az2tg] {
        background: #e8f4ff;
        color: #004f9e;
    }

.upi-bhim[b-a4we6az2tg] {
    border-color: #f6821e;
    color: #7a3500;
}

    .upi-bhim:hover[b-a4we6az2tg] {
        background: #fff5e8;
        color: #7a3500;
    }

/* Razorpay payment section */
.rzp-payment-section[b-a4we6az2tg] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px;
    background: #fffbf7;
    border: 1px solid #fed7aa;
    border-radius: 12px;
    margin-bottom: 16px;
}

.btn-rzp-pay[b-a4we6az2tg] {
    /* width: 100%;
    padding: 13px 20px;
    border-radius: 50px;
    border: none;
    background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
    color: white;
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-shadow: 0 4px 0 #c2410c, 0 6px 18px rgba(249,115,22,0.3);
    transition: transform 0.15s ease, box-shadow 0.15s ease;*/

    width: fit-content;
    background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
    border: none;
    color: white;
    padding: 0.6rem 1.3rem;
    border-radius: 12px;
    font-weight: 600;
    font-size: 0.85rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.45rem;
    box-shadow: 0 4px 0 #c2410c, 0 6px 18px rgba(249, 115, 22, 0.35);
    transition: transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.15s ease;
    margin: 0 auto;
}

    .btn-rzp-pay:hover:not(:disabled)[b-a4we6az2tg] {
        transform: translateY(-2px);
        box-shadow: 0 6px 0 #c2410c, 0 10px 26px rgba(249,115,22,0.4);
    }

    .btn-rzp-pay:active:not(:disabled)[b-a4we6az2tg] {
        transform: translateY(2px);
        box-shadow: 0 2px 0 #c2410c;
    }

    .btn-rzp-pay:disabled[b-a4we6az2tg] {
        opacity: 0.65;
        cursor: not-allowed;
        box-shadow: none;
    }

.rzp-note[b-a4we6az2tg] {
    font-size: 0.72rem;
    color: #94a3b8;
    text-align: center;
}

.btn-copy-upi[b-a4we6az2tg] {
    width: 100%;
    padding: 11px 20px;
    border-radius: 50px;
    border: 1.5px solid #d05a23;
    background: transparent;
    color: #d05a23;
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin: 0 auto;
    width:fit-content;
}

    .btn-copy-upi:hover[b-a4we6az2tg] {
        background: rgba(208, 90, 35, 0.06);
        transform: translateY(-1px);
    }

    .btn-copy-upi:active[b-a4we6az2tg] {
        transform: translateY(0);
    }

.upi-apps-note[b-a4we6az2tg] {
    display: block;
    margin-top: 8px;
    font-size: 0.72rem;
    color: #94a3b8;
}

/* Support Info */
.support-info[b-a4we6az2tg] {
    background: #86efac70;
    padding: 20px;
    text-align: center;
}

    .support-info h3[b-a4we6az2tg] {
        color: #1e293b;
        margin-bottom: 10px;
        font-size: 1.1rem;
    }

    .support-info p[b-a4we6az2tg] {
        color: #64748b;
        font-size: 0.9rem;
        line-height: 1.5;
    }

/* Recent Supporters */
.recent-supporters[b-a4we6az2tg] {
    background: #fefefe;
    padding: 20px;
}

    .recent-supporters h3[b-a4we6az2tg] {
        color: #1e293b;
        margin-bottom: 15px;
        font-size: 1.1rem;
    }

.supporters-list[b-a4we6az2tg] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.supporter-item[b-a4we6az2tg] {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 10px;
    background: #f8fafc;
    border-radius: 8px;
}

.supporter-avatar[b-a4we6az2tg] {
    width: 40px;
    height: 40px;
    background: #06b6d4;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: bold;
    font-size: 0.9rem;
}

.supporter-info[b-a4we6az2tg] {
    flex: 1;
}

.supporter-name[b-a4we6az2tg] {
    font-weight: 500;
    color: #1e293b;
}

.supporter-amount[b-a4we6az2tg] {
    font-size: 0.9rem;
    color: #06b6d4;
    font-weight: 500;
}

.supporter-time[b-a4we6az2tg] {
    font-size: 0.8rem;
    color: #64748b;
}

/* Modal */
.modal-overlay[b-a4we6az2tg] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.modal-content[b-a4we6az2tg] {
    background: white;
    border-radius: 15px;
    max-width: 500px;
    width: 90%;
    max-height: 80vh;
    overflow-y: auto;
}

.modal-header[b-a4we6az2tg] {
    padding: 20px 20px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.modal-close[b-a4we6az2tg] {
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: #64748b;
}

.modal-body[b-a4we6az2tg] {
    padding: 20px;
}

.modal-footer[b-a4we6az2tg] {
    padding: 0 20px 20px;
    display: flex;
    gap: 10px;
    justify-content: flex-end;
}

.btn[b-a4we6az2tg] {
    padding: 10px 20px;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    font-weight: 500;
}

.btn-primary[b-a4we6az2tg] {
    background: #06b6d4;
    color: white;
    box-shadow: 0 4px 0 , 0 6px 18px rgba(249, 115, 22, 0.35);
}

.btn-secondary[b-a4we6az2tg] {
    background: #e2e8f0;
    color: #475569;
    flex: 1;
    box-shadow: 0 4px 0 #094554, 0 6px 18px rgba(249, 115, 22, 0.35);
}

/* QR + right column row */
.qr-payment-row[b-a4we6az2tg] {
    display: flex;
    flex-direction: row;
    gap: 0px;
    align-items: stretch;
    justify-content: center;
}

.qr-left[b-a4we6az2tg] {
    width: 300px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0 40px;
    /*margin-left: 40px;*/
}

/* Right column: alt-payment on top, form below */
.qr-right[b-a4we6az2tg] {
    width: 360px;
    /*flex-shrink: 0;*/
    display: flex;
    flex-direction: column;
    gap: 20px;
    flex: auto;
    margin: 0 40px;
}

.payment-confirm-panel[b-a4we6az2tg] {
    width: 100%;
}

.alt-payment-panel[b-a4we6az2tg] {
    width: 100%;
}

/* Contributed checkbox */
.checkbox-item[b-a4we6az2tg] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
    cursor: pointer;
}

    .checkbox-item input[type="checkbox"][b-a4we6az2tg] {
        width: 18px;
        height: 18px;
        accent-color: #10b981;
        cursor: pointer;
        flex-shrink: 0;
    }

    .checkbox-item label[b-a4we6az2tg] {
        font-size: 14px;
        font-weight: 600;
        color: #ea580c;
        cursor: pointer;
        user-select: none;
    }

/* Locked form state */
.payment-form--locked[b-a4we6az2tg] {
    opacity: 0.55;
    pointer-events: none;
}

.btn-paid[b-a4we6az2tg] {
    background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
    border: none;
    color: white;
    padding: 0.6rem 1.3rem;
    border-radius: 12px;
    font-weight: 600;
    font-size: 0.85rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.45rem;
    box-shadow: 0 4px 0 #c2410c, 0 6px 18px rgba(249, 115, 22, 0.35);
    transition: transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.15s ease;
}

    .btn-paid:hover[b-a4we6az2tg] {
        transform: translateY(-2px);
        box-shadow: 0 6px 0 #c2410c, 0 10px 26px rgba(249,115,22,0.4);
    }

    .btn-paid:active[b-a4we6az2tg] {
        transform: translateY(2px);
        box-shadow: 0 2px 0 #c2410c, 0 4px 10px rgba(249,115,22,0.25);
    }

/* Payment form */
.payment-form[b-a4we6az2tg] {
    width: 100%;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 16px;
}

.form-title[b-a4we6az2tg] {
    font-size: 15px;
    font-weight: 600;
    margin: 0 0 16px;
}

.form-actions[b-a4we6az2tg] {
    display: flex;
    gap: 10px;
    margin-top: 16px;
}

.btn-submit-payment[b-a4we6az2tg] {
    flex: 1;
    background-color: #d05a23 !important;
    /*border-color: #d05a23 !important;*/
    color: white;
    border: none;
    padding: 11px 20px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.25s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    box-shadow: 0 4px 0 #c2410c, 0 6px 18px rgba(249,115,22,0.35);
}

    .btn-submit-payment:hover:not(:disabled)[b-a4we6az2tg] {
        transform: translateY(-1px);
        box-shadow: 0 6px 18px rgba(6, 182, 212, 0.4);
    }

    .btn-submit-payment:disabled[b-a4we6az2tg] {
        opacity: 0.65;
        cursor: not-allowed;
    }

/* Success state */
.submit-success[b-a4we6az2tg] {
    text-align: center;
    padding: 20px;
    background: rgba(16, 185, 129, 0.1);
    border: 1px solid rgba(16, 185, 129, 0.3);
    border-radius: 16px;
    width: 100%;
}

    .submit-success h4[b-a4we6az2tg] {
        color: #10b981;
        font-size: 18px;
        margin: 0 0 8px;
    }

    .submit-success p[b-a4we6az2tg] {
        color: #e2e8f0;
        font-size: 14px;
        margin: 4px 0;
    }

.success-sub[b-a4we6az2tg] {
    opacity: 0.7;
    font-size: 12px !important;
    margin-top: 8px !important;
}

/* Verified badge */
.verified-badge[b-a4we6az2tg] {
    font-size: 12px;
    margin-left: 4px;
}

/* Animation */
/*.qr-container {
    animation: pulse 2s infinite;
}*/

@keyframes pulse-b-a4we6az2tg {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.02);
    }

    100% {
        transform: scale(1);
    }
}

/* Responsive */
@media (max-width: 480px) {
    .donation-page[b-a4we6az2tg] {
        border-radius: 0px;
    }

    .section-title[b-a4we6az2tg] {
        font-size: 1.2rem;
    }

    .payment-method[b-a4we6az2tg] {
        padding: 10px;
    }

    .page-title[b-a4we6az2tg] {
        font-size: 1.5rem;
        margin-bottom: 5px;
    }

    .qr-payment-row[b-a4we6az2tg] {
        flex-direction: column;
        align-items: center;
        gap: 24px;
    }

    .qr-left[b-a4we6az2tg] {
        width: 100%;
        max-width: 320px;
    }

    .qr-container[b-a4we6az2tg] {
        flex: unset;
        min-height: 360px;
    }

    .qr-right[b-a4we6az2tg] {
        width: 100%;
    }

    .form-actions[b-a4we6az2tg] {
        flex-direction: row;
    }

        .form-actions .btn[b-a4we6az2tg],
        .form-actions .btn-submit-payment[b-a4we6az2tg] {
            flex: 1;
            text-align: center;
            justify-content: center;
        }

    .upi-app-links[b-a4we6az2tg] {
        gap: 8px;
    }

    .upi-app-icon[b-a4we6az2tg] {
        width: 40px;
        height: 15px;
        object-fit: scale-down;
        flex-shrink: 0;
        border-radius: 4px;
    }
}
/* /Pages/Support/Donation/SustenanceDonation.razor.rz.scp.css */
.donation-page[b-kmp37pbgte] {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    padding: 0;
    margin: 0 auto;
    color: #0f172a;
    max-width: 1200px;
    border-radius: 10px;
    background: #ffefdba6;
    overflow: hidden;
    border: 2px solid #fed7aa;
}

/* Header Section */
.page-header[b-kmp37pbgte] {
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 10px;
    padding-bottom: 5px;
    border-bottom: 1px solid #cdbc76;
    text-align: center;
    margin-bottom: 0px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    color: #9a3412;
    /*background: #ffefdba6;*/
}

    .page-header h4[b-kmp37pbgte] {
        font-size: 1.8rem;
        font-weight: 600;
        margin-bottom: 8px;
    }

    .page-header p[b-kmp37pbgte] {
        font-size: 1rem;
        opacity: 0.9;
    }

.page-title[b-kmp37pbgte] {
    font-size: 1.8rem;
    font-weight: 600;
    margin-bottom: 8px;
}

.header-stats[b-kmp37pbgte] {
    display: flex;
    justify-content: center;
    gap: 30px;
    flex-wrap: wrap;
}

.stat-item[b-kmp37pbgte] {
    text-align: center;
}

.stat-number[b-kmp37pbgte] {
    display: block;
    font-size: 1.5rem;
    font-weight: bold;
    color: #06b6d4;
}

.stat-label[b-kmp37pbgte] {
    font-size: 0.8rem;
    color: #1e293b;
}

/* Main Content */
.donation-content[b-kmp37pbgte] {
    padding: 40px 70px;
}

.main-content[b-kmp37pbgte] {
    /*padding: 20px;*/
    background-color: #fdf6ed;
}

.section[b-kmp37pbgte] {
    /*margin-bottom: 35px;*/
    background: #fff;
    /*border-radius: 15px;*/
    padding: 25px;
    border-bottom: 1px solid #e2e8f0;
}

.section-title[b-kmp37pbgte] {
    font-size: 1.2rem;
    color: #d05a23;
    /*margin-bottom: 20px;*/
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Cost Breakdown */
.cost-breakdown[b-kmp37pbgte] {
  /*  background: #fff;
    border-radius: 15px;
    padding: 25px;
    border: 1px solid #e2e8f0;*/
}

.cost-item[b-kmp37pbgte] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid #e2e8f0;
}

    .cost-item:last-child[b-kmp37pbgte] {
        border-bottom: none;
    }

.total-cost[b-kmp37pbgte] {
    font-weight: 600;
    color: #1e293b;
    font-size: 1.1rem;
    margin-top: 10px;
    padding-top: 15px;
    border-top: 2px solid #e2e8f0;
}

.cost-label[b-kmp37pbgte] {
    color: #64748b;
    font-size: 0.95rem;
}

.cost-amount[b-kmp37pbgte] {
    color: #1e293b;
    font-weight: 500;
}

/* Funding Progress */
.funding-progress[b-kmp37pbgte] {
    margin-top: 20px;
    padding: 20px;
    background: #f1f5f9;
    border-radius: 10px;
}

.progress-header[b-kmp37pbgte] {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
    font-size: 0.9rem;
    color: #475569;
}

.progress-bar[b-kmp37pbgte] {
    width: 100%;
    height: 8px;
    background: #e2e8f0;
    border-radius: 4px;
    overflow: hidden;
}

.progress-fill[b-kmp37pbgte] {
    height: 100%;
    transition: width 0.5s ease, background 0.5s ease;
}

.progress-text[b-kmp37pbgte] {
    display: block;
    margin-top: 5px;
    color: #64748b;
}

.funding-progress--overall[b-kmp37pbgte] {
    margin-top: 12px;
    background: #e8f4f0;
}

.progress-fill--overall[b-kmp37pbgte] {
    /* color driven by inline hsl style */
}

.progress-months[b-kmp37pbgte] {
    font-size: 0.78rem;
    opacity: 0.65;
    font-weight: 400;
}

/* Features List */
.features-list[b-kmp37pbgte] {
    list-style: none;
    padding:0px;
    /*background: #fff;
    border-radius: 15px;
    padding: 25px;
    border: 1px solid #e2e8f0;*/
}

    .features-list li[b-kmp37pbgte] {
        padding: 12px 0;
        color: #475569;
        display: flex;
        align-items: center;
        gap: 12px;
    }

        .features-list li[b-kmp37pbgte]::before {
            content: "⚡";
            font-size: 1.2rem;
        }

/* QR Section - Central Placement */
.qr-section[b-kmp37pbgte] {
    /*background: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%);*/
    /*background-color: #deede6;*/
    /*border-radius: 20px;*/
    /*padding: 30px;*/
    text-align: center;
    color: #ea580c;
    /*margin-top: 20px;*/

    background: #fff;
    /*border-radius: 15px;*/
    padding: 25px;
    /*border: 1px solid #e2e8f0;*/
}

.qr-container[b-kmp37pbgte] {
    background: white;
    border-radius: 15px;
    padding: 20px;
    display: inline-block;
    margin: 20px 0;
    cursor: pointer;
    transition: transform 0.2s ease;
}

    .qr-container:hover[b-kmp37pbgte] {
        transform: scale(1.02);
    }

.qr-code[b-kmp37pbgte] {
    width: 180px;
    height: 180px;
    background: white;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .qr-code svg[b-kmp37pbgte], .qr-code img[b-kmp37pbgte] {
        width: 160px;
        height: 160px;
    }

.qr-title[b-kmp37pbgte] {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 10px;
}

.qr-subtitle[b-kmp37pbgte] {
    font-size: 0.9rem;
    opacity: 0.9;
    margin-bottom: 20px;
}

.qr-instructions[b-kmp37pbgte] {
    font-size: 0.9rem;
    opacity: 0.8;
    margin-top: 15px;
    line-height: 1.4;
}

/* Trust Indicators */
.trust-indicators[b-kmp37pbgte] {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-top: 25px;
    flex-wrap: wrap;
}

.trust-badge[b-kmp37pbgte] {
    /*background: rgba(255, 255, 255, 0.2);*/
    background-color: #7d968b;
    color: white;
    padding: 8px 15px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 500;
}

/* Quick Amounts */
.quick-amounts[b-kmp37pbgte] {
    margin-top: 25px;
}

.quick-amounts-title[b-kmp37pbgte] {
    font-size: 0.9rem;
    margin-bottom: 15px;
    opacity: 0.9;
}

.amount-buttons[b-kmp37pbgte] {
    display: flex;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
}

.amount-btn[b-kmp37pbgte] {
    /*background: rgba(255, 255, 255, 0.2);*/
    background-color: #7d968b;
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.3);
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

    .amount-btn:hover[b-kmp37pbgte] {
        background: rgba(255, 255, 255, 0.3);
        transform: translateY(-1px);
    }

/* Payment Methods */
.payment-methods[b-kmp37pbgte] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 15px;
}

.payment-method[b-kmp37pbgte] {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 10px;
    /*background: #deede6;*/
    border-radius: 10px;
    border: 1px solid #e2e8f0;
    cursor: pointer;
    transition: all 0.2s ease;
}

    .payment-method:hover[b-kmp37pbgte] {
        border-color: #7b9c8e;
        background: #deede6;
    }

.payment-icon[b-kmp37pbgte] {
    font-size: 1.5rem;
}

.payment-info strong[b-kmp37pbgte] {
    display: block;
    color: #1e293b;
    margin-bottom: 5px;
}

.payment-info small[b-kmp37pbgte] {
    color: #64748b;
}

/* Support Info */
.support-info[b-kmp37pbgte] {
    background: #86efac70;
    /*border-radius: 15px;*/
    padding: 20px;
    text-align: center;
    /*margin-top: 30px;*/
}

    .support-info h3[b-kmp37pbgte] {
        color: #1e293b;
        margin-bottom: 10px;
        font-size: 1.1rem;
    }

    .support-info p[b-kmp37pbgte] {
        color: #64748b;
        font-size: 0.9rem;
        line-height: 1.5;
    }


/* Recent Supporters */
.recent-supporters[b-kmp37pbgte] {
    background: #fefefe;
    /*border-radius: 15px;*/
    padding: 20px;
    /*border: 1px solid #e2e8f0;*/
}

    .recent-supporters h3[b-kmp37pbgte] {
        color: #1e293b;
        margin-bottom: 15px;
        font-size: 1.1rem;
    }

.supporters-list[b-kmp37pbgte] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.supporter-item[b-kmp37pbgte] {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 10px;
    background: #f8fafc;
    border-radius: 8px;
}

.supporter-avatar[b-kmp37pbgte] {
    width: 40px;
    height: 40px;
    background: #06b6d4;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: bold;
    font-size: 0.9rem;
}

.supporter-info[b-kmp37pbgte] {
    flex: 1;
}

.supporter-name[b-kmp37pbgte] {
    font-weight: 500;
    color: #1e293b;
}

.supporter-amount[b-kmp37pbgte] {
    font-size: 0.9rem;
    color: #06b6d4;
    font-weight: 500;
}

.supporter-time[b-kmp37pbgte] {
    font-size: 0.8rem;
    color: #64748b;
}

/* Modal */
.modal-overlay[b-kmp37pbgte] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.modal-content[b-kmp37pbgte] {
    background: white;
    border-radius: 15px;
    max-width: 500px;
    width: 90%;
    max-height: 80vh;
    overflow-y: auto;
}

.modal-header[b-kmp37pbgte] {
    padding: 20px 20px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.modal-close[b-kmp37pbgte] {
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: #64748b;
}

.modal-body[b-kmp37pbgte] {
    padding: 20px;
}

.modal-footer[b-kmp37pbgte] {
    padding: 0 20px 20px;
    display: flex;
    gap: 10px;
    justify-content: flex-end;
}

.btn[b-kmp37pbgte] {
    padding: 10px 20px;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    font-weight: 500;
}

.btn-primary[b-kmp37pbgte] {
    background: #06b6d4;
    color: white;
}

.btn-secondary[b-kmp37pbgte] {
    background: #e2e8f0;
    color: #475569;
    flex: 1;
}

/* Responsive Design */


@media (max-width: 480px) {
    .donation-page[b-kmp37pbgte] {
        border-radius: 0px;
    }

    .section-title[b-kmp37pbgte] {
        font-size: 1.2rem;
    }

    .payment-method[b-kmp37pbgte] {
        padding: 10px;
    }
    .page-title[b-kmp37pbgte] {
        font-size: 1.5rem;
        margin-bottom: 5px;
    }
}

@media (max-width: 768px) {
    .form-actions[b-kmp37pbgte] {
        flex-direction: row;
    }

        .form-actions .btn[b-kmp37pbgte],
        .form-actions .btn-submit-payment[b-kmp37pbgte] {
            flex: 1;
            text-align: center;
            justify-content: center;
        }

    .donation-container[b-kmp37pbgte] {
        margin: 10px;
        max-width: none;
    }

    .donation-header[b-kmp37pbgte] {
        padding: 30px 20px;
    }

        .donation-header h1[b-kmp37pbgte] {
            font-size: 1.6rem;
        }

    .donation-content[b-kmp37pbgte] {
        padding: 30px 20px;
    }

    .qr-section[b-kmp37pbgte] {
        padding: 25px 15px;
    }

    .qr-code[b-kmp37pbgte] {
        width: 160px;
        height: 160px;
    }

        .qr-code svg[b-kmp37pbgte], .qr-code img[b-kmp37pbgte] {
            width: 140px;
            height: 140px;
        }

    .trust-indicators[b-kmp37pbgte] {
        gap: 10px;
    }

    .trust-badge[b-kmp37pbgte] {
        font-size: 0.75rem;
        padding: 6px 12px;
    }

    .header-stats[b-kmp37pbgte] {
        gap: 20px;
    }

    .stat-number[b-kmp37pbgte] {
        font-size: 1.2rem;
    }
}

/* Contributed checkbox */
.checkbox-item[b-kmp37pbgte] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
    cursor: pointer;
}

    .checkbox-item input[type="checkbox"][b-kmp37pbgte] {
        width: 18px;
        height: 18px;
        accent-color: #10b981;
        cursor: pointer;
        flex-shrink: 0;
    }

    .checkbox-item label[b-kmp37pbgte] {
        font-size: 14px;
        font-weight: 600;
        color: #ea580c;
        cursor: pointer;
        user-select: none;
    }

/* Locked form state */
.payment-form--locked[b-kmp37pbgte] {
    opacity: 0.55;
    pointer-events: none;
}

/* Active amount button */
.amount-btn--active[b-kmp37pbgte] {
    background: #06b6d4;
    border-color: #06b6d4;
    color: white;
    box-shadow: 0 2px 8px rgba(6, 182, 212, 0.35);
}

/* QR + form side-by-side row */
.qr-payment-row[b-kmp37pbgte] {
    display: flex;
    gap: 32px;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    background: #fff;
    border-radius: 15px;
    /*padding: 25px;
    border: 1px solid #e2e8f0;*/
}

.qr-left[b-kmp37pbgte] {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Self-report panel */
.payment-confirm-panel[b-kmp37pbgte] {
    flex: 1;
    min-width: 260px;
    max-width: 380px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
}

/* Alt payment panel — third column, matches top alignment */
.alt-payment-panel[b-kmp37pbgte] {
    flex: 0 1 260px;
    min-width: 220px;
}

.btn-paid[b-kmp37pbgte] {
    /*    background: linear-gradient(135deg, #10b981, #059669);
    color: white;
    border: none;
    padding: 13px 24px;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.25s;
    box-shadow: 0 4px 16px rgba(16, 185, 129, 0.35);
    width: 100%;*/
    background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
    border: none;
    color: white;
    padding: 0.6rem 1.3rem;
    border-radius: 12px;
    font-weight: 600;
    font-size: 0.85rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.45rem;
    box-shadow: 0 4px 0 #c2410c, 0 6px 18px rgba(249, 115, 22, 0.35);
    transition: transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.15s ease;
}

    .btn-paid:hover[b-kmp37pbgte] {
        transform: translateY(-2px);
        box-shadow: 0 6px 0 #c2410c, 0 10px 26px rgba(249,115,22,0.4);
    }

    .btn-paid:active[b-kmp37pbgte] {
        transform: translateY(2px);
        box-shadow: 0 2px 0 #c2410c, 0 4px 10px rgba(249,115,22,0.25);
    }

.paid-hint[b-kmp37pbgte] {
    margin-top: 10px;
    font-size: 12px;
    font-weight: bolder;
    opacity: 0.7;
    text-align: center;
    color: #ea580c;
}

/* Payment form */
.payment-form[b-kmp37pbgte] {
    width: 100%;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 16px;
    /*padding: 20px;*/
}

.form-title[b-kmp37pbgte] {
    /*color: #e2e8f0;*/
    font-size: 15px;
    font-weight: 600;
    margin: 0 0 16px;
}

.form-actions[b-kmp37pbgte] {
    display: flex;
    gap: 10px;
    margin-top: 16px;
}

.btn-submit-payment[b-kmp37pbgte] {
    flex: 1;
    background-color: #d05a23 !important;
    border-color: #d05a23 !important;
    color: white;
    border: none;
    padding: 11px 20px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.25s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

    .btn-submit-payment:hover:not(:disabled)[b-kmp37pbgte] {
        transform: translateY(-1px);
        box-shadow: 0 6px 18px rgba(6, 182, 212, 0.4);
    }

    .btn-submit-payment:disabled[b-kmp37pbgte] {
        opacity: 0.65;
        cursor: not-allowed;
    }

/* Success state */
.submit-success[b-kmp37pbgte] {
    text-align: center;
    padding: 20px;
    background: rgba(16, 185, 129, 0.1);
    border: 1px solid rgba(16, 185, 129, 0.3);
    border-radius: 16px;
    width: 100%;
}

.success-icon[b-kmp37pbgte] {
    font-size: 40px;
    margin-bottom: 12px;
}

.submit-success h4[b-kmp37pbgte] {
    color: #10b981;
    font-size: 18px;
    margin: 0 0 8px;
}

.submit-success p[b-kmp37pbgte] {
    color: #e2e8f0;
    font-size: 14px;
    margin: 4px 0;
}

.success-sub[b-kmp37pbgte] {
    opacity: 0.7;
    font-size: 12px !important;
    margin-top: 8px !important;
}

/* Verified badge in supporter list */
.verified-badge[b-kmp37pbgte] {
    font-size: 12px;
    margin-left: 4px;
}

/* Animation */
.qr-container[b-kmp37pbgte] {
    animation: pulse-b-kmp37pbgte 2s infinite;
}

@keyframes pulse-b-kmp37pbgte {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.02);
    }

    100% {
        transform: scale(1);
    }
}
/* /Pages/Support/Feedback.razor.rz.scp.css */
.feedback-page[b-0p6ap7fhrx] {
    border-radius: 10px;
    /*border: 2px solid #fed7aa !important;*/
    max-width: 1200px;
    margin: 0 auto;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background: #ffefdba6;
}

/* Header Section - Match Donation Page */
.page-header[b-0p6ap7fhrx] {
    padding: 25px;
    border-bottom: 1px solid #cdbc76;
    text-align: center;
    margin-bottom: 0px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    background: linear-gradient(155deg, #000000b8 0%, #833a1ea8 100%);
    color: #ffde59;
    border-radius: 10px 10px 0 0;
}

    .page-header h4[b-0p6ap7fhrx] {
        font-size: 1.8rem;
        font-weight: 600;
        margin-bottom: 8px;
    }

    .page-header p[b-0p6ap7fhrx] {
        font-size: 1rem;
        opacity: 0.9;
        margin-bottom: 5px;
    }

.page-title[b-0p6ap7fhrx] {
    font-size: 1.8rem;
    font-weight: 600;
    margin-bottom: 8px;
}
/* Main Content */
.main-content[b-0p6ap7fhrx] {
    /*padding: 20px;*/
    /*background-color: #f8fafceb;*/
}
.feedback-card[b-0p6ap7fhrx] {
    background: white;
    /*border-radius: 15px;*/
    padding: 25px;
    /*margin-bottom: 25px;*/
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
    border: 1px solid #e2e8f0;
}

.section-header[b-0p6ap7fhrx] {
    font-size: 1.2rem;
    color: #f97316;
    margin-bottom: 20px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 10px;
    border-bottom: 2px solid #e2e8f0;
}

/* Star Rating */
.star-rating[b-0p6ap7fhrx] {
    display: flex;
    gap: 5px;
    margin: 10px 0;
    justify-content: center
}

.star[b-0p6ap7fhrx] {
    font-size: 2rem;
    color: #929aa6;
    cursor: pointer;
    transition: color 0.2s ease, transform 0.1s ease;
}

    .star:hover[b-0p6ap7fhrx], .star.active[b-0p6ap7fhrx] {
        color: #06b6d4;
        transform: scale(1.1);
    }

/* Checkbox Grid */
.checkbox-grid[b-0p6ap7fhrx] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 15px;
    margin-top: 15px;
}

.checkbox-item[b-0p6ap7fhrx] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px;
    border: 2px solid #e2e8f0;
    border-radius: 10px;
    transition: all 0.3s ease;
    background: #f8fafc;
}

    .checkbox-item:hover[b-0p6ap7fhrx] {
        border-color: #06b6d4;
        background: rgba(6, 182, 212, 0.05);
    }

    .checkbox-item input[type="checkbox"]:checked + label[b-0p6ap7fhrx] {
        color: #06b6d4;
        font-weight: 500;
    }

    .checkbox-item input[type="checkbox"][b-0p6ap7fhrx] {
        width: 18px;
        height: 18px;
        accent-color: #06b6d4;
    }

    .checkbox-item label[b-0p6ap7fhrx] {
        color: #1e293b;
        font-weight: 500;
        cursor: pointer;
        margin: 0;
    }

/* Form Controls */
.form-control[b-0p6ap7fhrx] {
    border: 2px solid #e2e8f0;
    border-radius: 10px;
    padding: 12px 15px;
    transition: border-color 0.3s ease;
    background: #f8fafc;
    color: #1e293b;
}

    .form-control:focus[b-0p6ap7fhrx] {
        border-color: #06b6d4;
        box-shadow: 0 0 0 3px rgba(6, 182, 212, 0.1);
        outline: none;
    }

    .form-control[b-0p6ap7fhrx]::placeholder {
        color: #64748b;
    }

/* Form Labels */
.form-label[b-0p6ap7fhrx] {
    font-size: 14px;
    color: #1e293b;
    font-weight: 500;
    margin-bottom: 8px;
    display: block;
}

/* Text Colors */
.text-muted[b-0p6ap7fhrx] {
    color: #64748b !important;
}

/* Buttons */
.btn-primary[b-0p6ap7fhrx] {
    background: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%);
    border: none;
    color: white;
    padding: 0.6rem 1.3rem;
    border-radius: 12px;
    font-weight: 600;
    font-size: 0.85rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.45rem;
    box-shadow: 0 4px 0 #094554, 0 6px 18px rgba(249, 115, 22, 0.35);
    transition: transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.15s ease;
}

    .btn-primary:hover[b-0p6ap7fhrx] {
        transform: translateY(-2px);
        box-shadow: 0 5px 15px rgba(6, 182, 212, 0.4);
    }

.btn-outline-secondary[b-0p6ap7fhrx] {
    /*border: 2px solid #64748b;*/
    border-radius: 12px;
    padding: 0.6rem 1.3rem;
    background: white;
    color: #64748b;
    font-weight: 600;
    font-size: 0.85rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.45rem;
    box-shadow: 0 4px 0 #094554, 0 6px 18px rgba(249, 115, 22, 0.35);
    transition: transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.15s ease;
    /*transition: all 0.3s ease;*/
}

    .btn-outline-secondary:hover[b-0p6ap7fhrx] {
        background: #64748b;
        color: white;
        transform: translateY(-2px);
    }

.btn:disabled[b-0p6ap7fhrx] {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

/* Submit Section */
.submit-section[b-0p6ap7fhrx] {
    text-align: center;
    padding: 30px 0;
    background: #f8fafc;
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
}

    .submit-section .d-flex[b-0p6ap7fhrx] {
        justify-content: center;
        align-items: center;
        gap: 15px;
    }
/* Alerts */
.alert[b-0p6ap7fhrx] {
    border-radius: 10px;
    margin-bottom: 20px;
    animation: slideDown-b-0p6ap7fhrx 0.3s ease-out;
}

.alert-success[b-0p6ap7fhrx] {
    background: #dcfce7;
    border-color: #22c55e;
    color: #166534;
}

.alert-danger[b-0p6ap7fhrx] {
    background: #fef2f2;
    border-color: #ef4444;
    color: #dc2626;
}

.alert .btn-close[b-0p6ap7fhrx] {
    background: none;
    border: none;
    font-size: 1.2rem;
    opacity: 0.6;
    cursor: pointer;
}

    .alert .btn-close:hover[b-0p6ap7fhrx] {
        opacity: 1;
    }

/* Loading Overlay */
.loading-overlay[b-0p6ap7fhrx] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

.loading-content[b-0p6ap7fhrx] {
    background: white;
    padding: 30px;
    border-radius: 15px;
    text-align: center;
    color: #1e293b;
}

.spinner-border[b-0p6ap7fhrx] {
    color: #06b6d4;
}

/* Form Group */
.form-group[b-0p6ap7fhrx] {
    /*margin-bottom: 20px;*/
}

/* Row and Column spacing */
.row[b-0p6ap7fhrx] {
    margin: 0 -10px;
}

.col-md-6[b-0p6ap7fhrx] {
    padding: 0 10px;
}

/* Validation Messages */
.validation-message[b-0p6ap7fhrx] {
    color: #dc2626;
    font-size: 0.875rem;
    margin-top: 5px;
}

/* Icons */
.fas[b-0p6ap7fhrx] {
    color: inherit;
}

/* Rating Section Specific */
.rating-section[b-0p6ap7fhrx] {
    padding: 20px;
    background: #f8fafc;
    border-radius: 10px;
    text-align: center;
    border: 2px solid #e2e8f0;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .feedback-container[b-0p6ap7fhrx] {
        margin: 10px;
        max-width: none;
    }

    .feedback-header[b-0p6ap7fhrx] {
        padding: 30px 20px;
    }

        .feedback-header h2[b-0p6ap7fhrx] {
            font-size: 1.6rem;
        }

    .feedback-card[b-0p6ap7fhrx] {
        padding: 20px;
        margin-bottom: 20px;
    }

    .checkbox-grid[b-0p6ap7fhrx] {
        grid-template-columns: 1fr;
    }

    .star-rating .star[b-0p6ap7fhrx] {
        font-size: 1.5rem;
    }

    .submit-section .d-flex[b-0p6ap7fhrx] {
        flex-direction: column;
        gap: 15px;
    }

    .btn-lg[b-0p6ap7fhrx] {
        width: auto;
        margin-bottom: 10px;
    }

    .col-md-6[b-0p6ap7fhrx] {
        margin-bottom: 15px;
    }

    .submit-section[b-0p6ap7fhrx] {
        margin: 0 -20px -20px -20px;
    }
}

@media (max-width: 576px) {
    .feedback-header[b-0p6ap7fhrx] {
        padding: 20px 15px;
    }

    .feedback-card[b-0p6ap7fhrx] {
        padding: 15px;
        margin-bottom: 15px;
    }

    .submit-section[b-0p6ap7fhrx] {
        margin: 0 -15px -15px -15px;
        padding: 20px 15px;
    }
}

/* Animations */
@keyframes slideDown-b-0p6ap7fhrx {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }

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

@keyframes spin-b-0p6ap7fhrx {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.fa-spinner.fa-spin[b-0p6ap7fhrx] {
    animation: spin-b-0p6ap7fhrx 1s linear infinite;
}

/* Accessibility */
.star:focus[b-0p6ap7fhrx],
.checkbox-item:focus-within[b-0p6ap7fhrx],
.btn:focus[b-0p6ap7fhrx] {
    outline: 2px solid #06b6d4;
    outline-offset: 2px;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .feedback-card[b-0p6ap7fhrx] {
        border: 2px solid #000;
    }

    .star.active[b-0p6ap7fhrx] {
        color: #000;
        background: #06b6d4;
    }

    .btn-primary[b-0p6ap7fhrx] {
        background: #000;
        border-color: #000;
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    *[b-0p6ap7fhrx] {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* Print styles */
@media print {
    .feedback-container[b-0p6ap7fhrx] {
        box-shadow: none;
    }

    .feedback-header[b-0p6ap7fhrx] {
        background: #f8f9fa !important;
        color: #000 !important;
    }

    .btn[b-0p6ap7fhrx],
    .loading-overlay[b-0p6ap7fhrx] {
        display: none !important;
    }

    .feedback-card[b-0p6ap7fhrx] {
        border: 1px solid #000;
        break-inside: avoid;
    }
}
/* /Pages/TermsOfService.razor.rz.scp.css */
.terms-container[b-0w0fow6ktv] {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
    color: #1e293b;
    background: white;
    border-radius: 10px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
}

.terms-header[b-0w0fow6ktv] {
    background: linear-gradient(155deg, #000000b8 0%, #833a1ea8 100%);
    color: #ffde59;
    padding: 30px;
    border-radius: 10px 10px 0 0;
    margin: -20px -20px 30px -20px;
    text-align: center;
}

    .terms-header h4[b-0w0fow6ktv] {
        font-size: 1.8rem;
        font-weight: 600;
        margin-bottom: 8px;
    }

    .terms-header p[b-0w0fow6ktv] {
        font-size: 1rem;
        opacity: 0.9;
        margin-bottom: 5px;
    }


.terms-content[b-0w0fow6ktv] {
    padding: 0 20px 20px;
}

.terms-section[b-0w0fow6ktv] {
    margin-bottom: 35px;
}

    .terms-section h2[b-0w0fow6ktv] {
        color: #f97316;
        font-size: 1.6rem;
        margin-bottom: 15px;
        padding-bottom: 10px;
        border-bottom: 2px solid #e2e8f0;
        font-weight: 600;
    }

    .terms-section h3[b-0w0fow6ktv] {
        color: #f97316;
        font-size: 1.2rem;
        margin: 20px 0 10px;
        font-weight: 600;
    }

    .terms-section p[b-0w0fow6ktv] {
        font-size: 1rem;
        line-height: 1.8;
        color: #475569;
        margin-bottom: 15px;
    }

    .terms-section ul[b-0w0fow6ktv] {
        margin: 15px 0;
        padding-left: 25px;
    }

    .terms-section li[b-0w0fow6ktv] {
        font-size: 1rem;
        line-height: 1.8;
        color: #475569;
        margin-bottom: 10px;
    }

        .terms-section li strong[b-0w0fow6ktv] {
            color: #1e293b;
        }

    .terms-section a[b-0w0fow6ktv] {
        color: #06b6d4;
        text-decoration: none;
        font-weight: 500;
    }

        .terms-section a:hover[b-0w0fow6ktv] {
            text-decoration: underline;
        }

.contact-details[b-0w0fow6ktv] {
    background: #f8fafc;
    padding: 20px;
    border-radius: 8px;
    border-left: 4px solid #06b6d4;
    margin-top: 15px;
}

    .contact-details p[b-0w0fow6ktv] {
        margin: 8px 0;
        font-size: 0.95rem;
    }

.acknowledgment[b-0w0fow6ktv] {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    padding: 25px;
    border-radius: 10px;
    border-left: 4px solid #f59e0b;
}

    .acknowledgment h2[b-0w0fow6ktv] {
        color: #92400e;
        border-bottom: none;
    }

    .acknowledgment p[b-0w0fow6ktv] {
        color: #78350f;
        font-weight: 600;
        font-size: 1.05rem;
        margin: 0;
    }

@media (max-width: 768px) {
    .terms-container[b-0w0fow6ktv] {
        padding: 15px;
        margin: 10px;
    }

    .terms-header[b-0w0fow6ktv] {
        padding: 20px;
        margin: -15px -15px 20px -15px;
    }

        .terms-header h1[b-0w0fow6ktv] {
            font-size: 1.8rem;
        }

    .last-updated[b-0w0fow6ktv] {
        font-size: 0.85rem;
    }

    .terms-content[b-0w0fow6ktv] {
        padding: 0 10px 15px;
    }

    .terms-section h2[b-0w0fow6ktv] {
        font-size: 1.3rem;
    }

    .terms-section h3[b-0w0fow6ktv] {
        font-size: 1.1rem;
    }

    .terms-section p[b-0w0fow6ktv],
    .terms-section li[b-0w0fow6ktv] {
        font-size: 0.95rem;
    }
}

@media (max-width: 480px) {
    .terms-container[b-0w0fow6ktv] {
        margin: 5px;
        padding: 10px;
    }

    .terms-header h1[b-0w0fow6ktv] {
        font-size: 1.5rem;
    }

    .terms-section h2[b-0w0fow6ktv] {
        font-size: 1.2rem;
    }
}