/* =========================================================================
   F&B Register — Styles (matches Pro Shop POS sale-overlay exactly)
   ========================================================================= */

/* ── Theme Override: fullscreen register covers all theme chrome ── */
html:has(.ttbp_fnb_pin_screen),
html:has(.ttbp_fnb_register) {
    overflow: hidden;
}
html:has(.ttbp_fnb_pin_screen) body,
html:has(.ttbp_fnb_register) body {
    overflow: hidden;
    margin: 0; padding: 0;
}

/* ── PIN Screen ── */
.ttbp_fnb_pin_screen {
    position: fixed;
    top: 0; right: 0; bottom: 0; left: 0;
    z-index: 999999;
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
    align-items: center; justify-content: center;
    font-family: var(--ttbp-font);
    transform: none;
    width: 100vw; height: 100vh;
    height: 100dvh;
    box-sizing: border-box;
}
.ttbp_fnb_pin_screen:not([style*="display: none"]):not([style*="display:none"]) {
    display: flex;
}
.ttbp_fnb_pin_inner { text-align: center; color: #fff; }
.ttbp_fnb_pin_logo {
    font-size: var(--ttbp-fs-3xl); font-weight: var(--ttbp-fw-bold);
    margin-bottom: var(--ttbp-sp-6);
    display: flex; align-items: center; justify-content: center; gap: var(--ttbp-sp-3);
}
.ttbp_fnb_pin_logo i { font-size: 32px; color: var(--ttbp-primary); }
.ttbp_fnb_pin_title {
    font-size: var(--ttbp-fs-lg); color: #94a3b8; margin-bottom: var(--ttbp-sp-5);
}
.ttbp_fnb_pin_dots {
    display: flex; gap: 14px; justify-content: center; margin-bottom: var(--ttbp-sp-6);
}
.ttbp_fnb_pin_dots span {
    width: 16px; height: 16px; border-radius: var(--ttbp-radius-full);
    border: 2px solid #475569; background: transparent;
    transition: background .15s, border-color .15s;
}
.ttbp_fnb_pin_dots span.filled {
    background: var(--ttbp-primary); border-color: var(--ttbp-primary);
}
.ttbp_fnb_pin_pad {
    display: grid; grid-template-columns: repeat(3, 70px); gap: 10px;
    justify-content: center;
}
.ttbp_fnb_pin_key {
    width: 70px; height: 56px; border-radius: var(--ttbp-radius-xl); border: 1px solid #334155;
    background: #1e293b; color: #e2e8f0; font-size: 22px; font-weight: var(--ttbp-fw-semibold);
    cursor: pointer; transition: background .15s; font-family: var(--ttbp-font);
}
.ttbp_fnb_pin_key:hover:not(:disabled) { background: #334155; border-color: var(--ttbp-primary); }
.ttbp_fnb_pin_key:disabled { visibility: hidden; }
.ttbp_fnb_pin_error {
    margin-top: 14px; color: #f87171; font-size: var(--ttbp-fs-sm); font-weight: var(--ttbp-fw-semibold);
}
.ttbp_fnb_pin_checking {
    margin-top: 14px; color: #94a3b8; font-size: var(--ttbp-fs-sm);
}

/* ── Loader ── */
.ttbp-loader-sm {
    display: inline-block; width: 14px; height: 14px;
    border: 2px solid rgba(255,255,255,0.3); border-top-color: #fff;
    border-radius: 50%; animation: ttbp-spin .6s linear infinite;
}
@keyframes ttbp-spin { to { transform: rotate(360deg); } }

/* ============================================================
   OVERLAY BACKDROP — matches POS sale_overlay
   ============================================================ */
/* ── Main Register Layout ──
   F&B register is rendered via shortcode inside WP content.
   position:fixed breaks it out. The register div IS the panel (no inner wrapper)
   to avoid theme max-width constraints on children. */
.ttbp_fnb_register {
    position: fixed;
    top: 0; right: 0; bottom: 0; left: 0;
    z-index: 999998;
    background: rgba(0, 0, 0, 0.5);
    font-family: var(--ttbp-font);
    transform: none;
    overflow: hidden;
}
/* jQuery .show() sets display:block — override back to flex when visible */
.ttbp_fnb_register:not([style*="display: none"]):not([style*="display:none"]) {
    display: flex;
}
.ttbp_fnb_register {
    /* The register IS the panel, sized like POS inner */
    width: 98vw;
    min-width: 98vw;
    max-width: 98vw;
    height: 98vh;
    height: 98dvh;
    max-height: 98vh;
    max-height: 98dvh;
    /* Center it on screen */
    top: 50%; left: 50%;
    right: auto; bottom: auto;
    transform: translate(-50%, -50%);
    /* Panel styling */
    background: var(--ttbp-gray-100);
    border-radius: var(--ttbp-radius);
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.3);
    box-sizing: border-box;
    flex-direction: column;
}

/* ============================================================
   HEADER — matches POS sale_header
   ============================================================ */
.ttbp_fnb_header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--ttbp-sp-3) var(--ttbp-sp-4);
    background: var(--ttbp-primary);
    color: var(--ttbp-white);
    flex-shrink: 0;
    border-bottom: 3px solid rgba(0,0,0,0.12);
    font-family: var(--ttbp-font);
    gap: var(--ttbp-sp-3);
}

