/* Client Dashboard Page Styles */

/* ============================================================
   PANEL SIZING STANDARD — single source of truth for button
   padding and heading/subheading text sizes across the panel.
   Change a value here and every rule that references the token
   updates everywhere. Keep new panel buttons/titles on these.
   ============================================================ */
:root {
    --panel-title-size: 26px;       /* page heading (h1) */
    --panel-title-weight: 800;
    --panel-card-title-size: 15px;  /* card / section heading (h2) */
    --panel-card-title-weight: 700;
    --panel-subtitle-size: 14px;    /* page subtitle / muted descriptive text */
    --panel-subtitle-color: #64748b;
    --panel-btn-padding: 11px 20px; /* primary / standard button */
    --panel-btn-size: 14px;
    --panel-btn-weight: 700;
    --panel-btn-radius: 10px;
}

/* Breadcrumb — shared across panel pages (rendered by components/breadcrumb.blade.php) */
.crumbs { display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-family:var(--font-body); font-size:13px; color:var(--panel-subtitle-color); margin:0 0 6px; }
.crumbs__link { display:inline-flex; align-items:center; gap:5px; color:var(--panel-subtitle-color); text-decoration:none; transition:color .15s; }
.crumbs__link:hover { color:#0f172a; }
.crumbs__back { flex-shrink:0; }
.crumbs__sep { color:#cbd5e1; }
.crumbs__current { color:#0f172a; font-weight:600; }

/* Page Container Override */
.page-container--dashboard {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: #f8f6f2;
    overflow-x: clip;   /* clip (not hidden) so position:sticky still works */
}

/* White Header Override — dashboard header is not fixed */
.header.header--white {
    position: relative;
    z-index: auto;
    flex-shrink: 0;
}

/* Header — logo + nav grouped with even, natural spacing (no oversized
   sidebar-width reservation that left a big empty gap before the first link). */
/* Same left/right gutter as the public header, so the brand name does not jump
   sideways when a visitor signs in. Token lives in styles.css :root. */
.page-container--dashboard .header { padding: 12px var(--page-gutter); }
.page-container--dashboard .header__left { gap: 36px; }
/* Logo: match homepage size/spacing exactly; just don't let it squish. */
.page-container--dashboard .logo { flex-shrink: 0; }
.page-container--dashboard .header__left .nav { margin-left: 0; }

/* Dashboard Layout — full-width with left-anchored sidebar */
.dashboard-layout {
    flex: 1;
    display: flex;
    justify-content: flex-start;
    padding: 0;
    overflow-x: clip;   /* clip so the sticky sidebar inside isn't trapped */
}

.dashboard-container {
    display: flex;
    gap: 0;
    max-width: none;
    width: 100%;
    min-width: 0;
    align-items: stretch;
}

/* Sidebar */
.dashboard-sidebar {
    /* 240px of rail + the page gutter, so the nav column lines up under the
       brand name in the header instead of starting 28px to its left. */
    width: calc(240px + var(--page-gutter) - 20px);
    min-height: calc(100vh - 80px);
    background: #fff;
    border-right: 1px solid #e5e7eb;
    padding: 28px 20px 12px var(--page-gutter);
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* Sidebar children ordering — nav on top, profile card pinned to bottom */
.dashboard-sidebar .sidebar-nav {
    order: 1;
    flex: 0 0 auto;
    padding: 0;
    background: transparent;
    border: none;
    box-shadow: none;
    gap: 4px;
}

.dashboard-sidebar .profile-card {
    order: 99;
    /* Negative margins must match the rail's own padding so the divider above
       the user card spans the full rail width. */
    margin: auto -20px 0 calc(var(--page-gutter) * -1);
    padding: 18px 20px 4px var(--page-gutter);
    border: none;
    border-top: 1px solid #e5e7eb;
    box-shadow: none;
    background: transparent;
}

.dashboard-sidebar .upgrade-card { display: none; }

/* Profile Card */
.profile-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 17px;
    background: #ffffff;
    border: 1px solid rgba(226, 232, 240, 0.6);
    border-radius: 12px;
    box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.05);
}

.profile-card__avatar {
    position: relative;
    width: 40px;
    height: 40px;
    background: rgba(255, 56, 93, 0.08);
    border-radius: 50%;          /* circle — matches the header avatar */
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    /* overflow:hidden removed — would clip the status dot. The img child
       handles its own corner rounding via border-radius:inherit below. */
}

.profile-card__avatar img,
.profile-card__avatar .user-avatar-initials {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

/* Green online-status dot — sits at the bottom-right edge of the circular avatar */
.profile-card__status {
    position: absolute;
    right: 1px;
    bottom: 1px;
    width: 10px;
    height: 10px;
    background: #22c55e;
    border: 2px solid #fff;
    border-radius: 50%;
    z-index: 1;
}

.profile-card__info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1 1 auto;
    overflow: hidden;
}

.profile-card__name {
    font-family: "Inter", sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    max-width: 100%;
}

.profile-card__role {
    font-family: "Inter", sans-serif;
    font-size: 11.5px;
    font-weight: 500;
    color: #64748b;
    line-height: 1.3;
    letter-spacing: 0.2px;
    text-transform: capitalize;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    max-width: 100%;
}

/* Sidebar Navigation */
.sidebar-nav {
    background: #ffffff;
    border: 1px solid rgba(226, 232, 240, 0.6);
    border-radius: 12px;
    padding: 17px;
    box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.05);
    display: flex;
    flex-direction: column;
}

.sidebar-nav--client {
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0;
    box-shadow: none;
}

.sidebar-nav__link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 7px 12px;
    border-radius: 8px;
    text-decoration: none;
    font-family: "Inter", sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: #64748b;
    transition: all 0.2s ease;
}

.sidebar-nav__link:hover {
    background: rgba(248, 246, 242, 0.8);
    color: #0f172a;
}

.sidebar-nav__link--active {
    background: rgba(255, 56, 93, 0.1);
    color: #ff385d;
    /* Bolder label + a rounded pink accent down the left edge so the current
       page reads at a glance, not just from the tint. */
    font-weight: 600;
    box-shadow: inset 3px 0 0 #ff385d;
}

.sidebar-nav__link--active:hover {
    background: rgba(255, 56, 93, 0.15);
    color: #ff385d;
}

.sidebar-nav__link svg {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
}

/* Upgrade Card */
.upgrade-card {
    background: #ff385d;
    border-radius: 12px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    margin-top: auto;
}

.upgrade-card__title {
    font-family: "Inter", sans-serif;
    font-size: 20px;
    font-weight: 800;
    color: #ffffff;
    line-height: 28px;
    margin: 0 0 8px 0;
}

.upgrade-card__text {
    font-family: "Inter", sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.8);
    line-height: 22px;
    margin: 0 0 24px 0;
}

.upgrade-card__btn {
    width: 100%;
    padding: 8px 16px;
    background: #ffffff;
    border: none;
    border-radius: 8px;
    font-family: "Inter", sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: #ff385d;
    cursor: pointer;
    transition: all 0.2s ease;
}

.upgrade-card__btn:hover {
    background: rgba(255, 255, 255, 0.9);
    transform: translateY(-1px);
}

/* Dashboard Content — matches dashboard.blade .dash-content */
.dashboard-content {
    flex: 1;
    min-width: 0;
    max-width: 100%;
    overflow-x: clip;            /* hard-cap so child grids/forms can't spill */
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 16px var(--page-gutter) 32px;
}

/* Dashboard Header */
.dashboard-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 24px;
}

.dashboard-header__text {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.dashboard-header__title {
    font-family: "Inter", sans-serif;
    font-size: var(--panel-title-size);
    font-weight: var(--panel-title-weight);
    color: #0f172a;
    line-height: 1.2;
    letter-spacing: -0.4px;
    margin: 0;
}

.dashboard-header__subtitle {
    font-family: "Inter", sans-serif;
    font-size: var(--panel-subtitle-size);
    font-weight: 400;
    color: var(--panel-subtitle-color);
    line-height: 20px;
    margin: 0;
}

.dashboard-header__btn {
    padding: 12px 20px;
    font-size: 14px;
    font-weight: 700;
    border-radius: 10px;
    text-decoration: none;
    box-shadow: 0 4px 12px rgba(255, 56, 93, 0.2);
}

/* Stats Grid */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}

