/*
Theme Name:  SurePro Services
Theme URI:   https://surepro.services
Description: SurePro Pro marketplace theme. Elementor-compatible. Includes Pro onboarding, lead routing, admin approval workflow, and Pro dashboard portal.
Version:     1.0.0
Author:      SurePro
Author URI:  https://surepro.services
Text Domain: surepro
Tags:        custom-menu, custom-logo, elementor, Pro, marketplace
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 8.0
License:     GPL-2.0-or-later
*/

/* ============================================================
   SurePro Design Tokens
   ============================================================ */
:root {
    --sp-blue:        #1a56a0;
    --sp-blue-dark:   #0f3572;
    --sp-blue-light:  #2d72d2;
    --sp-gold:        #f59e0b;
    --sp-green:       #059669;
    --sp-green-light: #d1fae5;
    --sp-red:         #dc2626;
    --sp-red-light:   #fee2e2;
    --sp-yellow-light:#fef3c7;
    --sp-gray-50:     #f8fafc;
    --sp-gray-100:    #f1f5f9;
    --sp-gray-200:    #e2e8f0;
    --sp-gray-300:    #cbd5e1;
    --sp-gray-500:    #64748b;
    --sp-gray-700:    #334155;
    --sp-gray-900:    #0f172a;
    --sp-radius:      8px;
    --sp-radius-lg:   12px;
    --sp-shadow:      0 1px 3px rgba(0,0,0,0.08);
    --sp-shadow-md:   0 4px 12px rgba(0,0,0,0.10);
}

/* ============================================================
   Base Reset
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 15px;
    line-height: 1.6;
    color: var(--sp-gray-900);
    background: var(--sp-gray-50);
    margin: 0;
}

a { color: var(--sp-blue); text-decoration: none; }
a:hover { color: var(--sp-blue-dark); }

img { max-width: 100%; height: auto; }

/* ============================================================
   Utility Classes
   ============================================================ */
.sp-container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.sp-card { background: #fff; border-radius: var(--sp-radius-lg); border: 1px solid var(--sp-gray-200); padding: 24px; box-shadow: var(--sp-shadow); }
.sp-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.sp-grid-3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; }
.sp-grid-4 { display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; }
.sp-flex   { display: flex; align-items: center; }
.sp-gap-8  { gap: 8px; }
.sp-gap-12 { gap: 12px; }
.sp-gap-16 { gap: 16px; }
.sp-mt-8   { margin-top: 8px; }
.sp-mt-16  { margin-top: 16px; }
.sp-mt-24  { margin-top: 24px; }
.sp-mt-32  { margin-top: 32px; }
.sp-mb-16  { margin-bottom: 16px; }
.sp-mb-24  { margin-bottom: 24px; }
.sp-text-center { text-align: center; }
.sp-text-sm  { font-size: 13px; }
.sp-text-xs  { font-size: 11px; }
.sp-muted    { color: var(--sp-gray-500); }
.sp-bold     { font-weight: 700; }

/* ============================================================
   Buttons
   ============================================================ */
