/* ==============================================
   LOGIN PAGE STYLES - Bootstrap Compatible
   ============================================== */

/* Main login page layout */
.page-template-page-access {
  background-color: var(--theme-light-color);
  min-height: 100vh;
}

/* Mobile background */
@media (max-width: 575px) {
  .page-template-page-access {
    background-image: var(--login-page-background-mobile);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
  }
}

/* Tablet background */
@media (min-width: 576px) and (max-width: 991px) {
  .page-template-page-access {
    background-image: var(--login-page-background-tablet);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
  }
}

/* Desktop background */
@media (min-width: 992px) {
  .page-template-page-access {
    background-image: var(--login-page-background);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
  }
}

/* Login panel container */
.login-panel {
  min-height: 100vh;
  padding: 0;
}

/* Login content box */
.login-content {
  background: var(--login-panel-bg);
  border-radius: 0;
  padding: min(8rem, 15vh) min(3rem, 10vw);
  margin: 0;
  width: 100%;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  height: 100dvh;
}

/* Small screens - add some padding and rounded corners */
@media (min-width: 576px) {
  .login-content {
    border-radius: 0;
    margin: 0 auto;
    min-height: auto;
    max-width: 500px;
  }
}

/* Medium screens - moderate padding */
@media (min-width: 768px) {
  .login-content {
    max-width: 600px;
  }
}

/* Large screens - full padding with overflow protection */
@media (min-width: 992px) {
  .login-content {
    max-width: var(--login-panel-max-width);
  }
}

/* Extra large screens - maintain proportions */
@media (min-width: 1200px) {
  .login-content {
    padding: min(8rem, 12vh) min(3rem, 8vw);
  }
}

/* Logo styling */
.login-content .img-fluid {
  width: 100%;
  height: auto;
  margin-bottom: 3rem;
}

/* Maintenance content */
.maintanance-content {
  margin-top: 1.25rem;
}

.maintanance-content p {
  color: var(--login-maintenance-text-color);
  font-size: var(--login-maintenance-font-size);
  letter-spacing: var(--login-maintenance-letter-spacing);
  line-height: var(--login-maintenance-line-height);
  margin-bottom: 0.625rem;
}

.maintanance-content p:nth-last-child(2) {
  margin-bottom: 0;
}

/* ==============================================
   ULTIMATE MEMBER FORM STYLES
   ============================================== */

/* Submit button */
.login-content .um-button {
  background: var(--button-bg) !important;
  color: var(--button-txt) !important;
  border: 1px solid var(--button-border) !important;
  border-radius: var(--button-border-radius, 8px) !important;
  font-size: var(--button-font-size, 16px);
  text-transform: var(--button-text-transform, uppercase) !important;
  letter-spacing: var(--button-letter-spacing, 0.1em);
  transition: all 0.5s ease;
  padding: 0.75rem 1rem;
  display: block;
  width: 100%;
  text-align: center;
  width: auto;
  min-width: 200px;
}

.login-content .um-button:hover,
.login-content .um-button.active {
  background: var(--button-hover-bg) !important;
  color: var(--button-hover-txt) !important;
  border: 1px solid var(--button-hover-border) !important;
  transform: translateY(-0.1rem);
}

.login-content .um-button:focus {
  background: var(--button-focus-bg) !important;
  color: var(--button-focus-txt) !important;
  border: 1px solid var(--button-focus-border) !important;
}

.login-content .um-button:disabled {
  background: var(--button-disabled-bg) !important;
  color: var(--button-disabled-txt) !important;
  border: 1px solid var(--button-disabled-border) !important;
  cursor: not-allowed;
}

.um-form input[type=number], .um-form input[type=password], .um-form input[type=search], .um-form input[type=tel], .um-form input[type=text] {
  border-radius: var(--border-radius, 8px) !important;
}

/* Form text and links */
.login-content,
.login-content p,
.login-content a {
  color: var(--login-text-color) !important;
  font-size: var(--login-text-size) !important;
  font-family: var(--body-font-family);
}

