/* ===================================================================
   PetAware – Pet Onboarding Flow
   Modern, polished wizard for first-time pet setup
   =================================================================== */

/* ---------- Animations ---------- */
@keyframes onboard-fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes onboard-slideUp {
    from { opacity: 0; transform: translateY(32px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes onboard-slideInRight {
    from { opacity: 0; transform: translateX(24px); }
    to   { opacity: 1; transform: translateX(0); }
}

@keyframes onboard-pulse {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.06); }
}

/* ---------- Overlay ---------- */
.onboarding-overlay {
    position: fixed;
    inset: 0;
    background: linear-gradient(160deg, rgba(102,126,234,.12) 0%, rgba(0,0,0,.55) 100%);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    animation: onboard-fadeIn .35s ease-out;
    padding: 20px;
}

/* ---------- Container ---------- */
.onboarding-container {
    width: 100%;
    max-width: 880px;
    max-height: 92vh;
    animation: onboard-slideUp .45s cubic-bezier(.25,.46,.45,.94);
}

/* ---------- Card ---------- */
.onboarding-card {
    border-radius: 24px !important;
    box-shadow: 0 24px 64px rgba(0,0,0,.22) !important;
    border: none !important;
    background: #ffffff !important;
    overflow: hidden;
}

/* ---------- Header ---------- */
.onboarding-header {
    background: linear-gradient(135deg, #4FD0CB 0%, #3A8F8A 100%) !important;
    border-bottom: none !important;
    padding: 44px 40px 36px !important;
    position: relative;
    overflow: hidden;
}

.onboarding-header::before {
    content: '';
    position: absolute;
    inset: 0;
    background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none'%3E%3Cg fill='%23ffffff' fill-opacity='.05'%3E%3Ccircle cx='30' cy='30' r='4'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    opacity: .3;
}

.header-content {
    text-align: center;
    max-width: 560px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

.header-icon {
    width: 76px;
    height: 76px;
    margin: 0 auto 18px;
    background: rgba(255,255,255,.18) !important;
    border: 2px solid rgba(255,255,255,.28);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white !important;
    box-shadow: 0 8px 28px rgba(0,0,0,.12);
    animation: onboard-pulse 2.5s ease-in-out infinite;
}

.onboarding-header .mud-typography-h4 {
    color: white !important;
    font-weight: 700 !important;
    margin-bottom: 10px !important;
    text-shadow: 0 2px 6px rgba(0,0,0,.1);
    font-size: 1.75rem !important;
}

.onboarding-header .mud-typography-body1 {
    color: rgba(255,255,255,.88) !important;
    font-size: 15px !important;
    line-height: 1.55 !important;
}

/* ---------- Content ---------- */
.onboarding-content {
    padding: 36px 40px !important;
    background: #fff !important;
    max-height: 56vh;
    overflow-y: auto;
    scroll-behavior: smooth;
}

.onboarding-content::-webkit-scrollbar { width: 5px; }
.onboarding-content::-webkit-scrollbar-track { background: #f4f5f6; border-radius: 3px; }
.onboarding-content::-webkit-scrollbar-thumb { background: #dadce0; border-radius: 3px; }
.onboarding-content::-webkit-scrollbar-thumb:hover { background: #b0b5bc; }

/* ---------- Step Progress (numbered) ---------- */
.step-progress {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 0;
    margin-bottom: 36px;
    padding: 0 8px;
}

.step-indicator {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    position: relative;
    flex: 1;
    max-width: 140px;
    cursor: default;
}

.step-indicator.completed {
    cursor: pointer;
}

.step-indicator .step-dot {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #e8eaed;
    color: #80868b;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 14px;
    transition: all .25s ease;
    position: relative;
    z-index: 1;
    border: 2px solid transparent;
}

.step-indicator.active .step-dot {
    background: #4FD0CB;
    color: #fff;
    border-color: rgba(79,208,203,.25);
    box-shadow: 0 0 0 4px rgba(79,208,203,.15);
    transform: scale(1.1);
}

.step-indicator.completed .step-dot {
    background: #34a853;
    color: #fff;
    border-color: rgba(52,168,83,.2);
}

.step-indicator .step-label {
    font-size: 11px;
    font-weight: 500;
    color: #80868b;
    text-align: center;
    transition: color .25s ease;
    white-space: nowrap;
}

.step-indicator.active .step-label {
    color: #4FD0CB;
    font-weight: 600;
}

.step-indicator.completed .step-label {
    color: #34a853;
}

/* Connector line between steps */
.step-indicator:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 18px;
    left: calc(50% + 22px);
    width: calc(100% - 44px);
    height: 2px;
    background: #e8eaed;
    transition: background .3s ease;
}

.step-indicator.completed:not(:last-child)::after {
    background: #34a853;
}

/* ---------- Content Section ---------- */
.content-section {
    animation: onboard-slideInRight .3s ease-out;
}

.section-header {
    margin-bottom: 28px;
    text-align: center;
}

.section-header .mud-typography-h6 {
    margin-bottom: 6px !important;
    font-weight: 600 !important;
}

.section-header .mud-typography-body2 {
    color: #5f6368 !important;
    font-size: 14px !important;
}

/* ---------- Form ---------- */
.form-grid {
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

/* Enhanced MudBlazor input styling */
.onboarding-content .mud-input-control {
    border-radius: 12px !important;
}

.onboarding-content .mud-input-filled .mud-input-slot {
    border-radius: 12px 12px 0 0 !important;
}

/* ---------- Image Upload ---------- */
.image-upload-section {
    margin-top: 8px;
    padding: 24px;
    background: #f8f9fa;
    border-radius: 16px;
    border: 2px dashed #dadce0;
    transition: all .25s ease;
}

.image-upload-section:hover {
    border-color: #4FD0CB;
    background: #E6FAF9;
}

.image-upload-container {
    text-align: center;
}

.image-preview-wrapper {
    position: relative;
    display: inline-block;
}

.image-preview {
    width: 140px !important;
    height: 140px !important;
    border-radius: 16px !important;
    object-fit: cover !important;
    box-shadow: 0 8px 24px rgba(0,0,0,.12) !important;
}

.image-remove-btn {
    position: absolute !important;
    top: -10px;
    right: -10px;
    background: white !important;
    box-shadow: 0 2px 10px rgba(0,0,0,.18) !important;
    width: 28px !important;
    height: 28px !important;
}

.image-upload-placeholder {
    padding: 28px !important;
    background: transparent !important;
    text-align: center;
}

.upload-button {
    border-radius: 12px !important;
    padding: 10px 22px !important;
    transition: all .25s ease !important;
}

.upload-button:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(26,115,232,.25) !important;
}

/* ---------- Info Card ---------- */
.info-card {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 20px 24px;
    background: linear-gradient(135deg, #E6FAF9 0%, #f1f8e9 100%);
    border-radius: 14px;
    border: 1px solid #B8F0ED;
    transition: transform .2s ease;
}

.info-card:hover {
    transform: translateY(-2px);
}

.info-icon {
    color: #3AB0A8 !important;
    margin-top: 2px;
    flex-shrink: 0;
}

.info-content {
    flex: 1;
}

/* ---------- Review Card ---------- */
.review-card {
    background: linear-gradient(135deg, #fafafa 0%, #fff 100%);
    border-radius: 20px;
    padding: 28px;
    margin-bottom: 20px;
    border: 1px solid #e8eaed;
    box-shadow: 0 2px 12px rgba(0,0,0,.04);
}

.review-header {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 24px;
    padding-bottom: 20px;
    border-bottom: 2px solid #f1f3f4;
}

.pet-avatar {
    width: 72px;
    height: 72px;
    min-width: 72px;
    background: linear-gradient(135deg, #4FD0CB 0%, #3A8F8A 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    box-shadow: 0 6px 20px rgba(79,208,203,.3);
    overflow: hidden;
}

.pet-info {
    flex: 1;
    min-width: 0;
}

.review-details {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.review-item {
    display: flex;
    flex-direction: column;
    padding: 14px 16px;
    background: #fff;
    border-radius: 12px;
    border: 1px solid #f1f3f4;
    transition: all .2s ease;
}

.review-item:hover {
    border-color: #c5cae9;
    box-shadow: 0 2px 8px rgba(26,115,232,.08);
}

.item-label {
    font-size: 11px;
    color: #80868b;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .6px;
    margin-bottom: 4px;
}

.item-value {
    font-size: 15px;
    color: #202124;
    font-weight: 500;
    word-break: break-word;
}

/* ---------- Success Card ---------- */
.success-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 20px 24px;
    background: linear-gradient(135deg, #e8f5e9 0%, #f1f8e9 100%);
    border-radius: 14px;
    border: 1px solid #c8e6c9;
}

.success-icon {
    color: #2e7d32 !important;
    flex-shrink: 0;
}

.success-content {
    flex: 1;
}

/* ---------- Review Edit Links ---------- */
.review-edit-links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid #f1f3f4;
    justify-content: center;
}

.review-edit-links .mud-button {
    border-radius: 10px !important;
    text-transform: none !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    letter-spacing: 0 !important;
}

/* ---------- Actions Footer ---------- */
.onboarding-actions {
    padding: 24px 40px !important;
    background: #f8f9fa !important;
    border-top: 1px solid #e8eaed !important;
    display: flex;
    align-items: center;
}

.step-counter {
    margin-right: 16px;
    white-space: nowrap;
}

.onboarding-actions .mud-button {
    border-radius: 12px !important;
    font-weight: 600 !important;
    transition: all .2s ease !important;
}

.onboarding-actions .next-btn,
.onboarding-actions .create-btn {
    padding: 10px 28px !important;
}

.onboarding-actions .mud-button:hover:not(:disabled) {
    transform: translateY(-1px) !important;
}

.onboarding-actions .create-btn {
    box-shadow: 0 4px 16px rgba(46,125,50,.25) !important;
}

.onboarding-actions .create-btn:hover:not(:disabled) {
    box-shadow: 0 6px 24px rgba(46,125,50,.35) !important;
}

/* ---------- Focus / Accessibility ---------- */
.onboarding-overlay:focus {
    outline: none;
}

.onboarding-content .mud-input-control:focus-within {
    box-shadow: 0 0 0 2px rgba(26,115,232,.2);
    border-radius: 12px;
}

/* ---------- MudSelect / Popover styling for onboarding ---------- */
.onboarding-overlay .mud-popover .mud-paper,
.onboarding-overlay .mud-select-popover .mud-paper {
    background: white !important;
    border-radius: 12px !important;
    box-shadow: 0 8px 32px rgba(0,0,0,.14) !important;
}

.onboarding-overlay .mud-list-item {
    margin: 0 6px !important;
    border-radius: 8px !important;
    transition: background .15s ease !important;
}

.onboarding-overlay .mud-list-item:hover {
    background: #f4f6f8 !important;
}

/* ---------- Responsive ---------- */
@media (max-width: 768px) {
    .onboarding-overlay { padding: 12px; }
    .onboarding-container { max-height: 96vh; }
    .onboarding-header { padding: 28px 20px 24px !important; }
    .onboarding-header .mud-typography-h4 { font-size: 1.35rem !important; }
    .onboarding-content { padding: 24px 20px !important; max-height: 60vh; }
    .onboarding-actions { padding: 20px !important; }
    .header-icon { width: 60px; height: 60px; }
    .form-row { grid-template-columns: 1fr; gap: 16px; }
    .review-details { grid-template-columns: 1fr; }

    /* Step labels hidden on small screens */
    .step-indicator .step-label { display: none; }
    .step-indicator .step-dot { width: 32px; height: 32px; font-size: 13px; }
    .step-indicator:not(:last-child)::after {
        left: calc(50% + 18px);
        width: calc(100% - 36px);
        top: 16px;
    }
}

@media (max-width: 480px) {
    .onboarding-overlay { padding: 8px; }
    .onboarding-card { border-radius: 16px !important; }
    .onboarding-header { padding: 20px 16px 18px !important; }
    .onboarding-content { padding: 20px 16px !important; }
    .onboarding-actions {
        padding: 16px !important;
        flex-wrap: wrap;
        gap: 10px;
    }
    .step-counter { display: none; }
    .pet-avatar { width: 56px; height: 56px; min-width: 56px; }
    .review-card { padding: 20px; }
    .image-preview { width: 110px !important; height: 110px !important; }
}