/* ==========================================================================
   LOGIN (page-specific)
   ========================================================================== */
#page-auth-becasauth-login {
  --cta-red-500: #C85545;
  --cta-red-600: #C1453A;
  --cta-red-700: #B33E34;
  --focus-ring-red: rgba(193, 69, 58, .24);
  --focus-ring-gray: rgba(208, 213, 221, .55);
}

/* Flatten wrappers */
#page-auth-becasauth-login #page,
#page-auth-becasauth-login #page-content,
#page-auth-becasauth-login #region-main-box,
#page-auth-becasauth-login #region-main {
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
#page-auth-becasauth-login .container-fluid,
#page-auth-becasauth-login .row {
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Break out of Boost’s container */
#page-auth-becasauth-login .login-container {
  max-width: none !important;
  width: 100% !important;
  padding: 0 !important;
  margin-bottom: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
#page-auth-becasauth-login .login-wrapper {
  /* Kill the theme's fixed grid track and center with flex */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 100vh !important;
}

/* The theme forces a 405px grid column on these. Let them expand. */
#page-auth-becasauth-login .login-container,
#page-auth-becasauth-login .main-content {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
}

/* Just in case their CSS keeps grid-template definitions around */
#page-auth-becasauth-login .login-wrapper,
#page-auth-becasauth-login .login-container {
    grid-template-columns: none !important;
    grid-template-rows: none !important;
}

/* Background */
#page-auth-becasauth-login .becas-shell {
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  position: relative;
  background: linear-gradient(180deg, #f3f5f7 0%, #e9ecef 100%);
}

/* Card/grid */
#page-auth-becasauth-login .becas-card {
  position: relative;
  width: min(820px, calc(100% - 48px));
  background: transparent !important;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 24px 64px rgba(16, 24, 40, 0.15);
  display: grid;
  grid-template-columns: 33% 67%;
}
#page-auth-becasauth-login .becas-media {
  grid-column: 1;
  min-height: 420px;
  background-image: var(--login-bg);
  background-position: center;
  background-size: cover;
  z-index: 0;
  border-radius: 20px 0 0 20px !important;
  margin-right: -20px;
}
#page-auth-becasauth-login .becas-form {
  grid-column: 2;
  padding: 40px 48px;
  display: flex; flex-direction: column; justify-content: center;
  position: relative;
  z-index: 1;
  background: transparent !important;
  overflow: visible;
}
#page-auth-becasauth-login .becas-form::before {
  content: ""; position: absolute; inset: 0;
  border-radius: 20px;
  background: #fff; z-index: -1;
}
@media (max-width: 992px) { #page-auth-becasauth-login .becas-form::before { border-radius: 20px; } }

/* Brand */
#page-auth-becasauth-login .becas-brand { text-align: center; margin-bottom: 16px; }
#page-auth-becasauth-login .becas-brand .becas-logo {
  display: inline-block; height: 72px; aspect-ratio: 205/105; width: auto;
  background-color: #C1453A;
  -webkit-mask-image: var(--logo-url); mask-image: var(--logo-url);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center;   mask-position: center;
  -webkit-mask-size: contain;      mask-size: contain;
}

/* Inputs / unified pill */
#page-auth-becasauth-login .becas-pill { border-radius: 999px; }
#page-auth-becasauth-login .input-group { width: 100%; }
#page-auth-becasauth-login .input-group .form-control { height: 44px; }
#page-auth-becasauth-login .input-group.becas-pill {
  border: 1px solid #E1E6ED; border-radius: 999px; overflow: hidden; background: #fff;
}
#page-auth-becasauth-login .input-group.becas-pill:focus-within {
  border-color: #D0D5DD; box-shadow: 0 0 0 4px var(--focus-ring-gray);
}
#page-auth-becasauth-login .input-group.becas-pill .input-group-text,
#page-auth-becasauth-login .input-group.becas-pill .form-control,
#page-auth-becasauth-login .input-group.becas-pill .btn {
  border: 0 !important; background: transparent !important; box-shadow: none !important;
}
#page-auth-becasauth-login .input-group-prepend,
#page-auth-becasauth-login .input-group-append { margin: 0 !important; }
#page-auth-becasauth-login .input-group .form-control:focus { box-shadow: none; }
#page-auth-becasauth-login .input-group .input-group-text i,
#page-auth-becasauth-login .becas-eye i { color: #98A2B3; }

