/* 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 — align logo with sidebar's menu item content */
.page-container--dashboard .header { padding: 12px 32px 12px 32px; }
.page-container--dashboard .header__left { gap: 0; }
/* Logo: match homepage size/spacing exactly; only reserve sidebar width. */
.page-container--dashboard .logo { min-width: calc(240px - 32px); 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 {
    width: 240px;
    min-height: calc(100vh - 80px);
    background: #fff;
    border-right: 1px solid #e5e7eb;
    padding: 28px 20px 12px;
    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;
    margin: auto -20px 0;
    padding: 18px 20px 4px;
    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: "Manrope", 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: "Manrope", 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: #ff385c;
}

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

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

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

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

.upgrade-card__text {
    font-family: "Manrope", 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: "Manrope", sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: #ff385c;
    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 40px 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: "Manrope", sans-serif;
    font-size: 26px;
    font-weight: 800;
    color: #0f172a;
    line-height: 1.2;
    letter-spacing: -0.4px;
    margin: 0;
}

.dashboard-header__subtitle {
    font-family: "Inter", sans-serif;
    font-size: 13px;
    font-weight: 400;
    color: #64748b;
    line-height: 1.5;
    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: "Manrope", sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: #64748b;
    line-height: 20px;
}

.stat-card__value {
    font-family: "Manrope", 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: #ff385c;
    color: #ffffff;
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: "Manrope", 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: "Manrope", sans-serif;
    cursor: pointer;
    transition: all 0.2s ease;
}

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

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

/* Responsive */
@media (max-width: 1024px) {
    .dashboard-header {
        flex-direction: column;
        gap: 16px;
    }

    .dashboard-header__btn {
        width: 100%;
        text-align: center;
    }
}

@media (max-width: 768px) {
    .dashboard-container {
        flex-direction: column;
    }

    .dashboard-sidebar {
        width: 100%;
        min-height: auto;
        border-right: none;
        border-bottom: 1px solid #e5e7eb;
        padding: 16px;
    }

    .dashboard-sidebar .profile-card {
        order: 0;
        margin: 0 -16px 16px;
        padding: 0 16px 16px;
        border-top: none;
        border-bottom: 1px solid #e5e7eb;
    }

    .sidebar-nav__link {
        justify-content: flex-start;
    }

    .dashboard-content {
        padding: 12px 16px 20px;
    }

    .dashboard-header__title {
        font-size: 22px;
        line-height: 1.25;
    }

    .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 40px; }

/* Welcome header */
.dash-hero { display:flex; align-items:flex-start; justify-content:space-between; gap:24px; }
.dash-hero__title { font-family:'Manrope',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:#e6324f; 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:'Manrope',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:'Manrope',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:#e6324f; 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:'Manrope',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:'Manrope',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:'Manrope',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:'Manrope',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:'Manrope',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:'Manrope',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:'Manrope',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 16px; }
    .dash-hero { flex-direction:column; align-items:flex-start; }
    .dash-stats { grid-template-columns:1fr 1fr; gap:12px; }
    .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 40px; }

/* Page title row */
.st-head { display:flex; align-items:flex-start; justify-content:space-between; gap:24px; }
.st-head__title { font-family:'Manrope',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:#e6324f; 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:'Manrope',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:'Manrope',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:'Manrope',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:'Manrope',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:#e6324f; }
.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:'Manrope',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:#e6324f; }
@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 16px; }
    .st-head { flex-direction:column; align-items:stretch; }
    .st-head__save { align-self:flex-start; }
}

