/* OnlTrip Dashboard - Ultra Minimalist v3.2 (Layout-Fixed)
   Clean, Modern, Mobile-first
   Single accent driven by --brand (fallback #213f52)
*/

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

/* ================== DESIGN TOKENS ================== */
:root {
  /* Primary (default, will be overridden) */
  --accent: #219EBC;
  --accent-hover: #1a7a94;
  --accent-light: rgba(33, 158, 188, 0.08);

  /* Status */
  --success: #10b981;
  --warning: #f59e0b;
  --danger:  #ef4444;

  /* Neutrals (default, will be overridden) */
  --black:   #0f172a;
  --gray-900:#1e293b;
  --gray-700:#334155;
  --gray-500:#64748b;
  --gray-400:#94a3b8;
  --gray-300:#cbd5e1;
  --gray-200:#e2e8f0;
  --gray-100:#f1f5f9;
  --gray-50: #f8fafc;
  --white:   #ffffff;

  /* Layout */
  --radius-sm: 8px;
  --radius:    12px;
  --radius-lg: 16px;

  /* Shadows */
  --shadow:   0 1px 3px rgba(0,0,0,0.04);
  --shadow-lg:0 4px 10px rgba(0,0,0,0.06);

  /* Safe areas */
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

/* Bridge tokens to your booking design system if present */
body {
  --accent:       var(--brand, #213f52);
  --accent-hover: color-mix(in srgb, var(--accent) 85%, black);
  --accent-light: color-mix(in srgb, var(--accent) 10%, transparent);

  --black:        var(--text, #0f1f2a);
  --gray-50:      var(--bg, #faf9f6);
  --gray-200:     var(--border, #e5eaee);
}

/* ================== RESET ================== */
* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html { -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; }

/* ================== BASE ================== */
body.onltrip-dashboard-minimal {
  font-family:'Inter', system-ui, -apple-system, sans-serif;
  font-size:14px; line-height:1.5; color:var(--black); background:var(--gray-50);
}

/* Hide WP defaults in dashboard */
.onltrip-dashboard-minimal .entry-header,
.onltrip-dashboard-minimal .page-header,
.onltrip-dashboard-minimal .post-edit-link { display:none !important; }

/* ================== WRAPPER ================== */
.otd-wrapper { display:flex; min-height:100vh; }

/* ================== SIDEBAR ================== */
.otd-sidebar {
  width:60px; background:var(--white); border-right:1px solid var(--gray-200);
  position:fixed; height:100vh; left:0; top:0; z-index:100;
  display:flex; flex-direction:column; transition:width .2s ease;
}
.otd-sidebar:hover { width:200px; box-shadow:var(--shadow-lg); }

.otd-logo { height:60px; display:grid; place-items:center; border-bottom:1px solid var(--gray-200); }
.otd-logo a { display:block; padding:.5rem; }
.otd-logo svg { width:24px; height:24px; color:var(--accent); }

.otd-nav { flex:1; padding:.5rem 0; overflow:auto; }
.otd-nav-item {
  display:flex; align-items:center; width:100%; padding:.75rem; background:none; border:none;
  color:var(--gray-500); cursor:pointer; position:relative; transition:all .15s ease; overflow:hidden;
}
.otd-nav-item:hover { color:var(--accent); background:var(--accent-light); }
.otd-nav-item.active { color:var(--accent); background:var(--accent-light); }
.otd-nav-item.active::before { content:''; position:absolute; left:0; top:0; bottom:0; width:2px; background:var(--accent); }
.otd-nav-item svg { min-width:20px; width:20px; height:20px; margin:0 auto; }
.otd-nav-label { display:none; margin-left:1rem; font-size:13px; font-weight:600; white-space:nowrap; }
.otd-sidebar:hover .otd-nav-label { display:block; }
.otd-sidebar:hover .otd-nav-item svg { margin:0; }

.otd-help-btn {
  margin:.5rem; padding:.625rem; background:var(--gray-50); border:1px solid var(--gray-200);
  border-radius:var(--radius-sm); color:var(--gray-500); cursor:pointer; display:grid; place-items:center; transition:all .15s ease;
}
.otd-help-btn:hover { color:var(--accent); border-color:var(--accent); background:var(--accent-light); }

/* Hide sidebar on mobile */
@media (max-width:768px){ .otd-sidebar{ display:none; } }

/* ================== MAIN & TOPBAR (OVERLAP FIX) ================== */
.otd-main {
  flex:1;
  padding-left:60px; /* Space for the sidebar */
  min-height:100vh;
  display:flex;
  flex-direction:column;
}

@media (max-width:768px){
  .otd-main {
    padding-left:0;
    padding-bottom:calc(60px + var(--safe-bottom));
  }
}

.otd-topbar {
  background:var(--white);
  border-bottom:1px solid var(--gray-200);
  padding:.75rem 1.5rem;
  display:flex;
  align-items:center;
  justify-content:space-between;
  position:sticky;
  top:0;
  z-index:50;
}

@media (max-width:768px){ .otd-topbar{ padding:.75rem 1rem; } }

.otd-greeting h1 { font-size:1.25rem; font-weight:800; letter-spacing:-.02em; margin-bottom:.125rem; }
.otd-greeting p { font-size:.813rem; color:var(--gray-500); }

.otd-topbar-actions { display:flex; align-items:center; gap:.5rem; }

/* ================== NOTIFICATIONS ================== */
.otd-notifications { position:relative; }
.otd-notif-btn {
  width:36px; height:36px; border-radius:var(--radius-sm); background:none; border:1px solid var(--gray-200);
  color:var(--gray-500); cursor:pointer; display:grid; place-items:center; transition:all .15s ease;
}
.otd-notif-btn:hover { background:var(--gray-50); color:var(--accent); }
.otd-notif-btn svg { width:18px; height:18px; }
.otd-notif-badge { position:absolute; top:6px; right:6px; width:7px; height:7px; background:var(--danger); border-radius:50%; }

.otd-notif-dropdown {
  position:absolute; top:calc(100% + .5rem); right:0; width:300px; background:var(--white);
  border:1px solid var(--gray-200); border-radius:var(--radius); box-shadow:var(--shadow-lg);
  display:none; overflow:hidden;
}
.otd-notif-dropdown.active { display:block; animation:dropIn .2s ease; }
@keyframes dropIn{ from{opacity:0; transform:translateY(-8px);} to{opacity:1; transform:translateY(0);} }

.otd-notif-header {
  padding:.75rem 1rem; border-bottom:1px solid var(--gray-100); display:flex; align-items:center; justify-content:space-between;
}
.otd-notif-header h3 { font-size:.875rem; font-weight:700; }
.otd-notif-clear { font-size:.75rem; color:var(--gray-400); background:none; border:none; cursor:pointer; }
.otd-notif-clear:hover { color:var(--accent); }

.otd-notif-list { max-height:320px; overflow:auto; }
.otd-notif-item { display:flex; gap:.75rem; padding:.75rem 1rem; transition:background .15s; border-bottom:1px solid var(--gray-50); }
.otd-notif-item:hover { background:var(--gray-50); }
.otd-notif-item.unread { background:var(--accent-light); }

.otd-notif-icon { width:28px; height:28px; border-radius:50%; display:grid; place-items:center; flex-shrink:0; }
.otd-notif-icon.booking { background:rgba(16,185,129,.1); color:var(--success); }
.otd-notif-icon.reward  { background:rgba(245,158,11,.1); color:var(--warning); }
.otd-notif-icon svg { width:14px; height:14px; }

.otd-notif-content p { font-size:.813rem; line-height:1.4; margin-bottom:.125rem; font-weight:600; color:var(--black); }
.otd-notif-content time { font-size:.75rem; color:var(--gray-400); }
.otd-notif-empty { padding:2rem; text-align:center; color:var(--gray-400); font-size:.813rem; }

/* ================== LOGOUT ================== */
.otd-logout-btn {
  width:36px; height:36px; border-radius:var(--radius-sm); display:grid; place-items:center;
  color:var(--gray-500); text-decoration:none; border:1px solid var(--gray-200); transition:all .15s ease;
}
.otd-logout-btn:hover { background:rgba(239,68,68,.08); color:var(--danger); }
.otd-logout-btn svg { width:18px; height:18px; }

/* ================== CONTENT ================== */
.otd-content { flex:1; padding:1.5rem; }
@media (max-width:768px){ .otd-content{ padding:1rem; } }

.otd-section { display:none; }
.otd-section.active { display:block; animation:fadeIn .2s ease; }
@keyframes fadeIn{ from{opacity:0;} to{opacity:1;} }

.otd-section-title { font-size:1.25rem; font-weight:800; letter-spacing:-.02em; margin-bottom:1.25rem; color:var(--black); }

/* ================== STATS ================== */
.otd-stats {
  display:grid; grid-template-columns:repeat(auto-fit, minmax(180px, 1fr));
  gap:.75rem; margin-bottom:1.5rem;
}
@media (max-width:640px){ .otd-stats{ grid-template-columns:1fr; } }

.otd-stat-card {
  background:var(--white); border:1px solid var(--gray-200); border-radius:var(--radius);
  padding:1.25rem; display:flex; align-items:center; gap:1rem;
}
.otd-stat-icon { width:40px; height:40px; background:var(--accent-light); border-radius:var(--radius-sm); display:grid; place-items:center; flex-shrink:0; }
.otd-stat-icon svg { width:20px; height:20px; color:var(--accent); }
.otd-stat-value { font-size:1.5rem; font-weight:800; line-height:1; letter-spacing:-.02em; }
.otd-stat-label { font-size:.813rem; color:var(--gray-500); margin-top:.125rem; }

/* ================== REWARD WIDGET ================== */
.otd-reward-widget {
  background:var(--accent); border-radius:var(--radius-lg); padding:1.5rem; margin-bottom:1.5rem; color:var(--white); position:relative; overflow:hidden;
}
.otd-reward-bg { position:absolute; top:-50px; right:-50px; width:200px; height:200px; background:rgba(255,255,255,.1); border-radius:50%; }
.otd-reward-content { position:relative; display:flex; align-items:center; gap:1rem; }
@media (max-width:640px){ .otd-reward-content{ flex-direction:column; text-align:center; } }
.otd-reward-icon { width:48px; height:48px; background:rgba(255,255,255,.2); border-radius:var(--radius); display:grid; place-items:center; flex-shrink:0; }
.otd-reward-icon svg { width:24px; height:24px; }
.otd-reward-info { flex:1; }
.otd-reward-info h3 { font-size:1.125rem; font-weight:600; margin-bottom:.25rem; }
.otd-reward-info p { font-size:.875rem; opacity:0.9; }
.otd-reward-btn { padding:.625rem 1.25rem; background:var(--white); color:var(--accent); border:none; border-radius:var(--radius-sm); font-size:.875rem; font-weight:600; cursor:pointer; transition:transform .15s; }
.otd-reward-btn:hover { transform:scale(1.05); }

/* ================== QUICK ACTIONS ================== */
.otd-quick-actions {
  display:grid; grid-template-columns:repeat(auto-fit, minmax(120px, 1fr)); gap:.75rem; margin-bottom:1.5rem;
}
.otd-action-card {
  background:var(--white); border:1px solid var(--gray-200); border-radius:var(--radius);
  padding:1rem; display:flex; flex-direction:column; align-items:center; gap:.5rem; text-decoration:none; color:var(--black); cursor:pointer; transition:all .15s ease;
}
.otd-action-card:hover { border-color:var(--accent); box-shadow:var(--shadow); }
.otd-action-card svg { width:24px; height:24px; color:var(--accent); }
.otd-action-card span { font-size:.813rem; font-weight:600; text-align:center; }

/* ================== TRIP CARDS / GRID ================== */
.otd-upcoming-trip{ margin-bottom:1.5rem; }
.otd-upcoming-trip h2 { font-size:1.125rem; font-weight:800; margin-bottom:1rem; }

.otd-trip-card{
  background:var(--white); border:1px solid var(--gray-200); border-radius:var(--radius); overflow:hidden; display:flex; transition:box-shadow .15s;
}
.otd-trip-card:hover{ box-shadow:var(--shadow); }
@media (max-width:640px){ .otd-trip-card{ flex-direction:column; } }
.otd-trip-image{ width:160px; height:120px; position:relative; flex-shrink:0; background:var(--gray-100); }
@media (max-width:640px){ .otd-trip-image{ width:100%; height:140px; } }
.otd-trip-image img{ width:100%; height:100%; object-fit:cover; }
.otd-trip-badge{
  position:absolute; top:.75rem; left:.75rem; padding:.25rem .625rem; background:var(--success); color:var(--white);
  border-radius:999px; font-size:.688rem; font-weight:700;
}
.otd-trip-details{ padding:1.25rem; flex:1; display:flex; flex-direction:column; justify-content:center; gap:.5rem; }
.otd-trip-details h3{ font-size:1.125rem; font-weight:700; }

.otd-trip-meta{ display:flex; align-items:center; gap:.375rem; font-size:.813rem; color:var(--gray-500); }
.otd-trip-meta svg{ width:14px; height:14px; }

.otd-trip-btn{
  align-self:flex-start; padding:.5rem 1rem; background:var(--accent); color:#fff; border:none; border-radius:var(--radius-sm);
  font-size:.813rem; font-weight:700; cursor:pointer; transition:background .15s;
}
.otd-trip-btn:hover{ background:var(--accent-hover); }

.otd-trips-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(280px, 1fr)); gap:1rem; }
@media (max-width:640px){ .otd-trips-grid{ grid-template-columns:1fr; } }

.otd-trip-item{ background:var(--white); border:1px solid var(--gray-200); border-radius:var(--radius); overflow:hidden; transition:all .15s ease; }
.otd-trip-item:hover{ box-shadow:var(--shadow); }
.otd-trip-thumb{ height:120px; overflow:hidden; background:var(--gray-100); }
.otd-trip-thumb img{ width:100%; height:100%; object-fit:cover; }
.otd-trip-info{ padding:1rem; }
.otd-trip-info h3{ font-size:.938rem; font-weight:700; margin-bottom:.375rem; }
.otd-trip-date{ display:flex; align-items:center; gap:.375rem; font-size:.813rem; color:var(--gray-500); margin-bottom:.625rem; }
.otd-trip-date svg{ width:12px; height:12px; }

.otd-trip-status{
  display:inline-block; padding:.25rem .625rem; border-radius:999px; font-size:.688rem; font-weight:700; text-transform:uppercase; letter-spacing:.025em; margin-bottom:.625rem;
}
.otd-trip-status.confirmed{ background:rgba(16,185,129,.08); color:var(--success); }
.otd-trip-status.pending{   background:rgba(245,158,11,.08); color:var(--warning); }
.otd-trip-status.cancelled{ background:rgba(239,68,68,.08);  color:var(--danger); }

.otd-trip-progress{ margin-bottom:.625rem; }
.otd-progress-bar{ height:3px; background:var(--gray-100); border-radius:999px; overflow:hidden; margin-bottom:.375rem; }
.otd-progress-fill{ height:100%; background:var(--accent); transition:width .3s ease; }
.otd-progress-steps{ display:flex; justify-content:space-between; font-size:.688rem; color:var(--gray-400); }
.otd-progress-steps span.active{ color:var(--accent); font-weight:700; }

.otd-trip-view{
  width:auto; flex:1; padding:.625rem; background:var(--gray-50); border:1px solid var(--gray-200); border-radius:var(--radius-sm);
  font-size:.813rem; font-weight:700; color:var(--accent); cursor:pointer; transition:background .15s;
}
.otd-trip-view:hover{ background:var(--accent-light); }

.otd-trip-view.js-pay-balance{ background:var(--success); color:#fff; border-color:var(--success); }
.otd-trip-view.js-pay-balance:hover{ filter:brightness(.95); }
.otd-trip-view.js-cancel-booking{ background:#fff2f2; border-color:#f6caca; color:#dc2626; }
.otd-trip-view.js-cancel-booking:hover{ background:#ffe9e9; }

/* ================== PAYMENTS ================== */
.otd-payments-list{ display:flex; flex-direction:column; gap:.75rem; }
.otd-payment-item{
  background:var(--white); border:1px solid var(--gray-200); border-radius:var(--radius); padding:1rem;
  display:flex; align-items:center; gap:1rem;
}
@media (max-width:640px){ .otd-payment-item{ flex-direction:column; align-items:stretch; } }
.otd-payment-info{ flex:1; }
.otd-payment-info h4{ font-size:.938rem; font-weight:700; margin-bottom:.125rem; }
.otd-payment-id{ font-size:.813rem; color:var(--gray-500); }

.otd-payment-amount{ display:flex; gap:1.5rem; }
.otd-amount-paid, .otd-amount-total{ text-align:right; }
@media (max-width:640px){
  .otd-payment-amount{ justify-content:space-between; padding:.75rem 0; border-top:1px solid var(--gray-100); border-bottom:1px solid var(--gray-100); margin:.75rem 0; }
  .otd-amount-paid, .otd-amount-total{ text-align:left; }
}
.otd-amount-paid span, .otd-amount-total span{
  display:block; font-size:.688rem; color:var(--gray-400); text-transform:uppercase; letter-spacing:.025em;
}
.otd-amount-paid strong, .otd-amount-total strong{ font-size:1rem; font-weight:700; }

.otd-pay-btn{
  padding:.625rem 1.25rem; background:var(--accent); color:#fff; border:none; border-radius:var(--radius-sm);
  font-size:.813rem; font-weight:700; cursor:pointer; transition:background .15s;
}
.otd-pay-btn:hover{ background:var(--accent-hover); }
@media (max-width:640px){ .otd-pay-btn{ width:100%; } }

.otd-payment-status{
  padding:.375rem .75rem; border-radius:var(--radius-sm); font-size:.813rem; font-weight:700; text-align:center;
}
.otd-payment-status.paid{ background:rgba(16,185,129,.08); color:var(--success); }
.otd-payment-status.cancelled{ background:rgba(239,68,68,.08); color:var(--danger); }

/* ================== POINTS CARD ================== */
.otd-points-card{
  background:var(--white); border:2px solid var(--accent); border-radius:var(--radius-lg); padding:1.5rem; margin-bottom:1.5rem;
}
.otd-points-header{ display:flex; align-items:center; gap:1.5rem; margin-bottom:1.25rem; }
@media (max-width:640px){ .otd-points-header{ flex-direction:column; text-align:center; } }
.otd-points-icon{ width:60px; height:60px; background:var(--accent-light); border-radius:var(--radius); display:grid; place-items:center; flex-shrink:0; }
.otd-points-icon svg{ width:28px; height:28px; color:var(--accent); }
.otd-points-balance{ flex:1; }
.otd-points-label{ font-size:.813rem; color:var(--gray-500); margin-bottom:.25rem; }
.otd-points-value{ font-size:2rem; font-weight:800; letter-spacing:-.02em; color:var(--accent); }
.otd-points-worth{ font-size:.813rem; color:var(--gray-500); margin-top:.25rem; }

.otd-points-actions{ display:flex; gap:.75rem; }
@media (max-width:640px){ .otd-points-actions{ flex-direction:column; } }
.otd-redeem-btn, .otd-earn-btn{
  padding:.625rem 1.25rem; border-radius:var(--radius-sm); font-size:.813rem; font-weight:700; cursor:pointer; transition:all .15s; flex:1;
}
.otd-redeem-btn{ background:var(--accent); color:#fff; border:1px solid var(--accent); }
.otd-redeem-btn:hover{ background:var(--accent-hover); }
.otd-earn-btn{ background:#fff; color:var(--accent); border:1px solid var(--accent); }
.otd-earn-btn:hover{ background:var(--accent-light); }

/* ================== EARN MORE ================== */
.otd-earn-more{
  background:var(--white); border:1px solid var(--gray-200); border-radius:var(--radius); padding:1.25rem; margin-bottom:1.5rem;
}
.otd-earn-more h3{ font-size:1rem; font-weight:700; margin-bottom:1rem; }
.otd-earn-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(160px, 1fr)); gap:.75rem; }
.otd-earn-item{ text-align:center; padding:.75rem; background:var(--gray-50); border-radius:var(--radius-sm); }
.otd-earn-item svg{ width:24px; height:24px; color:var(--accent); margin-bottom:.5rem; }
.otd-earn-item strong{ display:block; font-size:.813rem; margin-bottom:.125rem; }
.otd-earn-item span{ display:block; font-size:.688rem; color:var(--gray-500); }

/* ================== HISTORY ================== */
.otd-points-history{ background:var(--white); border:1px solid var(--gray-200); border-radius:var(--radius); padding:1.25rem; }
.otd-points-history h3{ font-size:1rem; font-weight:700; margin-bottom:1rem; }
.otd-history-list{ display:flex; flex-direction:column; gap:.5rem; }
.otd-history-item{ display:flex; align-items:center; gap:.75rem; padding:.625rem; background:var(--gray-50); border-radius:var(--radius-sm); }
.otd-history-icon{ width:28px; height:28px; border-radius:50%; display:grid; place-items:center; flex-shrink:0; }
.otd-history-icon.earned{   background:rgba(16,185,129,.1); color:var(--success); }
.otd-history-icon.redeemed{ background:rgba(239,68,68,.1); color:var(--danger); }
.otd-history-title{ font-size:.813rem; font-weight:600; }
.otd-history-date{ font-size:.688rem; color:var(--gray-400); }
.otd-history-points{ font-size:.938rem; font-weight:700; }
.otd-history-points.earned{ color:var(--success); }
.otd-history-points.redeemed{ color:var(--danger); }

/* ================== PROFILE FORM ================== */
.otd-profile-form{ background:var(--white); border:1px solid var(--gray-200); border-radius:var(--radius); padding:1.5rem; }
@media (max-width:640px){ .otd-profile-form{ padding:1rem; } }
.otd-form-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)); gap:1rem; margin-bottom:1.5rem; }
.otd-form-group{ display:flex; flex-direction:column; }
.otd-form-group label{ font-size:.813rem; font-weight:600; color:var(--black); margin-bottom:.375rem; }
.otd-form-group input{
  padding:.625rem .75rem; background:#fff; border:1px solid var(--gray-200); border-radius:var(--radius-sm);
  font-size:.875rem; transition:all .15s;
}
.otd-form-group input:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-light); }
.otd-form-group input:disabled{ background:var(--gray-50); color:var(--gray-400); cursor:not-allowed; }

/* ================== NOTIFICATION PREFS ================== */
.otd-notifications-prefs{ margin-bottom:1.5rem; }
.otd-notifications-prefs h3{ font-size:.938rem; font-weight:700; margin-bottom:.75rem; }
.otd-checkbox{ display:flex; align-items:center; gap:.625rem; padding:.375rem 0; cursor:pointer; }
.otd-checkbox input[type="checkbox"]{ width:16px; height:16px; cursor:pointer; accent-color:var(--accent); }
.otd-checkbox span{ font-size:.813rem; }

/* ================== FORM ACTIONS ================== */
.otd-form-actions{ display:flex; gap:.75rem; align-items:center; }
@media (max-width:640px){ .otd-form-actions{ flex-direction:column; align-items:stretch; } }
.otd-save-btn, .otd-password-btn{
  padding:.625rem 1.25rem; border:none; border-radius:var(--radius-sm); font-size:.813rem; font-weight:700; cursor:pointer; transition:all .15s;
}
.otd-save-btn{ background:var(--accent); color:#fff; }
.otd-save-btn:hover{ background:var(--accent-hover); }
.otd-password-btn{ background:#fff; color:var(--black); border:1px solid var(--gray-200); }
.otd-password-btn:hover{ background:var(--gray-50); }

.otd-form-msg{ font-size:.813rem; padding:.375rem .75rem; border-radius:var(--radius-sm); }
.otd-form-msg.success{ background:rgba(16,185,129,.08); color:var(--success); }
.otd-form-msg.error{   background:rgba(239,68,68,.08);  color:var(--danger); }

/* ================== EMPTY STATE ================== */
.otd-empty{ text-align:center; padding:2.5rem 1rem; }
.otd-empty svg{ width:48px; height:48px; color:var(--gray-300); margin-bottom:1rem; }
.otd-empty h3{ font-size:1.125rem; font-weight:700; margin-bottom:.375rem; }
.otd-empty p{ color:var(--gray-500); font-size:.875rem; margin-bottom:1.25rem; }
.otd-empty-btn{ display:inline-block; padding:.625rem 1.25rem; background:var(--accent); color:#fff; border-radius:var(--radius-sm); text-decoration:none; font-size:.813rem; font-weight:700; transition:background .15s; }
.otd-empty-btn:hover{ background:var(--accent-hover); }

/* ================== MOBILE NAV ================== */
.otd-mobile-nav{
  position:fixed; bottom:0; left:0; right:0; background:var(--white); border-top:1px solid var(--gray-200);
  display:none; justify-content:space-around; padding:.5rem 0 calc(.5rem + var(--safe-bottom)); z-index:100; box-shadow:0 -6px 14px rgba(0,0,0,.04);
}
@media (max-width:768px){ .otd-mobile-nav{ display:flex; } }
.otd-mobile-item{
  flex:1; display:flex; flex-direction:column; align-items:center; gap:.25rem; padding:.375rem; background:none; border:none; color:var(--gray-400);
  cursor:pointer; transition:color .15s;
}
.otd-mobile-item.active{ color:var(--accent); }
.otd-mobile-item svg{ width:18px; height:18px; }
.otd-mobile-item span{ font-size:.625rem; font-weight:600; }

/* ================== DRAWER ================== */
.otd-drawer{ position:fixed; inset:0; z-index:200; display:none; }
.otd-drawer.active{ display:block; }
.otd-drawer-overlay{ position:absolute; inset:0; background:rgba(0,0,0,.4); animation:fadeIn .2s ease; }
.otd-drawer-content{
  position:absolute; right:0; top:0; bottom:0; width:min(400px, 90vw); background:var(--white); box-shadow:var(--shadow-lg);
  display:flex; flex-direction:column; animation:slideIn .2s ease;
}
@keyframes slideIn{ from{ transform:translateX(100%);} to{ transform:translateX(0);} }
.otd-drawer-header{ display:flex; align-items:center; justify-content:space-between; padding:1.25rem; border-bottom:1px solid var(--gray-200); }
.otd-drawer-header h2{ font-size:1.125rem; font-weight:800; }
.otd-drawer-close{
  width:32px; height:32px; display:grid; place-items:center; background:none; border:1px solid var(--gray-200);
  color:var(--gray-500); cursor:pointer; border-radius:var(--radius-sm); transition:all .15s;
}
.otd-drawer-close:hover{ background:var(--gray-50); color:var(--black); }
.otd-drawer-body{ flex:1; overflow-y:auto; padding:1.25rem; }
.otd-drawer-tabs{ display:flex; gap:.25rem; margin-bottom:1.25rem; border-bottom:1px solid var(--gray-200); }
.otd-tab{ padding:.625rem .75rem; background:none; border:none; border-bottom:2px solid transparent; color:var(--gray-500); font-size:.813rem; font-weight:700; cursor:pointer; transition:all .15s; }
.otd-tab.active{ color:var(--accent); border-bottom-color:var(--accent); }

/* ================== MODAL ================== */
.otd-modal{ position:fixed; inset:0; z-index:300; display:none; }
.otd-modal.active{ display:grid; place-items:center; padding:1rem; }
.otd-modal-overlay{ position:absolute; inset:0; background:rgba(0,0,0,.4); animation:fadeIn .2s ease; }
.otd-modal-content{ position:relative; width:min(420px,100%); background:var(--white); border-radius:var(--radius-lg); box-shadow:var(--shadow-lg); animation:scaleIn .2s ease; }
@keyframes scaleIn{ from{ opacity:0; transform:scale(.95);} to{ opacity:1; transform:scale(1);} }
.otd-modal-header{ display:flex; align-items:center; justify-content:space-between; padding:1.25rem; border-bottom:1px solid var(--gray-100); }
.otd-modal-header h2{ font-size:1.125rem; font-weight:800; }
.otd-modal-close{ width:32px; height:32px; display:grid; place-items:center; background:none; border:none; color:var(--gray-500); cursor:pointer; border-radius:var(--radius-sm); transition:all .15s; }
.otd-modal-close:hover{ background:var(--gray-50); color:var(--black); }
.otd-modal-body{ padding:1.25rem; }
.otd-help-options{ display:flex; flex-direction:column; gap:.75rem; }
.otd-help-option{
  display:flex; align-items:center; gap:.75rem; padding:.875rem; background:var(--gray-50); border:1px solid var(--gray-200);
  border-radius:var(--radius-sm); text-decoration:none; color:var(--black); transition:all .15s; cursor:pointer;
}
.otd-help-option:hover{ background:var(--accent-light); border-color:var(--accent); }
.otd-help-option svg{ width:20px; height:20px; color:var(--accent); }
.otd-help-option span{ font-size:.875rem; font-weight:600; }

/* ================== LOADING & LOGIN ================== */
.otd-loading{ text-align:center; padding:2rem; color:var(--gray-400); font-size:.813rem; }
.dash-login-prompt{ display:grid; place-items:center; min-height:60vh; padding:2rem; }
.dash-login-box{
  background:var(--white); border:1px solid var(--gray-200); border-radius:var(--radius-lg);
  padding:2.5rem 2rem; text-align:center; max-width:360px; width:100%; box-shadow:var(--shadow);
}
.dash-login-icon{ width:40px; height:40px; margin:0 auto 1.25rem; color:var(--gray-400); }
.dash-login-box h3{ font-size:1.25rem; font-weight:800; margin-bottom:.5rem; }
.dash-login-box p{ color:var(--gray-500); font-size:.875rem; margin-bottom:1.25rem; }
.btn-login{
  display:inline-block; padding:.75rem 1.5rem; background:var(--accent); color:#fff; border-radius:var(--radius-sm);
  text-decoration:none; font-size:.875rem; font-weight:700; transition:background .15s;
}
.btn-login:hover{ background:var(--accent-hover); }

/* ================== ACCESSIBILITY & PRINT ================== */
:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.otd-nav-item:focus-visible, .otd-pay-btn:focus-visible, .otd-trip-view:focus-visible, .otd-trip-btn:focus-visible { outline-offset:3px; }
@media print{ .otd-sidebar, .otd-topbar, .otd-mobile-nav { display:none!important; } .otd-main{ margin-left:0; } }