/* ===== TW Exclusive Login - Split Layout (Brand Red, refined) ===== */
:root{
  --tw-primary:#e11d2a;         /* red brand */
  --tw-primary-dark:#b91c1c;
  --tw-dark1:#0f172a;           /* deep navy */
  --tw-dark2:#0b1320;
  --tw-card:#ffffff;
  --tw-text:#0f172a;
  --tw-muted:#64748b;
  --tw-radius:28px;
  --tw-pill:999px;
}

body.login{
  background:#e9f0f5;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial;
}

/* ===== Shell ===== */
#login{
  width: 1040px;
  max-width: calc(100vw - 32px);
  margin-top: 5vh;
  position: relative;
  padding: 0;
}
#login::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius: var(--tw-radius);
  background: linear-gradient(180deg, var(--tw-dark1) 0%, var(--tw-dark2) 100%);
  box-shadow: 0 20px 60px rgba(2,8,23,.20);
  z-index:0;
}

/* Header / logo */
#login h1{ position:relative; z-index:3; padding: 24px 0 0 40px; margin:0; }
#login h1 a{
  background-image:url('../assets/logo.png');
  background-size: contain; background-repeat:no-repeat;
  width: 260px; height: 70px; margin: 0;
  text-indent:-9999px; overflow:hidden;
}

/* Welcome left pane */
.tw-welcome{
  position:absolute;
  left:0; top:84px; bottom:32px;
  width:40%;
  padding: 40px 36px;
  color:#e5e7eb;
  z-index:2;
  display:flex; flex-direction:column; justify-content:center;
}
.tw-brand-badge{
  display:inline-block;
  background: rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.24);
  padding:.35rem .6rem;
  border-radius:var(--tw-pill);
  font-size:12px; letter-spacing:.08em;
}
.tw-title{ margin:16px 0 10px; font-size:30px; font-weight:800; }
.tw-subtitle{ color:#cbd5e1; margin:0; line-height:1.5; }

/* Right white pane (holds the entire form) */
#login .tw-form-pane{
  position:absolute;
  right:0; top:84px; bottom:32px;
  width:60%;
  background: var(--tw-card);
  border-top-right-radius: var(--tw-radius);
  border-bottom-right-radius: var(--tw-radius);
  z-index:1;
  /* subtle pattern curve in the top-left like mock */
  /* simulate a curved notch by big border-radius on container overlap */
}

/* Reset WP notice boxes */
.login .message, .login .notice, .login .updated{
  background: transparent; border: 0; box-shadow:none; padding:0; margin:0;
}

/* Place the login form inside white pane */
#loginform, #lostpasswordform, #registerform{
  position: relative;
  z-index:3;
  background: transparent; border:0; box-shadow:none;
  width: 60%; margin-left: 40%;
  padding: 40px 48px;
}

/* Labels */
.login label{ color:#475569; font-weight:600; }

/* Inputs (big rounded pills) */
#login form .input, .login input[type=text], .login input[type=password]{
  background:#f1f5f9;
  border:1px solid #e2e8f0;
  color:var(--tw-text);
  border-radius: var(--tw-pill);
  padding: 14px 18px;
  font-size: 18px;
  box-shadow:none;
}
#login form .input:focus{
  outline:none;
  border-color: var(--tw-primary);
  box-shadow: 0 0 0 4px rgba(225,29,42,.18);
}

/* Remember + submit */
#login .forgetmenot, #login .submit{ margin-left: 40%; width:60%; padding: 0 48px; position:relative; z-index:3; }
#login .forgetmenot label{ color:#334155; font-weight:500; }
#login .submit .button-primary{
  background: var(--tw-primary);
  border-color: var(--tw-primary);
  color:#fff; border-radius: var(--tw-pill);
  padding: 12px 24px; font-weight:800;
}
#login .submit .button-primary:hover{ background: var(--tw-primary-dark); border-color: var(--tw-primary-dark); }

/* Links below the form */
#nav, #backtoblog{ margin-left:40%; width:60%; padding:0 48px; position:relative; z-index:3; }
.login #nav a, .login #backtoblog a{ color:#475569; }
.login #nav a:hover, .login #backtoblog a:hover{ color: var(--tw-primary); }

/* Footer */
.tw-login-footer{ text-align:center; margin-top: 14px; color:#64748b; }
.tw-login-footer a{ color: var(--tw-primary); text-decoration:none; }
.tw-login-footer a:hover{ text-decoration:underline; }

/* ===== Tablet ===== */
@media (max-width: 1023px){
  #login{ width: 860px; }
  .tw-welcome{ width:44%; }
  #login .tw-form-pane{ width:56%; }
  #loginform, #lostpasswordform, #registerform, #login .forgetmenot, #login .submit, #nav, #backtoblog{
    width:56%; margin-left:44%;
  }
}

