/* ==========================
   Global Styles (Create Page)
========================== */
body {
  background: #000;
  color: #fff;
  font-family: Arial, sans-serif;
  margin: 0;
}

.site-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 20px;
  background: #111;
  flex-wrap: wrap;
  border-bottom: none !important;   /* ✅ Remove unwanted line */
}

.site-header .logo a {
  color: #8FD400;
  font-weight: bold;
  text-decoration: none;
  font-size: 1.3rem; /* ✅ Consistent with join.css */
}

.main-nav a {
  color: #fff;
  margin: 0 8px;
  text-decoration: none;
}

.main-nav a.active {
  color: #8FD400;
}

@media (max-width:700px) {
  .site-header { flex-direction: column; align-items: flex-start; }
  .logo { margin-bottom: 8px; }
  .main-nav {
    width: 100%;
    display: flex;
    justify-content: center;
    gap: 16px;
  }
}

main {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: calc(100vh - 80px);
}

.form-card {
  max-width: 500px;
  width: 100%;
  background: #111;
  padding: 20px;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.form-card h1 {
  text-align: center;
  margin-bottom: 10px;
  color: #8FD400; /* ✅ Sheen Green headings */
}

.form-card label {
  display: flex;
  flex-direction: column;
  text-align: left;
  font-size: .9rem;
}

input, button {
  padding: 8px;
  border-radius: 4px;
  border: 1px solid #333;
}

input:focus {
  outline: 1px solid #8FD400;
}

.btn {
  background: #8FD400;
  color: #000;
  border: none;
  cursor: pointer;
  font-weight: bold;
}

/* === Flatpickr Gambetas Theme === */
.flatpickr-calendar {
  background: #000 !important;
  border: 1px solid #8FD400 !important;
  box-shadow: 0 0 12px rgba(143,212,0,.6);
  color: #fff !important;
}

.flatpickr-day {
  background: #111;
  color: #fff;
  border-radius: 6px;
}

.flatpickr-day:hover {
  background: #222;
  color: #8FD400;
}

.flatpickr-day.selected {
  background: #8FD400 !important;
  color: #000 !important;
}

.flatpickr-time input {
  background: #111 !important;
  color: #fff !important;
  border: 1px solid #333 !important;
}

.flatpickr-am-pm,
.flatpickr-clear,
.flatpickr-today {
  background: #8FD400 !important;
  color: #000 !important;
  border-radius: 6px;
  padding: 4px 8px;
  font-weight: bold;
  cursor: pointer;
}

.flatpickr-am-pm:hover,
.flatpickr-clear:hover,
.flatpickr-today:hover {
  background: #a9f000 !important;
}


/* --- field containers: white on black --- */
.form-card label {display:block;background:#fff;color:#000;border:1px solid #8FD400;border-radius:10px;padding:12px;margin-bottom:12px;overflow:hidden;}
.form-card input,.form-card select{display:block;width:100%;background:#fff;color:#000;border:1px solid #8FD400;border-radius:8px;padding:10px;box-sizing:border-box;}
/* layout constraints */
.content{display:flex;justify-content:center;padding:32px 12px;}
.form-card{max-width:520px;width:100%;margin:0 auto;background:#111;border:1px solid #8FD400;border-radius:10px;padding:20px;box-sizing:border-box;}
/* triple row for type/skill/gender */
.form-row.triple{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:10px;}
@media (max-width:700px){.form-row.triple{grid-template-columns:1fr;}}
/* centered calendar overlay */
.fp-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.85);display:none;align-items:center;justify-content:center;z-index:9999;}
.flatpickr-calendar{background:#000 !important;border:1px solid #8FD400 !important;box-shadow:0 0 12px rgba(143,212,0,.6);color:#fff !important;}
.flatpickr-day.selected{background:#8FD400 !important;color:#000 !important;}
.flatpickr-day.today{border:1px solid #8FD400 !important;}

.fp-overlay .flatpickr-calendar{position:static!important;margin:0 auto;}

/* Center the Flatpickr popup */
.fp-center .flatpickr-calendar{position:fixed!important;left:50%!important;top:50%!important;transform:translate(-50%,-50%)!important;z-index:9999}

/* ✅ Gambetas OK button inside Flatpickr */
.flatpickr-ok {
  background: #8FD400 !important;
  color: #000 !important;
  border: none;
  border-radius: 6px;
  padding: 6px 12px;
  font-weight: bold;
  cursor: pointer;
  margin: 8px auto;
  display: block;
  transition: background 0.2s ease-in-out;
}
.flatpickr-ok:hover {
  background: #a9f000 !important;
}