:root {
      --waw-navy: #00203A;
      --waw-teal: #22A0B7;
      --waw-orange: #F2531C;
      --waw-cream: #F0EFEF;
      --waw-ink: #231F20;
      --waw-red: #C51E24;

      --bg: #f6f4f1;
      --card-bg: #ffffff;
      --text: var(--waw-ink);
      --muted: #5f666d;
      --border: #d9d6d2;

      --button-bg: var(--waw-navy);
      --button-bg-hover: #0b3555;

      --success-bg: #e9f6f8;
      --success-border: #22A0B7;
      --success-text: #0f3f4b;

      --error-bg: #fbe9e8;
      --error-border: #C51E24;
      --error-text: #6b1d20;

      --pending-bg: #fff6dd;
      --pending-border: #d9b54a;
      --pending-text: #7a5a00;

      --neutral-bg: #f2f2f2;
      --neutral-border: #cfcfcf;
      --neutral-text: #444;
    }

    body {
      font-family: Arial, sans-serif;
      margin: 0;
      padding: 18px;
      background: var(--bg);
      color: var(--text);
    }

    .wrap {
      max-width: 600px;
      margin: 0 auto;
    }

    .header {
      display: flex;
      justify-content: center;
      margin-bottom: 12px;
      padding-bottom: 8px;
      border-bottom: 1px solid var(--border);
    }

    .header img {
      height: 42px;
      width: auto;
      display: block;
    }

    h1 {
      color: var(--waw-navy);
      margin: 0 0 16px 0;
      font-size: 2rem;
    }

    .card {
      background: var(--card-bg);
      padding: 16px;
      border-radius: 10px;
      margin-bottom: 14px;
      border: 1px solid var(--border);
      box-shadow: 0 2px 6px rgba(0, 32, 58, 0.06);
    }
.hidden {
  display: none;
}

    label {
      display: block;
      font-weight: 600;
      color: var(--waw-navy);
      margin-bottom: 6px;
    }

    input {
      width: 100%;
      padding: 14px 12px;
      margin-top: 6px;
      font-size: 1rem;
      border: 1px solid var(--border);
      border-radius: 6px;
      background: #fff;
      color: var(--text);
      box-sizing: border-box;
      transition: border-color 0.2s, box-shadow 0.2s;
    }

    input:focus {
      outline: none;
      border-color: var(--waw-teal);
      box-shadow: 0 0 0 3px rgba(34, 160, 183, 0.22);
    }

    button {
      width: 100%;
      padding: 13px;
      margin-top: 10px;
      background: var(--button-bg);
      color: #fff;
      border: none;
      border-radius: 6px;
      cursor: pointer;
      font-size: 1rem;
      font-weight: 600;
      transition: background 0.15s ease, transform 0.05s ease;
    }

    button:hover {
      background: var(--button-bg-hover);
    }

    button:active {
      transform: translateY(1px);
    }

    .help-text {
      font-size: 0.92rem;
      color: var(--muted);
      margin-top: 8px;
    }

    .result {
      margin-top: 16px;
      padding: 16px;
      border-radius: 10px;
      display: none;
      border: 1px solid transparent;
      font-weight: 700;
      line-height: 1.35;
    }

    .approved {
      background: var(--success-bg);
      color: var(--success-text);
      border-color: var(--success-border);
    }

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

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

    .notfound {
      background: var(--neutral-bg);
      color: var(--neutral-text);
      border-color: var(--neutral-border);
    }

    .meta {
      margin-top: 10px;
      font-weight: normal;
      font-size: 0.95rem;
    }

    .error {
      margin-top: 12px;
      padding: 12px 14px;
      border-radius: 8px;
      border: 1px solid var(--error-border);
      background: var(--error-bg);
      color: var(--error-text);
      display: none;
      line-height: 1.4;
    }

    .footer {
      margin-top: 36px;
      padding-top: 18px;
      border-top: 1px solid var(--border);
      text-align: center;
      font-size: 0.9rem;
      color: var(--muted);
    }
.service-card {
  display: block;
  background: var(--card-bg);
  padding: 18px;
  margin-bottom: 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 2px 6px rgba(0, 32, 58, 0.06);
  color: var(--text);
  text-decoration: none;
  transition: border-color 0.15s ease, transform 0.05s ease;
}

.service-card:hover {
  border-color: var(--waw-teal);
}

.service-card:active {
  transform: translateY(1px);
}

.service-card strong {
  display: block;
  color: var(--waw-navy);
  font-size: 1.15rem;
  margin-bottom: 6px;
}

.service-card span {
  display: block;
  color: var(--muted);
  line-height: 1.4;
}

.charging-date {
  display: block;
  color: var(--waw-navy);
  font-size: 1.1rem;
  margin-bottom: 12px;
}

.charging-session {
  display: grid;
  grid-template-columns: 1fr 130px;
  gap: 14px;
  align-items: center;
  padding: 12px 0;
  border-top: 1px solid var(--border);
}

.charging-session button {
  margin: 0;
}

@media (max-width: 480px) {
  .charging-session {
    grid-template-columns: 1fr;
  }
}
.charging-session button:disabled {
  background: var(--neutral-bg);
  color: var(--muted);
  border: 1px solid var(--border);
  cursor: default;
}
.charging-session button.your-reservation:disabled {
  background: var(--waw-teal);
  color: #fff;
  border-color: var(--waw-teal);
  opacity: 1;
}

.charging-session .cancel-reservation {
  background: transparent;
  color: var(--waw-red);
  border: 1px solid var(--waw-red);
}
.admin-charging-session {
  display: grid;
  grid-template-columns: 1fr 110px;
  gap: 14px;
  align-items: center;
  padding: 14px 0;
  border-top: 1px solid var(--border);
}

.admin-customer {
  margin-top: 8px;
  color: var(--waw-navy);
}

.admin-available {
  text-align: center;
  color: var(--success-text);
  background: var(--success-bg);
  border: 1px solid var(--success-border);
  border-radius: 6px;
  padding: 10px;
  font-weight: 600;
}

.admin-charging-session .admin-cancel {
  margin: 0;
  background: transparent;
  color: var(--waw-red);
  border: 1px solid var(--waw-red);
}

@media (max-width: 480px) {
  .admin-charging-session {
    grid-template-columns: 1fr;
  }
}