/* Travelino Booking Codes — all styles scoped under #tbc-root */
#tbc-root { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; color: #333; max-width: 1000px; margin: 0 auto; }
#tbc-root *, #tbc-root *::before, #tbc-root *::after { box-sizing: border-box; }

#tbc-root .tbc-logo { text-align: center; margin-bottom: 20px; }
#tbc-root .tbc-logo h1 { color: #003580; font-size: 28px; margin: 0 0 5px; }
#tbc-root .tbc-logo p { color: #555; font-size: 14px; margin: 0; }

#tbc-root .tbc-auth-wrapper { max-width: 420px; margin: 40px auto; }
#tbc-root .tbc-card { background: white; border: 1px solid #e3e7eb; border-radius: 12px; padding: 30px; margin-bottom: 20px; box-shadow: 0 2px 10px rgba(0,0,0,0.05); }
#tbc-root .tbc-card h2 { color: #003580; margin: 0 0 20px; font-size: 20px; border-bottom: 2px solid #febb02; padding-bottom: 10px; }

#tbc-root .tbc-auth-tabs { display: flex; margin-bottom: 20px; }
#tbc-root .tbc-auth-tab { flex: 1; padding: 12px; border: none; background: #e9ecef; cursor: pointer; font-size: 14px; font-weight: 600; color: #555; }
#tbc-root .tbc-auth-tab.tbc-active { background: #0071c2; color: white; }
#tbc-root .tbc-auth-tab:first-child { border-radius: 8px 0 0 8px; }
#tbc-root .tbc-auth-tab:last-child { border-radius: 0 8px 8px 0; }
#tbc-root .tbc-auth-form { display: none; }
#tbc-root .tbc-auth-form.tbc-active { display: block; }

#tbc-root .tbc-form-group { margin-bottom: 15px; }
#tbc-root .tbc-form-group label { display: block; margin-bottom: 5px; color: #555; font-weight: 500; font-size: 14px; }
#tbc-root .tbc-form-group input,
#tbc-root .tbc-form-group textarea { width: 100%; padding: 10px 14px; border: 1px solid #ddd; border-radius: 8px; font-size: 14px; font-family: inherit; background: white; color: #333; }
#tbc-root .tbc-form-group input:focus,
#tbc-root .tbc-form-group textarea:focus { outline: none; border-color: #0071c2; }
#tbc-root .tbc-form-group textarea { resize: vertical; min-height: 60px; }

#tbc-root .tbc-btn { background: #0071c2; color: white; border: none; padding: 10px 24px; border-radius: 8px; cursor: pointer; font-size: 14px; font-weight: 600; transition: background .2s, transform .1s; font-family: inherit; }
#tbc-root .tbc-btn:hover { background: #005a9e; }
#tbc-root .tbc-btn:active { transform: scale(.98); }
#tbc-root .tbc-btn:disabled { opacity: .6; cursor: wait; }
#tbc-root .tbc-btn-yellow { background: #febb02; color: #003580; }
#tbc-root .tbc-btn-yellow:hover { background: #e5a702; }
#tbc-root .tbc-btn-danger { background: #dc3545; }
#tbc-root .tbc-btn-danger:hover { background: #b02a37; }
#tbc-root .tbc-btn-ghost { background: transparent; color: #666; border: 1px solid #ccc; }
#tbc-root .tbc-btn-ghost:hover { background: #f1f3f5; color: #333; }
#tbc-root .tbc-btn-small { padding: 6px 14px; font-size: 13px; }

#tbc-root .tbc-header { background: white; border: 1px solid #e3e7eb; border-radius: 12px; padding: 20px 30px; margin-bottom: 20px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; }
#tbc-root .tbc-header h1 { color: #003580; font-size: 24px; margin: 0; }
#tbc-root .tbc-user-info { display: flex; align-items: center; gap: 15px; }
#tbc-root .tbc-user-info strong { color: #003580; }

#tbc-root .tbc-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 20px; }
#tbc-root .tbc-stat { background: linear-gradient(135deg, #0071c2, #003580); color: white; padding: 15px; border-radius: 10px; text-align: center; }
#tbc-root .tbc-stat .tbc-num { font-size: 26px; font-weight: bold; color: #febb02; }
#tbc-root .tbc-stat .tbc-lbl { font-size: 12px; opacity: .9; margin-top: 3px; }

#tbc-root .tbc-tabs { display: flex; gap: 10px; margin-bottom: 20px; border-bottom: 2px solid #e3e7eb; }
#tbc-root .tbc-tab { padding: 10px 20px; cursor: pointer; border: none; background: transparent; font-size: 14px; font-weight: 600; color: #888; border-bottom: 3px solid transparent; font-family: inherit; }
#tbc-root .tbc-tab.tbc-active { color: #003580; border-bottom-color: #febb02; }
#tbc-root .tbc-tab-content { display: none; }
#tbc-root .tbc-tab-content.tbc-active { display: block; }

