/* ============================================================
   CONTABI MAIL
   PREMIUM LOGIN FINAL V3
   ============================================================ */

:root {

  --blue:
    #1f63f3;

  --blue-dark:
    #0f4ddd;

  --navy:
    #0b1f44;

  --text:
    #14213a;

  --muted:
    #66758f;

  --line:
    #dfe6ef;

  --soft:
    #f6f9fd;

  --white:
    #ffffff;

}


* {
  box-sizing:
    border-box;
}


html,
body {
  width:
    100%;

  min-height:
    100%;

  margin:
    0;
}


body {

  font-family:
    "Sora",
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;

  color:
    var(--text);

  background:
    #f8fbff;

}


button,
input,
select {
  font:
    inherit;
}


button,
select {
  cursor:
    pointer;
}


.hidden {
  display:
    none !important;
}


/* ============================================================
   PAGE
   ============================================================ */

.page {

  position:
    relative;

  min-height:
    100vh;

  overflow:
    hidden;

  display:
    flex;

  flex-direction:
    column;

  background:

    radial-gradient(
      50rem 40rem at 4% 10%,
      rgba(59,130,246,.10),
      transparent 62%
    ),

    radial-gradient(
      44rem 34rem at 94% 90%,
      rgba(99,102,241,.12),
      transparent 62%
    ),

    linear-gradient(
      135deg,
      #ffffff 0%,
      #f8fbff 48%,
      #eef4ff 100%
    );

}


/* tiny dot pattern */

.page::before {

  content:
    "";

  position:
    absolute;

  left:
    0;

  top:
    270px;

  width:
    270px;

  height:
    450px;

  opacity:
    .28;

  pointer-events:
    none;

  background-image:
    radial-gradient(
      rgba(37,99,235,.28) 1.2px,
      transparent 1.4px
    );

  background-size:
    24px 24px;

  mask-image:
    linear-gradient(
      to right,
      #000 0%,
      transparent 100%
    );

}


/* ============================================================
   TOPBAR
   ============================================================ */

.topbar {

  position:
    relative;

  z-index:
    10;

  width:
    100%;

  min-height:
    100px;

  padding:
    23px
    clamp(34px, 5vw, 78px);

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

}


/* ============================================================
   ONLY THE CONTABI SYMBOL
   Crop the existing image with CSS.
   No new image generated.
   ============================================================ */

.brand-icon-crop {

  position:
    relative;

  width:
    70px;

  height:
    68px;

  overflow:
    hidden;

  flex:
    0 0 auto;

}


.brand-icon-crop img {

  position:
    absolute;

  top:
    0;

  left:
    0;

  width:
    215px;

  max-width:
    none;

  height:
    auto;

  display:
    block;

}


/* ============================================================
   LANGUAGE
   ============================================================ */

.language-box {

  min-height:
    48px;

  padding:
    0
    10px
    0
    14px;

  display:
    flex;

  align-items:
    center;

  gap:
    8px;

  border:
    1px solid rgba(218,226,239,.9);

  border-radius:
    11px;

  background:
    rgba(255,255,255,.82);

  box-shadow:
    0 5px 18px rgba(15,23,42,.04);

}


.language-globe {

  color:
    #1f2937;

  font-size:
    22px;

}


.language-box select {

  min-width:
    92px;

  height:
    46px;

  border:
    0;

  outline:
    0;

  appearance:
    auto;

  background:
    transparent;

  color:
    #1e293b;

  font-size:
    13px;

  font-weight:
    600;

}


/* ============================================================
   MAIN
   ============================================================ */

.main-layout {

  position:
    relative;

  z-index:
    3;

  width:
    min(
      1380px,
      calc(100% - 70px)
    );

  flex:
    1;

  margin:
    0 auto;

  padding:
    30px
    0
    70px;

  display:
    grid;

  grid-template-columns:
    minmax(0, 1fr)
    minmax(500px, 560px);

  align-items:
    center;

  gap:
    clamp(65px, 9vw, 145px);

}


/* ============================================================
   MARKETING
   ============================================================ */

.marketing-panel {

  max-width:
    650px;

}


.product-badge {

  display:
    inline-flex;

  margin-bottom:
    28px;

  padding:
    8px
    14px;

  border:
    1px solid #dbeafe;

  border-radius:
    999px;

  background:
    rgba(239,246,255,.93);

  color:
    #2563eb;

  box-shadow:
    0 4px 15px rgba(37,99,235,.05);

  font-size:
    11px;

  font-weight:
    700;

  letter-spacing:
    .12em;

}


