/**
 * Triptongo Login Customization
 * 
 * Table of Contents:
 * 1. CSS Variables
 * 2. Base Styles
 * 3. Main Container Layout
 * 4. Login Form
 * 5. Marketing Content (Col2)
 * 6. Responsive Styles
 */

@import url("https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap");

/* ============================================
   1. CSS Variables
   ============================================ */
:root {
  --triptongo-primary: #6b006e;
  --triptongo-secondary: #6c757d;
  --triptongo-background: #f8f9fa;
  --triptongo-text: #2b2b2b;
  --triptongo-button: #6ea6de;
  --triptongo-links-simples: #0052cc;
  --triptongo-hover-secundario: #c1dd2c;
}

/* ============================================
   2. Base Styles
   ============================================ */
body {
  background-color: var(--triptongo-primary);
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  font-family: "Noto Sans", sans-serif;
  color: var(--triptongo-text);
}

body.login {
  min-height: 100vh;
  overflow: hidden;
}

.button,
.button-secondary {
  color: var(--triptongo-secondary) !important;
}

.login .message,
.login .notice,
.login .success {
  border-left: 4px solid var(--triptongo-primary);
}

/* ============================================
   3. Main Container Layout
   ============================================ */
.tript-login-container {
  display: flex;
  min-height: 100vh;
  height: 100vh;
  width: 100vw;
  max-width: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

/* Column 1 - Login Form Side */
.tript-login-container .col1 {
  flex: 0 0 30%;
  padding: 2.5%;;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--triptongo-background);
  flex-direction: column;
  overflow-y: auto;
  overflow-x: hidden;
}

/* Column 2 - Marketing Content Side */
.tript-login-container .col2 {
  flex: 0 0 60%;
  padding: 2.5%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow-y: auto;
  overflow-x: hidden;
  background-image: url("../images/backgrounds/default.svg");
  background-repeat: no-repeat;
  background-position: top right;
  background-size: 50% auto;
}

.tript-login-container .col2::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
}

/* ============================================
   4. Login Form
   ============================================ */
/* Login form wrapper */
#login {
  width: 100% !important;
  max-width: 400px !important;
  padding: 2rem !important;
  margin: 0 !important;
  order: 1;
}

/* Logo */
.login h1 a {
  background-image: url("../images/logo.svg") !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
  background-size: contain !important;
  width: 60px !important;
  height: 60px !important;
  margin: 0 auto 1.5rem !important;
  padding: 0 !important;
}

/* Login form intro text */
.login-form-intro {
  text-align: center;
  margin-bottom: 1.5rem;
}

.login-form-intro h2 {
  color: var(--triptongo-primary);
  font-size: 2em;
}

.login-form-intro p {
  color: var(--triptongo-text);
  font-size: 1.1rem;
  line-height: 1.4;
  margin: 0;
}

/* Form layout and ordering */
#loginform {
  display: flex;
  flex-direction: column;
  border: none;
  border-radius: 10px;
}

#loginform p.login-username {
  order: 1;
}

#loginform p.user-pass-wrap {
  order: 3;
}

.submit {
  order: 4;
  margin-top: 1rem !important;
  margin-bottom: 1rem !important;
}

.forgetmenot {
  order: 5;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}

.forgetmenot input[type="checkbox"] {
  margin-right: 0.5rem !important;
  border-color: var(--triptongo-links-simples);
  box-shadow: none;
}

/* Input fields with icons */
.input-icon-wrapper {
  position: relative;
  display: block;
  width: 100%;
}

.input-icon {
  position: absolute;
  right: 12px;
  top: 40%;
  transform: translateY(-50%);
  z-index: 2;
  pointer-events: none;
}

.input-icon svg {
  fill: var(--triptongo-text);
}
.button span::before {
  color: var(--triptongo-text);
}

#user_login {
  padding-right: 40px !important;
}
#user_login,
#user_pass {
  border-color: #d8d8d8;
}
#user_login:focus,
#user_pass:focus {
  border-color: var(--triptongo-primary);
  box-shadow: none;
  border-width: 1px;
  background-color: #f6f1f6;
}
.login input[type="password"],
.login input[type="text"] {
  font-size: 18px;
  background: #fcfbfc;
}
.login .button.wp-hide-pw:focus {
  box-shadow: none;
  border: 1px solid var(--triptongo-primary);
}
/* Forgot password link */
.forgot-password-wrap {
  text-align: right;
  margin: 0.25rem 0 0.5rem;
  font-size: 13px;
  line-height: 1;
  position: absolute;
  top: -23px;
  right: 4px;
}