.sp-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    padding: 10px 20px; border-radius: var(--sp-radius);
    font-size: 14px; font-weight: 600; line-height: 1;
    border: none; cursor: pointer; transition: all .15s; text-decoration: none;
}
.sp-btn-primary   { background: var(--sp-blue);  color: #fff; }
.sp-btn-primary:hover { background: var(--sp-blue-dark); color: #fff; }
.sp-btn-secondary { background: #fff; color: var(--sp-gray-700); border: 1px solid var(--sp-gray-200); }
.sp-btn-secondary:hover { border-color: var(--sp-blue); color: var(--sp-blue); }
.sp-btn-success   { background: var(--sp-green); color: #fff; }
.sp-btn-success:hover { background: #047857; color: #fff; }
.sp-btn-danger    { background: var(--sp-red);   color: #fff; }
.sp-btn-danger:hover  { background: #b91c1c; color: #fff; }
.sp-btn-sm        { padding: 6px 14px; font-size: 12px; }
.sp-btn-lg        { padding: 14px 28px; font-size: 16px; }
.sp-btn-full      { width: 100%; }
.sp-btn:disabled  { opacity: .5; cursor: not-allowed; }

/* ============================================================
   Form Elements
   ============================================================ */
.sp-label {
    display: block; font-size: 13px; font-weight: 600;
    color: var(--sp-gray-700); margin-bottom: 6px;
}
.sp-label .required { color: var(--sp-red); margin-left: 2px; }

.sp-input, .sp-select, .sp-textarea {
    width: 100%; padding: 10px 14px;
    border: 1px solid var(--sp-gray-200); border-radius: var(--sp-radius);
    font-size: 14px; font-family: inherit; color: var(--sp-gray-900);
    background: #fff; transition: border-color .15s, box-shadow .15s;
    -webkit-appearance: none;
}
.sp-input:focus, .sp-select:focus, .sp-textarea:focus {
    outline: none; border-color: var(--sp-blue-light);
    box-shadow: 0 0 0 3px rgba(45,114,210,.12);
}
.sp-input.error, .sp-select.error, .sp-textarea.error {
    border-color: var(--sp-red);
}
.sp-textarea { resize: vertical; min-height: 100px; }
.sp-select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2364748b' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 36px; }
.sp-field { margin-bottom: 18px; }
.sp-field-error { font-size: 12px; color: var(--sp-red); margin-top: 4px; }
.sp-field-hint  { font-size: 12px; color: var(--sp-gray-500); margin-top: 4px; }

/* ============================================================
   Badges / Status
   ============================================================ */
.sp-badge {
    display: inline-flex; align-items: center;
    padding: 3px 10px; border-radius: 20px;
    font-size: 11px; font-weight: 700; letter-spacing: .04em;
    text-transform: uppercase;
}
.sp-badge-pending   { background: var(--sp-yellow-light); color: #92400e; }
.sp-badge-approved  { background: var(--sp-green-light);  color: #065f46; }
.sp-badge-rejected  { background: var(--sp-red-light);    color: #991b1b; }
.sp-badge-review    { background: #dbeafe; color: #1e40af; }
.sp-badge-suspended { background: var(--sp-gray-100);     color: var(--sp-gray-700); }
.sp-badge-matched   { background: #ede9fe; color: #5b21b6; }
.sp-badge-new       { background: var(--sp-yellow-light); color: #92400e; }
.sp-badge-completed { background: var(--sp-green-light);  color: #065f46; }

/* ============================================================
   Alerts
   ============================================================ */
.sp-alert { border-radius: var(--sp-radius); padding: 12px 16px; font-size: 14px; margin-bottom: 16px; }
.sp-alert-info    { background: #eff6ff; border: 1px solid #bfdbfe; color: #1e40af; }
.sp-alert-success { background: var(--sp-green-light); border: 1px solid #6ee7b7; color: #065f46; }
.sp-alert-warning { background: var(--sp-yellow-light); border: 1px solid #fde68a; color: #92400e; }
.sp-alert-danger  { background: var(--sp-red-light); border: 1px solid #fca5a5; color: #991b1b; }

/* ============================================================
   Tables
   ============================================================ */
.sp-table-wrap { overflow-x: auto; border-radius: var(--sp-radius-lg); border: 1px solid var(--sp-gray-200); }
.sp-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.sp-table th {
    text-align: left; padding: 10px 16px;
    font-size: 11px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .06em; color: var(--sp-gray-500);
    border-bottom: 1px solid var(--sp-gray-200); background: var(--sp-gray-50);
}
.sp-table td {
    padding: 14px 16px; border-bottom: 1px solid var(--sp-gray-100);
    color: var(--sp-gray-700); vertical-align: middle;
}
.sp-table tr:last-child td { border-bottom: none; }
.sp-table tr:hover td { background: var(--sp-gray-50); }
.sp-table .col-primary { font-weight: 600; color: var(--sp-gray-900); }

/* ============================================================
   Step Indicator
   ============================================================ */
.sp-steps { display: flex; align-items: center; gap: 0; margin-bottom: 36px; justify-content: center; }
.sp-step  { display: flex; align-items: center; gap: 8px; }
.sp-step-num {
    width: 34px; height: 34px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 13px; font-weight: 700; flex-shrink: 0;
}
.sp-step-num.active { background: var(--sp-blue); color: #fff; }
.sp-step-num.done   { background: var(--sp-green); color: #fff; }
.sp-step-num.idle   { background: var(--sp-gray-200); color: var(--sp-gray-500); }
.sp-step-label { font-size: 13px; font-weight: 600; }
.sp-step-label.active { color: var(--sp-blue); }
.sp-step-label.done   { color: var(--sp-green); }
.sp-step-label.idle   { color: var(--sp-gray-500); }
.sp-step-line { height: 2px; width: 48px; background: var(--sp-gray-200); margin: 0 8px; flex-shrink: 0; }
.sp-step-line.done { background: var(--sp-green); }

/* ============================================================
   Stat Cards
   ============================================================ */
.sp-stat-card { background: #fff; border-radius: var(--sp-radius-lg); border: 1px solid var(--sp-gray-200); padding: 20px 24px; }
.sp-stat-value { font-size: 36px; font-weight: 800; line-height: 1; }
.sp-stat-label { font-size: 13px; color: var(--sp-gray-500); margin-top: 4px; }
.sp-stat-icon  { font-size: 28px; margin-bottom: 8px; }

/* ============================================================
   Checkbox / Radio Grid
   ============================================================ */
.sp-check-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px,1fr)); gap: 8px; }
.sp-check-item {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 14px; border: 1px solid var(--sp-gray-200);
    border-radius: var(--sp-radius); cursor: pointer; transition: all .15s;
    font-size: 13px; font-weight: 500; color: var(--sp-gray-700);
}
.sp-check-item:hover   { border-color: var(--sp-blue-light); background: #f0f6ff; }
.sp-check-item.checked { border-color: var(--sp-blue); background: #eff6ff; color: var(--sp-blue); }
.sp-check-item input[type="checkbox"],
.sp-check-item input[type="radio"] { accent-color: var(--sp-blue); width: 15px; height: 15px; }

/* ============================================================
   Admin Layout
   ============================================================ */
.sp-admin-wrap  { display: grid; grid-template-columns: 240px 1fr; min-height: 100vh; }
.sp-sidebar     { background: var(--sp-gray-900); position: sticky; top: 0; height: 100vh; overflow-y: auto; }
.sp-sidebar-logo { padding: 24px; border-bottom: 1px solid rgba(255,255,255,.08); }
.sp-sidebar-logo .name { font-size: 20px; font-weight: 800; color: #fff; }
.sp-sidebar-logo .name span { color: #60a5fa; }
.sp-sidebar-logo .sub  { font-size: 11px; color: rgba(255,255,255,.35); margin-top: 2px; font-weight: 500; text-transform: uppercase; letter-spacing: .08em; }
.sp-sidebar-section { padding: 16px 20px 4px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: rgba(255,255,255,.25); }
.sp-sidebar-item {
    display: flex; align-items: center; gap: 10px; padding: 10px 20px;
    font-size: 14px; font-weight: 500; color: rgba(255,255,255,.65);
    cursor: pointer; transition: all .15s; text-decoration: none;
}
.sp-sidebar-item:hover { background: rgba(255,255,255,.06); color: #fff; }
.sp-sidebar-item.active { background: rgba(45,114,210,.2); color: #60a5fa; }
.sp-sidebar-item .icon { font-size: 16px; width: 20px; text-align: center; }
.sp-main-content { padding: 32px; overflow-y: auto; }
.sp-page-header { margin-bottom: 28px; }
.sp-page-header h1 { font-size: 26px; font-weight: 800; margin: 0 0 6px; }
.sp-page-header p  { color: var(--sp-gray-500); margin: 0; font-size: 14px; }

/* ============================================================
   Modal / Overlay
   ============================================================ */
.sp-modal-overlay {
    position: fixed; inset: 0; background: rgba(0,0,0,.5);
    z-index: 9999; display: flex; align-items: center; justify-content: center; padding: 24px;
}
.sp-modal {
    background: #fff; border-radius: 16px; width: 100%; max-width: 760px;
    max-height: 90vh; display: flex; flex-direction: column; overflow: hidden;
}
.sp-modal-header {
    padding: 24px 28px; border-bottom: 1px solid var(--sp-gray-200);
    display: flex; justify-content: space-between; align-items: flex-start;
    flex-shrink: 0;
}
.sp-modal-header h2 { margin: 0; font-size: 20px; font-weight: 800; }
.sp-modal-close { background: none; border: none; font-size: 26px; cursor: pointer; color: var(--sp-gray-400); line-height: 1; padding: 0; }
.sp-modal-body   { flex: 1; overflow-y: auto; padding: 28px; }
.sp-modal-footer {
    padding: 20px 28px; border-top: 1px solid var(--sp-gray-200);
    display: flex; gap: 12px; justify-content: space-between; flex-shrink: 0;
}
.sp-modal-tabs {
    display: flex; border-bottom: 1px solid var(--sp-gray-200);
    padding: 0 28px; flex-shrink: 0;
}
.sp-modal-tab {
    padding: 12px 16px; background: none; border: none;
    border-bottom: 2px solid transparent;
    font-size: 14px; font-weight: 500; cursor: pointer;
    color: var(--sp-gray-500); transition: all .15s;
}
.sp-modal-tab.active { border-bottom-color: var(--sp-blue); color: var(--sp-blue); font-weight: 700; }
.sp-tab-content { display: none; }
.sp-tab-content.active { display: block; }

/* ============================================================
   Loading Spinner
   ============================================================ */
.sp-spinner {
    display: inline-block; width: 18px; height: 18px;
    border: 2px solid var(--sp-gray-200); border-top-color: var(--sp-blue);
    border-radius: 50%; animation: sp-spin .7s linear infinite;
}
@keyframes sp-spin { to { transform: rotate(360deg); } }

/* ============================================================
   Pro Dashboard
   ============================================================ */
.sp-dash-nav {
    background: #fff; border-bottom: 1px solid var(--sp-gray-200);
    padding: 0 32px; display: flex; align-items: center; height: 60px; gap: 0;
}
.sp-dash-tab {
    padding: 0 18px; height: 60px; display: flex; align-items: center;
    font-size: 14px; font-weight: 500; color: var(--sp-gray-500);
    border-bottom: 2px solid transparent; cursor: pointer;
    background: none; border-top: none; border-left: none; border-right: none;
    transition: all .15s;
}
.sp-dash-tab.active { color: var(--sp-blue); border-bottom-color: var(--sp-blue); font-weight: 700; }
.sp-dash-tab:hover  { color: var(--sp-gray-900); }

/* ============================================================
   Client Request Form
   ============================================================ */
.sp-request-wrap {
    min-height: 100vh;
    background: linear-gradient(135deg, var(--sp-blue-dark) 0%, var(--sp-blue) 100%);
    padding: 48px 20px;
}
.sp-request-card { background: #fff; border-radius: 16px; overflow: hidden; max-width: 680px; margin: 0 auto; }
.sp-request-progress { height: 4px; background: var(--sp-gray-100); }
.sp-request-progress-bar { height: 4px; background: var(--sp-blue); transition: width .3s; }
.sp-request-body { padding: 36px; }
.sp-service-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px,1fr)); gap: 10px; }
.sp-service-card {
    border: 2px solid var(--sp-gray-200); border-radius: var(--sp-radius-lg);
    padding: 16px 12px; text-align: center; cursor: pointer; transition: all .15s;
}
.sp-service-card:hover  { border-color: var(--sp-blue-light); background: #f0f6ff; }
.sp-service-card.active { border-color: var(--sp-blue); background: #eff6ff; }
.sp-service-card .icon  { font-size: 32px; display: block; margin-bottom: 8px; }
.sp-service-card .name  { font-size: 13px; font-weight: 600; color: var(--sp-gray-700); }
.sp-service-card.active .name { color: var(--sp-blue); }
.sp-zip-big { font-size: 28px; font-weight: 800; letter-spacing: .2em; text-align: center; }

/* ============================================================
   Elementor Widgets
   ============================================================ */
.elementor-widget-sp_contractor_form .sp-card,
.elementor-widget-sp_client_request .sp-request-wrap,
.elementor-widget-sp_contractor_dashboard .sp-dash-nav,
.elementor-widget-sp_admin_panel .sp-admin-wrap {
    /* Elementor passes through cleanly */
}

/* ============================================================
   Responsive — Mobile First
   ============================================================ */

/* ── Tablet (≤900px) ─────────────────────────────────────── */
@media (max-width: 900px) {
    /* Stat grid: 2 columns on tablet */
    .sp-grid-4 { grid-template-columns: 1fr 1fr; }
    /* Plan cards: stack to 1 col */
    .sp-grid-3 { grid-template-columns: 1fr; }
}

/* ── Mobile (≤768px) ─────────────────────────────────────── */
@media (max-width: 768px) {

    /* Admin */
    .sp-admin-wrap   { grid-template-columns: 1fr; }
    .sp-sidebar      { display: none; }
    .sp-main-content { padding: 16px; }

    /* Grids → single column */
    .sp-grid-2,
    .sp-grid-3,
    .sp-grid-4 { grid-template-columns: 1fr; }

    /* Cards */
    .sp-card { padding: 16px; }

    /* Step indicator */
    .sp-steps      { flex-wrap: wrap; gap: 8px; justify-content: flex-start; }
    .sp-step-line  { display: none; }
    .sp-step-label { font-size: 12px; }

    /* ── Pro application form ── */
    #sp-contractor-form { padding: 20px 12px; }

    /* Service tree: stack category + sub columns */
    #sp-services-tree > div[style*="grid-template-columns:200px"] {
        display: flex !important;
        flex-direction: column !important;
        min-height: unset !important;
    }
    #sp-cat-list {
        border-right: none !important;
        border-bottom: 1px solid var(--sp-gray-200);
        padding-right: 0 !important;
        padding-bottom: 12px;
        margin-bottom: 12px;
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
    }
    #sp-sub-list { padding-left: 0 !important; }

    /* ── Pro dashboard ── */
    .sp-dash-nav {
        padding: 0 14px;
        height: auto;
        flex-wrap: wrap;
        gap: 8px;
        padding-top: 10px;
        padding-bottom: 10px;
    }
    .sp-dash-nav > div:first-child { font-size: 15px !important; }

    /* Support button in nav */
    .sp-dash-nav a[href^="mailto"] {
        padding: 6px 12px !important;
        font-size: 12px !important;
    }

    /* Dashboard inner padding */
    #sp-contractor-dashboard > div[style*="padding:32px"] {
        padding: 16px 14px !important;
    }

    /* Tabs: scrollable horizontal row */
    #sp-contractor-dashboard > div[style*="padding:32px"] > div[style*="border-bottom"] {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        flex-wrap: nowrap;
        gap: 0;
        padding-bottom: 0;
    }
    .sp-dash-tab {
        padding: 0 12px;
        font-size: 13px;
        white-space: nowrap;
        height: 48px;
    }

    /* Lead cards: stack info + buttons */
    #sp-leads-list > div > div[style*="display:flex;align-items:flex-start"] {
        flex-direction: column !important;
        gap: 14px !important;
    }
    #sp-leads-list .sp-badge { font-size: 10px; }

    /* Lead action buttons: full width */
    #sp-leads-list div[style*="min-width:130px"] {
        min-width: unset !important;
        width: 100%;
        flex-direction: row !important;
        gap: 8px !important;
    }
    #sp-leads-list div[style*="min-width:130px"] button {
        flex: 1;
    }

    /* Lead info columns: wrap */
    #sp-leads-list div[style*="display:flex;gap:24px"] {
        gap: 12px !important;
        flex-wrap: wrap !important;
    }

    /* Job cards: stack info + actions */
    #sp-dash-jobs > div > div > div[style*="display:flex;align-items:flex-start;justify-content:space-between"] {
        flex-direction: column !important;
        gap: 14px !important;
    }
    #sp-dash-jobs div[style*="min-width:160px"] {
        min-width: unset !important;
        width: 100%;
    }
    #sp-dash-jobs div[style*="min-width:160px"] button {
        width: 100%;
    }
    #sp-dash-jobs div[style*="display:flex;flex-wrap:wrap;gap:20px"] {
        gap: 10px !important;
    }

    /* Billing: status bar stack */
    #sp-dash-billing > div[style*="display:grid"] {
        grid-template-columns: 1fr 1fr !important;
    }

    /* Billing: plan cards single col */
    #sp-dash-billing > div[style*="repeat(auto-fit,minmax(240px"] {
        grid-template-columns: 1fr !important;
    }

    /* Purchase history table: scrollable */
    #sp-dash-billing .sp-card table {
        font-size: 12px;
    }
    #sp-dash-billing > div:last-child {
        overflow-x: auto;
    }

    /* Profile tab grids already use sp-grid-2 which collapses above */
    #sp-dash-profile { max-width: 100% !important; }
    #sp-dash-profile > div { max-width: 100% !important; }

    /* ── Client request form ── */
    .sp-request-wrap  { padding: 20px 12px; }
    .sp-request-body  { padding: 20px 16px; }
    .sp-service-grid  { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
    .sp-service-card  { padding: 12px 8px; }
    .sp-service-card .icon { font-size: 26px; }
    .sp-zip-big       { font-size: 22px; letter-spacing: .1em; }

    /* ── Pro login ── */
    .sp-login-wrap    { padding: 24px 14px; }

    /* ── Tables: add horizontal scroll ── */
    .sp-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .sp-table th,
    .sp-table td   { white-space: nowrap; padding: 10px 12px; font-size: 13px; }

    /* ── Modals: full screen on mobile ── */
    .sp-modal-overlay { padding: 0; align-items: flex-end; }
    .sp-modal         { max-width: 100%; border-radius: 16px 16px 0 0; max-height: 95vh; }
    .sp-modal-header,
    .sp-modal-body,
    .sp-modal-footer  { padding: 16px 18px; }
    .sp-modal-tabs    { padding: 0 18px; overflow-x: auto; }

    /* ── Payment success banner ── */
    #sp-payment-success-banner {
        padding: 12px 14px !important;
        gap: 10px !important;
    }
    #sp-payment-success-banner > div:first-child { font-size: 24px !important; }
    #sp-payment-success-banner > div:nth-child(2) > div:first-child { font-size: 14px !important; }
}

/* ── Small mobile (≤480px) ───────────────────────────────── */
@media (max-width: 480px) {

    /* Stat grid: 2 cols even on small mobile */
    .sp-grid-4 { grid-template-columns: 1fr 1fr; }
    .sp-stat-card { padding: 14px 12px; }
    .sp-stat-value { font-size: 28px; }
    .sp-stat-icon  { font-size: 22px; margin-bottom: 6px; }

    /* Step indicator: numbers only on very small screens */
    .sp-step-label { display: none; }
    .sp-steps      { gap: 6px; }

    /* Nav: business name smaller */
    .sp-dash-nav > div:first-child { font-size: 14px !important; }

    /* Billing status: 1 col */
    #sp-dash-billing > div[style*="display:grid"] {
        grid-template-columns: 1fr !important;
    }

    /* Buttons: full width in forms */
    .sp-btn-lg { padding: 12px 20px; font-size: 15px; width: 100%; }

    /* Service cards: 2 per row */
    .sp-service-grid { grid-template-columns: 1fr 1fr; }

    /* Form: reduce padding */
    #sp-contractor-form { padding: 16px 10px; }
    .sp-request-body { padding: 16px 12px; }
}

/* ============================================================
   Touch & Mobile UX improvements
   ============================================================ */

/* Larger touch targets on mobile */
@media (max-width: 768px) {
    .sp-btn         { min-height: 44px; }
    .sp-input,
    .sp-select,
    .sp-textarea    { min-height: 44px; font-size: 16px; } /* 16px prevents iOS zoom */
    .sp-check-item  { min-height: 44px; }
    .sp-dash-tab    { min-height: 44px; }

    /* Prevent iOS zoom on inputs */
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="password"],
    input[type="number"],
    input[type="url"],
    input[type="date"],
    select,
    textarea        { font-size: 16px !important; }

    /* Service tree: category list becomes chips */
    #sp-cat-list > div {
        padding: 8px 12px !important;
        font-size: 13px !important;
        border-radius: 20px !important;
        border: 1px solid var(--sp-gray-200) !important;
        white-space: nowrap;
    }

    /* Geo breadcrumb wraps cleanly */
    #sp-geo-breadcrumb { gap: 4px !important; font-size: 12px; }

    /* ZIP check grid: 2 cols */
    #sp-zip-list { grid-template-columns: 1fr 1fr !important; }

    /* Client request: subcat buttons wrap */
    #sp-req-subcat-list,
    #sp-req-jobtype-list { gap: 6px !important; }

    /* Review step: stack columns */
    #sp-step-4 .sp-grid-2 { grid-template-columns: 1fr !important; }

    /* Dashboard tabs: show scrollbar hint */
    #sp-contractor-dashboard [style*="border-bottom:2px solid"] {
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    #sp-contractor-dashboard [style*="border-bottom:2px solid"]::-webkit-scrollbar {
        display: none;
    }

    /* Lead contact box: stack items */
    #sp-leads-list div[style*="display:flex;flex-wrap:wrap;gap:16px"] {
        gap: 10px !important;
    }

    /* Accept/decline buttons row on mobile */
    #sp-leads-list div[style*="min-width:130px"] {
        min-width: unset !important;
        flex-direction: row !important;
        width: 100%;
    }
}

/* ============================================================
   Pro Directory
   ============================================================ */

/* Wrapper */
.sp-directory-wrap { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; }

/* Header */
.sp-directory-header { margin-bottom: 28px; }
.sp-directory-title  { font-size: 28px; font-weight: 800; margin: 0 0 8px; color: var(--sp-gray-900); }
.sp-directory-subtitle { font-size: 15px; color: var(--sp-gray-500); margin: 0; }

/* Filters bar */
.sp-directory-filters {
    display: flex;
    gap: 14px;
    align-items: flex-end;
    flex-wrap: wrap;
    background: #fff;
    border: 1px solid var(--sp-gray-200);
    border-radius: var(--sp-radius-lg);
    padding: 16px 20px;
    margin-bottom: 24px;
    box-shadow: var(--sp-shadow);
}
.sp-dir-filter-group   { display: flex; flex-direction: column; gap: 5px; flex: 1; min-width: 160px; }
.sp-dir-filter-label   { font-size: 12px; font-weight: 700; color: var(--sp-gray-500); text-transform: uppercase; letter-spacing: .05em; }
.sp-dir-select         { padding: 9px 32px 9px 12px; border: 1px solid var(--sp-gray-200); border-radius: var(--sp-radius); font-size: 14px; color: var(--sp-gray-900); background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2364748b' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 10px center; -webkit-appearance: none; cursor: pointer; }
.sp-dir-select:focus   { outline: none; border-color: var(--sp-blue); box-shadow: 0 0 0 3px rgba(26,86,160,.1); }
.sp-dir-zip-wrap       { display: flex; flex-direction: column; gap: 4px; }
.sp-dir-zip-input      { padding: 9px 12px; border: 1px solid var(--sp-gray-200); border-radius: var(--sp-radius); font-size: 14px; width: 100%; }
.sp-dir-zip-input:focus{ outline: none; border-color: var(--sp-blue); box-shadow: 0 0 0 3px rgba(26,86,160,.1); }
.sp-dir-filter-clear   { flex: 0; min-width: unset; }
.sp-dir-clear-btn      { padding: 9px 16px; background: var(--sp-gray-100); border: 1px solid var(--sp-gray-200); border-radius: var(--sp-radius); font-size: 13px; font-weight: 600; color: var(--sp-gray-600); cursor: pointer; white-space: nowrap; transition: all .15s; }
.sp-dir-clear-btn:hover{ background: var(--sp-gray-200); }

/* Results bar */
.sp-dir-results-bar    { font-size: 13px; color: var(--sp-gray-500); margin-bottom: 16px; font-weight: 500; }

/* Grid */
.sp-dir-grid           { display: grid; gap: 20px; }
.sp-dir-cols-3         { grid-template-columns: repeat(3, 1fr); }
.sp-dir-cols-2         { grid-template-columns: repeat(2, 1fr); }

/* Loading */
.sp-dir-loading        { grid-column: 1 / -1; display: flex; align-items: center; justify-content: center; gap: 12px; padding: 60px 0; color: var(--sp-gray-500); font-size: 14px; }

/* Empty state */
.sp-dir-empty          { grid-column: 1 / -1; text-align: center; padding: 60px 20px; }
.sp-dir-empty-icon     { font-size: 48px; margin-bottom: 12px; }
.sp-dir-empty h3       { font-size: 18px; font-weight: 700; margin: 0 0 6px; color: var(--sp-gray-700); }
.sp-dir-empty p        { font-size: 14px; color: var(--sp-gray-500); margin: 0; }

/* Card */
.sp-dir-card {
    background: #fff;
    border: 1px solid var(--sp-gray-200);
    border-radius: 12px;
    padding: 22px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    box-shadow: var(--sp-shadow);
    transition: box-shadow .2s, transform .2s;
    position: relative;
    overflow: hidden;
}
.sp-dir-card:hover     { box-shadow: var(--sp-shadow-md); transform: translateY(-2px); }
.sp-dir-card-featured  { border-color: #fde68a; border-top: 3px solid var(--sp-gold); }

/* Featured badge */
.sp-dir-featured-badge {
    position: absolute;
    top: 12px;
    right: 12px;
    background: var(--sp-yellow-light);
    color: #92400e;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: .04em;
}

/* Card head */
.sp-dir-card-head      { display: flex; align-items: center; gap: 14px; }
.sp-dir-avatar         { width: 52px; height: 52px; border-radius: 50%; background: var(--sp-blue); color: #fff; font-size: 22px; font-weight: 800; display: flex; align-items: center; justify-content: center; flex-shrink: 0; overflow: hidden; }
.sp-dir-avatar-logo    { background: var(--sp-gray-50); border: 1px solid var(--sp-gray-200); border-radius: 10px; }
.sp-dir-card-title     { flex: 1; min-width: 0; }
.sp-dir-biz-name       { font-size: 16px; font-weight: 800; color: var(--sp-gray-900); margin: 0 0 2px; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-dir-biz-type       { font-size: 12px; color: var(--sp-gray-500); }

/* Services */
.sp-dir-services       { display: flex; flex-wrap: wrap; gap: 6px; }
.sp-dir-service-tag    { background: #eff6ff; color: var(--sp-blue); font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 20px; border: 1px solid #bfdbfe; }
.sp-dir-service-none   { background: var(--sp-gray-100); color: var(--sp-gray-500); border-color: var(--sp-gray-200); }

/* Meta row */
.sp-dir-meta           { display: flex; flex-direction: column; gap: 5px; }
.sp-dir-meta-item      { font-size: 13px; color: var(--sp-gray-600); display: flex; align-items: center; gap: 6px; }
.sp-dir-meta-icon      { font-size: 14px; flex-shrink: 0; }

/* CTA button */
.sp-dir-cta {
    display: block;
    text-align: center;
    padding: 11px 0;
    background: var(--sp-blue);
    color: #fff !important;
    border-radius: var(--sp-radius);
    font-weight: 700;
    font-size: 14px;
    text-decoration: none !important;
    transition: background .15s;
    margin-top: auto;
}
.sp-dir-cta:hover { background: var(--sp-blue-dark); color: #fff !important; }

/* ── Directory Responsive ────────────────────────────────── */
@media (max-width: 900px) {
    .sp-dir-cols-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
    .sp-dir-cols-3,
    .sp-dir-cols-2 { grid-template-columns: 1fr; }
    .sp-directory-filters { flex-direction: column; gap: 12px; }
    .sp-dir-filter-group  { min-width: unset; width: 100%; }
    .sp-dir-filter-clear  { width: 100%; }
    .sp-dir-clear-btn     { width: 100%; text-align: center; }
    .sp-dir-biz-name      { white-space: normal; }
}

/* ============================================================
   MOBILE RESPONSIVE OVERRIDES — Comprehensive
   Covers: client-dashboard, client-login, contractor-login,
           contractor-form, contractor-dashboard, client-request
   ============================================================ */

/* ── Shared helpers ──────────────────────────────────────── */
.sp-mobile-only   { display: none; }
.sp-desktop-only  { display: block; }

@media (max-width: 768px) {
    .sp-mobile-only  { display: block; }
    .sp-desktop-only { display: none; }
}

/* ============================================================
   CLIENT DASHBOARD  (#sp-client-dashboard)
   ============================================================ */

/* Outer wrapper: reduce side padding on small screens */
#sp-client-dashboard {
    padding: 24px 16px;
    box-sizing: border-box;
    width: 100%;
}

@media (max-width: 640px) {
    #sp-client-dashboard {
        padding: 12px 10px;
    }

    /* ── Top nav bar ── */
    #sp-client-dashboard .sp-dash-nav {
        padding: 12px 14px !important;
        gap: 10px !important;
        flex-wrap: wrap !important;
    }
    #sp-client-dashboard .sp-dash-nav > div:first-child {
        font-size: 15px !important;
        margin-right: 0 !important;
        width: 100%;
    }
    #sp-client-dashboard .sp-dash-nav a[href*="find-a-pro"],
    #sp-client-dashboard .sp-dash-nav a[href*="request"] {
        flex: 1;
        text-align: center;
        padding: 9px 12px !important;
        font-size: 13px !important;
    }

    /* ── Stats grid: 2 columns ── */
    #sp-client-dashboard > div[style*="grid-template-columns:repeat(auto-fit"] {
        grid-template-columns: 1fr 1fr !important;
        gap: 10px !important;
    }
    /* Stat card values: smaller on mobile */
    #sp-client-dashboard > div[style*="grid-template-columns:repeat(auto-fit"] > div > div:first-child {
        font-size: 22px !important;
    }

    /* ── Support card ── */
    #sp-client-dashboard > div[style*="Contact Support"],
    #sp-client-dashboard div[style*="rstephens@apartmentcapital"] {
        flex-direction: column !important;
        align-items: flex-start !important;
        padding: 14px 16px !important;
        gap: 10px !important;
    }
    #sp-client-dashboard div[style*="rstephens@apartmentcapital"] a[href^="mailto"] {
        width: 100% !important;
        text-align: center !important;
        justify-content: center !important;
    }

    /* ── Tabs: scrollable row ── */
    #sp-client-dashboard > div[style*="border-bottom:2px solid"] {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        flex-wrap: nowrap !important;
        gap: 0 !important;
    }
    #sp-client-dashboard > div[style*="border-bottom:2px solid"]::-webkit-scrollbar {
        display: none;
    }
    #sp-client-dashboard .sp-cl-tab {
        padding: 10px 14px !important;
        font-size: 13px !important;
        white-space: nowrap;
        flex-shrink: 0;
    }

    /* ── Request cards ── */
    #sp-cl-panel-requests > div > div[style*="padding:20px 24px"] {
        padding: 14px 14px !important;
    }
    #sp-cl-panel-requests div[style*="display:flex;align-items:flex-start;gap:12px"] {
        flex-wrap: wrap !important;
        gap: 10px !important;
    }
    #sp-cl-panel-requests div[style*="min-width:200px"] {
        min-width: 0 !important;
        width: 100%;
    }

    /* ── Job cards ── */
    #sp-cl-panel-jobs div[style*="padding:20px 24px"] {
        padding: 14px 14px !important;
    }
    #sp-cl-panel-jobs div[style*="display:flex;align-items:flex-start;gap:12px"] {
        flex-wrap: wrap !important;
    }
    #sp-cl-panel-jobs div[style*="min-width:200px"] {
        min-width: 0 !important;
        width: 100%;
    }

    /* ── Account tab ── */
    #sp-cl-panel-account > div {
        max-width: 100% !important;
    }
    #sp-cl-panel-account div[style*="padding:28px"] {
        padding: 18px 16px !important;
    }

    /* ── Review modal: full screen ── */
    #sp-cl-review-modal > div {
        max-width: 100% !important;
        width: 100% !important;
        border-radius: 16px 16px 0 0 !important;
        padding: 22px 18px !important;
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        margin: 0 !important;
    }
    #sp-cl-review-modal {
        align-items: flex-end !important;
    }
}

