:root{
  --tici-green:#1f6f3e;
  --tici-green-dark:#154d2a;
  --tici-leaf:#e9f5ec;
  --tici-amber:#e8a33d;
  --tici-text:#20301f;
  --tici-radius:14px;
}

* { box-sizing: border-box; }

body{
  font-family: 'Segoe UI', Roboto, -apple-system, sans-serif;
  background: var(--tici-leaf);
  color: var(--tici-text);
  margin:0;
  padding-bottom: 70px; /* space for mobile bottom nav */
}

.navbar-tici{
  background: var(--tici-green);
  color:#fff;
  padding: 14px 18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  position: sticky;
  top:0;
  z-index: 50;
  box-shadow: 0 2px 6px rgba(0,0,0,.12);
}
.navbar-tici .brand{ font-weight:700; font-size:1.1rem; color:#fff; text-decoration:none; display:flex; align-items:center; gap:8px;}
.navbar-tici .brand .dot{width:10px;height:10px;border-radius:50%;background:var(--tici-amber);display:inline-block;}

.container-app{
  max-width: 640px;
  margin: 0 auto;
  padding: 16px;
}

.card-tici{
  background:#fff;
  border-radius: var(--tici-radius);
  padding: 18px;
  box-shadow: 0 2px 10px rgba(0,0,0,.06);
  margin-bottom: 16px;
}

h1.page-title{ font-size:1.35rem; margin: 6px 0 16px; color: var(--tici-green-dark); }
h2.section-title{ font-size:1.05rem; margin: 0 0 12px; color: var(--tici-green-dark); border-bottom:2px solid var(--tici-leaf); padding-bottom:8px;}

label{ font-weight:600; font-size:.88rem; display:block; margin: 12px 0 6px; }
.form-control, select.form-control, textarea.form-control{
  width:100%;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid #cfe0d3;
  font-size: 1rem;
  background:#fbfdfb;
}
.form-control:focus{ outline:none; border-color: var(--tici-green); background:#fff; }

.btn-tici{
  display:inline-block;
  width:100%;
  text-align:center;
  background: var(--tici-green);
  color:#fff;
  border:none;
  padding: 14px 18px;
  border-radius: 10px;
  font-size: 1rem;
  font-weight:600;
  cursor:pointer;
  text-decoration:none;
}
.btn-tici:active{ background: var(--tici-green-dark); }
.btn-outline{
  background:#fff;
  color: var(--tici-green);
  border: 2px solid var(--tici-green);
}
.btn-amber{ background: var(--tici-amber); color:#3a2a05; }

.grid-2{ display:grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width:480px){ .grid-2{ grid-template-columns: 1fr; } }

.badge{ display:inline-block; padding:4px 10px; border-radius:20px; font-size:.75rem; font-weight:700; }
.badge-warning{ background:#fff2d9; color:#8a5b00; }
.badge-success{ background:#e1f6e6; color:#166a34; }
.badge-danger{ background:#fde3e3; color:#9c1f1f; }
.badge-secondary{ background:#eceff1; color:#455a64; }
.badge-info{ background:#e0f2fe; color:#075985; }
.badge-primary{ background:#e0e7ff; color:#3730a3; }
.badge-dark{ background:#e5e7eb; color:#111827; }

.vehicle-toggle{ display:flex; gap:10px; margin-top:6px; }
.vehicle-toggle button{
  flex:1; padding:10px; border-radius:10px; border:1px solid #cfe0d3; background:#fff; font-weight:600; cursor:pointer;
}
.vehicle-toggle button.active{ background: var(--tici-green); color:#fff; border-color: var(--tici-green); }

.guideline-box{
  max-height: 260px;
  overflow-y: auto;
  border: 1px solid #cfe0d3;
  border-radius: 10px;
  padding: 14px;
  background: #fbfdfb;
  font-size: .92rem;
  line-height: 1.55;
}

.checkbox-row{ display:flex; align-items:flex-start; gap:10px; margin: 14px 0; }
.checkbox-row input{ width:20px; height:20px; margin-top:2px; flex-shrink:0; }
.checkbox-row label{ font-weight:500; margin:0; font-size:.92rem; }

.ticket-card{
  background: linear-gradient(135deg, var(--tici-green), var(--tici-green-dark));
  color:#fff;
  border-radius: var(--tici-radius);
  padding: 20px;
  text-align:center;
}
.ticket-card .qr-wrap{ background:#fff; padding:14px; border-radius:12px; display:inline-block; margin:14px 0; }
.ticket-card .qr-wrap img{ width: 200px; max-width:100%; display:block; }
.ticket-meta{ text-align:left; font-size:.9rem; margin-top:14px; background:rgba(255,255,255,.12); border-radius:10px; padding:12px; }
.ticket-meta div{ display:flex; justify-content:space-between; padding:4px 0; border-bottom:1px solid rgba(255,255,255,.15); }
.ticket-meta div:last-child{ border-bottom:none; }

.alert{ padding:12px 14px; border-radius:10px; margin-bottom:14px; font-size:.92rem; }
.alert-success{ background:#e1f6e6; color:#166a34; }
.alert-danger{ background:#fde3e3; color:#9c1f1f; }
.alert-info{ background:#e0f2fe; color:#075985; }

.star-rating{ display:flex; gap:8px; font-size:1.8rem; justify-content:center; margin: 10px 0; }
.star-rating span{ cursor:pointer; color:#d9dfd9; }
.star-rating span.active{ color: var(--tici-amber); }

.bottom-nav{
  position:fixed; bottom:0; left:0; right:0;
  background:#fff; border-top:1px solid #e0e5e0;
  display:flex; justify-content:space-around; padding:8px 0;
  z-index: 50;
}
.bottom-nav a{ text-decoration:none; color:#5a6b58; font-size:.72rem; text-align:center; }
.bottom-nav a.active{ color: var(--tici-green); font-weight:700; }

.step-indicator{ display:flex; gap:6px; margin-bottom:16px; }
.step-indicator .step{ flex:1; height:5px; border-radius:4px; background:#dbe6dc; }
.step-indicator .step.done{ background: var(--tici-green); }

table.tici-table{ width:100%; border-collapse:collapse; font-size:.88rem; }
table.tici-table th, table.tici-table td{ padding:10px; border-bottom:1px solid #e5eae5; text-align:left; }
table.tici-table th{ color:#5a6b58; font-weight:700; }

.text-muted{ color:#7a8a78; font-size:.85rem; }
.text-center{ text-align:center; }
.mt-2{ margin-top:16px;} .mb-2{ margin-bottom:16px;}