@import url('https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400&display=swap');

:root {
  --primary-hover: #597da6;
  --secondary-color: #7a858c;
  --secondary-hover: #5b6267;
  --accent-color: #95aecb;
  --success-color: #6ed8a7;
  --warning-color: #fbcf4b;
  --danger-color: #c51616;
  --info-color: #0dcaf0;
  --bg-color: #ffffff;
  --bg-secondary: #f8f9fa;
  --bg-dark: #212529;
  --text-primary: #212529;
  --text-secondary: #769bc5;
  --text-muted: #adb5bd;
  --text-light: #ffffff;
  --border-color: #dee2e6;
  --border-light: #e9ecef;
  --font-primary: rubik;
  --font-heading: rubik;
  --font-monospace: rubik;
  --font-size-base: 1.00rem;
  --font-size-h1: 2.50rem;
  --font-size-h2: 2.00rem;
  --font-size-h3: 1.75rem;
  --font-size-h4: 1.50rem;
  --font-size-h5: 1.25rem;
  --font-size-h6: 1.00rem;
  --font-size-small: 0.88rem;
  --font-weight-normal: 300;
  --font-weight-bold: 700;
  --font-weight-heading: 600;
  --font-weight-h1: 600;
  --font-weight-h2: 600;
  --font-weight-h3: 600;
  --font-weight-h4: 600;
  --font-weight-h5: 600;
  --font-weight-h6: 600;
  --line-height-base: 1.50;
  --line-height-heading: 1.20;
  --container-max-width: 1320px;
  --container-md-width: 960px;
  --container-sm-width: 720px;
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;
  --spacing-xxl: 48px;
  --border-radius-sm: 4px;
  --border-radius-md: 8px;
  --border-radius-lg: 12px;
  --border-radius-xl: 16px;
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
  --shadow-md: 0 4px 6px rgba(0,0,0,0.1);
  --shadow-lg: 0 10px 15px rgba(0,0,0,0.1);
  --btn-padding-sm: 6px 12px;
  --btn-padding-md: 10px 20px;
  --btn-padding-lg: 14px 28px;
  --btn-border-width: 1px;
  --btn-border-radius: 0px;
  --btn-transition: 0.15s;
}

/* Font family overrides */
body, p, span, li, td, th, input, select, textarea, button {
  font-family: 'rubik', sans-serif !important;
}
h1, h2, h3, h4, h5, h6, .cms-text-overlay-heading {
  font-family: 'rubik', sans-serif !important;
}

/* Custom CSS */
    /* ── Layout ─────────────────────────────────────────── */
   .split-layout {
       display: flex;
       height: 100vh;
       width: 100vw;
   }

   /* ── Left: full-screen image panel ──────────────────── */
   .image-panel {
       flex: 1;
       overflow: hidden;
       position: relative;
       background: #000;
   }

       .image-panel > img {
           position: absolute;
           top: 0;
           left: 0;
           width: 100%;
           height: 100%;
           object-fit: cover;
           object-position: center center;
       }

   .image-footer {
       position: absolute;
       bottom: 0;
       left: 0;
       width: 100%;
       padding: 14px 24px;
       color: #ffffff;
       font-family: 'Rubik', sans-serif;
       font-weight: 300;
       font-size: 13px;
       background: linear-gradient(transparent, rgba(0,0,0,0.45));
       box-sizing: border-box;
   }

   /* ── Right: login panel ─────────────────────────────── */
   .login-panel {
       width: 420px;
       min-width: 420px;
       background: #ffffff;
       display: flex;
       flex-direction: column;
       padding: 90px 45px 60px 45px;
       box-sizing: border-box;
       overflow-y: auto;
   }

   /* Logo link — block so it sits flush left with form content */
   .logo-link {
       display: block;
       line-height: 0px;
   }

   /* Logo — reduced top gap so form sits higher */
   .logo {
       display: block;
       padding-top: 20px;
       padding-bottom: 50px;
       padding-left: 0px!important;
       max-width: 90%;
   }

   /* Heading — Rubik Light 16px */
   .login-heading {
       font-family: 'Rubik', sans-serif;
       font-weight: 300;
       font-size: 16px;
       margin: 30px 0 20px 0;
       color: #1a1a1a;
   }

   /* Input fields — 336×32, Rubik Medium 14px, lightgray bg */
   .field-group {
       margin-bottom: 20px;
   }

   .login_inputs {
       display: block;
       width: 336px;
       height: 32px;
       font-family: 'Rubik', sans-serif;
       font-weight: 400;
       font-size: 14px;
       background-color: #eff0f1;
       color: #555;
       padding: 0 12px;
       border: none;
       border-radius: 0px;
       outline: none;
       box-sizing: border-box;
   }

       .login_inputs::placeholder {
           color: #bac0c4;
           font-weight: 500;
       }

   /* "Can't access your account?" — 42px margin-top, Rubik Light 14px */
   .forgot-link {
       margin-top: 42px;
   }

       .forgot-link a {
           font-family: 'Rubik', sans-serif;
           font-weight: 300;
           font-size: 14px;
           color: #87acd6;
           text-decoration: none;
       }

           .forgot-link a:hover {
               text-decoration: underline;
           }

   /* SIGN IN button — 110×31, #87acd6, Rubik SemiBold 14px */
   .button-row {
       margin-top: 14px;
       margin-bottom: 45px;
       display: flex;
       align-items: center;
       gap: 12px;
   }

   .loginButton {
       font-family: 'Rubik', sans-serif;
       font-weight: 600;
       font-size: 14px;
       width: 110px;
       height: 31px;
       background-color: #87acd6;
       color: #ffffff;
       border: none;
       border-radius: 0px;
       cursor: pointer;
       letter-spacing: 0.03em;
   }

       .loginButton:hover {
           background-color: #7392b6;
       }

   .backButton {
       font-family: 'Rubik', sans-serif;
       font-weight: 600;
       font-size: 14px;
       width: 110px;
       height: 31px;
       background-color: #e0e0e0;
       color: #a2a8ab;
       border: none;
       border-radius: 0px;
       cursor: pointer;
       letter-spacing: 0.03em;
       text-decoration: none;
       display: inline-flex;
       align-items: center;
       justify-content: center;
   }

       .backButton:hover {
           background-color: #c8c8c8;
       }

   /* Address block */
   .address-block {
       font-family: 'Rubik', sans-serif;
       font-weight: 300;
       font-size: 14px;
       line-height: 20px;
       color: #7a858c;
       margin-top: auto;
       padding-top: 30px;
   }

       .address-block p {
           margin: 0 0 10px 0;
       }

       .address-block strong {
           font-weight: 600;
           color: #87acd6;
       }