/* ===== Mobile ===== */
@media (max-width: 640px){
  #login{ width: 100%; margin: 20px auto; }
  #login::before{ display:none; }
  /* Show a dark header band so the white logo still visible */
  .tw-welcome{
    position: relative; left:auto; top:auto; bottom:auto; width:auto;
    background: linear-gradient(180deg, var(--tw-dark1) 0%, var(--tw-dark2) 100%);
    color: #e5e7eb; border-radius: 16px 16px 0 0;
    padding: 20px 18px 12px; margin: 0 8px;
  }
  #login h1{ padding: 12px 18px 0 18px; }
  #login h1 a{ width: 190px; height: 56px; }
  #login .tw-form-pane{ display:none; }
  #loginform, #lostpasswordform, #registerform{
    width:auto; margin-left:0; padding: 14px 18px 18px;
    background:#fff; border:1px solid #e2e8f0;
    border-radius: 0 0 16px 16px; margin: 0 8px;
  }
  #login .forgetmenot, #login .submit, #nav, #backtoblog{
    margin-left:0; width:auto; padding: 0 18px; margin: 8px 8px 0;
  }
  #login form .input, .login input[type=text], .login input[type=password]{
    font-size: 16px; padding: 12px 16px;
  }
}


/* ==== Fixes: input invalid ring + password eye alignment ==== */
/* Align the eye toggle inside pill input */
.wp-pwd{ position: relative; overflow: visible; }
.wp-pwd .wp-hide-pw{
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  height: 36px;
  width: 36px;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  outline: none;
}
.wp-pwd .wp-hide-pw:focus{ outline: none; box-shadow: 0 0 0 3px rgba(225,29,42,.18); border-radius: 999px; }
.wp-pwd .dashicons{ line-height: 36px; }

/* Give room for the icon on the right */
.wp-pwd input[type="password"]{
  padding-right: 56px !important;
}

/* Remove default browser/WordPress red invalid ring */
.login form .input:invalid,
.login input[type=text]:invalid,
.login input[type=password]:invalid{
  box-shadow: none !important;
  border-color: #e2e8f0 !important;
}

/* Keep branded focus/invalid style (server-side) */
.login form .input[aria-invalid="true"]{
  border-color: var(--tw-primary) !important;
  box-shadow: 0 0 0 4px rgba(225,29,42,.18) !important;
}


/* ==== Fix: inputs should not overflow the white form pane ==== */
#loginform{
  box-sizing: border-box;
}
#loginform .input,
#loginform input[type=text],
#loginform input[type=password]{
  width: 100% !important;
  max-width: 100%;
  box-sizing: border-box;
}

/* Ensure submit/remember/nav also stay inside pane width */
#login .forgetmenot,
#login .submit,
#nav, #backtoblog{
  box-sizing: border-box;
}


/* ==== Final layout adjustments ==== */

/* 1. Center the password eye vertically */
.wp-pwd {
  position: relative;
}
.wp-pwd .wp-hide-pw {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  height: 32px;
  width: 32px;
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}
.wp-pwd input[type="password"] {
  padding-right: 52px !important;
}

/* 2. Remember me + Login button same row */
#login .login-submit {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-top: 16px;
}
#login .forgetmenot { margin: 0; display: flex; align-items: center; }
#login .submit .button-primary { margin: 0; }

/* 3. Align "Quay lại" with nav links, bottom-left */
#nav, #backtoblog {
  display: inline-block;
  margin: 0 8px 0 0;
}
#login .nav-bottom {
  display: flex;
  justify-content: flex-start;
  gap: 16px;
  margin-top: 12px;
  margin-left: 40%;
  width: 60%;
  padding: 0 48px;
}
#nav a, #backtoblog a {
  font-size: 13px;
  color: #475569;
}
#nav a:hover, #backtoblog a:hover { color: var(--tw-primary); }


/* ==== Curved notch effect for the white form pane ==== */
/* White pane with concave curve at its top-left corner */
#login::after{
  content:"";
  position:absolute;
  right:0; top:84px; bottom:32px;
  width:60%;
  z-index:1;
  border-top-right-radius: var(--tw-radius);
  border-bottom-right-radius: var(--tw-radius);
  /* Use radial-gradient to carve a notch (transparent) */
  background:
    radial-gradient(220px 160px at -30px 50px, transparent 0 70%, #ffffff 71%) ,
    #ffffff;
  box-shadow: inset 0 0 0 1px #eef2f7;
}

/* Ensure form sits above the white pane */
#loginform, #lostpasswordform, #registerform,
#login .forgetmenot, #login .login-submit, .nav-bottom, #nav, #backtoblog{ position: relative; z-index: 3; }

/* Tablet tune for notch position/size */
@media (max-width: 1023px){
  #login::after{
    width:56%;
    background:
      radial-gradient(200px 140px at -24px 44px, transparent 0 70%, #ffffff 71%) ,
      #ffffff;
  }
}

/* Mobile: hide the notch pane (stacked layout) */
@media (max-width: 640px){
  #login::after{ display:none; }
}

/* Disable notch */
#login::after{ display:none !important; }


/* === Final fix: Eye icon size and centering === */
.wp-pwd {
  position: relative;
}
.wp-pwd .wp-hide-pw {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  padding: 0;
  margin: 0;
  border: none;
  background: transparent;
  box-shadow: none;
  cursor: pointer;
}
.wp-pwd .wp-hide-pw .dashicons {
  font-size: 18px;
  line-height: 20px;
  width: 20px;
  height: 20px;
  text-align: center;
  color: #475569;
}
.wp-pwd .wp-hide-pw:hover .dashicons {
  color: var(--tw-primary);
}
.wp-pwd input[type="password"],
.wp-pwd input[type="text"] {
  padding-right: 48px !important;
}