/* Rhythm and spacing */
#page-auth-becasauth-login .becas-form form .input-group { margin-bottom: 12px; }
#page-auth-becasauth-login .becas-form form > .text-center.mb-3:not(.form-group) { margin-bottom: 14px !important; }
#page-auth-becasauth-login .becas-form form > .form-group.mb-3.text-center { margin-bottom: 12px !important; }
#page-auth-becasauth-login .becas-submit.btn { height: 44px; font-weight: 700; }
#page-auth-becasauth-login .becas-form .btn.w-100,
#page-auth-becasauth-login .becas-form a.btn.w-100 { width: 100%; }
#page-auth-becasauth-login .becas-form .btn {
  height: 44px; padding: 0 16px; display: inline-flex; align-items: center; justify-content: center;
}
@media (min-width: 992px) {
  #page-auth-becasauth-login .becas-brand { margin-bottom: 40px !important; }
  #page-auth-becasauth-login .becas-form .text-center.mb-3 { margin-bottom: 40px !important; }
  #page-auth-becasauth-login .becas-form form > .text-center:last-child { margin-bottom: 40px !important; }
  #page-auth-becasauth-login .becas-form form > .text-center.mb-3:not(.form-group) { margin-bottom: 40px !important; }
  #page-auth-becasauth-login .becas-form .btn.w-100,
  #page-auth-becasauth-login .becas-form a.btn.w-100 { width: 55% !important; }
}

/* Buttons */
#page-auth-becasauth-login .becas-form .becas-btn--primary.btn {
  color: #fff !important; border: 0 !important; font-weight: 700 !important;
  background-image: linear-gradient(180deg, var(--cta-red-500) 0%, #C04439 100%) !important;
  background-color: #C1453A !important;
  box-shadow: 0 8px 24px rgba(193,69,58,.35) !important;
  transition: transform .03s ease, filter .15s ease, box-shadow .15s ease;
}
#page-auth-becasauth-login .becas-form .becas-btn--primary.btn:hover { filter: brightness(1.04); }
#page-auth-becasauth-login .becas-form .becas-btn--primary.btn:active { transform: translateY(1px); filter: brightness(0.98); }
#page-auth-becasauth-login .becas-form .becas-btn--primary.btn:focus-visible {
  outline: none; box-shadow: 0 0 0 4px var(--focus-ring-red), 0 8px 24px rgba(193,69,58,.35) !important;
}
#page-auth-becasauth-login .becas-form .becas-btn--secondary.btn {
  color: var(--cta-red-700) !important; background: #fff !important; border: 1px solid var(--cta-red-700) !important;
  font-weight: 400; box-shadow: none !important;
  transition: transform .03s ease, background-color .15s ease, box-shadow .15s ease;
}
#page-auth-becasauth-login .becas-form .becas-btn--secondary.btn:hover { background: #FFF6F5 !important; }
#page-auth-becasauth-login .becas-form .becas-btn--secondary.btn:active { transform: translateY(1px); }
#page-auth-becasauth-login .becas-form .becas-btn--secondary.btn:focus-visible {
  outline: none; box-shadow: 0 0 0 4px var(--focus-ring-red);
}

/* WhatsApp button (login) */
#page-auth-becasauth-login .becas-help {
  position: fixed; right: 100px; bottom: 100px; z-index: 900;
  display: inline-flex; align-items: center; gap: 10px;
  height: 48px; font-weight: 700; border-radius: 999px;
  background: linear-gradient(to bottom, #4aa947 0%, #357a32 100%);
  border: 1px solid #357a32; padding: 0 0 0 16px; overflow: hidden;
  /* Enforce white text on the button; theme overrides can change this otherwise */
  color: #fff !important;
  flex-wrap: nowrap;
}
#page-auth-becasauth-login .becas-help .wa-label {
  line-height: 1;
  color: #fff !important; /* keep the label white regardless of theme rules */
  white-space: nowrap;
}
#page-auth-becasauth-login .becas-help .wa-icon {
  width: 46px; height: 46px; margin-left: 0; margin-right: -1px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: #357a32; border: 1px solid #357a32;
}
/* Support FA4 (.fa), FA5 (.fab) and FA6 (.fa-brands) */
#page-auth-becasauth-login .becas-help .wa-icon .fa,
#page-auth-becasauth-login .becas-help .wa-icon .fab,
#page-auth-becasauth-login .becas-help .wa-icon .fa-brands {
  color: #fff; font-size: 26pt;
}
@media (max-width: 992px) {
  #page-auth-becasauth-login .becas-card { display: block; }
  #page-auth-becasauth-login .becas-media { display: none; }
  #page-auth-becasauth-login .becas-form { padding: 32px; }
  #page-auth-becasauth-login .becas-form { padding: 100px 20px 80px 20px; }
}
#page-auth-becasauth-login .btn-footer-popover { display: none; }
#page-auth-becasauth-login #page-footer,
#page-auth-becasauth-login .footer-popover,
#page-auth-becasauth-login .logininfo,
#page-auth-becasauth-login .footerinfo,
#page-auth-becasauth-login .sitelink,
#page-auth-becasauth-login .homelink,
#page-auth-becasauth-login .tool_mobile_app,
#page-auth-becasauth-login .helplink {
  display: none !important;
}
@media (max-width: 576px) {
  #page-auth-becasauth-login .becas-help { left: 50%; right: auto; transform: translateX(-50%); }
}

/* Motion safety */
@media (prefers-reduced-motion: reduce) {
  #page-auth-becasauth-login * { transition: none !important; animation: none !important; }
}