/* Cloud Shipping | Login page stylesheet v3
   Desktop: branded background and refreshed login card
   Mobile: retains the approved compact gradient layout
*/
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap');

/* 1. Page background */
html {
  min-height: 100%;
  background: #eaf5ff url('https://cloudshippingglobal.com/wp-content/uploads/2026/10/Smarter-Global-Shipping-Banner.png') center center / cover no-repeat !important;
}

body {
  min-height: 100vh;
  background: transparent !important;
  font-family: Montserrat, Arial, sans-serif;
}

.login-image-newlogin {
  min-height: 100vh;
  height: auto;
  background: transparent !important;
}

/* 2. The background already contains the marketing headline */
.main-login-board1-newlogin,
.main-login-board1,
.text-in-bg {
  display: none !important;
}

/* 3. Login card */
.main-login-board-newlogin,
.main-login-board {
  background: #fff !important;
  color: #142c65;
  padding: 24px 28px !important;
  margin-top: clamp(90px, 24vh, 240px) !important;
  transform: translateY(-85px);
  border: 1px solid rgba(220, 232, 245, .8);
  border-radius: 16px !important;
  box-shadow: 0 14px 38px rgba(14, 32, 65, .18) !important;
}

/* 4. Form controls */
.main-login-board-newlogin input:not([type='checkbox']):not([type='submit']),
.main-login-board input:not([type='checkbox']):not([type='submit']) {
  border-color: #d6e2f0;
  border-radius: 6px 0 0 6px;
  max-width: 100%;
  box-sizing: border-box;
}

.main-login-board-newlogin input:not([type='checkbox']):focus,
.main-login-board input:not([type='checkbox']):focus {
  border-color: #27aae1 !important;
  box-shadow: 0 0 0 3px rgba(39, 170, 225, .12);
  outline: none;
}

.main-login-board-newlogin .input-group-addon,
.main-login-board .input-group-addon {
  color: #25a9e0 !important;
  background: #fff;
  border-color: #d6e2f0;
  border-radius: 0 6px 6px 0;
}

/* 5. Existing Cloud Shipping logo inside the card */
.background-logo-out {
  height: 85px;
  position: relative;
  width: 90%;
  margin: 15px auto;
}

.background-logo {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 199px;
  height: 80px;
  margin: auto;
  background: url('https://icargo-public.s3.eu-west-1.amazonaws.com/live/images/company/logo/cloud-ship-logo.png') center / contain no-repeat;
}

/* 6. Login button */
.sameday-next-newlogin,
.sameday-next {
  background: #27aae1 !important;
  border: 1px solid transparent !important;
  border-radius: 8px !important;
  color: #fff !important;
  padding: 9px 26px !important;
  letter-spacing: .5px;
  transition: background-color .2s ease;
}

.sameday-next-newlogin:hover,
.sameday-next:hover {
  background: #1687c3 !important;
}

/* 7. Short desktop and tablet screens */
@media (min-width: 768px) and (max-height: 650px) {
  .main-login-board-newlogin,
  .main-login-board {
    margin-top: 45px !important;
  }
}

/* 8. Mobile: preserve approved layout, gradient and spacing */
@media (max-width: 767px) {
  html {
    height: auto !important;
    min-height: 100% !important;
    background-image: none !important;
    background-color: #e9f5ff !important;
  }

  body {
    min-height: 100dvh !important;
    overflow-x: hidden !important;
    background: linear-gradient(160deg, #f7fbff 0%, #e4f3ff 70%, #d5eaff 100%) !important;
  }

  .login-image-newlogin {
    min-height: 100dvh !important;
    height: auto !important;
  }

  .main-login-board-newlogin,
  .main-login-board {
    float: none !important;
    transform: none !important;
    margin: 48px auto 24px !important;
    width: calc(100% - 32px) !important;
    max-width: 420px !important;
    box-sizing: border-box !important;
    padding: 14px 18px 20px !important;
    box-shadow: 0 8px 28px rgba(14, 32, 65, .14) !important;
  }

  .background-logo-out {
    height: 70px !important;
    margin: 8px auto 12px !important;
  }

  .background-logo {
    height: 65px !important;
    background-position: center !important;
  }
}