/* =====================================================================
   NorTech Package Builder v3.0 — Core Styles
   Mobile-first. Slide-up tray on small screens.
   ===================================================================== */

#ntech-pb-root *,
#ntech-pb-root *::before,
#ntech-pb-root *::after { box-sizing: border-box; }

body.ntech-pb-no-scroll { overflow: hidden; }

#ntech-pb-root {
    --navy:   #0A2A4A;
    --blue:   #1E73B9;
    --teal:   #6EC1E4;
    --white:  #ffffff;
    --off:    #f4f7fb;
    --lgray:  #dde4ed;
    --dgray:  #5a6a7e;
    --green:  #22a06b;
    --orange: #e67e22;
    --shadow: 0 2px 12px rgba(10,42,74,.10);
    font-family: 'Open Sans', sans-serif;
    color: var(--navy);
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 0 80px; /* bottom padding for mobile FAB */
}

/* ---- Loading ---- */
.ntech-pb-loading { text-align:center; padding:60px 20px; color:var(--dgray); }
.ntech-pb-spinner {
    width:40px; height:40px; border:4px solid var(--lgray);
    border-top-color:var(--blue); border-radius:50%;
    margin:0 auto 16px; animation:ntech-spin .8s linear infinite;
}
@keyframes ntech-spin { to { transform:rotate(360deg); } }