/* ============================================================
   CLIENT LOGIN  (client-login.php)
   ============================================================ */
@media (max-width: 480px) {
    /* Login wrapper: reduce padding */
    div[style*="min-height:100vh"][style*="align-items:center"] {
        padding: 20px 12px !important;
        align-items: flex-start !important;
    }

    /* Card: reduce padding */
    div[style*="padding:40px 36px"] {
        padding: 24px 18px !important;
        border-radius: 12px !important;
    }

    /* First/last name grid: stack on very small screens */
    div[style*="grid-template-columns:1fr 1fr"] {
        grid-template-columns: 1fr !important;
        gap: 0 !important;
    }

    /* Login card full width */
    div[style*="max-width:440px"] {
        max-width: 100% !important;
    }
}

/* ============================================================
   CONTRACTOR LOGIN  (contractor-login.php)
   ============================================================ */
@media (max-width: 480px) {
    #sp-contractor-login-wrap {
        padding: 20px 12px !important;
        align-items: flex-start !important;
        min-height: auto !important;
    }
    #sp-contractor-login-wrap > div {
        max-width: 100% !important;
    }
    #sp-contractor-login-wrap div[style*="padding:40px 36px"],
    #sp-contractor-login-wrap div[style*="padding: 40px 36px"] {
        padding: 24px 16px !important;
    }
}

