:root{
  --green:#013107;
  --overlayGreen:rgba(1,49,7,.75);
  --accent:#d4af37;
  --mint:#dcf9ce;
  --panel:#f3f4f6;
  --white:#fff;
  --ink:#111;
  --text:#222;
  --border:#dcdcdc;
  --shadow:0 18px 60px rgba(0,0,0,.18);
}

*,
*::before,
*::after{
  box-sizing:border-box;
}

html,body{
  height:100%;
}

body{
  margin:0;
  padding:0;
  font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  background:var(--green);
  color:var(--text);
  display:flex;
  align-items:stretch;
  justify-content:stretch;
  font-size:16px;
}

/* ===================== LAYOUT WRAPPER ===================== */

.container{
  width:100%;
  min-height:100vh;
  display:flex;
  align-items:stretch;
  justify-content:stretch;
  margin:0;
  padding:0;
}

/* ===================== LEFT SIDE ===================== */

.left-section{
  flex:0 0 60%;
  position:relative;
  background:url('../picture.jpg') center/cover no-repeat;
  color:#fff;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  padding:40px 50px;
}

.overlay{
  position:absolute;
  inset:0;
  background:var(--overlayGreen);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index:1;
  pointer-events:none;
}

.left-content{
  position:relative;
  z-index:2;
  max-width:420px;
  height:100%;
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.logos{
  display:flex;
  gap:8px;
  margin-bottom:10px;
}

.logos img{
  height:70px;
  width:auto;
  object-fit:contain;
  border-radius:5px;
  padding:5px;
  background:rgba(255,255,255,.08);
}

.title-block{
  border-left:4px solid #fff;
  padding-left:15px;
  margin-top:100px;
  margin-bottom:40px;
  display:inline-block;
}

.main-title{
  margin:0 0 14px 0;
  font-size:2.9rem;
  line-height:1.1;
  font-style:italic;
  font-weight:700;
  letter-spacing:.03em;
  color:#fff;
}

.subtitle{
  font-size:1.1rem;
  font-style:italic;
  opacity:.85;
  margin:0;
  color:var(--mint);
}

.reading-center{
  margin-top:auto;
  font-size:.95rem;
  font-style:italic;
}

.reading-center strong{
  display:block;
  margin-bottom:4px;
  font-weight:700;
}

.reading-center span{
  color:var(--accent);
}

/* ===================== RIGHT SIDE ===================== */

.right-section{
  flex:0 0 40%;
  max-width:40%;
  background:var(--panel);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  padding:12px 20px 16px;
  box-shadow:-8px 0 24px rgba(0,0,0,.18);
  max-height:100vh;
  overflow-y:auto;
}

/* ===================== TABS ===================== */

.auth-tabs{
  display:flex;
  gap:6px;
  background:#e5e7eb;
  padding:6px;
  border-radius:999px;
  margin:4px auto 10px;
  width:100%;
  max-width:600px;
}

.tab-btn{
  flex:1;
  padding:12px 18px;
  border:none;
  border-radius:999px;
  background:transparent;
  cursor:pointer;
  font-weight:800;
  font-size:1rem;
  color:#333;
  position:relative;
  z-index:1;
  transition:
    background .25s ease,
    color .25s ease,
    box-shadow .25s ease,
    transform .2s ease,
    opacity .2s ease;
}

.tab-btn:not(.active){
  opacity:.7;
}

.tab-btn.active{
  background:#fff;
  color:#111;
  box-shadow:0 4px 12px rgba(0,0,0,.16);
  transform:translateY(-1px);
  opacity:1;
}

/* ===================== SLIDER ===================== */

.auth-slider{
  width:100%;
  max-width:600px;
  margin:0 auto 10px;
  position:relative;
  overflow:hidden;
  transition:height .25s ease;
}

.auth-track{
  display:flex;
  width:200%;
  transform:translateX(0%);
  transition: transform .45s ease;
}

.auth-panel{
  width:50%;
  padding:4px 4px 12px;
  display:flex;
  flex-direction:column;
}

/* Titles */

.form-title{
  font-weight:800;
  font-size:1.9rem;
  color:#333;
  text-align:center;
  margin:6px 0 12px 0;
}

/* ===================== BASE FORM STYLES ===================== */

.form-stack{
  display:flex;
  flex-direction:column;
  gap:14px;
}

label{
  display:flex;
  flex-direction:column;
  font-size:.9rem;
  font-weight:600;
  color:#333;
}

label input,
label select{
  margin-top:6px;
}

input,
select{
  padding:10px;
  font-size:.95rem;
  border:none;
  background:#fff;
  border-radius:8px;
  box-shadow: inset 0 0 0 1px var(--border);
  transition: box-shadow .2s ease, background-color .2s ease;
}

input:focus,
select:focus{
  outline:none;
  box-shadow: inset 0 0 0 2px #000;
  background:#fff;
}

/* ===================== LOGIN PANEL ===================== */

#panelLogin{
  display:flex;
  flex-direction:column;
  align-items:center;
}

