/* =========================================
   FEΠΑΝ GATE — SAFE OVERRIDES
   (works with site header/nav)
========================================= */

:root{
  --gate-bg-1:#4c0519;
  --gate-bg-2:#7b1113;
  --gate-bg-3:#991b1f;

  --text:#0f172a;
  --muted:rgba(15, 23, 42, 0.72);

  --border:rgba(226,232,240,0.95);
  --shadow: 0 30px 80px rgba(0,0,0,0.35);
}

/* ✅ ΜΗΝ ΚΑΝΕΙΣ το body flex (σπάει το header) */
body{
  margin:0;
  min-height:100vh;
  font-family:'Inter', system-ui, -apple-system, sans-serif;

  /* background gradient stays */
  background: linear-gradient(135deg,
    var(--gate-bg-1) 0%,
    var(--gate-bg-2) 55%,
    var(--gate-bg-3) 100%
  );
}

/* ✅ main layout κάτω από header */
.gate{
  width:min(460px, calc(100% - 32px));
  margin: 34px auto 40px;

  background: rgba(255,255,255,0.98);
  border: 1px solid rgba(255,255,255,0.35);

  padding: 44px 38px;
  border-radius: 24px;

  text-align:center;
  box-shadow: var(--shadow);

  /* premium glass effect */
  backdrop-filter: blur(10px);
}

/* logo inside gate */
.gate .logo img{
  height: 72px;
  width:auto;
  margin: 0 auto 22px;
  filter: drop-shadow(0 8px 16px rgba(0,0,0,0.18));
}

/* title */
.gate h2{
  color: #7b1113;
  font-size: 1.85rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0 0 10px;
}

/* subtitle */
.gate .subtitle{
  color: var(--muted);
  font-size: 1.05rem;
  margin: 0 0 28px;
}

/* form spacing */
.gate form{
  margin-top: 10px;
}

/* input wrapper */
.gate .input-box{
  position: relative;
  margin: 0 0 16px;
}

/* password input */
.gate .input-box input{
  width: 100%;
  padding: 16px 16px 16px 18px;
  font-size: 1.05rem;

  border: 2px solid var(--border);
  border-radius: 16px;

  background: #fff;
  color: var(--text);

  transition: 0.2s ease;
}

.gate .input-box input:focus{
  border-color: rgba(123,17,19,0.55);
  box-shadow: 0 0 0 5px rgba(123,17,19,0.14);
  outline: none;
}

/* button */
.gate button{
  width: 100%;
  padding: 16px;

  background: linear-gradient(135deg, #7b1113, #991b1f);
  color: white;

  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: 0.02em;

  border: none;
  border-radius: 16px;

  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}

.gate button:hover{
  transform: translateY(-2px);
  box-shadow: 0 18px 35px rgba(123,17,19,0.35);
  filter: brightness(1.03);
}

.gate button:active{
  transform: translateY(0);
  box-shadow: 0 10px 20px rgba(123,17,19,0.25);
}

/* error */
.gate .error{
  background: rgba(254, 226, 226, 0.95);
  color: #991b1b;

  padding: 14px 14px;
  border-radius: 14px;

  margin: 0 0 16px;
  font-weight: 700;
  border: 1px solid rgba(239, 68, 68, 0.25);
}

/* footer INSIDE gate card */
.gate footer{
  margin-top: 26px;
  color: rgba(15, 23, 42, 0.55);
  font-size: 0.9rem;
  line-height: 1.4;
}

/* ✅ Mobile refinements */
@media (max-width: 520px){
  .gate{
    padding: 30px 22px;
    margin-top: 24px;
  }

  .gate h2{
    font-size: 1.5rem;
  }

  .gate .subtitle{
    font-size: 1rem;
  }

  .gate .logo img{
    height: 58px;
  }
}
@media (max-width: 520px){
  .gate .logo{ display:none; }
}