.forgot-password-wrap a {
  color: var(--triptongo-links-simples);
  text-decoration: none;
}

.forgot-password-wrap a:hover {
  color: var(--triptongo-primary);
}

/* Submit button */
#wp-submit {
  font-weight: 600;
  font-style: normal;
  font-size: 14px;
  color: var(--triptongo-background) !important;
  width: 100% !important;
  background: linear-gradient(
    135deg,
    var(--triptongo-primary) 0%,
    var(--triptongo-button) 96%
  ) !important;
  border: none !important;
  padding: 0.15rem !important;
  border-radius: 24px !important;
  cursor: pointer !important;
  transition: opacity 0.3s ease !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  font-family: "Noto Sans", sans-serif;
}

#wp-submit:hover {
  background: var(--triptongo-primary) !important;
}

/* Language switcher */
.language-switcher {
  width: 100%;
  max-width: 400px;
  text-align: center;
  order: 2;
}
.language-switcher #language-switcher {
  margin: 0;
}

/* Back to blog link */
#backtoblog {
  margin: 0.5em 0;
  padding: 0 !important;
}
#backtoblog a {
  color: var(--triptongo-links-simples) !important;
}
#backtoblog a:hover {
  color: var(--triptongo-primary) !important;
}

/* ============================================
   5. Marketing Content (Col2)
   ============================================ */

.tript-login-marketingcontent {
  max-width: 700px;
  text-align: center;
}

.tript-login-marketingcontent h2 {
  font-size: 3.5em;
  margin-bottom: 1.5rem;
  color: var(--triptongo-background);
  font-weight: bolder;
  line-height: 1.3;
}

.tript-login-marketingcontent .lead {
  font-size: 1.4em;
  line-height: 1.5;
  color: var(--triptongo-background);
  letter-spacing: 0.2px;
}

.tript-login-marketingcontent img {
  width: 350px;
}

/* Social media icons */
.tript-login-social {
  margin-top: 2rem;
  display: flex;
  justify-content: center;
  gap: 16px;
}

.tript-login-social svg {
  width: 20px;
  height: 20px;
  fill: var(--triptongo-background);
}
.tript-login-social a svg:hover {
  fill: var(--triptongo-hover-secundario)!important;
}

/* Call to action button */
.tript-call-to-action {
  margin-top: 8px;
}

.tript-call-to-action a {
  font-weight: 600;
  font-style: normal;
  font-size: 14px;
  color: var(--triptongo-background);
  width: 100% !important;
  max-width: 320px;
  background: linear-gradient(
    90deg,
    rgba(198, 8, 119, 1) 0%,
    rgba(133, 123, 194, 1) 70%,
    rgba(110, 166, 222, 1) 94%
  ) !important;
  border: none !important;
  padding: 0.2rem 0.5em !important;
  border-radius: 24px !important;
  cursor: pointer !important;
  transition: opacity 0.3s ease !important;
  text-transform: lowercase !important;
  letter-spacing: 0.5px !important;
  text-decoration: none;
}
.tript-call-to-action a::before {
  content: " ";
  background-image: url("../images/lupa-web-icon.svg");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-bottom: -3px;
}

.tript-call-to-action a:hover {
  background: var(--triptongo-hover-primario)!important;
  border: 1px solid #fff !important;
}

/* ============================================
   6. Responsive Styles
   ============================================ */
@media screen and (max-width: 782px) {
  .tript-login-container {
    flex-direction: column;
  }

  .tript-login-container .col1 {
    flex: 0 0 100%;
    padding: 1.5rem;
  }

  .tript-login-container .col2 {
    display: none;
  }

  #login {
    max-width: 100% !important;
    box-shadow: none;
    padding: 0.5em 2em !important;
  }
  .login form {
    margin: 1em;
    padding: 1em;
  }

  .tript-login-marketingcontent {
    padding: 1rem;
  }

  .tript-login-marketingcontent h2 {
    font-size: 1.5rem;
  }

    .forgetmenot input[type="checkbox"]{
    height: 20px;
    width: 20px;
  }
}

/* iOS height fix */
@supports (-webkit-touch-callout: none) {
  .tript-login-container {
    min-height: -webkit-fill-available;
  }
}