/* ============================================================
   CONTRACTOR REGISTRATION FORM  (contractor-form.php)
   ============================================================ */
#sp-contractor-form {
    box-sizing: border-box;
    width: 100%;
}

@media (max-width: 640px) {
    #sp-contractor-form {
        padding: 16px 12px !important;
        max-width: 100% !important;
    }

    /* Step nav buttons: full width on mobile */
    #sp-contractor-form div[style*="justify-content:flex-end"],
    #sp-contractor-form div[style*="justify-content:space-between"] {
        flex-direction: column !important;
        gap: 10px !important;
    }
    #sp-contractor-form div[style*="justify-content:flex-end"] button,
    #sp-contractor-form div[style*="justify-content:space-between"] button {
        width: 100% !important;
        justify-content: center !important;
    }

    /* Services tree: stack columns */
    #sp-services-tree > div {
        flex-direction: column !important;
        min-height: unset !important;
    }
    #sp-cat-list {
        border-right: none !important;
        border-bottom: 1px solid var(--sp-gray-200) !important;
        padding: 0 0 12px 0 !important;
        margin-bottom: 12px !important;
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 6px !important;
        max-height: unset !important;
        overflow: visible !important;
    }
    #sp-sub-list {
        padding-left: 0 !important;
    }

    /* Geo ZIP grid: 2 cols */
    #sp-zip-list {
        grid-template-columns: 1fr 1fr !important;
    }

    /* Submitted success card */
    #sp-submitted {
        padding: 32px 16px !important;
    }

    /* Step indicator: scrollable */
    .sp-steps {
        overflow-x: auto;
        flex-wrap: nowrap !important;
        justify-content: flex-start !important;
        padding-bottom: 4px;
    }
    .sp-step-label {
        display: none !important;
    }
    .sp-step-line {
        width: 24px !important;
    }
}