.login-content a {
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, 0.4);
  cursor: pointer;
}

/* Privacy policy field */
.login-content .um-field-privacy_policy {
  width: 100%;
  text-align: center;
  margin: 0 auto;
}

.login-content .um-field-privacy_policy .um-field-half {
  width: 100%;
}

.login-content .um-field-privacy_policy .um-field-checkbox-option {
  font-size: var(--login-text-size);
  color: var(--login-text-color) !important;
}

/* Form blocks */
.login-content .um-field-block {
  font-family: var(--body-font-family);
  text-align: center;
  color: var(--login-text-color);
}

/* Checkbox and radio styling */
.login-content .um-field-checkbox-option,
.login-content .um-field-radio-option {
  margin-left: var(--login-checkbox-margin);
}

.um:not(.um-admin):hover,
.login-content .um-icon-android-checkbox-outline-blank,
.login-content .um-icon-android-checkbox-outline {
  color: var(--theme-light-color);
}

.um-field-checkbox-state,
.um-field-radio-state {
  top: 2px !important;
  left: 0 !important;
}

.um-field-checkbox-state i,
.um-field-radio-state i {
  font-size: var(--login-checkbox-icon-size) !important;
}

.um-login .um-field-checkbox:hover i,
.um-field-radio:hover i {
  color: unset;
}
/* ==============================================
   ERROR HANDLING STYLES
   ============================================== */

/* Error messages */
.login-content .um-notice.err,
.login-content .um-field-error {
  background-color: var(--login-error-bg) !important;
  color: var(--login-error-color) !important;
  font-size: var(--login-error-font-size) !important;
  font-family: var(--body-font-family);
  line-height: 1.25 !important;
  padding: 0.75rem !important;
  border-radius: var(--border-radius);
  position: relative;
  margin-bottom: 1rem;
}

.login-content .um-notice.err {
  padding-right: 2rem !important;
}

/* Error arrow */
.um-notice.err::before,
.um-error-code-invalid_username::before,
.um-error-code-did_not_accept::before,
.um-error-code-invalid_email::before {
  content: '';
  position: absolute;
  bottom: -6px;
  left: 10px;
  border-top: 10px solid var(--login-error-bg);
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
}

.login-content .um-field-arrow {
  color: var(--login-error-bg) !important;
}

.login-content .um-notice i {
  right: 0.75rem !important;
  top: 0.25rem !important;
}

/* ==============================================
   TERMS AND CONDITIONS STYLING
   ============================================== */

/* Terms text blocks */
.login-content .um-field-type_block,
.login-content .um-field-area .um-field-checkbox-option {
  font-family: var(--inconf-login-terms-font, var(--body-font-family));
  font-size: var(--inconf-login-terms-size, var(--login-text-size)) !important;
  font-weight: var(--inconf-login-terms-weight, 400);
  line-height: var(--inconf-login-terms-height, 1.4);
  letter-spacing: var(--inconf-login-terms-spacing, normal);
  text-align: var(--inconf-login-terms-align, center);
  color: var(--inconf-login-terms-color, var(--login-text-color)) !important;
}

/* Alternative terms styling */
.login-content:last-child div > p {
  font-family: var(--inconf-login-terms2-font, var(--body-font-family));
  font-size: var(--inconf-login-terms2-size, var(--login-text-size)) !important;
  font-weight: var(--inconf-login-terms2-weight, 400);
  line-height: var(--inconf-login-terms2-height, 1.4);
  letter-spacing: var(--inconf-login-terms2-spacing, normal);
  text-align: var(--inconf-login-terms2-align, center);
}

/* ==============================================
   RESPONSIVE DESIGN ADJUSTMENTS
   ============================================== */

@media (max-width: 575px) {
  .login-content .img-fluid {
    max-width: 280px;
  }
  
  .login-content .um-field-checkbox-option,
  .login-content .um-field-radio-option {
    margin-left: 1rem;
  }
}

@media (min-width: 576px) and (max-width: 991px) {
  .login-content .um-field-privacy_policy {
    width: 100%;
  }
}