#panelLogin .form-title{
  font-size:2rem;
}

#panelLogin .form-stack{
  max-width:540px;
  width:100%;
  margin:0 auto;
  background:#f9fafb;
  border-radius:18px;
  padding:1.5rem 1.7rem 1.5rem;
  box-shadow:0 18px 45px rgba(15,23,42,0.08);
  gap:16px;
}

#panelLogin label{
  font-size:.98rem;
}

#panelLogin input{
  font-size:1rem;
}

/* ===================== REGISTER PANEL ===================== */

.register-form{
  background:#f9fafb;
  border-radius:18px;
  padding:1.3rem 1.5rem 1.1rem;
  box-shadow:0 18px 45px rgba(15,23,42,0.08);
  display:flex;
  flex-direction:column;
  gap:0.7rem;
}

/* 12-column grid */

.register-form .field-grid{
  display:grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap:0.8rem;
  row-gap:0.7rem;
}

.field-grid .col-3{  grid-column: span 3; }
.field-grid .col-4{  grid-column: span 4; }
.field-grid .col-6{  grid-column: span 6; }
.field-grid .col-12{ grid-column: span 12; }

.register-form .form-actions{
  margin-top:0.5rem;
  padding-top:0.6rem;
  display:flex;
  justify-content:center;
  gap:0.9rem;
  border-top:1px solid rgba(0,0,0,0.04);
}

.small-hint{
  font-size:0.9rem;
  color:#555;
  margin:0 0 8px 0;
}

/* divider "or" (shared by login & register) */

.or-divider{
  margin:1rem 0 0.4rem;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  font-size:0.95rem;
  color:#666;
  font-weight:600;
  letter-spacing:0.04em;
}

.or-divider::before,
.or-divider::after{
  content:"";
  flex:1;
  height:2px;
  background:#c7c7c7;
}

/* ===================== BUTTONS ===================== */

.buttons{
  display:flex;
  justify-content:center;
  gap:20px;
  margin-top:6px;
  flex-wrap:wrap;
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0.55rem 1.4rem;
  min-width:120px;
  font-weight:800;
  font-size:1rem;
  border:none;
  border-radius:30px;
  cursor:pointer;
  color:#fff;
  text-decoration:none;
  user-select:none;
  box-shadow:0 2px 8px rgba(0,0,0,.2);
  transition: transform .05s ease, filter .2s ease;
}

.btn:active{
  transform:translateY(1px);
}

