/* ==========================================================================
   Travelco Quotation Builder — front-end styles
   ========================================================================== */

#tqbb-app, #tqbb-app *, #tqbb-app *::before, #tqbb-app *::after { box-sizing: border-box; }

.tqbb-app {
	--blue: #2563eb; --blue-light: #eef2ff; --green: #16a34a; --red: #dc2626; --red-light: #fef2f2;
	--amber: #d97706; --purple: #7c3aed; --border: #e5e7eb; --bg: #f5f7fa; --text: #1f2937; --muted: #6b7280;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	color: var(--text); background: var(--bg); font-size: 14px; line-height: 1.4;
	position: relative; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw; width: 100vw; min-height: 100vh;
}
.tqbb-app a, .tqbb-app a:hover, .tqbb-app a:visited { text-decoration: none !important; color: inherit; }
.tqbb-app button { font-family: inherit; cursor: pointer; }
.tqbb-app input, .tqbb-app select, .tqbb-app textarea { font-family: inherit; }

svg.dashicon { width: 16px; height: 16px; min-width: 16px; flex-shrink: 0; display: inline-block; vertical-align: middle; }

.tqbb-loading { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 120px 20px; color: var(--muted); }
.tqbb-spinner { width: 34px; height: 34px; border: 3px solid #dbeafe; border-top-color: var(--blue); border-radius: 50%; animation: tqbb-spin .8s linear infinite; }
@keyframes tqbb-spin { to { transform: rotate(360deg); } }
.tqbb-login-wall { min-height: 80vh; display: flex; align-items: center; justify-content: center; padding: 40px 20px; background: var(--bg); }
.tqbb-login-card { width: 100%; max-width: 380px; background: #fff; border: 1px solid var(--border); border-radius: 16px; padding: 36px 32px 30px; box-shadow: 0 4px 24px rgba(15,23,42,.06); text-align: center; }
.tqbb-login-logo { max-width: 190px; max-height: 70px; width: auto; height: auto; margin: 0 auto 22px; display: block; }
.tqbb-login-title { font-size: 17px; font-weight: 700; color: var(--text); margin: 0 0 20px; }
.tqbb-login-error { background: var(--red-light); color: var(--red); border: 1px solid #fecaca; border-radius: 8px; padding: 10px 12px; font-size: 12.5px; margin-bottom: 16px; text-align: left; }
.tqbb-login-form { display: flex; flex-direction: column; gap: 14px; text-align: left; }
.tqbb-login-field label { display: block; font-size: 12.5px; font-weight: 600; color: var(--muted); margin-bottom: 6px; }
.tqbb-login-field input[type="text"], .tqbb-login-field input[type="password"] {
	width: 100%; padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; font-size: 14px; color: var(--text) !important; background-color: #f0f0f0 !important; box-sizing: border-box;
}
.tqbb-login-field input:focus { outline: none; border-color: var(--blue); background-color: #fff !important; box-shadow: 0 0 0 3px var(--blue-light); }
.tqbb-login-remember { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--muted); cursor: pointer; user-select: none; }
.tqbb-login-remember input { width: 14px; height: 14px; }
.tqbb-login-submit {
	margin-top: 4px; width: 100%; padding: 11px 16px; border: 1px solid #067DCA !important; border-radius: 8px;
	background-color: #067DCA !important; background-image: none !important; color: #fff !important;
	font-size: 14px; font-weight: 600; cursor: pointer; transition: background-color .15s ease, border-color .15s ease;
}
.tqbb-login-submit:hover { background-color: #0568A8 !important; border-color: #0568A8 !important; color: #fff !important; }
.tqbb-login-lostpw { display: block; margin-top: 18px; font-size: 12.5px; color: var(--muted); text-decoration: none; }
.tqbb-login-lostpw:hover { color: var(--blue); text-decoration: underline; }

.tqb-shell { display: flex; min-height: 100vh; align-items: stretch; }

.tqb-sidebar { width: 230px; flex: 0 0 230px; background: #fff; border-right: 1px solid var(--border); display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; overflow-y: auto; transition: width .18s ease, flex-basis .18s ease; }
.tqb-sidebar-header { padding: 16px 14px; border-bottom: 1px solid var(--border); margin-bottom: 8px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.tqb-sidebar-header img { max-width: 130px; height: auto; display: block; transition: opacity .15s ease; }
.tqb-sidebar-collapse-btn {
	background: #fff !important; border: 1px solid var(--border) !important; color: var(--muted) !important;
	width: 28px; height: 28px; flex: 0 0 28px; border-radius: 7px; display: flex; align-items: center; justify-content: center;
}
.tqb-sidebar-collapse-btn:hover { background: var(--bg) !important; color: var(--text) !important; }
.tqb-sidebar-collapse-btn .dashicon { width: 15px; height: 15px; transition: transform .18s ease; }
.tqb-nav { flex: 1; padding: 8px 12px; }
.tqb-nav-item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 8px; margin-bottom: 2px; color: #475569; font-size: 13.5px; font-weight: 500; text-decoration: none !important; white-space: nowrap; overflow: hidden; }
.tqb-nav-item:hover { background: #f1f5f9; color: var(--text); }
.tqb-nav-item.active { background: var(--blue); color: #fff; }
.tqb-nav-item .dashicon { width: 18px; height: 18px; flex: 0 0 18px; }
.tqb-sidebar-footer { padding: 16px 20px; font-size: 11px; color: var(--muted); border-top: 1px solid var(--border); white-space: nowrap; overflow: hidden; }

/* Collapsed sidebar — icons only, more room for the two-column builder */
.tqb-sidebar.collapsed { width: 64px; flex: 0 0 64px; }
.tqb-sidebar.collapsed .tqb-sidebar-header { justify-content: center; padding: 16px 8px; }
.tqb-sidebar.collapsed .tqb-sidebar-header img { display: none; }
.tqb-sidebar.collapsed .tqb-sidebar-collapse-btn .dashicon { transform: rotate(180deg); }
.tqb-sidebar.collapsed .tqb-nav-item span,
.tqb-sidebar.collapsed .tqb-sidebar-footer { display: none; }
.tqb-sidebar.collapsed .tqb-nav-item { justify-content: center; padding: 10px; }
.tqb-sidebar.collapsed .tqb-sidebar-footer { padding: 12px 0; text-align: center; }

.tqb-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.tqb-topbar { display: flex; align-items: center; gap: 16px; padding: 14px 24px; background: #fff; border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 20; }
.tqb-hamburger { display: none; background: none; border: none; padding: 6px; color: var(--text); }
.tqb-hamburger .dashicon { width: 22px; height: 22px; }
.tqb-topbar-right { display: flex; align-items: center; gap: 14px; margin-left: auto; }
.tqb-user { display: flex; align-items: center; gap: 10px; }
.tqb-avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--blue); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; flex: 0 0 34px; }
.tqb-user-meta { line-height: 1.25; }
.tqb-logout-btn { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 8px; color: var(--muted); border: 1px solid var(--border); margin-left: 4px; flex: 0 0 auto; }
.tqb-logout-btn svg { width: 16px; height: 16px; }
.tqb-logout-btn:hover { background: var(--red-light); border-color: #fecaca; color: var(--red); }
.tqb-user-name { font-weight: 600; font-size: 13.5px; }
.tqb-user-role { font-size: 11.5px; color: var(--muted); }

.tqb-content { padding: 24px; max-width: 100%; }
.tqb-page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; }
.tqb-page-title { font-size: 26px; font-weight: 700; margin: 0 0 4px; }
.tqb-page-sub { color: var(--muted); font-size: 13.5px; margin: 0; }
.tqb-page-head-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.tqb-builder-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.tqb-feed-wrap { max-width: 980px; }
#tqb-preview-col { position: sticky; top: 16px; align-self: start; }
.tqb-preview-panel { margin-bottom: 0; }
.tqb-preview-tools { display: flex; align-items: center; gap: 8px; }
.tqb-preview-status { font-size: 12px; color: var(--muted); }
.tqb-preview-body { max-height: calc(100vh - 150px); overflow-y: auto; background: #eef0f4; padding: 12px; }
.tqb-preview-pages { display: flex; flex-direction: column; gap: 12px; min-height: 120px; }
.tqb-preview-canvas { display: block; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.18); border-radius: 2px; }
.tqb-preview-frame { width: 100%; height: 70vh; border: 0; background: #fff; }

.tqb-btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 8px; font-size: 13.5px; font-weight: 600; border: 1px solid transparent; line-height: 1.2; cursor: pointer; background-image: none !important; box-shadow: none !important; }
#tqbb-app .tqb-btn-primary, .tqb-modal .tqb-btn-primary { background: var(--blue) !important; background-image: none !important; color: #fff !important; border-color: var(--blue) !important; }
#tqbb-app .tqb-btn-primary:hover, .tqb-modal .tqb-btn-primary:hover { background: #1d4ed8 !important; color: #fff !important; }
#tqbb-app .tqb-btn-secondary, .tqb-modal .tqb-btn-secondary { background: #fff !important; background-image: none !important; border-color: var(--border) !important; color: var(--text) !important; }
#tqbb-app .tqb-btn-secondary:hover, .tqb-modal .tqb-btn-secondary:hover { background: var(--bg) !important; color: var(--text) !important; }
#tqbb-app .tqb-btn-danger, .tqb-modal .tqb-btn-danger { background: var(--red) !important; background-image: none !important; color: #fff !important; border-color: var(--red) !important; }
#tqbb-app .tqb-btn-ghost-danger, .tqb-modal .tqb-btn-ghost-danger { background: #fff !important; background-image: none !important; color: var(--red) !important; border-color: #fecaca !important; }
#tqbb-app .tqb-btn-whatsapp, .tqb-modal .tqb-btn-whatsapp { background: #16a34a !important; background-image: none !important; color: #fff !important; border-color: #16a34a !important; }
#tqbb-app .tqb-btn-whatsapp:hover, .tqb-modal .tqb-btn-whatsapp:hover { background: #15803d !important; color: #fff !important; }

.tqb-panel { background: #fff; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.tqb-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 16px 18px; border-bottom: 1px solid var(--border); }
.tqb-panel-title { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 15px; }
.tqb-panel-title .dashicon { color: var(--blue); width: 17px; height: 17px; }
.tqb-panel-body { padding: 14px 18px 18px; }
.tqb-panel-body.no-pad { padding: 0; }
.tqb-count-pill { background: var(--bg); color: var(--muted); font-size: 12px; font-weight: 700; padding: 2px 10px; border-radius: 999px; }

/* Collapsible accordion panels (left "Prices & Details" column) */
.tqb-panel-head-toggle { display: flex; align-items: center; gap: 8px; cursor: pointer; flex: 1; min-width: 0; user-select: none; }
.tqb-panel-head-toggle .chevron { transition: transform .2s ease; color: var(--muted); flex: 0 0 auto; }
.tqb-panel-head-toggle.open .chevron { transform: rotate(180deg); }
.tqb-collapsible-body { max-height: 0; overflow: hidden; transition: max-height .28s ease; }
.tqb-collapsible-body.open { max-height: 4000px; }
.tqb-collapsible-body .tqb-panel-body { border-top: 1px solid var(--border); }
.tqb-dest-header .chevron { transition: transform .2s ease; color: var(--muted); flex: 0 0 auto; width: 15px; height: 15px; }
.tqb-dest-header.open .chevron { transform: rotate(180deg); }

#tqb-quotation-col .tqb-form-section { transition: padding-bottom .28s ease; }
#tqb-quotation-col .tqb-form-section-title.tqb-q-toggle { transition: margin-bottom .28s ease; }
#tqb-quotation-col .tqb-form-section.is-collapsed { padding-bottom: 0; }
#tqb-quotation-col .tqb-form-section.is-collapsed > .tqb-form-section-title { margin-bottom: 0; border-bottom-color: transparent; }
/* Right-hand Quotation column: every section's title bar opens and closes
   its section with a slide, same idea as the left column's accordions. The
   body slides via a grid-row transition rather than a max-height one, so a
   long section (a 17-day itinerary, say) is never clipped at some fixed
   height. */
.tqb-q-toggle { display: flex; align-items: center; gap: 8px; cursor: pointer; user-select: none; }
.tqb-q-toggle .chevron { transition: transform .2s ease; color: var(--muted); flex: 0 0 auto; order: 2; margin-left: auto; width: 16px; height: 16px; }
.tqb-q-toggle.open .chevron { transform: rotate(180deg); }
.tqb-q-toggle:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; border-radius: 6px; }
.tqb-q-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .28s ease; }
.tqb-q-body.open { grid-template-rows: 1fr; }
.tqb-q-body > .tqb-q-inner { min-height: 0; overflow: hidden; visibility: hidden; transition: visibility 0s linear .28s; }
.tqb-q-body.open > .tqb-q-inner { visibility: visible; transition-delay: 0s; }
.tqb-q-body.open.settled > .tqb-q-inner { overflow: visible; }

.tqb-table-wrap { overflow-x: auto; }
table.tqb-table { width: 100%; border-collapse: collapse; font-size: 13px; }
table.tqb-table th { text-align: left; padding: 10px 14px; color: var(--muted); font-weight: 600; font-size: 11.5px; text-transform: uppercase; letter-spacing: .03em; border-bottom: 1px solid var(--border); white-space: nowrap; }
table.tqb-table td { padding: 12px 14px; border-bottom: 1px solid #f1f3f5; vertical-align: middle; }
table.tqb-table tr:last-child td { border-bottom: none; }
table.tqb-table tr:hover td { background: #fafbfc; }
.tqb-cell-name { font-weight: 600; }
.tqb-cell-id { font-weight: 700; color: var(--blue); }
.tqb-link { cursor: pointer; }
.tqb-link:hover { color: var(--blue); text-decoration: underline !important; }
.tqb-muted { color: var(--muted); font-size: 12.5px; white-space: nowrap; }
.tqb-empty { color: var(--muted); font-size: 13px; padding: 24px; text-align: center; }

.tqb-badge { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 700; white-space: nowrap; }

.tqb-status-select { border: none; background: #f1f5f9; font-weight: 700; font-size: 11.5px; padding: 4px 8px; border-radius: 999px; appearance: none; cursor: pointer; }

/* Toast */
.tqb-toast-wrap { position: fixed; top: 20px; right: 20px; z-index: 200; display: flex; flex-direction: column; gap: 10px; }
.tqb-toast { background: #16233f; color: #fff; padding: 12px 16px; border-radius: 8px; font-size: 13px; box-shadow: 0 10px 30px rgba(0,0,0,.2); display: flex; align-items: center; gap: 10px; min-width: 220px; }
.tqb-toast.success { border-left: 4px solid var(--green); }
.tqb-toast.error { border-left: 4px solid var(--red); }

/* Modal */
.tqb-modal-overlay { position: fixed; inset: 0; background: rgba(15,23,42,.55); display: flex; align-items: center; justify-content: center; z-index: 100; padding: 20px; }
.tqb-modal { background: #fff; border-radius: 16px; width: 100%; max-width: 720px; max-height: 90vh; overflow-y: auto; box-shadow: 0 24px 70px rgba(15,23,42,.3); }
.tqb-modal-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 20px 24px; border-bottom: 1px solid var(--border); position: sticky; top: 0; background: #fff; z-index: 2; }
.tqb-modal-title-wrap { display: flex; align-items: center; gap: 12px; }
.tqb-modal-title-icon { width: 38px; height: 38px; border-radius: 10px; background: #dbeafe; color: var(--blue); display: flex; align-items: center; justify-content: center; flex: 0 0 38px; }
.tqb-modal-title { font-size: 17px; font-weight: 700; line-height: 1.2; }
.tqb-modal-subtitle { font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.tqb-modal-close { background: #fff !important; border: 1px solid var(--border) !important; color: var(--muted) !important; padding: 7px; border-radius: 8px; display: flex; }
.tqb-modal-close:hover { background: var(--bg) !important; }
.tqb-modal-body { padding: 22px 24px 8px; }
.tqb-modal-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 16px 24px; border-top: 1px solid var(--border); position: sticky; bottom: 0; background: #fff; flex-wrap: wrap; }
.tqb-modal-foot-right { display: flex; align-items: center; gap: 10px; margin-left: auto; flex-wrap: wrap; }

.tqb-form-section { margin-bottom: 20px; }
.tqb-form-section-title { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--blue); margin-bottom: 12px; display: flex; align-items: center; gap: 6px; }
.tqb-form-section-title::after { content: ''; flex: 1; height: 1px; background: var(--border); }
.tqb-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.tqb-form-grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; }
.tqb-field { display: flex; flex-direction: column; gap: 6px; }
.tqb-field.full { grid-column: 1 / -1; }
.tqb-field label { font-size: 12.5px; font-weight: 600; }
.tqb-field label .req { color: var(--red); }
.tqb-field input, .tqb-field select, .tqb-field textarea { padding: 10px 12px; border: 1px solid var(--border); border-radius: 9px; font-size: 13.5px; width: 100%; background: #f4f5f7; color: var(--text); }
.tqb-field input:focus, .tqb-field select:focus, .tqb-field textarea:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(37,99,235,.12); background: #fff; }
.tqb-field textarea { resize: vertical; min-height: 70px; }
.tqb-field input:disabled { background: var(--bg) !important; color: var(--muted); }
.tqb-field-hint { font-size: 11.5px; color: var(--muted); margin-top: 2px; }
.tqb-error { color: var(--red); font-size: 12.5px; margin-top: 6px; min-height: 16px; }

/* Itinerary builder inside the quotation form */
.tqb-itin-add-row { display: flex; gap: 8px; align-items: flex-end; flex-wrap: wrap; margin-bottom: 12px; }
.tqb-itin-add-row .tqb-field { flex: 1; min-width: 160px; margin-bottom: 0; }
.tqb-itin-list { display: flex; flex-direction: column; gap: 8px; }
.tqb-itin-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg); }
.tqb-itin-badge { flex: 0 0 auto; background: var(--blue); color: #fff; font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: 999px; }
.tqb-itin-main { flex: 1; min-width: 0; }
.tqb-itin-main strong { display: block; font-size: 13px; }
.tqb-itin-main span { font-size: 11.5px; color: var(--muted); }
.tqb-itin-remove { background: none !important; border: none !important; color: var(--red) !important; padding: 4px; }

/* Suggested / computed total */
.tqb-total-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; background: var(--bg); border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; font-size: 12.8px; margin-top: 10px; }
.tqb-total-row span.label { color: var(--muted); flex: 1; min-width: 160px; }
.tqb-total-row strong { font-size: 17px; }

/* Rates & Pricing */
.tqb-country-card { border: 1px solid var(--border); border-radius: 12px; margin-bottom: 16px; background: #fff; overflow: hidden; }
.tqb-country-head { display: flex; align-items: center; gap: 14px; padding: 16px 18px; background: #fafbfc; border-bottom: 1px solid var(--border); flex-wrap: wrap; cursor: pointer; }
.tqb-country-head h3 { font-size: 16px; margin: 0; }
.tqb-country-head .tqb-country-meta { color: var(--muted); font-size: 12.5px; }
.tqb-country-body { padding: 18px; display: none; }
.tqb-country-body.open { display: block; }
.tqb-rate-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.tqb-rate-section h4 { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--blue); margin: 0 0 10px; }
.tqb-rate-input-name { padding: 7px 10px; border: 1px solid var(--border); border-radius: 7px; font-size: 13px; width: 100%; background: #fff; }
.tqb-rate-input-price { padding: 7px 10px; border: 1px solid var(--border); border-radius: 7px; font-size: 13px; width: 100px; background: #fff; }
.tqb-rate-input-desc { padding: 7px 10px; border: 1px solid var(--border); border-radius: 7px; font-size: 12.5px; width: 100%; background: #fff; }

/* Quotation preview */
.tqb-preview { padding: 4px 2px 8px; }
.tqb-preview-head { display: flex; align-items: center; justify-content: space-between; border-bottom: 3px solid var(--blue); padding-bottom: 16px; margin-bottom: 18px; }
.tqb-preview-head img { max-height: 40px; }
.tqb-preview-meta { text-align: right; font-size: 12px; color: var(--muted); line-height: 1.6; }
.tqb-preview-meta strong { display: block; font-size: 14px; color: var(--text); }
.tqb-preview h2 { font-size: 18px; margin: 0 0 4px; }
.tqb-preview-sub { color: var(--muted); font-size: 13px; margin: 0 0 18px; display: flex; align-items: center; gap: 8px; }
.tqb-preview-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 18px; }
.tqb-card { border: 1px solid var(--border); border-radius: 10px; padding: 14px 16px; }
.tqb-card h3 { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--blue); margin: 0 0 8px; }
.tqb-row { display: flex; justify-content: space-between; font-size: 13px; padding: 4px 0; border-bottom: 1px solid #f1f3f5; }
.tqb-row:last-child { border-bottom: none; }
.tqb-row span:first-child { color: var(--muted); }
.tqb-row span:last-child { font-weight: 600; text-align: right; }
.tqb-total-box { background: #eff6ff; border: 1px solid #bfdbfe; border-radius: 10px; padding: 16px 18px; display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.tqb-total-box span { font-size: 13px; color: #1e40af; }
.tqb-total-box strong { font-size: 20px; color: #1e40af; }
.tqb-section { margin-bottom: 16px; }
.tqb-section h3 { font-size: 12.5px; text-transform: uppercase; letter-spacing: .04em; margin: 0 0 6px; }
.tqb-section p { font-size: 13px; line-height: 1.6; white-space: pre-wrap; margin: 0; }
.tqb-day { display: flex; gap: 12px; padding: 10px 0; border-top: 1px solid #f1f3f5; }
.tqb-day:first-child { border-top: none; }
.tqb-day .badge { flex: 0 0 auto; background: var(--blue); color: #fff; font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: 999px; height: fit-content; white-space: nowrap; }
.tqb-day strong { display: block; font-size: 13px; }
.tqb-day span { font-size: 12px; color: var(--muted); }
.tqb-day .meal-note { display: block; font-size: 11px; color: var(--blue); font-weight: 600; margin-top: 3px; }

/* Progress bar */
.tqb-progress-bar { height: 6px; background: var(--bg); border-radius: 999px; overflow: hidden; margin-top: 10px; }
.tqb-progress-fill { height: 100%; width: 35%; background: var(--blue); border-radius: 999px; animation: tqb-progress-slide 1.1s ease-in-out infinite; }
@keyframes tqb-progress-slide { 0% { margin-left: -35%; } 100% { margin-left: 100%; } }

.tqb-version-chip { display: inline-block; padding: 3px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 700; background: var(--bg); color: var(--muted); cursor: pointer; margin-right: 4px; border: 1px solid var(--border); }
.tqb-version-chip:hover { background: #eef2ff; color: var(--blue); border-color: #c7d2fe; }
.tqb-version-chip.active { background: #dbeafe; color: #1d4ed8; border-color: #bfdbfe; }

/* Responsive */
@media (max-width: 1000px) {
	.tqb-rate-grid { grid-template-columns: 1fr; }
	.tqb-preview-grid { grid-template-columns: 1fr; }
	.tqb-builder-grid { grid-template-columns: 1fr !important; }
	#tqb-preview-col { position: static; }
	.tqb-preview-body { max-height: none; }
}
@media (max-width: 860px) {
	.tqb-hamburger { display: inline-flex; }
	.tqb-sidebar { position: fixed; left: -260px; top: 0; z-index: 40; transition: left .2s ease; box-shadow: 10px 0 30px rgba(0,0,0,.2); }
	.tqb-sidebar.open { left: 0; }
	.tqb-sidebar.collapsed { width: 230px; flex: 0 0 230px; }
	.tqb-sidebar-collapse-btn { display: none; }
	.tqb-content { padding: 16px; }
	.tqb-form-grid { grid-template-columns: 1fr; }
	.tqb-form-grid-3 { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
	.tqb-user-meta { display: none; }
}

/* Day-wise itinerary card — image + day badge overlay, destinations list,
   accommodation pill. Used in the live Quotation preview and Quotations
   history view (mirrors the PDF/shareable-page layout). */
.tqb-itin-card { display: flex; gap: 0; margin-bottom: 16px; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; background: #fff; }
.tqb-itin-card:last-child { margin-bottom: 0; }
.tqb-itin-card-media { position: relative; flex: 0 0 38%; min-height: 150px; background: var(--bg); display: flex; flex-direction: column; gap: 4px; }
.tqb-itin-card-media img { width: 100%; flex: 1 1 0; min-height: 0; object-fit: cover; display: block; }
.tqb-itin-card-placeholder { width: 100%; flex: 1 1 0; min-height: 0; display: flex; align-items: center; justify-content: center; color: var(--muted); background: linear-gradient(135deg, #eef2ff, #f5f7fa); }
.tqb-itin-card-placeholder .dashicon { width: 34px; height: 34px; opacity: .5; }
.tqb-itin-card-badge { position: absolute; top: 10px; left: 10px; background: var(--blue); color: #fff; font-size: 11px; font-weight: 700; padding: 5px 12px; border-radius: 999px; }
.tqb-itin-card-body { flex: 1; min-width: 0; padding: 14px 16px; }
.tqb-itin-card-title { display: flex; align-items: center; gap: 6px; margin-bottom: 10px; }
.tqb-itin-card-title .dashicon { width: 18px; height: 18px; color: #dc2626; flex: 0 0 auto; }
.tqb-itin-card-title strong { font-size: 15px; color: var(--text); }
.tqb-itin-card-note { font-size: 11.5px; font-weight: 600; margin-bottom: 8px; }
.tqb-itin-dest { display: flex; align-items: flex-start; gap: 9px; margin-bottom: 9px; }
.tqb-itin-dest-dot { flex: 0 0 auto; width: 9px; height: 9px; border: 2px solid var(--blue); border-radius: 50%; margin-top: 4px; }
.tqb-itin-dest strong { display: block; font-size: 12.5px; color: var(--text); }
.tqb-itin-dest-desc { display: block; font-size: 11.5px; color: var(--muted); line-height: 1.5; margin-top: 1px; }
.tqb-itin-accom { display: inline-flex; align-items: center; gap: 6px; background: #eff6ff; color: var(--blue); font-size: 11.5px; font-weight: 600; padding: 6px 11px; border-radius: 7px; margin-top: 6px; }
.tqb-itin-accom .dashicon { width: 13px; height: 13px; }

/* Terms and Condition — basic rich-text editor (Bold / Italic / List) */
.tqb-richtext-toolbar { display: flex; gap: 6px; margin-bottom: 8px; }
.tqb-richtext-toolbar button { display: inline-flex; align-items: center; gap: 5px; padding: 6px 11px; border: 1px solid var(--border); border-radius: 7px; background: #fff; color: var(--text); cursor: pointer; font-size: 12.5px; }
.tqb-richtext-toolbar button:hover { background: var(--bg); }
.tqb-richtext-toolbar button .dashicon { width: 13px; height: 13px; }
.tqb-richtext-editor { min-height: 190px; max-height: 420px; overflow-y: auto; padding: 10px 12px; border: 1px solid var(--border); border-radius: 9px; font-size: 13.5px; line-height: 1.6; background: #f4f5f7; color: var(--text); }
.tqb-richtext-editor:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(37,99,235,.12); background: #fff; }
.tqb-richtext-editor ul, .tqb-richtext-editor ol { margin: 6px 0; padding-left: 22px; }
.tqb-richtext-editor li { margin-bottom: 3px; }

/* ---- Quotation Builder: every section is its own card — colored accent bar,
   tinted header band and a step number — so the long form reads as
   clearly separated steps. Hidden sections (e.g. Air Ticket when it's
   unchecked) drop out and the numbers close up automatically. ---- */
#tqb-quotation-col > .tqb-panel > .tqb-panel-body { background: #f8fafc; counter-reset: tqbsec; }
#tqb-quotation-col .tqb-form-section {
	--sec: #475569; --sec-bg: #f1f5f9;
	background: #fff; border: 1px solid var(--border); border-left: 4px solid var(--sec);
	border-radius: 12px; padding: 0 18px 18px; margin-bottom: 18px; overflow: hidden;
	box-shadow: 0 1px 3px rgba(15,23,42,.06);
}
#tqb-quotation-col .tqb-form-section-title {
	margin: 0 -18px 16px; padding: 12px 18px; gap: 10px; background: var(--sec-bg); color: var(--sec);
	border-bottom: 1px solid var(--border); font-size: 12px;
}
#tqb-quotation-col .tqb-form-section-title::after { display: none; }
#tqb-quotation-col .tqb-form-section-title::before {
	counter-increment: tqbsec; content: counter(tqbsec);
	display: inline-flex; align-items: center; justify-content: center; flex: 0 0 22px; width: 22px; height: 22px;
	border-radius: 50%; background: var(--sec); color: #fff; font-size: 11px; font-weight: 700; letter-spacing: 0;
}
#tqb-quotation-col .tqb-form-section[data-sec="service"] .tqb-form-section-title::before { display: none; }
#tqb-quotation-col .tqb-form-section[data-sec="customer"]   { --sec: #1d4ed8; --sec-bg: #eff6ff; }
#tqb-quotation-col .tqb-form-section[data-sec="airticket"]  { --sec: #0369a1; --sec-bg: #f0f9ff; }
#tqb-quotation-col .tqb-form-section[data-sec="visa"]       { --sec: #0f766e; --sec-bg: #f0fdfa; }
#tqb-quotation-col .tqb-form-section[data-sec="tour"]       { --sec: #15803d; --sec-bg: #f0fdf4; }
#tqb-quotation-col .tqb-form-section[data-sec="inclusions"] { --sec: #b45309; --sec-bg: #fffbeb; }
#tqb-quotation-col .tqb-form-section[data-sec="itinerary"]  { --sec: #6d28d9; --sec-bg: #f5f3ff; }
#tqb-quotation-col .tqb-form-section[data-sec="terms"]      { --sec: #4338ca; --sec-bg: #eef2ff; }
#tqb-quotation-col .tqb-form-section[data-sec="notes"]      { --sec: #c2410c; --sec-bg: #fff7ed; }
/* Pricing closes the form with a dark band, so the money stands apart. */
#tqb-quotation-col .tqb-form-section[data-sec="pricing"] { --sec: #1e293b; --sec-bg: #1e293b; }
#tqb-quotation-col .tqb-form-section[data-sec="pricing"] .tqb-form-section-title { color: #fff; border-bottom-color: #1e293b; }
#tqb-quotation-col .tqb-form-section[data-sec="pricing"] .tqb-form-section-title::before { background: #fff; color: #1e293b; }

/* 24-hour time picker: Hour and Minute selects side by side. */
.tqb-time24 { display: flex; align-items: center; gap: 6px; }
.tqb-time24 select { flex: 1 1 0; min-width: 0; width: auto; padding-left: 10px; padding-right: 4px; }
.tqb-time24 > span { font-weight: 700; color: var(--muted); }

/* ---- Left side: the rate card uses the same colours as the matching
   sections on the right, so Air Ticket / Visa / Tour Package (and the
   panels behind Tour Details, Inclusions, Itinerary and Terms) are
   instantly recognisable. ---- */
.tqb-seg[data-sec="airticket"] { --sec: #0369a1; --sec-bg: #f0f9ff; }
.tqb-seg[data-sec="visa"]      { --sec: #0f766e; --sec-bg: #f0fdfa; }
.tqb-seg[data-sec="tour"]      { --sec: #15803d; --sec-bg: #f0fdf4; }
.tqb-panel[data-sec="tour"]       { --sec: #15803d; }
.tqb-panel[data-sec="inclusions"] { --sec: #b45309; }
.tqb-panel[data-sec="itinerary"]  { --sec: #6d28d9; }
.tqb-panel[data-sec="terms"]      { --sec: #4338ca; }
.tqb-panel[data-sec] { border-left: 4px solid var(--sec); }
.tqb-seg {
	--sec: #475569; --sec-bg: #f1f5f9;
	background: #fff; border: 1px solid var(--border); border-left: 4px solid var(--sec);
	border-radius: 12px; padding: 0 16px 14px; margin: 16px 0; overflow: hidden;
}
.tqb-seg-title {
	margin: 0 -16px 12px; padding: 10px 16px; background: var(--sec-bg); color: var(--sec);
	border-bottom: 1px solid var(--border); font-size: 12px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
}
/* Read-only value (visa fares on the right, which are set on the left). */
.tqb-static { padding: 10px 12px; border: 1px solid var(--border); border-radius: 9px; background: #f8fafc; font-size: 13.5px; font-weight: 600; color: var(--text); }

/* Standalone app (not inside a WordPress theme): no full-bleed trick needed. */
.tqbb-app.tqbb-standalone { left: 0; right: 0; margin-left: 0; margin-right: 0; width: 100%; }
body.tqbb-body { margin: 0; background: #f5f7fa; }