@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;0,600;1,400&display=swap');

/* =========================================================
   THEXYZ Webmail Login (Bootstrap 4)
   ========================================================= */

:root{
  --xyz-primary:#768B1F;      /* Primary Green */
  --xyz-light:#C9E082;        /* Light Green */
  --xyz-pale:#E5ECAB;         /* Pale Green */
  --xyz-orange:#FC6700;       /* Orange */
  --xyz-pink:#FF3377;         /* Accent Pink */
  --xyz-text:#2d3811;
  --xyz-border:#e7e7e7;

  --xyz-radius: 16px;
  --xyz-shadow: 0 22px 70px rgba(15,23,42,.15);
  --xyz-shadow-soft: 0 14px 35px rgba(15,23,42,.08);
}

/* ---------------------------
   Page background / layout
--------------------------- */
body{
  margin:0;
  padding:0;
  font-family:'Open Sans','Segoe UI',Tahoma,Geneva,Verdana,sans-serif;
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  /* Cleaner gradient mix */
  background:
    radial-gradient(900px 600px at 10% 10%, rgba(201,224,130,.5), transparent 60%),
    radial-gradient(800px 520px at 90% 90%, rgba(255,51,119,.15), transparent 55%),
    linear-gradient(135deg, var(--xyz-pale) 0%, #ffffff 100%);
}

.login__wrap{
  width:100%;
  display:flex;
  justify-content:center;
  align-items:center;
  padding: 20px;
}

/* ---------------------------
   Card
--------------------------- */
.shade{
  background:#fff;
  width:100%;
  overflow:hidden;
  border-radius: var(--xyz-radius);
  border: 1px solid rgba(255,255,255,0.5);
  box-shadow: var(--xyz-shadow);
  min-height: 520px;
  position: relative;
}

/* ---------------------------
   Left brand column
--------------------------- */
.brand-col{
  background:
    radial-gradient(circle at top left, rgba(201,224,130,.3), transparent 70%),
    linear-gradient(160deg, var(--xyz-primary) 0%, #5d6e18 100%);
  color:#fff;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  padding: 46px 36px;
  text-align:center;
  position:relative;
}

.brand-col::after{
  content:"";
  position:absolute;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background: rgba(255,255,255,.05);
  top: -50px;
  left: -50px;
  pointer-events: none;
}

.brand-col h1{
  font-weight: 800;
  font-size: 2.8rem;
  letter-spacing: -1px;
  margin: 0;
  z-index:1;
}

.brand-col p{
  margin-top: 14px;
  font-size: 1.05rem;
  opacity: .92;
  z-index:1;
}

/* ---------------------------
   Right form column
--------------------------- */
.form-col{
  padding: 44px 40px;
  background:#fff;
  display:flex;
  flex-direction:column;
  justify-content:center;
}

/* Logo Circle */
.logo-circle{
  width: 90px;
  height: 90px;
  border-radius: 50%;
  margin: 0 auto 16px auto;
  box-shadow: 0 10px 25px rgba(118, 139, 31, 0.15);
  border: 2px solid rgba(118, 139, 31, 0.1);
  background: #fff;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow: hidden;
  transition: transform 0.3s ease;
}

.logo-circle:hover {
    transform: scale(1.05);
}

.logo-circle .logo-img{
  width: 70%;
  height: auto;
  object-fit: contain;
}

.controls{
  width:100%;
  max-width: 360px;
  margin: 0 auto;
}

.title{
  color: #1f2a12;
  font-weight: 800;
  margin-bottom: 8px;
  text-align:center;
  font-size: 1.75rem;
  letter-spacing: -0.5px;
}

.subtitle{
  text-align:center;
  margin: 0 0 25px;
  color: rgba(31,42,18,.6);
  font-size: 14px;
}

/* Alerts */
.alert{
  border-radius: 10px;
  font-size: 14px;
}

/* ---------------------------
   Inputs (Bootstrap 4 Input Groups)
   ---------------------------
   Logic: 
   1. The Group (.xyz-input) holds everything.
   2. The Icon (.xyz-addon) is always Left Round.
   3. The Input (.form-control) is Square (unless it's the last item).
   4. The Button (.xyz-eye-btn) is Right Round.
--------------------------- */

.form-group{
  margin-bottom: 20px;
}

/* 1. The Container */
.xyz-input{
  display: flex;
  box-shadow: 0 4px 10px rgba(0,0,0,0.03);
  border-radius: 50px; /* High radius for pill shape */
  transition: all 0.3s ease;
}

/* Focus State: Glow the whole container */
.xyz-input:focus-within {
  box-shadow: 0 0 0 4px rgba(255, 51, 119, 0.15);
}

/* 2. The Icon (Left Side) */
.xyz-addon {
  height: 50px;
  width: 50px;
  background: #fff;
  border: 2px solid #e0e0e0;
  border-right: none;
  border-radius: 50px 0 0 50px; /* Round Left only */
  color: #aaa;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

/* 3. The Input (Middle) */
.xyz-input .form-control {
  height: 50px;
  border: 2px solid #e0e0e0;
  border-left: none;
  border-right: none; /* Default to no right border for seamless look */
  border-radius: 0; /* Square by default */
  box-shadow: none;
  color: var(--xyz-text);
  font-weight: 600;
  font-size: 15px;
  background: #fff;
  transition: all 0.3s ease;
}

.xyz-input .form-control:focus {
    background: #fff; /* Prevent Bootstrap grey background */
}

/* IF input is the last item (Email), Round the right side and add border */
.xyz-input .form-control:last-child {
    border-radius: 0 50px 50px 0;
    border-right: 2px solid #e0e0e0;
}

/* 4. The Eye Button (Right Side) */
.xyz-eye-btn {
    height: 50px;
    width: 50px;
    background: #fff;
    border: 2px solid #e0e0e0;
    border-left: none;
    border-radius: 0 50px 50px 0; /* Round Right only */
    color: #aaa;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
}

.xyz-eye-btn:hover {
    color: var(--xyz-text);
}

.xyz-eye-btn:focus {
    outline: none;
}

/* COLOR LOGIC ON FOCUS */
.xyz-input:focus-within .xyz-addon,
.xyz-input:focus-within .form-control,
.xyz-input:focus-within .xyz-eye-btn {
    border-color: var(--xyz-pink);
}

.xyz-input:focus-within .xyz-addon i, 
.xyz-input:focus-within .xyz-eye-btn i {
    color: var(--xyz-pink);
}

/* ---------------------------
   Primary Button
--------------------------- */
.btn-primary-xyz{
  border:0;
  width:100%;
  padding: 14px 30px;
  border-radius: 50px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-size: 14px;
  color:#fff;
  background: var(--xyz-primary);
  box-shadow: 0 8px 20px rgba(118, 139, 31, 0.3);
  transition: all 0.3s ease;
}

.btn-primary-xyz:hover{
  background: var(--xyz-pink);
  box-shadow: 0 10px 25px rgba(255, 51, 119, 0.4);
  transform: translateY(-2px);
  color: white;
}

/* ---------------------------
   AWSelect / Dropdown
--------------------------- */
.awselect{
  margin-bottom: 20px;
  width:100%;
}

.awselect > .bg{
  min-height: 50px;
  border: 2px solid #e0e0e0;
  border-radius: 12px;
  background: #fff;
  transition: all 0.3s;
}

.awselect.animate > .bg{
  border-color: var(--xyz-pink);
  box-shadow: 0 0 0 3px rgba(255, 51, 119, 0.1);
}

.awselect .front_face{
  min-height: 50px;
  padding: 10px 20px !important;
  display:flex;
  align-items:center;
}

.awselect .front_face .content{
  color: var(--xyz-text) !important;
  font-weight: 600;
  font-size: 14px;
}

.awselect .front_face .icon{ display:none; }

.awselect .back_face{
  border-color: var(--xyz-pink);
  border-radius: 0 0 12px 12px;
}

.awselect .back_face ul li a{
  padding: 12px 20px !important;
  font-size: 14px;
  color: #555;
  transition: background .2s;
}

.awselect .back_face ul li a:hover,
.awselect .back_face ul li.selected a{
  background-color: rgba(255, 51, 119, 0.1);
  color: var(--xyz-pink);
}

/* Footer */
.login-footer{
  margin-top: 25px;
  text-align:center;
  font-size: 12px;
  color: #999;
}

/* Mobile Tweaks */
@media (max-width: 768px){
  .brand-col{ display:none; }
  .shade{ min-height: auto; }
  .form-col{ padding: 30px 20px; }
}