/* Make page fill the viewport */
html, body {
  height: 100%;
  margin: 0;
}

/* Two–column wrapper */
.auth-two-col {
  display: flex;
  min-height: 100vh;       /* always at least full screen height */
}

/* Left column: artwork */
.col-artwork {
  flex: 1 1 50%;
  background-color: #0FEB73;
  color: #003737;
  display: flex;
  align-items: center;
  justify-content: center;
  /* optional padding if you’ll add text/art later */
  padding: 16px 24px;
  box-sizing: border-box;

  position: relative;      /* needed for the ::before “background box” */
  overflow: hidden;        /* just in case */
}

/* The centered square background illustration */
.col-artwork::before {
  content: "";
  position: absolute;
  inset: 80px;  /* 80px from all sides = your desired padding */
  
  background-image: url("https://storage.googleapis.com/plag-cdn/illustrations/cover_image_v2.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain; /* keep it square, fit inside the box */
  
  pointer-events: none;     /* don't block clicks on content */
}

/* Right column: form */
.col-form {
  flex: 1 1 50%;
  background-color: #ffffff;
  /* center the inner container */
  display: flex;
  align-items: center;
  justify-content: center;
  /* if screen is not very high, enable vertical scroll */
  overflow-y: auto;
  padding: 16px 24px;
  box-sizing: border-box;
}

/* Inner form container */
.col-form-container {
  width: 360px;       /* fixed content width */
  max-width: 100%;    /* don’t break on very narrow screens */
  margin: 0 auto;
}

/* Optional: center text in brand/footer/content inside */
.col-form-container .auth-brand,
.col-form-container .auth-footer {
  text-align: left;
  font-size: 12px;
}

.col-form-container .auth-footer {
  margin-top: 24px;
}

.col-form-container .auth-footer p {
  margin: 0;
  color: #335F5F;
}

/* MOBILE: hide artwork, form takes full width */
@media (max-width: 768px) {
  .col-artwork {
    display: none;
  }

  .col-form {
    flex: 1 1 100%;
    width: 100%;
  }
}

/* Styles */

html, body, .h1,.h2,.h3,.h4,.h5,.h6,h1,h2,h3,h4,h5,h6 {
    font-family: Poppins, Arial, Helvetica, sans-serif;
    font-weight: 500;
}
body {
  font-size: 14px;
}
h1 {
  font-size: 40px;
}
.text-center {
  text-align: center;
}
a {
  color: #3e78b2;
}
a:hover, a:focus {
    color: #0FEB73;
}
b, strong {
    font-weight: 600;
}
.auth-brand {
  margin-bottom: 40px;
}
.truncate {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.alert-info {
    color: #003737;
    background-color: #fff;
    border-color: #003737;
}

.alert-danger {
    color: #003737;
    background-color: #ffbebe;
    border-color: #ffbebe;
}

.alert-success {
    color: #003737;
    background-color: #82a88c;
    border-color: #82a88c;
}

.alert-warning {
    color: #003737;
    background-color: #fff2a5;
    border-color: #fff2a5;
}

/* Inputs */
input,
textarea,
select {
  font-family: "Poppins", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 14px;
  line-height: 20px;
  padding: 13.5px 13px;              /* vertical | horizontal */
  height: auto;
  width: 100%;
  border-radius: 8px;
  border: 1px solid #003737;
  color: #003737;                    /* text color */
  background-color: #ffffff;
  box-sizing: border-box;
  margin-bottom: 8px;
  outline: none;                     /* we’ll create our own focus outline */
}

/* Placeholder color */
input::placeholder,
textarea::placeholder {
  color: #9A9EB2;
}

/* (Optional) Older vendor-prefixed placeholders */
input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
  color: #9A9EB2;
}
input::-moz-placeholder,
textarea::-moz-placeholder {
  color: #9A9EB2;
}
input:-ms-input-placeholder,
textarea:-ms-input-placeholder {
  color: #9A9EB2;
}
input:-moz-placeholder,
textarea:-moz-placeholder {
  color: #9A9EB2;
}

/* Focus state: keep 1px border, change color + add soft outline */
input:focus,
textarea:focus,
select:focus {
  border-color: #0FEB73;                          /* 1px border in green */
  box-shadow: 0 0 0 3px rgba(15, 235, 115, 0.25); /* soft “fatter” outline */
}

/* Labels */
label {
  display: block;
  margin-bottom: 8px;
  font-family: "Poppins", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;                 /* medium weight */
  color: #003737;
}

/* Buttons */


.plag-button {
    display: inline-flex;
    align-items: center; /* centers content vertically */
    justify-content: center; /* optional if you want horizontal centering */
    width: fit-content; /* <== This is the key */
    gap: 4px;
    
    background: #003737;
    border: 1px solid #003737;
    color: #fff;
    border-radius: 50px;
    text-decoration: none!important;
    padding: 0 16px;
    font-weight: 600;
    font-size: 12px;
    line-height: 16px;
    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
    height: 32px;
    box-sizing: border-box;
    cursor: pointer;
    font-family: "Poppins", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
}

.plag-button:focus {    
    background: #003737;
    border: 1px solid #003737;
    color: #fff;
}

.plag-button:hover, .plag-button:active {
    background: #335F5F;
    border: 1px solid #335F5F;
    color: #fff;
}

.plag-button.plag-button-outline, .plag-button.plag-button-outline:focus {
    background: transparent;
    border: 1px solid #003737;
    color: #003737;
}

.plag-button.plag-button-outline:hover, .plag-button.plag-button-outline:active {
    background: #335F5F;
    border: 1px solid #335F5F;
    color: #fff;
}

.plag-button-danger, .plag-button-danger:focus {
    background: #FF6360;
    border-color: #FF6360;
    color: #fff;
}
.plag-button-danger:hover, .plag-button-danger:active {
    background: #B73D31;
    border: 1px solid #B73D31;
    color: #fff;
}
.plag-button-secondary, .plag-button-secondary:focus {
    background: #0feb73;
    border: 1px solid #0feb73;
    color: #003737;
}
.plag-button-secondary:hover, .plag-button-secondary:active {
    background: #003737;
    border: 1px solid #003737;
    color: #fff;
}

.plag-button-secondary-dark, .plag-button-secondary-dark:focus {
    background: #0feb73;
    border: 1px solid #0feb73;
    color: #003737;
}
.plag-button-secondary-dark:hover, .plag-button-secondary-dark:active {
    background: #3FEF8F;
    border: 1px solid #3FEF8F;
    color: #003737;
}

.plag-button-grey, .plag-button-grey:focus {
    background: #CCD6D5;
    border: 1px solid #CCD6D5;
    color: #003737;
}
.plag-button-grey:hover, .plag-button-grey:active {
    background: #003737;
    border: 1px solid #003737;
    color: #fff;
}

.plag-button-faded, .plag-button-faded:focus, .plag-button-faded:hover, .plag-button-faded:active {
    background: #87f5b9;
    border: 1px solid #87f5b9;
    color: #88898C;
}

.plag-button.plag-button-outline-grey, .plag-button.plag-button-outline-grey:focus {
    background: transparent;
    border: 1px solid #c8c8c9;
    color: #003939;
}

.plag-button.plag-button-outline-grey:hover, .plag-button.plag-button-outline-grey:active {
    background: #c8c8c9;
    border: 1px solid #c8c8c9;
    color: #003939;
}

.plag-button.plag-button-outline-grey-reverse, .plag-button.plag-button-outline-grey-reverse:focus {
    background: #c8c8c9;
    border: 1px solid #c8c8c9;
    color: #003939;
}

.plag-button.plag-button-outline-grey-reverse:hover, .plag-button.plag-button-outline-grey-reverse:active {
    background: transparent;
    border: 1px solid #c8c8c9;
    color: #003939;
}

.plag-button.plag-button-outline-green, .plag-button.plag-button-outline-green:focus,
.plag-button.plag-button-outline-green:hover, .plag-button.plag-button-outline-green:active {
    background: rgba(0, 181, 18, 0.1);
    border: 1px solid #00B512;
    color: #003737;
}

.plag-button-primary[disabled], .plag-button-primary[disabled]:focus,
.plag-button-primary[disabled]:hover, .plag-button-primary[disabled]:active {
    background: #003737;
    border: 1px solid #003737;
    color: #97979a;
}

.plag-button-md {
    font-size: 14px!important;
    line-height: 20px!important;
    height: 40px!important;
    padding: 0 20px!important;
}

.plag-button-lg {
    font-size: 14px!important;
    line-height: 20px!important;
    height: 48px!important;
    padding: 0 28px!important;
}

.plag-button-xl {
    font-size: 16px!important;
    line-height: 24px!important;
    height: 64px!important;
    text-transform: uppercase;
    padding: 0 40px!important;
}

.plag-button.btn-block {
    width: 100%;
}

.plag-button-inactive, .plag-button-inactive:focus, .plag-button-inactive:hover, .plag-button-inactive:active {
    background: #EBECF2;
    color: #696C80;
    border: 1px solid #EBECF2;
    cursor: not-allowed;
}

.auth-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 16px 0; /* adjust spacing as needed */
    font-family: "Poppins", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 12px;
    line-height: 1;
    color: #9A9EB2; /* text color, tweak if you want */
}