.ttbp_fnb_title {
    margin: 0;
    font-size: var(--ttbp-fs-lg);
    font-weight: var(--ttbp-fw-bold);
    display: flex;
    align-items: center;
    gap: var(--ttbp-sp-2);
    color: var(--ttbp-white);
    white-space: nowrap;
}

.ttbp_fnb_dashboard_link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    margin-left: 4px;
    border-radius: 6px;
    color: rgba(255,255,255,0.5);
    text-decoration: none;
    font-size: 14px;
    transition: color 0.2s, background 0.2s;
}
.ttbp_fnb_dashboard_link:hover {
    color: #fff;
    background: rgba(255,255,255,0.12);
}

/* Customer badge in header */
.ttbp_fnb_hdr_customer_badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: var(--ttbp-sp-2) 18px;
    background: rgba(255,255,255,0.18);
    border: 1px solid rgba(255,255,255,0.35);
    border-radius: 20px;
    font-size: var(--ttbp-fs-lg);
    font-weight: var(--ttbp-fw-bold);
    color: var(--ttbp-white);
    white-space: normal;
    flex-shrink: 1;
}
.ttbp_fnb_hdr_profile_btn {
    color: rgba(255,255,255,0.7);
    font-size: var(--ttbp-fs-lg);
    padding: 0 4px;
    background: none; border: none; cursor: pointer;
}
.ttbp_fnb_hdr_profile_btn:hover { color: var(--ttbp-white); }
.ttbp_fnb_hdr_clear_btn {
    color: rgba(255,255,255,0.6);
    font-size: var(--ttbp-fs-lg);
    padding: 0 2px;
    background: none; border: none; cursor: pointer;
}
.ttbp_fnb_hdr_clear_btn:hover { color: var(--ttbp-white); }

