/* ===== Public index (region chooser) ===== */

/* Container uses shared .container */

h1 { margin-bottom: 20px; }

.regions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
}

/* Region cards with hover effects */
.region-card {
  border: 2px solid var(--primary, #ccc);
  border-radius: 8px;
  padding: 15px;
  text-align: center;
  background: var(--card-bg, #fff);
  color: var(--card-text, #000);
  transition: transform .18s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform;
    margin-top: 15px
}
.region-card:hover,
.region-card:focus-within {
  transform: translateY(-4px);
  box-shadow:
    0 6px 16px color-mix(in srgb, var(--shadow-color, var(--primary, #444)) 30%, transparent),
    0 2px 6px rgba(0,0,0,.06);
  border-color: var(--primary, #444);
}

/* Base button = onboarding style */
.btn{
  --onboard-bg: var(--brand, #0a66c2);
  --onboard-text: #fff;
  --onboard-border: #0a57a3;

  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;

  margin:5px;
  padding:.7rem 1.1rem;
  font-weight:600;
  line-height:1;
  text-decoration:none;

  color:var(--onboard-text);
  background:var(--onboard-bg);
  border:1px solid var(--onboard-border);
  border-radius:.6rem;
  box-shadow:0 2px 6px rgba(0,0,0,.12);

  transition:transform .12s ease, box-shadow .2s ease, background-color .2s ease, border-color .2s ease, color .2s ease;
  cursor:pointer;
}
.btn:hover{ transform:translateY(-1px); box-shadow:0 6px 14px rgba(0,0,0,.18); }
.btn:active{ transform:translateY(0); box-shadow:0 2px 6px rgba(0,0,0,.12) inset; }
.btn:focus-visible{ outline:0; box-shadow:0 0 0 3px rgba(10,102,194,.25), 0 2px 6px rgba(0,0,0,.12); }
.btn[disabled], .btn[aria-disabled="true"]{ opacity:.55; pointer-events:none; }
.btn.sm{ padding:.5rem .85rem; border-radius:.5rem; font-weight:600; }
.btn.lg{ padding:.9rem 1.3rem; border-radius:.7rem; font-weight:700; }

/* Keep variants; they override only palette */
.btn.rider{
  background: var(--btn-rider-bg, color-mix(in srgb, var(--primary, #333) 18%, #fff 82%));
  color: var(--btn-rider-text, #000);
  border-color: var(--primary, #333);
}
.btn.rider:hover, .btn.rider:focus{
  background: var(--btn-rider-bg-hover, color-mix(in srgb, var(--primary, #333) 28%, #fff 72%));
  color: var(--btn-rider-text-hover, var(--btn-rider-text, #000));
  box-shadow: 0 4px 10px color-mix(in srgb, var(--primary, #333) 28%, transparent);
  transform: translateY(-1px);
}
.btn.admin{
  background: var(--btn-admin-bg, color-mix(in srgb, var(--secondary, #666) 18%, #fff 82%));
  color: var(--btn-admin-text, #000);
  border-color: var(--secondary, #666);
}
.btn.admin:hover, .btn.admin:focus{
  background: var(--btn-admin-bg-hover, color-mix(in srgb, var(--secondary, #666) 28%, #fff 72%));
  color: var(--btn-admin-text-hover, var(--btn-admin-text, #000));
  box-shadow: 0 4px 10px color-mix(in srgb, var(--secondary, #666) 28%, transparent);
  transform: translateY(-1px);
}


.footer { margin-top: 30px; text-align: center; font-size: 14px; }

@media (max-width: 420px) {
  .logo-holder { width: 140px; height: 90px; }
}