/* ============================================================
   CONTRACTOR DASHBOARD  (#sp-contractor-dashboard)
   ============================================================ */
@media (max-width: 768px) {
    /* Outer wrapper padding */
    #sp-contractor-dashboard > div[style*="padding:32px"] {
        padding: 14px 12px !important;
    }

    /* Stats grid: 2 cols */
    #sp-contractor-dashboard div[style*="repeat(4,1fr)"],
    #sp-contractor-dashboard div[style*="repeat(auto-fit,minmax(160px"] {
        grid-template-columns: 1fr 1fr !important;
        gap: 10px !important;
    }

    /* Tabs row: scrollable */
    #sp-contractor-dashboard div[style*="border-bottom:2px solid #e2e8f0"],
    #sp-contractor-dashboard div[style*="border-bottom: 2px solid #e2e8f0"] {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        flex-wrap: nowrap !important;
    }
    #sp-contractor-dashboard div[style*="border-bottom"]::-webkit-scrollbar {
        display: none;
    }

    /* Lead cards: stack content */
    #sp-leads-list > div > div {
        flex-direction: column !important;
        gap: 12px !important;
        align-items: flex-start !important;
    }
    #sp-leads-list div[style*="min-width:130px"],
    #sp-leads-list div[style*="min-width: 130px"] {
        min-width: unset !important;
        width: 100% !important;
    }
    #sp-leads-list div[style*="min-width:130px"] button,
    #sp-leads-list div[style*="min-width: 130px"] button {
        width: 100% !important;
    }

    /* Job cards: stack content */
    #sp-dash-jobs div[style*="justify-content:space-between"] {
        flex-direction: column !important;
        gap: 12px !important;
        align-items: flex-start !important;
    }
    #sp-dash-jobs div[style*="min-width:160px"],
    #sp-dash-jobs div[style*="min-width: 160px"] {
        min-width: unset !important;
        width: 100% !important;
    }
    #sp-dash-jobs div[style*="min-width:160px"] button {
        width: 100% !important;
    }

    /* Profile tab: full width */
    #sp-dash-profile,
    #sp-dash-profile > div {
        max-width: 100% !important;
    }

    /* Billing: 2-col status → 1-col */
    #sp-dash-billing > div[style*="display:grid"] {
        grid-template-columns: 1fr 1fr !important;
    }

    /* Earnings / history table: scroll */
    #sp-dash-billing > div:last-child {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }
}