.hero-title {

  margin:
    0;

  color:
    #0d2449;

  font-family:
    "Bodoni Moda",
    Georgia,
    serif;

  font-size:
    clamp(
      65px,
      6.2vw,
      96px
    );

  font-weight:
    500;

  line-height:
    .88;

  letter-spacing:
    -.055em;

}


.hero-title em {

  color:
    #1f63f3;

  font-weight:
    500;

  white-space:
    nowrap;

}


.hero-description {

  max-width:
    600px;

  margin:
    32px
    0
    0;

  color:
    #526179;

  font-size:
    15px;

  line-height:
    1.8;

}


.benefits {

  margin-top:
    32px;

  display:
    grid;

  gap:
    20px;

}


.benefit {

  display:
    grid;

  grid-template-columns:
    48px 1fr;

  gap:
    16px;

  align-items:
    start;

}


.benefit-icon {

  width:
    48px;

  height:
    48px;

  display:
    grid;

  place-items:
    center;

  border:
    1px solid #e1e9f5;

  border-radius:
    13px;

  background:
    rgba(255,255,255,.92);

  color:
    #1f63f3;

  box-shadow:
    0 7px 20px rgba(37,99,235,.06);

  font-size:
    23px;

  font-weight:
    700;

}


.benefit strong {

  display:
    block;

  color:
    #15243e;

  font-size:
    14px;

  font-weight:
    700;

}


.benefit p {

  max-width:
    470px;

  margin:
    5px 0 0;

  color:
    #627088;

  font-size:
    12.5px;

  line-height:
    1.65;

}


/* ============================================================
   AUTH
   ============================================================ */

.auth-column {

  width:
    100%;

  display:
    flex;

  justify-content:
    flex-end;

}


.auth-card {

  position:
    relative;

  width:
    100%;

  min-height:
    625px;

  padding:
    47px
    42px
    38px;

  overflow:
    hidden;

  border:
    1px solid rgba(255,255,255,.95);

  border-radius:
    27px;

  background:
    rgba(255,255,255,.94);

  box-shadow:
    0 30px 75px rgba(30,64,175,.12),
    0 4px 13px rgba(15,23,42,.04);

  backdrop-filter:
    blur(20px);

  -webkit-backdrop-filter:
    blur(20px);

}


.auth-card::before {

  content:
    "";

  position:
    absolute;

  top:
    0;

  left:
    75px;

  right:
    75px;

  height:
    2px;

  background:
    linear-gradient(
      90deg,
      transparent,
      #60a5fa,
      #2563eb,
      #6366f1,
      transparent
    );

}


.auth-heading {

  text-align:
    center;

}


.auth-heading h2 {

  margin:
    0;

  color:
    #101b31;

  font-size:
    31px;

  font-weight:
    700;

  letter-spacing:
    -.045em;

}


.auth-heading p {

  margin:
    10px
    0
    0;

  color:
    #6a7891;

  font-size:
    14px;

}


/* ============================================================
   TABS
   ============================================================ */

.tabs {

  margin:
    32px
    0
    31px;

  display:
    grid;

  grid-template-columns:
    1fr 1fr;

  border-bottom:
    1px solid #e5eaf1;

}


.tab {

  position:
    relative;

  min-height:
    49px;

  border:
    0;

  background:
    transparent;

  color:
    #71809b;

  font-size:
    13px;

  font-weight:
    600;

}


.tab.active {

  color:
    #1759e8;

}


.tab.active::after {

  content:
    "";

  position:
    absolute;

  left:
    9px;

  right:
    9px;

  bottom:
    -1px;

  height:
    3px;

  border-radius:
    3px
    3px
    0
    0;

  background:
    #2563eb;

}


/* ============================================================
   FORM
   ============================================================ */

.auth-form {

  width:
    100%;

}


.field {

  margin-bottom:
    20px;

}


.field label {

  display:
    block;

  margin-bottom:
    9px;

  color:
    #172237;

  font-size:
    11.5px;

  font-weight:
    700;

}


.input-shell {

  min-height:
    55px;

  display:
    flex;

  align-items:
    stretch;

  overflow:
    hidden;

  border:
    1px solid #d9e2ef;

  border-radius:
    10px;

  background:
    #fff;

  transition:
    border-color .16s ease,
    box-shadow .16s ease;

}


