/* ====================== Simple, centered UI (no @media) ====================== */

:root{
  --bg: #f7f7fb;
  --surface: #ffffff;
  --text: #1f2937;
  --muted:#6b7280;
  --border:#e5e7eb;
  --brand:#2563eb;
  --ring: rgba(37,99,235,.25);
  --radius: 12px;
  --shadow: 0 8px 20px rgba(17,24,39,.08);
  --panel-w: 640px;            /* μέγιστο πλάτος για τη φόρμα */
}

/* Base */
*{ box-sizing: border-box; }
html, body{ height:100%; }
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Arial;
  color: var(--text);
  background: var(--bg);
  line-height:1.6;
  padding: 24px;
}
img{ display:block; max-width:100%; height:auto; }

/* Logo */
.logo{
  width: 200px;
  margin: 8px 0 12px 0;
  opacity: 0;
  transform: translateY(6px);
  animation: fadeUp .6s ease-out .05s forwards;
}

/* Titles (simple animations) */
h1{
  margin: 10px 0 6px;
  font-weight: 800;
  letter-spacing: -0.015em;
  font-size: 2rem;
  animation: titleIn .6s ease-out both;
}
h2{
  display: inline-block;
  margin: 12px 0 10px;
  font-size: 1.4rem;
  font-family: "Times New Roman", Times, serif;
  background: #fde68a;                 /* απαλό κίτρινο label */
  color: #7c3a03;
  border: 1px solid #f59e0b;
  padding: .2rem .8rem;
  border-radius: 8px;
  animation: labelPop .5s cubic-bezier(.2,.7,.2,1) both;
}

/* ----- Form centered card ----- */
form{
  width: 100%;
  max-width: var(--panel-w);            /* κέντρο & σταθερό max */
  margin: 0 auto;                       /* ΟΡΙΖΟΝΤΙΟ ΚΕΝΤΡΟ */
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 16px;
  display: grid;
  gap: 12px;
}
form p{ margin: 0; }
label{ margin-bottom: 4px; font-weight: 600; color: var(--text); }

/* Select (πάνω από τα πεδία, γεμίζει το πλάτος της φόρμας) */
.select_value{
  display: block;
  width: 100%;
  margin: 6px 0 12px 0;
  appearance: none; -webkit-appearance: none;
  color: var(--text);
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 44px 12px 14px;
  font-weight: 600;

  background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7 10l5 5 5-5' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;

  transition: transform .12s ease, box-shadow .2s ease, border-color .2s ease;
}
.select_value:hover{ transform: translateY(-1px); }
.select_value:focus{
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--ring);
}
option.droplist{ color:#111; }

/* Inputs */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="date"],
input[type="time"],
input[type="number"],
select,
textarea{
  width: 100%;
  background: #fff;
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 1rem;
  transition: border-color .18s ease, box-shadow .18s ease, transform .1s ease;
}
input:hover, select:hover, textarea:hover{ transform: translateY(-1px); }
input:focus, select:focus, textarea:focus{
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--ring);
}

/* Errors/help */
.helptext{ color: var(--muted); font-size: .94rem; }
.errorlist{ list-style: none; padding: 0; margin: 6px 0 0; }
.errorlist li{
  background: #fee2e2; color: #991b1b;
  border: 1px solid #fecaca; padding: 8px 10px; border-radius: 10px;
}

/* Button */
.btn-submit{
  -webkit-tap-highlight-color: transparent;
  cursor: pointer;
  display: inline-block;
  width: auto;                         /* μικρό κουμπί */
  border: 0;
  border-radius: 999px;
  padding: 10px 16px;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(90deg, var(--brand), #0ea5e9);
  box-shadow: 0 10px 22px rgba(37,99,235,.22);
  transition: transform .12s ease, box-shadow .2s ease, filter .2s ease;
}
.btn-submit:hover{ transform: translateY(-1px); filter: brightness(1.05); }
.btn-submit:active{ transform: translateY(0); }
.btn-submit:focus-visible{ outline: none; box-shadow: 0 0 0 3px var(--ring); }

/* ====================== Animations ====================== */
@keyframes fadeUp{
  from{ opacity:0; transform: translateY(10px); }
  to  { opacity:1; transform: translateY(0); }
}
@keyframes titleIn{
  0%  { opacity:0; transform: translateY(14px); }
  70% { opacity:1; transform: translateY(0); }
  100%{ transform: translateY(0); }
}
@keyframes labelPop{
  0%   { opacity:0; transform: translateY(8px) scale(.98); }
  60%  { opacity:1; transform: translateY(0)   scale(1.02); }
  100% {              transform: translateY(0)   scale(1); }
}