/* ═══════════════════════════════════════════════
   JASA V2 — Profile Page
   Matches index.html design system exactly:
   same radius, shadows, borders, text scale,
   spacing, and colour tokens from styles.css
   ═══════════════════════════════════════════════ */

/* ── Hero banner (mirrors .banner-section palette) ── */
.pf-hero {
    margin: 14px 14px 0;
    background: linear-gradient(135deg, #0f2d80 0%, #1a55d4 55%, #3a9eff 100%);
    border-radius: var(--r);
    padding: 24px 20px 20px;
    color: #fff;
    position: relative;
    overflow: hidden;
}
/* decorative bubbles — same as .bb in index */
.pf-hero::before {
    content: '';
    position: absolute;
    top: -60px; right: -60px;
    width: 220px; height: 220px;
    border-radius: 50%;
    background: rgba(255,255,255,.07);
    pointer-events: none;
}
.pf-hero::after {
    content: '';
    position: absolute;
    bottom: -80px; left: -50px;
    width: 200px; height: 200px;
    border-radius: 50%;
    background: rgba(255,255,255,.05);
    pointer-events: none;
}

/* Avatar circle — mirrors header .header-avatar-wrap exactly, scaled up */
.pf-hero-avatar {
    width: 72px; height: 72px;
    border-radius: 50%;
    border: 3px solid var(--av-color, #2D8CF0);
    background: var(--av-bg, #e8f2fe);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    position: relative; z-index: 2;
    margin-bottom: 14px;
    animation: pfAvatarPing 2.4s ease-in-out infinite;
    transition: transform .2s ease;
}
.pf-hero-avatar:hover {
    transform: scale(1.06);
    animation: none;
}
@keyframes pfAvatarPing {
    0%, 100% { box-shadow: 0 0 0 0   color-mix(in srgb, var(--av-color, #2D8CF0) 40%, transparent); }
    50%       { box-shadow: 0 0 0 8px color-mix(in srgb, var(--av-color, #2D8CF0) 0%,  transparent); }
}

.pf-hero-avatar-icon {
    font-size: 1.9rem;
    color: var(--av-color, #2D8CF0);
    pointer-events: none;
}

.pf-hero-info {
    position: relative; z-index: 2;
    margin-bottom: 16px;
}
.pf-hero-name {
    font-size: 1.3rem; font-weight: 900;
    color: #fff;
    letter-spacing: -.3px;
    margin-bottom: 3px;
}
.pf-hero-email {
    font-size: .75rem; font-weight: 500;
    color: rgba(255,255,255,.82);
    margin-bottom: 8px;
}
/* role badge — mirrors .banner-chip */
.pf-hero-badge {
    display: inline-flex; align-items: center; gap: 5px;
    background: rgba(255,255,255,.18);
    backdrop-filter: blur(6px);
    color: #fff;
    font-size: .65rem; font-weight: 700; letter-spacing: .5px;
    padding: 4px 12px; border-radius: 50px;
    text-transform: uppercase;
}

.pf-hero-meta {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    position: relative; z-index: 2;
    padding-top: 14px;
    border-top: 1px solid rgba(255,255,255,.15);
}
.pf-meta-item { display: flex; flex-direction: column; gap: 3px; }
.pf-meta-label {
    font-size: .6rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .5px;
    color: rgba(255,255,255,.55);
}
.pf-meta-val {
    font-size: .82rem; font-weight: 800;
    color: rgba(255,255,255,.92);
    letter-spacing: .2px;
}

/* ════════════════════════════════
   SECTION CARDS
   Matches .service-card / track-card look
   ════════════════════════════════ */
.pf-card {
    background: var(--bg-white);
    border: 1.5px solid var(--border);
    border-radius: var(--r);
    margin: 12px 14px 0;
    overflow: hidden;
    transition: box-shadow var(--ease), border-color var(--ease);
}
.pf-card:hover {
    box-shadow: var(--sh-md);
    border-color: var(--border2);
}

/* Card header — same pattern as .section-header */
.pf-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 16px 13px;
    border-bottom: 1px solid var(--border);
}
.pf-card-title {
    font-size: 1.05rem; font-weight: 800;
    color: var(--txt1);
    letter-spacing: -.2px;
    margin-bottom: 2px;
}
.pf-card-sub {
    font-size: .72rem; font-weight: 600;
    color: var(--txt3);
}

.pf-card-body { padding: 4px 16px 14px; }

/* ── Info rows ── */
.pf-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 11px 0;
    border-bottom: 1px solid var(--border);
    gap: 12px;
}
.pf-row:last-child { border-bottom: none; }

.pf-row-label {
    font-size: .74rem; font-weight: 700;
    color: var(--txt3);
    text-transform: uppercase; letter-spacing: .3px;
    flex-shrink: 0;
}
.pf-row-val {
    font-size: .88rem; font-weight: 700;
    color: var(--txt1);
    text-align: right;
    word-break: break-all;
}
.pf-muted  { color: var(--txt3) !important; font-weight: 600 !important; }
.text-cap  { text-transform: capitalize; }

/* ── Ghost action button — mirrors .section-view-all feel ── */
.pf-btn-ghost {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 6px 13px;
    border: 1.5px solid var(--border2);
    border-radius: var(--r-xs);
    background: none;
    font-size: .76rem; font-weight: 700;
    color: var(--txt2);
    cursor: pointer;
    white-space: nowrap;
    font-family: inherit;
    transition: border-color var(--ease), color var(--ease), background var(--ease);
}
.pf-btn-ghost:hover {
    border-color: var(--primary);
    color: var(--primary);
    background: var(--primary-faint);
}

/* Danger variant (Logout) */
.pf-btn-danger { color: #ef4444; border-color: #fecaca; }
.pf-btn-danger:hover { border-color: #ef4444; background: #fee2e2; color: #ef4444; }

/* ════════════════════════════════
   EDIT FORM — mirrors track-input / track-btn
   ════════════════════════════════ */
.pf-field        { margin-bottom: 12px; }
.pf-field:last-child { margin-bottom: 0; }

.pf-label {
    display: block;
    font-size: .68rem; font-weight: 700;
    color: var(--txt3);
    text-transform: uppercase; letter-spacing: .3px;
    margin-bottom: 5px;
}

/* Input — same tokens as .track-input */
.pf-input {
    width: 100%;
    height: 46px;
    padding: 0 14px;
    border: 1.5px solid var(--border2);
    border-radius: var(--r-sm);
    font-size: .88rem; font-weight: 600;
    color: var(--txt1);
    background: var(--bg-white);
    outline: none;
    font-family: inherit;
    transition: border-color var(--ease), box-shadow var(--ease);
}
.pf-input:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(45,140,240,.1);
}
.pf-input::placeholder { color: var(--txt3); font-weight: 500; }

/* ── Alt mobile tags ── */
.pf-tags-wrap {
    display: flex; flex-wrap: wrap; gap: 6px;
    min-height: 22px;
    margin-bottom: 8px;
}
.pf-tag {
    display: inline-flex; align-items: center; gap: 5px;
    background: var(--primary-faint);
    border: 1px solid var(--primary-light);
    color: var(--primary);
    border-radius: 50px;
    padding: 3px 11px;
    font-size: .75rem; font-weight: 700;
}
.pf-tag-remove {
    cursor: pointer; opacity: .55;
    background: none; border: none;
    color: inherit; font-size: .6rem; padding: 0;
    transition: opacity var(--ease), color var(--ease);
}
.pf-tag-remove:hover { opacity: 1; color: #ef4444; }

.pf-tag-row              { display: flex; gap: 8px; }
.pf-tag-row .pf-input    { flex: 1; }

/* Add button — mirrors .track-btn */
.pf-btn-add {
    height: 46px; padding: 0 16px;
    background: var(--primary); color: #fff;
    border: none; border-radius: var(--r-sm);
    font-size: .8rem; font-weight: 800;
    cursor: pointer; white-space: nowrap;
    font-family: inherit;
    transition: background var(--ease), transform var(--ease);
}
.pf-btn-add:hover { background: var(--primary-dark); transform: scale(1.02); }

/* Two-column field row */
.pf-field-row {
    display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
    margin-bottom: 12px;
}
.pf-field-row .pf-field { margin-bottom: 0; }

/* Save / Cancel pair — mirrors .banner-cta height */
.pf-actions { display: flex; gap: 8px; margin-top: 16px; }

.pf-btn-cancel {
    flex: 1; height: 46px;
    background: var(--bg); color: var(--txt2);
    border: 1.5px solid var(--border2);
    border-radius: var(--r-sm);
    font-size: .88rem; font-weight: 700;
    cursor: pointer; font-family: inherit;
    transition: background var(--ease), border-color var(--ease);
}
.pf-btn-cancel:hover { background: var(--border); border-color: var(--border2); }

.pf-btn-save {
    flex: 1; height: 46px;
    background: var(--primary); color: #fff;
    border: none; border-radius: var(--r-sm);
    font-size: .88rem; font-weight: 800;
    cursor: pointer; font-family: inherit;
    display: flex; align-items: center; justify-content: center; gap: 7px;
    box-shadow: 0 4px 16px rgba(45,140,240,.35);
    transition: background var(--ease), transform var(--ease), box-shadow var(--ease);
}
.pf-btn-save:hover:not(:disabled) {
    background: var(--primary-dark);
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(45,140,240,.45);
}
.pf-btn-save:disabled { opacity: .5; cursor: not-allowed; box-shadow: none; }

/* ════════════════════════════════
   ADDRESS FORM & CARDS
   ════════════════════════════════ */
.pf-addr-form {
    margin-top: 12px;
    background: var(--bg);
    border: 1.5px solid var(--border);
    border-radius: var(--r-sm);
    padding: 14px 16px;
}
.pf-addr-form-title {
    font-size: .82rem; font-weight: 800;
    color: var(--txt1); margin-bottom: 14px;
}

/* Address card — same as .service-card hover feel */
.pf-addr-card {
    border: 1.5px solid var(--border);
    border-radius: var(--r-sm);
    padding: 12px 14px;
    margin-bottom: 8px;
    background: var(--bg-white);
    transition: box-shadow var(--ease), border-color var(--ease), transform var(--ease);
}
.pf-addr-card:hover {
    box-shadow: var(--sh-sm);
    border-color: var(--primary);
    transform: translateY(-1px);
}
.pf-addr-card:last-child { margin-bottom: 0; }

.pf-addr-pill {
    display: inline-flex; align-items: center; gap: 5px;
    background: var(--primary-faint);
    color: var(--primary);
    border-radius: 50px;
    padding: 2px 10px;
    font-size: .68rem; font-weight: 700;
    margin-bottom: 6px;
}
.pf-addr-street {
    font-size: .88rem; font-weight: 800;
    color: var(--txt1); margin-bottom: 2px;
}
.pf-addr-detail {
    font-size: .74rem; font-weight: 600;
    color: var(--txt3);
}
.pf-addr-actions  { display: flex; gap: 8px; margin-top: 10px; }

.pf-addr-btn {
    padding: 4px 11px;
    border: 1.5px solid var(--border2);
    border-radius: var(--r-xs);
    background: none;
    font-size: .72rem; font-weight: 700;
    cursor: pointer; font-family: inherit;
    display: inline-flex; align-items: center; gap: 4px;
    transition: border-color var(--ease), color var(--ease), background var(--ease);
}
.pf-addr-btn.edit        { color: var(--primary); }
.pf-addr-btn.edit:hover  { border-color: var(--primary); background: var(--primary-faint); }
.pf-addr-btn.del         { color: #ef4444; }
.pf-addr-btn.del:hover   { border-color: #ef4444; background: #fee2e2; }

/* Empty state */
.pf-empty {
    text-align: center;
    font-size: .78rem; font-weight: 600;
    color: var(--txt3);
    padding: 10px 0 4px; margin: 0;
}

/* ════════════════════════════════
   TOAST — same position as .banner-cta pulse
   ════════════════════════════════ */
.pf-toast {
    position: fixed;
    bottom: calc(var(--bnh) + 14px);
    left: 50%; transform: translateX(-50%) translateY(16px);
    background: var(--txt1); color: var(--bg-white);
    padding: 10px 22px;
    border-radius: 50px;
    font-size: .82rem; font-weight: 700;
    white-space: nowrap;
    opacity: 0; pointer-events: none;
    z-index: 2000;
    box-shadow: var(--sh-md);
    transition: opacity .22s ease, transform .22s ease;
}
.pf-toast.show   { opacity: 1; transform: translateX(-50%) translateY(0); }
.pf-toast.success { background: #16a34a; }
.pf-toast.error   { background: #dc2626; }
.pf-toast.info    { background: var(--primary); }

/* ════════════════════════════════
   CONFIRM OVERLAY — matches login.css overlay style
   ════════════════════════════════ */
.pf-overlay {
    position: fixed; inset: 0;
    background: rgba(0,0,0,.5);
    backdrop-filter: blur(6px);
    z-index: 1800;
    display: flex; align-items: center; justify-content: center;
    padding: 20px;
    opacity: 0; pointer-events: none;
    transition: opacity var(--ease);
}
.pf-overlay.active { opacity: 1; pointer-events: all; }

.pf-dialog {
    background: var(--bg-white);
    border: 1.5px solid var(--border);
    border-radius: 24px;
    padding: 28px 24px;
    width: 100%; max-width: 340px;
    text-align: center;
    transform: scale(.94);
    transition: transform var(--ease);
    box-shadow: var(--sh-lg);
}
.pf-overlay.active .pf-dialog { transform: scale(1); }

.pf-dialog-icon {
    width: 52px; height: 52px;
    border-radius: var(--r-sm);
    background: var(--primary-faint); color: var(--primary);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.3rem; margin: 0 auto 14px;
}
.pf-dialog-icon.danger { background: #fee2e2; color: #dc2626; }

.pf-dialog-title {
    font-size: 1.05rem; font-weight: 800;
    color: var(--txt1); margin-bottom: 5px;
}
.pf-dialog-msg {
    font-size: .8rem; font-weight: 600;
    color: var(--txt2); margin-bottom: 20px;
    line-height: 1.5;
}
.pf-dialog-actions { display: flex; gap: 8px; }

/* ── Loading spinner ── */
.pf-spin {
    width: 16px; height: 16px;
    border: 2px solid rgba(255,255,255,.35);
    border-top-color: #fff;
    border-radius: 50%;
    animation: pfSpin .6s linear infinite;
    flex-shrink: 0;
}
@keyframes pfSpin { to { transform: rotate(360deg); } }

/* ════════════════════════════════
   RESPONSIVE — mirrors index breakpoints
   ════════════════════════════════ */
/* ── Profile wrap — narrows content on wider screens ── */
.pf-wrap { max-width: 560px; }

@media (min-width: 600px) {
    .pf-wrap  { padding: 0 8px 8px; }
    .pf-hero  { margin: 16px 0 0; }
    .pf-card  { margin: 12px 0 0; }
    .pf-card-head { padding: 18px 20px 14px; }
    .pf-card-body { padding: 4px 20px 16px; }
}

@media (max-width: 480px) {
    .pf-hero      { margin: 10px 12px 0; padding: 18px 16px 16px; }
    .pf-card      { margin: 10px 12px 0; }
    .pf-field-row { grid-template-columns: 1fr; }
}