.input-shell:focus-within {

  border-color:
    #60a5fa;

  box-shadow:
    0 0 0 4px rgba(59,130,246,.08);

}


.field-icon {

  width:
    50px;

  flex:
    0 0 50px;

  display:
    grid;

  place-items:
    center;

  color:
    #8290a8;

  font-size:
    18px;

}


.input-shell input {

  min-width:
    0;

  flex:
    1;

  border:
    0;

  outline:
    0;

  padding:
    0 10px;

  color:
    #0f172a;

  background:
    transparent;

  font-size:
    13px;

}


.input-shell input::placeholder {

  color:
    #a1aec2;

}


.domain {

  flex:
    0 0 auto;

  display:
    flex;

  align-items:
    center;

  padding:
    0
    14px;

  border-left:
    1px solid #e1e6ed;

  background:
    #f8fafc;

  color:
    #334155;

  font-size:
    11px;

  font-weight:
    500;

}


.eye {

  width:
    52px;

  flex:
    0 0 52px;

  border:
    0;

  background:
    transparent;

  color:
    #718096;

}


/* ============================================================
   OPTIONS
   ============================================================ */

.login-options {

  margin:
    -1px
    0
    20px;

  display:
    flex;

  align-items:
    center;

}


.remember {

  display:
    inline-flex;

  align-items:
    center;

  gap:
    8px;

  color:
    #65738a;

  font-size:
    12px;

}


.remember input {

  width:
    16px;

  height:
    16px;

}


/* ============================================================
   BUTTONS
   ============================================================ */

.primary-button {

  width:
    100%;

  min-height:
    55px;

  padding:
    0
    22px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    14px;

  border:
    0;

  border-radius:
    8px;

  background:
    linear-gradient(
      100deg,
      #124ddd,
      #2d78ff
    );

  color:
    #fff;

  box-shadow:
    0 14px 28px rgba(37,99,235,.22);

  font-size:
    13px;

  font-weight:
    700;

  transition:
    transform .15s ease,
    box-shadow .15s ease;

}


.primary-button:hover {

  transform:
    translateY(-1px);

  box-shadow:
    0 17px 32px rgba(37,99,235,.28);

}


.primary-button:disabled {

  cursor:
    wait;

  opacity:
    .7;

}


.secondary-button {

  width:
    100%;

  min-height:
    49px;

  border:
    1px solid #d9e1ec;

  border-radius:
    8px;

  background:
    #fff;

  color:
    #17233b;

  font-size:
    12px;

  font-weight:
    700;

}


.separator {

  margin:
    24px
    0;

  display:
    grid;

  grid-template-columns:
    1fr auto 1fr;

  gap:
    15px;

  align-items:
    center;

}


.separator span {

  height:
    1px;

  background:
    #dfe5ed;

}


.separator small {

  color:
    #65738b;

  font-size:
    11px;

}


.error {

  min-height:
    3px;

  margin:
    -6px
    0
    10px;

  color:
    #dc2626;

  font-size:
    11px;

  line-height:
    1.5;

}


/* ============================================================
   FOOTER
   ============================================================ */

.footer {

  position:
    relative;

  z-index:
    4;

  width:
    100%;

  min-height:
    66px;

  padding:
    18px
    clamp(34px, 5vw, 78px);

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    20px;

  border-top:
    1px solid rgba(226,232,240,.72);

  color:
    #68758c;

  font-size:
    11px;

}


.footer-links {

  display:
    flex;

  align-items:
    center;

  gap:
    16px;

}


.footer-divider {

  color:
    #ccd3dd;

}


/* ============================================================
   TABLET
   ============================================================ */

@media (max-width: 1050px) {

  .main-layout {

    width:
      min(
        100% - 36px,
        680px
      );

    grid-template-columns:
      1fr;

    gap:
      34px;

    padding:
      25px
      0
      60px;

  }


  .marketing-panel {

    text-align:
      center;

    margin:
      0 auto;

  }


  .hero-title {

    font-size:
      clamp(
        54px,
        10vw,
        75px
      );

  }


  .hero-title em {

    white-space:
      normal;

  }


  .hero-description {

    margin-left:
      auto;

    margin-right:
      auto;

  }


  .benefits {

    display:
      none;

  }


  .auth-column {

    justify-content:
      center;

  }


  .auth-card {

    max-width:
      560px;

  }

}