#tbc-root .tbc-code-item { background: #f8f9fa; border: 1px solid #e3e7eb; border-radius: 8px; padding: 16px; margin-bottom: 12px; display: flex; justify-content: space-between; align-items: center; gap: 15px; flex-wrap: wrap; }
#tbc-root .tbc-code-item.tbc-taken { opacity: .6; background: #e9ecef; }
#tbc-root .tbc-code-info { flex: 1; min-width: 200px; }
#tbc-root .tbc-code-value { font-family: "Courier New", monospace; background: #003580; color: #febb02; padding: 4px 10px; border-radius: 4px; font-weight: bold; display: inline-block; margin-bottom: 6px; font-size: 15px; letter-spacing: .5px; }
#tbc-root .tbc-code-desc { color: #333; margin-bottom: 4px; font-size: 14px; }
#tbc-root .tbc-code-meta { font-size: 12px; color: #777; }
#tbc-root .tbc-code-meta span { margin-right: 12px; }

#tbc-root .tbc-badge { display: inline-block; padding: 3px 10px; border-radius: 12px; font-size: 12px; font-weight: 600; }
#tbc-root .tbc-badge-available { background: #d4edda; color: #155724; }
#tbc-root .tbc-badge-taken { background: #f8d7da; color: #721c24; }
#tbc-root .tbc-badge-mine { background: #fff3cd; color: #856404; }
#tbc-root .tbc-verified-badge { display: inline-block; background: #d1e7dd; color: #0f5132; padding: 3px 10px; border-radius: 12px; font-size: 11px; font-weight: 600; margin-left: 6px; }

#tbc-root .tbc-empty { text-align: center; padding: 40px 20px; color: #888; font-style: italic; }
#tbc-root .tbc-locked { background: linear-gradient(135deg, #fff3cd, #ffe69c); border: 2px dashed #febb02; padding: 30px; border-radius: 10px; text-align: center; color: #856404; }
#tbc-root .tbc-locked .tbc-icon { font-size: 36px; margin-bottom: 10px; }
#tbc-root .tbc-locked h3 { margin: 0 0 8px; color: #003580; }

#tbc-root .tbc-alert { padding: 12px 16px; margin: 10px 0; border-radius: 6px; border-left: 4px solid; font-size: 14px; }
#tbc-root .tbc-alert-info { background: #d1ecf1; border-color: #0071c2; color: #0c5460; }
#tbc-root .tbc-alert-error { background: #f8d7da; border-color: #dc3545; color: #721c24; }
#tbc-root .tbc-alert-ok { background: #d1e7dd; border-color: #0f5132; color: #0f5132; }

#tbc-root .tbc-code-inline { font-family: "Courier New", monospace; background: #003580; color: #febb02; padding: 2px 8px; border-radius: 4px; font-weight: bold; }

#tbc-root .tbc-modal-overlay { display: none; position: fixed; inset: 0; background: rgba(0, 21, 61, .7); z-index: 99999; justify-content: center; align-items: center; padding: 20px; overflow-y: auto; }
#tbc-root .tbc-modal-overlay.tbc-active { display: flex; }
#tbc-root .tbc-modal { background: white; border-radius: 12px; max-width: 640px; width: 100%; padding: 30px; max-height: 90vh; overflow-y: auto; box-shadow: 0 10px 40px rgba(0,0,0,.3); }
#tbc-root .tbc-modal h2 { color: #003580; margin: 0 0 8px; font-size: 22px; }
#tbc-root .tbc-modal-actions { display: flex; gap: 10px; margin-top: 20px; justify-content: flex-end; }

#tbc-root .tbc-spinner { width: 56px; height: 56px; border: 5px solid #e3e7eb; border-top-color: #0071c2; border-radius: 50%; margin: 0 auto 18px; animation: tbc-spin .9s linear infinite; }
@keyframes tbc-spin { to { transform: rotate(360deg); } }
#tbc-root .tbc-progress { width: 100%; height: 6px; background: #e3e7eb; border-radius: 999px; overflow: hidden; margin-top: 14px; }
#tbc-root .tbc-progress > div { height: 100%; width: 0%; background: linear-gradient(90deg, #0071c2, #febb02); transition: width .3s ease; }
#tbc-root .tbc-progress-stage { font-size: 13px; color: #555; margin-top: 10px; min-height: 18px; text-align: center; }
#tbc-root .tbc-result-icon { font-size: 58px; text-align: center; margin-bottom: 10px; }
#tbc-root .tbc-result-ok { color: #0f5132; }
#tbc-root .tbc-result-fail { color: #842029; }
#tbc-root .tbc-price-summary { background: #f0f7fc; border: 1px solid #b6d4fe; padding: 12px 16px; border-radius: 8px; margin: 14px 0; font-size: 14px; color: #003580; }
#tbc-root .tbc-price-summary .tbc-big { font-size: 18px; font-weight: 700; color: #0f5132; }

@media (max-width: 600px) {
  #tbc-root .tbc-header { flex-direction: column; text-align: center; }
  #tbc-root .tbc-code-item { flex-direction: column; align-items: stretch; }
}