/* Customer search in header — matches POS */
.ttbp_fnb_customer_search {
    display: flex;
    align-items: center;
    gap: var(--ttbp-radius);
    flex-shrink: 0;
    position: relative;
}
.ttbp_fnb_customer_search_inner {
    display: flex;
    align-items: center;
    gap: var(--ttbp-radius);
    position: relative;
}
.ttbp_fnb_customer_search_inner > i {
    color: rgba(255,255,255,0.7);
    font-size: var(--ttbp-fs-sm);
}
.ttbp_fnb_customer_search_inner input {
    padding: 6px 12px;
    border: 1px solid rgba(255,255,255,0.3);
    border-radius: 6px;
    background: rgba(255,255,255,0.15);
    color: var(--ttbp-white);
    font-size: var(--ttbp-fs-sm);
    font-family: var(--ttbp-font);
    width: clamp(280px, 35vw, 560px);
    outline: none;
}
.ttbp_fnb_customer_search_inner input::placeholder { color: rgba(255,255,255,0.5); }
.ttbp_fnb_customer_search_inner input:focus {
    border-color: rgba(255,255,255,0.5);
    background: rgba(255,255,255,0.25);
}
.ttbp_fnb_customer_results {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: var(--ttbp-white);
    border: 1px solid var(--ttbp-gray-200);
    border-radius: 8px;
    max-height: 240px;
    overflow-y: auto;
    z-index: 1001;
    box-shadow: var(--ttbp-shadow-lg);
}
.ttbp_fnb_customer_result_row {
    padding: 10px 14px;
    cursor: pointer;
    font-size: var(--ttbp-fs-sm);
    color: var(--ttbp-gray-700);
    border-bottom: 1px solid var(--ttbp-gray-100);
    transition: background .1s;
}
.ttbp_fnb_customer_result_row:last-child { border-bottom: none; }
.ttbp_fnb_customer_result_row:hover { background: #f0fdf4; }

/* Create New customer button */
.ttbp_fnb_customer_create_btn {
    padding: 4px 10px;
    border: 1px solid rgba(255,255,255,0.35);
    border-radius: 5px;
    background: rgba(255,255,255,0.1);
    color: rgba(255,255,255,0.85);
    font-size: 12px;
    font-weight: var(--ttbp-fw-semibold);
    cursor: pointer;
    white-space: nowrap;
    transition: background .15s, border-color .15s;
    font-family: var(--ttbp-font);
}
.ttbp_fnb_customer_create_btn:hover {
    background: rgba(255,255,255,0.25);
    border-color: rgba(255,255,255,0.5);
}
.ttbp_fnb_customer_create_btn i { margin-right: 3px; }

/* Inline create form */
.ttbp_fnb_customer_create_form {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    background: var(--ttbp-white);
    border: 1px solid var(--ttbp-gray-200);
    border-radius: 8px;
    box-shadow: var(--ttbp-shadow-lg);
    padding: 14px;
    z-index: 1001;
    min-width: 320px;
}
.ttbp_fnb_ccf_fields {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 10px;
}
.ttbp_fnb_ccf_fields input {
    padding: 7px 10px;
    border: 1px solid var(--ttbp-gray-200);
    border-radius: 5px;
    font-size: 13px;
    outline: none;
    color: var(--ttbp-gray-900);
    font-family: var(--ttbp-font);
}
.ttbp_fnb_ccf_fields input:focus {
    border-color: var(--ttbp-primary);
    box-shadow: 0 0 0 2px rgba(21,128,61,0.15);
}
.ttbp_fnb_ccf_actions {
    display: flex;
    gap: 8px;
}
.ttbp_fnb_ccf_save {
    padding: 6px 14px;
    background: var(--ttbp-primary);
    color: var(--ttbp-white);
    border: none;
    border-radius: 5px;
    font-size: 13px;
    font-weight: var(--ttbp-fw-bold);
    cursor: pointer;
    transition: background .15s;
    font-family: var(--ttbp-font);
}
.ttbp_fnb_ccf_save:hover { background: #166534; }
.ttbp_fnb_ccf_cancel {
    padding: 6px 12px;
    background: transparent;
    color: var(--ttbp-gray-500);
    border: 1px solid var(--ttbp-gray-200);
    border-radius: 5px;
    font-size: 13px;
    cursor: pointer;
    font-family: var(--ttbp-font);
}
.ttbp_fnb_ccf_cancel:hover { background: var(--ttbp-gray-50); }
.ttbp_fnb_ccf_msg {
    margin-top: 8px;
    font-size: 12px;
    text-align: center;
}

/* Header actions — matches POS sale_hdr_actions */
.ttbp_fnb_hdr_actions { display: flex; align-items: center; gap: 10px; }
.ttbp_fnb_hdr_btn {
    background: rgba(255,255,255,0.12);
    border: none;
    color: var(--ttbp-white);
    width: 36px;
    height: 36px;
    border-radius: var(--ttbp-radius-lg);
    cursor: pointer;
    font-size: var(--ttbp-fs-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}
.ttbp_fnb_hdr_btn:hover { background: rgba(255,255,255,0.25); }

.ttbp_fnb_close_btn {
    background: rgba(255,255,255,0.1);
    border: none;
    color: var(--ttbp-white);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    cursor: pointer;
    font-size: var(--ttbp-fs-xl);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}
.ttbp_fnb_close_btn:hover { background: rgba(255,255,255,0.25); }

/* Staff badge — matches POS */
.ttbp_fnb_coach_badge {
    font-size: 13px;
    background: rgba(74,144,217,0.25);
    border: 1px solid rgba(74,144,217,0.4);
    color: #c5e0ff;
    padding: var(--ttbp-sp-1) var(--ttbp-sp-3);
    border-radius: 20px;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* ============================================================
   BODY: 3-ZONE LAYOUT — matches POS sale_body
   ============================================================ */
.ttbp_fnb_body {
    display: grid;
    grid-template-columns: clamp(180px, 18vw, 280px) 1fr 400px;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    width: 100%;
}

/* ============================================================
   ZONE 1: LEFT SIDEBAR — matches POS sale_sidebar
   ============================================================ */
.ttbp_fnb_sidebar {
    display: flex;
    flex-direction: column;
    background: #f0f5f2;
    border-right: 1px solid #d4eadc;
    overflow: hidden;
    min-width: 0;
}

/* Categories: content-sized, max 70% then scroll */
.ttbp_fnb_categories {
    flex: 1 1 auto;
    max-height: 70%;
    padding: 6px;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    min-height: 0;
}
.ttbp_fnb_cats_label {
    font-size: 9px;
    font-weight: var(--ttbp-fw-bold);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #888;
    padding: 2px 6px var(--ttbp-sp-1);
}
.ttbp_fnb_cat_btn {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    text-align: left;
    padding: var(--ttbp-sp-2);
    border: none;
    border-left: 3px solid transparent;
    border-radius: 5px;
    background: transparent;
    cursor: pointer;
    font-size: 13px;
    font-weight: var(--ttbp-fw-bold);
    color: var(--ttbp-gray-700);
    transition: background 0.15s, color 0.15s;
    line-height: 1.3;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    min-width: 0;
    font-family: var(--ttbp-font);
    margin-bottom: 1px;
}
.ttbp_fnb_cat_btn:hover { background: #d4eadc; color: var(--ttbp-primary); }
.ttbp_fnb_cat_btn.active { background: var(--ttbp-primary); color: var(--ttbp-white); font-weight: var(--ttbp-fw-bold); }
.ttbp_fnb_cat_btn i { font-size: var(--ttbp-fs-sm); width: 14px; text-align: center; flex-shrink: 0; }

.ttbp_fnb_loading_cats { padding: 12px; text-align: center; }

/* Open Tabs section — matches POS open_tabs_section */
.ttbp_fnb_open_tabs_section {
    border-top: 2px solid #d4eadc;
    padding: 8px 6px 6px;
    background: #eaf0f6;
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}
.ttbp_fnb_open_tabs_list_scroll {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
}
.ttbp_fnb_open_tabs_label {
    font-size: 10px;
    font-weight: var(--ttbp-fw-bold);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ttbp-primary);
    padding: 0 var(--ttbp-sp-1) var(--ttbp-sp-2);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 5px;
}
.ttbp_fnb_refresh_tabs_btn {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--ttbp-primary);
    font-size: var(--ttbp-fs-sm);
    padding: 2px var(--ttbp-sp-1);
    border-radius: var(--ttbp-radius-sm);
    transition: background 0.15s;
}
.ttbp_fnb_refresh_tabs_btn:hover { background: var(--ttbp-primary-light); }

/* Category wrapper — colored borders, drag handle, eye toggle */
.ttbp_fnb_cat_btn_wrap {
    display: flex;
    align-items: center;
    margin-bottom: 1px;
    border-radius: 5px;
    position: relative;
    cursor: grab;
    transition: opacity 0.15s, outline 0.1s;
}
.ttbp_fnb_cat_btn_wrap .ttbp_fnb_cat_btn {
    flex: 1;
    min-width: 0;
    width: auto;
    margin-bottom: 0;
    background: var(--cat-bg, transparent);
    border-left: 3px solid var(--cat-accent, transparent);
}
.ttbp_fnb_cat_btn_wrap .ttbp_fnb_cat_btn.active {
    background: var(--cat-accent, var(--ttbp-primary));
    color: var(--ttbp-white);
}
.ttbp_fnb_cat_btn_wrap .ttbp_fnb_cat_btn .ttbp_fnb_cat_icon {
    color: var(--cat-accent, #666);
    font-size: 13px;
    width: 14px;
    text-align: center;
    flex-shrink: 0;
}
.ttbp_fnb_cat_btn_wrap .ttbp_fnb_cat_btn.active .ttbp_fnb_cat_icon { color: var(--ttbp-white); }
.ttbp_fnb_cat_btn_wrap.ttbp_fnb_cat_hidden { opacity: 0.4; }
.ttbp_fnb_cat_btn_wrap.ttbp_fnb_cat_dragging { opacity: 0.5; outline: 2px dashed var(--ttbp-primary); }

/* Drag handle */
.ttbp_fnb_drag_handle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    flex-shrink: 0;
    color: #c0c8d0;
    font-size: var(--ttbp-fs-xs);
    cursor: grab;
    padding: 0 2px;
    transition: color 0.15s;
}
.ttbp_fnb_cat_btn_wrap:hover .ttbp_fnb_drag_handle { color: #94a3b8; }

/* Eye toggle */
.ttbp_fnb_cat_hide_btn {
    background: none;
    border: none;
    cursor: pointer;
    color: #c0c8d0;
    font-size: 10px;
    padding: 2px 3px;
    line-height: 1;
    flex-shrink: 0;
    transition: color 0.15s;
}
.ttbp_fnb_cat_btn_wrap:hover .ttbp_fnb_cat_hide_btn { color: #94a3b8; }
.ttbp_fnb_cat_hide_btn:hover { color: #ef4444; }

/* Popular Items category — orange accent */
.ttbp_fnb_hot_items_wrap { }

/* Layout toggle section — below categories, above open tabs */
.ttbp_fnb_layout_toggle_section {
    padding: 6px 6px 4px;
    display: flex;
    gap: 4px;
    flex-shrink: 0;
    border-top: 1px solid #d4eadc;
}
.ttbp_fnb_layout_toggle_btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5px 4px;
    background: #fff;
    color: #475569;
    border: 1px solid #cbd5e1;
    border-radius: 5px;
    cursor: pointer;
    font-size: 10px;
    font-weight: 600;
    font-family: var(--ttbp-font);
    transition: all .15s;
    white-space: nowrap;
}
.ttbp_fnb_layout_toggle_btn:hover { background: #f1f5f9; border-color: #94a3b8; }
.ttbp_fnb_layout_toggle_btn.ttbp_fnb_layout_active {
    background: #0369a1;
    color: #fff;
    border-color: #0369a1;
}
.ttbp_fnb_layout_toggle_btn.ttbp_fnb_layout_active:hover { background: #0284c7; }
.ttbp_fnb_layout_save_icon_btn {
    flex: 0 0 auto;
    padding: 5px 8px;
    background: #f0fdf4;
    color: var(--ttbp-primary-dark);
    border: 1px solid #86efac;
    border-radius: 5px;
    cursor: pointer;
    font-size: 12px;
    font-family: var(--ttbp-font);
    transition: all .15s;
    line-height: 1;
}
.ttbp_fnb_layout_save_icon_btn:hover { background: #dcfce7; border-color: #4ade80; }

/* Tab rows — matches POS tab_btn */
.ttbp_fnb_tab_row {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-bottom: var(--ttbp-sp-1);
}
.ttbp_fnb_tab_btn {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex: 1;
    text-align: left;
    padding: var(--ttbp-sp-2) 10px;
    border: 1.5px solid #c8d8f5;
    border-radius: 7px;
    background: var(--ttbp-white);
    cursor: pointer;
    font-size: var(--ttbp-fs-sm);
    color: var(--ttbp-primary);
    gap: 6px;
    transition: background 0.15s, border-color 0.15s;
    font-family: var(--ttbp-font);
}
.ttbp_fnb_tab_btn:hover { background: var(--ttbp-primary-light); border-color: var(--ttbp-primary); }

.ttbp_fnb_tab_name {
    font-weight: var(--ttbp-fw-semibold);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    flex: 1; min-width: 0;
}
.ttbp_fnb_tab_total {
    font-weight: var(--ttbp-fw-bold);
    flex-shrink: 0;
}
/* Delete button on tab rows */
.ttbp_fnb_tab_del_btn {
    width: 26px; height: 26px; flex-shrink: 0;
    border: none; border-radius: 5px;
    background: transparent; color: var(--ttbp-gray-400);
    font-size: 12px; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background .15s, color .15s;
}
.ttbp_fnb_tab_del_btn:hover { background: #fecaca; color: #dc2626; }

.ttbp_fnb_tabs_loading { padding: 12px; text-align: center; }
.ttbp_fnb_tabs_empty {
    text-align: center; padding: 12px 0; color: var(--ttbp-gray-400);
    font-size: var(--ttbp-fs-xs);
}

/* ============================================================
   ZONE 2: ITEM GRID — matches POS sale_grid_zone
   ============================================================ */
.ttbp_fnb_grid_zone {
    overflow-y: auto;
    padding: var(--ttbp-sp-4);
    background: #f5f7fa;
    display: flex;
    flex-direction: column;
}

.ttbp_fnb_item_search_bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: var(--ttbp-white);
    border: 1px solid var(--ttbp-gray-200);
    border-radius: var(--ttbp-radius-lg);
    margin-bottom: var(--ttbp-sp-3);
    flex-shrink: 0;
}
.ttbp_fnb_item_search_bar > i { color: var(--ttbp-gray-400); font-size: var(--ttbp-fs-sm); }
.ttbp_fnb_item_search_bar input {
    flex: 1;
    border: none;
    outline: none;
    font-size: var(--ttbp-fs-base);
    font-family: var(--ttbp-font);
    background: transparent;
    color: var(--ttbp-gray-900);
}
.ttbp_fnb_item_search_bar input::placeholder { color: var(--ttbp-gray-400); }
.ttbp_fnb_search_clear_btn {
    background: none; border: none; cursor: pointer;
    color: var(--ttbp-gray-400); font-size: var(--ttbp-fs-sm); padding: 2px 4px;
}
.ttbp_fnb_search_clear_btn:hover { color: var(--ttbp-gray-700); }

.ttbp_fnb_item_grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
    align-content: start;
    flex: 1;
}
.ttbp_fnb_item_tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 14px 12px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-left: 4px solid #94a3b8;
    border-radius: 8px;
    cursor: pointer;
    text-align: center;
    gap: 6px;
    transition: all 0.15s;
    min-height: 90px;
    box-shadow: 0 1px 3px rgba(0,0,0,.06);
}
.ttbp_fnb_item_tile:hover {
    background: #f0fdf4;
    border-color: var(--ttbp-primary);
    border-left-color: var(--ttbp-primary);
    box-shadow: 0 2px 8px rgba(0,0,0,.1);
    transform: translateY(-1px);
}
.ttbp_fnb_item_tile.tile_tapped { transform: scale(0.96); background: #dcfce7; }
.ttbp_fnb_item_tile { position: relative; }

/* Star icon — pin/unpin popular item */
.ttbp_fnb_tile_star {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    color: var(--ttbp-gray-300);
    opacity: 0;
    transition: opacity 0.15s, color 0.15s, transform 0.15s;
    border-radius: 50%;
    z-index: 2;
    cursor: pointer;
    background: none;
    border: none;
    padding: 0;
}
.ttbp_fnb_item_tile:hover .ttbp_fnb_tile_star { opacity: 1; }
.ttbp_fnb_tile_star:hover { color: #f59e0b; transform: scale(1.25); }
.ttbp_fnb_tile_star.pinned { color: #f59e0b; opacity: 1; }
.ttbp_fnb_tile_star.pinned:hover { color: #d97706; }
.ttbp_fnb_item_name {
    font-size: 13px;
    font-weight: var(--ttbp-fw-semibold);
    color: var(--ttbp-gray-900);
    line-height: 1.3;
    word-break: break-word;
    font-family: var(--ttbp-font);
}
.ttbp_fnb_item_price {
    font-size: 15px;
    font-weight: var(--ttbp-fw-bold);
    color: var(--ttbp-success);
}
.ttbp_fnb_loading, .ttbp_fnb_empty {
    grid-column: 1 / -1; text-align: center; padding: 40px;
    color: var(--ttbp-gray-500); font-size: var(--ttbp-fs-base);
}

/* Sync toast */
.ttbp_fnb_sync_toast {
    position: fixed; top: 80px; left: 50%; transform: translateX(-50%);
    padding: 10px 24px; border-radius: 8px;
    font: 600 14px/1.4 var(--ttbp-font, 'DM Sans', sans-serif);
    z-index: 999999; box-shadow: 0 4px 12px rgba(0,0,0,.15);
    transition: opacity .4s;
}
.ttbp_fnb_sync_toast.success { background: #f0fdf4; color: #166534; border: 1px solid #bbf7d0; }
.ttbp_fnb_sync_toast.error   { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; }
.ttbp_fnb_sync_toast.fade-out { opacity: 0; }

/* ============================================================
   ZONE 3: ORDER SUMMARY — matches POS sale_order_zone
   ============================================================ */
.ttbp_fnb_order_zone {
    display: flex;
    flex-direction: column;
    border-left: 1px solid var(--ttbp-gray-200);
    background: #fafafa;
    overflow: hidden;
}

.ttbp_fnb_order_header {
    padding: var(--ttbp-sp-2) 14px;
    font-weight: var(--ttbp-fw-bold);
    font-size: 13px;
    border-bottom: 1px solid var(--ttbp-gray-200);
    background: #f0f2f5;
    flex-shrink: 0;
    text-transform: uppercase;
    letter-spacing: .04em;
    display: flex;
    align-items: center;
    gap: var(--ttbp-sp-2);
}
.ttbp_fnb_cart_customer {
    font-size: var(--ttbp-fs-xs);
    font-weight: var(--ttbp-fw-semibold);
    color: var(--ttbp-primary);
    background: var(--ttbp-primary-light);
    padding: 2px 8px;
    border-radius: var(--ttbp-radius-full);
    text-transform: none;
    letter-spacing: normal;
}

/* Quick Tab bar */
.ttbp_fnb_quick_tab_bar {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-bottom: 1px solid var(--ttbp-gray-200);
    background: #fafafa;
    flex-shrink: 0;
}
.ttbp_fnb_quick_tab_bar input {
    flex: 1;
    padding: 6px 10px;
    border: 1px solid var(--ttbp-gray-200);
    border-radius: var(--ttbp-radius);
    font-size: var(--ttbp-fs-sm);
    font-family: var(--ttbp-font);
    box-sizing: border-box;
    outline: none;
}
.ttbp_fnb_quick_tab_bar input:focus {
    border-color: var(--ttbp-primary);
    box-shadow: var(--ttbp-input-focus);
}
.ttbp_fnb_quick_tab_btn {
    padding: 6px 14px;
    border: 1px solid var(--ttbp-gray-200);
    border-radius: var(--ttbp-radius);
    background: var(--ttbp-white);
    color: var(--ttbp-gray-700);
    font-size: var(--ttbp-fs-sm);
    font-weight: var(--ttbp-fw-bold);
    cursor: pointer;
    white-space: nowrap;
    font-family: var(--ttbp-font);
    transition: all .15s;
}
.ttbp_fnb_quick_tab_btn:hover { background: var(--ttbp-primary-light); color: var(--ttbp-primary); border-color: var(--ttbp-primary); }
.ttbp_fnb_quick_tab_btn:disabled { opacity: .5; cursor: not-allowed; }

/* Cart items — matches POS order_lines */
.ttbp_fnb_cart_items {
    flex: 1; overflow-y: auto; padding: var(--ttbp-sp-2) 0;
}
.ttbp_fnb_cart_empty {
    padding: var(--ttbp-sp-5) var(--ttbp-sp-4);
    color: #aaa;
    font-size: 13px;
    text-align: center;
}
.ttbp_fnb_cart_item {
    display: flex;
    align-items: center;
    padding: var(--ttbp-sp-2) 14px;
    border-bottom: 1px solid #eee;
    gap: 6px;
}
.ttbp_fnb_cart_item:hover { background: var(--ttbp-gray-50); }
.ttbp_fnb_cart_item_info {
    flex: 1; min-width: 0;
    display: flex; align-items: center; gap: 6px;
}
.ttbp_fnb_cart_item_name {
    flex: 1; min-width: 0;
    font-size: 13px; line-height: 1.4; color: #222;
}
.ttbp_fnb_cart_item_qty {
    font-size: 12px; font-weight: var(--ttbp-fw-bold);
    color: var(--ttbp-gray-500);
    white-space: nowrap;
}
.ttbp_fnb_cart_item_each {
    font-size: 11px; color: var(--ttbp-gray-400);
}
.ttbp_fnb_cart_item_price {
    font-size: 13px; font-weight: var(--ttbp-fw-semibold);
    color: var(--ttbp-success);
    white-space: nowrap;
}
.ttbp_fnb_remove_btn {
    background: none;
    border: none;
    cursor: pointer;
    color: #ccc;
    font-size: 13px;
    padding: 4px 6px;
    border-radius: var(--ttbp-radius);
    flex-shrink: 0;
    transition: background 0.15s, color 0.15s;
}
.ttbp_fnb_remove_btn:hover { background: #fde8e8; color: #b91c1c; }

/* Cart footer / totals — matches POS order_footer */
.ttbp_fnb_cart_footer {
    border-top: 2px solid var(--ttbp-gray-200);
    padding: var(--ttbp-sp-2) 14px;
    background: var(--ttbp-white);
    flex-shrink: 0;
}
.ttbp_fnb_cart_row {
    display: flex; justify-content: space-between;
    font-size: var(--ttbp-fs-base);
    padding: 3px 0;
    color: #555;
}
.ttbp_fnb_cart_total_row {
    font-size: var(--ttbp-fs-xl); font-weight: var(--ttbp-fw-bold);
    color: var(--ttbp-gray-900);
    padding-top: 6px; border-top: 2px solid var(--ttbp-border); margin-top: var(--ttbp-sp-1);
}
.ttbp_fnb_tip_display {
    border-top: 1px dashed var(--ttbp-border); padding-top: 6px; margin-top: var(--ttbp-sp-1);
}

/* Discount row */
.ttbp_fnb_discount_row { color: #dc2626; }
.ttbp_fnb_discount_row span:last-child { font-weight: var(--ttbp-fw-bold); }
.ttbp_fnb_remove_discount {
    background: none; border: none; cursor: pointer;
    color: var(--ttbp-gray-400); font-size: 10px;
    padding: 0 2px; margin-left: 4px;
    transition: color .15s;
}
.ttbp_fnb_remove_discount:hover { color: #dc2626; }

/* Gift Card applied row */
.ttbp_fnb_giftcard_applied_row { color: #4ade80; }
.ttbp_fnb_giftcard_applied_row span:last-child { font-weight: var(--ttbp-fw-bold); }

/* Gift Card button */
.ttbp_fnb_giftcard_btn {
    border-color: #3d7a2e;
    color: #2d6b1e;
}
.ttbp_fnb_giftcard_btn:hover {
    background: var(--ttbp-primary);
    color: var(--ttbp-white);
    border-color: var(--ttbp-primary);
}
.ttbp_fnb_giftcard_btn.ttbp_gc_applied {
    background: #e6f9e6;
    border-color: #4ade80;
    color: var(--ttbp-primary-dark);
    border-style: solid;
}

/* Footer actions row for discount + gift card buttons */
.ttbp_fnb_footer_actions_row {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    align-items: center;
    margin: 6px 0;
}
.ttbp_fnb_footer_actions_row .ttbp_fnb_add_discount_btn {
    margin: 0;
}

/* Apply Discount button */
.ttbp_fnb_add_discount_btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: auto;
    text-align: center;
    padding: var(--ttbp-sp-3) 14px;
    margin: 6px 0;
    background: none;
    border: 1.5px dashed #aaa;
    border-radius: var(--ttbp-radius-lg);
    cursor: pointer;
    font-size: 13px;
    font-weight: var(--ttbp-fw-semibold);
    color: #555;
    transition: border-color 0.15s, color 0.15s, background 0.15s;
    font-family: var(--ttbp-font);
}
.ttbp_fnb_add_discount_btn:hover {
    background: var(--ttbp-primary);
    color: var(--ttbp-white);
    border-color: var(--ttbp-primary);
}

/* Discount picker */
.ttbp_fnb_discount_picker {
    background: var(--ttbp-white);
    border: 1.5px solid #dde3ea;
    border-radius: 10px;
    padding: 10px var(--ttbp-sp-3);
    margin-bottom: 10px;
    box-shadow: var(--ttbp-shadow);
}
.ttbp_fnb_discount_picker_hdr {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: var(--ttbp-fs-sm);
    font-weight: var(--ttbp-fw-bold);
    color: var(--ttbp-gray-700);
    margin-bottom: var(--ttbp-sp-2);
}
.ttbp_fnb_btn_link {
    background: none; border: none; cursor: pointer;
    color: var(--ttbp-gray-400); font-size: var(--ttbp-fs-sm);
    padding: 2px;
}
.ttbp_fnb_btn_link:hover { color: var(--ttbp-gray-700); }
.ttbp_fnb_discount_manual_row {
    display: flex;
    gap: 6px;
    align-items: center;
}
.ttbp_fnb_discount_manual_row input[type="text"] {
    flex: 1; padding: 5px var(--ttbp-sp-2);
    border: 1px solid var(--ttbp-gray-300); border-radius: 5px;
    font-size: var(--ttbp-fs-sm); font-family: var(--ttbp-font);
    outline: none;
}
.ttbp_fnb_discount_manual_row input[type="number"] {
    width: 60px; padding: 5px 6px;
    border: 1px solid var(--ttbp-gray-300); border-radius: 5px;
    font-size: var(--ttbp-fs-sm); font-family: var(--ttbp-font);
    outline: none;
}

/* Action buttons row — matches POS ttbp_order_actions */
.ttbp_fnb_order_actions {
    display: flex;
    gap: var(--ttbp-sp-2);
    align-items: stretch;
    margin-top: 10px;
}
.ttbp_fnb_btn {
    padding: var(--ttbp-sp-3);
    font-size: 15px;
    font-weight: var(--ttbp-fw-bold);
    border-radius: var(--ttbp-radius-lg);
    cursor: pointer;
    font-family: var(--ttbp-font);
    transition: background .15s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--ttbp-sp-2);
}

/* Send to Terminal — primary green, flex:1 */
.ttbp_fnb_send_btn {
    flex: 1;
    background: var(--ttbp-primary);
    color: var(--ttbp-white);
    border: none;
    font-size: 16px;
    font-weight: 800;
    letter-spacing: .02em;
}
.ttbp_fnb_send_btn:disabled {
    background: var(--ttbp-gray-300);
    cursor: not-allowed;
}
.ttbp_fnb_send_btn:not(:disabled):hover { background: var(--ttbp-primary-hover); }

/* Clear — secondary gray */
.ttbp_fnb_btn_secondary {
    background: #f0f0f0;
    color: var(--ttbp-gray-700);
    border: 1px solid var(--ttbp-gray-300);
}
.ttbp_fnb_btn_secondary:hover { background: var(--ttbp-gray-200); }

/* Add to Tab — full-width above the action row */
.ttbp_fnb_add_tab_btn {
    width: 100%; padding: 12px; margin-top: 8px; border-radius: var(--ttbp-radius-lg);
    border: none; background: var(--ttbp-primary-dark); color: var(--ttbp-white);
    font-size: 15px; font-weight: var(--ttbp-fw-bold); cursor: pointer;
    transition: background .15s; font-family: var(--ttbp-font);
    display: flex; align-items: center; justify-content: center; gap: var(--ttbp-sp-2);
}
.ttbp_fnb_add_tab_btn:hover:not(:disabled) { background: #116d33; }
.ttbp_fnb_add_tab_btn:disabled { opacity: .5; cursor: not-allowed; }

/* ── Payment Overlay ── */
.ttbp_fnb_payment_overlay {
    position: fixed;
    top: 0; right: 0; bottom: 0; left: 0;
    z-index: 1000000;
    background: rgba(15, 23, 42, 0.9);
    display: flex; align-items: center; justify-content: center;
    font-family: var(--ttbp-font);
    transform: none;
}
.ttbp_fnb_payment_inner { text-align: center; color: #fff; }
.ttbp_fnb_payment_spinner {
    width: 48px; height: 48px; border: 4px solid rgba(255,255,255,.2);
    border-top-color: var(--ttbp-primary); border-radius: 50%;
    animation: ttbp-spin 1s linear infinite;
    margin: 0 auto 20px;
}
.ttbp_fnb_payment_msg {
    font-size: var(--ttbp-fs-xl); font-weight: var(--ttbp-fw-semibold);
    margin-bottom: var(--ttbp-sp-5);
}
.ttbp_fnb_cancel_btn {
    padding: 10px 28px; border-radius: var(--ttbp-radius-lg);
    border: 1px solid rgba(255,255,255,0.25);
    background: transparent; color: rgba(255,255,255,0.7); font-size: var(--ttbp-fs-base);
    cursor: pointer; transition: all .15s; font-family: var(--ttbp-font);
}
.ttbp_fnb_cancel_btn:hover { background: rgba(255,255,255,0.1); color: #fff; }
.ttbp_fnb_payment_check {
    font-size: 56px; color: #22c55e; margin-bottom: var(--ttbp-sp-4);
}
.ttbp_fnb_payment_tip {
    font-size: var(--ttbp-fs-lg); color: var(--ttbp-primary); margin-bottom: var(--ttbp-sp-4);
}
.ttbp_fnb_done_btn {
    padding: var(--ttbp-sp-3) var(--ttbp-sp-8); border-radius: var(--ttbp-radius-lg);
    border: none; background: #22c55e; color: var(--ttbp-white);
    font-size: 15px; font-weight: var(--ttbp-fw-bold); cursor: pointer;
    transition: background .15s; font-family: var(--ttbp-font);
}
.ttbp_fnb_done_btn:hover { background: #16a34a; }

/* ── Sales Modal ── */
.ttbp_fnb_modal_backdrop {
    position: fixed;
    top: 0; right: 0; bottom: 0; left: 0;
    z-index: 1000001;
    background: rgba(15, 23, 42, 0.7);
    display: flex; align-items: center; justify-content: center;
    font-family: var(--ttbp-font);
    transform: none;
}
.ttbp_fnb_modal_panel {
    background: var(--ttbp-white); border-radius: var(--ttbp-radius-xl);
    width: 90%; max-width: 700px;
    max-height: 80vh; display: flex; flex-direction: column;
    box-shadow: var(--ttbp-shadow-xl);
}
.ttbp_fnb_modal_hdr {
    display: flex; align-items: center; justify-content: space-between;
    padding: var(--ttbp-sp-4) var(--ttbp-sp-5);
    border-bottom: 1px solid var(--ttbp-border);
}
.ttbp_fnb_modal_hdr h3 {
    margin: 0; font-size: var(--ttbp-fs-lg); color: var(--ttbp-gray-900);
}
.ttbp_fnb_modal_close {
    background: none; border: none; font-size: var(--ttbp-fs-xl);
    color: var(--ttbp-gray-400); cursor: pointer; padding: var(--ttbp-sp-1);
}
.ttbp_fnb_modal_close:hover { color: var(--ttbp-gray-900); }
.ttbp_fnb_sales_content {
    padding: var(--ttbp-sp-4) var(--ttbp-sp-5); overflow-y: auto; flex: 1;
}
.ttbp_fnb_sales_table {
    width: 100%; border-collapse: collapse; font-size: var(--ttbp-fs-sm);
}
.ttbp_fnb_sales_table th {
    text-align: left; padding: var(--ttbp-sp-2) 10px;
    background: var(--ttbp-gray-50);
    color: var(--ttbp-gray-500); font-size: var(--ttbp-fs-xs);
    text-transform: uppercase; letter-spacing: .04em;
    border-bottom: 2px solid var(--ttbp-border);
}
.ttbp_fnb_sales_table td {
    padding: var(--ttbp-sp-2) 10px; border-bottom: 1px solid var(--ttbp-gray-100);
    color: var(--ttbp-gray-700);
}
.ttbp_fnb_sales_summary {
    display: flex; gap: var(--ttbp-sp-6); padding: 14px 0; margin-top: var(--ttbp-sp-2);
    border-top: 2px solid var(--ttbp-border); font-size: var(--ttbp-fs-base);
    color: var(--ttbp-gray-600);
}
.ttbp_fnb_sales_summary strong { color: var(--ttbp-gray-900); }

/* ── WP admin bar adjustment ── */
body.admin-bar .ttbp_fnb_pin_screen {
    top: 32px;
    height: calc(100vh - 32px);
    height: calc(100dvh - 32px);
}
body.admin-bar .ttbp_fnb_register {
    margin-top: 16px;
    max-height: calc(98vh - 32px);
    max-height: calc(98dvh - 32px);
    height: calc(98vh - 32px);
    height: calc(98dvh - 32px);
}
body.admin-bar .ttbp_fnb_payment_overlay,
body.admin-bar .ttbp_fnb_modal_backdrop {
    top: 32px;
}
@media screen and (max-width: 782px) {
    body.admin-bar .ttbp_fnb_pin_screen {
        top: 46px;
        height: calc(100vh - 46px);
        height: calc(100dvh - 46px);
    }
    body.admin-bar .ttbp_fnb_register {
        margin-top: 23px;
        max-height: calc(98vh - 46px);
        max-height: calc(98dvh - 46px);
        height: calc(98vh - 46px);
        height: calc(98dvh - 46px);
    }
    body.admin-bar .ttbp_fnb_payment_overlay,
    body.admin-bar .ttbp_fnb_modal_backdrop {
        top: 46px;
    }
}