/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width: 620px) {

  .page {

    overflow:
      visible;

  }


  .page::before {

    display:
      none;

  }


  .topbar {

    min-height:
      75px;

    padding:
      12px
      16px;

  }


  .brand-icon-crop {

    width:
      54px;

    height:
      53px;

  }


  .brand-icon-crop img {

    width:
      170px;

  }


  .language-box {

    min-height:
      42px;

    padding-left:
      10px;

  }


  .language-box select {

    min-width:
      76px;

    height:
      40px;

    font-size:
      11px;

  }


  .language-globe {

    font-size:
      18px;

  }


  .main-layout {

    width:
      100%;

    display:
      block;

    padding:
      18px
      12px
      35px;

  }


  .marketing-panel {

    display:
      none;

  }


  .auth-card {

    width:
      100%;

    min-height:
      auto;

    padding:
      30px
      19px
      26px;

    border-radius:
      22px;

  }


  .auth-heading h2 {

    font-size:
      27px;

  }


  .auth-heading p {

    font-size:
      12px;

  }


  .tabs {

    margin:
      25px
      0;

  }


  .field-icon {

    width:
      42px;

    flex-basis:
      42px;

  }


  .domain {

    padding:
      0
      8px;

    font-size:
      9px;

  }


  .input-shell input {

    padding:
      0 5px;

    font-size:
      12px;

  }


  .footer {

    min-height:
      auto;

    padding:
      20px;

    flex-direction:
      column;

    text-align:
      center;

  }


  .footer-links {

    gap:
      11px;

  }

}


/* ============================================================
   CONTABI MAIL ICON ONLY V5
   ============================================================ */

.brand-icon-crop {
    width: 72px !important;
    height: 72px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    overflow: visible !important;
}


.brand-icon-crop img,
img[src*="logo-contabird-icon"] {
    position: static !important;

    display: block !important;

    width: 66px !important;
    height: 66px !important;

    max-width: 66px !important;
    max-height: 66px !important;

    margin: 0 !important;

    object-fit: contain !important;

    transform: none !important;
}


@media (max-width: 620px) {

    .brand-icon-crop {
        width: 58px !important;
        height: 58px !important;
    }

    .brand-icon-crop img,
    img[src*="logo-contabird-icon"] {
        width: 54px !important;
        height: 54px !important;

        max-width: 54px !important;
        max-height: 54px !important;
    }

}


/* ============================================================
   CONTABI MAIL - LOGO ONLY FINAL V7
   ============================================================ */

.contabi-logo-icon-only,
img[src*="logo-contabird-symbol"] {
    width: 72px !important;
    height: 72px !important;
    max-width: 72px !important;
    max-height: 72px !important;
    object-fit: contain !important;
    display: block !important;
    margin: 0 auto !important;
    transform: none !important;
    filter: none !important;
}

@media (max-width: 768px) {
    .contabi-logo-icon-only,
    img[src*="logo-contabird-symbol"] {
        width: 58px !important;
        height: 58px !important;
        max-width: 58px !important;
        max-height: 58px !important;
    }
}



/* ============================================================
   CONTABI MAIL
   ORIGINAL FULL LOGO FINAL V8B
   THIS RULE OVERRIDES ALL PREVIOUS ICON-ONLY VERSIONS
   ============================================================ */

.brand-icon-crop {
    position: relative !important;

    width: 245px !important;
    height: 78px !important;

    min-width: 245px !important;

    display: flex !important;

    align-items: center !important;
    justify-content: flex-start !important;

    overflow: visible !important;

    margin: 0 !important;
    padding: 0 !important;
}


.brand-icon-crop img,
.contabi-logo-icon-only,
img[src*="logo-contabird.png"] {

    position: static !important;

    display: block !important;

    width: 225px !important;
    height: auto !important;

    max-width: 225px !important;
    max-height: 76px !important;

    min-width: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    object-fit: contain !important;
    object-position: left center !important;

    transform: none !important;
    filter: none !important;

    opacity: 1 !important;

    clip-path: none !important;
}


@media (max-width: 620px) {

    .brand-icon-crop {
        width: 190px !important;
        min-width: 190px !important;
        height: 62px !important;
    }

    .brand-icon-crop img,
    .contabi-logo-icon-only,
    img[src*="logo-contabird.png"] {

        width: 180px !important;

        max-width: 180px !important;
        max-height: 60px !important;
    }

}