/* Stat Card */
.stat-card {
    background: #ffffff;
    border: 1px solid rgba(226, 232, 240, 0.6);
    border-radius: 16px;
    padding: 25px;
    box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.05);
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.stat-card__icon {
    width: 44px;
    height: 44px;
    background: rgba(255, 56, 93, 0.08);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.stat-card__label {
    font-family: "Inter", sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: #64748b;
    line-height: 20px;
}

.stat-card__value {
    font-family: "Inter", sans-serif;
    font-size: 28px;
    font-weight: 800;
    color: #0f172a;
    line-height: 36px;
}

/* Button Override - reset global full-width from styles.css */
.page-container--dashboard .btn {
    width: auto;
    height: auto;
}

.page-container--dashboard .btn--primary {
    background: #ff385d;
    color: #ffffff;
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: "Inter", sans-serif;
    transition: all 0.2s ease;
}

.page-container--dashboard .btn--outline {
    background: #ffffff;
    color: #374151;
    border: 1px solid #d1d5db;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: "Inter", sans-serif;
    cursor: pointer;
    transition: all 0.2s ease;
}

.page-container--dashboard .btn--outline:hover {
    background: #f9fafb;
    border-color: #9ca3af;
}

.btn--primary:hover {
    background: #e62e53;
    transform: translateY(-1px);
}

/* Responsive */
@media (max-width: 1024px) {
    .dashboard-header {
        gap: 12px;
    }
    .dashboard-header__text { flex: 1 1 auto; min-width: 0; }
    .dashboard-header__btn {
        width: auto;
        align-self: flex-start;
        flex-shrink: 0;
    }

    /* ---- Side nav becomes an off-canvas drawer (toggled by header hamburger) ----
       The drawer itself — panel, backdrop, row order, scroll behaviour — is
       styled ONCE in styles.css ("SIDE NAV → OFF-CANVAS DRAWER"). This file
       used to carry a second, conflicting copy; it was fighting that block in
       the cascade and half-breaking the layout. Only the drawer-only Log Out
       row (which has no desktop counterpart) stays here. */
    .sidebar-logout {
        display: block;
        border-top: 1px solid #eef1f5;
    }

    .sidebar-logout__btn {
        width: 100%;
        border: none;
        background: none;
        cursor: pointer;
        color: #ef4444;
        font: inherit;
        text-align: left;
    }
}

@media (min-width: 1025px) {
    /* Desktop rail: Log Out is in the avatar dropdown, not the sidebar. */
    .sidebar-logout {
        display: none;
    }
}

@media (max-width: 768px) {
    .sidebar-nav__link {
        justify-content: flex-start;
    }

    .dashboard-content {
        padding: 12px var(--page-gutter) 20px;
    }

    .dashboard-header__title {
        font-size: var(--panel-title-size);
        line-height: 1.2;
    }

    .stats-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .stat-card__value {
        font-size: 24px;
    }
}

/* ============================================================
   Dashboard content (extracted from dashboard.blade.php)
   Used by both creator and client dashboard views.
   ============================================================ */
.dash-content { flex:1; min-width:0; display:flex; flex-direction:column; gap:20px; padding:32px var(--page-gutter); }

/* Welcome header */
.dash-hero { display:flex; align-items:flex-start; justify-content:space-between; gap:24px; }
.dash-hero__title { font-family:'Inter',sans-serif; font-size:var(--panel-title-size); font-weight:var(--panel-title-weight); color:#0f172a; letter-spacing:-0.4px; margin:0 0 4px; line-height:1.2; display:inline-flex; align-items:center; gap:8px; }
.dash-hero__name { color:inherit; text-decoration:none; border-bottom:2px solid transparent; transition:color 0.15s, border-color 0.15s; }
.dash-hero__name:hover { color:#e5365a; border-bottom-color:#fda4af; }
.dash-hero__subtitle { font-family:'Inter',sans-serif; font-size:var(--panel-subtitle-size); color:var(--panel-subtitle-color); line-height:20px; margin:0; }
.dash-hero__btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:var(--panel-btn-padding); background:#ff385d; color:#fff; font-family:'Inter',sans-serif; font-size:14px; font-weight:700; border-radius:10px; text-decoration:none; border:none; cursor:pointer; transition:background 0.15s, transform 0.15s; box-shadow:0 4px 12px rgba(255,56,93,0.18); flex-shrink:0; }
.dash-hero__btn:hover { background:#e62e53; transform:translateY(-1px); }

/* Stat cards */
.dash-stats { display:grid; grid-template-columns:repeat(4, 1fr); gap:16px; }
.dash-stat { background:#fff; border:1px solid #e5e7eb; border-radius:12px; padding:16px 18px; display:flex; gap:12px; align-items:flex-start; box-shadow:0 1px 2px rgba(0,0,0,0.03); color:inherit; text-decoration:none; transition:border-color 0.15s, box-shadow 0.15s, transform 0.15s; }
a.dash-stat:hover { border-color:#fda4af; box-shadow:0 6px 16px rgba(255,56,93,0.10); transform:translateY(-1px); }
.dash-stat__icon { width:36px; height:36px; border-radius:10px; background:#fef2f4; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.dash-stat__icon svg { width:18px; height:18px; }
.dash-stat__body { display:flex; flex-direction:column; gap:2px; min-width:0; }
.dash-stat__label { font-family:'Inter',sans-serif; font-size:12px; font-weight:500; color:#64748b; margin:0; }
.dash-stat__value { font-family:'Inter',sans-serif; font-size:22px; font-weight:800; color:#0f172a; margin:0; line-height:1.1; letter-spacing:-0.3px; }
.dash-stat__sub { font-family:'Inter',sans-serif; font-size:11px; color:#94a3b8; margin:0; }
.dash-stat__sub--good { color:#15803d; font-weight:600; }

/* Two-column grid */
.dash-grid { display:grid; grid-template-columns:1fr 1fr; gap:20px; align-items:flex-start; }

/* Card */
.dash-card { background:#fff; border:1px solid #e5e7eb; border-radius:12px; overflow:hidden; box-shadow:0 1px 2px rgba(0,0,0,0.03); }
.dash-card__header { display:flex; align-items:center; justify-content:space-between; padding:16px 20px; border-bottom:1px solid #f1f5f9; }
.dash-card__title { font-family:'Inter',sans-serif; font-size:var(--panel-card-title-size); font-weight:var(--panel-card-title-weight); color:#0f172a; margin:0; }
.dash-card__link { display:inline-flex; align-items:center; gap:4px; padding:6px 12px; background:#fff; color:#475569; font-family:'Inter',sans-serif; font-size:12px; font-weight:600; border:1px solid #e2e8f0; border-radius:20px; text-decoration:none; transition:all 0.15s; }
.dash-card__link:hover { border-color:#cbd5e1; background:#f8fafc; }
.dash-card__body { display:flex; flex-direction:column; }
.dash-card__footer { padding:14px 20px; display:flex; align-items:center; justify-content:center; border-top:1px solid #f1f5f9; font-family:'Inter',sans-serif; font-size:13px; color:#64748b; }
.dash-card__cta { display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:var(--panel-btn-padding); background:#ff385d; color:#fff; font-family:'Inter',sans-serif; font-size:14px; font-weight:700; border-radius:10px; text-decoration:none; border:none; cursor:pointer; transition:background 0.15s, transform 0.15s; box-shadow:0 4px 12px rgba(255,56,93,0.18); flex-shrink:0; }
.dash-card__cta:hover { background:#e62e53; transform:translateY(-1px); }

/* List row */
.dash-row { display:flex; align-items:center; gap:12px; padding:14px 20px; border-bottom:1px solid #f1f5f9; }
.dash-row:last-child { border-bottom:none; }
.dash-row__avatar { width:40px; height:40px; border-radius:50%; object-fit:cover; flex-shrink:0; background:#f1f5f9; }
.dash-row__info { flex:1; min-width:0; }
.dash-row__name { font-family:'Inter',sans-serif; font-size:14px; font-weight:700; color:#0f172a; margin:0; line-height:1.3; }
.dash-row__meta { font-family:'Inter',sans-serif; font-size:12px; color:#64748b; margin:2px 0 0; }
.dash-row__right { display:flex; flex-direction:column; align-items:flex-end; gap:4px; flex-shrink:0; }
.dash-row__price { font-family:'Inter',sans-serif; font-size:13px; font-weight:700; color:#0f172a; }

/* Pill status — moved to styles.css as global; kept here as fallback ONLY if styles.css order is wrong */
/* (definitions live in styles.css under "Status pills") */

.dash-row__btn { display:inline-flex; align-items:center; padding:4px 10px; background:#fff; color:#475569; border:1px solid #e2e8f0; border-radius:14px; font-family:'Inter',sans-serif; font-size:11px; font-weight:600; text-decoration:none; cursor:pointer; transition:all 0.15s; }
.dash-row__btn:hover { border-color:#cbd5e1; background:#f8fafc; }

/* Pre-Wedding Shoot banner (client) */
.next-shoot { display:flex; align-items:center; gap:16px; padding:20px 24px; background:linear-gradient(135deg,#ef4d6b,#e5365a); border-radius:12px; color:#fff; box-shadow:0 8px 24px rgba(229,54,90,0.18); }
.next-shoot__date { width:56px; height:56px; background:rgba(255,255,255,0.18); border-radius:10px; display:flex; flex-direction:column; align-items:center; justify-content:center; flex-shrink:0; backdrop-filter:blur(4px); }
.next-shoot__day { font-family:'Inter',sans-serif; font-size:20px; font-weight:800; line-height:1; color:#fff; }
.next-shoot__month { font-family:'Inter',sans-serif; font-size:10px; font-weight:700; color:rgba(255,255,255,0.9); letter-spacing:1px; text-transform:uppercase; margin-top:2px; }
.next-shoot__body { flex:1; min-width:0; }
.next-shoot__title { font-family:'Inter',sans-serif; font-size:16px; font-weight:700; margin:0 0 2px; }
.next-shoot__sub { font-family:'Inter',sans-serif; font-size:12px; color:rgba(255,255,255,0.9); margin:0; }
.next-shoot__btn { padding:8px 18px; background:#fff; color:#e5365a; font-family:'Inter',sans-serif; font-size:13px; font-weight:700; border-radius:8px; text-decoration:none; border:none; cursor:pointer; flex-shrink:0; transition:transform 0.15s, box-shadow 0.15s; }
.next-shoot__btn:hover { transform:translateY(-1px); box-shadow:0 6px 14px rgba(0,0,0,0.12); }

/* Recommended row */
.rec-row { display:flex; align-items:center; gap:12px; padding:12px 20px; border-bottom:1px solid #f1f5f9; }
.rec-row:last-child { border-bottom:none; }
.rec-row__rating { display:inline-flex; align-items:center; gap:3px; font-family:'Inter',sans-serif; font-size:12px; font-weight:600; color:#0f172a; }
.rec-row__rating svg { width:12px; height:12px; fill:#f59e0b; }
.rec-row__btn { padding:4px 14px; background:#ffe6eb; color:#e5365a; border:none; border-radius:14px; font-family:'Inter',sans-serif; font-size:11px; font-weight:700; cursor:pointer; text-decoration:none; transition:background 0.15s; }
.rec-row__btn:hover { background:#ffd1da; }

/* Upcoming shoot (photographer) */
.up-row { display:flex; align-items:center; gap:14px; padding:14px 20px; border-bottom:1px solid #f1f5f9; }
.up-row:last-child { border-bottom:none; }
.up-row__date { width:44px; height:44px; background:#fef2f4; border-radius:10px; display:flex; flex-direction:column; align-items:center; justify-content:center; flex-shrink:0; }
.up-row__day { font-family:'Inter',sans-serif; font-size:16px; font-weight:800; color:#e5365a; line-height:1; }
.up-row__month { font-family:'Inter',sans-serif; font-size:9px; font-weight:700; color:#e5365a; letter-spacing:0.8px; text-transform:uppercase; margin-top:2px; }
.up-row__body { flex:1; min-width:0; }
.up-row__name { font-family:'Inter',sans-serif; font-size:14px; font-weight:700; color:#0f172a; margin:0; }
.up-row__meta { font-family:'Inter',sans-serif; font-size:12px; color:#64748b; margin:2px 0 0; }
.up-row__dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; }

/* Quick actions */
.qa-row { display:flex; align-items:center; gap:14px; padding:14px 20px; border-bottom:1px solid #f1f5f9; text-decoration:none; color:inherit; transition:background 0.15s; cursor:pointer; }
.qa-row:last-child { border-bottom:none; }
.qa-row:hover { background:#fafbfc; }
.qa-row__icon { width:36px; height:36px; background:#fef2f4; border-radius:10px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.qa-row__icon svg { width:18px; height:18px; }
.qa-row__body { flex:1; min-width:0; }
.qa-row__name { font-family:'Inter',sans-serif; font-size:14px; font-weight:700; color:#0f172a; margin:0; }
.qa-row__sub { font-family:'Inter',sans-serif; font-size:12px; color:#64748b; margin:1px 0 0; }
.qa-row__arrow { color:#cbd5e1; flex-shrink:0; }
.qa-row__arrow svg { width:14px; height:14px; }

.dash-empty { padding:32px 20px; text-align:center; color:#94a3b8; font-family:'Inter',sans-serif; font-size:13px; }

@media (max-width:1024px) {
    .dash-stats { grid-template-columns:repeat(2, 1fr); }
    .dash-grid { grid-template-columns:1fr; }
}

@media (max-width:768px) {
    .dash-content { padding: 20px var(--page-gutter); }
    .dash-hero { flex-direction:column; align-items:flex-start; }
    /* Stat cards become a horizontal swipe carousel (compact, no cramping). */
    .dash-stats { grid-template-columns:none; display:flex; gap:12px; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; scroll-snap-type:x proximity; }
    .dash-stats::-webkit-scrollbar { display:none; }
    .dash-stat { flex:0 0 auto; width:58%; max-width:210px; scroll-snap-align:start; }
    .dash-stat__value { font-size:18px; }
}

/* ============================================================
   Settings page (extracted from settings/index.blade.php)
   ============================================================ */
.settings-content { flex:1; min-width:0; display:flex; flex-direction:column; gap:20px; padding: 32px var(--page-gutter); }

/* Page title row */
.st-head { display:flex; align-items:flex-start; justify-content:space-between; gap:24px; }
.st-head__title { font-family:'Inter',sans-serif; font-size:var(--panel-title-size); font-weight:var(--panel-title-weight); color:#0f172a; letter-spacing:-0.4px; line-height:1.2; margin:0 0 4px; }
.st-head__subtitle { font-family:'Inter',sans-serif; font-size:var(--panel-subtitle-size); color:var(--panel-subtitle-color); line-height:20px; margin:0; }
.st-head__save { display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:var(--panel-btn-padding); background:#ff385d; color:#fff; font-family:'Inter',sans-serif; font-size:14px; font-weight:700; border-radius:10px; text-decoration:none; border:none; cursor:pointer; transition:background 0.15s, transform 0.15s; box-shadow:0 4px 12px rgba(255,56,93,0.18); flex-shrink:0; }
.st-head__save:hover { background:#e62e53; transform:translateY(-1px); }

/* Two-column grid */
.st-grid { display:grid; grid-template-columns:1fr 1fr; gap:20px; align-items:flex-start; }

/* Card */
.st-card { background:#fff; border:1px solid #e5e7eb; border-radius:12px; box-shadow:0 1px 2px rgba(0,0,0,0.03); overflow:hidden; }
.st-card__header { display:flex; align-items:center; gap:10px; padding:16px 20px; border-bottom:1px solid #f1f5f9; }
.st-card__icon { width:20px; height:20px; color:#ff385d; flex-shrink:0; }
.st-card__title { font-family:'Inter',sans-serif; font-size:var(--panel-card-title-size); font-weight:var(--panel-card-title-weight); color:#0f172a; margin:0; }
.st-card__body { padding:6px 20px 10px; }

/* Profile hero row (Profile Information) */
.st-profile { display:flex; align-items:center; gap:14px; padding:14px 0; border-bottom:1px solid #f1f5f9; }
.st-profile__avatar { width:52px; height:52px; border-radius:50%; background:#fde2e4; display:flex; align-items:center; justify-content:center; flex-shrink:0; overflow:hidden; font-family:'Inter',sans-serif; font-weight:700; color:#e5365a; font-size:16px; }
.st-profile__avatar img { width:100%; height:100%; object-fit:cover; }
.st-profile__info { flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.st-profile__name { font-family:'Inter',sans-serif; font-size:var(--panel-card-title-size); font-weight:var(--panel-card-title-weight); color:#0f172a; margin:0; }
.st-profile__meta { font-family:'Inter',sans-serif; font-size:12px; color:#64748b; margin:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.st-profile__btn { padding:8px 16px; background:#fff; border:1px solid #e2e8f0; border-radius:8px; font-family:'Inter',sans-serif; font-size:12px; font-weight:600; color:#334155; cursor:pointer; text-decoration:none; transition:all 0.15s; flex-shrink:0; }
.st-profile__btn:hover { background:#f8fafc; border-color:#cbd5e1; }

/* Row with icon + info + trailing action */
.st-row { display:flex; align-items:center; gap:12px; padding:14px 0; border-bottom:1px solid #f1f5f9; }
.st-row:last-child { border-bottom:none; }
.st-row__icon { width:32px; height:32px; border-radius:8px; background:#f8fafc; display:flex; align-items:center; justify-content:center; flex-shrink:0; color:#64748b; }
.st-row__icon svg { width:16px; height:16px; }
.st-row__icon--rose { background:#fef2f4; color:#e5365a; }
.st-row__icon--amber { background:#fef3c7; color:#a16207; }
.st-row__icon--emerald { background:#dcfce7; color:#15803d; }
.st-row__icon--blue { background:#dbeafe; color:#1d4ed8; }
.st-row__icon--danger { background:#fee2e2; color:#b91c1c; }
.st-row__body { flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.st-row__label { font-family:'Inter',sans-serif; font-size:13px; font-weight:700; color:#0f172a; margin:0; }
.st-row__desc { font-family:'Inter',sans-serif; font-size:12px; color:#94a3b8; margin:0; }
.st-row__action { flex-shrink:0; font-family:'Inter',sans-serif; font-size:13px; font-weight:700; background:none; border:none; cursor:pointer; padding:0; text-decoration:none; }
.st-row__action--rose { color:#ff385d; }
.st-row__action--rose:hover { color:#e62e53; }
.st-row__action--emerald { color:#15803d; }
.st-row__action--emerald:hover { color:#14532d; }
.st-row__action--muted { color:#64748b; }
.st-row__action--muted:hover { color:#0f172a; }
.st-row__btn-pill { padding:6px 14px; border-radius:20px; font-family:'Inter',sans-serif; font-size:12px; font-weight:700; text-decoration:none; cursor:pointer; border:none; }
.st-row__btn-pill--rose { background:#fce7ec; color:#e5365a; }
.st-row__btn-pill--rose:hover { background:#fbcfd9; }

/* Toggle switch */
.st-toggle { position:relative; width:40px; height:22px; flex-shrink:0; display:inline-block; }
.st-toggle input { opacity:0; width:0; height:0; position:absolute; }
.st-toggle__track { position:absolute; inset:0; background:#d1d5db; border-radius:22px; cursor:pointer; transition:background 0.2s; }
.st-toggle__track::after { content:''; position:absolute; width:18px; height:18px; background:#fff; border-radius:50%; top:2px; left:2px; transition:transform 0.2s; box-shadow:0 1px 3px rgba(0,0,0,0.12); }
.st-toggle input:checked + .st-toggle__track { background:#ff385d; }
.st-toggle input:checked + .st-toggle__track::after { transform:translateX(18px); }

/* Plan-locked toggle — clicking opens the upgrade modal instead of toggling */
.st-row--locked { opacity:0.78; }
.st-row--locked .st-toggle__track { background:#e5e7eb; cursor:not-allowed; }
.st-row--locked .st-toggle__track::after { background:#f8fafc; }
.st-lock-pill { display:inline-flex; align-items:center; gap:4px; padding:2px 8px; border-radius:9999px; background:rgba(255,56,93,0.10); color:#ff385d; font-family:'Inter',sans-serif; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:0.6px; margin-left:6px; }
.st-lock-pill svg { width:10px; height:10px; }
.st-row--locked .st-toggle { cursor:pointer; }

/* Plan-limit upgrade modal (visual parity with my-portfolio) */
.st-upgrade-modal { position:fixed; inset:0; z-index:10001; display:none; align-items:center; justify-content:center; padding:16px; }
.st-upgrade-modal.is-open { display:flex; }
.st-upgrade-modal__backdrop { position:absolute; inset:0; background:rgba(15,23,42,0.55); backdrop-filter:blur(2px); animation:stUpgradeFade 0.18s ease forwards; }
.st-upgrade-modal__panel { position:relative; z-index:1; width:100%; max-width:420px; background:#fff; border-radius:16px; padding:26px 24px 22px; box-shadow:0 25px 50px -12px rgba(0,0,0,0.30), 0 8px 16px rgba(15,23,42,0.08); text-align:center; animation:stUpgradeScale 0.22s cubic-bezier(0.34,1.56,0.64,1) forwards; }
.st-upgrade-modal__icon { width:52px; height:52px; margin:0 auto 14px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:rgba(255,56,93,0.12); color:#ff385d; box-shadow:0 0 0 6px rgba(255,56,93,0.06); }
.st-upgrade-modal__title { font-family:'Inter',sans-serif; font-size:18px; font-weight:800; color:#0f172a; margin:0 0 8px; }
.st-upgrade-modal__msg { font-family:'Inter',sans-serif; font-size:13px; color:#64748b; margin:0 0 22px; line-height:1.55; }
.st-upgrade-modal__msg strong { color:#0f172a; font-weight:700; }
.st-upgrade-modal__actions { display:flex; gap:8px; justify-content:center; }
.st-upgrade-modal__btn { flex:1 1 auto; padding:11px 16px; font-family:'Inter',sans-serif; font-size:13px; font-weight:700; border-radius:10px; cursor:pointer; transition:all 0.15s; border:1px solid transparent; text-decoration:none; display:inline-flex; align-items:center; justify-content:center; }
.st-upgrade-modal__btn--ghost { background:#fff; border-color:#e2e8f0; color:#475569; }
.st-upgrade-modal__btn--ghost:hover { background:#f8fafc; border-color:#cbd5e1; }
.st-upgrade-modal__btn--primary { background:#ff385d; color:#fff; box-shadow:0 4px 12px rgba(255,56,93,0.22); }
.st-upgrade-modal__btn--primary:hover { background:#e62e53; }
@keyframes stUpgradeFade { from { opacity:0; } to { opacity:1; } }
@keyframes stUpgradeScale { from { transform:scale(0.94); opacity:0; } to { transform:scale(1); opacity:1; } }
body.st-modal-open { overflow:hidden; }

/* Settings inline helpers (replacing inline style="...") */
.st-flash--success { padding:12px 16px; background:#dcfce7; color:#15803d; border-radius:10px; font-family:'Inter',sans-serif; font-size:13px; font-weight:600; }
.st-col { display:flex; flex-direction:column; gap:20px; }
.st-card__icon--warn { color:#a16207; }

/* Danger row */
.st-row--danger .st-row__label { color:#dc2626; }

@media (max-width:1024px) {
    .st-grid { grid-template-columns:1fr; }
}

@media (max-width:768px) {
    .settings-content { padding: 20px var(--page-gutter); }
    /* CTA stays top-right on mobile. */
    .st-head { gap:12px; }
    .st-head > div { flex:1 1 auto; min-width:0; }
    .st-head__save { align-self:flex-start; flex-shrink:0; padding:9px 13px; font-size:13px; }
}

/* ============================================================
   Bookmarks page (extracted from bookmarks/index.blade.php)
   Compact override for .project-card from browse-projects.css.
   ============================================================ */
.page-container--dashboard .dashboard-layout { padding-top:0; padding-bottom:0; }
.dashboard-content { padding:32px var(--page-gutter); gap:18px; }

@media (max-width:600px) {
    .dashboard-content { padding: 16px var(--page-gutter) 22px; }
}

.bookmark-duration {
    position:absolute; top:12px; right:12px;
    background:rgba(255,56,93,0.1); color:#ff385d;
    font-family:'Inter',sans-serif; font-size:12px; font-weight:600;
    padding:4px 10px; border-radius:6px; z-index:1;
}
.action-btn--remove-bookmark {
    display:inline-flex; align-items:center; justify-content:center;
    width:40px; height:40px; padding:0;
    background:transparent; border:1.5px solid #e5e7eb; border-radius:10px;
    color:#ff385d; cursor:pointer; transition:all 0.2s ease;
}
.action-btn--remove-bookmark:hover { background:#ff385d; border-color:#ff385d; color:#fff; }
.action-btn--remove-bookmark:hover svg path { stroke:#fff; }

/* Compact bookmark cards — tighter padding, less internal whitespace */
.project-feed--compact { gap:8px; }
.project-feed--compact .project-card { padding:18px 22px; gap:20px; }
.project-feed--compact .project-card__header { margin-bottom:10px; }
.project-feed--compact .project-card__body { margin-bottom:16px; }
.project-feed--compact .project-card__title { font-size:17px; line-height:1.3; margin-bottom:6px; }
.project-feed--compact .project-card__description { font-size:13px; line-height:1.5; }
.project-feed--compact .bookmark-duration { top:10px; right:10px; font-size:11px; padding:3px 8px; }

/* Bookmarks empty state */
.bk-empty {
    text-align:center; padding:40px 24px;
    color:#94a3b8;
}
.bk-empty__icon { margin-bottom:12px; }
.bk-empty__title { font-family:'Inter',sans-serif; font-size:18px; font-weight:800; color:#0f172a; margin-bottom:8px; }
.bk-empty__text { font-family:'Inter',sans-serif; font-size:13.5px; color:#64748b; margin:0 auto 20px; max-width:380px; line-height:1.6; }
.bk-empty__cta { width:auto; height:auto; padding:10px 24px; font-size:14px; display:inline-flex; text-decoration:none; }

/* Inline action group used inside .project-card__actions */
.project-card__actions-group { display:flex; align-items:center; gap:10px; }

/* ============================================================
   Bookings index page (extracted from bookings/index.blade.php)
   ============================================================ */
/* Cap the list to a comfortable reading width on large screens (premium SaaS
   feel — cards no longer stretch edge-to-edge) and tighten the vertical rhythm
   so the page doesn't feel sparse. */
.bookings-content { flex:1; min-width:0; max-width:1040px; display:flex; flex-direction:column; gap:16px; padding: 28px var(--page-gutter); }

.bk-head { display:flex; align-items:flex-start; justify-content:space-between; gap:24px; }
.bk-head__title { font-family:'Inter',sans-serif; font-size:var(--panel-title-size); font-weight:var(--panel-title-weight); color:#0f172a; letter-spacing:-0.4px; line-height:1.2; margin:0 0 4px; }
.bk-head__subtitle { font-family:'Inter',sans-serif; font-size:var(--panel-subtitle-size); color:var(--panel-subtitle-color); line-height:20px; margin:0; }
.bk-head__cta { display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:var(--panel-btn-padding); background:#ff385d; color:#fff; font-family:'Inter',sans-serif; font-size:14px; font-weight:700; border-radius:10px; text-decoration:none; border:none; cursor:pointer; transition:background 0.15s, transform 0.15s; box-shadow:0 4px 12px rgba(255,56,93,0.18); flex-shrink:0; }
.bk-head__cta:hover { background:#e62e53; transform:translateY(-1px); }

.bk-tabs-card { display:inline-block !important; width:auto !important; max-width:max-content !important; align-self:flex-start !important; box-sizing:border-box !important; background:#fff !important; border:1px solid #e5e7eb !important; border-radius:12px !important; padding:8px 10px !important; box-shadow:0 1px 2px rgba(0,0,0,0.03) !important; }
.bk-tabs { display:flex !important; gap:16px !important; margin:0 !important; align-items:center !important; background:transparent !important; border:none !important; box-shadow:none !important; padding:0 !important; }
.bk-tab { display:inline-flex !important; align-items:center !important; gap:8px !important; padding:9px 18px !important; border-radius:8px !important; font-family:'Inter',sans-serif !important; font-size:13px !important; font-weight:600 !important; color:#334155 !important; background:transparent !important; border:none !important; box-shadow:none !important; cursor:pointer !important; transition:all 0.15s !important; text-decoration:none !important; }
.bk-tab:hover { color:#0f172a !important; background:transparent !important; }
.bk-tab--active, .bk-tab.bk-tab--active { background:#ff385d !important; color:#fff !important; box-shadow:0 4px 12px rgba(255,56,93,0.22) !important; }
.bk-tab--active:hover { background:#e62e53 !important; color:#fff !important; }
.bk-tab__count { display:inline-flex !important; align-items:center !important; justify-content:center !important; width:22px !important; height:22px !important; min-width:22px !important; padding:0 !important; border-radius:50% !important; font-size:11px !important; font-weight:700 !important; }
.bk-tab--active .bk-tab__count { background:#ffd4de !important; color:#ff385d !important; }
.bk-tab:not(.bk-tab--active) .bk-tab__count { background:#f1f5f9 !important; color:#64748b !important; }

/* Booking card */
.bk-card { background:#fff; border:1px solid #e5e7eb; border-radius:14px; overflow:hidden; box-shadow:0 1px 2px rgba(0,0,0,0.03); transition:border-color 0.15s, box-shadow 0.15s, transform 0.15s; }
.bk-card:hover { border-color:#d8dde5; box-shadow:0 6px 20px rgba(15,23,42,0.07); transform:translateY(-1px); }
.bk-card__main { display:flex; gap:16px; padding:18px 20px; }
.bk-card__thumb { width:64px; height:64px; border-radius:10px; background:#fde2e4; display:flex; align-items:center; justify-content:center; flex-shrink:0; overflow:hidden; }
.bk-card__thumb svg { width:26px; height:26px; color:#e5365a; }
.bk-card__thumb img { width:100%; height:100%; object-fit:cover; }
.bk-card__body { flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.bk-card__title { font-family:'Inter',sans-serif; font-size:var(--panel-card-title-size); font-weight:var(--panel-card-title-weight); color:#0f172a; margin:0; line-height:1.3; }
.bk-card__meta { font-family:'Inter',sans-serif; font-size:13px; color:#64748b; margin:2px 0 0; }
.bk-card__sub { font-family:'Inter',sans-serif; font-size:12px; color:#94a3b8; margin:2px 0 0; }
/* Client's sent-inquiry awaiting state: calmer amber accent + hint line. */
.bk-card__await { display:inline-flex; align-items:center; gap:5px; font-family:'Inter',sans-serif; font-size:12px; font-weight:600; color:#a16207; margin:6px 0 0; }
.bk-card--inquiry { box-shadow:inset 3px 0 0 #f59e0b, 0 1px 2px rgba(0,0,0,0.03); }
.bk-card__right { display:flex; flex-direction:column; align-items:flex-end; gap:6px; flex-shrink:0; }
.bk-card__amount { font-family:'Inter',sans-serif; font-size:16px; font-weight:800; color:#0f172a; }
.bk-info { display:inline-flex; align-items:center; margin-left:5px; padding:0; background:none; border:none; color:#94a3b8; cursor:pointer; vertical-align:middle; transition:color 0.15s; }
.bk-info:hover, .bk-info.is-open { color:#ff385d; }
.bk-info svg { width:14px; height:14px; }

/* Click-open info popover — bubbly white card, fixed so the card's overflow
   never clips it. */
.bk-infopop { position:fixed; z-index:9999; max-width:230px; background:#fff; color:#475569; font-family:'Inter',sans-serif; font-size:12px; font-weight:500; line-height:1.55; padding:10px 13px; border:1px solid #eef2f7; border-radius:12px; box-shadow:0 12px 32px rgba(15,23,42,0.16); animation:bkInfoPopIn 0.14s ease-out; }
.bk-infopop[hidden] { display:none; }
@keyframes bkInfoPopIn { from { opacity:0; transform:translateY(-4px); } to { opacity:1; transform:translateY(0); } }

.bk-status { display:inline-flex; align-items:center; padding:4px 12px; border-radius:14px; font-family:'Inter',sans-serif; font-size:11px; font-weight:600; }
.bk-status--confirmed { background:#dcfce7; color:#15803d; }
.bk-status--pending { background:#fef3c7; color:#a16207; }
.bk-status--awaiting { background:#dbeafe; color:#1d4ed8; }
.bk-status--completed { background:#e0e7ff; color:#4338ca; }
.bk-status--cancelled { background:#fee2e2; color:#b91c1c; }
.bk-status--delivered { background:#ccfbf1; color:#0f766e; }

/* Downloadable payment receipts (booking detail payment cards) */
.abd-receipts { margin-top:14px; padding-top:12px; border-top:1px solid #f1f5f9; }
.abd-receipts__label { font-family:'Inter',sans-serif; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:0.4px; color:#94a3b8; margin:0 0 8px; }
.abd-receipt { display:flex; align-items:center; gap:8px; padding:8px 10px; border:1px solid #e5e7eb; border-radius:9px; text-decoration:none; color:#334155; font-family:'Inter',sans-serif; font-size:13px; margin-bottom:8px; transition:border-color .15s, background .15s; }
.abd-receipt:last-child { margin-bottom:0; }
.abd-receipt:hover { border-color:#ff385d; background:#fff5f7; color:#ff385d; }
.abd-receipt__amt { font-weight:700; }
.abd-receipt__date { margin-left:auto; font-size:11.5px; color:#94a3b8; }

/* Status pill → corner ribbon pinned to the card's top-right edge (matches the
   subscription plan-card__badge + inquiry card pattern). Scoped to .bk-card so
   .bk-status used elsewhere keeps its inline pill shape. */
.bk-card { position:relative; }
.bk-card .bk-status {
    position:absolute; top:0; right:0; z-index:1;
    padding:5px 14px; border-radius:0 14px 0 12px;
    font-size:10.5px; font-weight:700; letter-spacing:0.3px;
}
/* Pin the amount to the top-right, just below the corner ribbon, so it sits in
   the SAME place on every card regardless of how many lines the title wraps to
   (centring made it drift down on cards with long titles). */
.bk-card .bk-card__right { justify-content:flex-start; padding-top:30px; }

/* DESKTOP (default): original look — text buttons on the right, amount sits in
   the top-right (.bk-card__right). The footer price + button icons are hidden. */
.bk-card__actions { display:flex; align-items:center; justify-content:flex-end; gap:10px; padding:12px 20px; border-top:1px solid #f1f5f9; background:#fafbfc; }
.bk-card__action-btns { display:flex; align-items:center; gap:10px; flex-wrap:wrap; justify-content:flex-end; }
.bk-card__action-btns form { margin:0; display:inline-flex; }
.bk-card__price { display:none; }              /* mobile only */
.bk-btn__icon { display:none; }                /* icons are mobile-only */
.bk-btn__label { text-align:center; }          /* centre the label text */
.bk-btn.bk-btn--danger { color:#ef4444; }
.bk-btn.bk-btn--danger:hover { background:#fef2f2; border-color:#fecaca; color:#dc2626; }
.bk-btn { display:inline-flex; align-items:center; justify-content:center; gap:6px; padding:8px 16px; font-family:'Inter',sans-serif; font-size:13px; font-weight:600; border-radius:8px; text-decoration:none; cursor:pointer; border:1px solid transparent; transition:all 0.15s; }
.bk-btn--ghost { background:#fff; color:#334155; border-color:#e2e8f0; }
.bk-btn--ghost:hover { background:#f8fafc; border-color:#cbd5e1; }
.bk-btn--pay { background:#22c55e; color:#fff; border-color:#22c55e; }
.bk-btn--pay:hover { background:#16a34a; border-color:#16a34a; }
.bk-btn--reviewed { display:inline-flex; align-items:center; gap:6px; background:#fef3c7; color:#a16207; border-color:#fde68a; cursor:default; }
.bk-btn--reviewed:hover { background:#fef3c7; border-color:#fde68a; }

/* Bookings empty state (this overrides .bk-empty earlier — both pages use the class) */
.bookings-content .bk-empty { text-align:center; padding:56px 24px; background:#fff; border:1px dashed #e2e8f0; border-radius:12px; }
.bookings-content .bk-empty h3 { font-family:'Inter',sans-serif; font-size:18px; font-weight:800; color:#334155; margin:14px 0 6px; }
.bookings-content .bk-empty p { font-family:'Inter',sans-serif; font-size:13px; color:#94a3b8; margin:0 auto 18px; max-width:320px; line-height:1.6; }
.bk-empty__btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:var(--panel-btn-padding); background:#ff385d; color:#fff; border-radius:10px; font-family:'Inter',sans-serif; font-size:14px; font-weight:700; text-decoration:none; box-shadow:0 4px 12px rgba(255,56,93,0.18); transition:background 0.15s, transform 0.15s; }
.bk-empty__btn:hover { background:#e62e53; transform:translateY(-1px); }
.bk-empty__btn:hover { background:#e62e53; }
.bk-empty__svg-center { margin:0 auto; }

@media (max-width:768px) {
    .bookings-content { padding: 20px var(--page-gutter); }
    /* Keep the CTA in the top-right corner on mobile (was stacked full-width below). */
    .bk-head { gap:12px; }
    .bk-head > div { flex:1 1 auto; min-width:0; }
    .bk-head__cta { align-self:flex-start; padding:9px 13px; font-size:13px; }
    /* Only the title needs to clear the absolute status ribbon (top-right); the
       meta/date lines below use the full width so there's no wasted empty space
       after the date. */
    .bk-card__body { padding-right:0; }
    .bk-card__title { padding-right:92px; }
    .bk-card__meta, .bk-card__sub, .bk-card__await { padding-right:0; }
    .bk-tabs { flex-wrap:wrap; }
    .bk-card__main { flex-wrap:wrap; padding-bottom:14px; }
    /* On mobile the amount is hidden and the status is an absolute ribbon, so the
       right block is empty — collapse it (display:contents) instead of leaving a
       full-width empty row that adds white space after the date. */
    .bk-card__right { display:contents; }
    .bk-card__actions { flex-wrap:wrap; }
    .bk-btn { flex:1; min-width:120px; }
}

@media (max-width:600px) {
    /* MOBILE: price moves to the footer's left; the ghost action buttons become
       compact icon-only buttons (label hidden). The primary Pay button keeps its
       label and grows to fill the row. */
    .bk-card__actions { justify-content:space-between; flex-wrap:wrap; gap:10px; }
    .bk-card__right .bk-card__amount { display:none; }
    .bk-card__price { display:inline-flex; align-items:center; gap:4px; font-family:'Inter',sans-serif; font-size:16px; font-weight:800; color:#0f172a; white-space:nowrap; }
    .bk-card__action-btns { gap:8px; }
    /* Icon-only squares — override the generic ≤768 `.bk-btn{flex:1}` rule. */
    .bk-btn--icon { flex:0 0 auto; width:38px; min-width:0; height:38px; padding:0; }
    .bk-btn--icon .bk-btn__label { display:none; }
    .bk-btn--icon .bk-btn__icon { display:block; }
    .bk-btn--icon svg { width:18px; height:18px; }
    /* Pay keeps its label and fills the remaining space. */
    .bk-card__action-btns .bk-btn--pay { flex:1 1 130px; }
}

/* ============================================================
   Bookings page — redesigned header & empty hero (creator view)
   ============================================================ */

/* Header: section title, subtitle and inline tabs sit together with a single
   underline that runs full width. */
.bk-head--underline { border-bottom:1px solid #e5e7eb; padding-bottom:0; align-items:flex-end; }
.bk-head--underline .bk-head__title { font-size:26px; }
.bk-head--underline .bk-head__subtitle { margin-bottom:14px; }

/* Inline tabs — flat text tabs with a thick underline on the active item */
.bk-tabs-inline { display:flex; gap:24px; }
.bk-tab-inline {
    position:relative;
    padding:10px 0;
    font-family:'Inter',sans-serif; font-size:14px; font-weight:600;
    color:#94a3b8; text-decoration:none;
    transition:color 0.15s;
}
.bk-tab-inline:hover { color:#475569; }
.bk-tab-inline--active { color:#0f172a; font-weight:700; }
.bk-tab-inline--active::after {
    content:''; position:absolute; left:0; right:0; bottom:-1px;
    height:3px; background:#ff385d; border-radius:3px 3px 0 0;
}

/* Empty hero — large circular calendar avatar with primary CTA + share link */
.bk-empty--hero {
    text-align:center;
    padding:40px 24px !important;
    background:transparent !important;
    border:none !important;
    border-radius:0 !important;
    /* Vertically center the content in the remaining viewport space so
       the empty state sits in the visual middle of the page on every
       view (My Bookings / Projects / Galleries / Inquiries / etc.). */
    display:flex !important;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    min-height:calc(100vh - 280px);
}
.bk-empty__avatar {
    width:80px; height:80px; margin:0 auto 16px;
    border-radius:50%;
    background:#f1f5f9;
    display:flex; align-items:center; justify-content:center;
}
.bk-empty__cal {
    width:52px; height:60px;
    background:#fff;
    border:1px solid #e2e8f0; border-radius:8px;
    display:flex; flex-direction:column; overflow:hidden;
    box-shadow:0 1px 2px rgba(0,0,0,0.04);
    position:relative;
}
.bk-empty__cal::before, .bk-empty__cal::after {
    content:''; position:absolute; top:-4px;
    width:4px; height:8px; background:#94a3b8; border-radius:2px;
}
.bk-empty__cal::before { left:14px; }
.bk-empty__cal::after { right:14px; }
.bk-empty__cal-month {
    background:#b91c1c; color:#fff;
    font-family:'Inter',sans-serif; font-size:10px; font-weight:800;
    letter-spacing:1px; text-align:center; padding:3px 0 2px;
}
.bk-empty__cal-day {
    flex:1; display:flex; align-items:center; justify-content:center;
    font-family:'Inter',sans-serif; font-size:18px; font-weight:800;
    color:#0f172a;
}

/* Heading + body for the hero empty state. Unscoped so any page using
   .bk-empty--hero (My Projects, Galleries, Bookings) gets the same look,
   not just the bookings page. */
.bk-empty--hero h3 {
    font-family:'Inter',sans-serif !important;
    font-size:17px !important; font-weight:700 !important;
    color:#475569 !important;
    margin:14px 0 6px !important;
}
.bk-empty--hero p {
    font-family:'Inter',sans-serif !important;
    font-size:13px !important; color:#94a3b8 !important;
    max-width:340px !important; margin:0 auto 18px !important;
    line-height:1.6 !important;
}
/* Generic icon avatar contents (when not using the bk-empty__cal calendar) */
.bk-empty__avatar svg {
    width:34px; height:34px;
    color:#94a3b8;
    stroke:#94a3b8;
}
.bk-empty--hero .bk-empty__btn {
    padding:12px 28px; font-size:14px;
    box-shadow:0 4px 12px rgba(255,56,93,0.22);
}
.bk-empty__or {
    margin-top:14px !important;
    font-family:'Inter',sans-serif; font-size:13px; color:#64748b;
}
.bk-empty__or-link {
    color:#ff385d; font-weight:600; text-decoration:none;
    margin-left:4px; cursor:pointer;
}
.bk-empty__or-link:hover { text-decoration:underline; }

/* ============================================================
   Availability Calendar page
   ============================================================ */
.av-content { gap:24px; }

.av-grid {
    display:grid;
    grid-template-columns:minmax(0, 1.4fr) minmax(0, 1fr);
    gap:20px;
    align-items:start;
}

.av-card {
    background:#fff;
    border:1px solid #e5e7eb;
    border-radius:14px;
    box-shadow:0 1px 2px rgba(0,0,0,0.03);
}

.av-card__title {
    font-family:'Inter',sans-serif; font-size:15px; font-weight:700;
    color:#0f172a; margin:0;
    padding:18px 20px; border-bottom:1px solid #f1f5f9;
}

/* ---- Calendar card ---- */
.av-cal__head {
    display:flex; align-items:center; justify-content:space-between;
    padding:16px 22px;
}
.av-cal__nav {
    width:32px; height:32px; border-radius:50%;
    background:#f8fafc; border:1px solid #e5e7eb;
    display:inline-flex; align-items:center; justify-content:center;
    color:#64748b; text-decoration:none; transition:all 0.15s;
}
.av-cal__nav:hover { background:#fff; color:#0f172a; border-color:#cbd5e1; }
.av-cal__title {
    font-family:'Inter',sans-serif; font-size:16px; font-weight:700;
    color:#0f172a; margin:0;
}

.av-cal__weekdays {
    display:grid; grid-template-columns:repeat(7, 1fr);
    padding:10px 18px; gap:0;
    background:#f8fafc; border-top:1px solid #f1f5f9; border-bottom:1px solid #f1f5f9;
}
.av-cal__weekdays span {
    text-align:center;
    font-family:'Inter',sans-serif; font-size:11px; font-weight:600;
    color:#94a3b8; letter-spacing:0.4px;
}

.av-cal__grid {
    display:grid; grid-template-columns:repeat(7, 1fr);
    gap:8px;
    padding:18px;
}

.av-day {
    position:relative;
    aspect-ratio:1.4 / 1;
    min-height:44px;
    background:transparent;
    border:1px solid transparent;
    border-radius:18px;
    font-family:'Inter',sans-serif; font-size:13px; font-weight:600;
    color:#475569;
    cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    transition:all 0.15s;
    padding:0;
}
.av-day--blank { cursor:default; pointer-events:none; }
.av-day__num { line-height:1; }

.av-day--available { border-color:#e5e7eb; color:#0f172a; }
.av-day--available:hover { background:#f8fafc; }

.av-day--booked {
    background:#fde2e4; color:#9b1c2e; border-color:#fbcdd1;
}
.av-day--booked:hover { background:#fbcdd1; }
.av-day--booked .av-day__dot {
    position:absolute; bottom:-12px; left:50%; transform:translateX(-50%);
    width:5px; height:5px; border-radius:50%; background:#ff385d;
}

.av-day--blocked {
    background:transparent; color:#ff385d; border-color:#ff385d;
    box-shadow:inset 0 0 0 1px #ff385d;
    text-decoration:line-through;
}
.av-day--blocked .av-day__num { text-decoration:line-through; }

.av-day--today {
    background:#ff385d; color:#fff; border-color:#ff385d;
    box-shadow:0 4px 12px rgba(255,56,93,0.28);
}
.av-day--today:hover { background:#e62e53; border-color:#e62e53; }

.av-cal__legend {
    display:flex; flex-wrap:wrap; gap:18px;
    padding:14px 20px; border-top:1px solid #f1f5f9;
    background:#fafbfc;
}
.av-legend {
    display:inline-flex; align-items:center; gap:6px;
    font-family:'Inter',sans-serif; font-size:12px; color:#64748b;
}
.av-legend__sw {
    width:10px; height:10px; border-radius:50%;
    border:1px solid #e2e8f0;
}
.av-legend__sw--today { background:#ff385d; border-color:#ff385d; }
.av-legend__sw--booked { background:#fde2e4; border-color:#fbcdd1; }
.av-legend__sw--blocked { background:transparent; border-color:#ff385d; position:relative; }
.av-legend__sw--blocked::after { content:''; position:absolute; left:1px; right:1px; top:50%; height:1.5px; background:#ff385d; transform:translateY(-50%); }
.av-legend__sw--available { background:#fff; }

/* ---- Right column ---- */
.av-side { display:flex; flex-direction:column; gap:20px; }

/* Settings rows with toggles */
.av-row {
    display:flex; align-items:center; justify-content:space-between;
    gap:16px; padding:16px 20px;
    border-bottom:1px solid #f1f5f9;
}
.av-row:last-child { border-bottom:none; }
.av-row__text { min-width:0; }
.av-row__label {
    font-family:'Inter',sans-serif; font-size:14px; font-weight:600;
    color:#0f172a; margin:0 0 2px;
}
.av-row__sub {
    font-family:'Inter',sans-serif; font-size:12px; color:#94a3b8; margin:0;
}

.av-toggle { position:relative; display:inline-block; flex-shrink:0; }
.av-toggle input { position:absolute; opacity:0; width:0; height:0; }
.av-toggle__track {
    display:inline-block;
    width:38px; height:22px;
    background:#cbd5e1; border-radius:999px;
    position:relative; transition:background 0.2s;
    cursor:pointer;
}
.av-toggle__track::after {
    content:''; position:absolute; left:2px; top:2px;
    width:18px; height:18px; border-radius:50%;
    background:#fff; box-shadow:0 1px 2px rgba(0,0,0,0.18);
    transition:transform 0.2s;
}
.av-toggle input:checked + .av-toggle__track { background:#ff385d; }
.av-toggle input:checked + .av-toggle__track::after { transform:translateX(16px); }

/* Monthly-limit capacity field (shown when "Max bookings per month" is on).
   A bordered wrapper holds the number + a fixed "bookings/mo" unit suffix. */
.av-num-field {
    flex-shrink:0;
    display:inline-flex;
    align-items:center;
    gap:7px;
    height:38px;
    padding:0 12px;
    border:1px solid #e2e8f0;
    border-radius:10px;
    background:#fff;
    transition:border-color 0.15s, box-shadow 0.15s;
}
.av-num-field:focus-within {
    border-color:#ff385d;
    box-shadow:0 0 0 3px rgba(255,56,93,0.12);
}
.av-num-field__suffix {
    font-family:'Inter',sans-serif; font-size:12.5px; font-weight:500;
    color:#94a3b8; white-space:nowrap;
}
.av-num-input {
    width:48px;
    border:none;
    padding:0;
    background:transparent;
    font-family:'Inter',sans-serif; font-size:14px; font-weight:600;
    color:#0f172a;
}
.av-num-input:focus { outline:none; }
.av-num-input::placeholder { color:#94a3b8; font-weight:500; }
/* Hide the native number-input spinner arrows. */
.av-num-input::-webkit-outer-spin-button,
.av-num-input::-webkit-inner-spin-button {
    -webkit-appearance:none;
    margin:0;
}
.av-num-input { -moz-appearance:textfield; appearance:textfield; }

/* Booked-this-month list */
.av-booking {
    display:flex; align-items:center; gap:14px;
    padding:14px 20px; border-bottom:1px solid #f1f5f9;
}
.av-booking:last-of-type { border-bottom:none; }
.av-booking__date {
    width:42px; height:42px; flex-shrink:0;
    border-radius:50%; background:#fde2e4;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    line-height:1;
}
.av-booking__day {
    font-family:'Inter',sans-serif; font-size:14px; font-weight:800; color:#9b1c2e;
}
.av-booking__mon {
    font-family:'Inter',sans-serif; font-size:9px; font-weight:700; color:#9b1c2e;
    letter-spacing:0.6px; margin-top:1px;
}
.av-booking__body { flex:1; min-width:0; }
.av-booking__name {
    font-family:'Inter',sans-serif; font-size:13px; font-weight:600;
    color:#0f172a; margin:0;
}
.av-booking__type {
    font-family:'Inter',sans-serif; font-size:12px; color:#94a3b8; margin:2px 0 0;
}
.av-booking__status {
    flex-shrink:0;
    padding:4px 10px; border-radius:999px;
    font-family:'Inter',sans-serif; font-size:11px; font-weight:600;
}
.av-booking__status--confirmed { background:#dcfce7; color:#15803d; }
.av-booking__status--pending   { background:#fef3c7; color:#a16207; }
.av-booking__status--awaiting  { background:#dbeafe; color:#1d4ed8; }

.av-booked__empty {
    padding:24px 20px; text-align:center;
    font-family:'Inter',sans-serif; font-size:13px; color:#94a3b8; margin:0;
}

/* Block dates row */
.av-block-row {
    display:flex; align-items:center; gap:14px;
    padding:4px 4px 0;
}
.av-block-btn {
    padding:9px 18px;
    background:#fff; border:1px solid #e5e7eb; border-radius:10px;
    font-family:'Inter',sans-serif; font-size:13px; font-weight:600;
    color:#0f172a; cursor:pointer; transition:all 0.15s;
}
.av-block-btn:hover { background:#f8fafc; border-color:#cbd5e1; }
.av-block-hint {
    font-family:'Inter',sans-serif; font-size:12px; color:#94a3b8;
}

@media (max-width:1024px) {
    .av-grid { grid-template-columns:1fr; }
}

@media (max-width:768px) {
    .bk-head--underline { flex-direction:column; align-items:stretch; }
    .bk-tabs-inline { flex-wrap:wrap; gap:16px; }
    .av-cal__weekdays, .av-cal__grid { padding-left:10px; padding-right:10px; }
    .av-day { min-height:38px; border-radius:14px; }
    .av-block-row { flex-wrap:wrap; }
    .bk-empty__avatar { width:96px; height:96px; }
    .bk-empty__cal { width:54px; height:62px; }
}

/* ============================================================
   Upload Deliverables page (bookings/deliverables.blade.php)
   ============================================================ */
.dlv-content { gap:18px; }

/* Breadcrumb styles moved to the shared .crumbs rules near the top of this file */

/* Page title */
.dlv-head { margin-top:-2px; }
.dlv-head__title {
    font-family:'Inter',sans-serif; font-size:var(--panel-title-size); font-weight:var(--panel-title-weight);
    color:#0f172a; margin:0 0 4px;
}
.dlv-head__subtitle {
    font-family:'Inter',sans-serif; font-size:var(--panel-subtitle-size); color:var(--panel-subtitle-color); margin:0;
}

/* Two-column layout */
.dlv-grid {
    display:grid;
    grid-template-columns:minmax(0, 1.5fr) minmax(0, 1fr);
    gap:24px;
    align-items:start;
    margin-top:8px;
}
.dlv-main { display:flex; flex-direction:column; gap:18px; min-width:0; }
.dlv-side { display:flex; flex-direction:column; gap:18px; min-width:0; }
.dlv-side form { display:flex; flex-direction:column; gap:18px; }

.dlv-card {
    background:#fff;
    border:1px solid #e5e7eb; border-radius:14px;
    box-shadow:0 1px 2px rgba(0,0,0,0.03);
}
.dlv-card__title {
    font-family:'Inter',sans-serif; font-size:15px; font-weight:700;
    color:#0f172a; margin:0;
    padding:18px 20px 14px;
}

/* Drop zone */
.dlv-drop {
    background:#fdeaee;
    border:1px solid #f8d4da;
    border-radius:14px;
    padding:72px 24px;
    text-align:center;
}
.dlv-drop__icon { margin-bottom:14px; display:flex; justify-content:center; }
.dlv-drop__icon svg { color:#94a3b8; }
.dlv-drop__title {
    font-family:'Inter',sans-serif; font-size:16px; font-weight:700;
    color:#0f172a; margin:0 0 6px;
}
.dlv-drop__hint {
    font-family:'Inter',sans-serif; font-size:13px; color:#94a3b8;
    margin:0 0 18px;
}
.dlv-drop__btn {
    padding:11px 26px;
    background:#ff385d; color:#fff;
    border:none; border-radius:10px;
    font-family:'Inter',sans-serif; font-size:14px; font-weight:700;
    cursor:pointer; transition:background 0.15s, transform 0.15s;
    box-shadow:0 4px 12px rgba(255,56,93,0.22);
}
.dlv-drop__btn:hover { background:#e62e53; transform:translateY(-1px); }

/* Uploaded photos card */
.dlv-uploads__head {
    display:flex; align-items:flex-start; justify-content:space-between;
    gap:16px; padding:18px 20px 14px;
}
.dlv-uploads__title {
    font-family:'Inter',sans-serif; font-size:15px; font-weight:700;
    color:#0f172a; margin:0;
}
.dlv-uploads__count {
    font-family:'Inter',sans-serif; font-size:12px; color:#94a3b8;
    margin:2px 0 0;
}
.dlv-uploads__more {
    padding:7px 14px;
    background:#fff5f7; color:#ff385d;
    border:1px solid #fbcdd1; border-radius:8px;
    font-family:'Inter',sans-serif; font-size:12px; font-weight:600;
    cursor:pointer; transition:all 0.15s;
    flex-shrink:0;
}
.dlv-uploads__more:hover { background:#fde2e4; border-color:#f8b3bb; }

.dlv-grid-photos {
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(130px, 1fr));
    gap:16px;
    padding:4px 20px 20px;
}
.dlv-photo {
    position:relative;
    margin:0;
    aspect-ratio:1;          /* uniform square tiles — every image looks equal */
    border-radius:10px;
    overflow:hidden;
    border:1px solid #eef2f7;
}
/* Image fills the tile edge-to-edge — equal size, no letterbox frame. */
.dlv-photo img,
.dlv-photo video { width:100%; height:100%; object-fit:cover; display:block; }
.dlv-photo { cursor:pointer; }

/* Main grid caps at 9 tiles (3 rows); the rest open in the "View all" modal. */
#dlvGrid .dlv-photo:nth-child(n+10) { display:none; }

/* Bottom "View all" button */
.dlv-viewall { padding:2px 20px 20px; text-align:center; }
.dlv-viewall__btn {
    display:inline-flex; align-items:center; justify-content:center;
    padding:9px 24px; background:#fff; border:1px solid #e5e7eb; border-radius:9999px;
    font-family:'Inter',sans-serif; font-size:13px; font-weight:700; color:#0f172a;
    cursor:pointer; transition:background .15s, border-color .15s;
}
.dlv-viewall__btn:hover { background:#f8fafc; border-color:#cbd5e1; }

/* View-all modal — every uploaded image, full, in a scrollable grid. */
.dlv-modal { position:fixed; inset:0; z-index:1000; display:none; align-items:center; justify-content:center; padding:20px; }
.dlv-modal.is-open { display:flex; }
.dlv-modal__backdrop { position:absolute; inset:0; background:rgba(15,23,42,0.6); -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px); }
.dlv-modal__panel { position:relative; z-index:1; width:100%; max-width:960px; max-height:88vh; display:flex; flex-direction:column; background:#fff; border-radius:16px; overflow:hidden; box-shadow:0 24px 60px rgba(15,23,42,0.3); }
.dlv-modal__head { flex-shrink:0; display:flex; align-items:center; justify-content:space-between; padding:16px 20px; border-bottom:1px solid #f1f5f9; }
.dlv-modal__title { font-family:'Inter',sans-serif; font-size:16px; font-weight:800; color:#0f172a; margin:0; }
.dlv-modal__meta { display:flex; align-items:center; gap:14px; }
.dlv-modal__counts { font-family:'Inter',sans-serif; font-size:13px; font-weight:600; color:#64748b; white-space:nowrap; }
.dlv-modal__close { background:none; border:none; font-size:26px; line-height:1; color:#64748b; cursor:pointer; padding:0 4px; }
.dlv-modal__close:hover { color:#0f172a; }
/* Scrollable body — same equal square tiles & spacing as the inline grid. */
.dlv-modal__body {
    overflow-y:auto;
    padding:20px;
    gap:16px;
    grid-template-columns:repeat(auto-fill, minmax(140px, 1fr));
    align-content:start;
}
.dlv-modal__body .dlv-photo { cursor:pointer; }
.dlv-photo__name { display:none; }
/* Remove button on each tile (hover-reveal) */
.dlv-photo__remove {
    position:absolute; top:6px; right:6px;
    width:24px; height:24px;
    display:flex; align-items:center; justify-content:center;
    background:rgba(15,23,42,0.78); color:#fff;
    border:none; border-radius:50%;
    font-size:16px; line-height:1; cursor:pointer;
    opacity:0; transition:opacity 0.15s ease;
}
.dlv-photo:hover .dlv-photo__remove { opacity:1; }
/* Video tile play affordance */
.dlv-photo--video::after {
    content:''; position:absolute; top:50%; left:50%;
    width:0; height:0; transform:translate(-40%, -50%);
    border-left:14px solid rgba(255,255,255,0.92);
    border-top:9px solid transparent; border-bottom:9px solid transparent;
    pointer-events:none; filter:drop-shadow(0 1px 2px rgba(0,0,0,0.4));
}
/* Drag-over highlight on the drop zone */
.dlv-drop.is-dragover { border-color:#ff385d; background:rgba(255,56,93,0.04); }

/* Delivery settings — form fields */
.dlv-settings { padding-bottom:20px; }
.dlv-field {
    padding:0 20px 16px;
}
.dlv-field:last-child { padding-bottom:0; }
.dlv-field__label {
    display:block;
    font-family:'Inter',sans-serif; font-size:13px; font-weight:600;
    color:#0f172a; margin-bottom:8px;
}
.dlv-field__input {
    width:100%;
    padding:11px 14px;
    background:#f8fafc;
    border:1px solid #e5e7eb; border-radius:10px;
    font-family:'Inter',sans-serif; font-size:13px; color:#0f172a;
    transition:border-color 0.15s, background 0.15s;
}
.dlv-field__input::placeholder { color:#94a3b8; }
.dlv-field__input:hover { background:#f1f5f9; }
.dlv-field__input:focus {
    outline:none; background:#fff;
    border-color:#ff385d;
    box-shadow:0 0 0 3px rgba(255,56,93,0.12);
}
.dlv-field__input--ta { resize:vertical; min-height:64px; }

/* Ready-to-deliver card */
.dlv-deliver {
    background:#f8fafc;
    border:1px solid #e5e7eb; border-radius:14px;
    padding:22px 20px 18px;
    text-align:center;
}
.dlv-deliver__title {
    font-family:'Inter',sans-serif; font-size:15px; font-weight:700;
    color:#0f172a; margin:0 0 6px;
}
.dlv-deliver__sub {
    font-family:'Inter',sans-serif; font-size:13px; color:#64748b;
    margin:0 0 16px; line-height:1.5;
}
.dlv-deliver__btn {
    width:100%;
    padding:13px 18px;
    background:#ff385d; color:#fff;
    border:none; border-radius:10px;
    font-family:'Inter',sans-serif; font-size:14px; font-weight:700;
    cursor:pointer; transition:background 0.15s, transform 0.15s;
    box-shadow:0 4px 14px rgba(255,56,93,0.26);
}
.dlv-deliver__btn:hover { background:#e62e53; transform:translateY(-1px); }
.dlv-deliver__btn:disabled { opacity:.5; cursor:not-allowed; transform:none; box-shadow:none; }
.dlv-deliver__note {
    font-family:'Inter',sans-serif; font-size:11px; color:#94a3b8;
    margin:10px 0 0;
}

@media (max-width:1024px) {
    .dlv-grid { grid-template-columns:1fr; }
}
@media (max-width:768px) {
    .dlv-drop { padding:52px 20px; }
    .dlv-grid-photos { grid-template-columns:repeat(auto-fill, minmax(96px, 1fr)); padding:4px 16px 16px; }
}

/* ============================================================
   Profile-setup Live celebration page (profile-setup/live.blade.php)
   ============================================================ */
.live-body {
    background:#f8f6f2;
    margin:0;
    font-family:'Inter',sans-serif;
}

/* Wrap clears the fixed navigation header (~80px) and centers the card.
   Card is allowed to expand — page scrolls naturally if it grows tall. */
.live-wrap {
    margin-top:80px;
    min-height:calc(100vh - 80px);
    display:flex; align-items:center; justify-content:center;
    padding:32px 16px;
    box-sizing:border-box;
}

.live-card {
    width:100%; max-width:560px;
    background:#fff;
    border:1px solid #ececec;
    border-radius:18px;
    padding:32px 36px 24px;
    text-align:center;
    box-shadow:0 12px 32px rgba(15,23,42,0.06);
    box-sizing:border-box;
}

.live-card__avatar {
    width:72px; height:72px; margin:0 auto 18px;
    border-radius:50%;
    background:#dcf3e3;
    display:flex; align-items:center; justify-content:center;
    font-size:32px;
}
.live-card__confetti { line-height:1; }

/* Title matches .form-section__title (20px/800), subtitle matches form
   subtitle copy (14px/regular gray). */
.live-card__title {
    font-family:'Inter',sans-serif;
    font-size:20px; font-weight:800;
    color:#0f172a;
    margin:0 0 10px;
}

.live-card__subtitle {
    font-size:14px; color:#6b7280;
    margin:0 auto 20px;
    max-width:440px; line-height:1.55;
}

/* Profile summary row */
.live-summary {
    display:flex; align-items:center; gap:12px;
    background:#f3f4f6;
    border-radius:12px;
    padding:10px 14px;
    margin-bottom:14px;
    text-align:left;
}
.live-summary__avatar {
    width:40px; height:40px; flex-shrink:0;
    border-radius:50%;
    background:#ff385d; color:#fff;
    display:flex; align-items:center; justify-content:center;
    font-family:'Inter',sans-serif; font-size:16px; font-weight:800;
    overflow:hidden;
}
.live-summary__avatar img { width:100%; height:100%; object-fit:cover; }
.live-summary__body { flex:1; min-width:0; }
.live-summary__name {
    font-family:'Inter',sans-serif; font-size:15px; font-weight:700;
    color:#0f172a; margin:0;
}
.live-summary__meta {
    font-size:14px; color:#6b7280; margin:2px 0 0;
}
.live-summary__pill {
    display:inline-flex; align-items:center; gap:6px;
    padding:5px 12px;
    background:#e7f6ec; color:#15803d;
    border-radius:999px;
    font-size:12px; font-weight:600;
    flex-shrink:0;
}
.live-summary__dot {
    position:relative;
    width:8px; height:8px; border-radius:50%;
    background:#15803d;
    animation:liveDotPulse 1.6s ease-in-out infinite;
}
.live-summary__dot::before {
    content:'';
    position:absolute; inset:-2px;
    border-radius:50%;
    background:#15803d;
    opacity:0.45;
    animation:liveDotRing 1.6s ease-out infinite;
}
@keyframes liveDotPulse {
    0%, 100% { box-shadow:0 0 0 0 rgba(21,128,61,0.55); }
    50%      { box-shadow:0 0 0 4px rgba(21,128,61,0.0); }
}
@keyframes liveDotRing {
    0%   { transform:scale(1);   opacity:0.45; }
    80%  { transform:scale(2.2); opacity:0; }
    100% { transform:scale(2.2); opacity:0; }
}

/* Checklist */
.live-checklist {
    list-style:none;
    margin:0; padding:0;
    border-top:1px solid #f1f5f9;
}
.live-step {
    display:flex; align-items:center; gap:12px;
    padding:10px 2px;
    border-bottom:1px solid #f1f5f9;
    text-align:left;
}
.live-step:last-child { border-bottom:none; }

.live-step__icon {
    width:34px; height:34px; flex-shrink:0;
    border-radius:8px;
    background:#f8fafc;
    display:flex; align-items:center; justify-content:center;
    font-size:17px; line-height:1;
}
.live-step__body { flex:1; min-width:0; }
.live-step__title {
    font-family:'Inter',sans-serif; font-size:15px; font-weight:700;
    color:#0f172a; margin:0;
}
.live-step__sub {
    font-size:13px; color:#6b7280; margin:2px 0 0; line-height:1.5;
}
.live-step__pill {
    flex-shrink:0;
    padding:5px 14px;
    border-radius:999px;
    font-size:12px; font-weight:600;
}
.live-step__pill--done { background:#dcfce7; color:#15803d; }
.live-step__pill--todo { background:#fef3c7; color:#a16207; }

/* Actionable rows. The title carries the real anchor (so screen readers and
   keyboard users get proper link text) and ::after stretches it across the row,
   which makes the whole step tappable without nesting the pill inside a link. */
.live-step--link { position:relative; border-radius:8px; transition:background-color .12s ease; }
.live-step--link:hover { background:#fafbfc; }
.live-step__link { color:inherit; text-decoration:none; }
.live-step--link:hover .live-step__link { color:#ff385d; }
.live-step__link::after { content:''; position:absolute; inset:0; border-radius:8px; }
.live-step__link:focus-visible::after { outline:2px solid #ff385d; outline-offset:-2px; }

/* CTAs */
.live-actions {
    display:flex; gap:10px; justify-content:center;
    padding:14px 0 8px;
    border-top:1px solid #f1f5f9;
    margin-top:4px;
}
.live-btn {
    flex:1; max-width:220px;
    padding:12px 22px;
    border-radius:10px;
    text-decoration:none;
    text-align:center;
    font-family:'Inter',sans-serif; font-size:14px; font-weight:700;
    transition:all 0.15s;
    cursor:pointer;
    border:1px solid transparent;
    box-sizing:border-box;
}
.live-btn--ghost {
    background:#f3f4f6; color:#0f172a;
    border-color:#e5e7eb;
}
.live-btn--ghost:hover { background:#e5e7eb; }
.live-btn--primary {
    background:#ff385d; color:#fff;
    box-shadow:0 6px 16px rgba(255,56,93,0.24);
}
.live-btn--primary:hover { background:#e62e53; transform:translateY(-1px); }

.live-card__hint {
    font-size:13px; color:#6b7280;
    margin:10px 0 0;
}
.live-card__hint a {
    color:#475569; text-decoration:underline; font-weight:500;
}

@media (max-width:560px) {
    .live-card { padding:36px 24px 24px; border-radius:16px; }
    .live-card__title { font-size:22px; }
    .live-summary { flex-wrap:wrap; }
    .live-summary__pill { margin-left:auto; }
    .live-actions { flex-direction:column-reverse; }
    .live-btn { max-width:none; width:100%; }
}

/* ============================================================
   Notifications page (extracted from notifications/index.blade.php)
   ============================================================ */
.nf-content { flex:1; min-width:0; display:flex; flex-direction:column; gap:20px; padding: 32px var(--page-gutter); }

.nf-head { display:flex; align-items:flex-start; justify-content:space-between; gap:24px; }
.nf-head__title { font-family:'Inter',sans-serif; font-size:var(--panel-title-size); font-weight:var(--panel-title-weight); color:#0f172a; letter-spacing:-0.4px; margin:0 0 4px; line-height:1.2; }
.nf-head__subtitle { font-family:'Inter',sans-serif; font-size:var(--panel-subtitle-size); color:var(--panel-subtitle-color); line-height:20px; margin:0; }
.nf-head__subtitle b { color:#ff385d; font-weight:700; }
.nf-head__btn { display:inline-flex; align-items:center; padding:8px 16px; background:#fff; color:#475569; border:1px solid #e2e8f0; border-radius:9px; font-family:'Inter',sans-serif; font-size:13px; font-weight:600; cursor:pointer; transition:all 0.15s; flex-shrink:0; text-decoration:none; }
.nf-head__btn:hover { background:#f8fafc; border-color:#cbd5e1; }
.nf-head__btn:disabled { opacity:0.55; cursor:not-allowed; }

.nf-tabs { display:inline-flex; flex-wrap:wrap; gap:4px; padding:4px; background:#fff; border:1px solid #e5e7eb; border-radius:10px; align-self:flex-start; width:fit-content; max-width:100%; }
.nf-tab { padding:6px 14px; border-radius:7px; font-family:'Inter',sans-serif; font-size:13px; font-weight:600; color:#64748b; text-decoration:none; transition:all 0.15s; border:1px solid transparent; }
.nf-tab:hover { color:#0f172a; background:#f8fafc; }
.nf-tab--active { background:#ff385d; color:#fff; box-shadow:0 2px 6px rgba(255,56,93,0.28); }
.nf-tab--active:hover { background:#ff385d; color:#fff; }
.nf-tab__count {
    display:inline-flex; align-items:center; justify-content:center;
    min-width:18px; height:18px; padding:0 5px; margin-left:4px;
    border-radius:9px; background:#e5e7eb; color:#64748b;
    font-size:10.5px; font-weight:700; vertical-align:middle;
}
.nf-tab--active .nf-tab__count { background:rgba(255,255,255,0.25); color:#fff; }

.nf-list { display:flex; flex-direction:column; background:#fff; border:1px solid #e5e7eb; border-radius:12px; overflow:hidden; box-shadow:0 1px 2px rgba(0,0,0,0.03); }
.nf-item { position:relative; display:flex; align-items:center; gap:12px; padding:10px 18px 10px 26px; border-bottom:1px solid #f1f5f9; transition:background 0.15s; }
.nf-item:last-child { border-bottom:none; }
.nf-item--unread { background:#fff5f7; }
.nf-item--unread::before { content:''; position:absolute; left:12px; top:50%; transform:translateY(-50%); width:7px; height:7px; border-radius:50%; background:#ff385d; }
.nf-item__icon { width:32px; height:32px; border-radius:9px; display:flex; align-items:center; justify-content:center; flex-shrink:0; font-size:15px; }
.nf-item__icon img { width:100%; height:100%; border-radius:50%; object-fit:cover; }
.nf-item__icon--rose    { background:#fef2f4; color:#e5365a; }
.nf-item__icon--emerald { background:#dcfce7; color:#15803d; }
.nf-item__icon--amber   { background:#fef3c7; color:#a16207; }
.nf-item__icon--blue    { background:#dbeafe; color:#1d4ed8; }
.nf-item__icon--violet  { background:#ede9fe; color:#6d28d9; }
.nf-item__icon--slate   { background:#f1f5f9; color:#475569; }
.nf-item__body { flex:1; min-width:0; display:flex; align-items:center; gap:14px; }
.nf-item__text { flex:1; min-width:0; }
.nf-item__title { font-family:'Inter',sans-serif; font-size:13.5px; font-weight:700; color:#0f172a; margin:0 0 1px; line-height:1.3; }
.nf-item__title a { color:inherit; text-decoration:none; }
.nf-item__title a:hover { color:#ff385d; }
.nf-item__msg { font-family:'Inter',sans-serif; font-size:12.5px; color:#475569; line-height:1.4; margin:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.nf-item__cta { display:inline-flex; align-items:center; padding:4px 12px; border:1px solid; background:transparent; border-radius:7px; font-family:'Inter',sans-serif; font-size:11.5px; font-weight:700; cursor:pointer; text-decoration:none; transition:all 0.15s; flex-shrink:0; }
.nf-item__cta--rose    { color:#ff385d; border-color:#ff385d; }
.nf-item__cta--rose:hover    { background:#ff385d; color:#fff; }
.nf-item__cta--emerald { color:#15803d; border-color:#15803d; }
.nf-item__cta--emerald:hover { background:#15803d; color:#fff; }
.nf-item__cta--amber   { color:#a16207; border-color:#a16207; }
.nf-item__cta--amber:hover   { background:#a16207; color:#fff; }
.nf-item__cta--blue    { color:#1d4ed8; border-color:#1d4ed8; }
.nf-item__cta--blue:hover    { background:#1d4ed8; color:#fff; }
.nf-item__time { font-family:'Inter',sans-serif; font-size:11.5px; color:#94a3b8; flex-shrink:0; }

.nf-empty { padding:28px 20px 24px; display:flex; flex-direction:column; align-items:center; text-align:center; }
.nf-empty__icon { width:64px; height:64px; border-radius:50%; background:#f8fafc; display:flex; align-items:center; justify-content:center; font-size:28px; margin-bottom:14px; }
.nf-empty__title { font-family:'Inter',sans-serif; font-size:18px; font-weight:800; color:#0f172a; margin:0 0 6px; }
.nf-empty__msg { font-family:'Inter',sans-serif; font-size:13px; color:#64748b; max-width:420px; line-height:1.5; margin:0 0 20px; }
.nf-empty-cards { display:grid; grid-template-columns:repeat(3, 1fr); gap:12px; width:100%; max-width:760px; }
.nf-empty-card { background:#fff; border:1px solid #e5e7eb; border-radius:10px; padding:12px 14px; text-align:left; box-shadow:0 1px 2px rgba(0,0,0,0.03); display:flex; align-items:center; gap:10px; }
.nf-empty-card__icon { width:32px; height:32px; border-radius:8px; background:#f1f5f9; display:flex; align-items:center; justify-content:center; font-size:15px; flex-shrink:0; }
.nf-empty-card__title { font-family:'Inter',sans-serif; font-size:13px; font-weight:700; color:#0f172a; margin:0; }

.nf-pagination { padding:8px 16px; }
.nf-pagination .pagination { display:flex; gap:6px; justify-content:center; padding:0; margin:0; list-style:none; flex-wrap:wrap; }
.nf-pagination .page-item .page-link { padding:6px 11px; border:1px solid #e2e8f0; border-radius:8px; font-family:'Inter',sans-serif; font-size:13px; color:#475569; text-decoration:none; }
.nf-pagination .page-item.active .page-link { background:#ff385d; color:#fff; border-color:#ff385d; }
.nf-pagination .page-item.disabled .page-link { opacity:0.5; pointer-events:none; }

@media (max-width:900px) {
    .nf-item__msg { display:none; }
}

@media (max-width:768px) {
    .nf-content { padding: 20px var(--page-gutter); }
    .nf-empty-cards { grid-template-columns:1fr; }
    .nf-item { padding:10px 14px 10px 24px; gap:10px; }
    .nf-item__body { flex-direction:column; align-items:flex-start; gap:6px; }
    .nf-item__cta { padding:3px 10px; font-size:11px; }
    .nf-item__time { font-size:11px; }
}

/* ============================================================
   Booking detail page (extracted from bookings/show.blade.php)
   ============================================================ */
.ab-content { flex:1; min-width:0; padding: 32px var(--page-gutter); }
.ab-grid { display:grid; grid-template-columns:minmax(0, 1fr) 360px; gap:24px; align-items:start; }

.ab-head { grid-column:1 / -1; display:flex; align-items:flex-start; justify-content:space-between; gap:24px; margin-bottom:4px; }
.ab-head__back { display:inline-flex; align-items:center; gap:6px; font-family:'Inter',sans-serif; font-size:13px; font-weight:600; color:#64748b; text-decoration:none; margin-bottom:10px; transition:color 0.15s; }
.ab-head__back:hover { color:#0f172a; }
.ab-head__title { font-family:'Inter',sans-serif; font-size:var(--panel-title-size); font-weight:var(--panel-title-weight); color:#0f172a; margin:0; line-height:1.25; letter-spacing:-0.01em; }
.ab-head__meta { font-family:'Inter',sans-serif; font-size:13px; color:#64748b; margin:6px 0 0; display:flex; flex-wrap:wrap; gap:6px 14px; align-items:center; }
.ab-head__meta b { font-weight:600; color:#334155; }
.ab-head__meta .dot { color:#cbd5e1; }

.ab-status { display:inline-flex; align-items:center; gap:6px; padding:7px 14px; border-radius:999px; font-family:'Inter',sans-serif; font-size:12px; font-weight:700; flex-shrink:0; }
.ab-status--confirmed { background:#d1fae5; color:#065f46; }
.ab-status--pending { background:#fef3c7; color:#92400e; }
.ab-status--awaiting { background:#dbeafe; color:#1d4ed8; }
.ab-status--completed { background:#e0e7ff; color:#4338ca; }
.ab-status--cancelled { background:#fee2e2; color:#b91c1c; }

.ab-card { background:#fff; border:1px solid #e5e7eb; border-radius:14px; padding:22px; box-shadow:0 1px 2px rgba(15,23,42,0.04); }
.ab-card + .ab-card { margin-top:20px; }
.ab-card__title { font-family:'Inter',sans-serif; font-size:var(--panel-card-title-size); font-weight:var(--panel-card-title-weight); color:#0f172a; margin:0 0 16px; letter-spacing:-0.005em; }
.ab-card__title--row { display:flex; align-items:baseline; justify-content:space-between; gap:12px; }
.ab-card__title--row small { font-family:'Inter',sans-serif; font-size:12px; font-weight:600; color:#64748b; }

.ab-brief { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:12px; }
.ab-brief__cell { background:#f8fafc; border:1px solid #eef2f7; border-radius:10px; padding:14px 16px; transition:background 0.15s, border-color 0.15s; }
.ab-brief__cell:hover { background:#f1f5f9; border-color:#e2e8f0; }
.ab-brief__label { display:flex; align-items:center; gap:7px; font-family:'Inter',sans-serif; font-size:11.5px; font-weight:600; color:#64748b; text-transform:uppercase; letter-spacing:0.04em; margin-bottom:6px; }
.ab-brief__label svg { width:14px; height:14px; color:#94a3b8; }
.ab-brief__value { font-family:'Inter',sans-serif; font-size:14px; font-weight:600; color:#0f172a; line-height:1.4; }

.ab-progress { height:8px; background:#f1f5f9; border-radius:999px; overflow:hidden; margin:6px 0 18px; }
.ab-progress__fill { height:100%; background:linear-gradient(90deg,#10b981,#34d399); border-radius:999px; transition:width 0.4s ease; }

.ab-checklist { display:flex; flex-direction:column; gap:6px; margin:0; padding:0; list-style:none; }
.ab-checklist__item { display:flex; align-items:flex-start; gap:14px; padding:12px 10px; border-radius:10px; transition:background 0.15s; }
.ab-checklist__item:hover { background:#f8fafc; }
.ab-checklist__icon { flex-shrink:0; width:24px; height:24px; border-radius:50%; display:flex; align-items:center; justify-content:center; margin-top:1px; }
.ab-checklist__icon--done { background:#10b981; color:#fff; }
.ab-checklist__icon--done svg { width:13px; height:13px; }
.ab-checklist__icon--pending { background:#f1f5f9; border:1.5px solid #e2e8f0; }
.ab-checklist__body { flex:1; min-width:0; }
.ab-checklist__title { font-family:'Inter',sans-serif; font-size:14px; font-weight:600; color:#0f172a; margin:0; line-height:1.35; }
.ab-checklist__item--pending .ab-checklist__title { color:#64748b; }
.ab-checklist__sub { font-family:'Inter',sans-serif; font-size:12.5px; color:#94a3b8; margin:2px 0 0; line-height:1.4; }

.ab-rail { display:flex; flex-direction:column; gap:20px; position:sticky; top:24px; }

.ab-pay { display:flex; flex-direction:column; gap:10px; }
.ab-pay__row { display:flex; justify-content:space-between; align-items:baseline; gap:12px; font-family:'Inter',sans-serif; font-size:13px; color:#64748b; }
.ab-pay__row b { font-family:'Inter',sans-serif; font-weight:700; color:#0f172a; font-size:14px; }
.ab-pay__row--balance b { color:#ff385d; font-size:15px; }
.ab-pay__divider { height:1px; background:#f1f5f9; margin:4px 0; }
.ab-pay__note { font-family:'Inter',sans-serif; font-size:12px; color:#94a3b8; margin:14px 0 0; line-height:1.5; padding-top:14px; border-top:1px dashed #e2e8f0; }

.ab-client { display:flex; align-items:center; gap:12px; margin-bottom:16px; }
.ab-client__avatar { width:42px; height:42px; border-radius:50%; background:#dbeafe; color:#1d4ed8; display:flex; align-items:center; justify-content:center; font-family:'Inter',sans-serif; font-size:15px; font-weight:700; flex-shrink:0; }
.ab-client__name { font-family:'Inter',sans-serif; font-size:14px; font-weight:700; color:#0f172a; line-height:1.3; }
.ab-client__loc { font-family:'Inter',sans-serif; font-size:12.5px; color:#94a3b8; margin-top:2px; }

.ab-btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; width:100%; padding:11px 16px; border-radius:10px; font-family:'Inter',sans-serif; font-size:13.5px; font-weight:700; text-decoration:none; cursor:pointer; border:1px solid transparent; transition:transform 0.15s, background 0.15s, box-shadow 0.15s; }
.ab-btn--primary { background:#ff385d; color:#fff; box-shadow:0 4px 12px rgba(255,56,93,0.18); }
.ab-btn--primary:hover { background:#e62e53; transform:translateY(-1px); box-shadow:0 6px 14px rgba(255,56,93,0.24); }
.ab-btn svg { width:15px; height:15px; }

.ab-upload { background:linear-gradient(135deg,#fff7f9 0%,#fef2f4 100%); border-color:#fde2e8; }
.ab-upload__title { font-family:'Inter',sans-serif; font-size:14px; font-weight:700; color:#0f172a; margin:0 0 4px; }
.ab-upload__sub { font-family:'Inter',sans-serif; font-size:12.5px; color:#64748b; margin:0 0 14px; line-height:1.5; }

@media (max-width:1024px) {
    .ab-grid { grid-template-columns:1fr; }
    .ab-rail { position:static; }
}

@media (max-width:768px) {
    .ab-content { padding: 20px var(--page-gutter); }
    .ab-head { flex-direction:column; align-items:stretch; }
    .ab-brief { grid-template-columns:1fr; }
    .ab-head__title { font-size:22px; }
}

/* ============================================================
   Active Booking Detail v2 (.abd-*) — bookings/show.blade.php
   ============================================================ */
.abd-content { flex:1; min-width:0; padding: 32px var(--page-gutter); }

.abd-topbar { display:flex; align-items:flex-start; justify-content:space-between; gap:24px; margin-bottom:22px; }
.abd-topbar__left { min-width:0; }
.abd-topbar__right { display:flex; align-items:center; gap:12px; flex-shrink:0; }


.abd-title { font-family:'Inter',sans-serif; font-size:var(--panel-title-size); font-weight:var(--panel-title-weight); color:#0f172a; margin:0; line-height:1.2; letter-spacing:-0.4px; }
.abd-title__sep { color:#cbd5e1; margin:0 6px; font-weight:400; }
.abd-title__person { color:#0f172a; font-weight:800; }

.abd-status { display:inline-flex; align-items:center; padding:6px 13px; border-radius:999px; font-family:'Inter',sans-serif; font-size:12px; font-weight:600; line-height:1.2; }
.abd-status--confirmed { background:#d1fae5; color:#047857; }
.abd-status--pending { background:#fef3c7; color:#92400e; }
.abd-status--awaiting { background:#dbeafe; color:#1d4ed8; }
.abd-status--completed { background:#e0e7ff; color:#4338ca; }
.abd-status--cancelled { background:#fee2e2; color:#b91c1c; }

.abd-msg-btn { display:inline-flex; align-items:center; gap:7px; padding:8px 16px; background:#fff; color:#334155; border:1px solid #e2e8f0; border-radius:9px; font-family:'Inter',sans-serif; font-size:13px; font-weight:600; text-decoration:none; cursor:pointer; transition:all 0.15s; }
.abd-msg-btn:hover { border-color:#cbd5e1; background:#f8fafc; color:#0f172a; }
.abd-msg-btn svg { color:#64748b; }

.abd-grid { display:grid; grid-template-columns:minmax(0, 1fr) 360px; gap:20px; align-items:start; }
.abd-col { min-width:0; display:flex; flex-direction:column; gap:18px; }
.abd-col--rail { position:sticky; top:24px; }

.abd-card { background:#fff; border:1px solid #e5e7eb; border-radius:14px; padding:22px 24px; box-shadow:0 1px 2px rgba(15,23,42,0.03); }
.abd-card__title { display:flex; align-items:center; gap:9px; font-family:'Inter',sans-serif; font-size:var(--panel-card-title-size); font-weight:var(--panel-card-title-weight); color:#0f172a; margin:0 0 14px; padding:0 0 14px; border-bottom:1px solid #f1f5f9; letter-spacing:-0.005em; }
.abd-card__title--plain { border-bottom:none; padding-bottom:0; margin-bottom:18px; }
.abd-card__emoji { font-size:16px; line-height:1; }

/* Shoot Brief — label/value rows separated by hairlines */
.abd-brief { margin:0; padding:0; display:flex; flex-direction:column; }
.abd-brief__row { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:13px 0; border-bottom:1px solid #f3f4f6; }
.abd-brief__row:last-child { border-bottom:none; }
.abd-brief__label { font-family:'Inter',sans-serif; font-size:13.5px; color:#64748b; font-weight:500; margin:0; }
.abd-brief__value { font-family:'Inter',sans-serif; font-size:14px; color:#0f172a; font-weight:600; text-align:right; margin:0; max-width:60%; }

.abd-vision { margin-top:14px; padding:14px 16px; background:#f8fafc; border:1px solid #eef2f7; border-radius:10px; }
.abd-vision__title { font-family:'Inter',sans-serif; font-size:12.5px; font-weight:600; color:#64748b; margin:0 0 6px; }
.abd-vision__text { font-family:'Inter',sans-serif; font-size:13.5px; color:#334155; line-height:1.55; margin:0; }

/* Timeline — vertical with dots & connecting line */
.abd-timeline { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; }
.abd-timeline__item { position:relative; display:flex; gap:14px; padding:0 0 22px 0; }
.abd-timeline__item.is-last { padding-bottom:0; }
.abd-timeline__item:not(.is-last)::before { content:""; position:absolute; left:9px; top:18px; bottom:0; width:2px; background:#e5e7eb; }
.abd-timeline__item.is-done:not(.is-last)::before { background:#10b981; }
.abd-timeline__marker { position:relative; z-index:1; flex-shrink:0; width:20px; height:20px; border-radius:50%; display:flex; align-items:center; justify-content:center; margin-top:1px; background:#f1f5f9; border:1.5px solid #e2e8f0; }
.abd-timeline__item.is-done .abd-timeline__marker { background:#10b981; border-color:#10b981; color:#fff; }
.abd-timeline__marker svg { width:10px; height:10px; }
.abd-timeline__body { flex:1; min-width:0; padding-top:0; }
.abd-timeline__title { font-family:'Inter',sans-serif; font-size:14px; font-weight:600; color:#0f172a; margin:0; line-height:1.3; }
.abd-timeline__item.is-pending .abd-timeline__title { color:#94a3b8; }
.abd-timeline__when { font-family:'Inter',sans-serif; font-size:12.5px; color:#94a3b8; margin:3px 0 0; line-height:1.3; }

/* Photographer / Client card */
.abd-person { display:flex; align-items:center; gap:14px; margin-bottom:18px; padding-bottom:18px; border-bottom:1px solid #f1f5f9; }
.abd-person__avatar-wrap { position:relative; flex-shrink:0; }
.abd-person__avatar { width:48px; height:48px; border-radius:50%; background:#fde2e8; color:#be123c; display:flex; align-items:center; justify-content:center; font-family:'Inter',sans-serif; font-size:17px; font-weight:700; overflow:hidden; }
.abd-person__avatar img { width:100%; height:100%; object-fit:cover; }
.abd-person__dot { position:absolute; right:0; bottom:1px; width:11px; height:11px; border-radius:50%; background:#10b981; border:2px solid #fff; }
.abd-person__info { flex:1; min-width:0; }
.abd-person__name { font-family:'Inter',sans-serif; font-size:14.5px; font-weight:700; color:#0f172a; line-height:1.3; }
.abd-person__sub { font-family:'Inter',sans-serif; font-size:12.5px; color:#64748b; margin-top:3px; display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.abd-person__sub-sep { color:#cbd5e1; }
.abd-person__rating { display:inline-flex; align-items:center; gap:3px; color:#f59e0b; font-weight:600; }

.abd-contact { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:14px; }
.abd-contact__row { display:flex; align-items:flex-start; gap:11px; }
.abd-contact__icon { flex-shrink:0; width:28px; height:28px; border-radius:7px; background:#f1f5f9; color:#64748b; display:flex; align-items:center; justify-content:center; }
.abd-contact__body { flex:1; min-width:0; display:flex; flex-direction:column; gap:1px; }
.abd-contact__label { font-family:'Inter',sans-serif; font-size:11.5px; color:#94a3b8; font-weight:500; }
.abd-contact__value { font-family:'Inter',sans-serif; font-size:13.5px; color:#0f172a; font-weight:600; text-decoration:none; word-break:break-word; }
a.abd-contact__value:hover { color:#ff385d; }

/* Shoot Day Checklist */
.abd-check { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
.abd-check__item { display:flex; align-items:center; gap:11px; }
.abd-check__box { flex-shrink:0; width:18px; height:18px; padding:0; border-radius:5px; display:flex; align-items:center; justify-content:center; background:#f1f5f9; border:1.5px solid #e2e8f0; cursor:pointer; transition:background 0.15s, border-color 0.15s; }
.abd-check__box:hover { border-color:#10b981; }
.abd-check__item.is-done .abd-check__box { background:#10b981; border-color:#10b981; color:#fff; }
.abd-check__box svg { width:11px; height:11px; }
.abd-check__label { font-family:'Inter',sans-serif; font-size:13.5px; color:#0f172a; line-height:1.4; cursor:default; }
.abd-check__item.is-pending .abd-check__label { color:#64748b; }
.abd-check__item.is-done .abd-check__label { text-decoration:line-through; color:#94a3b8; }
/* Progress badge in the checklist title */
.abd-check__progress { margin-left:auto; font-family:'Inter',sans-serif; font-size:12px; font-weight:700; color:#10b981; background:rgba(16,185,129,0.1); padding:2px 9px; border-radius:999px; }

/* Support footer link */
.abd-support { padding:14px 18px; background:#fff; border:1px solid #e5e7eb; border-radius:12px; text-align:center; box-shadow:0 1px 2px rgba(15,23,42,0.03); }
/* When nested inside the checklist card, drop the card chrome and render as a
   plain top-bordered footer instead of a card-within-a-card. */
.abd-checklist .abd-support { margin-top:16px; padding:14px 0 0; background:transparent; border:0; border-top:1px solid #f1f5f9; border-radius:0; box-shadow:none; }
.abd-support__link { display:inline-flex; align-items:center; gap:6px; font-family:'Inter',sans-serif; font-size:12.5px; color:#64748b; text-decoration:none; font-weight:500; transition:color 0.15s; }
.abd-support__link:hover { color:#ff385d; }

/* Upload Deliverables (creator-only CTA) */
.abd-upload-btn { display:inline-flex; align-items:center; justify-content:center; gap:7px; width:100%; padding:12px 16px; background:#ff385d; color:#fff; border-radius:10px; font-family:'Inter',sans-serif; font-size:13.5px; font-weight:700; text-decoration:none; box-shadow:0 4px 12px rgba(255,56,93,0.18); transition:transform 0.15s, box-shadow 0.15s; }
.abd-upload-btn:hover { transform:translateY(-1px); box-shadow:0 6px 14px rgba(255,56,93,0.24); background:#e62e53; }

@media (max-width:1024px) {
    .abd-grid { grid-template-columns:1fr; }
    .abd-col--rail { position:static; }
}

@media (max-width:768px) {
    .abd-content { padding: 20px var(--page-gutter); }
    .abd-topbar { flex-direction:column; align-items:stretch; gap:14px; }
    .abd-topbar__right { justify-content:flex-start; }
    .abd-title { font-size:var(--panel-title-size); }
    .abd-card { padding:18px 18px; }
    /* Shoot Brief → grid of cards on mobile (Date, Venue, Duration, … as tiles)
       instead of a stacked label/value list. */
    .abd-brief { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
    .abd-brief__row { flex-direction:column; align-items:flex-start; justify-content:flex-start; gap:2px; padding:12px; background:#f8fafc; border:1px solid #f1f5f9; border-radius:10px; }
    .abd-brief__row:last-child { border-bottom:1px solid #f1f5f9; }
    .abd-brief__label { font-size:12px; }
    .abd-brief__value { max-width:100%; text-align:left; font-size:13.5px; }
}

/* ============================================================
   Send Inquiry / Booking Request (.si-*) — inquiries/send.blade.php
   ============================================================ */
.si-content { flex:1; min-width:0; padding: 32px var(--page-gutter); }
.si-grid { display:grid; grid-template-columns:minmax(0, 1fr) 320px; gap:28px; align-items:start; }
.si-col { min-width:0; }
.si-col--summary { position:sticky; top:24px; }

.si-back { display:inline-flex; align-items:center; gap:7px; font-family:'Inter',sans-serif; font-size:13px; color:#64748b; font-weight:500; text-decoration:none; margin-bottom:14px; transition:color 0.15s; }
.si-back:hover { color:#0f172a; }

.si-title { font-family:'Inter',sans-serif; font-size:var(--panel-title-size); font-weight:var(--panel-title-weight); color:#0f172a; margin:0 0 4px; line-height:1.2; letter-spacing:-0.4px; }
.si-subtitle { font-family:'Inter',sans-serif; font-size:var(--panel-subtitle-size); color:var(--panel-subtitle-color); line-height:20px; margin:0 0 22px; }

.si-card { background:#fff; border:1px solid #e5e7eb; border-radius:16px; padding:28px 30px; box-shadow:0 1px 2px rgba(15,23,42,0.04); }

.si-section { display:flex; flex-direction:column; gap:18px; }
.si-section__title { display:flex; align-items:center; gap:10px; font-family:'Inter',sans-serif; font-size:var(--panel-card-title-size); font-weight:var(--panel-card-title-weight); color:#0f172a; margin:0 0 4px; }
.si-section__num { display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; border-radius:50%; background:#f1f5f9; color:#64748b; font-family:'Inter',sans-serif; font-size:12px; font-weight:700; }

.si-divider { height:1px; background:#f1f5f9; margin:26px 0; }

.si-row { display:grid; gap:18px; }
.si-row--2 { grid-template-columns:repeat(2, minmax(0, 1fr)); }

.si-field { display:flex; flex-direction:column; gap:7px; min-width:0; }
.si-label { font-family:'Inter',sans-serif; font-size:12.5px; font-weight:500; color:#64748b; }

.si-input { width:100%; box-sizing:border-box; padding:11px 14px; border:1px solid #e2e8f0; border-radius:9px; background:#fff; font-family:'Inter',sans-serif; font-size:13.5px; color:#0f172a; transition:border-color 0.15s, box-shadow 0.15s; }
.si-input:focus { outline:none; border-color:#ff385d; box-shadow:0 0 0 3px rgba(255,56,93,0.10); }
.si-input::placeholder { color:#94a3b8; }
.si-textarea { min-height:96px; resize:vertical; line-height:1.55; }
select.si-input { appearance:none; -webkit-appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%2364748b' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 14px center; padding-right:36px; }

.si-error { font-family:'Inter',sans-serif; font-size:12px; color:#dc2626; margin:0; }
.si-hint { font-family:'Inter',sans-serif; font-size:12px; color:#64748b; margin:6px 0 0; }

.si-alert { padding:12px 14px; border-radius:9px; font-family:'Inter',sans-serif; font-size:13px; margin-bottom:16px; }
.si-alert--error { background:#fef2f2; border:1px solid #fecaca; color:#b91c1c; }
.si-alert p { margin:0; }

/* Event-type chip buttons */
.si-chips { display:flex; flex-wrap:wrap; gap:8px; }
.si-chip { display:inline-flex; align-items:center; padding:8px 16px; border:1px solid #e2e8f0; border-radius:999px; background:#fff; cursor:pointer; transition:all 0.15s; font-family:'Inter',sans-serif; font-size:13px; font-weight:500; color:#334155; user-select:none; }
.si-chip input { position:absolute; opacity:0; width:0; height:0; pointer-events:none; }
.si-chip:hover { border-color:#cbd5e1; background:#f8fafc; }
.si-chip.is-active { background:#ff385d; border-color:#ff385d; color:#fff; box-shadow:0 4px 12px rgba(255,56,93,0.20); }

/* Budget min–max inline group */
.si-budget { display:flex; align-items:center; gap:8px; padding:6px 12px; border:1px solid #e2e8f0; border-radius:9px; background:#fff; transition:border-color 0.15s, box-shadow 0.15s; }
.si-budget:focus-within { border-color:#ff385d; box-shadow:0 0 0 3px rgba(255,56,93,0.10); }
.si-budget__sym { font-family:'Inter',sans-serif; font-size:13.5px; color:#64748b; font-weight:500; }
.si-budget__dash { color:#cbd5e1; }
.si-input--budget { flex:1; min-width:0; padding:8px 0; border:none; background:transparent; box-shadow:none !important; font-size:13.5px; }
.si-input--budget:focus { border:none; outline:none; }

/* Notice (yellow tip box) */
.si-notice { display:flex; align-items:flex-start; gap:10px; margin-top:6px; padding:13px 16px; background:#fefce8; border:1px solid #fde68a; border-radius:10px; }
.si-notice__icon { font-size:15px; line-height:1.4; flex-shrink:0; }
.si-notice p { font-family:'Inter',sans-serif; font-size:13px; color:#78350f; margin:0; line-height:1.55; }

/* Submit row */
.si-cta-row { display:flex; align-items:center; gap:18px; margin-top:24px; }
.si-submit { display:inline-flex; align-items:center; gap:8px; padding:13px 26px; background:#ff385d; color:#fff; border:none; border-radius:11px; font-family:'Inter',sans-serif; font-size:14.5px; font-weight:700; cursor:pointer; box-shadow:0 6px 16px rgba(255,56,93,0.22); transition:transform 0.15s, box-shadow 0.15s, background 0.15s; }
.si-submit:hover { background:#e62e53; transform:translateY(-1px); box-shadow:0 8px 18px rgba(255,56,93,0.28); }
.si-cta-help { font-family:'Inter',sans-serif; font-size:12.5px; color:#94a3b8; }

/* ----- Right rail summary card ----- */
.si-summary { background:#fff; border:1px solid #e5e7eb; border-radius:16px; overflow:hidden; box-shadow:0 1px 2px rgba(15,23,42,0.04); }
.si-summary__cover { background:#f4a8b8; overflow:hidden; min-height:120px; }
.si-summary__cover img { display:block; width:100%; height:auto; }
.si-summary__cover-icon { color:#fff; opacity:0.9; }

.si-summary__body { padding:18px 20px; display:flex; flex-direction:column; gap:14px; }

.si-summary__person { display:flex; align-items:center; gap:11px; }
.si-summary__avatar { width:36px; height:36px; border-radius:50%; background:#fde2e8; color:#be123c; display:flex; align-items:center; justify-content:center; font-family:'Inter',sans-serif; font-size:14px; font-weight:700; flex-shrink:0; overflow:hidden; }
.si-summary__avatar img { width:100%; height:100%; object-fit:cover; }
.si-summary__name { font-family:'Inter',sans-serif; font-size:14.5px; font-weight:700; color:#0f172a; line-height:1.3; }
.si-summary__role { font-family:'Inter',sans-serif; font-size:12.5px; color:#64748b; margin-top:1px; }
.si-summary__sep { color:#cbd5e1; }

.si-summary__verify { display:inline-flex; align-items:center; gap:5px; padding:5px 11px; background:#d1fae5; color:#047857; border-radius:999px; font-family:'Inter',sans-serif; font-size:12px; font-weight:600; align-self:flex-start; }
.si-summary__verify svg { color:#047857; }
.si-summary__verify-sep { color:#a7f3d0; margin:0 1px; }

.si-summary__stats { display:grid; grid-template-columns:repeat(3, 1fr); gap:10px; padding:14px 0; border-top:1px solid #f1f5f9; border-bottom:1px solid #f1f5f9; }
.si-stat { text-align:center; }
.si-stat__value { font-family:'Inter',sans-serif; font-size:16px; font-weight:800; color:#0f172a; line-height:1.1; }
.si-stat__label { font-family:'Inter',sans-serif; font-size:11.5px; color:#94a3b8; margin-top:3px; }

.si-summary__price { display:flex; flex-direction:column; gap:2px; }
.si-summary__price-lbl { font-family:'Inter',sans-serif; font-size:12.5px; color:#64748b; }
.si-summary__price-val { font-family:'Inter',sans-serif; font-size:24px; font-weight:800; color:#0f172a; letter-spacing:-0.01em; line-height:1.1; }
.si-summary__price-sub { font-family:'Inter',sans-serif; font-size:12px; color:#94a3b8; }

.si-summary__avail { display:flex; align-items:center; gap:8px; font-family:'Inter',sans-serif; font-size:12.5px; color:#047857; font-weight:500; }
.si-summary__avail-dot { width:7px; height:7px; border-radius:50%; background:#10b981; }

@media (max-width:1024px) {
    .si-grid { grid-template-columns:1fr; }
    .si-col--summary { position:static; }
}

@media (max-width:768px) {
    .si-content { padding: 20px var(--page-gutter); }
    .si-card { padding:22px 18px; }
    .si-row--2 { grid-template-columns:1fr; }
    .si-cta-row { flex-direction:column; align-items:flex-start; gap:10px; }
    .si-submit { width:100%; justify-content:center; }
}

/* ============================================================
   Billing & subscription page (extracted from billing/history.blade.php)
   ============================================================ */
.billing-content { flex:1; min-width:0; display:flex; flex-direction:column; gap:20px; padding: 32px var(--page-gutter); }

.billing-title { font-family:'Inter',sans-serif; font-size:var(--panel-title-size); font-weight:var(--panel-title-weight); color:#0f172a; margin:0 0 4px; }
.billing-subtitle { font-family:'Inter',sans-serif; font-size:var(--panel-subtitle-size); color:var(--panel-subtitle-color); line-height:20px; margin:0; }

/* Current Plan Banner */
.plan-banner { position:relative; background:linear-gradient(135deg,#ef4d6b,#e5365a); border-radius:16px; padding:24px 28px; display:flex; align-items:center; justify-content:space-between; gap:24px; color:#fff; box-shadow:0 8px 24px rgba(229,54,90,0.18); }
.plan-banner__left { display:flex; flex-direction:column; gap:6px; min-width:0; }
.plan-banner__tag { display:inline-flex; align-items:center; gap:6px; font-family:'Inter',sans-serif; font-size:12px; font-weight:600; color:#fff; opacity:0.95; }
.plan-banner__tag svg { width:14px; height:14px; }
.plan-banner__name { font-family:'Inter',sans-serif; font-size:28px; font-weight:800; color:#fff; margin:2px 0 4px; line-height:1.1; }
.plan-banner__meta { font-family:'Inter',sans-serif; font-size:13px; color:rgba(255,255,255,0.9); margin:0; }
.plan-banner__right { display:flex; flex-direction:column; align-items:flex-end; gap:8px; flex-shrink:0; }
.plan-banner__upgrade { display:inline-flex; align-items:center; justify-content:center; padding:10px 22px; background:#fff; color:#e5365a; font-family:'Inter',sans-serif; font-size:14px; font-weight:700; border-radius:10px; text-decoration:none; border:none; cursor:pointer; transition:transform 0.15s, box-shadow 0.15s; }
.plan-banner__upgrade:hover { transform:translateY(-1px); box-shadow:0 6px 16px rgba(0,0,0,0.12); }
.plan-banner__cancel { font-family:'Inter',sans-serif; font-size:12px; font-weight:500; color:rgba(255,255,255,0.9); text-decoration:none; background:none; border:none; cursor:pointer; padding:0; }
.plan-banner__cancel:hover { color:#fff; text-decoration:underline; }

.billing-stats { display:grid; grid-template-columns:repeat(4, 1fr); gap:16px; }
.stat-card { background:#fff; border:1px solid #e5e7eb; border-radius:12px; padding:18px 20px; display:flex; flex-direction:column; gap:6px; box-shadow:0 1px 2px rgba(0,0,0,0.03); }
.stat-card__label { font-family:'Inter',sans-serif; font-size:12px; font-weight:500; color:#64748b; margin:0; }
.stat-card__value { font-family:'Inter',sans-serif; font-size:22px; font-weight:800; color:#0f172a; margin:0; line-height:1.2; letter-spacing:-0.3px; }
.stat-card__sub { font-family:'Inter',sans-serif; font-size:12px; color:#94a3b8; margin:0; }
.stat-card__card-dots { display:inline-flex; align-items:center; gap:4px; margin:0 6px; }
.stat-card__card-dots span { width:5px; height:5px; border-radius:50%; background:#0f172a; display:inline-block; }

.inv-tabs { display:flex; gap:16px; margin:4px 0 0; align-items:center; }
.inv-tab { display:inline-flex; align-items:center; gap:8px; padding:9px 18px; border-radius:22px; font-family:'Inter',sans-serif; font-size:13px; font-weight:600; color:#334155; background:transparent; border:none; cursor:pointer; transition:all 0.15s; text-decoration:none; }
.inv-tab:hover { color:#0f172a; }
.inv-tab--active { background:#ff385d; color:#fff; box-shadow:0 4px 12px rgba(255,56,93,0.22); }
.inv-tab--active:hover { background:#e62e53; color:#fff; }
.inv-tab__count { display:inline-flex; align-items:center; justify-content:center; min-width:22px; height:22px; padding:0 6px; border-radius:11px; font-size:11px; font-weight:700; }
.inv-tab--active .inv-tab__count { background:#c9243f; color:#fff; }
.inv-tab:not(.inv-tab--active) .inv-tab__count { background:#e5e7eb; color:#64748b; }

.invoice-card { background:#fff; border:1px solid #e5e7eb; border-radius:12px; overflow:hidden; box-shadow:0 1px 2px rgba(0,0,0,0.03); }
.invoice-card__header { display:flex; align-items:center; justify-content:space-between; padding:18px 24px; border-bottom:1px solid #f1f5f9; }
.invoice-card__title { font-family:'Inter',sans-serif; font-size:var(--panel-card-title-size); font-weight:var(--panel-card-title-weight); color:#0f172a; margin:0; }
.invoice-card__export { display:inline-flex; align-items:center; gap:6px; padding:8px 16px; background:#fff; color:#334155; border:1px solid #e2e8f0; border-radius:8px; font-family:'Inter',sans-serif; font-size:13px; font-weight:600; cursor:pointer; text-decoration:none; transition:all 0.15s; }
.invoice-card__export:hover { border-color:#cbd5e1; background:#f8fafc; }

.invoice-table { width:100%; border-collapse:collapse; }
.invoice-table thead th { text-align:left; padding:12px 24px; background:#f8fafc; font-family:'Inter',sans-serif; font-size:12px; font-weight:600; color:#64748b; border-bottom:1px solid #f1f5f9; }
.invoice-table thead th:nth-child(4), .invoice-table thead th:nth-child(5) { text-align:left; }
.invoice-table tbody td { padding:18px 24px; border-bottom:1px solid #f1f5f9; font-family:'Inter',sans-serif; font-size:13px; color:#0f172a; vertical-align:middle; }
.invoice-table tbody tr:last-child td { border-bottom:none; }
.invoice-table tbody tr:hover { background:#fafbfc; }

.invoice-num { font-family:'Inter',sans-serif; font-size:13px; font-weight:600; color:#7c3aed; text-decoration:none; }
.invoice-num:hover { text-decoration:underline; }
.invoice-date { color:#334155; font-weight:400; }
.invoice-desc { color:#0f172a; font-weight:500; }
.invoice-amount { font-family:'Inter',sans-serif; font-size:14px; font-weight:700; color:#0f172a; }

.status-badge { display:inline-flex; align-items:center; padding:3px 10px; border-radius:12px; font-family:'Inter',sans-serif; font-size:11px; font-weight:600; }
.status-badge--paid { background:#dcfce7; color:#15803d; }
.status-badge--refunded { background:#fef3c7; color:#a16207; }
.status-badge--pending { background:#e0e7ff; color:#4338ca; }
.status-badge--failed { background:#fee2e2; color:#b91c1c; }

.pdf-btn { display:inline-flex; align-items:center; gap:4px; padding:4px 10px; background:#f8fafc; border:1px solid #e2e8f0; border-radius:6px; font-family:'Inter',sans-serif; font-size:11px; font-weight:600; color:#475569; text-decoration:none; transition:all 0.15s; margin-left:10px; }
.pdf-btn:hover { background:#fff; border-color:#cbd5e1; color:#0f172a; }
.pdf-btn svg { width:11px; height:11px; }

.status-cell { display:flex; align-items:center; justify-content:flex-start; gap:0; }

.billing-empty { text-align:center; padding:64px 24px; }
.billing-empty h3 { font-family:'Inter',sans-serif; font-size:18px; font-weight:800; color:#334155; margin:16px 0 6px; }
.billing-empty p { font-family:'Inter',sans-serif; font-size:13px; color:#94a3b8; margin:0 auto 20px; max-width:320px; line-height:1.6; }
.billing-empty__btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:var(--panel-btn-padding); background:#ff385d; color:#fff; border-radius:10px; font-family:'Inter',sans-serif; font-size:14px; font-weight:700; text-decoration:none; box-shadow:0 4px 12px rgba(255,56,93,0.18); transition:background 0.15s, transform 0.15s; }
.billing-empty__btn:hover { background:#e62e53; transform:translateY(-1px); }
.billing-empty__btn:hover { background:#e62e53; }
.billing-empty__svg-center { margin:0 auto; }

@media (max-width:1024px) {
    .billing-stats { grid-template-columns:repeat(2, 1fr); }
}

@media (max-width:768px) {
    .billing-content { padding: 20px var(--page-gutter); }
    .plan-banner { flex-direction:column; align-items:flex-start; gap:16px; }
    .plan-banner__right { align-items:flex-start; width:100%; }
    .plan-banner__upgrade { width:100%; }
    .inv-tabs { flex-wrap:wrap; gap:8px; }
    .billing-stats { grid-template-columns:1fr 1fr; gap:12px; }
    .stat-card { padding:14px 16px; }
    .stat-card__value { font-size:18px; }
    .invoice-card__header { padding:14px 16px; }
    .invoice-table thead { display:none; }
    .invoice-table tbody td { display:block; padding:4px 16px; border:none; }
    .invoice-table tbody tr { display:block; padding:14px 0; border-bottom:1px solid #f1f5f9; }
    .invoice-table tbody tr:last-child { border-bottom:none; }
    .status-cell { padding-top:8px !important; }
}

/* ============================================================
   Projects > My projects (extracted from projects/my-projects.blade.php)
   ============================================================ */
.dashboard-content .dashboard-header { padding-right:20px; }
.project-card__actions--space-between { justify-content:space-between; }

@media (max-width:768px) {
    .dashboard-content .project-card { padding:14px 16px; gap:12px; }
}

.projects-empty {
    text-align:center; padding:60px 24px;
    background:#fff; border:1px solid #e5e7eb; border-radius:12px;
    color:#94a3b8;
}
.projects-empty__title { font-size:18px; font-weight:700; color:#64748b; margin-bottom:8px; }
.projects-empty__text { font-size:14px; margin-bottom:20px; }
.projects-empty__cta { width:auto; height:auto; padding:10px 24px; font-size:14px; display:inline-flex; text-decoration:none; }
.projects-pagination { margin-top:24px; display:flex; justify-content:center; }

/* ============================================================
   Testimonials page (extracted from profile/testimonials.blade.php)
   ============================================================ */
.td-content { flex:1; min-width:0; display:flex; flex-direction:column; gap:20px; padding: 32px var(--page-gutter); }

.td-head { display:flex; align-items:flex-start; justify-content:space-between; gap:24px; padding-bottom:16px; border-bottom:1px solid #f1f5f9; }
.td-head__title { font-family:'Inter',sans-serif; font-size:var(--panel-title-size); font-weight:var(--panel-title-weight); color:#0f172a; margin:0 0 4px; }
.td-head__subtitle { font-family:'Inter',sans-serif; font-size:var(--panel-subtitle-size); color:var(--panel-subtitle-color); margin:0; }
.td-back {
    display:inline-flex; align-items:center; gap:6px; padding:9px 16px;
    background:#fff; color:#475569; border:1px solid #e2e8f0; border-radius:10px;
    font-family:'Inter',sans-serif; font-size:13px; font-weight:600; text-decoration:none;
    transition:all 0.15s;
}
.td-back:hover { background:#f8fafc; border-color:#cbd5e1; }

.td-list { display:flex; flex-direction:column; gap:8px; }
.td-item {
    position:relative;
    padding:10px 12px;
    background:#fff;
    border:1px solid #e2e8f0; border-radius:10px;
    transition:border-color 0.15s, box-shadow 0.15s;
}
.td-item:hover { border-color:#cbd5e1; box-shadow:0 2px 8px rgba(15,23,42,0.04); }
.td-item::after { content:""; display:block; clear:both; }

.td-item__avatar {
    float:left;
    width:64px; height:64px; margin:0 12px 4px 0;
    border-radius:50%; overflow:hidden;
    background:#fde2e4;
}
.td-item__avatar--placeholder {
    display:flex; align-items:center; justify-content:center;
    font-family:'Inter',sans-serif; font-weight:700; color:#fff; font-size:22px;
    background:linear-gradient(135deg,#ff5277,#e5365a);
}
.td-item__avatar img { width:100%; height:100%; object-fit:cover; display:block; cursor:pointer; }

.td-item__text {
    margin:0 0 6px; font-family:'Inter',sans-serif; font-size:13px; line-height:1.5; color:#334155;
    display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}
.td-item.is-expanded .td-item__text { display:block; -webkit-line-clamp:unset; overflow:visible; }
.td-item__author { display:flex; align-items:baseline; flex-wrap:wrap; gap:8px; }
.td-item__name { font-family:'Inter',sans-serif; font-size:12px; font-weight:700; color:#0f172a; }
.td-item__date { font-family:'Inter',sans-serif; font-size:11px; color:#94a3b8; }

.td-item__actions {
    float:right;
    margin:0 0 4px 10px;
    display:flex; gap:4px;
}
.td-item__edit, .td-item__toggle, .td-item__delete {
    width:28px; height:28px; padding:0;
    background:#fff; border:1px solid #e2e8f0; border-radius:50%;
    cursor:pointer; transition:all 0.15s;
    display:inline-flex; align-items:center; justify-content:center;
    color:#64748b;
}
.td-item__edit:hover { background:#f8fafc; border-color:#cbd5e1; color:#0f172a; }
.td-item__delete:hover { background:#fef2f2; border-color:#fecaca; color:#b91c1c; }
.td-item__toggle:hover { background:#fef2f4; border-color:#ff385d; color:#ff385d; }
.td-item__toggle svg { transition:transform 0.2s ease; }
.td-item.is-expanded .td-item__toggle svg { transform:rotate(180deg); }
.td-item__toggle[hidden] { display:none; }

.td-empty {
    padding:60px 20px; text-align:center;
    font-family:'Inter',sans-serif; font-size:14px; color:#94a3b8;
}

/* Edit modal */
body.td-modal-open { overflow:hidden; }
.td-modal { position:fixed; inset:0; z-index:300; display:none; align-items:flex-start; justify-content:center; padding:48px 16px; overflow-y:auto; }
.td-modal.is-open { display:flex; }
.td-modal__backdrop { position:absolute; inset:0; background:rgba(15,23,42,0.55); }
.td-modal__panel { position:relative; z-index:1; width:100%; max-width:520px; background:#fff; border-radius:16px; box-shadow:0 18px 48px rgba(15,23,42,0.18); display:flex; flex-direction:column; max-height:calc(100vh - 96px); }
.td-modal__head { display:flex; align-items:center; justify-content:space-between; padding:18px 20px; border-bottom:1px solid #f1f5f9; }
.td-modal__title { font-family:'Inter',sans-serif; font-size:16px; font-weight:800; color:#0f172a; margin:0; }
.td-modal__close { background:none; border:none; font-size:22px; line-height:1; color:#64748b; cursor:pointer; padding:4px 8px; border-radius:6px; }
.td-modal__close:hover { background:#f1f5f9; color:#0f172a; }
.td-modal__body { padding:18px 20px; overflow-y:auto; flex:1; min-height:0; display:flex; flex-direction:column; gap:14px; }
.td-modal__photo { display:flex; align-items:center; gap:14px; }
.td-modal__photo-preview {
    width:64px; height:64px; border-radius:50%; flex-shrink:0;
    background:#f8fafc; border:1px dashed #cbd5e1;
    display:flex; align-items:center; justify-content:center; overflow:hidden;
    font-family:'Inter',sans-serif; font-size:24px; color:#94a3b8;
}
.td-modal__photo-preview img { width:100%; height:100%; object-fit:cover; }
.td-modal__photo-btn {
    display:inline-flex; align-items:center; padding:8px 14px;
    background:#fff; border:1px solid #e2e8f0; border-radius:8px;
    font-family:'Inter',sans-serif; font-size:12px; font-weight:600; color:#334155; cursor:pointer;
    transition:all 0.15s;
}
.td-modal__photo-btn:hover { background:#f8fafc; border-color:#cbd5e1; }
.td-modal__field { display:flex; flex-direction:column; gap:6px; }
.td-modal__field label { font-family:'Inter',sans-serif; font-size:12px; font-weight:600; color:#475569; }
.td-modal__field input, .td-modal__field textarea {
    width:100%; padding:10px 12px;
    background:#fff; border:1px solid #e2e8f0; border-radius:9px;
    font-family:'Inter',sans-serif; font-size:13px; color:#0f172a;
    outline:none; transition:border-color 0.15s, box-shadow 0.15s;
}
.td-modal__field input:focus, .td-modal__field textarea:focus { border-color:#ff385d; box-shadow:0 0 0 3px rgba(255,56,93,0.12); }
.td-modal__field textarea { resize:vertical; min-height:100px; line-height:1.5; }
.td-modal__error { color:#b91c1c; font-family:'Inter',sans-serif; font-size:12px; }
.td-modal__foot { padding:14px 20px; border-top:1px solid #f1f5f9; display:flex; justify-content:flex-end; gap:8px; }
.td-modal__save {
    padding:10px 22px; background:#ff385d; color:#fff; border:none; border-radius:10px;
    font-family:'Inter',sans-serif; font-size:13px; font-weight:700; cursor:pointer;
    box-shadow:0 4px 12px rgba(255,56,93,0.18); transition:background 0.15s;
}
.td-modal__save:hover:not(:disabled) { background:#e62e53; }
.td-modal__save:disabled { background:#cbd5e1; cursor:not-allowed; box-shadow:none; }

@media (max-width:768px) {
    .td-content { padding: 20px var(--page-gutter); }
    .td-item { padding:10px; }
    .td-item__avatar { width:52px; height:52px; margin:0 10px 4px 0; }
    .td-item__avatar--placeholder { font-size:18px; }
    .td-head { flex-direction:column; gap:12px; align-items:stretch; }
}

/* ============================================================
   My Portfolio page (extracted from dashboard/my-portfolio.blade.php)
   Includes pf-* portfolio grid, pf-modal* tag picker, pf-upgrade-modal,
   pf-confirm delete modal, and lightbox.
   ============================================================ */
.pf-content { flex:1; min-width:0; display:flex; flex-direction:column; gap:18px; padding: 32px var(--page-gutter); }

.pf-head { display:flex; align-items:flex-start; justify-content:space-between; gap:24px; }
.pf-head__text { display:flex; flex-direction:column; gap:4px; }
.pf-head__title { font-family:'Inter',sans-serif; font-size:var(--panel-title-size); font-weight:var(--panel-title-weight); color:#0f172a; line-height:1.2; letter-spacing:-0.4px; margin:0 0 4px; }
.pf-head__subtitle { font-family:'Inter',sans-serif; font-size:14px; font-weight:400; color:#64748b; line-height:20px; margin:0; }
.pf-head__subtitle b { color:#0f172a; font-weight:700; }
.pf-head__btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:var(--panel-btn-padding); background:#ff385d; color:#fff; font-family:'Inter',sans-serif; font-size:14px; font-weight:700; border-radius:10px; text-decoration:none; border:none; cursor:pointer; transition:background 0.15s, transform 0.15s; box-shadow:0 4px 12px rgba(255,56,93,0.18); flex-shrink:0; }
.pf-head__btn:hover { background:#e62e53; transform:translateY(-1px); }

.pf-alert { padding:12px 16px; border-radius:10px; font-family:'Inter',sans-serif; font-size:13px; font-weight:600; }
.pf-alert--warning { background:#fff; color:#92400e; border:1px solid #e5e7eb; box-shadow:0 1px 2px rgba(0,0,0,0.03); }
.pf-alert--error   { background:#fef2f2; color:#b91c1c; }

.pf-grid { display:grid; grid-template-columns:repeat(4, 1fr); gap:14px; }
.pf-tile { position:relative; aspect-ratio:3/4; border-radius:12px; overflow:hidden; background:#f1f5f9; border:1px solid #e2e8f0; box-shadow:0 1px 2px rgba(0,0,0,0.03); contain:layout paint; cursor:pointer; }
.pf-tile img { width:100%; height:100%; object-fit:cover; display:block; transition:transform 0.35s cubic-bezier(0.22,1,0.36,1); transform:translateZ(0); backface-visibility:hidden; cursor:pointer; }
.pf-tile:hover img { transform:scale(1.04) translateZ(0); }
.pf-tile__overlay { position:absolute; inset:0; background:linear-gradient(180deg, rgba(15,23,42,0) 35%, rgba(15,23,42,0.78) 100%); display:flex; flex-direction:column; justify-content:flex-end; padding:10px; gap:6px; opacity:0; transition:opacity 0.2s ease-out; pointer-events:none; }
.pf-tile:hover .pf-tile__overlay { pointer-events:auto; opacity:1; }
.pf-tile__tags { display:flex; flex-wrap:wrap; gap:4px; }
.pf-tile__tag { padding:2px 8px; border-radius:10px; background:rgba(255,255,255,0.95); color:#0f172a; font-family:'Inter',sans-serif; font-size:10px; font-weight:600; text-transform:uppercase; letter-spacing:0.4px; }
.pf-tile__actions { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.pf-tile__cover-btn { padding:5px 11px; border-radius:7px; border:none; font-family:'Inter',sans-serif; font-size:11px; font-weight:700; cursor:pointer; background:rgba(255,255,255,0.95); color:#0f172a; transition:background 0.15s; }
.pf-tile__cover-btn:hover { background:#fff; }
.pf-tile__cover-btn--active { background:#ff385d; color:#fff; }
.pf-tile__cover-btn--active:hover { background:#e62e53; }
.pf-tile__remove { width:28px; height:28px; border-radius:50%; border:none; background:rgba(15,23,42,0.78); color:#fff; font-size:14px; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center; }
.pf-tile__remove:hover { background:#dc2626; }
.pf-tile__cover-badge { position:absolute; top:9px; left:9px; padding:3px 9px; border-radius:14px; background:#ff385d; color:#fff; font-family:'Inter',sans-serif; font-size:10px; font-weight:700; letter-spacing:0.5px; text-transform:uppercase; box-shadow:0 2px 6px rgba(255,56,93,0.35); }

.pf-empty { padding:40px 24px; text-align:center; }
.pf-empty__icon { font-size:40px; margin-bottom:12px; }
.pf-empty__title { font-family:'Inter',sans-serif; font-size:18px; font-weight:800; color:#0f172a; margin:0 0 8px; }
.pf-empty__msg { font-family:'Inter',sans-serif; font-size:13.5px; color:#64748b; margin:0 auto 20px; max-width:380px; line-height:1.6; }

/* pf-modal-* tag picker — shared design with profile-setup/step2.blade.php. Defined here
   so this page works without loading profile-setup.css. */
body.pf-modal-open { overflow: hidden; }
.pf-modal-backdrop {
    position: fixed; inset: 0; background: rgba(15,23,42,0.55);
    display: flex; align-items: flex-start; justify-content: center;
    padding: 36px 16px; z-index: 200; overflow-y: auto;
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity 0.22s ease-out, visibility 0s linear 0.22s;
    -webkit-overflow-scrolling: touch;
}
.pf-modal-backdrop--open {
    opacity: 1; visibility: visible; pointer-events: auto;
    transition: opacity 0.22s ease-out, visibility 0s linear 0s;
}
.pf-modal {
    width: 100%; max-width: 400px; background: #fff;
    border-radius: 16px; box-shadow: 0 18px 48px rgba(15,23,42,0.18);
    display: flex; flex-direction: column;
    transform: translateY(8px) scale(0.98);
    transition: transform 0.22s cubic-bezier(0.22,1,0.36,1);
    will-change: transform;
}
.pf-modal-backdrop--open .pf-modal { transform: translateY(0) scale(1); }
.pf-modal__head { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 18px 8px; }
.pf-modal__title { font-family: 'Inter', sans-serif; font-size: 16px; font-weight: 800; color: #0f172a; margin: 0; }
.pf-modal__close { background: none; border: none; font-size: 20px; line-height: 1; color: #64748b; cursor: pointer; padding: 4px; }
.pf-modal__body { padding: 4px 18px 12px; }
.pf-modal__preview { width: 100%; aspect-ratio: 16 / 10; max-height: 60vh; min-height: 280px; border-radius: 10px; overflow: hidden; background: #0f172a; margin-bottom: 12px; position: relative; display: flex; align-items: center; justify-content: center; }
.pf-modal__preview img,
.pf-modal__preview video { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; display: block; }
/* Scoped to this page's own modal on purpose. dashboard-client.css is loaded on
   EVERY authenticated page (see layouts/app.blade.php), and only the upload flow
   below adds .is-loaded — unscoped, this left the profile-setup tag modal's
   preview stuck at opacity:0, i.e. a black box with no image. */
#pfModal .pf-modal__preview img { opacity: 0; transition: opacity 0.18s ease-out; }
#pfModal .pf-modal__preview img.is-loaded { opacity: 1; }
.pf-modal__step { position: absolute; top: 8px; left: 8px; padding: 3px 9px; border-radius: 14px; background: rgba(15,23,42,0.7); color: #fff; font-family: 'Inter', sans-serif; font-size: 11px; font-weight: 700; }

.pf-tag-input-row { display: flex; align-items: center; gap: 8px; padding: 10px 12px; background: #fff; border: 1px solid #e2e8f0; border-radius: 10px; margin-bottom: 8px; }
.pf-tag-input-row:focus-within { border-color: #ff385d; box-shadow: 0 0 0 3px rgba(255,56,93,0.12); }
.pf-tag-input-row svg { color: #94a3b8; flex-shrink: 0; }
.pf-tag-input { flex: 1; min-width: 0; border: none; outline: none; font-family: 'Inter', sans-serif; font-size: 13px; color: #0f172a; background: transparent; }
.pf-tag-input::placeholder { color: #94a3b8; }
.pf-tag-cancel { background: none; border: none; font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 600; color: #ff385d; cursor: pointer; }
.pf-tag-cancel:hover { color: #e62e53; }
.pf-tag-add-btn { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; background: #ff385d; color: #fff; border: none; border-radius: 50%; cursor: pointer; flex-shrink: 0; transition: background 0.15s, opacity 0.15s; box-shadow: 0 2px 6px rgba(255,56,93,0.25); }
.pf-tag-add-btn:hover:not(:disabled) { background: #e62e53; }
.pf-tag-add-btn:disabled { background: #cbd5e1; box-shadow: none; cursor: not-allowed; }
.pf-tag-create { display: none; padding: 7px 14px; background: #ff385d; color: #fff; border: none; border-radius: 8px; font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 700; cursor: pointer; margin-bottom: 14px; box-shadow: 0 4px 12px rgba(255,56,93,0.18); }
.pf-tag-create:hover { background: #e62e53; }

.pf-limit { display: none; padding: 8px 12px; background: #fff7ed; border: 1px solid #fed7aa; border-radius: 9px; margin-bottom: 12px; align-items: center; justify-content: space-between; gap: 10px; }
.pf-limit--shown { display: flex; }
.pf-limit__txt { font-family: 'Inter', sans-serif; font-size: 12px; color: #9a3412; font-weight: 600; }
.pf-limit__count { font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 700; color: #ff385d; }
.pf-limit__bar { height: 3px; background: #fee4d4; border-radius: 99px; margin-top: 6px; overflow: hidden; }
.pf-limit__fill { height: 100%; background: #ff385d; transition: width 0.2s; }

.pf-tag-group { margin-bottom: 14px; }
.pf-tag-group:last-child { margin-bottom: 0; }
.pf-tag-group__label { font-family: 'Inter', sans-serif; font-size: 11px; font-weight: 700; color: #94a3b8; letter-spacing: 0.6px; text-transform: uppercase; margin: 0 0 8px; }
.pf-tag-list { display: flex; flex-wrap: wrap; gap: 6px; }
.pf-tag {
    padding: 6px 14px; border-radius: 18px;
    background: #fff; border: 1px solid #e2e8f0;
    font-family: 'Inter', sans-serif; font-size: 12.5px; font-weight: 600; color: #475569;
    cursor: pointer; user-select: none; transition: all 0.15s;
}
.pf-tag:hover { border-color: #ff385d; color: #ff385d; }
.pf-tag--selected { background: #fff; border-color: #ff385d; color: #ff385d; }
.pf-tag--disabled { opacity: 0.45; cursor: not-allowed; }
.pf-tag--disabled:hover { border-color: #e2e8f0; color: #475569; }

.pf-modal__foot { padding: 4px 18px 18px; display: flex; flex-direction: column; gap: 6px; }
.pf-modal__cta { display: block; width: 100%; padding: 11px 18px; background: #ff385d; color: #fff; border: none; border-radius: 10px; font-family: 'Inter', sans-serif; font-size: 13.5px; font-weight: 700; cursor: pointer; box-shadow: 0 6px 16px rgba(255,56,93,0.22); transition: background 0.15s; }
.pf-modal__cta:hover { background: #e62e53; }
.pf-modal__cta:disabled { opacity: 0.55; cursor: not-allowed; box-shadow: none; }
.pf-modal__skip { background: none; border: none; font-family: 'Inter', sans-serif; font-size: 12.5px; font-weight: 600; color: #64748b; cursor: pointer; padding: 4px; }
.pf-modal__skip:hover { color: #0f172a; }

/* Plan-limit upgrade modal (portfolio-specific) */
.pf-upgrade-modal { position:fixed; inset:0; z-index:10001; display:none; align-items:center; justify-content:center; padding:16px; }
.pf-upgrade-modal.is-open { display:flex; }
.pf-upgrade-modal__backdrop { position:absolute; inset:0; background:rgba(15,23,42,0.55); -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px); animation:pfUpgradeFade 0.18s ease forwards; }
.pf-upgrade-modal__panel { position:relative; z-index:1; width:100%; max-width:420px; background:#fff; border-radius:16px; padding:26px 24px 22px; box-shadow:0 25px 50px -12px rgba(0,0,0,0.30), 0 8px 16px rgba(15,23,42,0.08); text-align:center; animation:pfUpgradeScale 0.22s cubic-bezier(0.34,1.56,0.64,1) forwards; }
.pf-upgrade-modal__icon { width:52px; height:52px; margin:0 auto 14px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:rgba(255,56,93,0.12); color:#ff385d; box-shadow:0 0 0 6px rgba(255,56,93,0.06); }
.pf-upgrade-modal__title { font-family:'Inter',sans-serif; font-size:18px; font-weight:800; color:#0f172a; margin:0 0 8px; letter-spacing:-0.1px; }
.pf-upgrade-modal__msg { font-family:'Inter',sans-serif; font-size:13px; color:#64748b; margin:0 0 22px; line-height:1.55; }
.pf-upgrade-modal__msg strong { color:#0f172a; font-weight:700; }
.pf-upgrade-modal__actions { display:flex; gap:8px; justify-content:center; }
.pf-upgrade-modal__btn { flex:1 1 auto; min-width:0; padding:11px 16px; font-family:'Inter',sans-serif; font-size:13px; font-weight:700; border-radius:10px; cursor:pointer; transition:all 0.15s ease; border:1px solid transparent; white-space:nowrap; text-decoration:none; display:inline-flex; align-items:center; justify-content:center; }
.pf-upgrade-modal__btn--ghost { background:#fff; border-color:#e2e8f0; color:#475569; }
.pf-upgrade-modal__btn--ghost:hover { background:#f8fafc; border-color:#cbd5e1; }
.pf-upgrade-modal__btn--primary { background:#ff385d; color:#fff; box-shadow:0 4px 12px rgba(255,56,93,0.22); }
.pf-upgrade-modal__btn--primary:hover { background:#e62e53; }
@keyframes pfUpgradeFade { from { opacity:0; } to { opacity:1; } }
@keyframes pfUpgradeScale { from { transform:scale(0.94); opacity:0; } to { transform:scale(1); opacity:1; } }

/* Delete confirmation modal */
.pf-confirm { max-width:380px; }
.pf-confirm__body { padding:6px 20px 4px; }
.pf-confirm__icon {
    width:48px; height:48px; border-radius:50%;
    background:#fee2e2; color:#dc2626;
    display:flex; align-items:center; justify-content:center;
    margin:6px 0 12px;
}
.pf-confirm__msg { font-family:'Inter',sans-serif; font-size:13px; color:#475569; line-height:1.5; margin:0; }
.pf-confirm__foot { padding:14px 20px 18px; display:flex; gap:8px; }
.pf-confirm__btn { flex:1; padding:10px 16px; border-radius:9px; border:none; font-family:'Inter',sans-serif; font-size:13px; font-weight:700; cursor:pointer; transition:background 0.15s; }
.pf-confirm__btn--cancel { background:#f1f5f9; color:#0f172a; }
.pf-confirm__btn--cancel:hover { background:#e2e8f0; }
.pf-confirm__btn--danger { background:#dc2626; color:#fff; box-shadow:0 4px 12px rgba(220,38,38,0.22); }
.pf-confirm__btn--danger:hover { background:#b91c1c; }
.pf-confirm__btn:disabled { opacity:0.6; cursor:not-allowed; }

/* Lightbox */
.lightbox { position:fixed; inset:0; z-index:2000; display:none; align-items:center; justify-content:center; overflow:hidden; padding:16px; }
.lightbox.active { display:flex; }
.lightbox__backdrop { position:absolute; inset:0; background:rgba(0,0,0,0.8); backdrop-filter:blur(4px); }
.lightbox__topbar { width:100%; display:flex; justify-content:flex-end; flex:0 0 auto; }
.lightbox__close { position:relative; width:28px; height:28px; background:rgba(255,255,255,0.1); border:1px solid rgba(255,255,255,0.15); border-radius:50%; display:flex; align-items:center; justify-content:center; cursor:pointer; z-index:10; transition:background 0.2s; }
.lightbox__close:hover { background:rgba(255,255,255,0.2); }
.lightbox__close svg { width:14px; height:14px; }
.lightbox__nav { position:absolute; top:50%; transform:translateY(-50%); width:44px; height:44px; background:rgba(255,255,255,0.1); border:1px solid rgba(255,255,255,0.15); border-radius:50%; display:flex; align-items:center; justify-content:center; cursor:pointer; z-index:10; transition:background 0.2s; }
.lightbox__nav:hover { background:rgba(255,255,255,0.25); }
.lightbox__nav--prev { left:20px; }
.lightbox__nav--next { right:20px; }
.lightbox__stage { position:relative; z-index:5; display:flex; flex-direction:column; align-items:center; gap:12px; max-width:90vw; max-height:92vh; }
.lightbox__content { position:relative; display:flex; align-items:center; justify-content:center; flex:0 1 auto; min-height:0; }
.lightbox__image,
.lightbox__video { display:block; max-width:90vw; max-height:calc(92vh - 130px); width:auto; height:auto; object-fit:contain; border-radius:12px; box-shadow:0 25px 50px rgba(0,0,0,0.5); transition:opacity 0.25s ease; background:#000; }
.lightbox__image { /* image-only: keep transition target separate from video pause/play paint */ }
.lightbox__info { position:relative; display:flex; flex-direction:column; align-items:flex-start; gap:8px; z-index:10; width:100%; max-width:100%; padding:0 4px; }
.lightbox__collection { display:flex; flex-wrap:wrap; justify-content:flex-start; gap:6px; width:100%; }
.lightbox__tag { background:rgba(148,163,184,0.25); color:#fff; padding:4px 10px; border:none; border-radius:9999px; font-family:'Inter',sans-serif; font-size:10px; font-weight:700; letter-spacing:0.5px; text-transform:uppercase; }
.lightbox__counter { color:rgba(255,255,255,0.7); font-family:'Inter',sans-serif; font-size:13px; font-weight:500; }

@media (max-width:900px) {
    .pf-grid { grid-template-columns:repeat(3, 1fr); }
}
@media (max-width:600px) {
    .pf-content { padding: 16px var(--page-gutter) 22px; }
    .pf-grid { grid-template-columns:repeat(2, 1fr); }
    /* CTA stays top-right on mobile. */
    .pf-head { gap:12px; }
    .pf-head > div { flex:1 1 auto; min-width:0; }
    .pf-head__btn { align-self:flex-start; flex-shrink:0; padding:9px 13px; font-size:13px; }
}

/* ============================================================
   Client profile (dashboard) — extracted from dashboard/my-profile-client.blade.php
   ============================================================ */
.client-profile {
    background: #fff;
    border: 1px solid rgba(226, 232, 240, 0.6);
    border-radius: 12px;
    box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.05);
}

.client-profile__view-public-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 20px;
    border-radius: 8px;
    font-family: 'Inter', sans-serif;
    font-size: 13px; font-weight: 700;
    color: #fff; border: none;
    background: #1a1a2e;
    text-decoration: none;
    transition: all 0.2s ease;
}
.client-profile__view-public-btn:hover { background: #0f0f1a; }

.client-profile__edit-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 24px;
    border-radius: 8px;
    font-family: 'Inter', sans-serif;
    font-size: 13px; font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
    background: #ff385d; color: #fff;
}
.client-profile__edit-btn:hover { background: #e62e53; }

.client-profile__cancel-btn {
    display: none;
    align-items: center; gap: 6px;
    padding: 8px 20px;
    border-radius: 8px;
    font-family: 'Inter', sans-serif;
    font-size: 13px; font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
    border: 1.5px solid #e2e8f0;
    background: #fff; color: #64748b;
}
.client-profile__cancel-btn:hover { border-color: #94a3b8; color: #0f172a; }
.client-profile__cancel-btn--visible { display: inline-flex; }

.client-profile__btn-group {
    display: flex; align-items: center; justify-content: center; gap: 10px;
}

.client-profile__avatar-section {
    display: flex; flex-direction: column; align-items: center;
    gap: 14px;
    padding: 32px 32px 28px;
    border-bottom: 1px solid #f1f5f9;
}
.client-profile__avatar-wrap { position: relative; width: 100px; height: 100px; }
.client-profile__avatar {
    width: 100px; height: 100px;
    border-radius: 50%;
    background: #ff385d;
    display: flex; align-items: center; justify-content: center;
    font-family: 'Inter', sans-serif;
    font-size: 34px; font-weight: 800;
    color: #fff;
    overflow: hidden;
    cursor: pointer;
    position: relative;
}
.client-profile__avatar img { width: 100%; height: 100%; object-fit: cover; }

.client-profile__avatar-overlay {
    position: absolute; inset: 0;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.45);
    display: flex; align-items: center; justify-content: center;
    opacity: 0;
    transition: opacity 0.2s ease;
    cursor: pointer;
}
.client-profile__avatar-wrap:hover .client-profile__avatar-overlay { opacity: 1; }
.client-profile__avatar-overlay svg { color: #fff; }

.client-profile__avatar-delete {
    position: absolute; top: -2px; right: -2px;
    width: 26px; height: 26px;
    border-radius: 50%;
    background: #fff;
    border: 1.5px solid #e2e8f0;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    z-index: 2;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}
.client-profile__avatar-delete:hover { background: #fef2f2; border-color: #ef4444; }
.client-profile__avatar-delete svg { color: #ef4444; }

.client-profile__avatar-info { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.client-profile__avatar-name { font-family: 'Inter', sans-serif; font-size: 18px; font-weight: 700; color: #0f172a; }
.client-profile__avatar-role { font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 500; color: #94a3b8; }

.client-profile__fields {
    padding: 28px 32px 32px;
    display: flex; flex-direction: column; gap: 20px;
}
.client-profile__field-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.client-profile__field-row--3 { grid-template-columns: repeat(3, 1fr); }
.client-profile__field { display: flex; flex-direction: column; gap: 6px; }
.client-profile__field-label { font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 600; color: #64748b; }
.client-profile__field-input-wrap { position: relative; display: flex; align-items: center; }
.client-profile__field-input {
    width: 100%;
    padding: 10px 14px;
    border: 1.5px solid #e2e8f0;
    border-radius: 8px;
    font-family: 'Inter', sans-serif;
    font-size: 14px; font-weight: 600;
    color: #0f172a;
    background: #f8f9fb;
    outline: none;
    transition: all 0.2s ease;
}
.client-profile__field-input:read-only { background: #f8f9fb; border-color: #e2e8f0; cursor: default; }
.client-profile__field-input--editable { background: #fff; border-color: #cbd5e1; cursor: text; }
.client-profile__field-input--editable:focus { border-color: #ff385d; box-shadow: 0 0 0 3px rgba(255, 56, 93, 0.08); }

.client-profile__verified-tick {
    position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
    display: flex; align-items: center; gap: 4px;
    font-family: 'Inter', sans-serif;
    font-size: 11px; font-weight: 600;
    color: #10b981;
    pointer-events: none;
}
.client-profile__field-input--has-tick { padding-right: 90px; }

@media (max-width: 768px) {
    .client-profile__field-row { grid-template-columns: 1fr; }
    .client-profile__avatar-section { padding: 20px 24px; }
    .client-profile__fields { padding: 20px 24px 24px; }
}
@media (max-width: 480px) {
    .client-profile__avatar-section { padding: 16px; }
    .client-profile__fields { padding: 16px 16px 20px; }
    .client-profile__avatar-wrap { width: 80px; height: 80px; }
    .client-profile__avatar { width: 80px; height: 80px; font-size: 26px; }
    .client-profile__avatar-name { font-size: 16px; }
}

/* ============================================================
   Edit creator profile (extracted from profile/edit-creator.blade.php)
   The big one — ep-* prefix covers the full edit-creator page.
   ============================================================ */
.ep-content { flex:1; min-width:0; display:flex; flex-direction:column; gap:20px; padding: 32px var(--page-gutter); }

.ep-head { display:flex; align-items:flex-start; justify-content:space-between; gap:24px; padding-bottom:20px; }
.ep-head__title { font-family:'Inter',sans-serif; font-size:var(--panel-title-size); font-weight:var(--panel-title-weight); color:#0f172a; margin:0 0 8px; line-height:1.2; }
.ep-head__subtitle { font-family:'Inter',sans-serif; font-size:var(--panel-subtitle-size); color:var(--panel-subtitle-color); line-height:20px; margin:0; }
.ep-head__actions { display:flex; align-items:center; gap:10px; flex-shrink:0; }

.ep-btn {
    display:inline-flex; align-items:center; justify-content:center;
    padding:var(--panel-btn-padding);
    font-family:'Inter',sans-serif; font-size:var(--panel-btn-size); font-weight:var(--panel-btn-weight);
    border-radius:var(--panel-btn-radius); border:none;
    cursor:pointer; text-decoration:none;
    transition:all 0.15s;
}
.ep-btn--ghost { background:#fff; color:#475569; border:1px solid #e2e8f0; }
.ep-btn--ghost:hover { background:#f8fafc; border-color:#cbd5e1; }
.ep-btn--primary { background:#ff385d; color:#fff; box-shadow:0 4px 12px rgba(255,56,93,0.18); }
.ep-btn--primary:hover { background:#e62e53; transform:translateY(-1px); }

.ep-grid { display:grid; grid-template-columns:1.7fr 1fr; gap:20px; align-items:flex-start; }
.ep-col { display:flex; flex-direction:column; gap:20px; min-width:0; }

.ep-card {
    background:#fff;
    border:1px solid #e5e7eb;
    border-radius:12px;
    box-shadow:0 1px 2px rgba(0,0,0,0.03);
    padding:20px 22px;
}
.ep-card > * + * { margin-top:0; }
.ep-card__title { font-family:'Inter',sans-serif; font-size:var(--panel-card-title-size); font-weight:var(--panel-card-title-weight); color:#0f172a; margin:0 0 4px; }
.ep-card__subtitle { font-family:'Inter',sans-serif; font-size:12.5px; color:#64748b; margin:0 0 14px; }

.ep-row { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.ep-field { display:flex; flex-direction:column; gap:6px; margin-bottom:12px; }
.ep-field:last-child { margin-bottom:0; }
.ep-field--full { grid-column:1 / -1; }

.ep-social-grid { display:grid; grid-template-columns:1fr; gap:14px; }

.ep-label { font-family:'Inter',sans-serif; font-size:12px; font-weight:500; color:#64748b; }

.ep-input,
.ep-textarea {
    font-family:'Inter',sans-serif; font-size:14px; color:#0f172a;
    padding:11px 14px;
    background:#fff;
    border:1px solid #e2e8f0; border-radius:9px;
    outline:none;
    transition:border-color 0.15s, box-shadow 0.15s;
    width:100%;
}
.ep-input:focus,
.ep-textarea:focus { border-color:#ff385d; box-shadow:0 0 0 3px rgba(255,56,93,0.12); }
.ep-textarea { resize:vertical; min-height:120px; line-height:1.5; }

.ep-input-prefix {
    position:relative;
    display:flex; align-items:stretch;
    border:1px solid #e2e8f0; border-radius:9px;
    overflow:hidden;
    transition:border-color 0.15s, box-shadow 0.15s;
    background:#fff;
}
.ep-input-prefix:focus-within { border-color:#ff385d; box-shadow:0 0 0 3px rgba(255,56,93,0.12); }
.ep-input-prefix:has(.ep-fdrop),
.ep-input-prefix:has(.currency-picker) { overflow:visible; }
.ep-input-prefix__symbol {
    display:flex; align-items:center; justify-content:center;
    padding:0 14px;
    background:#f8fafc;
    border-right:1px solid #e2e8f0;
    font-family:'Inter',sans-serif; font-size:var(--panel-subtitle-size); color:var(--panel-subtitle-color); font-weight:600;
}
.ep-input-prefix .ep-input { border:none; border-radius:0; padding-left:12px; }
.ep-input-prefix .ep-input:focus { box-shadow:none; }
.ep-input-prefix__select {
    appearance:none; -webkit-appearance:none; -moz-appearance:none;
    border:none; outline:none;
    background:#f8fafc;
    border-right:1px solid #e2e8f0;
    padding:0 28px 0 14px;
    font-family:'Inter',sans-serif; font-size:14px; color:#0f172a; font-weight:600;
    cursor:pointer;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%2364748b' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat:no-repeat;
    background-position:right 10px center;
}
.ep-input-prefix__select:focus { color:#0f172a; }

.ep-photo { display:flex; align-items:center; gap:18px; }
.ep-photo__avatar {
    width:72px; height:72px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    flex-shrink:0; overflow:hidden;
    font-family:'Inter',sans-serif; font-weight:700; color:#fff; font-size:26px;
    background:linear-gradient(135deg,#ff5277,#e5365a);
}
.ep-photo__avatar img { width:100%; height:100%; object-fit:cover; }
.ep-photo__info { flex:1; min-width:0; display:flex; flex-direction:column; gap:4px; }
.ep-photo__meta { font-family:'Inter',sans-serif; font-size:11px; color:#94a3b8; margin:0; letter-spacing:0.1px; }
.ep-photo__btn {
    align-self:flex-start;
    padding:7px 14px;
    background:#fff; border:1px solid #e2e8f0;
    border-radius:8px;
    font-family:'Inter',sans-serif; font-size:12px; font-weight:600; color:#334155;
    cursor:pointer; transition:all 0.15s;
}
.ep-photo__btn:hover { background:#f8fafc; border-color:#cbd5e1; }
.ep-photo__progress { height:6px; background:#f0f0f0; border-radius:3px; overflow:hidden; max-width:240px; margin-top:10px; }
.ep-photo__progress-bar { height:100%; width:0%; background:#ff385d; border-radius:3px; transition:width 0.15s ease; }
.ep-photo__avatar.is-uploading { position:relative; }
.ep-photo__avatar.is-uploading::after {
    content:""; position:absolute; inset:0;
    background:rgba(255,255,255,0.55); backdrop-filter:blur(1px);
}
.ep-photo__avatar.is-uploading::before {
    content:""; position:absolute;
    top:50%; left:50%;
    width:24px; height:24px; margin:-12px 0 0 -12px;
    border:2.5px solid rgba(255,56,93,0.25);
    border-top-color:#ff385d;
    border-radius:50%;
    animation:epPhotoSpin 0.7s linear infinite;
    z-index:1;
}
@keyframes epPhotoSpin { to { transform:rotate(360deg); } }

.ep-bio-head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:14px; }
.ep-bio-head__text { display:flex; flex-direction:column; gap:2px; }
.ep-bio-counter { font-family:'Inter',sans-serif; font-size:12px; color:#94a3b8; flex-shrink:0; padding-top:2px; }

.ep-chips { display:flex; flex-wrap:wrap; gap:8px; }
.ep-chip { position:relative; }
.ep-chip input { position:absolute; opacity:0; pointer-events:none; }
.ep-chip__label {
    display:inline-flex; align-items:center;
    padding:7px 16px; border-radius:20px;
    background:#fff; border:1px solid #e2e8f0;
    font-family:'Inter',sans-serif; font-size:13px; font-weight:600; color:#475569;
    cursor:pointer; transition:all 0.15s; user-select:none;
}
.ep-chip__label:hover { border-color:#cbd5e1; background:#f8fafc; }
.ep-chip input[type="checkbox"]:checked ~ .ep-chip__label {
    background:#f1f5f9; border-color:#cbd5e1; color:#0f172a;
}

.ep-alert { padding:12px 16px; border-radius:10px; font-family:'Inter',sans-serif; font-size:13px; font-weight:600; }
.ep-alert--error { background:#fef2f2; color:#b91c1c; }
.ep-alert ul { margin:6px 0 0 18px; padding:0; }

.ep-card-head { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:14px; }
.ep-card-head__text { min-width:0; }
.ep-card-add-btn {
    display:inline-flex; align-items:center; gap:6px;
    padding:8px 14px;
    background:#fff; color:#ff385d;
    border:1px solid #ff385d;
    border-radius:9999px;
    font-family:'Inter',sans-serif; font-size:12px; font-weight:700;
    cursor:pointer; transition:all 0.15s; flex-shrink:0;
}
.ep-card-add-btn:hover { background:#fef2f4; }

.ep-selected-chips { display:flex; flex-wrap:wrap; gap:8px; min-height:24px; }
.ep-selected-chips:empty::before {
    content:"None selected yet";
    color:#94a3b8;
    font-family:'Inter',sans-serif; font-size:13px; font-style:italic;
}
.ep-selected-chip {
    display:inline-flex; align-items:center;
    padding:4px 11px;
    background:#fef2f4;
    border:1px solid #ff385d;
    border-radius:20px;
    font-family:'Inter',sans-serif; font-size:12px; font-weight:600; color:#ff385d;
    line-height:1.4;
}
.ep-selected-chip--more {
    background:#f8fafc; border-color:#cbd5e1; color:#64748b; cursor:pointer;
}
.ep-selected-chip--more:hover { background:#f1f5f9; }

.ep-selected-chips[data-grouped="true"] { display:block; }
.ep-selected-group + .ep-selected-group { margin-top:10px; }
.ep-selected-group__title {
    font-family:'Inter',sans-serif; font-size:10px; font-weight:800;
    color:#94a3b8; letter-spacing:0.6px; text-transform:uppercase;
    margin:0 0 6px;
}
.ep-selected-group__chips { display:flex; flex-wrap:wrap; gap:6px; }
.ep-selected-chips[data-grouped="true"] > .ep-selected-chip--more { margin-top:10px; }

/* Picker modal — shared by Gear / Software / Specializations */
body.ep-modal-open { overflow:hidden; }
.ep-pmodal { position:fixed; inset:0; z-index:300; display:none; align-items:flex-start; justify-content:center; padding:48px 16px; overflow-y:auto; }
.ep-pmodal.is-open { display:flex; }
.ep-pmodal__backdrop { position:absolute; inset:0; background:rgba(15,23,42,0.55); }
.ep-pmodal__panel {
    position:relative; z-index:1;
    width:100%; max-width:560px;
    background:#fff; border-radius:16px;
    box-shadow:0 18px 48px rgba(15,23,42,0.18);
    display:flex; flex-direction:column;
    max-height:calc(100vh - 96px);
}
.ep-pmodal__head { display:flex; align-items:center; justify-content:space-between; padding:18px 20px; border-bottom:1px solid #f1f5f9; }
.ep-pmodal__title { font-family:'Inter',sans-serif; font-size:16px; font-weight:800; color:#0f172a; margin:0; }
.ep-pmodal__close { background:none; border:none; font-size:22px; line-height:1; color:#64748b; cursor:pointer; padding:4px 8px; border-radius:6px; }
.ep-pmodal__close:hover { background:#f1f5f9; color:#0f172a; }
.ep-pmodal__body { padding:16px 20px; overflow-y:auto; flex:1; min-height:0; }
/* When an .ep-fdrop inside the modal is open, every ancestor that
   normally clips (overflow:auto / hidden) must become visible — otherwise
   the dropdown panel gets cut off at the card boundary. Cascade up:
   modal container, modal panel, modal body. */
.ep-pmodal:has(.ep-fdrop.is-open),
.ep-pmodal__panel:has(.ep-fdrop.is-open),
.ep-pmodal__body:has(.ep-fdrop.is-open) { overflow: visible; }
/* Dropdown panel rendered inside the modal needs the highest z-index so
   it sits above the modal footer + everything else in the stacking
   context. Also constrain the panel size so it doesn't balloon past the
   trigger or overflow the modal card. */
.ep-pmodal .ep-fdrop__panel {
    z-index: 9999;
    min-width: 100%;
    max-width: 240px;
    max-height: 220px;
    overflow-y: auto;
}
/* The .ep-pmodal__custom inline-flex row contains the dropdown trigger;
   make sure the trigger doesn't get squashed so the panel anchors right. */
.ep-pmodal__custom .ep-fdrop__btn {
    min-width: 140px;
}
.ep-pmodal__search {
    width:100%;
    padding:10px 14px;
    border:1px solid #e2e8f0; border-radius:10px;
    font-family:'Inter',sans-serif; font-size:13px;
    outline:none;
    margin-bottom:14px;
    transition:border-color 0.15s, box-shadow 0.15s;
}
.ep-pmodal__search:focus { border-color:#ff385d; box-shadow:0 0 0 3px rgba(255,56,93,0.12); }
/* Range slider — service radius in profile edit. Pink fill via gradient
   (set inline by JS based on current value) so the user sees the selected
   portion clearly. */
.ep-range-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 5px;
    background: linear-gradient(to right, #ff385d 12%, #e5e7eb 12%);
    border-radius: 3px;
    outline: none;
}
.ep-range-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    background: #fff;
    border: 3px solid #ff385d;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 1px 4px rgba(0,0,0,0.12);
    margin-top: -7px;
}
.ep-range-slider::-moz-range-thumb {
    width: 18px;
    height: 18px;
    background: #fff;
    border: 3px solid #ff385d;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 1px 4px rgba(0,0,0,0.12);
}

.ep-pmodal__chips { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:18px; }
/* Long categories (50+ services) collapse beyond the first 15 chips.
   JS adds a "Show more / Show less" toggle below when needed. */
.ep-pmodal__chips.ep-pmodal__chips--collapsed > .ep-chip:nth-child(n+16) { display: none; }
.ep-pmodal__chips-toggle {
    display: inline-flex; align-items: center;
    padding: 6px 14px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 9999px;
    font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 600; color: #ff385d;
    cursor: pointer;
    margin: 4px 0 14px;
    transition: background 0.15s, border-color 0.15s;
}
.ep-pmodal__chips-toggle:hover { background: #fef2f4; border-color: #ff385d; }
.ep-pmodal__group { margin-bottom:14px; }
.ep-pmodal__group:last-child { margin-bottom:0; }
.ep-pmodal__group-title {
    font-family:'Inter',sans-serif; font-size:11px; font-weight:800;
    color:#94a3b8; letter-spacing:0.6px; text-transform:uppercase;
    margin:0 0 8px;
}
.ep-pmodal__group .ep-pmodal__chips { margin-bottom:0; }
.ep-pmodal__custom { display:flex; gap:8px; padding-top:14px; border-top:1px solid #f1f5f9; }
.ep-pmodal__custom .ep-fdrop__btn { height:40px; min-width:160px; padding:0 14px; }
.ep-pmodal__custom > input[type="text"] {
    flex:1; min-width:0;
    height:40px; padding:0 14px;
    border:1px solid #e2e8f0; border-radius:10px;
    font-family:'Inter',sans-serif; font-size:13px;
    outline:none;
    transition:border-color 0.15s, box-shadow 0.15s;
}
.ep-pmodal__custom > input[type="text"]:focus { border-color:#ff385d; box-shadow:0 0 0 3px rgba(255,56,93,0.12); }
.ep-pmodal__custom > button {
    height:40px; padding:0 16px;
    background:#ff385d; color:#fff;
    border:none; border-radius:10px;
    font-family:'Inter',sans-serif; font-size:13px; font-weight:700;
    cursor:pointer;
    box-shadow:0 4px 12px rgba(255,56,93,0.18);
    transition:background 0.15s;
}
.ep-pmodal__custom > button:hover:not(:disabled) { background:#e62e53; }
.ep-pmodal__custom > button:disabled { background:#cbd5e1; cursor:not-allowed; box-shadow:none; }
.ep-pmodal__foot { padding:14px 20px; border-top:1px solid #f1f5f9; display:flex; justify-content:flex-end; gap:8px; }
.ep-pmodal__done {
    padding:10px 22px;
    background:#ff385d; color:#fff;
    border:none; border-radius:10px;
    font-family:'Inter',sans-serif; font-size:13px; font-weight:700;
    cursor:pointer;
    box-shadow:0 4px 12px rgba(255,56,93,0.18);
}
.ep-pmodal__done:hover { background:#e62e53; }

@media (max-width:1024px) {
    .ep-grid { grid-template-columns:1fr; }
}
@media (max-width:768px) {
    .ep-content { padding: 20px var(--page-gutter); }
    .ep-head { flex-direction:column; align-items:stretch; }
    .ep-head__actions { width:100%; }
    .ep-head__actions .ep-btn { flex:1; }
    .ep-row { grid-template-columns:1fr; }
}

/* Testimonials list (slim cards on the edit page) */
.ep-testimonial-grid { display:flex; flex-direction:column; gap:10px; }
.ep-testimonial-grid:empty { display:none; }
.ep-testimonial-grid__empty {
    font-family:'Inter',sans-serif; font-size:13px; color:#94a3b8;
    font-style:italic; margin:0;
}
.ep-testimonial-grid .ep-testimonial-card:nth-child(n+3) { display:none; }
.ep-testimonial-grid__viewall {
    display:block; width:100%;
    text-align:center; padding:12px 0 4px; margin:6px 0 0;
    font-family:'Inter',sans-serif; font-size:13px; font-weight:600;
    color:#ff385d; text-decoration:none; cursor:pointer;
}
.ep-testimonial-grid__viewall:hover,
.ep-testimonial-grid__viewall:focus { text-decoration:none; }
.ep-testimonial-grid__viewall[hidden] { display:none; }

.ep-testimonial-card {
    position:relative;
    display:grid;
    grid-template-columns:52px 1fr;
    grid-template-areas:
        "avatar quote"
        "avatar expand"
        "avatar author";
    column-gap:12px; row-gap:3px;
    padding:10px 32px 10px 12px;
    background:#fff;
    border:1px solid #e2e8f0; border-radius:10px;
    transition:border-color 0.15s, box-shadow 0.15s;
}
.ep-testimonial-card:hover { border-color:#cbd5e1; box-shadow:0 2px 8px rgba(15,23,42,0.04); }
.ep-testimonial-card:hover .ep-testimonial-card__delete { opacity:1; }

.ep-testimonial-card__delete {
    position:absolute; top:6px; right:6px;
    width:22px; height:22px;
    padding:0; line-height:1;
    background:transparent; border:none;
    border-radius:50%;
    font-size:16px; color:#94a3b8;
    cursor:pointer; opacity:0;
    transition:opacity 0.15s, background 0.15s, color 0.15s;
    display:inline-flex; align-items:center; justify-content:center;
}
.ep-testimonial-card__delete:hover { background:#fef2f2; color:#b91c1c; }
.ep-testimonial-card__delete:focus-visible {
    opacity:1;
    outline:2px solid #ff385d; outline-offset:2px;
}

.ep-testimonial-card__avatar {
    grid-area:avatar;
    align-self:start;
    width:52px; height:52px;
    border-radius:50%; object-fit:cover; flex-shrink:0;
    background:#fde2e4;
    cursor:pointer;
}
.ep-testimonial-card__avatar--placeholder {
    display:flex; align-items:center; justify-content:center;
    font-family:'Inter',sans-serif; font-weight:700; color:#fff; font-size:18px;
    background:linear-gradient(135deg,#ff5277,#e5365a);
}

.ep-testimonial-card__quote {
    grid-area:quote;
    margin:0;
    font-family:'Inter',sans-serif; font-size:13px; line-height:1.45;
    color:#334155;
    display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical;
    overflow:hidden;
}
.ep-testimonial-card.is-expanded .ep-testimonial-card__quote {
    display:block; -webkit-line-clamp:unset; overflow:visible;
}
.ep-testimonial-card__expand {
    grid-area:expand;
    justify-self:start;
    padding:0;
    background:none; border:none;
    font-family:'Inter',sans-serif; font-size:12px; font-weight:600;
    color:#ff385d; cursor:pointer;
}
.ep-testimonial-card__expand:hover { text-decoration:underline; }
.ep-testimonial-card__author {
    grid-area:author;
    display:flex; align-items:center; gap:8px;
}
.ep-testimonial-card__name { font-family:'Inter',sans-serif; font-size:12px; font-weight:700; color:#0f172a; }
.ep-testimonial-card__date { font-family:'Inter',sans-serif; font-size:11px; color:#94a3b8; }

/* Add-testimonial modal form */
.ep-tform { display:flex; flex-direction:column; gap:14px; }
.ep-tform__photo { display:flex; align-items:center; gap:14px; }
.ep-tform__photo-preview {
    width:64px; height:64px; border-radius:50%; flex-shrink:0;
    background:#f8fafc; border:1px dashed #cbd5e1;
    display:flex; align-items:center; justify-content:center;
    overflow:hidden;
    font-family:'Inter',sans-serif; font-size:24px; color:#94a3b8;
}
.ep-tform__photo-preview img { width:100%; height:100%; object-fit:cover; }
.ep-tform__photo-btn {
    display:inline-flex; align-items:center;
    padding:8px 14px;
    background:#fff; border:1px solid #e2e8f0;
    border-radius:8px;
    font-family:'Inter',sans-serif; font-size:12px; font-weight:600;
    color:#334155; cursor:pointer;
    transition:all 0.15s;
}
.ep-tform__photo-btn:hover { background:#f8fafc; border-color:#cbd5e1; }
.ep-tform__field { display:flex; flex-direction:column; gap:6px; }
.ep-tform__field label { font-family:'Inter',sans-serif; font-size:12px; font-weight:600; color:#475569; }
.ep-tform__field input,
.ep-tform__field textarea {
    width:100%;
    padding:10px 12px;
    background:#fff; border:1px solid #e2e8f0;
    border-radius:9px;
    font-family:'Inter',sans-serif; font-size:13px; color:#0f172a;
    outline:none;
    transition:border-color 0.15s, box-shadow 0.15s;
}
.ep-tform__field input:focus,
.ep-tform__field textarea:focus { border-color:#ff385d; box-shadow:0 0 0 3px rgba(255,56,93,0.12); }
.ep-tform__field textarea { resize:vertical; min-height:90px; line-height:1.5; }
.ep-tform__error { color:#b91c1c; font-family:'Inter',sans-serif; font-size:12px; }

/* Phone country code dropdown — panel matches the button width exactly so it
   doesn't extend past the prefix divider. Scoped via wrapper ID so other
   inline ep-fdrops aren't affected. */
#epPhoneCountryDrop .ep-fdrop__panel {
    min-width: 0;      /* override the 140px inline default */
    width: 100%;       /* exactly the button's width */
    padding: 4px;
}
#epPhoneCountryDrop .ep-fdrop__search {
    margin: -4px -4px 4px;
    padding: 6px 8px;
    font-size: 12px;
}
#epPhoneCountryDrop .ep-fdrop__list { max-height: 220px; }

/* ---- Inquiry form: ISD phone + currency prefixes are visually identical ---- */
/* Same width, padding, divider and font for both prefix triggers. */
#siPhoneCountryDrop,
#siCurrencyDrop { align-self: stretch; }
#siPhoneCountryDrop .ep-fdrop__btn,
#siCurrencyDrop .ep-fdrop__btn {
    min-width: 64px;
    padding: 0 10px 0 14px;
    gap: 6px;
    background: transparent;
    border: none; border-right: 1px solid #e2e8f0; border-radius: 0;
    font-family: 'Inter', sans-serif; font-size: 13.5px; font-weight: 600; color: #0f172a;
}
#siPhoneCountryDrop .ep-fdrop__btn:hover,
#siCurrencyDrop .ep-fdrop__btn:hover { background: #f8fafc; }
#siPhoneCountryDrop .ep-fdrop__label,
#siCurrencyDrop .ep-fdrop__label { flex: 1; text-align: left; }

/* Both dropdown panels identical — same width, search and item padding. */
#siPhoneCountryDrop .ep-fdrop__panel,
#siCurrencyDrop .ep-fdrop__panel { min-width: 0; width: 120px; max-width: 120px; padding: 6px; }
#siPhoneCountryDrop .ep-fdrop__search,
#siCurrencyDrop .ep-fdrop__search { margin: -6px -6px 6px; padding: 8px 10px; font-size: 12.5px; border-bottom: 1px solid #f1f5f9; }
#siPhoneCountryDrop .ep-fdrop__list,
#siCurrencyDrop .ep-fdrop__list { max-height: 240px; }
#siPhoneCountryDrop .ep-fdrop__item,
#siCurrencyDrop .ep-fdrop__item { padding: 5px 10px; font-size: 13px; }

/* Budget row matches the height of the standard si-inputs. */
.si-budget { padding: 0 12px 0 0; }
.si-budget .si-input--budget { padding: 11px 0; }
#epPhoneCountryDrop .ep-fdrop__item { padding: 6px 8px; font-size: 13px; }

/* ============================================================
   Client-facing delivered gallery (bookings/gallery.blade.php)
   ============================================================ */
.gal-head { margin-top: 8px; }
.gal-head__title { font-family:'Inter',sans-serif; font-size:var(--panel-title-size); font-weight:var(--panel-title-weight); color:#181012; }
.gal-head__meta { font-family:'Inter',sans-serif; font-size:13px; color:#64748b; margin-top:4px; }
.gal-head__note { font-family:'Inter',sans-serif; font-size:14px; color:#334155; font-style:italic; margin-top:10px; padding-left:12px; border-left:3px solid #ff385d; }
.gal-state { text-align:center; padding:64px 24px; background:#fff; border:1px dashed #e5e7eb; border-radius:16px; margin-top:20px; }
.gal-state__icon { font-size:40px; margin-bottom:12px; }
.gal-state__title { font-family:'Inter',sans-serif; font-size:18px; font-weight:700; color:#1f2937; }
.gal-state__msg { font-family:'Inter',sans-serif; font-size:var(--panel-subtitle-size); color:var(--panel-subtitle-color); margin-top:6px; max-width:420px; margin-left:auto; margin-right:auto; line-height:1.6; }
.gallery-item__info { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.gal-download { flex-shrink:0; display:inline-flex; align-items:center; justify-content:center; width:30px; height:30px; border-radius:8px; background:#f1f5f9; color:#475569; transition:background 0.15s, color 0.15s; }
.gal-download:hover { background:#ff385d; color:#fff; }

/* ============================================================
   Quote received card (client accepts/declines on booking detail)
   ============================================================ */
.abd-quote { background:linear-gradient(135deg,#fff 0%,#fff7f8 100%); border:1.5px solid #ffd4dd; border-radius:16px; padding:20px 22px; box-shadow:0 4px 14px rgba(255,56,93,0.08); }
.abd-quote__head { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.abd-quote__title { font-family:'Inter',sans-serif; font-size:16px; font-weight:800; color:#181012; }
.abd-quote__amount { font-family:'Inter',sans-serif; font-size:22px; font-weight:800; color:#ff385d; }
.abd-quote__rows { margin:14px 0 0; display:grid; gap:8px; }
.abd-quote__row { display:flex; justify-content:space-between; gap:12px; font-family:'Inter',sans-serif; font-size:13px; }
.abd-quote__row dt { color:#64748b; }
.abd-quote__row dd { color:#0f172a; font-weight:600; margin:0; }
.abd-quote__msg { margin:14px 0 0; font-family:'Inter',sans-serif; font-size:13.5px; font-style:italic; color:#334155; padding-left:12px; border-left:3px solid #ff385d; line-height:1.5; }
.abd-quote__actions { display:flex; gap:10px; margin-top:18px; flex-wrap:wrap; }
.abd-quote__btn { border:none; border-radius:10px; font-family:'Inter',sans-serif; font-size:14px; font-weight:700; cursor:pointer; padding:12px 22px; transition:background 0.15s, transform 0.1s; }
.abd-quote__btn--accept { background:#ff385d; color:#fff; flex:1; min-width:200px; }
.abd-quote__btn--accept:hover { background:#e62e53; }
.abd-quote__btn--decline { background:#f1f5f9; color:#475569; }
.abd-quote__btn--decline:hover { background:#e2e8f0; }

/* ============================================================
   SAVED page — comfortable padding + spacing on mobile/tablet.
   (Scoped to body.page--saved so nothing else is affected.)
   A later base `.dashboard-content { padding:32px 40px }` clobbers the
   shared ≤1024 override, leaving 40px on tablet — re-assert it here.
   ============================================================ */

/* Header typography — match the Inquiries/Bookings pages exactly:
   26px/800 title on every breakpoint + 14px/20px subtitle. The shared
   `.dashboard-header` base shrinks these on mobile, so re-assert here
   (scoped to .page--saved so other dashboards keep their own sizing). */
.page--saved .dashboard-header__title { font-size: 26px; line-height: 1.2; }
.page--saved .dashboard-header__subtitle { font-size: 14px; line-height: 20px; }

@media (max-width: 1024px) {
    .page--saved .dashboard-content { padding: 24px var(--page-gutter) 32px; gap: 16px; }
}
@media (max-width: 768px) {
    /* Base `.dashboard-header__title` drops to 22px here — hold it at 26px. */
    .page--saved .dashboard-header__title { font-size: 26px; line-height: 1.2; }
}
@media (max-width: 600px) {
    .page--saved .dashboard-content { padding: 16px var(--page-gutter) 24px; }
    .page--saved .dashboard-header { gap: 6px; }
    /* Empty state a little larger on phones */
    .page--saved .bk-empty--hero h3 { font-size: 19px !important; }
    .page--saved .bk-empty--hero p { font-size: 14px !important; }
}

/* Portfolio-picker custom-value row: the 160px dropdown + Add button squeeze the
   text input to ~10px on phones — let it wrap so the input is usable. */
@media (max-width: 480px) {
    .ep-pmodal__custom { flex-wrap: wrap; }
    .ep-pmodal__custom .ep-fdrop__btn { min-width: 0; flex: 1 1 auto; }
    .ep-pmodal__custom > input[type="text"] { flex: 1 1 100%; }
}