/*
 * KCS Frontend Styles — modern UI (v2)
 * Only presentation. Class names are unchanged so all PHP logic keeps working.
 * --kcs-primary / --kcs-secondary are still injected from plugin settings.
 */

:root {
    --kcs-primary: #2563eb;
    --kcs-secondary: #0f172a;
    --kcs-bg: #f4f6fb;
    --kcs-surface: #ffffff;
    --kcs-border: #e6eaf2;
    --kcs-text: #334155;
    --kcs-muted: #64748b;
    --kcs-radius: 16px;
    --kcs-radius-sm: 10px;
    --kcs-shadow: 0 1px 2px rgba(15,23,42,.04), 0 8px 24px -8px rgba(15,23,42,.08);
    --kcs-shadow-lg: 0 20px 40px -16px rgba(37,99,235,.35);
    --kcs-sidebar: #0b1437;
    --kcs-sidebar-2: #131f4d;
    --kcs-font: 'Poppins', 'Inter', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

/* ---------- Base wrapper ---------- */
.kcs-wrapper, .kcs-dashboard, .kcs-auth-wrapper, .kcs-tracking-wrapper,
.kcs-parcel-detail, .kcs-booking-form, .kcs-rider-portal {
    font-family: var(--kcs-font);
    color: var(--kcs-text);
    line-height: 1.55;
    font-size: 14px;
    max-width: 1360px;
    margin: 0 auto;
    box-sizing: border-box;
}
.kcs-wrapper *, .kcs-wrapper *::before, .kcs-wrapper *::after { box-sizing: border-box; }
.kcs-wrapper h1, .kcs-wrapper h2, .kcs-wrapper h3, .kcs-wrapper h4 {
    font-family: var(--kcs-font);
    color: var(--kcs-secondary);
    letter-spacing: -.01em;
    line-height: 1.25;
}
.kcs-wrapper h2 { font-size: 26px; font-weight: 700; margin: 0 0 6px; }
.kcs-wrapper h3 { font-size: 17px; font-weight: 600; margin: 0 0 14px; }
.kcs-wrapper h4 { font-size: 15px; font-weight: 600; margin: 0 0 8px; }
.kcs-wrapper a { color: var(--kcs-primary); text-decoration: none; font-weight: 500; }
.kcs-wrapper a:hover { text-decoration: underline; }
.kcs-wrapper p { margin: 0 0 14px; }

/* ---------- App shell (sidebar + content) ----------
   The sidebar is the first child; every other child goes in column 2.
   No closing tags needed in templates. */
.kcs-wrapper.kcs-has-sidebar {
    display: grid;
    grid-template-columns: 264px minmax(0, 1fr);
    column-gap: 28px;
    row-gap: 0;
    align-items: start;
    padding: 20px;
    background: var(--kcs-bg);
    border-radius: 24px;
}
.kcs-has-sidebar > * { grid-column: 2; min-width: 0; }
.kcs-has-sidebar > .kcs-sidebar {
    grid-column: 1;
    grid-row: 1 / span 60;
    position: sticky;
    top: 20px;
    align-self: start;
}

.kcs-sidebar {
    background: linear-gradient(180deg, var(--kcs-sidebar) 0%, var(--kcs-sidebar-2) 100%);
    border-radius: 22px;
    padding: 22px 16px;
    color: #cbd5f5;
    min-height: 560px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 24px 48px -24px rgba(11,20,55,.6);
}
.kcs-brand { display: flex; align-items: center; gap: 12px; padding: 4px 8px 22px; }
.kcs-brand-logo {
    width: 42px; height: 42px; border-radius: 12px; flex: none;
    background: linear-gradient(135deg, var(--kcs-primary), #7c3aed);
    display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 17px;
    overflow: hidden;
}
.kcs-brand-logo img { width: 100%; height: 100%; object-fit: cover; }
.kcs-brand-name { color: #fff; font-weight: 700; font-size: 17px; line-height: 1.1; display: block; }
.kcs-brand-sub { color: #8b97c6; font-size: 11px; font-weight: 400; display: block; margin-top: 2px; }

.kcs-nav { display: flex; flex-direction: column; gap: 4px; }
.kcs-wrapper .kcs-nav a {
    display: flex; align-items: center; gap: 12px;
    padding: 11px 14px; border-radius: 12px;
    color: #b6c0e8; font-weight: 500; font-size: 13.5px; text-decoration: none;
    transition: background .15s ease, color .15s ease;
}
.kcs-wrapper .kcs-nav a:hover { background: rgba(255,255,255,.07); color: #fff; text-decoration: none; }
.kcs-wrapper .kcs-nav a.is-active {
    background: linear-gradient(90deg, var(--kcs-primary), #4f8cff);
    color: #fff;
    box-shadow: 0 10px 20px -10px var(--kcs-primary);
}
.kcs-nav-ico { width: 20px; height: 20px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.kcs-sidebar-foot { margin-top: auto; padding-top: 22px; }
.kcs-user-chip {
    display: flex; align-items: center; gap: 10px; padding: 12px;
    background: rgba(255,255,255,.06); border-radius: 14px; color: #fff;
}
.kcs-avatar {
    width: 36px; height: 36px; border-radius: 50%; flex: none;
    background: linear-gradient(135deg, #38bdf8, var(--kcs-primary));
    display: grid; place-items: center; font-weight: 600; color: #fff; font-size: 14px;
}
.kcs-user-chip strong { display: block; font-size: 13px; font-weight: 600; }
.kcs-user-chip small { color: #8b97c6; font-size: 11px; }
.kcs-wrapper .kcs-logout {
    display: block; text-align: center; margin-top: 10px; padding: 9px;
    border-radius: 10px; color: #b6c0e8; font-size: 13px; border: 1px solid rgba(255,255,255,.12);
}
.kcs-wrapper .kcs-logout:hover { background: rgba(255,255,255,.08); color: #fff; text-decoration: none; }

/* ---------- Page header row ---------- */
.kcs-page-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 22px; }
.kcs-page-head p { margin: 2px 0 0; color: var(--kcs-muted); }

/* ---------- Cards ---------- */
.kcs-card {
    background: var(--kcs-surface);
    border-radius: var(--kcs-radius);
    box-shadow: var(--kcs-shadow);
    padding: 24px;
    margin-bottom: 22px;
    border: 1px solid var(--kcs-border);
}
.kcs-card > h3:first-child { margin-top: 0 !important; }
.kcs-card h3[style] { border-bottom: 1px solid var(--kcs-border) !important; padding-bottom: 12px !important; color: var(--kcs-secondary) !important; }

/* ---------- Forms ---------- */
.kcs-wrapper input[type="text"], .kcs-wrapper input[type="email"], .kcs-wrapper input[type="password"],
.kcs-wrapper input[type="number"], .kcs-wrapper input[type="tel"], .kcs-wrapper input[type="search"],
.kcs-wrapper input[type="date"], .kcs-wrapper select, .kcs-wrapper textarea {
    width: 100%;
    padding: 11px 14px;
    border: 1px solid var(--kcs-border);
    border-radius: 12px;
    background: #f8fafc;
    color: var(--kcs-secondary);
    font-family: var(--kcs-font);
    font-size: 13.5px;
    transition: border-color .15s, box-shadow .15s, background .15s;
    height: auto;
}
.kcs-wrapper input:focus, .kcs-wrapper select:focus, .kcs-wrapper textarea:focus {
    outline: none; background: #fff;
    border-color: var(--kcs-primary);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--kcs-primary) 18%, transparent);
}
.kcs-wrapper input[type="file"] {
    width: 100%; padding: 12px; border: 1.5px dashed #c7d2fe; border-radius: 14px;
    background: #f5f7ff; font-family: var(--kcs-font); font-size: 13px; cursor: pointer;
}
.kcs-wrapper input[type="file"]::file-selector-button {
    background: #fff; border: 1px solid var(--kcs-border); border-radius: 8px;
    padding: 7px 14px; margin-right: 12px; font-family: var(--kcs-font); font-weight: 500; cursor: pointer;
}
.kcs-wrapper input[type="checkbox"] { accent-color: var(--kcs-primary); width: 16px; height: 16px; }
.kcs-wrapper label { font-weight: 600; font-size: 12.5px; margin-bottom: 6px; display: block; color: #475569; }
.kcs-wrapper textarea { resize: vertical; min-height: 84px; }

/* ---------- Buttons ---------- */
.kcs-btn, .kcs-wrapper input[type="submit"].kcs-btn, .kcs-wrapper button.kcs-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    background: linear-gradient(135deg, var(--kcs-primary), color-mix(in srgb, var(--kcs-primary) 70%, #7c3aed));
    color: #fff !important;
    padding: 11px 22px;
    border-radius: 12px;
    font-family: var(--kcs-font);
    font-weight: 600; font-size: 13.5px;
    text-decoration: none !important;
    border: none; cursor: pointer;
    transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
    box-shadow: 0 8px 18px -8px var(--kcs-primary);
    line-height: 1.2;
}
.kcs-btn:hover { transform: translateY(-1px); filter: brightness(1.06); box-shadow: var(--kcs-shadow-lg); }
.kcs-btn:active { transform: translateY(0); }
.kcs-btn:focus-visible { outline: 3px solid color-mix(in srgb, var(--kcs-primary) 35%, transparent); outline-offset: 2px; }
.kcs-btn-secondary, .kcs-wrapper input[type="submit"].kcs-btn-secondary {
    background: #fff; color: var(--kcs-primary) !important;
    border: 1px solid var(--kcs-border); box-shadow: 0 1px 2px rgba(15,23,42,.05);
}
.kcs-btn-secondary:hover { background: #f5f7ff; box-shadow: 0 6px 16px -8px rgba(15,23,42,.2); filter: none; }

/* ---------- Stats ---------- */
.kcs-stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr)); gap: 18px; margin-bottom: 26px; }
.kcs-stat-card {
    --tone: var(--kcs-primary);
    position: relative; overflow: hidden;
    background: linear-gradient(135deg, color-mix(in srgb, var(--tone) 10%, #fff), #fff 70%);
    border-radius: var(--kcs-radius);
    padding: 20px 20px 20px 78px;
    box-shadow: var(--kcs-shadow);
    border: 1px solid color-mix(in srgb, var(--tone) 18%, var(--kcs-border));
    display: flex; flex-direction: column; justify-content: center; min-height: 100px;
}
.kcs-stat-card::before {
    content: ''; position: absolute; left: 18px; top: 50%; transform: translateY(-50%);
    width: 44px; height: 44px; border-radius: 14px;
    background: var(--tone); opacity: .95;
    box-shadow: 0 10px 20px -8px var(--tone);
}
.kcs-stat-card::after {
    content: ''; position: absolute; right: -24px; bottom: -24px; width: 110px; height: 110px;
    border-radius: 50%; background: var(--tone); opacity: .07;
}
.kcs-stat-card.stat-delivered { --tone: #7c3aed; }
.kcs-stat-card.stat-intransit { --tone: #10b981; }
.kcs-stat-card.stat-returned  { --tone: #f43f5e; }
.kcs-stat-title { font-size: 12.5px; font-weight: 500; color: var(--kcs-muted); }
.kcs-stat-value { font-size: 28px; font-weight: 700; margin-top: 2px; color: var(--kcs-secondary); line-height: 1.15; }

/* ---------- Tables ---------- */
.kcs-table-responsive {
    overflow-x: auto; background: #fff; border-radius: var(--kcs-radius);
    box-shadow: var(--kcs-shadow); border: 1px solid var(--kcs-border); margin-bottom: 22px;
}
.kcs-table { width: 100%; border-collapse: separate; border-spacing: 0; text-align: left; font-size: 13.5px; }
.kcs-table th {
    background: #f8fafc; padding: 14px 18px; font-weight: 600; font-size: 12.5px;
    color: var(--kcs-muted); border-bottom: 1px solid var(--kcs-border); white-space: nowrap;
}
.kcs-table td { padding: 15px 18px; border-bottom: 1px solid #eef1f7; vertical-align: middle; color: var(--kcs-text); }
.kcs-table tbody tr:last-child td { border-bottom: none; }
.kcs-table tbody tr { transition: background .12s; }
.kcs-table tbody tr:hover { background: #f8faff; }
.kcs-table td strong { color: var(--kcs-secondary); font-weight: 600; }
.kcs-table select, .kcs-table .kcs-btn { font-size: 12.5px !important; padding-top: 8px !important; padding-bottom: 8px !important; }
.kcs-table select { border-radius: 10px; }

/* ---------- Badges ---------- */
.kcs-badge {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 12px; border-radius: 999px;
    font-size: 11.5px; font-weight: 600; letter-spacing: .02em;
}
.kcs-badge::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .8; }
.kcs-badge-primary { background: #e0e9ff; color: #1d4ed8; }
.kcs-badge-delivered { background: #d1fae5; color: #047857; }
.kcs-badge-intransit { background: #fef3c7; color: #b45309; }
.kcs-badge-returned { background: #ffe4e6; color: #be123c; }
.kcs-badge-booked { background: #e0e7ff; color: #4338ca; }

/* ---------- Timeline ---------- */
.kcs-timeline { list-style: none; padding: 0; margin: 0; position: relative; }
.kcs-timeline::before { content: ''; position: absolute; top: 6px; bottom: 6px; left: 15px; width: 2px; background: linear-gradient(var(--kcs-border), #eef1f7); }
.kcs-timeline-item { position: relative; padding-left: 46px; margin-bottom: 24px; }
.kcs-timeline-item::before {
    content: ''; position: absolute; left: 7px; top: 3px; width: 18px; height: 18px; border-radius: 50%;
    background: var(--kcs-primary); border: 4px solid #fff;
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--kcs-primary) 30%, #fff);
}
.kcs-timeline-item.status-delivered::before { background: #10b981; box-shadow: 0 0 0 2px #a7f3d0; }
.kcs-timeline-item h4 { margin: 0 0 2px; font-size: 15px; }
.kcs-timeline-meta { font-size: 12.5px; color: var(--kcs-muted); margin-bottom: 8px; }
.kcs-timeline-remarks { background: #f8fafc; padding: 10px 14px; border-radius: 12px; font-size: 13.5px; color: #475569; border: 1px solid var(--kcs-border); display: inline-block; }

/* ---------- Utilities ---------- */
.kcs-grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 22px; }
.kcs-grid-2 > .kcs-card { margin-bottom: 0; }
.kcs-grid-2.kcs-mb-4, .kcs-grid-2 + .kcs-grid-2 { margin-top: 22px; }
.kcs-mb-4 { margin-bottom: 22px; }
.kcs-mt-4 { margin-top: 22px; }
.kcs-text-center { text-align: center; }

/* ---------- Alerts ---------- */
.kcs-alert { padding: 14px 18px; border-radius: 14px; margin-bottom: 22px; border: 1px solid transparent; font-weight: 500; }
.kcs-alert-success { background: #ecfdf5; border-color: #a7f3d0; color: #065f46; }
.kcs-alert-error { background: #fff1f2; border-color: #fecdd3; color: #9f1239; }

/* ---------- Tracking (public) ---------- */
.kcs-tracking-wrapper > .kcs-card:first-child {
    background: linear-gradient(135deg, var(--kcs-sidebar), #1e3a8a);
    border: 0; padding: 36px 24px; box-shadow: var(--kcs-shadow-lg);
}
.kcs-tracking-wrapper > .kcs-card:first-child input[type="text"] { background: #fff; border-radius: 14px; padding: 14px 18px; }

/* ---------- Rider portal (mobile-first) ---------- */
.kcs-rider-portal { max-width: 920px; padding: 4px; }
.kcs-rider-portal > div:first-child {
    background: linear-gradient(135deg, var(--kcs-sidebar), #1e3a8a);
    border-radius: 20px; padding: 20px 22px; color: #fff; box-shadow: var(--kcs-shadow-lg);
}
.kcs-rider-portal > div:first-child h2 { color: #fff; }
.kcs-scan-open-btn { width: 100%; font-size: 16px !important; padding: 16px 18px !important; margin-bottom: 22px; border-radius: 16px !important; }
.kcs-rider-portal .kcs-grid-2 > div {
    border: 1px solid var(--kcs-border) !important; border-radius: 16px !important;
    background: #fbfcff !important; padding: 18px !important; transition: box-shadow .15s;
}
.kcs-rider-portal .kcs-grid-2 > div:hover { box-shadow: var(--kcs-shadow); }
.kcs-rider-portal .kcs-grid-2 p { margin: 4px 0 !important; font-size: 13px; }
.kcs-rider-portal .kcs-btn { padding: 10px 14px !important; font-size: 13px !important; }

body.kcs-scan-lock { overflow: hidden; }
.kcs-scan-modal { position: fixed; inset: 0; z-index: 99999; display: flex; align-items: stretch; justify-content: center; background: rgba(11,20,55,.7); backdrop-filter: blur(6px); }
.kcs-scan-modal[hidden] { display: none; }
.kcs-scan-panel { width: 100%; max-width: 520px; background: #fff; padding: 20px; overflow-y: auto; -webkit-overflow-scrolling: touch; box-sizing: border-box; font-family: var(--kcs-font); }
@media (min-width: 640px) { .kcs-scan-modal { align-items: center; } .kcs-scan-panel { border-radius: 24px; max-height: 92vh; box-shadow: 0 30px 60px -20px rgba(0,0,0,.5); } }
.kcs-scan-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.kcs-scan-close { background: #f1f5f9; border: none; width: 36px; height: 36px; border-radius: 50%; font-size: 22px; line-height: 1; cursor: pointer; color: #475569; }
.kcs-scan-modes { display: flex; gap: 6px; margin-bottom: 10px; background: #f1f5f9; padding: 4px; border-radius: 14px; }
.kcs-scan-mode { flex: 1; padding: 10px; border: none; background: transparent; color: var(--kcs-muted); border-radius: 10px; font-family: var(--kcs-font); font-weight: 600; cursor: pointer; }
.kcs-scan-mode.is-active { background: #fff; color: var(--kcs-primary); box-shadow: 0 2px 8px rgba(15,23,42,.1); }
.kcs-scan-hint { font-size: 12.5px; color: var(--kcs-muted); margin: 0 0 12px; }
.kcs-scan-reader { width: 100%; min-height: 240px; background: #0b1437; border-radius: 16px; overflow: hidden; }
.kcs-scan-status { margin: 12px 0; padding: 11px 14px; border-radius: 12px; background: #f1f5f9; color: #334155; font-size: 13.5px; min-height: 20px; }
.kcs-scan-status-ok { background: #ecfdf5; color: #065f46; }
.kcs-scan-status-warn { background: #fffbeb; color: #b45309; }
.kcs-scan-status-err { background: #fff1f2; color: #9f1239; }
.kcs-scan-manual { display: flex; gap: 8px; margin-bottom: 12px; }
.kcs-scan-manual input { flex: 1; min-width: 0; }
.kcs-scan-summary { font-size: 13.5px; margin-bottom: 8px; }
.kcs-scan-log { list-style: none; margin: 0; padding: 0; }
.kcs-scan-log li { padding: 9px 12px; margin-bottom: 6px; border-radius: 10px; font-size: 13px; border-left: 4px solid #cbd5e1; background: #f8fafc; }
.kcs-scan-log-ok { border-left-color: #10b981 !important; }
.kcs-scan-log-warn { border-left-color: #f59e0b !important; }
.kcs-scan-log-err { border-left-color: #f43f5e !important; }

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
    .kcs-wrapper.kcs-has-sidebar { display: block; padding: 12px; border-radius: 18px; }
    .kcs-has-sidebar > .kcs-sidebar { position: static; min-height: 0; margin-bottom: 20px; padding: 14px; border-radius: 18px; }
    .kcs-brand { padding-bottom: 12px; }
    .kcs-nav { flex-direction: row; overflow-x: auto; gap: 6px; padding-bottom: 4px; -webkit-overflow-scrolling: touch; }
    .kcs-wrapper .kcs-nav a { white-space: nowrap; padding: 9px 14px; }
    .kcs-sidebar-foot { padding-top: 12px; }
    .kcs-user-chip { display: none; }
}
@media (max-width: 600px) {
    .kcs-wrapper h2 { font-size: 22px; }
    .kcs-card { padding: 18px; }
    .kcs-stats-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
    .kcs-stat-card { padding: 16px 14px 16px 14px; min-height: 0; }
    .kcs-stat-card::before { display: none; }
    .kcs-stat-value { font-size: 22px; }
}
@media (prefers-reduced-motion: reduce) { .kcs-btn, .kcs-table tbody tr { transition: none; } }

/* ---------- Polish ---------- */
.kcs-stat-card::before { background: radial-gradient(circle at center, rgba(255,255,255,.95) 0 5px, transparent 6px), var(--tone); }
.kcs-wrapper h2 { margin-bottom: 18px; }
.kcs-page-head h2, .kcs-wrapper .kcs-mb-4 h2 { margin-bottom: 0; }
.kcs-rider-portal .kcs-scan-open-btn { padding: 16px 18px !important; font-size: 16px !important; }
.kcs-btn[style*="#10b981"] { box-shadow: 0 8px 18px -8px #10b981; }

/* ---------- Branch hub scan ---------- */
.kcs-hub-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 22px; align-items: start; }
.kcs-hub-grid > .kcs-card { margin-bottom: 0; }
.kcs-hub-grid .kcs-scan-reader[hidden] { display: none; }
.kcs-hub-grid .kcs-scan-modes { flex-wrap: wrap; }
.kcs-hub-grid .kcs-scan-mode { font-size: 12.5px; min-width: 120px; }
.kcs-hub-counters { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 14px; }
.kcs-hub-counters > div { background: #f8fafc; border: 1px solid var(--kcs-border); border-radius: 14px; padding: 12px; text-align: center; }
.kcs-hub-counters strong { display: block; font-size: 24px; font-weight: 700; color: var(--kcs-secondary); line-height: 1.1; }
.kcs-hub-counters span { font-size: 12px; color: var(--kcs-muted); }
.kcs-hub-grid .kcs-scan-log { max-height: 420px; overflow-y: auto; }
@media (max-width: 1100px) { .kcs-hub-grid { grid-template-columns: 1fr; } }

/* ---------- Fixes: [hidden] must win, and secondary buttons must stay secondary ---------- */
.kcs-wrapper [hidden] { display: none !important; }
.kcs-wrapper button.kcs-btn.kcs-btn-secondary,
.kcs-wrapper input[type="submit"].kcs-btn.kcs-btn-secondary {
    background: #fff; color: var(--kcs-primary) !important;
    border: 1px solid var(--kcs-border); box-shadow: 0 1px 2px rgba(15,23,42,.05);
}
.kcs-wrapper button.kcs-btn.kcs-btn-secondary:hover { background: #f5f7ff; box-shadow: 0 6px 16px -8px rgba(15,23,42,.2); filter: none; }

/* ---------- WhatsApp control (branch portal) ---------- */
.kcs-wa-wrap { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.kcs-wrapper .kcs-wa-select { width: auto; min-width: 130px; padding: 7px 10px; font-size: 12px; border-radius: 10px; }
.kcs-wrapper a.kcs-wa-btn {
    display: inline-flex; align-items: center; gap: 4px; background: #25d366; color: #fff; border-radius: 10px;
    padding: 8px 13px; font-size: 12px; font-weight: 600; text-decoration: none; white-space: nowrap;
    box-shadow: 0 8px 16px -10px #25d366; transition: transform .15s, filter .15s;
}
.kcs-wrapper a.kcs-wa-btn:hover { background: #1fb457; color: #fff; text-decoration: none; transform: translateY(-1px); }

/* ---------- Bulk CN printing bar ---------- */
.kcs-wrapper .kcs-bulk-cn { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; background: #fff; border: 1px solid var(--kcs-border); border-radius: 14px; padding: 10px 16px; margin-bottom: 14px; box-shadow: var(--kcs-shadow); }
.kcs-wrapper .kcs-bulk-cn label.kcs-bulk-all { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-weight: 600; cursor: pointer; }
.kcs-wrapper .kcs-bulk-count { color: var(--kcs-muted); font-size: 13px; margin-right: auto; }
.kcs-wrapper .kcs-bulk-cn button[disabled] { opacity: .45; cursor: not-allowed; box-shadow: none; transform: none; filter: none; }
.kcs-wrapper input.kcs-bulk-cb { width: 17px; height: 17px; cursor: pointer; }

/* ---------- Locked sender details (customer booking) ---------- */
.kcs-wrapper .kcs-sender-locked { background: #f8fafc; border: 1px solid var(--kcs-border); border-radius: 14px; padding: 6px 16px 14px; }
.kcs-wrapper .kcs-sender-locked .row { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--kcs-border); }
.kcs-wrapper .kcs-sender-locked .row span { color: var(--kcs-muted); font-size: 12.5px; flex: none; }
.kcs-wrapper .kcs-sender-locked .row strong { color: var(--kcs-secondary); text-align: right; font-weight: 600; }

/* ---------- Branch customers page ---------- */
.kcs-wrapper .kcs-cust-filter { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.kcs-wrapper a.kcs-chip { padding: 7px 13px; border-radius: 9px; font-size: 12.5px; color: var(--kcs-muted); font-weight: 500; text-decoration: none; }
.kcs-wrapper a.kcs-chip:hover { color: var(--kcs-secondary); text-decoration: none; }
.kcs-wrapper a.kcs-chip.is-on { background: #fff; color: var(--kcs-primary); box-shadow: 0 2px 6px rgba(15,23,42,.08); }

/* ---- Automatic delivery-charge box (booking forms) ---- */
.kcs-wrapper .kcs-price-box { display: flex; flex-direction: column; gap: 4px; background: #f8fafc; border: 1px solid var(--kcs-border); border-radius: 14px; padding: 14px 16px; margin: 0 0 14px; }
.kcs-wrapper .kcs-price-box.is-ok { background: #eff6ff; border-color: #bfdbfe; }
.kcs-wrapper .kcs-price-box.is-error { background: #fef2f2; border-color: #fecaca; }
.kcs-wrapper .kcs-price-label { font-size: 12.5px; color: var(--kcs-muted); }
.kcs-wrapper .kcs-price-amount { font-size: 26px; line-height: 1.2; color: var(--kcs-secondary); font-weight: 700; }
.kcs-wrapper .kcs-price-hint { font-size: 12.5px; color: var(--kcs-muted); }
.kcs-wrapper .kcs-price-note { font-size: 12.5px; color: var(--kcs-muted); margin: 6px 0 0; }
.kcs-wrapper .kcs-price-use { font-size: 12.5px; margin-left: 6px; }


/* =====================================================================
   v1.8.1  Login screen, full-width layout, polish and responsive rules
   ===================================================================== */

/* ---------- Login / Register ---------- */
.kcs-auth-wrapper {
    display: flex; align-items: center; justify-content: center;
    min-height: 82vh; padding: 32px 16px;
    background:
        radial-gradient(900px 420px at 15% -10%, color-mix(in srgb, var(--kcs-primary) 14%, transparent), transparent 70%),
        radial-gradient(700px 380px at 100% 110%, color-mix(in srgb, var(--kcs-primary) 10%, transparent), transparent 70%),
        var(--kcs-bg);
}
.kcs-auth-card {
    width: 100%; max-width: 460px; background: #fff; border: 1px solid var(--kcs-border);
    border-radius: 22px; padding: 40px 38px 30px;
    box-shadow: 0 1px 2px rgba(15,23,42,.04), 0 24px 60px -24px rgba(15,23,42,.22);
}
.kcs-auth-card.is-wide { max-width: 620px; }
.kcs-auth-brand { display: flex; align-items: center; justify-content: center; gap: 12px; margin-bottom: 22px; min-height: 56px; }
.kcs-auth-brand img { max-height: 64px; max-width: 78%; width: auto; height: auto; object-fit: contain; }
.kcs-auth-mark {
    width: 48px; height: 48px; border-radius: 14px; flex: none; display: grid; place-items: center; color: #fff;
    font-weight: 700; font-size: 20px; background: linear-gradient(135deg, var(--kcs-primary), #7c3aed);
}
.kcs-auth-name { font-size: 22px; font-weight: 700; color: var(--kcs-secondary); letter-spacing: -.01em; }
.kcs-wrapper .kcs-auth-title { text-align: center; font-size: 24px; font-weight: 700; margin: 0 0 4px; }
.kcs-auth-sub { text-align: center; color: var(--kcs-muted); margin: 0 0 24px !important; font-size: 13.5px; }
.kcs-auth-card .kcs-alert { margin-bottom: 18px; padding: 12px 14px; font-size: 13.5px; }

/* outlined field with the label sitting on the border */
.kcs-field { position: relative; margin: 0 0 20px; }
.kcs-wrapper .kcs-field label {
    position: absolute; top: -9px; left: 12px; z-index: 1; margin: 0; padding: 0 6px; background: #fff;
    font-size: 12px; font-weight: 600; color: #475569; line-height: 18px; pointer-events: none; transition: color .15s;
}
.kcs-wrapper .kcs-field input[type="text"], .kcs-wrapper .kcs-field input[type="email"],
.kcs-wrapper .kcs-field input[type="password"], .kcs-wrapper .kcs-field input[type="tel"], .kcs-wrapper .kcs-field textarea {
    background: #fff; border: 1px solid #cbd5e1; border-radius: 12px; padding: 15px 16px; font-size: 14.5px; min-height: 50px;
}
.kcs-wrapper .kcs-field textarea { min-height: 78px; padding-top: 14px; }
.kcs-wrapper .kcs-field input:hover, .kcs-wrapper .kcs-field textarea:hover { border-color: #94a3b8; }
.kcs-wrapper .kcs-field input:focus, .kcs-wrapper .kcs-field textarea:focus { border-color: var(--kcs-primary); }
.kcs-field:focus-within label { color: var(--kcs-primary); }
.kcs-field input[type="password"], .kcs-field input[type="text"][name="kcs_password"] { padding-right: 50px; }
.kcs-eye {
    position: absolute; right: 6px; top: 6px; width: 38px; height: 38px; border: 0; border-radius: 10px; background: transparent;
    display: grid; place-items: center; cursor: pointer; color: #64748b; padding: 0;
}
.kcs-eye:hover { background: #f1f5f9; color: var(--kcs-secondary); }
.kcs-eye svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.kcs-eye.is-on { color: var(--kcs-primary); }
.kcs-auth-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: -4px 0 20px; font-size: 13px; }
.kcs-wrapper .kcs-check { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-weight: 500; cursor: pointer; color: #475569; font-size: 13px; }
.kcs-wrapper .kcs-auth-row a { font-weight: 600; }
.kcs-wrapper button.kcs-auth-submit {
    display: block; width: 100%; min-height: 50px; padding: 14px 20px; border: 0; border-radius: 12px; cursor: pointer;
    background: var(--kcs-primary); color: #fff; font-family: var(--kcs-font); font-weight: 600; font-size: 15px; letter-spacing: .01em;
    box-shadow: 0 10px 22px -10px var(--kcs-primary); transition: transform .15s, filter .15s, box-shadow .15s;
}
.kcs-wrapper button.kcs-auth-submit:hover { filter: brightness(1.07); transform: translateY(-1px); box-shadow: 0 14px 26px -10px var(--kcs-primary); }
.kcs-wrapper button.kcs-auth-submit:active { transform: translateY(0); }
.kcs-wrapper button.kcs-auth-submit:focus-visible, .kcs-wrapper a.kcs-auth-alt:focus-visible { outline: 3px solid color-mix(in srgb, var(--kcs-primary) 35%, transparent); outline-offset: 2px; }
.kcs-auth-or { display: flex; align-items: center; gap: 16px; margin: 22px 0 18px; color: var(--kcs-muted); font-size: 13px; }
.kcs-auth-or::before, .kcs-auth-or::after { content: ''; flex: 1; height: 1px; background: #cbd5e1; }
.kcs-wrapper a.kcs-auth-alt {
    display: flex; align-items: center; justify-content: center; min-height: 48px; border: 1px solid #cbd5e1; border-radius: 12px;
    color: var(--kcs-secondary); font-weight: 600; font-size: 14px; text-decoration: none; background: #fff; transition: background .15s, border-color .15s;
}
.kcs-wrapper a.kcs-auth-alt:hover { background: #f8fafc; border-color: #94a3b8; text-decoration: none; }
.kcs-auth-cols { display: grid; grid-template-columns: 1fr 1fr; column-gap: 16px; }
.kcs-auth-cols .kcs-field.is-full { grid-column: 1 / -1; }
.kcs-wrapper .kcs-auth-hint { font-size: 12.5px; color: var(--kcs-muted); margin: -4px 0 18px; }
.kcs-wrapper .kcs-auth-foot { text-align: center; margin: 22px 0 0; font-size: 13.5px; color: #475569; }
.kcs-wrapper .kcs-auth-foot a { text-decoration: underline; font-weight: 600; }

/* ---------- Full-width pages (class added to <body> by the plugin; can be turned off in Settings) ---------- */
body.kcs-fullpage { overflow-x: hidden; }
body.kcs-fullpage .kcs-wrapper.kcs-has-sidebar,
body.kcs-fullpage .kcs-wrapper.kcs-auth-wrapper {
    width: 100vw; max-width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw);
}
body.kcs-fullpage .kcs-wrapper.kcs-has-sidebar {
    border-radius: 0; min-height: 100vh; padding: 22px clamp(14px, 2.2vw, 36px);
    grid-template-columns: 268px minmax(0, 1fr); column-gap: clamp(18px, 2.2vw, 36px);
}
body.kcs-fullpage .kcs-has-sidebar > .kcs-sidebar { top: 22px; max-height: calc(100vh - 44px); overflow-y: auto; scrollbar-width: thin; }
body.admin-bar.kcs-fullpage .kcs-wrapper.kcs-has-sidebar { min-height: calc(100vh - 32px); }
body.admin-bar.kcs-fullpage .kcs-has-sidebar > .kcs-sidebar { top: 54px; max-height: calc(100vh - 76px); }
body.kcs-fullpage .kcs-wrapper.kcs-auth-wrapper { min-height: 100vh; }
body.kcs-fullpage:not(.admin-bar) .kcs-wrapper.kcs-auth-wrapper { margin-top: 0; }
/* The theme's own page title above an app screen only gets in the way */
body.kcs-fullpage .entry-header, body.kcs-fullpage header.page-header, body.kcs-fullpage .page-title-wrap { display: none; }
body.kcs-fullpage .entry-content, body.kcs-fullpage .site-main, body.kcs-fullpage .page-content { padding-top: 0; padding-bottom: 0; margin-top: 0; margin-bottom: 0; }

/* ---------- Polish ---------- */
.kcs-wrapper.kcs-has-sidebar { background: linear-gradient(180deg, #f6f8fd 0%, var(--kcs-bg) 100%); }
.kcs-card { transition: box-shadow .2s ease; }
.kcs-card:hover { box-shadow: 0 1px 2px rgba(15,23,42,.05), 0 14px 32px -14px rgba(15,23,42,.14); }
.kcs-table tbody tr:nth-child(even) td { background: #fcfdff; }
.kcs-table tbody tr:hover td { background: #f3f7ff; }
.kcs-table th { text-transform: uppercase; letter-spacing: .04em; font-size: 11.5px; }
.kcs-wrapper .kcs-nav a { position: relative; }
.kcs-wrapper .kcs-nav a.is-active::after { content: ''; position: absolute; right: 12px; width: 6px; height: 6px; border-radius: 50%; background: #fff; opacity: .9; }
.kcs-wrapper input:disabled, .kcs-wrapper select:disabled { background: #eef1f6; color: #94a3b8; cursor: not-allowed; }
.kcs-wrapper ::selection { background: color-mix(in srgb, var(--kcs-primary) 25%, #fff); }
.kcs-wrapper .kcs-table-responsive { -webkit-overflow-scrolling: touch; }
.kcs-wrapper img { max-width: 100%; height: auto; }

/* ---------- Responsive ---------- */
@media (min-width: 1600px) {
    body.kcs-fullpage .kcs-wrapper.kcs-has-sidebar { grid-template-columns: 288px minmax(0, 1fr); }
    .kcs-wrapper { font-size: 14.5px; }
}
@media (max-width: 1200px) {
    .kcs-wrapper.kcs-has-sidebar, body.kcs-fullpage .kcs-wrapper.kcs-has-sidebar { grid-template-columns: 236px minmax(0, 1fr); }
    .kcs-table th, .kcs-table td { padding-left: 14px; padding-right: 14px; }
}
@media (max-width: 960px) {
    body.kcs-fullpage .kcs-wrapper.kcs-has-sidebar { display: block; min-height: 0; padding: 12px; }
    body.kcs-fullpage .kcs-has-sidebar > .kcs-sidebar,
    body.admin-bar.kcs-fullpage .kcs-has-sidebar > .kcs-sidebar { top: auto; max-height: none; overflow: visible; }
    /* Sidebar becomes a compact top bar: brand + logout on one row, menu scrolls underneath */
    .kcs-has-sidebar > .kcs-sidebar {
        display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 12px;
        position: static; padding: 12px 14px 10px;
    }
    .kcs-sidebar .kcs-brand { grid-column: 1; grid-row: 1; padding: 0 0 10px; min-width: 0; }
    .kcs-sidebar .kcs-brand-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 52vw; }
    .kcs-sidebar .kcs-sidebar-foot { grid-column: 2; grid-row: 1; margin: 0; padding: 0 0 10px; }
    .kcs-sidebar .kcs-logout { margin: 0; padding: 8px 14px; }
    .kcs-sidebar .kcs-nav { grid-column: 1 / -1; grid-row: 2; scrollbar-width: none; }
    .kcs-sidebar .kcs-nav::-webkit-scrollbar { display: none; }
    .kcs-wrapper .kcs-nav a.is-active::after { display: none; }
    .kcs-hub-grid { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
    .kcs-wrapper { font-size: 14px; }
    .kcs-card { padding: 18px; border-radius: 14px; overflow-x: auto; }
    .kcs-card:hover { box-shadow: var(--kcs-shadow); }
    .kcs-table { min-width: 620px; }
    .kcs-grid-2 { gap: 16px; }
    .kcs-grid-2.kcs-mb-4, .kcs-grid-2 + .kcs-grid-2 { margin-top: 16px; }
    /* header rows built with inline flex wrap and stack instead of squeezing */
    .kcs-wrapper div[style*="justify-content"] { flex-wrap: wrap; gap: 10px; }
    .kcs-page-head .kcs-btn, .kcs-wrapper div[style*="justify-content"] > .kcs-btn { width: 100%; }
    /* 16px stops iOS from zooming into fields; 44px is a comfortable touch target */
    .kcs-wrapper input[type="text"], .kcs-wrapper input[type="email"], .kcs-wrapper input[type="password"], .kcs-wrapper input[type="number"],
    .kcs-wrapper input[type="tel"], .kcs-wrapper input[type="search"], .kcs-wrapper input[type="date"], .kcs-wrapper select, .kcs-wrapper textarea { font-size: 16px; min-height: 44px; }
    .kcs-btn, .kcs-wrapper button.kcs-btn, .kcs-wrapper input[type="submit"].kcs-btn { min-height: 44px; }
    .kcs-wrapper .kcs-table .kcs-btn, .kcs-wrapper .kcs-table select { min-height: 38px; }
    .kcs-scan-manual { flex-wrap: wrap; }
    .kcs-scan-manual .kcs-btn { width: 100%; }
    .kcs-tracking-wrapper > .kcs-card:first-child form { flex-direction: column; }
    .kcs-tracking-wrapper > .kcs-card:first-child form .kcs-btn { width: 100%; }
}
@media (max-width: 600px) {
    .kcs-auth-wrapper { padding: 16px 12px; min-height: 0; }
    body.kcs-fullpage .kcs-wrapper.kcs-auth-wrapper { min-height: 100vh; align-items: flex-start; padding-top: 28px; }
    .kcs-auth-card, .kcs-auth-card.is-wide { padding: 28px 20px 22px; border-radius: 18px; max-width: 100%; }
    .kcs-auth-cols { grid-template-columns: 1fr; }
    .kcs-wrapper .kcs-auth-title { font-size: 22px; }
    .kcs-hub-counters { gap: 8px; }
    .kcs-hub-counters strong { font-size: 20px; }
    .kcs-scan-panel { padding: 16px; }
    .kcs-timeline-item { padding-left: 40px; }
    .kcs-wrapper .kcs-sender-locked .row { flex-direction: column; gap: 2px; }
    .kcs-wrapper .kcs-sender-locked .row strong { text-align: left; }
}
@media (max-width: 380px) {
    .kcs-stats-grid { grid-template-columns: 1fr; }
    .kcs-wrapper h2 { font-size: 20px; }
    .kcs-sidebar .kcs-brand-name { max-width: 40vw; }
    .kcs-auth-card, .kcs-auth-card.is-wide { padding: 24px 16px 20px; }
}
@media (max-height: 520px) and (orientation: landscape) {
    .kcs-auth-wrapper, body.kcs-fullpage .kcs-wrapper.kcs-auth-wrapper { min-height: 0; align-items: flex-start; }
}
@supports (padding: max(0px)) {
    body.kcs-fullpage .kcs-wrapper.kcs-has-sidebar { padding-left: max(14px, env(safe-area-inset-left)); padding-right: max(14px, env(safe-area-inset-right)); }
}
@media print {
    .kcs-sidebar, .kcs-bulk-cn { display: none !important; }
    body.kcs-fullpage .kcs-wrapper.kcs-has-sidebar { display: block; width: auto; margin: 0; padding: 0; background: #fff; }
}

/* ---------- Shopify integration (customer portal) ---------- */
.kcs-wrapper .kcs-sh-store-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.kcs-wrapper .kcs-sh-meta { color: var(--kcs-muted); font-size: 13px; margin: 6px 0 14px; }
.kcs-wrapper .kcs-sh-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.kcs-wrapper .kcs-sh-actions form { margin: 0; }
.kcs-wrapper .kcs-sh-settings { border-top: 1px solid var(--kcs-border); padding-top: 16px; margin-top: 4px; }
.kcs-wrapper .kcs-sh-guide { margin: 0 0 18px; background: #f8fafc; border: 1px solid var(--kcs-border); border-radius: 14px; padding: 12px 16px; }
.kcs-wrapper .kcs-sh-guide summary { cursor: pointer; font-weight: 600; color: var(--kcs-secondary); }
.kcs-wrapper .kcs-sh-guide ol { margin: 12px 0 4px; padding-left: 20px; }
.kcs-wrapper .kcs-sh-guide li { margin-bottom: 10px; }
.kcs-wrapper .kcs-sh-code { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 6px; }
.kcs-wrapper .kcs-sh-code code { flex: 1; min-width: 0; word-break: break-all; background: #fff; border: 1px solid var(--kcs-border); border-radius: 10px; padding: 8px 10px; font-size: 12px; }
.kcs-wrapper .kcs-sh-ok { color: #047857; font-weight: 600; }
.kcs-wrapper .kcs-sh-wait { color: #b45309; font-weight: 600; }
.kcs-wrapper .kcs-sh-bad { color: #be123c; font-weight: 600; }
.kcs-wrapper .kcs-sh-err { color: #9f1239; display: inline-block; max-width: 240px; }
@media (max-width: 600px) { .kcs-wrapper .kcs-sh-actions .kcs-btn { width: 100%; } .kcs-wrapper .kcs-sh-actions form { flex: 1 1 100%; } }

/* ---------- Edit / cancel / delete buttons ---------- */
.kcs-wrapper .kcs-btn-danger, .kcs-wrapper button.kcs-btn-danger { background: #fff1f2; color: #be123c; border: 1px solid #fecdd3; box-shadow: none; }
.kcs-wrapper .kcs-btn-danger:hover { background: #ffe4e6; color: #9f1239; }
.kcs-wrapper .kcs-rider-actions { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.kcs-wrapper .kcs-rider-actions form { margin: 0; }
.kcs-wrapper .kcs-rider-edit { margin-top: 8px; padding: 12px; border: 1px solid var(--kcs-border); border-radius: 12px; background: #f8fafc; }
.kcs-wrapper details > summary { cursor: pointer; }

/* ---------- Shopify orders: warnings, stats, search and filters ---------- */
.kcs-alert-warn { background: #fffbeb; border-color: #fde68a; color: #92400e; }
.kcs-wrapper .kcs-sh-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr)); gap: 14px; margin-bottom: 18px; }
.kcs-wrapper .kcs-sh-stat { display: block; background: #fff; border: 1px solid var(--kcs-border); border-radius: 16px; padding: 14px 16px; }
.kcs-wrapper .kcs-sh-stat span { display: block; font-size: 12px; color: var(--kcs-muted); }
.kcs-wrapper .kcs-sh-stat strong { display: block; font-size: 22px; line-height: 1.3; color: var(--kcs-secondary); }
.kcs-wrapper .kcs-sh-stat small { color: var(--kcs-muted); }
.kcs-wrapper .kcs-sh-stat.is-bad strong { color: #be123c; }
.kcs-wrapper .kcs-sh-filter { background: #fff; border: 1px solid var(--kcs-border); border-radius: 16px; padding: 14px 16px; margin-bottom: 16px; }
.kcs-wrapper .kcs-sh-search { display: flex; gap: 10px; flex-wrap: wrap; }
.kcs-wrapper .kcs-sh-search input[type="search"] { flex: 1 1 260px; min-width: 0; }
.kcs-wrapper .kcs-sh-more { margin-top: 12px; }
.kcs-wrapper .kcs-sh-more > summary { font-weight: 600; color: var(--kcs-secondary); font-size: 13px; }
.kcs-wrapper .kcs-sh-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(170px, 100%), 1fr)); gap: 12px; margin-top: 12px; }
.kcs-wrapper .kcs-sh-grid label { display: block; font-size: 12px; color: var(--kcs-muted); margin-bottom: 4px; }
.kcs-wrapper .kcs-sh-why { color: #92400e; font-size: 12px; }
.kcs-wrapper .kcs-sh-summary { color: var(--kcs-muted); font-size: 13px; margin: 0 0 10px; }

/* ---------- Rider portal: contact buttons, remarks, parties, summary ---------- */
.kcs-wrapper .kcs-rp-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr)); gap: 12px; margin-bottom: 16px; }
.kcs-wrapper .kcs-rp-stat { background: #fff; border: 1px solid var(--kcs-border); border-radius: 14px; padding: 12px 14px; }
.kcs-wrapper .kcs-rp-stat span { display: block; font-size: 12px; color: var(--kcs-muted); }
.kcs-wrapper .kcs-rp-stat strong { display: block; font-size: 24px; line-height: 1.3; color: var(--kcs-secondary); }
.kcs-wrapper .kcs-rp-h { margin-top: 0; border-bottom: 1px solid var(--kcs-border); padding-bottom: 10px; color: var(--kcs-primary); }
.kcs-wrapper .kcs-rp-party { margin: 16px 0 8px; font-weight: 700; color: var(--kcs-secondary); }
.kcs-wrapper .kcs-rp-party span { font-weight: 500; color: var(--kcs-muted); }
.kcs-wrapper .kcs-rp-parties { margin-bottom: 18px; }
.kcs-wrapper .kcs-rp-card { border: 1px solid var(--kcs-border); border-radius: var(--kcs-radius); padding: 15px; background: var(--kcs-bg); }
.kcs-wrapper .kcs-rp-card p { margin: 5px 0; }
.kcs-wrapper .kcs-rp-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 10px; }
.kcs-wrapper .kcs-rp-contact { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
.kcs-wrapper .kcs-rp-contact .kcs-btn { flex: 1 1 90px; padding: 8px 6px; font-size: 13px; text-align: center; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 40px; }
.kcs-wrapper .kcs-rp-call { background: #10b981; }
.kcs-wrapper .kcs-rp-wa { background: #25d366; color: #fff; }
.kcs-wrapper .kcs-rp-wa:hover { filter: brightness(.95); }
.kcs-wrapper .kcs-rp-status { margin-top: 10px; display: flex; flex-direction: column; gap: 8px; }
.kcs-wrapper .kcs-rp-status select, .kcs-wrapper .kcs-rp-status textarea { width: 100%; padding: 8px; font-size: 14px; }
.kcs-wrapper .kcs-rp-status textarea { min-height: 64px; resize: vertical; }
.kcs-wrapper .kcs-rp-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.kcs-wrapper .kcs-rp-chip { border: 1px solid var(--kcs-border); background: #fff; color: var(--kcs-secondary); border-radius: 999px; padding: 5px 10px; font-size: 12px; cursor: pointer; }
.kcs-wrapper .kcs-rp-chip:hover { background: #eff6ff; border-color: #bfdbfe; }
.kcs-wrapper .kcs-rp-status input[type="submit"] { padding: 9px; font-size: 14px; }

/* ---------- Bulk actions bar (staff parcel lists) ---------- */
.kcs-bulk-actions select { max-width: 220px; }

/* ---------- Rider portal: give back / hand over ---------- */
.kcs-wrapper .kcs-rp-more { margin-top: 10px; border-top: 1px dashed var(--kcs-border); padding-top: 8px; }
.kcs-wrapper .kcs-rp-more > summary { cursor: pointer; font-size: 13px; color: var(--kcs-muted); }
.kcs-wrapper .kcs-rp-moreform { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.kcs-wrapper .kcs-rp-moreform input[type="text"], .kcs-wrapper .kcs-rp-moreform select { width: 100%; padding: 8px; font-size: 14px; }
.kcs-wrapper .kcs-rp-handed { background: #eff6ff; border: 1px solid #bfdbfe; color: #1e40af; border-radius: 10px; padding: 6px 10px; font-size: 12.5px; margin-bottom: 8px; }

/* ---------- Rider cash ---------- */
.kcs-wrapper .kcs-rp-stat small { color: var(--kcs-muted); font-size: 12px; }
.kcs-wrapper .kcs-rp-stat-cash { background: #ecfdf5; border-color: #a7f3d0; }
.kcs-wrapper .kcs-rp-stat-cash strong { color: #047857; }
.kcs-wrapper tr.kcs-rp-old td { background: #fffbeb; }

/* ---------- Admin portal (front-end) ---------- */
.kcs-wrapper.kcs-ap .kcs-ap-main { min-width: 0; }
.kcs-wrapper .kcs-ap-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; flex-wrap: wrap; margin-bottom: 18px; }
.kcs-wrapper .kcs-ap-title { margin: 0; font-size: 26px; line-height: 1.2; }
.kcs-wrapper .kcs-ap-sub { margin: 4px 0 0; color: var(--kcs-muted); font-size: 13.5px; }
.kcs-wrapper .kcs-ap-quick { display: flex; gap: 10px; flex-wrap: wrap; }
.kcs-wrapper .kcs-ap-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: 20px; }
.kcs-wrapper .kcs-ap-attn { list-style: none; margin: 0; padding: 0; }
.kcs-wrapper .kcs-ap-attn li { display: flex; justify-content: space-between; gap: 10px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--kcs-border); font-size: 13.5px; }
.kcs-wrapper .kcs-ap-attn li:last-child { border-bottom: 0; }
.kcs-wrapper .kcs-ap-attn a { white-space: nowrap; font-weight: 600; }
@media (max-width: 960px) { .kcs-wrapper .kcs-ap-cols { grid-template-columns: 1fr; } }
@media (max-width: 600px) { .kcs-wrapper .kcs-ap-quick .kcs-btn { flex: 1 1 100%; } }

/* The embedded wp-admin screens: keep them inside the portal and let wide tables scroll */
.kcs-wrapper.kcs-ap .kcs-ap-main .wrap { margin: 0; max-width: 100%; }
.kcs-wrapper.kcs-ap .kcs-ap-main .wp-list-table, .kcs-wrapper.kcs-ap .kcs-ap-main table.widefat { display: block; overflow-x: auto; max-width: 100%; }
.kcs-wrapper.kcs-ap .kcs-ap-main #col-container { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: 24px; }
.kcs-wrapper.kcs-ap .kcs-ap-main #col-left, .kcs-wrapper.kcs-ap .kcs-ap-main #col-right { float: none; width: auto; }
@media (max-width: 960px) { .kcs-wrapper.kcs-ap .kcs-ap-main #col-container { grid-template-columns: 1fr; } }


/* ------------------------------------------------------------------
   Theme-proofing for list tables.
   Elementor / Hello-style themes style every bare <table>, <td> and <th>
   (a 1px grey border on all four sides, 15px padding, grey odd-row zebra and
   a grey hover). Those rules have no class, so they were bleeding through
   next to our own styles and made the tables look like spreadsheets.
   These selectors are deliberately more specific than the theme's.
------------------------------------------------------------------- */
.kcs-wrapper table.kcs-table,
.kcs-wrapper table.wp-list-table,
.kcs-wrapper table.widefat {
    width: 100%; margin: 0; border: 0; border-collapse: separate; border-spacing: 0;
    background: transparent; font-size: 13.5px; color: var(--kcs-text);
}
.kcs-wrapper table.kcs-table th, .kcs-wrapper table.kcs-table td,
.kcs-wrapper table.wp-list-table th, .kcs-wrapper table.wp-list-table td,
.kcs-wrapper table.widefat th, .kcs-wrapper table.widefat td,
.kcs-wrapper table.kcs-an-table th, .kcs-wrapper table.kcs-an-table td {
    border-top: 0; border-left: 0; border-right: 0;
    border-bottom: 1px solid #eef1f7;
    line-height: 1.45; vertical-align: middle;
}
.kcs-wrapper table.kcs-table th, .kcs-wrapper table.kcs-table td,
.kcs-wrapper table.wp-list-table th, .kcs-wrapper table.wp-list-table td,
.kcs-wrapper table.widefat th, .kcs-wrapper table.widefat td { padding: 14px 16px; }
.kcs-wrapper table.kcs-table thead th, .kcs-wrapper table.kcs-table thead td,
.kcs-wrapper table.wp-list-table thead th, .kcs-wrapper table.wp-list-table thead td,
.kcs-wrapper table.widefat thead th, .kcs-wrapper table.widefat thead td {
    background: #f8fafc; color: var(--kcs-muted); text-align: left;
    border-bottom: 1px solid var(--kcs-border); font-weight: 600;
    text-transform: uppercase; letter-spacing: .04em; font-size: 11.5px;
}
.kcs-wrapper table.kcs-table tbody > tr > td, .kcs-wrapper table.kcs-table tbody > tr > th,
.kcs-wrapper table.wp-list-table tbody > tr > td, .kcs-wrapper table.wp-list-table tbody > tr > th,
.kcs-wrapper table.widefat tbody > tr > td, .kcs-wrapper table.widefat tbody > tr > th { background: #fff; }
.kcs-wrapper table.kcs-table tbody > tr:nth-child(even) > td,
.kcs-wrapper table.wp-list-table tbody > tr:nth-child(even) > td,
.kcs-wrapper table.widefat tbody > tr:nth-child(even) > td { background: #fcfdff; }
.kcs-wrapper table.kcs-table tbody > tr:hover > td, .kcs-wrapper table.kcs-table tbody > tr:hover > th,
.kcs-wrapper table.wp-list-table tbody > tr:hover > td, .kcs-wrapper table.wp-list-table tbody > tr:hover > th,
.kcs-wrapper table.widefat tbody > tr:hover > td, .kcs-wrapper table.widefat tbody > tr:hover > th { background: #f3f7ff; }
.kcs-wrapper table.kcs-table tbody > tr:last-child > td,
.kcs-wrapper table.wp-list-table tbody > tr:last-child > td,
.kcs-wrapper table.widefat tbody > tr:last-child > td { border-bottom: 0; }

/* Embedded wp-admin tables sit in a rounded white card with a scrollbar when they are wide. */
.kcs-wrapper.kcs-ap .kcs-ap-main table.wp-list-table, .kcs-wrapper.kcs-ap .kcs-ap-main table.widefat {
    background: #fff; border: 1px solid var(--kcs-border); border-radius: 14px;
}


/* KCS v1.20.0 — unified product-grade polish. Presentation only; preserves existing hooks. */
.kcs-wrapper {
  --kcs-bg:#f5f7fb; --kcs-surface:#fff; --kcs-border:#e4e9f2;
  --kcs-text:#25324b; --kcs-muted:#718096; --kcs-radius:16px;
  font-size:14px; line-height:1.55; -webkit-font-smoothing:antialiased;
}
.kcs-wrapper.kcs-has-sidebar { gap:24px; padding:24px; border:1px solid #edf0f6; box-shadow:0 18px 50px rgba(21,36,68,.06); }
.kcs-wrapper .kcs-sidebar { border-radius:20px; min-height:calc(100vh - 72px); padding:20px 14px; }
.kcs-wrapper .kcs-nav { gap:5px; }
.kcs-wrapper .kcs-nav a { min-height:42px; border:1px solid transparent; }
.kcs-wrapper .kcs-nav a.is-active { border-color:rgba(255,255,255,.13); }
.kcs-wrapper .kcs-page-head, .kcs-wrapper .kcs-ap-head { padding-bottom:16px; border-bottom:1px solid var(--kcs-border); }
.kcs-wrapper .kcs-page-head h1, .kcs-wrapper .kcs-page-head h2,
.kcs-wrapper .kcs-ap-title { letter-spacing:-.035em; font-weight:750; }
.kcs-wrapper .kcs-card { border-radius:16px; border-color:#e7ebf3; box-shadow:0 4px 18px rgba(23,37,66,.045); padding:22px; }
.kcs-wrapper .kcs-card:hover { border-color:#dce4f2; }
.kcs-wrapper .kcs-stats-grid { gap:14px; }
.kcs-wrapper .kcs-stat-card { border-radius:16px; min-height:112px; transition:transform .18s ease,box-shadow .18s ease; }
.kcs-wrapper .kcs-stat-card:hover { transform:translateY(-2px); box-shadow:0 12px 26px rgba(15,23,42,.08); }
.kcs-wrapper .kcs-stat-value { font-variant-numeric:tabular-nums; letter-spacing:-.035em; }
.kcs-wrapper .kcs-btn, .kcs-wrapper button, .kcs-wrapper input[type=submit] { transition:transform .15s ease,box-shadow .15s ease,background .15s ease; }
.kcs-wrapper .kcs-btn { min-height:40px; border-radius:10px; padding:11px 17px; }
.kcs-wrapper .kcs-btn-secondary { background:#fff; }
.kcs-wrapper input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]),
.kcs-wrapper select, .kcs-wrapper textarea { min-height:42px; border-color:#dfe5ef; background:#fbfcfe; border-radius:10px; }
.kcs-wrapper input:focus, .kcs-wrapper select:focus, .kcs-wrapper textarea:focus { background:#fff; }
.kcs-wrapper .kcs-table-wrap, .kcs-wrapper .kcs-table-responsive { max-width:100%; overflow-x:auto; border:1px solid var(--kcs-border); border-radius:13px; background:#fff; }
.kcs-wrapper table.kcs-table, .kcs-wrapper table.wp-list-table, .kcs-wrapper table.widefat { min-width:680px; }
.kcs-wrapper table.kcs-table thead th, .kcs-wrapper table.wp-list-table thead th, .kcs-wrapper table.widefat thead th { position:sticky; top:0; z-index:1; }
.kcs-wrapper table.kcs-table td a, .kcs-wrapper table.wp-list-table td a, .kcs-wrapper table.widefat td a { font-weight:600; }
.kcs-wrapper .kcs-badge, .kcs-wrapper .kcs-status, .kcs-wrapper [class*="status-badge"] { border-radius:999px; font-weight:650; letter-spacing:.01em; }
.kcs-wrapper .kcs-filter-bar, .kcs-wrapper form.kcs-filters { display:flex; align-items:end; gap:12px; flex-wrap:wrap; padding:16px; margin:0 0 16px; border:1px solid var(--kcs-border); border-radius:14px; background:#fff; box-shadow:0 2px 8px rgba(20,35,65,.025); }
.kcs-wrapper .kcs-filter-bar > *, .kcs-wrapper form.kcs-filters > * { min-width:150px; flex:1 1 150px; }
.kcs-wrapper .kcs-filter-bar button, .kcs-wrapper form.kcs-filters button { flex:0 0 auto; }
.kcs-wrapper .kcs-empty-state { padding:36px 20px; text-align:center; border:1px dashed #cfd8e7; border-radius:14px; background:#fbfcff; color:var(--kcs-muted); }
.kcs-wrapper a:focus-visible, .kcs-wrapper button:focus-visible, .kcs-wrapper input:focus-visible, .kcs-wrapper select:focus-visible { outline:3px solid rgba(37,99,235,.28); outline-offset:2px; }
.kcs-wrapper .kcs-timeline { gap:12px; }
.kcs-wrapper .kcs-timeline > * { border-radius:12px; }
.kcs-wrapper .kcs-ap-main .wrap { color:var(--kcs-text); }
.kcs-wrapper .kcs-ap-main .wrap h1 { font-size:25px; letter-spacing:-.03em; font-weight:750; margin-bottom:16px; }
.kcs-wrapper .kcs-ap-main .wrap .tablenav { display:flex; gap:10px; align-items:center; flex-wrap:wrap; min-height:44px; }
.kcs-wrapper .kcs-ap-main .wrap .search-box { float:none; display:flex; align-items:center; gap:8px; margin:10px 0; }
.kcs-wrapper .kcs-ap-main .wrap .search-box input[type=search] { width:min(320px,100%); }
.kcs-wrapper .kcs-ap-main .wrap .button, .kcs-wrapper .kcs-ap-main .wrap input.button { border-radius:9px; min-height:38px; }
@media (max-width:1100px) {
 .kcs-wrapper.kcs-has-sidebar { grid-template-columns:220px minmax(0,1fr); gap:18px; padding:16px; }
 .kcs-wrapper .kcs-sidebar { padding:16px 10px; }
 .kcs-wrapper .kcs-card { padding:18px; }
}
@media (max-width:782px) {
 .kcs-wrapper.kcs-has-sidebar { display:flex; flex-direction:column; padding:12px; border-radius:16px; }
 .kcs-wrapper.kcs-has-sidebar > *, .kcs-wrapper.kcs-has-sidebar > .kcs-sidebar { width:100%; min-width:0; }
 .kcs-wrapper.kcs-has-sidebar > .kcs-sidebar { position:relative; top:auto; min-height:0; grid-row:auto; border-radius:14px; }
 .kcs-wrapper .kcs-brand { padding-bottom:12px; }
 .kcs-wrapper .kcs-nav { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }
 .kcs-wrapper .kcs-nav a { padding:9px 10px; gap:8px; font-size:12px; }
 .kcs-wrapper .kcs-sidebar-foot { padding-top:14px; }
 .kcs-wrapper .kcs-page-head h2, .kcs-wrapper .kcs-ap-title { font-size:22px; }
 .kcs-wrapper .kcs-card { padding:15px; margin-bottom:14px; }
 .kcs-wrapper .kcs-stats-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
 .kcs-wrapper .kcs-stat-card { padding:14px 12px 14px 58px; min-height:88px; }
 .kcs-wrapper .kcs-stat-card::before { left:10px; width:36px; height:36px; }
 .kcs-wrapper .kcs-stat-value { font-size:23px; }
 .kcs-wrapper .kcs-ap-main .wrap .search-box { float:none; flex-wrap:wrap; }
}
@media (max-width:420px) {
 .kcs-wrapper .kcs-nav { grid-template-columns:1fr; }
 .kcs-wrapper .kcs-stats-grid { grid-template-columns:1fr; }
 .kcs-wrapper .kcs-btn { width:100%; }
}
@media (prefers-reduced-motion:reduce) { .kcs-wrapper *, .kcs-wrapper *::before, .kcs-wrapper *::after { transition:none !important; scroll-behavior:auto !important; } }