.login-btn{
  background: linear-gradient(180deg, #078107, #066906);
}

.login-btn:hover{
  filter:brightness(.95);
}

.register-btn{
  background: linear-gradient(180deg, #2751d1, #1e3ca0);
}

.register-btn:hover{
  filter:brightness(.95);
}

.login-alt{
  background: linear-gradient(180deg, #666, #444);
}

.login-alt:hover{
  filter:brightness(.95);
}

/* Google button – teal outline style */

.login-google-btn{
  background:#ffffff;
  color:#111;
  border:2px solid #1e8fa2;
  border-radius:30px;
  font-weight:700;
  padding:10px 32px;
  transition:.2s ease;
}

.login-google-btn:hover{
  background:#1e8fa2;
  color:#fff;
}

/* Hints */

.switch-hint{
  text-align:center;
  margin-top:10px;
  color:#555;
}

.switch-hint a{
  font-weight:700;
}

/* ===================== RESPONSIVE ===================== */


/* ==== FINE TUNE – REGISTER PARA DI SOBRANG TAAS ==== */

/* liitan nang kaunti yung loob ng card */
#panelRegister .register-form{
  padding: 0.95rem 1.3rem 0.85rem;   /* dati mas makapal */
}

/* bawasan gaps sa pagitan ng rows */
#panelRegister .register-form .field-grid{
  row-gap: 0.55rem;
  column-gap: 0.75rem;
}

/* medyo liitan lang font at height ng fields sa register side */
#panelRegister label{
  font-size: 0.9rem;
}

#panelRegister input,
#panelRegister select{
  font-size: 0.93rem;
  padding: 9px 10px;
}

/* actions (Go to Login / Register) – konting bawas space sa taas */
#panelRegister .register-form .form-actions{
  margin-top: 0.4rem;
  padding-top: 0.45rem;
}

/* divider sa ilalim ng form – konting sikip para may room sa Google button */
#panelRegister .or-divider{
  margin-top: 0.9rem;
  margin-bottom: 0.35rem;
}
/* =============== RESPONSIVE (TABLET / SMALL LAPTOP) =============== */
@media (max-width: 992px){
  /* gawing column: banner sa taas, form sa baba */
  body{
    display:block;
  }

  .container{
    flex-direction:column;
    min-height:100vh;
  }

  /* LEFT (banner) – medyo mas mababa at smaller text */
  .left-section{
    flex:0 0 auto;
    width:100%;
    height:230px;
    padding:18px 20px;
  }

  .left-content{
    max-width:100%;
    height:100%;
    justify-content:flex-end;
  }

  .logos img{
    height:52px;
  }

  .title-block{
    margin-top:8px;
    margin-bottom:18px;
  }

  .main-title{
    font-size:2.2rem;
  }

  .subtitle{
    font-size:1rem;
  }

  .reading-center{
    font-size:0.8rem;
  }

  /* RIGHT – full width, nasa ilalim, walang big shadow/overflow */
  .right-section{
    flex:0 0 auto;
    width:100%;
    max-width:100%;
    padding:16px 14px 24px;
    box-shadow:none;
    max-height:none;
    overflow-y:visible;
    justify-content:flex-start;
  }

  /* tabs + slider: centered, hindi dikit sa gilid */
  .auth-tabs,
  .auth-slider{
    max-width:520px;
    margin:0 auto 12px;
  }

  /* login at register card: same width, nasa gitna */
  #panelLogin .form-stack,
  #panelRegister .register-form{
    max-width:520px;
    margin:0 auto;
  }
}

/* =============== RESPONSIVE (PHONE / MAS MAKITID) =============== */
@media (max-width: 600px){
  .left-section{
    height:210px;
    padding:16px 16px;
  }

  .main-title{
    font-size:1.9rem;
  }

  .subtitle{
    font-size:0.9rem;
  }

  .auth-tabs,
  .auth-slider{
    max-width:100%;
    margin:0 auto 10px;
  }

  /* register fields: 1 column na lang para di masikip */
  .register-form .field-grid{
    grid-template-columns:1fr;
  }

  .field-grid .col-3,
  .field-grid .col-4,
  .field-grid .col-6,
  .field-grid .col-12{
    grid-column:1 / -1;
  }

  /* bawas padding konti sa loob ng cards */
  #panelLogin .form-stack,
  #panelRegister .register-form{
    padding:1.3rem 1.2rem 1.4rem;
  }
}