/* Taoticket Custom CSS - v2.0 */

:root {
  --accent-color: #00968d;
  --accent-hover: #007a73;
  --accent-light: #e6f5f4;
  --accent-lighter: #ccedeb;
  --accent-text: #007a73;
  --secondary-color: #ff6600;
  --error-bg: #fef2f2;
  --error-text: #b91c1c;
  --error-border: #fca5a5;
  --error-bg-light: #fee2e2;
  --error-border-light: #fecaca;
  --warning-bg: #fefce8;
  --warning-border: #fde047;
  --warning-text: #eab308;
}

.bg-brand-primary {
  background-color: var(--accent-color);
}

.trip-type-toggle button.inactive {
  color: #111827;
  background-color: white;
}

.trip-type-toggle button.inactive:hover {
  background-color: #f3f4f6;
}

.trip-type-toggle button.active {
  background-color: var(--accent-color);
  color: white !important;
  border-color: var(--accent-color);
  z-index: 10;
}

.routes div label {
  color: #374151;
}

.form-input-base {
  background-color: white;
  box-shadow: none;
  cursor: pointer;
  color: #111827;
  --tw-ring-color: var(--accent-color);
}

.form-input-base:disabled {
  background-color: #f3f4f6;
  cursor: not-allowed;
  color: #6b7280;
  opacity: 1;
  pointer-events: auto;
}

.form-input-base::placeholder {
  color: inherit;
  opacity: 1;
}

.searchBox .calendar input {
  background-color: white;
  --tw-ring-color: var(--accent-color);
}

.text-accent-custom {
  color: var(--accent-color);
}

.bg-accent-custom {
  background-color: var(--accent-color);
  color: white !important;
}

.bg-accent-custom:hover {
  filter: brightness(0.9);
}

.border-accent-custom {
  border-color: var(--accent-color);
}

.btn-custom {
  color: white !important;
  background-color: var(--accent-color);
}

.item-focus-light {
  background-color: var(--accent-light);
}

.item-focus-light:hover {
  background-color: var(--accent-light);
}

.btn-primary {
  color: white !important;
  background-color: var(--secondary-color);
}

.btn-primary:hover {
  background-color: #e65c00;
}

.form-label {
  color: #374151;
}

.fare-badge {
  color: var(--accent-text);
  background-color: var(--accent-lighter);
}

.fare-badge:hover {
  background-color: var(--accent-light);
}

.passenger-card {
  border-left-color: var(--accent-color);
}

.switch-checked {
  background-color: var(--accent-color);
}

.error-box {
  background-color: var(--error-bg);
  color: var(--error-text);
  border-color: var(--error-border);
}

.error-box-inline {
  background-color: var(--error-bg);
  color: var(--error-text);
  border-color: var(--error-border);
}

.error-box-strong {
  background-color: var(--error-bg);
  color: var(--error-text);
  border-color: var(--error-border-light);
}

.error-box-alert {
  background-color: var(--error-bg-light);
  color: var(--error-text);
  border-color: var(--error-border);
}

.warning-box {
  background-color: var(--warning-bg);
  border-color: var(--warning-border);
}

.summary-heading {
  color: var(--accent-text);
}

.maintenance-btn {
  color: white !important;
  background-color: var(--accent-color);
}

.maintenance-btn:hover {
  background-color: var(--accent-hover);
}

.maintenance-btn:focus {
  --tw-ring-color: var(--accent-color);
}

.focus-visible-outline:focus-visible {
  outline: 2px solid var(--accent-color) !important;
  outline-offset: 2px !important;
}

.permanent-outline {
  outline: 2px solid var(--accent-color) !important;
  outline-offset: 2px !important;
}

/* Language Selector */
.tp-language-selector {
  color: white !important;
}

/* Header */
.tp-header {
  background-color: var(--accent-color) !important;
  border-bottom: 1px solid var(--accent-hover) !important;
}

.tp-header-title {
  color: white;
}

.tp-header-phone {
  color: white;
}

.tp-header-phone:hover {
  color: var(--accent-lighter);
}

.tp-header-phone-icon-bg {
  background-color: rgba(255, 255, 255, 0.2);
}

.tp-header-phone-label {
  color: white;
}

.tp-header-phone-number {
  color: white;
}

.tp-header-language-container {
  background-color: rgba(255, 255, 255, 0.1);
}

/* Footer */
.tp-footer {
  background-color: var(--accent-color) !important;
  color: white !important;
}

.tp-footer-contact-label {
  color: var(--accent-lighter);
}

.tp-footer-contact-info {
  color: var(--accent-light);
}

.tp-footer-bottom {
  background-color: #1a1a1a;
  color: #888888;
  border-top: 1px solid #1f2937;
}

.tp-footer-bottom-text {
  color: #6b7280;
}

.tp-footer-bottom-p {
  opacity: 0.6;
}