@media (max-width: 480px) {
    /* Billing status: 1 col on very small */
    #sp-dash-billing > div[style*="display:grid"] {
        grid-template-columns: 1fr !important;
    }

    /* Contractor top-nav */
    #sp-contractor-dashboard .sp-dash-nav {
        height: auto !important;
        flex-wrap: wrap !important;
        padding: 10px 12px !important;
        gap: 8px !important;
    }
    #sp-contractor-dashboard .sp-dash-nav > div:first-child {
        font-size: 14px !important;
        width: 100%;
    }
    .sp-dash-tab {
        padding: 0 12px !important;
        font-size: 13px !important;
        white-space: nowrap;
    }
}

/* ============================================================
   CLIENT REQUEST FORM  (.sp-request-wrap)
   ============================================================ */
@media (max-width: 640px) {
    .sp-request-wrap {
        padding: 20px 10px !important;
    }
    .sp-request-card {
        border-radius: 12px !important;
    }
    .sp-request-body {
        padding: 20px 14px !important;
    }

    /* Service grid: 2 cols minimum */
    .sp-service-grid {
        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)) !important;
        gap: 8px !important;
    }
    .sp-service-card {
        padding: 12px 8px !important;
    }
    .sp-service-card .icon {
        font-size: 24px !important;
    }
    .sp-service-card .name {
        font-size: 12px !important;
    }

    /* ZIP input */
    .sp-zip-big {
        font-size: 20px !important;
        letter-spacing: .1em !important;
    }

    /* Step nav buttons */
    #sp-client-request-wrap div[style*="justify-content:flex-end"],
    #sp-client-request-wrap div[style*="justify-content:space-between"] {
        flex-direction: column !important;
        gap: 10px !important;
    }
    #sp-client-request-wrap div[style*="justify-content:flex-end"] button,
    #sp-client-request-wrap div[style*="justify-content:space-between"] button {
        width: 100% !important;
    }

    /* Contact form grid: single col */
    #sp-client-request-wrap .sp-grid-2 {
        grid-template-columns: 1fr !important;
    }

    /* Auth prompt buttons: stack on very small */
    #sp-req-auth-prompt > div:last-child {
        flex-direction: column !important;
    }
    #sp-req-auth-prompt a {
        border-right: none !important;
        border-bottom: 1px solid rgba(255,255,255,.2) !important;
    }
    #sp-req-auth-prompt a:last-child {
        border-bottom: none !important;
    }

    /* Result account boxes */
    #sp-req-account-box,
    #sp-req-existing-account-box,
    #sp-req-auth-prompt {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    #sp-req-account-box a,
    #sp-req-existing-account-box a[style*="inline-block"] {
        display: block !important;
        text-align: center !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Header title */
    #sp-client-request-wrap > div:first-child > div:first-child {
        font-size: 22px !important;
    }
    #sp-client-request-wrap h1 {
        font-size: 22px !important;
    }
}