/* ---- Banner ---- */
.ntech-pb-banner {
    background: linear-gradient(120deg, var(--navy) 0%, #133d6b 100%);
    border-radius: 12px;
    padding: 24px 28px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}
.ntech-pb-banner-text h2 { color:#fff; margin:0 0 4px; font-size:1.3rem; font-weight:700; }
.ntech-pb-banner-text p  { color:var(--teal); margin:0; font-size:.88rem; }
.ntech-pb-savings-badge {
    background:var(--teal); color:var(--navy); font-weight:800;
    font-size:.95rem; padding:8px 18px; border-radius:50px; white-space:nowrap; flex-shrink:0;
}

/* ---- Layout ---- */
.ntech-pb-layout {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 20px;
    align-items: start;
}

/* ---- Package name ---- */
.ntech-pb-name-row {
    display:flex; align-items:center; gap:10px; margin-bottom:16px; flex-wrap:wrap;
}
.ntech-pb-name-row label { font-weight:700; color:var(--navy); white-space:nowrap; font-size:.9rem; }
.ntech-pb-name-input {
    flex:1; min-width:160px; border:2px solid var(--lgray); border-radius:8px;
    padding:8px 12px; font-size:.9rem; outline:none; transition:border-color .2s;
}
.ntech-pb-name-input:focus { border-color:var(--blue); }

/* ---- Search ---- */
.ntech-pb-search-bar { position:relative; margin-bottom:14px; }
.ntech-pb-search-bar input {
    width:100%; border:2px solid var(--lgray); border-radius:10px;
    padding:9px 14px 9px 40px; font-size:.9rem; outline:none; transition:border-color .2s;
}
.ntech-pb-search-bar input:focus { border-color:var(--blue); }
.ntech-pb-search-icon {
    position:absolute; left:12px; top:50%; transform:translateY(-50%);
    color:var(--dgray); pointer-events:none;
}

/* ---- Category pills ---- */
.ntech-pb-cat-pills { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:16px; }
.ntech-pb-cat-pill {
    background:var(--off); border:2px solid var(--lgray); color:var(--navy);
    border-radius:50px; padding:4px 14px; font-size:.82rem; font-weight:600;
    cursor:pointer; transition:all .15s; white-space:nowrap;
}
.ntech-pb-cat-pill:hover,
.ntech-pb-cat-pill.active { background:var(--blue); border-color:var(--blue); color:#fff; }

/* ---- Category sections ---- */
.ntech-pb-cat-section { margin-bottom:24px; }
.ntech-pb-cat-header { display:flex; align-items:center; gap:8px; margin-bottom:10px; }
.ntech-pb-cat-icon  { font-size:1.2rem; }
.ntech-pb-cat-label { font-weight:700; font-size:.95rem; color:var(--navy); }

/* ---- Service cards ---- */
.ntech-pb-services-grid {
    display:grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap:10px;
}
.ntech-pb-service-card {
    background:#fff; border:2px solid var(--lgray); border-radius:10px;
    padding:12px 14px; cursor:pointer; transition:all .18s;
    user-select:none; position:relative;
}
.ntech-pb-service-card:hover { border-color:var(--blue); box-shadow:var(--shadow); }
.ntech-pb-service-card.selected { border-color:var(--blue); background:#eef5fc; }
.ntech-pb-service-card.selected::after {
    content:'✓'; position:absolute; top:8px; right:10px;
    color:var(--blue); font-weight:800; font-size:.85rem;
}
.ntech-pb-service-card-name { font-weight:700; font-size:.82rem; color:var(--navy); margin-bottom:3px; padding-right:16px; }
.ntech-pb-service-card-desc { font-size:.74rem; color:var(--dgray); line-height:1.4; }
.ntech-pb-hidden { display:none !important; }

/* =====================================================================
   TRAY — desktop sidebar
   ===================================================================== */
.ntech-pb-tray {
    background:#fff;
    border:2px solid var(--lgray);
    border-radius:14px;
    overflow:hidden;
    box-shadow:var(--shadow);
    /* Desktop: sticky sidebar */
    position:sticky;
    top:24px;
}
.ntech-pb-tray-handle { display:none; } /* mobile only */
.ntech-pb-tray-close  { display:none; } /* mobile only */

.ntech-pb-tray-header {
    background:var(--navy); color:#fff; padding:14px 18px;
    display:flex; align-items:center; justify-content:space-between;
}
.ntech-pb-tray-title  { font-weight:700; font-size:.95rem; }
.ntech-pb-tray-count  {
    background:var(--teal); color:var(--navy); border-radius:50px;
    padding:2px 10px; font-size:.78rem; font-weight:800; margin-left:auto;
}
.ntech-pb-tray-body { padding:14px 16px; }

/* ---- Price estimator ---- */
.ntech-pb-estimator {
    background:var(--off); border-radius:8px; padding:0;
    font-size:.82rem; margin-bottom:0;
    overflow:hidden; transition:padding .3s, margin .3s;
}
.ntech-pb-estimator.visible {
    padding:10px 12px; margin-bottom:10px;
}

/* ---- Discount banner ---- */
.ntech-pb-discount-banner {
    border-radius:8px; padding:0; font-size:.84rem; font-weight:700;
    color:var(--blue); margin-bottom:0;
    overflow:hidden; transition:padding .3s, margin .3s;
}
.ntech-pb-discount-banner.visible {
    background:#eef5fc; border:1px solid #b6d5ef;
    padding:10px 12px; margin-bottom:10px;
}
.ntech-pb-est-row { display:flex; justify-content:space-between; align-items:center; margin-bottom:4px; }
.ntech-pb-est-label { color:var(--dgray); font-size:.78rem; text-transform:uppercase; letter-spacing:.03em; }
.ntech-pb-est-range { font-weight:800; color:var(--navy); font-size:.95rem; }
.ntech-pb-est-savings { color:var(--green); font-weight:700; font-size:.8rem; margin-bottom:4px; }
.ntech-pb-est-disclaimer { color:#8c9aad; font-size:.72rem; font-style:italic; }

/* ---- Tray empty ---- */
.ntech-pb-tray-empty { text-align:center; color:var(--dgray); font-size:.84rem; padding:16px 0; }
.ntech-pb-tray-empty-icon { font-size:1.8rem; margin-bottom:6px; }

/* ---- Tray list ---- */
.ntech-pb-tray-list { list-style:none; padding:0; margin:0 0 12px; }
.ntech-pb-tray-item {
    display:flex; align-items:flex-start; justify-content:space-between;
    gap:8px; padding:7px 0; border-bottom:1px solid var(--lgray);
}
.ntech-pb-tray-item:last-child { border-bottom:none; }
.ntech-pb-tray-item-info { flex:1; min-width:0; }
.ntech-pb-tray-item-name {
    font-size:.82rem; font-weight:700; color:var(--navy);
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.ntech-pb-tray-item-cat {
    font-size:.72rem; color:var(--dgray); margin-top:2px;
    display:flex; align-items:center; gap:6px; flex-wrap:wrap;
}
.ntech-pb-item-price {
    color:var(--blue); font-weight:700; font-size:.72rem;
    background:#eef5fc; border-radius:4px; padding:1px 5px;
}
.ntech-pb-tray-remove {
    background:none; border:none; color:var(--dgray);
    cursor:pointer; font-size:.95rem; padding:2px 4px; transition:color .15s; flex-shrink:0;
}
.ntech-pb-tray-remove:hover { color:#c0392b; }

/* ---- Notes ---- */
.ntech-pb-notes-label { font-size:.82rem; font-weight:700; color:var(--navy); display:block; margin-bottom:5px; }
.ntech-pb-notes {
    width:100%; border:2px solid var(--lgray); border-radius:8px;
    padding:8px 10px; font-size:.82rem; resize:vertical; min-height:64px;
    outline:none; font-family:inherit; transition:border-color .2s;
}
.ntech-pb-notes:focus { border-color:var(--blue); }

/* ---- Tray buttons ---- */
.ntech-pb-tray-actions { margin-top:12px; display:flex; flex-direction:column; gap:7px; }
.ntech-pb-btn {
    display:block; width:100%; padding:11px; border-radius:8px;
    font-size:.88rem; font-weight:700; text-align:center;
    cursor:pointer; border:none; transition:all .18s;
}
.ntech-pb-btn-primary { background:var(--blue); color:#fff; }
.ntech-pb-btn-primary:hover:not(:disabled) { background:#155f9f; }
.ntech-pb-btn-primary:disabled { background:var(--lgray); color:var(--dgray); cursor:not-allowed; }
.ntech-pb-btn-ghost { background:none; color:var(--dgray); border:2px solid var(--lgray); font-size:.8rem; padding:8px; }
.ntech-pb-btn-ghost:hover { border-color:var(--dgray); color:var(--navy); }

/* ---- Toast ---- */
#ntech-pb-toast {
    position:fixed; bottom:24px; right:24px; background:var(--navy); color:#fff;
    padding:12px 20px; border-radius:10px; font-size:.88rem; font-weight:600;
    box-shadow:0 6px 24px rgba(10,42,74,.25); z-index:9999; max-width:320px;
    opacity:0; transform:translateY(10px); pointer-events:none; transition:opacity .3s,transform .3s;
}
#ntech-pb-toast.show { opacity:1; transform:translateY(0); pointer-events:auto; }
#ntech-pb-toast.success { background:var(--green); }
#ntech-pb-toast.error   { background:#c0392b; }

/* ---- Success screen ---- */
.ntech-pb-success { text-align:center; padding:50px 20px; }
.ntech-pb-success-icon { font-size:3rem; margin-bottom:14px; }
.ntech-pb-success h2   { color:var(--navy); margin-bottom:8px; }
.ntech-pb-success p    { color:var(--dgray); max-width:460px; margin:0 auto 10px; font-size:.9rem; }
.ntech-pb-success-disc { color:var(--green) !important; font-size:.9rem !important; }
.ntech-pb-success-est  { color:var(--blue)  !important; font-size:.88rem !important; }
.ntech-pb-success .ntech-pb-btn { display:inline-block; width:auto; padding:12px 28px; margin-top:16px; }

/* =====================================================================
   MOBILE FAB (Floating Action Button)
   ===================================================================== */
.ntech-pb-mobile-fab {
    position:fixed; bottom:24px; right:20px; z-index:9990;
    background:var(--blue); color:#fff; border:none; border-radius:50px;
    padding:12px 20px; display:none; align-items:center; gap:8px;
    font-size:.9rem; font-weight:800; cursor:pointer;
    box-shadow:0 4px 20px rgba(30,115,185,.4);
    transition:transform .2s, box-shadow .2s;
}
.ntech-pb-mobile-fab.visible { display:flex; }
.ntech-pb-mobile-fab:hover { transform:translateY(-2px); box-shadow:0 8px 28px rgba(30,115,185,.45); }
.ntech-pb-fab-count {
    background:#fff; color:var(--blue); border-radius:50px;
    padding:1px 8px; font-size:.78rem; font-weight:900;
}

/* ---- Mobile overlay ---- */
.ntech-pb-mobile-overlay {
    display:none; position:fixed; inset:0; background:rgba(10,42,74,.5);
    z-index:9991; backdrop-filter:blur(2px); transition:opacity .25s;
}
.ntech-pb-mobile-overlay.visible { display:block; }

/* =====================================================================
   RESPONSIVE — TABLET  (≤ 900px)
   ===================================================================== */
@media (max-width: 900px) {
    .ntech-pb-layout {
        grid-template-columns: 1fr 280px;
    }
    .ntech-pb-services-grid {
        grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    }
}

/* =====================================================================
   RESPONSIVE — MOBILE  (≤ 768px)
   Tray becomes a slide-up drawer fixed to bottom of screen.
   ===================================================================== */
@media (max-width: 768px) {

    #ntech-pb-root { padding-bottom: 100px; }

    .ntech-pb-banner { padding:18px 16px; }
    .ntech-pb-banner-text h2 { font-size:1.1rem; }
    .ntech-pb-savings-badge  { font-size:.82rem; padding:6px 14px; }

    /* Single column on mobile */
    .ntech-pb-layout {
        grid-template-columns: 1fr;
        gap: 0;
    }

    /* ---- Tray becomes slide-up drawer ---- */
    .ntech-pb-tray {
        position: fixed;
        bottom: 0; left: 0; right: 0;
        z-index: 9992;
        border-radius: 20px 20px 0 0;
        border: none;
        border-top: 3px solid var(--blue);
        max-height: 85vh;
        overflow-y: auto;
        transform: translateY(100%);
        transition: transform .3s cubic-bezier(.32,.72,0,1);
        /* Remove sticky positioning */
        top: auto;
        box-shadow: 0 -8px 40px rgba(10,42,74,.2);
    }
    .ntech-pb-tray.mobile-open {
        transform: translateY(0);
    }

    /* Drag handle */
    .ntech-pb-tray-handle {
        display: block;
        width: 44px; height: 5px;
        background: var(--lgray);
        border-radius: 3px;
        margin: 10px auto 0;
    }

    /* Close button */
    .ntech-pb-tray-close {
        display: block;
        background: none; border: none;
        color: rgba(255,255,255,.7);
        font-size: 1.1rem; cursor: pointer;
        padding: 0 0 0 8px;
    }

    /* Show FAB on mobile always (hidden on desktop via display:none) */
    .ntech-pb-mobile-fab { display:flex; } /* JS adds .visible */

    /* Bigger cards on mobile for easier tapping */
    .ntech-pb-services-grid {
        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
        gap: 8px;
    }
    .ntech-pb-service-card { padding:14px 12px; }
    .ntech-pb-service-card-name { font-size:.85rem; }

    /* Search and pills horizontal scroll */
    .ntech-pb-cat-pills { flex-wrap:nowrap; overflow-x:auto; padding-bottom:4px; }
    .ntech-pb-cat-pills::-webkit-scrollbar { height:3px; }
    .ntech-pb-cat-pills::-webkit-scrollbar-thumb { background:var(--lgray); border-radius:3px; }

    /* Toast above FAB */
    #ntech-pb-toast { bottom:90px; right:12px; left:12px; max-width:none; }
}

/* =====================================================================
   RESPONSIVE — SMALL MOBILE  (≤ 480px)
   ===================================================================== */
@media (max-width: 480px) {
    .ntech-pb-banner { padding:16px 14px; }
    .ntech-pb-banner-text h2 { font-size:1rem; }
    .ntech-pb-banner-text p  { font-size:.8rem; }

    .ntech-pb-services-grid {
        grid-template-columns: 1fr 1fr;
    }
    .ntech-pb-service-card-desc { display:none; } /* hide desc on tiny screens, show only name */
    .ntech-pb-service-card { padding:12px 10px; min-height:52px; }
    .ntech-pb-service-card-name { font-size:.8rem; padding-right:0; }

    .ntech-pb-name-row { flex-direction:column; align-items:stretch; }
    .ntech-pb-name-input { min-width:0; }

    .ntech-pb-tray-body { padding:12px 14px; }
}

/* ==========================================================================
   Status page — [nortech_package_status] shortcode
   Moved from inline <style> block in class-shortcode.php (v3.4.0)
   ========================================================================== */
#ntech-status-wrap { max-width: 560px; margin: 0 auto; font-family: 'Open Sans', sans-serif; }
.ntech-status-card { background: #fff; border: 2px solid #dde4ed; border-radius: 12px; padding: 32px; text-align: center; }
.ntech-status-card h2 { color: #0A2A4A; margin: 0 0 8px; font-size: 1.3rem; }
.ntech-status-card p  { color: #5a6a7e; margin: 0 0 20px; font-size: .9rem; }
.ntech-status-input {
    width: 100%; padding: 11px 14px; border: 2px solid #dde4ed; border-radius: 8px;
    font-size: .95rem; outline: none; margin-bottom: 10px; box-sizing: border-box;
}
.ntech-status-input:focus { border-color: #1E73B9; }
.ntech-status-btn {
    width: 100%; padding: 12px; background: #1E73B9; color: #fff; border: none;
    border-radius: 8px; font-size: .95rem; font-weight: 700; cursor: pointer; transition: background .18s;
}
.ntech-status-btn:hover { background: #155f9f; }
.ntech-status-results { margin-top: 20px; text-align: left; }
.ntech-status-pkg {
    border: 2px solid #dde4ed; border-radius: 10px; padding: 16px 18px; margin-bottom: 12px;
    transition: border-color .2s;
}
.ntech-status-pkg-header { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.ntech-status-pkg-name  { font-weight: 700; color: #0A2A4A; font-size: .95rem; }
.ntech-status-badge { padding: 3px 12px; border-radius: 20px; font-size: .78rem; font-weight: 700; white-space: nowrap; }
.ntech-status-draft   { background: #f0f0f1; color: #646970; }
.ntech-status-pending { background: #fff3cd; color: #856404; }
.ntech-status-quoted  { background: #d1e7dd; color: #0f5132; }
.ntech-status-meta  { font-size: .82rem; color: #5a6a7e; }
.ntech-status-meta span { display: inline-block; margin-right: 12px; }
.ntech-status-svcs  { font-size: .8rem; color: #8c9aad; margin-top: 6px; }
.ntech-status-disc  { color: #1E73B9; font-weight: 700; font-size: .82rem; margin-top: 4px; }
.ntech-status-empty { text-align: center; color: #8c9aad; padding: 20px 0; font-size: .9rem; }
.ntech-status-error { background: #fef0f0; border: 1px solid #fbc8c8; border-radius: 8px; padding: 12px 16px; color: #c0392b; font-size: .88rem; margin-top: 12px; }
.ntech-status-loading { text-align: center; padding: 20px; color: #5a6a7e; font-size: .9rem; }