.auth-divider::before,
.auth-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background-color: #EBECF2; /* line color */
}

.auth-divider span {
    padding: 0 8px; /* 8px around “or” */
    background-color: transparent; /* keep background clean */
}

/* Base color for Facebook */
:root {
    --fb-color: #1877F2;
}

/* Outline Facebook button */
.plag-button.plag-button-facebook-outline,
.plag-button.plag-button-facebook-outline:visited {
    background: transparent;
    border: 1px solid var(--fb-color);
    color: var(--fb-color);
}

/* Hover / active: filled Facebook blue */
.plag-button.plag-button-facebook-outline:hover,
.plag-button.plag-button-facebook-outline:active {
    background: var(--fb-color);
    border-color: var(--fb-color);
    color: #ffffff;
}

/* Focus: keep 1px border, add soft Facebook outline */
.plag-button.plag-button-facebook-outline:focus {
    background: transparent;
    border: 1px solid var(--fb-color);
    color: var(--fb-color);
    outline: none;
    box-shadow: 0 0 0 3px rgba(24, 119, 242, 0.25); /* Facebook blue @ 25% */
}

.register-divider {
  margin: 32px 0;
  border: 0;                          /* remove default */
  border-top: 1px solid #EBECF2;      /* line color */
}

.register-row {
    display: flex;
    align-items: center;
    width: 100%;
    gap: 8px;                    /* gaps between the 3 columns */
    text-decoration: none;
    color: #3e78b2;              /* inherit your link color */
}