/* ============================================================
   GLOBAL MOBILE INPUTS — prevent iOS zoom (font-size ≥ 16px)
   ============================================================ */
@media (max-width: 768px) {
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="password"],
    input[type="number"],
    input[type="url"],
    input[type="date"],
    select,
    textarea {
        font-size: 16px !important;
        /* Ensure tap targets are large enough */
        min-height: 44px;
    }

    /* All buttons: min 44px tap target */
    button,
    .sp-btn,
    input[type="submit"],
    input[type="button"] {
        min-height: 44px;
    }
}

/* ============================================================
   ADMIN PAGES — mobile usability
   ============================================================ */
@media (max-width: 782px) {
    /* Approval modal: full screen */
    #sp-approval-modal {
        padding: 0 !important;
        align-items: flex-end !important;
    }
    .sp-modal-inner {
        max-width: 100% !important;
        max-height: 96vh !important;
        border-radius: 16px 16px 0 0 !important;
    }

    /* Lead detail drawer: full width */
    #sp-lead-detail {
        width: 100% !important;
        top: 46px !important;
    }

    /* Filter button rows: wrap */
    div[style*="display:flex;gap:10px;margin-bottom:20px"],
    div[style*="display:flex;gap:8px;margin-bottom:20px"] {
        flex-wrap: wrap !important;
        gap: 8px !important;
    }

    /* Admin tables: horizontal scroll */
    #wpwrap table.wp-list-table {
        font-size: 12px;
    }
    #sp-all-Pros-table th,
    #sp-jobs-table th,
    #sp-leads-table th {
        white-space: nowrap;
        padding: 8px 10px !important;
    }
    #sp-all-Pros-table td,
    #sp-jobs-table td,
    #sp-leads-table td {
        padding: 8px 10px !important;
        font-size: 12px !important;
    }

    /* Table wrapper: add scroll */
    #sp-all-Pros-list-page > div:last-of-type,
    #sp-jobs-page > div:last-of-type,
    .sp-admin-table-wrap {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }
}