/* ============================================================
   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 40px; gap:18px; }

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

.bookmark-duration {
    position:absolute; top:12px; right:12px;
    background:rgba(255,56,93,0.1); color:#ff385d;
    font-family:'Manrope',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:'Manrope',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 36px; }

.bk-head { display:flex; align-items:flex-start; justify-content:space-between; gap:24px; }
.bk-head__title { font-family:'Manrope',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:#e6324f; 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:#e6324f !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:'Manrope',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:'Manrope',sans-serif; font-size:16px; font-weight:800; color:#0f172a; }

.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-card__actions { display:flex; justify-content:flex-end; gap:10px; padding:12px 20px; border-top:1px solid #f1f5f9; background:#fafbfc; }
.bk-btn { display:inline-flex; align-items:center; justify-content:center; 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:'Manrope',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:#e6324f; transform:translateY(-1px); }
.bk-empty__btn:hover { background:#e6324f; }
.bk-empty__svg-center { margin:0 auto; }

@media (max-width:768px) {
    .bookings-content { padding:20px 16px; }
    .bk-head { flex-direction:column; align-items:stretch; }
    .bk-head__cta { align-self:flex-start; }
    .bk-tabs { flex-wrap:wrap; }
    .bk-card__main { flex-wrap:wrap; }
    .bk-card__right { flex-direction:row; align-items:center; width:100%; justify-content:space-between; margin-top:6px; }
    .bk-card__actions { flex-wrap:wrap; }
    .bk-btn { flex:1; min-width:120px; }
}

/* ============================================================
   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:'Manrope',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:'Manrope',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:'Manrope',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:'Manrope',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:'Manrope',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:'Manrope',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:#e6324f; border-color:#e6324f; }

.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); }

/* 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:'Manrope',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:'Manrope',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-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:'Manrope',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:48px 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:'Manrope',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:#e6324f; 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:'Manrope',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(120px, 1fr));
    gap:12px;
    padding:4px 20px 20px;
}
.dlv-photo {
    position:relative;
    margin:0;
    aspect-ratio:1 / 1;
    border-radius:10px;
    overflow:hidden;
    background:#f1f5f9;
    border:1px solid rgba(255,255,255,0.6);
    box-shadow:inset 0 0 0 1px rgba(0,0,0,0.03);
}
.dlv-photo img { width:100%; height:100%; object-fit:cover; display:block; }
.dlv-photo img,
.dlv-photo video { width:100%; height:100%; object-fit:cover; display:block; }
.dlv-photo__name {
    position:absolute; top:8px; left:8px;
    padding:3px 8px;
    background:#1f2937; color:#fff;
    font-family:'Inter',sans-serif; font-size:11px; font-weight:600;
    border-radius:5px;
    max-width:calc(100% - 16px);
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
/* 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:'Manrope',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:#e6324f; transform:translateY(-1px); }
.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:36px 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:'Manrope',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:'Manrope',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:'Manrope',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:'Manrope',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; }

/* 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:#e6324f; 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 40px; }

.nf-head { display:flex; align-items:flex-start; justify-content:space-between; gap:24px; }
.nf-head__title { font-family:'Manrope',sans-serif; font-size:22px; font-weight:800; color:#0f172a; margin:0 0 2px; line-height:1.2; }
.nf-head__subtitle { font-family:'Inter',sans-serif; font-size:13px; color:#64748b; 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:'Manrope',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:'Manrope',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:'Manrope',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 16px; }
    .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 40px; }
.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:'Manrope',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:'Manrope',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:'Manrope',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:'Manrope',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:#e6324f; 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:'Manrope',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 16px; }
    .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 40px; }

.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:'Manrope',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; }
.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:'Manrope',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:'Manrope',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:#e6324f; }

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

@media (max-width:768px) {
    .abd-content { padding:20px 16px; }
    .abd-topbar { flex-direction:column; align-items:stretch; gap:14px; }
    .abd-topbar__right { justify-content:flex-start; }
    .abd-title { font-size:20px; }
    .abd-card { padding:18px 18px; }
    .abd-brief__value { max-width:55%; font-size:13.5px; }
}

/* ============================================================
   Send Inquiry / Booking Request (.si-*) — inquiries/send.blade.php
   ============================================================ */
.si-content { flex:1; min-width:0; padding:32px 40px; }
.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:'Manrope',sans-serif; font-size:var(--panel-title-size); font-weight:var(--panel-title-weight); color:#0f172a; margin:0 0 6px; letter-spacing:-0.01em; }
.si-subtitle { font-family:'Inter',sans-serif; font-size:var(--panel-subtitle-size); color:var(--panel-subtitle-color); 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:'Manrope',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-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:#e6324f; 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:'Manrope',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:'Manrope',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:'Manrope',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 16px; }
    .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 40px; }

.billing-title { font-family:'Manrope',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); 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:'Manrope',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:'Manrope',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:#e6324f; 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:'Manrope',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:'Manrope',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:'Manrope',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:#e6324f; transform:translateY(-1px); }
.billing-empty__btn:hover { background:#e6324f; }
.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 16px; }
    .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%; }
    .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 40px; }

.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:'Manrope',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:'Manrope',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:'Manrope',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:#e6324f; }
.td-modal__save:disabled { background:#cbd5e1; cursor:not-allowed; box-shadow:none; }

@media (max-width:768px) {
    .td-content { padding:20px 16px; }
    .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 40px; }

.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:'Manrope',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:#e6324f; 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:#e6324f; }
.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:'Manrope',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: 'Manrope', 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; }
.pf-modal__preview img { opacity: 0; transition: opacity 0.18s ease-out; }
.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: #e6324f; }
.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: #e6324f; }
.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: #e6324f; }

.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: 'Manrope', 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: #e6324f; }
.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:'Manrope',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:#e6324f; }
@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:'Manrope',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 16px 22px; }
    .pf-grid { grid-template-columns:repeat(2, 1fr); }
    .pf-head { flex-direction:column; align-items:stretch; }
}

/* ============================================================
   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: 'Manrope', 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: 'Manrope', sans-serif;
    font-size: 13px; font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
    background: #ff385c; color: #fff;
}
.client-profile__edit-btn:hover { background: #e6324f; }

.client-profile__cancel-btn {
    display: none;
    align-items: center; gap: 6px;
    padding: 8px 20px;
    border-radius: 8px;
    font-family: 'Manrope', 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: #ff385c;
    display: flex; align-items: center; justify-content: center;
    font-family: 'Manrope', 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: 'Manrope', 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 { display: flex; flex-direction: column; gap: 6px; }
.client-profile__field-label { font-family: 'Manrope', 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: 'Manrope', 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: #ff385c; 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 40px; }

.ep-head { display:flex; align-items:flex-start; justify-content:space-between; gap:24px; padding-bottom:20px; }
.ep-head__title { font-family:'Manrope',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); 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:#e6324f; 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:'Manrope',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:'Manrope',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:'Manrope',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:'Manrope',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:'Manrope',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:#e6324f; }
.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:#e6324f; }

@media (max-width:1024px) {
    .ep-grid { grid-template-columns:1fr; }
}
@media (max-width:768px) {
    .ep-content { padding:20px 16px; }
    .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:4px 0 0; margin-bottom:-10px;
    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:'Manrope',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:'Manrope',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:'Manrope',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:'Manrope',sans-serif; font-size:16px; font-weight:800; color:#181012; }
.abd-quote__amount { font-family:'Manrope',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:'Manrope',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:#e6324f; }
.abd-quote__btn--decline { background:#f1f5f9; color:#475569; }
.abd-quote__btn--decline:hover { background:#e2e8f0; }