.register-row:hover,
.register-row:focus {
    color: #0FEB73;              /* same hover color as other links */
}

/* 1st column: flexible, left-aligned */
.register-text {
    flex: 1 1 auto;
    text-align: left;
    white-space: nowrap;
}

/* 2nd column: flexible, right-aligned "Sign up" */
.register-signup {
    flex: 0 1 auto;
    text-align: right;
    white-space: nowrap;
    font-weight: 600;
}

/* 3rd column: fixed 20x20 icon */
.register-icon {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    display: block;
}


/* Wrapper row: text on left, switch on right */
.reg-type-switch {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 24px;
}

/* Label text */
.reg-type-label {
    font-family: "Poppins", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 14px;
    line-height: 20px;
    color: #003737;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Toggle wrapper */
.reg-type-toggle {
    position: relative;
    display: inline-block;
    width: 40px;
    height: 20px;
    flex: 0 0 auto;
}

/* Hide the real checkbox */
.reg-type-toggle input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

/* Slider background */
.reg-type-slider {
    position: absolute;
    inset: 0;
    cursor: pointer;
    background: #EBECF2;
    border-radius: 999px;
    transition: background-color 0.2s ease;
}

/* Slider knob */
.reg-type-slider::before {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    background: #ffffff;
    border-radius: 50%;
    transition: transform 0.2s ease;
}

/* Checked state: dark green background + knob to the right */
.reg-type-toggle input:checked + .reg-type-slider {
    background: #003737;
}

.reg-type-toggle input:checked + .reg-type-slider::before {
    transform: translateX(20px); /* 40 - 16 - 4 = 20 */
}

/* Focus ring for keyboard users */
.reg-type-toggle input:focus + .reg-type-slider {
    box-shadow: 0 0 0 3px rgba(0, 55, 55, 0.25);
}

.help-block {
    font-size: 12px;
    color: #FF6360;
    margin: 0;
    margin-top: -4px;
    padding-bottom: 4px;
}

.text-success {
  color: #25D575;
}

/* Artwork */

.col-artwork.artwork-euro-boy-student::before,
.col-artwork.artwork-euro-couple::before {
  content: none;
}

.col-artwork.artwork-euro-boy-student {
  background-color: #003737;
  background-image: url("https://storage.googleapis.com/plag-cdn/ab_prod/plag_cover_eu_student.webp");
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

.col-artwork.artwork-euro-couple {
  background-color: #003737;
  background-image: url("https://storage.googleapis.com/plag-cdn/ab_prod/plag_cover_eu_two_students.webp");
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}