/* ============================================================
   UTILITY — Safe area insets for notched phones
   ============================================================ */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
    .sp-request-wrap,
    #sp-client-dashboard,
    #sp-contractor-dashboard > div {
        padding-bottom: calc(16px + env(safe-area-inset-bottom));
    }
    .sp-modal-footer,
    #sp-cl-review-modal > div {
        padding-bottom: calc(16px + env(safe-area-inset-bottom));
    }
}

/* ============================================================
   CLIENT DASHBOARD — Class-targeted responsive overrides
   ============================================================ */

/* Tabs bar: always scrollable, no wrap */
.sp-cl-tabs-bar {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    flex-wrap: nowrap !important;
}
.sp-cl-tabs-bar::-webkit-scrollbar { display: none; }

/* Support card: flex row → column on small screens */
@media (max-width: 580px) {
    .sp-support-card {
        flex-direction: column !important;
        align-items: flex-start !important;
        padding: 14px 16px !important;
        gap: 10px !important;
    }
    .sp-support-card a[href^="mailto"] {
        width: 100% !important;
        box-sizing: border-box !important;
        text-align: center !important;
        justify-content: center !important;
    }
}

/* ============================================================
   LOGIN PAGES — sp-login-wrap (client + contractor)
   ============================================================ */
.sp-login-wrap {
    box-sizing: border-box;
}

@media (max-width: 480px) {
    .sp-login-wrap {
        padding: 20px 12px !important;
        align-items: flex-start !important;
        min-height: auto !important;
    }
    .sp-login-wrap > div {
        max-width: 100% !important;
    }
    /* Card inner padding */
    .sp-login-wrap div[style*="padding:40px 36px"],
    .sp-login-wrap div[style*="padding: 40px 36px"] {
        padding: 22px 16px !important;
        border-radius: 12px !important;
        box-shadow: 0 8px 24px rgba(0,0,0,.18) !important;
    }
    /* First/last name 2-col grid → 1 col */
    .sp-login-wrap div[style*="grid-template-columns:1fr 1fr"],
    .sp-login-wrap div[style*="grid-template-columns: 1fr 1fr"] {
        grid-template-columns: 1fr !important;
    }
    /* Heading */
    .sp-login-wrap h1, .sp-login-wrap h2 {
        font-size: 22px !important;
    }
}