/* Trip Pro – Frontend / Customer Portal Styles */
:root {
    --tpro-primary: #1a237e;
    --tpro-accent:  #ff6f00;
    --tpro-green:   #2e7d32;
    --tpro-red:     #c62828;
    --tpro-bg:      #f0f2f5;
    --tpro-card:    #ffffff;
    --tpro-border:  #e0e0e0;
    --tpro-text:    #1a1a2e;
    --tpro-muted:   #757575;
    --tpro-radius:  12px;
    --tpro-shadow:  0 4px 20px rgba(0,0,0,.1);
}

/* ── Portal wrapper ──────────────────────────────────────────────────────── */
.tpro-portal { font-family:'Segoe UI',sans-serif; color:var(--tpro-text); max-width:1100px; margin:0 auto; }

/* Nav */
.tpro-portal-nav { background:var(--tpro-primary); color:#fff; padding:14px 20px; border-radius:var(--tpro-radius) var(--tpro-radius) 0 0; display:flex; align-items:center; justify-content:space-between; }
.tpro-portal-brand { font-size:18px; font-weight:800; letter-spacing:.5px; }
.tpro-portal-user  { display:flex; align-items:center; gap:12px; font-size:13px; }

/* Tab Bar */
.tpro-portal-tabs { background:#fff; border-bottom:2px solid var(--tpro-border); display:flex; gap:0; overflow-x:auto; }
.tpro-tab { background:none; border:none; padding:14px 22px; font-size:14px; font-weight:600; color:var(--tpro-muted); cursor:pointer; border-bottom:3px solid transparent; white-space:nowrap; transition:.2s; }
.tpro-tab.active { color:var(--tpro-primary); border-bottom-color:var(--tpro-primary); }
.tpro-tab:hover  { color:var(--tpro-primary); }

/* Tab content */
.tpro-tab-content { display:none; padding:20px; background:var(--tpro-bg); border-radius:0 0 var(--tpro-radius) var(--tpro-radius); }
.tpro-tab-content.active { display:block; }

.tpro-portal-section-title { font-size:16px; font-weight:800; color:var(--tpro-primary); margin:0 0 14px; }

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.tpro-portal-btn { background:var(--tpro-primary); color:#fff; border:none; border-radius:8px; padding:9px 18px; font-size:13px; font-weight:700; cursor:pointer; transition:.2s; }
.tpro-portal-btn:hover { background:#283593; }
.tpro-logout-btn { background:rgba(255,255,255,.15); padding:6px 14px; font-size:12px; border-radius:6px; }
.tpro-logout-btn:hover { background:rgba(255,255,255,.3); }

/* ── Trip Cards ──────────────────────────────────────────────────────────── */
.tpro-public-trips { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:16px; }
.tpro-trip-card, .tpro-public-trip-card { background:var(--tpro-card); border-radius:var(--tpro-radius); box-shadow:var(--tpro-shadow); overflow:hidden; margin-bottom:16px; }
.tpro-public-trip-card { margin-bottom:0; }
.tpro-trip-banner { width:100%; height:160px; object-fit:cover; display:block; }
.tpro-trip-card-body { padding:16px; }
.tpro-trip-card-header { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; margin-bottom:10px; }
.tpro-trip-title { font-size:16px; font-weight:800; color:var(--tpro-primary); margin:0 0 3px; }
.tpro-trip-destination { font-size:13px; color:var(--tpro-muted); margin:0; }
.tpro-trip-meta-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:12px; }
.tpro-trip-meta-item { display:flex; flex-direction:column; background:#f5f7fa; border-radius:6px; padding:8px 10px; }
.tpro-trip-meta-item .lbl { font-size:11px; color:var(--tpro-muted); font-weight:600; text-transform:uppercase; margin-bottom:2px; }
.tpro-trip-meta-item span:last-child { font-size:13px; font-weight:700; }

/* ── Auth ─────────────────────────────────────────────────────────────────── */
.tpro-auth-wrap { display:flex; justify-content:center; align-items:center; min-height:400px; padding:20px; font-family:'Segoe UI',sans-serif; }
.tpro-auth-card { background:#fff; border-radius:16px; box-shadow:var(--tpro-shadow); padding:32px; width:100%; max-width:420px; }
.tpro-auth-logo { text-align:center; font-size:24px; font-weight:900; color:var(--tpro-primary); margin-bottom:20px; letter-spacing:.5px; }
.tpro-auth-tabs { display:flex; border-bottom:2px solid var(--tpro-border); margin-bottom:20px; }
.tpro-auth-tab { flex:1; padding:10px; background:none; border:none; font-size:14px; font-weight:700; color:var(--tpro-muted); cursor:pointer; border-bottom:3px solid transparent; transition:.2s; }
.tpro-auth-tab.active { color:var(--tpro-primary); border-bottom-color:var(--tpro-primary); }
.tpro-auth-form { display:none; flex-direction:column; gap:12px; }
.tpro-auth-form.active { display:flex; }
.tpro-auth-form h3 { margin:0 0 4px; color:var(--tpro-primary); font-size:18px; }
.tpro-input { border:1.5px solid var(--tpro-border); border-radius:8px; padding:10px 14px; font-size:14px; width:100%; box-sizing:border-box; transition:.2s; }
.tpro-input:focus { border-color:var(--tpro-primary); outline:none; }
.tpro-auth-submit { background:var(--tpro-primary); color:#fff; border:none; border-radius:8px; padding:12px; font-size:15px; font-weight:700; cursor:pointer; transition:.2s; }
.tpro-auth-submit:hover { background:#283593; }

/* ── Messages ────────────────────────────────────────────────────────────── */
.tpro-msg { padding:8px 12px; border-radius:6px; font-size:13px; display:none; margin-bottom:4px; }
.tpro-msg.success { background:#e8f5e9; color:#2e7d32; display:block; }
.tpro-msg.error   { background:#ffebee; color:#c62828; display:block; }

/* ── Receipts ────────────────────────────────────────────────────────────── */
.tpro-receipts-list { display:grid; gap:12px; }
.tpro-receipt-card { background:#fff; border-radius:var(--tpro-radius); box-shadow:var(--tpro-shadow); overflow:hidden; }
.tpro-receipt-card-top { display:flex; justify-content:space-between; align-items:flex-start; padding:16px; border-bottom:1px dashed var(--tpro-border); }
.tpro-receipt-card-bottom { display:flex; gap:16px; flex-wrap:wrap; padding:10px 16px; font-size:12px; color:var(--tpro-muted); }
.tpro-receipt-no-badge { background:#e3f2fd; color:#1565c0; padding:3px 10px; border-radius:20px; font-size:11px; font-weight:800; font-family:monospace; }
.tpro-receipt-amount { font-size:20px; font-weight:900; color:var(--tpro-green); }

/* ── Profile ─────────────────────────────────────────────────────────────── */
.tpro-profile-card { background:#fff; border-radius:var(--tpro-radius); box-shadow:var(--tpro-shadow); padding:24px; max-width:500px; }
.tpro-profile-info { display:flex; align-items:center; gap:16px; margin-bottom:12px; }
.tpro-profile-avatar { width:60px; height:60px; border-radius:50%; background:var(--tpro-primary); color:#fff; display:flex; align-items:center; justify-content:center; font-size:24px; font-weight:800; flex-shrink:0; }
.tpro-profile-info h4 { margin:0 0 4px; font-size:16px; }
.tpro-profile-info p  { margin:0; font-size:13px; color:var(--tpro-muted); }

/* ── Itinerary Overlay ───────────────────────────────────────────────────── */
.tpro-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,.55); z-index:99999; align-items:center; justify-content:center; }
.tpro-overlay.open { display:flex; }
.tpro-overlay-box { background:#fff; border-radius:16px; width:90%; max-width:640px; box-shadow:0 8px 40px rgba(0,0,0,.2); }
.tpro-overlay-header { background:var(--tpro-primary); color:#fff; padding:14px 20px; border-radius:16px 16px 0 0; display:flex; justify-content:space-between; align-items:center; font-weight:800; font-size:15px; }
.tpro-overlay-close { background:none; border:none; color:#fff; font-size:22px; cursor:pointer; line-height:1; }

/* Itinerary in overlay */
.tpro-fe-day-header { background:var(--tpro-primary); color:#fff; padding:8px 14px; border-radius:6px; font-weight:700; font-size:13px; margin-bottom:8px; margin-top:12px; }
.tpro-fe-itin-item { border-left:4px solid var(--tpro-accent); padding:10px 14px; background:#f9f9fb; border-radius:0 6px 6px 0; margin-bottom:8px; }
.tpro-fe-itin-title { font-weight:700; font-size:14px; color:var(--tpro-primary); }
.tpro-fe-itin-meta  { font-size:12px; color:var(--tpro-muted); display:flex; gap:14px; flex-wrap:wrap; margin-top:5px; }

/* ── Empty state ─────────────────────────────────────────────────────────── */
.tpro-empty-state { text-align:center; color:var(--tpro-muted); padding:32px; background:#fff; border-radius:var(--tpro-radius); box-shadow:var(--tpro-shadow); font-size:14px; }

/* ── CF Frontend table ───────────────────────────────────────────────────── */
.tpro-fe-table { width:100%; border-collapse:collapse; font-size:13px; background:#fff; border-radius:8px; overflow:hidden; box-shadow:var(--tpro-shadow); }
.tpro-fe-table th { background:var(--tpro-primary); color:#fff; padding:10px 14px; text-align:left; }
.tpro-fe-table td { padding:10px 14px; border-bottom:1px solid var(--tpro-border); }
.tpro-fe-table tr:hover td { background:#f5f5f5; }

.tpro-fe-cf-box { border-radius:10px; padding:14px 20px; min-width:140px; text-align:center; flex:1; box-shadow:var(--tpro-shadow); }

@media(max-width:600px){
    .tpro-portal-tabs { gap:0; }
    .tpro-tab { padding:10px 14px; font-size:12px; }
    .tpro-trip-meta-grid { grid-template-columns:1fr; }
    .tpro-public-trips { grid-template-columns:1fr; }
    .tpro-receipt-card-top { flex-direction:column; gap:10px; }
}