@charset "UTF-8";
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  font-size: 100%;
  vertical-align: baseline;
  box-sizing: border-box;
}

html {
  line-height: 1;
}

body {
  -webkit-font-smoothing: antialiased !important;
  text-rendering: optimizeLegibility !important;
}
body.mobile {
  -webkit-text-size-adjust: none;
}
body.mobile input {
  -webkit-appearance: none;
}

body, html {
  min-width: 300px;
  overflow-x: hidden;
}

ol, ul {
  list-style: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

caption, th, td {
  text-align: left;
  font-weight: normal;
  vertical-align: middle;
}

q, blockquote {
  quotes: none;
}
q:before, q:after, blockquote:before, blockquote:after {
  content: "";
  content: none;
}

img {
  max-width: 100%;
  height: auto;
  border: none;
}

a {
  text-decoration: none;
}

article, aside, details, figcaption, figure, footer, header, main, menu, nav, section, summary {
  display: block;
  box-sizing: border-box;
}

:focus {
  outline: none;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: normal;
}

.cf:before, .cf:after {
  content: ".";
  display: block;
  overflow: hidden;
  visibility: hidden;
  font-size: 0;
  line-height: 0;
  width: 0;
  height: 0;
}

.cf:after {
  clear: both;
}

.time-item, .calendar__day, .calendar__nav, .meeting-input, .details-back, .details-edit, .login-layout .otp-resend-link, .btn-logout, .btn-back, .btn-back-big, .btn-outline, .btn, .btn-danger, .btn-gradient, .layout-mobile .welcome-card__btn, .btn-big {
  border: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  position: relative;
  text-align: center;
  cursor: pointer;
  box-sizing: border-box;
  transition: all 0.3s;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  font-family: var(--font-family);
}

.inp, .login-layout .otp-inputs .otp-input {
  border: none;
  background-color: transparent;
  box-sizing: border-box;
  width: 100%;
  outline: none;
  color: var(--color-text-main);
  font-family: var(--font-family);
}

:root {
  --color-primary: #2194BE;
  --color-primary-hover: #00577C;
  --color-danger: #FF0000;
  --color-text-main: #212121;
  --color-text-secondary: #555555;
  --color-text-muted: #ACACAC;
  --color-border: #ACACAC;
  --color-bg-card: #FFFFFF;
  --color-bg-card-mobile: #FAFAFE;
  --color-bg-page: #f4f5f8;
  --color-bg-page-login: #F9F9F9;
  --color-bg-placeholder: #e0e4ec;
  --color-bg-footer: #363636;
  --color-green-light: #F4FFF9;
  --color-green-dark: #236944;
  --color-pink-light: #FFF6F5;
  --color-pink-dark: #C51986;
  --color-blue-light: #F2F9FF;
  --color-blue-dark: #0C73B1;
  --color-silver-light: #FDFDFD;
  --color-silver-dark: #8798B6;
  --color-yellow-light: #FFFCF7;
  --color-yellow-dark: #D5A82D;
  --color-bg-disabled: #DBDBDB;
  --color-bg-disabled-light: #f5f5f5;
  --color-bg-disabled-light-mobile: #ececec;
  --color-text-disabled: #6E6C6C;
  --color-tag-blue: #0912D6;
  --color-tag-blue-light: #EEF0FF;
  --color-toastbar-green: #62CB93;
  --color-pink-light-btn: #FFD1D1;
  --color-pink-light-btn-hover: #f69a9a;
  --button-gradient: linear-gradient(180deg, #2194BE 0%, #0C73B1 100%);
  --button-gradient-hover: linear-gradient(180deg, #00577C 0%, rgb(3, 58, 91) 100%);
  --radius-pill: 999px;
  --font-family: "Assistant", sans-serif;
  --shadow-card: 0 4px 12px rgba(0, 0, 0, 0.12);
  --shadow-button: 4px 4px 12px rgba(0, 0, 0, 0.08);
  --size-4:clamp(2.13px, 0.278vw, 8.33px);
  --size-6:clamp(3.20px, 0.417vw, 12.50px);
  --size-8:clamp(4.27px, 0.556vw, 16.67px);
  --size-10:clamp(5.33px, 0.694vw, 20.83px);
  --size-12:clamp(6.40px, 0.833vw, 25.00px);
  --size-13:clamp(7.07px, 0.921vw, 27.08px);
  --size-14:clamp(7.47px, 0.972vw, 29.17px);
  --size-15:clamp(8.00px, 1.042vw, 31.25px);
  --size-16:clamp(8.53px, 1.111vw, 33.33px);
  --size-18:clamp(9.60px, 1.25vw, 37.50px);
  --size-20:clamp(10.67px, 1.389vw, 41.67px);
  --size-21:clamp(11.20px, 1.458vw, 43.75px);
  --size-22:clamp(11.73px, 1.528vw, 45.83px);
  --size-24:clamp(12.80px, 1.667vw, 50.00px);
  --size-26:clamp(13.87px, 1.819vw, 56.25px);
  --size-28:clamp(15.07px, 1.953vw, 58.33px);
  --size-30:clamp(16.13px, 2.097vw, 62.50px);
  --size-32:clamp(17.07px, 2.222vw, 66.67px);
  --size-34:clamp(18.27px, 2.396vw, 70.83px);
  --size-36:clamp(19.20px, 2.5vw, 75.00px);
  --size-38:clamp(20.27px, 2.639vw, 79.17px);
  --size-40: clamp(21.33px, 2.778vw, 83.33px);
  --size-42: clamp(22.67px, 2.917vw, 87.50px);
  --size-48: clamp(25.60px, 3.333vw, 100.00px);
  --size-50:clamp(26.67px, 3.472vw, 104.17px);
  --size-54:clamp(28.80px, 3.750vw, 102.08px);
  --size-56:clamp(29.87px, 3.875vw, 116.67px);
  --size-60:clamp(32.27px, 4.198vw, 125.00px);
  --size-65:clamp(34.67px, 4.500vw, 137.50px);
  --size-68:clamp(36.40px, 4.722vw, 145.83px);
  --size-70:clamp(37.47px, 4.861vw, 148px);
  --size-74:clamp(39.47px, 5.139vw, 150px);
  --size-80:clamp(42.67px, 5.556vw, 165px);
  --size-90:clamp(47.60px, 6.191vw, 180px);
  --size-100:clamp(53.33px, 6.944vw, 208.33px);
  --size-132:clamp(70.67px, 9.111vw, 132.00px);
  --size-140:clamp(74.67px, 9.694vw, 250.00px);
  --size-145:clamp(77.60px, 9.944vw, 262.50px);
  --size-170:clamp(91.67px, 11.905vw, 291.67px);
  --size-180:clamp(96.00px, 12.50vw, 375.00px);
  --size-260:clamp(139.33px, 18.194vw, 350.00px);
  --size-265:clamp(141.67px, 18.333vw, 354.17px);
  --size-286:clamp(153.33px, 19.722vw, 386.67px);
  --size-290:clamp(155.33px, 20.139vw, 416.67px);
  --size-300:clamp(159.33px, 20.556vw, 450.00px);
  --size-320:clamp(169.33px, 21.944vw, 500.00px);
  --size-350:clamp(183.33px, 23.611vw, 550.00px);
  --size-360:clamp(192.00px, 24.000vw, 600.00px);
  --size-425:clamp(227.50px, 29.444vw, 583.33px);
  --size-456:clamp(242.67px, 31.528vw, 630.00px);
  --size-486:clamp(258.33px, 33.333vw, 650.00px);
  --size-500:clamp(266.67px, 34.722vw, 800.00px);
  --size-580:clamp(308.00px, 39.722vw, 880.00px);
  --size-600:clamp(316.67px, 40.972vw, 900.00px);
  --size-705:clamp(375.00px, 48.611vw, 1020.83px);
  --size-910:clamp(483.33px, 62.500vw, 1210.00px);
  --size-1024:clamp(546.67px, 71.444vw, 1366.67px);
}

html, body {
  direction: rtl;
  font-family: var(--font-family);
  font-size: var(--size-18);
  color: var(--color-text-main);
  background-color: var(--color-bg-page);
}

.title-1 {
  font-size: var(--size-32);
  line-height: 1.375;
  font-weight: 700;
}
.title-1:not(:last-child) {
  margin-bottom: var(--size-16);
}

.title-2 {
  font-size: var(--size-24);
  line-height: 1.333;
  font-weight: 700;
}

p {
  font-size: var(--size-18);
  line-height: 1.222;
  font-weight: 400;
}
p:not(:last-child) {
  margin-bottom: var(--size-16);
}

.text-color-main {
  color: var(--color-text-main);
}

.text-color-secondary {
  color: var(--color-text-secondary);
}

.show-on-mobile {
  display: none;
}

@media all and (max-width: 768px) {
  html, body {
    background-color: rgb(245, 245, 247);
    background: linear-gradient(180deg, #F0F1FF 0%, rgb(244, 245, 248) 67.54%);
  }
  .show-on-mobile {
    display: block;
  }
  .hide-on-mobile {
    display: none;
  }
  .title-1 {
    font-size: 24px;
  }
  .title-1:not(:last-child) {
    margin-bottom: 12px;
  }
  .title-2 {
    font-size: 18px;
    font-weight: 600;
    line-height: 1.333;
  }
  p {
    font-size: 14px;
  }
  p:not(:last-child) {
    margin-bottom: 12px;
  }
}
#app-header, #app-footer {
  display: none;
}

#app {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.screen {
  flex: 1;
}

#app-header {
  background-color: #fff;
  box-shadow: 4px 4px 10px 0px rgba(0, 0, 0, 0.1);
  padding: var(--size-12) var(--size-56);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
#app-header .hamburger {
  display: none;
}
#app-header .header-logo {
  display: flex;
  align-items: center;
  gap: var(--size-32);
}
#app-header .header-logo img {
  width: var(--size-30);
  display: block;
}
#app-header .header-logo span {
  font-size: var(--size-14);
  font-weight: 700;
  color: var(--color-text-secondary);
}

.mobile-menu {
  display: none;
}

#app-footer {
  background-color: var(--color-bg-page);
  color: var(--color-text-main);
  padding: var(--size-14) var(--size-74) var(--size-74);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
#app-footer .footer-logo {
  width: var(--size-170);
}
#app-footer .footer-logo img {
  width: 100%;
  display: block;
}
#app-footer .footer-contact {
  font-size: var(--size-18);
  line-height: 1.333;
}
#app-footer .footer-contact__label {
  font-weight: 700;
  display: block;
  color: var(--color-primary);
  margin-bottom: var(--size-15);
}
#app-footer .footer-contact__link {
  color: inherit;
  display: block;
}
#app-footer .footer-contact__link:not(:last-child) {
  margin-bottom: var(--size-15);
}
#app-footer .footer-contact__link:hover {
  text-decoration: underline;
}

@media all and (max-width: 768px) {
  #app-header {
    background-color: transparent;
    box-shadow: unset;
    padding: 24px 24px 0;
  }
  #app-header .header-logo, #app-header .btn-logout {
    display: none;
  }
  #app-header .hamburger {
    display: block;
  }
  .hamburger {
    width: 24px;
    height: 24px;
    border: 0;
    background: transparent;
    background-image: url("../images/icon-hamburger.svg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100%;
    cursor: pointer;
  }
  #app-footer {
    padding: 18px 46px 30px;
    align-items: flex-start;
  }
  #app-footer .footer-logo {
    width: 60px;
  }
  #app-footer .footer-contact {
    font-size: 14px;
  }
  #app-footer .footer-contact__label {
    margin-bottom: 9px;
  }
  #app-footer .footer-contact__link:not(:last-child) {
    margin-bottom: 9px;
  }
  /* Mobile Menu */
  body.is-menu-open {
    overflow: hidden;
  }
  .mobile-menu {
    position: fixed;
    inset: 0;
    z-index: 9999;
    pointer-events: none;
    opacity: 0;
    transition: opacity 220ms ease;
    display: block;
    direction: rtl;
  }
  .mobile-menu.is-open {
    opacity: 1;
    pointer-events: auto;
  }
  .mobile-menu__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.25);
  }
  .mobile-menu__panel {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: 76%;
    max-width: 340px;
    background: #ffffff;
    transform: translateX(100%);
    transition: transform 260ms ease;
    box-shadow: -10px 0 30px rgba(0, 0, 0, 0.12);
    outline: none;
    padding: 130px 30px;
  }
  .mobile-menu.is-open .mobile-menu__panel {
    transform: translateX(0);
  }
  .mobile-menu__close {
    position: absolute;
    top: 60px;
    right: 30px;
    width: 24px;
    height: 24px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
  }
  .mobile-menu__close img {
    display: block;
    width: 100%;
  }
  .mobile-menu__nav {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
  .mobile-menu__item {
    border: 0;
    background: transparent;
    padding: 8px 0px;
    cursor: pointer;
    color: var(--color-text-main);
    font-family: var(--font-family);
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.3;
  }
  .mobile-menu__item--danger {
    color: var(--color-danger);
  }
  .mobile-menu__icon {
    width: 20px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .mobile-menu__icon.w-15 {
    width: 15px;
    height: 19px;
    margin-inline-end: 5px;
  }
  .mobile-menu__icon img {
    display: block;
    width: 100%;
  }
  .screen-welcome #app-header {
    display: none !important;
  }
}
/* =========================================================
   BUTTONS
   ========================================================= */
/* --- Icon helpers (used by Modal buttons too) --- */
.btn-with-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--size-8);
}
.btn-with-icon.icon-left {
  flex-direction: row;
}
.btn-with-icon.icon-right {
  flex-direction: row-reverse;
}

.btn__icon {
  width: var(--size-14);
  height: var(--size-14);
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: center;
  flex: 0 0 auto;
}

/* icon assets */
.icon-stars2 {
  background-image: url("../images/icon-stars2.svg");
}

.icon-stars-blue {
  background-image: url("../images/icon-stars-blue.svg");
}

.icon-hamburger {
  background-image: url("../images/icon-hamburger.svg");
}

.icon-waving-hand {
  background-image: url("../images/icon-waving-hand.svg");
}

/* --- Base (primary) button --- */
.btn, .btn-danger, .btn-gradient, .layout-mobile .welcome-card__btn, .btn-big {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--size-8);
  max-width: 100%;
  min-height: var(--size-48);
  padding: var(--size-10) var(--size-30);
  border-radius: var(--size-12);
  font-size: var(--size-18);
  line-height: 1;
  font-weight: 700;
  color: #fff;
  background-color: var(--color-primary);
  box-shadow: var(--shadow-button);
  transition: background-color 0.25s, color 0.25s, box-shadow 0.25s, opacity 0.25s;
}
.btn:hover, .btn-danger:hover, .btn-gradient:hover, .layout-mobile .welcome-card__btn:hover, .btn-big:hover {
  background-color: var(--color-primary-hover);
}
.btn:disabled, .btn-danger:disabled, .btn-gradient:disabled, .layout-mobile .welcome-card__btn:disabled, .btn-big:disabled {
  background-color: var(--color-bg-disabled);
  color: var(--color-text-disabled);
  cursor: not-allowed;
  pointer-events: none;
  box-shadow: none;
}
.btn.fullwidth, .fullwidth.btn-danger, .fullwidth.btn-gradient, .layout-mobile .fullwidth.welcome-card__btn, .fullwidth.btn-big {
  width: 100%;
}

/* Sizes */
.btn-big {
  min-height: var(--size-56);
}

/* Variants */
.btn-gradient, .layout-mobile .welcome-card__btn {
  background: var(--button-gradient);
}
.btn-gradient:hover, .layout-mobile .welcome-card__btn:hover {
  background: var(--button-gradient-hover);
}

.btn-danger {
  background-color: var(--color-pink-light-btn);
  color: var(--color-text-main);
}
.btn-danger:hover {
  background-color: var(--color-pink-light-btn-hover);
}

.btn-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--size-8);
  width: auto;
  min-height: var(--size-48);
  padding: var(--size-14) var(--size-36);
  border-radius: var(--size-12);
  font-size: var(--size-16);
  font-weight: 700;
  background: transparent;
  border: 1px solid var(--color-primary);
  color: var(--color-primary);
  box-shadow: none;
  transition: all 0.25s;
}
.btn-outline:hover {
  background: var(--color-blue-light);
}
.btn-outline.fullwidth {
  width: 100%;
}

/* Text / link-like buttons */
.btn-back, .btn-back-big {
  display: inline-flex;
  align-items: center;
  font-weight: 700;
  font-size: var(--size-14);
  color: var(--color-text-secondary);
  background-color: transparent;
}
.btn-back:before, .btn-back-big:before {
  content: "";
  display: block;
  width: var(--size-14);
  height: var(--size-14);
  margin-inline-end: var(--size-4);
  background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTMiIGhlaWdodD0iMTMiIHZpZXdCb3g9IjAgMCAxMyAxMyIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTMuMjU2MjggMTAuNjU3NUMyLjkxNDU3IDEwLjk2NDYgMi45MTQ1NyAxMS40NjI2IDMuMjU2MjggMTEuNzY5N0MzLjU5Nzk5IDEyLjA3NjggNC4xNTIwMSAxMi4wNzY4IDQuNDkzNzIgMTEuNzY5N0w5Ljc0MzcyIDcuMDUxMzFDMTAuMDc1IDYuNzUzNiAxMC4wODY2IDYuMjc0MjMgOS43NzAwMSA1Ljk2Mzg2TDQuNTQ2MyAxLjI1NTAxQzQuMjE5NzYgMC45MzQ4NTkgMy42NjYyNiAwLjkxMzIzIDMuMzEwMDMgMS4yMDY3MUMyLjk1MzggMS41MDAxOCAyLjkyOTc0IDEuOTk3NjMgMy4yNTYyOCAyLjMxNzc4TDcuOTEzODggNi40NzE2TDMuMjU2MjggMTAuNjU3NVoiIGZpbGw9IiM1NTU1NTUiLz4KPC9zdmc+Cg==");
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: center;
}
.btn-back:hover, .btn-back-big:hover {
  color: var(--color-text-main);
}
.btn-back.tdu, .tdu.btn-back-big {
  text-decoration: underline;
}
.btn-back.no-arrow::before, .no-arrow.btn-back-big::before {
  display: none;
}

.btn-back-big {
  font-size: var(--size-18);
  text-decoration: underline;
}

.btn-logout {
  display: inline-flex;
  align-items: center;
  gap: var(--size-8);
  font-size: var(--size-18);
  font-weight: 600;
  color: var(--color-text-secondary);
  background-color: transparent;
  padding: 0;
}
.btn-logout::before {
  content: "";
  display: block;
  width: var(--size-16);
  height: var(--size-16);
  background-image: url("../images/icon-logout.svg");
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: center;
}
.btn-logout:hover {
  color: var(--color-text-main);
}

/* --- Mobile adjustments (px only) --- */
@media (max-width: 768px) {
  .btn, .btn-big, .btn-gradient, .layout-mobile .welcome-card__btn, .btn-danger,
  .btn-outline {
    font-size: 16px;
    padding: 12px 16px;
    min-height: 48px;
    border-radius: 12px;
    gap: 6px;
  }
  .btn-back, .btn-back-big {
    font-size: 14px;
    padding: 0;
  }
  .btn-back::before, .btn-back-big::before {
    width: 13px;
    height: 13px;
  }
  .btn__icon {
    width: 14px;
    height: 14px;
  }
}
/* =========================================================
   INPUTS
   ========================================================= */
.inp, .login-layout .otp-inputs .otp-input {
  border: 1px solid var(--color-border);
  border-radius: var(--size-6);
  padding: var(--size-4) var(--size-18);
  font-size: var(--size-18);
  font-family: var(--font-family);
  line-height: 1;
  font-weight: 400;
  color: var(--color-text-main);
  background-color: var(--color-bg-card);
  text-align: right;
  min-height: var(--size-42);
}
.inp::-moz-placeholder, .login-layout .otp-inputs .otp-input::-moz-placeholder {
  color: var(--color-text-muted);
}
.inp::placeholder, .login-layout .otp-inputs .otp-input::placeholder {
  color: var(--color-text-muted);
}
.inp:not(:-moz-placeholder-shown), .login-layout .otp-inputs .otp-input:not(:-moz-placeholder-shown) {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: var(--shadow-card);
}
.inp:focus, .login-layout .otp-inputs .otp-input:focus, .inp:not(:placeholder-shown), .login-layout .otp-inputs .otp-input:not(:placeholder-shown) {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: var(--shadow-card);
}
.inp:disabled:not(:-moz-placeholder-shown) {
  background-color: var(--color-bg-disabled-light);
  border-color: var(--color-bg-disabled-light) !important;
  color: var(--color-text-disabled);
  cursor: not-allowed;
  pointer-events: none;
  box-shadow: none;
}
.inp:disabled, .login-layout .otp-inputs .otp-input:disabled, .inp:disabled:not(:placeholder-shown) {
  background-color: var(--color-bg-disabled-light);
  border-color: var(--color-bg-disabled-light) !important;
  color: var(--color-text-disabled);
  cursor: not-allowed;
  pointer-events: none;
  box-shadow: none;
}
.inp:disabled::-moz-placeholder, .login-layout .otp-inputs .otp-input:disabled::-moz-placeholder, .inp:disabled:not(:placeholder-shown)::-moz-placeholder {
  color: var(--color-text-disabled);
}
.inp:disabled:not(:-moz-placeholder-shown)::placeholder {
  color: var(--color-text-disabled);
}
.inp:disabled::placeholder, .login-layout .otp-inputs .otp-input:disabled::placeholder, .inp:disabled:not(:placeholder-shown)::placeholder {
  color: var(--color-text-disabled);
}

/* Leadform tweak */
.leadform-field .inp:not(:-moz-placeholder-shown), .leadform-field .login-layout .otp-inputs .otp-input:not(:-moz-placeholder-shown), .login-layout .otp-inputs .leadform-field .otp-input:not(:-moz-placeholder-shown) {
  border-color: var(--color-border);
  box-shadow: inherit;
}
.leadform-field .inp:not(:placeholder-shown), .leadform-field .login-layout .otp-inputs .otp-input:not(:placeholder-shown), .login-layout .otp-inputs .leadform-field .otp-input:not(:placeholder-shown) {
  border-color: var(--color-border);
  box-shadow: inherit;
}
.leadform-field .inp:focus, .leadform-field .login-layout .otp-inputs .otp-input:focus, .login-layout .otp-inputs .leadform-field .otp-input:focus {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-card);
}

@media (max-width: 768px) {
  .inp, .login-layout .otp-inputs .otp-input {
    min-height: 42px;
    border-radius: 6px;
    padding: 7px 10px;
    font-size: 18px;
    background-color: transparent;
  }
  .inp:disabled:not(:-moz-placeholder-shown) {
    background-color: var(--color-bg-disabled-light-mobile);
    border-color: var(--color-bg-disabled-light-mobile) !important;
    color: var(--color-text-main);
  }
  .inp:disabled, .login-layout .otp-inputs .otp-input:disabled, .inp:disabled:not(:placeholder-shown) {
    background-color: var(--color-bg-disabled-light-mobile);
    border-color: var(--color-bg-disabled-light-mobile) !important;
    color: var(--color-text-main);
  }
  .inp:disabled::-moz-placeholder, .login-layout .otp-inputs .otp-input:disabled::-moz-placeholder, .inp:disabled:not(:placeholder-shown)::-moz-placeholder {
    color: var(--color-text-disabled);
  }
  .inp:disabled:not(:-moz-placeholder-shown)::placeholder {
    color: var(--color-text-disabled);
  }
  .inp:disabled::placeholder, .login-layout .otp-inputs .otp-input:disabled::placeholder, .inp:disabled:not(:placeholder-shown)::placeholder {
    color: var(--color-text-disabled);
  }
}
/* =========================================================
   MODAL
   ========================================================= */
.modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
  /* modifier */
}
.modal.is-open {
  display: block;
}
.modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(179, 179, 179, 0.6);
  -webkit-backdrop-filter: blur(4px);
          backdrop-filter: blur(4px);
}
.modal__content {
  position: relative;
  width: var(--size-456);
  margin: 18vh auto 0;
  background: var(--color-bg-card);
  border-radius: var(--size-8);
  box-shadow: var(--shadow-card);
  padding: var(--size-40) var(--size-36);
  text-align: center;
}
.modal__icon {
  width: var(--size-34);
  height: var(--size-34);
  display: inline-block;
  margin: 0 auto var(--size-12);
  background-image: url("../images/icon-check.svg");
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: center;
}
.modal__title {
  font-size: var(--size-24);
  font-weight: 700;
  margin-bottom: var(--size-12);
  line-height: 1.33;
}
.modal__text {
  font-size: var(--size-16);
  font-weight: 600;
  line-height: 1.375;
  color: var(--color-text-secondary);
}
.modal__actions {
  margin-top: var(--size-32);
  display: grid;
  gap: var(--size-12);
  justify-items: center;
}
.modal__actions .btn, .modal__actions .btn-big, .modal__actions .btn-gradient, .modal__actions .layout-mobile .welcome-card__btn, .layout-mobile .modal__actions .welcome-card__btn, .modal__actions .btn-danger {
  width: 100%;
}
.modal.modal--logout .modal__text {
  font-size: var(--size-16);
  color: var(--color-text-main);
}

/* ✅ Mobile modal: px only */
@media (max-width: 768px) {
  .modal__content {
    width: calc(100% - 48px);
    margin: 18vh auto 0;
    border-radius: 8px;
    padding: 40px 24px 30px;
  }
  .modal__icon {
    width: 34px;
    height: 34px;
    margin: 0 auto 12px;
  }
  .modal__title {
    font-size: 24px;
    margin-bottom: 12px;
  }
  .modal__text {
    font-size: 16px;
  }
  .modal__actions {
    margin-top: 24px;
    gap: 12px;
  }
  .modal.modal--logout .modal__text {
    font-size: 14px;
  }
}
/* =========================================================
   STEP INDICATOR
   ========================================================= */
.step-indicator {
  display: flex;
  gap: var(--size-90);
  border-bottom: 1px solid var(--color-border);
}
.step-indicator__item {
  display: flex;
  flex-flow: column;
  align-items: center;
  gap: var(--size-6);
  color: var(--color-text-muted);
  font-size: var(--size-16);
  line-height: 1.375;
  white-space: nowrap;
  text-align: center;
  padding-bottom: var(--size-10);
  margin-bottom: -1px;
}
.step-indicator__dot {
  width: var(--size-28);
  height: var(--size-28);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--size-16);
  background: var(--color-border);
  color: #fff;
  flex: 0 0 auto;
}
.step-indicator__label {
  line-height: 1.375;
}
.step-indicator .is-active {
  color: var(--color-primary-hover);
  border-bottom: 4px solid var(--color-primary-hover);
}
.step-indicator .is-active .step-indicator__dot {
  background: var(--color-primary-hover);
  font-weight: 700;
}
.step-indicator .is-active .step-indicator__label {
  font-weight: 700;
}
.step-indicator .is-completed {
  color: var(--color-text-main);
}
.step-indicator .is-completed .step-indicator__dot {
  background-color: var(--color-green-light);
  background-image: url("../images/icon-check.svg");
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: center;
  font-size: 0;
}
.step-indicator .is-disabled {
  opacity: 0.9;
}

@media (max-width: 1024px) {
  .step-indicator {
    justify-content: center;
    gap: var(--size-18);
    flex-wrap: wrap;
  }
}
/* =========================================================
   TOASTBAR
   ========================================================= */
.toastbar {
  position: fixed;
  bottom: var(--size-20);
  left: 50%;
  transform: translateX(-50%) translateY(10px);
  z-index: 10000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.toastbar.is-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.toastbar__inner {
  min-height: var(--size-42);
  padding: var(--size-12) var(--size-20);
  border-radius: var(--size-12);
  background: var(--color-toastbar-green);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--size-8);
  font-weight: 700;
  font-size: var(--size-12);
  min-width: var(--size-300);
}

.toastbar__icon {
  width: var(--size-18);
  height: var(--size-18);
  background-image: url("../images/icon-check3.svg");
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: center;
  flex: 0 0 auto;
}

.toast--warning .toastbar__inner {
  background: var(--color-yellow-dark);
}
.toast--warning .toastbar__icon {
  display: none;
}

.toast--error .toastbar__inner {
  background: var(--color-danger);
}
.toast--error .toastbar__icon {
  display: none;
}

/* ✅ Mobile toastbar: px only */
@media (max-width: 768px) {
  .toastbar {
    left: 50%;
    top: 20px;
    bottom: unset;
    transform: translateX(-50%) translateY(-10px);
  }
  .toastbar.is-visible {
    transform: translateX(-50%) translateY(0px);
  }
  .toastbar__inner {
    width: 100%;
    justify-content: center;
    min-height: 42px;
    padding: 12px 14px;
    border-radius: 12px;
    gap: 8px;
    font-size: 12px;
    min-width: 300px;
  }
  .toastbar__icon {
    width: 18px;
    height: 18px;
  }
}
/* =========================================================
   SCREEN: LOGIN / OTP
   ========================================================= */
#login-container,
#otp-container,
.login-layout {
  min-height: 100vh;
  background-color: var(--color-bg-page-login);
}

.login-layout {
  display: flex;
  flex-flow: row wrap;
  /* OTP */
  /* Error card */
}
.login-layout .login-hero {
  width: 44vw;
  background-size: cover;
  background-position: center;
  overflow: hidden;
}
.login-layout .login-hero__image, .login-layout .login-hero__image-2 {
  width: 100%;
  height: 100%;
  min-height: 320px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url("../images/login-hero.png");
}
.login-layout .login-hero__image--placeholder, .login-layout .login-hero__image-2--placeholder {
  background: var(--color-bg-placeholder);
}
.login-layout .login-hero__image-2, .login-layout .login-hero__image-2-2 {
  display: none;
}
.login-layout .login-card {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  background-image: url("../images/login-bg.svg");
  background-position: left bottom;
  background-repeat: no-repeat;
  background-size: 48% auto;
  padding: 24px;
  text-align: center;
}
.login-layout .login-card__inner {
  padding: var(--size-48) var(--size-40);
  border: 1px solid var(--color-border);
  border-radius: var(--size-8);
  background-color: var(--color-bg-page-login);
  width: 80.5%;
  min-height: var(--size-580);
}
.login-layout .login-card__logo {
  margin: 0 auto var(--size-50);
  width: var(--size-50);
}
.login-layout .login-card__logo img {
  display: block;
  width: 100%;
}
.login-layout .login-form {
  margin: 0 auto;
  width: 68%;
}
.login-layout .login-form:not(:first-child) {
  margin-top: var(--size-40);
}
.login-layout .login-form__field {
  display: flex;
  flex-direction: column;
  gap: var(--size-4);
}
.login-layout .login-form__label {
  font-size: var(--size-15);
  line-height: 1.333;
  font-weight: 600;
  color: var(--color-text-secondary);
  text-align: initial;
}
.login-layout .login-form__required {
  color: var(--color-danger);
}
.login-layout .login-form .btn, .login-layout .login-form .btn-big, .login-layout .login-form .btn-gradient, .login-layout .login-form .layout-mobile .welcome-card__btn, .layout-mobile .login-layout .login-form .welcome-card__btn, .login-layout .login-form .btn-danger {
  margin-top: var(--size-40);
}
.login-layout .login-form__error {
  font-size: var(--size-12);
  color: var(--color-danger);
  margin-top: var(--size-4);
}
.login-layout .otp-card {
  position: relative;
}
.login-layout .otp-card__top {
  text-align: start;
}
.login-layout .otp-card__top:not(:last-child) {
  margin-bottom: var(--size-40);
}
.login-layout .otp-form:not(:first-child) {
  margin-top: var(--size-40);
}
.login-layout .otp-form .btn, .login-layout .otp-form .btn-big, .login-layout .otp-form .btn-gradient, .login-layout .otp-form .layout-mobile .welcome-card__btn, .layout-mobile .login-layout .otp-form .welcome-card__btn, .login-layout .otp-form .btn-danger {
  margin-top: var(--size-40);
  width: 68%;
}
.login-layout .otp-inputs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--size-12);
  max-width: var(--size-350);
  margin-inline: auto;
}
.login-layout .otp-inputs .otp-input {
  height: var(--size-90);
  font-size: var(--size-22);
  text-align: center;
  font-weight: 500;
}
.login-layout .otp-timer-main {
  margin-top: var(--size-16);
  font-size: var(--size-16);
}
.login-layout .otp-resend-link {
  font-size: var(--size-14);
  line-height: 3.14;
  display: block;
  margin-top: var(--size-12);
  text-align: center;
  background-color: transparent;
  margin-inline: auto;
}
.login-layout .otp-resend-link:hover:not(:disabled) {
  color: var(--color-primary-hover);
}
.login-layout .otp-resend-link:disabled {
  opacity: 0.85;
  cursor: default;
}
.login-layout .error-card__top {
  text-align: start;
}
.login-layout .error-card__top:not(:last-child) {
  margin-bottom: var(--size-90);
}
.login-layout .error-card__icon {
  margin-bottom: var(--size-40);
  display: flex;
  justify-content: center;
  width: var(--size-65);
  margin-inline: auto;
}
.login-layout .error-card__icon img {
  display: block;
  width: 100%;
}

/* =========================================================
   SCREEN: LOGIN / OTP MOBILE
   ========================================================= */
@media (max-width: 768px) {
  /* -------------------------
    Screen fade-in helper
  ------------------------- */
  [data-screen].screen-enter {
    opacity: 0;
  }
  [data-screen].screen-enter.screen-enter--active {
    opacity: 1;
    transition: opacity 0.35s ease;
  }
  .login-layout {
    flex-flow: column;
    position: relative;
    /* OTP */
    /* Error card */
  }
  .login-layout .login-hero {
    width: 100vw;
    height: 100vh;
    background-color: #fff;
    position: relative;
    overflow: hidden;
  }
  .login-layout .login-hero__image, .login-layout .login-hero__image-2 {
    width: calc(50% - 5px);
    transform: translateY(0%) translateX(0%);
    transition: all 0.3s ease-in-out;
    position: absolute;
    top: 0;
    height: 100%;
    display: block;
    filter: blur(1.5px);
  }
  .login-layout .login-hero__image {
    left: 0;
    background-image: url("../images/login-hero-mobile-left.png");
  }
  .login-layout .login-hero__image-2 {
    right: 0;
    background-image: url("../images/login-hero-mobile-right.png");
  }
  .login-layout .login-hero::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(228, 228, 228, 0.7);
    z-index: 2;
  }
  .login-layout .login-card {
    position: absolute !important;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 3;
    width: calc(100% - 48px);
    max-width: 400px;
    display: block;
    padding: 0;
  }
  .login-layout .login-card__inner {
    padding: 40px 35px;
    border: none;
    border-radius: 8px;
    width: 100%;
    min-height: 320px;
  }
  .login-layout .login-card__logo {
    margin: 0 auto 32px;
    width: 50px;
  }
  .login-layout .login-form {
    width: 100%;
  }
  .login-layout .login-form:not(:first-child) {
    margin-top: 32px;
  }
  .login-layout .login-form__field {
    gap: 4px;
  }
  .login-layout .login-form__label {
    font-size: 15px;
  }
  .login-layout .login-form .btn, .login-layout .login-form .btn-big, .login-layout .login-form .btn-gradient, .login-layout .login-form .layout-mobile .welcome-card__btn, .layout-mobile .login-layout .login-form .welcome-card__btn, .login-layout .login-form .btn-danger {
    margin-top: 32px;
  }
  .login-layout .login-form__error {
    font-size: 12px;
    margin-top: 4px;
  }
  .login-layout .otp-card {
    position: relative;
  }
  .login-layout .otp-card__top {
    text-align: start;
  }
  .login-layout .otp-card__top:not(:last-child) {
    margin-bottom: var(--size-40);
  }
  .login-layout .otp-form:not(:first-child) {
    margin-top: 40px;
  }
  .login-layout .otp-form .btn, .login-layout .otp-form .btn-big, .login-layout .otp-form .btn-gradient, .login-layout .otp-form .layout-mobile .welcome-card__btn, .layout-mobile .login-layout .otp-form .welcome-card__btn, .login-layout .otp-form .btn-danger {
    margin-top: 40px;
    width: 100%;
  }
  .login-layout .otp-inputs {
    gap: 8px;
  }
  .login-layout .otp-inputs .otp-input {
    height: 52px;
    font-size: 22px;
  }
  .login-layout .otp-timer-main {
    margin-top: 24px;
    font-size: 16px;
  }
  .login-layout .otp-resend-link {
    font-size: 16px;
    line-height: 1.375;
    margin-top: 32px;
  }
  .login-layout .error-card__top:not(:last-child) {
    margin-bottom: 32px;
  }
  .login-layout .error-card__icon {
    margin-bottom: 12px;
    width: 44px;
  }
  .login-layout .login-card,
  .login-layout .login-hero::before,
  .login-layout .login-hero__image,
  .login-layout .login-hero__image-2 {
    will-change: opacity, transform;
  }
  .login-layout.auth-exit {
    /* 1) Card fade out */
    /* 2) Overlay fade out (after card) */
    /* 3) Images slide (after overlay starts fading) */
  }
  .login-layout.auth-exit .login-card {
    opacity: 0;
    transform: translate(-50%, -54%);
    transition: opacity 0.25s ease, transform 0.25s ease;
  }
  .login-layout.auth-exit .login-hero::before {
    opacity: 0;
    transition: opacity 0.25s ease;
    transition-delay: 0.25s;
  }
  .login-layout.auth-exit .login-hero__image {
    transform: translateY(-100%) translateX(0%);
    transition: transform 0.45s ease;
    transition-delay: 0.5s;
    will-change: transform;
    filter: blur(0);
  }
  .login-layout.auth-exit .login-hero__image-2 {
    transform: translateY(100%) translateX(0%);
    transition: transform 0.45s ease;
    transition-delay: 0.5s;
    will-change: transform;
    filter: blur(0);
  }
}
/* =========================================================
   SCREEN: WELCOME
   ========================================================= */
.welcome-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--size-34) var(--size-60) var(--size-60);
}

.welcome-card {
  width: 100%;
  background: var(--color-bg-card);
  border-radius: var(--size-12);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  background-image: url("../images/login-bg.svg");
  background-position: left bottom;
  background-size: var(--size-320) auto;
  background-repeat: no-repeat;
  position: relative;
}
.welcome-card .welcome-lottie {
  position: absolute;
  width: var(--size-910);
  height: var(--size-910);
  top: 0%;
  left: 50%;
  transform: translate(-50%, -30%);
}
.welcome-card__inner {
  max-width: var(--size-600);
  margin: 0 auto;
  padding: var(--size-100) var(--size-56);
  text-align: center;
}
.welcome-card__greeting {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--size-8);
  font-weight: 700;
  font-size: var(--size-28);
  line-height: 1.32;
  margin-bottom: var(--size-8);
}
.welcome-card__greeting .icon-waving-hand {
  width: var(--size-21);
  height: var(--size-21);
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: center;
}
.welcome-card__title {
  font-weight: 700;
  font-size: var(--size-28);
  line-height: 1.35;
  color: var(--color-primary);
  margin-bottom: var(--size-32);
}
.welcome-card__text {
  margin: 0 auto;
  max-width: var(--size-500);
}
.welcome-card__text, .welcome-card__text p {
  font-size: var(--size-22);
  line-height: 1.33;
  display: flex;
  flex-direction: column;
  gap: var(--size-24);
  align-items: center;
  text-align: center;
  font-weight: 600;
}
.welcome-card__text p, .welcome-card__text p p {
  margin: 0;
}
.welcome-card__btn {
  margin-top: var(--size-40);
  min-width: var(--size-360);
}

/* Mobile */
@media (max-width: 768px) {
  .welcome-page {
    min-height: 100vh;
    padding: 24px;
    background-size: 205px auto;
    background-repeat: no-repeat;
    background-position: left bottom;
    background-image: url("../images/login-bg.svg");
  }
  .welcome-card {
    background: transparent;
    -o-border-image: unset;
       border-image: unset;
    box-shadow: unset;
    overflow: visible;
    position: static;
  }
  .welcome-card .welcome-lottie {
    position: absolute;
    width: 100%;
    height: 100vw;
    max-height: 400px;
    max-width: 400px;
    top: 0%;
    left: 50%;
    transform: translate(-50%, 0%);
  }
  .welcome-card__inner {
    max-width: 100%;
    padding: 0;
  }
  .welcome-card__greeting {
    gap: 8px;
    font-size: 20px;
    margin-bottom: 12px;
  }
  .welcome-card__greeting .icon-waving-hand {
    width: 17px;
    height: 17px;
  }
  .welcome-card__title {
    font-size: 22px;
    margin-bottom: 24px;
  }
  .welcome-card__text {
    max-width: 100%;
  }
  .welcome-card__text, .welcome-card__text p {
    font-size: 16px;
    gap: 16px;
    align-items: center;
    text-align: center;
  }
  .welcome-card__text p:not(:first-child), .welcome-card__text p p:not(:first-child) {
    font-weight: 400;
  }
  .welcome-card__text p:first-child, .welcome-card__text p p:first-child {
    font-weight: 700;
  }
  .welcome-card__btn {
    margin-top: 44px;
    min-width: 294px;
  }
}
/* =========================================================
   SCREEN: PACKAGES (DESKTOP)
   ========================================================= */
.packages-page {
  padding: var(--size-20) var(--size-56) var(--size-60);
}

.packages-topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--size-16);
  margin-bottom: var(--size-24);
}
.packages-topbar__greeting {
  text-align: right;
}
.packages-topbar__hello {
  font-size: var(--size-24);
  font-weight: 700;
  line-height: 1.2;
}
.packages-topbar__subtitle {
  font-size: var(--size-22);
  font-weight: 700;
  color: var(--color-text-secondary);
  line-height: 1.2;
  margin-top: var(--size-16);
}

/* HERO */
.packages-hero {
  position: relative;
  border-radius: var(--size-12);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}
.packages-hero:not(:last-child) {
  margin-bottom: var(--size-60);
}
.packages-hero__img {
  height: var(--size-320);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: var(--color-bg-placeholder);
  position: relative;
}
.packages-hero__img::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.3);
  z-index: 1;
}
.packages-hero__title {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: var(--size-24);
  text-align: center;
  color: #fff;
  font-weight: 800;
  font-size: var(--size-50);
  line-height: 1;
  z-index: 2;
}
.packages-hero__badge {
  position: absolute;
  z-index: 2;
  top: var(--size-20);
  left: var(--size-20);
  background: rgba(255, 255, 255, 0.8);
  color: var(--color-text-main);
  padding: var(--size-8) var(--size-12);
  border-radius: var(--size-12);
  font-size: var(--size-14);
  min-width: var(--size-300);
  line-height: 1.15;
  font-weight: 600;
  display: inline-flex;
  gap: var(--size-24);
  align-items: center;
}
.packages-hero__badge::before {
  content: "";
  width: var(--size-26);
  height: var(--size-26);
  background-image: url("../images/icon-building.svg");
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: center;
  display: block;
}
.packages-hero__badge .address {
  display: block;
  font-size: var(--size-12);
  font-weight: 400;
  margin-top: var(--size-4);
}

/* if you render two hero images */
.packages-hero__img--mobile {
  display: none;
}

.packages-hero__img--desktop {
  display: block;
}

/* CURRENT CARD */
.packages-current {
  margin-bottom: var(--size-24);
}
.packages-current__card {
  background: var(--color-bg-card);
  border-radius: var(--size-12);
  box-shadow: var(--shadow-card);
  padding: var(--size-24);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--size-24);
}
.packages-current__right {
  gap: var(--size-16);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.packages-current .pkg-card__tag {
  display: inline-flex;
}
.packages-current__download {
  display: inline-flex;
  align-items: center;
  gap: var(--size-8);
  color: var(--color-text-main);
  font-weight: 600;
  text-decoration: underline;
  transition: color 0.25s;
}
.packages-current__download:hover {
  color: var(--color-primary-hover);
}
.packages-current__download-icon {
  width: var(--size-14);
  height: var(--size-14);
  background-image: url("../images/icon-download.svg");
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: center;
  display: inline-block;
}
.packages-current__title {
  font-size: var(--size-22);
  font-weight: 700;
  line-height: 1.333;
}
.packages-current__sub {
  font-size: var(--size-20);
  line-height: 1.333;
}

/* UPGRADES WRAPPER */
.packages-upgrades {
  margin-bottom: var(--size-24);
}
.packages-upgrades__card {
  background: var(--color-bg-card);
  border-radius: var(--size-12);
  box-shadow: var(--shadow-card);
  padding: var(--size-60) var(--size-80) var(--size-30);
}
.packages-upgrades__head {
  text-align: center;
  margin-bottom: var(--size-48);
}
.packages-upgrades__title {
  font-size: var(--size-22);
  font-weight: 700;
  margin-bottom: var(--size-8);
  line-height: 1;
}
.packages-upgrades__sub {
  font-size: var(--size-18);
  font-weight: 400;
  line-height: 1.333;
}
.packages-upgrades__sub strong {
  font-weight: 600;
}

/* GRID */
.packages-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--size-28);
}

.packages-grid--3 {
  grid-template-columns: repeat(3, 1fr);
  gap: var(--size-100);
}

.packages-mobile-home {
  position: relative;
  z-index: 2;
}

/* =========================================================
   COMPONENT: PACKAGE CARD (shared desktop/mobile)
   ========================================================= */
.pkg-card {
  background: var(--color-bg-card);
  border-radius: var(--size-12);
  padding: var(--size-24);
  box-shadow: var(--shadow-card);
  color: var(--color-text-secondary);
}
.pkg-card__aligntop {
  min-height: var(--size-145);
}
.pkg-card__top {
  display: flex;
  align-items: center;
  gap: var(--size-16);
  margin-bottom: var(--size-16);
}
.pkg-card__tag {
  padding: var(--size-4) var(--size-14);
  border-radius: var(--radius-pill);
  border: 1px solid var(--card-border);
  color: var(--card-border);
  background-color: var(--card-bg);
  font-size: var(--size-12);
  line-height: 1.5;
  font-weight: 600;
  display: inline-flex;
  gap: var(--size-8);
  align-items: center;
}
.pkg-card__tag.tag-standard {
  --card-border: var(--color-pink-dark);
  --card-bg: var(--color-pink-light);
}
.pkg-card__tag.tag-basic {
  --card-border: var(--color-blue-dark);
  --card-bg: var(--color-blue-light);
}
.pkg-card__tag.tag-silver {
  --card-border: var(--color-silver-dark);
  --card-bg: var(--color-silver-light);
}
.pkg-card__tag.tag-gold {
  --card-border: var(--color-yellow-dark);
  --card-bg: var(--color-yellow-light);
}
.pkg-card__tag.tag-popular {
  --card-border: var(--color-green-dark);
  --card-bg: var(--color-green-light);
}
.pkg-card__tag.tag-popular::before {
  content: "";
  width: var(--size-12);
  height: var(--size-12);
  background-image: url("../images/icon-stars.svg");
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: center;
  display: block;
}
.pkg-card__tag.tag-popular.tag-popular-blue {
  --card-border: var(--color-tag-blue);
  --card-bg: var(--color-tag-blue-light);
  color: var(--color-tag-blue);
}
.pkg-card__tag.tag-popular.tag-popular-blue::before {
  background-image: url("../images/icon-stars-blue.svg");
}
.pkg-card__title {
  font-size: var(--size-21);
  font-weight: 600;
  margin-bottom: var(--size-6);
  line-height: 1.2;
}
.pkg-card__desc {
  font-size: var(--size-14);
  line-height: 1.35;
  font-weight: 600;
}
.pkg-card__price {
  display: flex;
  align-items: flex-end;
  gap: var(--size-16);
  margin-top: var(--size-24);
}
.pkg-card__old {
  text-decoration: line-through;
  font-size: var(--size-14);
  font-weight: 700;
  line-height: 1.2;
}
.pkg-card__current {
  font-size: var(--size-24);
  font-weight: 700;
  line-height: 1;
}
.pkg-card__cta {
  width: 100%;
  margin-top: var(--size-48);
  margin-bottom: var(--size-40);
}
.pkg-card__more {
  font-size: var(--size-14);
  font-weight: 600;
  line-height: 1.714;
  margin-bottom: var(--size-12);
}
.pkg-card__bullets {
  display: grid;
  gap: var(--size-14);
  text-align: right;
  font-size: var(--size-12);
  line-height: 1.5;
}
.pkg-card__bullets li {
  display: flex;
  align-items: center;
  gap: var(--size-12);
}
.pkg-card__bullets li:before {
  content: "";
  width: var(--size-18);
  height: var(--size-18);
  background-image: url("../images/icon-check.svg");
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: center;
  display: block;
}
.pkg-card__disclaimer {
  margin-top: var(--size-14);
  font-size: var(--size-10);
  line-height: 1.5;
  font-weight: 600;
}

.confirmation-page .packages-topbar__subtitle {
  display: none;
}

/* =========================================================
   SCREEN: PACKAGES (MOBILE)
   ========================================================= */
@media (max-width: 768px) {
  .packages-page {
    padding: 16px 24px 60px;
    background-image: url("../images/packages-bg-mobile.svg");
    background-size: 50% auto;
    background-position: bottom left;
    background-repeat: no-repeat;
  }
  .packages-hero__img--desktop {
    display: none;
  }
  .packages-hero__img--mobile {
    display: block;
  }
  .packages-hero__title.hide-on-mobile {
    display: none;
  }
  .packages-topbar {
    margin-bottom: 15px;
  }
  .packages-topbar__hello {
    font-size: 20px;
    font-weight: 600;
  }
  .packages-topbar__subtitle {
    font-size: 16px;
    font-weight: 600;
    margin-top: 0;
    color: var(--color-text-main);
  }
  .packages-mobile-title {
    margin-bottom: 15px;
    line-height: 1.3;
    text-align: center;
  }
  .packages-mobile-title__hello {
    font-size: 20px;
    font-weight: 600;
  }
  .packages-mobile-title__main {
    font-size: 24px;
    font-weight: 700;
  }
  .packages-mobile-title__main br {
    display: none;
  }
  .packages-hero {
    margin-bottom: 24px;
    border-radius: 12px;
  }
  .packages-hero .packages-hero__img {
    height: 180px;
  }
  .packages-hero .packages-hero__img:before {
    display: none;
  }
  .packages-hero .packages-hero__badge {
    left: 16px;
    right: 16px;
    top: 16px;
    padding: 8px 13px;
    gap: 23px;
    border-radius: 12px;
  }
  .packages-hero .packages-hero__badge .packages-hero__text {
    font-size: 14px;
  }
  .packages-hero .packages-hero__badge .packages-hero__text .address {
    font-size: 12px;
  }
  .pkg-card__tag {
    font-size: 12px;
    padding: 2px 14px;
  }
  .pkg-card__tag.tag-popular::before {
    width: 12px;
    height: 12px;
  }
  .packages-current__card {
    border-radius: 12px;
    padding: 18px;
    margin-bottom: 24px;
    gap: 0;
    flex-direction: column;
    align-items: flex-start;
  }
  .packages-current__right {
    gap: 10px;
  }
  .packages-current__download {
    gap: 6px;
    font-size: 16px;
  }
  .packages-current__download-icon {
    width: 14px;
    height: 14px;
  }
  .packages-current__title {
    font-size: 18px;
    font-weight: 600;
  }
  .packages-current__sub {
    font-size: 14px;
    font-weight: 400;
  }
  .packages-upgrades__card {
    border-radius: 12px;
    box-shadow: var(--shadow-card);
    padding: 20px 24px 28px;
    margin-bottom: 24px;
  }
  .packages-upgrades__card .pkg-card__tag {
    margin-bottom: 12px;
  }
  .packages-upgrades__card .btn-gradient, .packages-upgrades__card .layout-mobile .welcome-card__btn, .layout-mobile .packages-upgrades__card .welcome-card__btn {
    margin-bottom: 12px;
  }
  .packages-upgrades__title {
    text-align: center;
    font-size: 18px;
    font-weight: 700;
    margin: 0 0 8px;
    line-height: 1.38;
  }
  .packages-upgrades__sub {
    text-align: center;
    font-size: 14px;
    line-height: 1.28;
    margin-bottom: 24px;
  }
  .packages-upgrades__sub strong {
    font-size: 16px;
  }
  .packages-mobile-list__header {
    font-size: 22px;
    font-weight: 600;
    margin-bottom: 24px;
  }
  .packages-mobile-list__cards {
    display: grid;
    gap: 24px;
  }
  .packages-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  /* mobile card tweaks */
  .pkg-card {
    border-radius: 12px;
    padding: 12px 24px 24px;
    background-color: var(--color-bg-card-mobile);
  }
  .pkg-card__aligntop {
    min-height: unset;
  }
  .pkg-card__top {
    gap: 12px;
    margin-bottom: 12px;
    justify-content: flex-end;
  }
  .pkg-card__title {
    margin-bottom: 0;
    font-size: 21px;
  }
  .pkg-card__desc {
    font-size: 14px;
    margin-top: 4px;
  }
  .pkg-card__price {
    gap: 24px;
    margin-top: 6px;
  }
  .pkg-card__current {
    font-size: 24px;
  }
  .pkg-card__old {
    font-size: 14px;
  }
  .pkg-card__cta {
    margin-top: 24px;
    margin-bottom: 24px;
  }
  .pkg-card__more {
    font-size: 14px;
    margin-bottom: 12px;
  }
  .pkg-card .btn, .pkg-card .btn-big, .pkg-card .btn-gradient, .pkg-card .btn-danger, .pkg-card .layout-mobile .welcome-card__btn, .layout-mobile .pkg-card .welcome-card__btn {
    min-height: 38px;
    font-size: 14px;
  }
  .pkg-card__bullets {
    gap: 4px;
    font-size: 14px;
  }
  .pkg-card__bullets li {
    font-weight: 700;
    gap: 12px;
  }
  .pkg-card__bullets li:before {
    width: 18px;
    height: 18px;
  }
  .pkg-card__disclaimer {
    margin-top: 8px;
    font-size: 12px;
  }
  .confirmation-page .packages-topbar {
    text-align: center;
    justify-content: center;
    margin-bottom: 24px;
  }
  .confirmation-page .packages-mobile-title {
    margin-bottom: 48px;
  }
  .confirmation-page .packages-upgrades__card {
    background-color: transparent;
    box-shadow: none;
    padding: 0;
  }
  .confirmation-page .packages-mobile-list__header {
    margin-bottom: 12px;
    text-align: center;
  }
}
/* =========================================================
   SCREEN: FLOW STEP 1
   ========================================================= */
.flow-page {
  padding: var(--size-40) var(--size-80) var(--size-60);
}

.flow-layout {
  display: flex;
  flex-flow: row wrap;
  gap: var(--size-24);
}

.flow-left {
  width: 41.5%;
  position: relative;
  border-radius: var(--size-12);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  background: var(--color-bg-placeholder);
}
.flow-left__img {
  width: 100%;
  height: 100%;
  min-height: var(--size-705);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.flow-left .packages-hero__badge {
  right: var(--size-28);
  left: auto;
}

.flow-right {
  flex: 1;
  display: flex;
  align-items: stretch;
}

.flow-card {
  width: 100%;
  background: var(--color-bg-card);
  border-radius: var(--size-12);
  box-shadow: var(--shadow-card);
  padding: var(--size-36) var(--size-40) var(--size-30);
  display: flex;
  flex-flow: column;
}

.flow-steps {
  margin-bottom: var(--size-40);
}

.flow-subtitle {
  margin-top: var(--size-30);
  font-size: var(--size-18);
  line-height: 1.2;
  font-weight: 700;
}

.flow-options {
  margin-top: var(--size-48);
  display: flex;
  flex-flow: row wrap;
  gap: var(--size-24);
}

.flow-option {
  cursor: pointer;
  display: block;
}
.flow-option__radio {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.flow-option__box {
  position: relative;
  border: 2px solid var(--color-bg-disabled);
  border-radius: var(--size-16);
  padding: var(--size-16);
  min-height: var(--size-180);
  min-width: var(--size-170);
  transition: border-color 0.25s, box-shadow 0.25s;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--size-16);
}
.flow-option__top {
  position: absolute;
  top: var(--size-16);
  right: var(--size-16);
  width: var(--size-18);
  height: var(--size-18);
  display: flex;
  align-items: center;
  justify-content: center;
}
.flow-option__dot {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 2px solid var(--color-primary-hover);
  background: transparent;
  display: inline-block;
}
.flow-option__name {
  font-size: var(--size-16);
  line-height: 1.375;
  font-weight: 600;
  color: var(--color-text-main);
  text-align: center;
}
.flow-option__pdf {
  font-size: var(--size-12);
  color: var(--color-text-secondary);
  text-decoration: underline;
  display: inline-flex;
  align-items: center;
  gap: var(--size-8);
}
.flow-option__pdf:hover {
  color: var(--color-text-main);
}
.flow-option__pdf-icon {
  width: var(--size-14);
  height: var(--size-18);
  display: inline-block;
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: center;
  background-image: url("../images/icon-pdf.svg");
}
.flow-option.is-selected .flow-option__box, .flow-option:hover .flow-option__box {
  border-color: var(--color-primary-hover);
}
.flow-option.is-selected .flow-option__dot {
  background: var(--color-primary-hover);
  box-shadow: inset 0 0 0 3px #fff;
}

.flow-actions {
  width: 100%;
  margin-top: auto;
  padding-top: var(--size-16);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--size-16);
  align-self: flex-end;
}
.flow-actions #flow-next {
  min-width: var(--size-145);
}

/* =========================================================
   SCREEN: FLOW STEP 2
   ========================================================= */
.details-title {
  display: inline-flex;
  align-items: center;
  gap: var(--size-16);
}
.details-title__icon {
  width: var(--size-22);
  height: var(--size-20);
  background-image: url("../images/icon-user.svg");
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: center;
  display: inline-block;
}

.details-body {
  position: relative;
  min-height: var(--size-260);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  margin-top: var(--size-80);
  padding: var(--size-24);
  display: flex;
  align-items: center;
}

.details-edit {
  position: absolute;
  top: var(--size-30);
  left: var(--size-24);
  background: transparent;
  color: var(--color-text-main);
  font-weight: 600;
  font-size: var(--size-18);
  line-height: 1.333;
  display: inline-flex;
  align-items: center;
  gap: var(--size-10);
}
.details-edit:hover {
  color: var(--color-primary-hover);
}
.details-edit__icon {
  width: var(--size-20);
  height: var(--size-20);
  background-image: url("../images/icon-edit.svg");
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: center;
}

.details-list {
  display: grid;
  gap: var(--size-24);
}

.details-value {
  font-size: var(--size-18);
  font-weight: 600;
  line-height: 1.333;
}

/* edit mode */
.details-fields {
  display: grid;
  gap: var(--size-16);
  justify-items: end;
}

.details-field {
  width: var(--size-300);
}

.details-inp {
  text-align: right;
  min-height: var(--size-40);
  border-radius: var(--size-4);
}
.details-inp:not(:-moz-placeholder-shown) {
  border-color: var(--color-border);
  box-shadow: none;
}
.details-inp:focus, .details-inp:active, .details-inp, .details-inp:not(:placeholder-shown) {
  border-color: var(--color-border);
  box-shadow: none;
}

.details-error {
  width: min(100%, 380px);
  font-size: var(--size-12);
  color: var(--color-danger);
  margin-top: var(--size-4);
  text-align: right;
}

.details-actions {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--size-16);
}

.details-actions .btn, .details-actions .btn-big, .details-actions .btn-gradient, .details-actions .btn-danger, .details-actions .layout-mobile .welcome-card__btn, .layout-mobile .details-actions .welcome-card__btn {
  min-width: var(--size-170);
}

/* back link */
.details-back {
  background: transparent;
  color: var(--color-text-secondary);
  font-weight: 700;
  font-size: var(--size-16);
  text-decoration: underline;
  display: inline-flex;
  align-items: center;
  gap: var(--size-8);
}
.details-back:hover {
  color: var(--color-text-main);
}

.details-back__icon {
  width: var(--size-14);
  height: var(--size-14);
  background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTMiIGhlaWdodD0iMTMiIHZpZXdCb3g9IjAgMCAxMyAxMyIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTkuNzQzNzIgMTAuNjU3NUMxMC4wODU0IDEwLjk2NDYgMTAuMDg1NCAxMS40NjI2IDkuNzQzNzIgMTEuNzY5N0M5LjQwMjAxIDEyLjA3NjggOC44NDc5OSAxMi4wNzY4IDguNTA2MjggMTEuNzY5N0wzLjI1NjI4IDcuMDUxMzFDMi45MjUwMiA2Ljc1MzYgMi45MTM0NCA2LjI3NDIzIDMuMjI5OTkgNS45NjM4Nkw4LjQ1MzcgMS4yNTUwMUM4Ljc4MDI0IDAuOTM0ODU5IDkuMzMzNzQgMC45MTMyMyA5LjY4OTk3IDEuMjA2NzFDMTAuMDQ2MiAxLjUwMDE4IDEwLjA3MDMgMS45OTc2MyA5Ljc0MzcyIDIuMzE3NzhMNS4wODYxMiA2LjQ3MTZMOS43NDM3MiAxMC42NTc1WiIgZmlsbD0iIzU1NTU1NSIvPgo8L3N2Zz4K");
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: center;
  display: inline-block;
}

/* responsive */
@media (max-width: 1100px) {
  .details-actions {
    flex-direction: column;
    align-items: stretch;
  }
  .details-actions .btn, .details-actions .btn-big, .details-actions .btn-gradient, .details-actions .btn-danger, .details-actions .layout-mobile .welcome-card__btn, .layout-mobile .details-actions .welcome-card__btn {
    width: 100%;
  }
  .details-back {
    justify-content: center;
  }
  .details-edit {
    position: static;
    margin-bottom: var(--size-16);
    justify-content: center;
    width: 100%;
  }
  .details-list,
  .details-fields {
    justify-items: stretch;
  }
  .details-field,
  .details-error {
    width: 100%;
  }
}
/* =========================================================
   SCREEN: FLOW STEP 3
   ========================================================= */
.meeting-fields {
  margin-top: var(--size-48);
  display: flex;
  gap: var(--size-18);
  align-items: flex-start;
  flex-wrap: wrap;
}

.meeting-field {
  position: relative;
  width: var(--size-290);
}
.meeting-field#time-field {
  width: var(--size-145);
}

.meeting-label {
  display: block;
  font-size: var(--size-16);
  line-height: 1.375;
  color: var(--color-text-secondary);
  margin-bottom: var(--size-4);
}

.meeting-input {
  width: 100%;
  min-height: var(--size-38);
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--size-4);
  padding: 0 var(--size-16);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--size-10);
  color: var(--color-text-main);
}
.meeting-input:disabled {
  background: var(--color-bg-disabled-light);
  color: var(--color-text-disabled);
  cursor: not-allowed;
}

.meeting-input__value {
  flex: 1;
  text-align: right;
}

.meeting-input__caret {
  width: var(--size-14);
  height: var(--size-14);
  background-image: url("../images/icon-chev-down.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100%;
  flex: 0 0 auto;
}

.meeting-input__icon--cal {
  width: var(--size-24);
  height: var(--size-24);
  background-image: url("../images/icon-calendar.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100%;
  flex: 0 0 auto;
}

/* calendar popover */
.calendar-popover {
  position: absolute;
  top: calc(100% + var(--size-12));
  right: 0;
  width: var(--size-300);
  background: #fff;
  border: 1px solid #000;
  border-radius: var(--size-12);
  box-shadow: var(--shadow-card);
  padding: var(--size-16);
  z-index: 50;
}

.calendar__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--size-12);
}

.calendar__nav {
  width: var(--size-32);
  height: var(--size-32);
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--color-border);
  font-size: var(--size-18);
  line-height: 1;
}
.calendar__nav:hover {
  border-color: var(--color-primary-hover);
}

.calendar__title {
  font-weight: 700;
  color: var(--color-text-main);
  font-size: var(--size-14);
}

.calendar__weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: var(--size-8);
  margin-bottom: var(--size-10);
}

.calendar__wd {
  font-size: var(--size-12);
  color: var(--color-text-secondary);
  text-align: center;
  font-weight: 700;
}

.calendar__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: var(--size-8);
}

.calendar__day {
  height: var(--size-32);
  border-radius: 999px;
  background: #fff;
  border: 1px solid transparent;
  font-size: var(--size-12);
  color: var(--color-text-main);
}
.calendar__day:hover:not(:disabled) {
  border-color: var(--color-primary-hover);
}
.calendar__day.is-selected {
  background: var(--color-primary);
  color: #fff;
  font-weight: 700;
}
.calendar__day.is-disabled, .calendar__day:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  pointer-events: none;
}

.calendar__day--empty {
  background: transparent;
  border: none;
  pointer-events: none;
}

/* time dropdown */
.time-popover {
  position: absolute;
  margin-top: -1px;
  top: 100%;
  right: 0;
  width: 100%;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 0 0 var(--size-4) var(--size-4);
  z-index: 50;
}

.time-popover__inner {
  padding: var(--size-16);
}

.time-popover__empty {
  font-size: var(--size-12);
  color: var(--color-text-secondary);
  padding: var(--size-8) var(--size-10);
}

.time-list {
  display: grid;
}

.time-item {
  width: 100%;
  align-items: center;
  justify-content: flex-start;
  padding: var(--size-8) 0;
  border-radius: var(--size-4);
  gap: var(--size-8);
}

.time-item__time {
  font-size: var(--size-15);
  color: var(--color-text-main);
}

.time-item__radio {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.time-item__dot {
  width: var(--size-24);
  height: var(--size-24);
  border-radius: 999px;
  border: 1px solid var(--color-text-main);
  background: #fff;
  display: inline-block;
}

.time-item__radio:checked + .time-item__dot {
  border-color: var(--color-primary-hover);
  background: var(--color-primary-hover);
  box-shadow: inset 0 0 0 3px #fff;
}

/* step 3 responsive */
@media (max-width: 1100px) {
  .meeting-actions {
    flex-direction: column;
    align-items: stretch;
  }
  .meeting-actions .btn, .meeting-actions .btn-big, .meeting-actions .btn-gradient, .meeting-actions .btn-danger, .meeting-actions .layout-mobile .welcome-card__btn, .layout-mobile .meeting-actions .welcome-card__btn {
    width: 100%;
  }
  .meeting-fields {
    justify-content: stretch;
  }
  .meeting-field {
    width: 100%;
  }
  .calendar-popover,
  .time-popover {
    width: 100%;
  }
}
/* =========================================================
   SCREEN: LEADFORM
   ========================================================= */
.leadform-subtitle {
  font-size: var(--size-18);
  line-height: 1.5;
  margin-top: var(--size-8);
  font-weight: 600;
}

/* form */
.leadform-form {
  width: 100%;
  margin-top: var(--size-40);
  height: 100%;
  display: flex;
  flex-flow: column;
}

.leadform-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--size-24) var(--size-32);
}

.leadform-field {
  display: flex;
  flex-direction: column;
  gap: var(--size-4);
}
.leadform-field--full {
  margin-top: var(--size-24);
}
.leadform-field--hp {
  max-width: var(--size-286);
  margin-top: var(--size-24);
}

.leadform-label {
  font-size: var(--size-18);
  line-height: 1.333;
}

.leadform-inp {
  width: 100%;
}

.leadform-textarea {
  min-height: var(--size-100);
  resize: none;
  padding: var(--size-14) var(--size-18);
}

/* business checkbox */
.leadform-business {
  margin-top: var(--size-30);
}

.leadform-checkbox {
  display: inline-flex;
  align-items: center;
  gap: var(--size-8);
  font-size: var(--size-18);
  font-weight: 600;
  cursor: pointer;
}
.leadform-checkbox input {
  display: none;
}
.leadform-checkbox__box {
  width: var(--size-24);
  height: var(--size-24);
  border-radius: var(--size-4);
  border: 1px solid var(--color-border);
  background: #fff;
  position: relative;
}
input:checked + .leadform-checkbox__box {
  background: var(--button-gradient);
  border-color: transparent;
}
input:checked + .leadform-checkbox__box::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("../images/icon-check2.svg");
  background-repeat: no-repeat;
  background-size: 80%;
  background-position: center;
}

/* errors */
.leadform-field.has-error .leadform-inp {
  border-color: var(--color-danger);
}

.leadform-error {
  margin-top: var(--size-4);
  font-size: var(--size-12);
  color: var(--color-danger);
  line-height: 1.25;
}

/* actions */
.leadform-actions {
  padding-top: var(--size-40);
  justify-content: flex-end;
}

.leadform-submit {
  min-width: var(--size-132);
}

/* =========================================================
   SCREEN: FLOW (MOBILE)
   ========================================================= */
@media (max-width: 768px) {
  .flow-page {
    padding: 24px 24px 30px;
  }
  .flow-layout {
    flex-direction: column;
    gap: 16px;
  }
  .flow-left {
    display: none;
  }
  .flow-card {
    background-color: transparent;
    padding: 0;
    box-shadow: none;
  }
  .leadform-subtitle {
    font-size: 14px;
    font-weight: 400;
  }
  .leadform-form {
    margin-top: 20px;
  }
  .leadform-grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .leadform-field {
    gap: 4px;
  }
  .leadform-field--hp {
    margin-top: 18px;
    max-width: 100%;
  }
  .leadform-label {
    font-size: 16px;
  }
  .leadform-textarea {
    min-height: 90px;
    padding: 10px 10px;
  }
  .leadform-business {
    margin-top: 18px;
  }
  .leadform-checkbox {
    gap: 8px;
    font-size: 18px;
  }
  .leadform-checkbox__box {
    width: 24px;
    height: 24px;
    border-radius: 4px;
  }
  .leadform-error {
    margin-top: 4px;
    font-size: 12px;
  }
  .flow-actions {
    padding-top: 24px;
  }
  .flow-actions .btn, .flow-actions .btn-big, .flow-actions .btn-gradient, .flow-actions .btn-danger, .flow-actions .layout-mobile .welcome-card__btn, .layout-mobile .flow-actions .welcome-card__btn {
    width: 100%;
  }
}
/* =========================================================
   SCREEN: CONFIRMATION
   ========================================================= */
.confirmation-card {
  display: flex;
  align-items: center;
  justify-content: center;
}

.confirmation-content {
  width: 100%;
  text-align: center;
  color: var(--color-text-secondary);
}

.confirmation-title {
  margin-bottom: var(--size-22);
  line-height: 1.2;
}
.confirmation-title:not(:last-child) {
  margin-bottom: var(--size-28);
}

.confirmation-line {
  font-size: var(--size-20);
  line-height: 1.2;
  font-weight: 600;
}
.confirmation-line:not(:last-child) {
  margin-bottom: var(--size-28);
}

/* confirmation responsive */
@media (max-width: 1100px) {
  .confirmation-card {
    min-height: auto;
  }
}
.legal-container .welcome-card__inner {
  max-width: 100%;
  padding: var(--size-40) var(--size-70) var(--size-60);
}
.legal-container .welcome-card__title {
  font-size: var(--size-22);
}
.legal-container .welcome-card__title:not(:last-child) {
  margin-bottom: var(--size-56);
}
.legal-container .welcome-card__text {
  max-width: 100%;
}
.legal-container .welcome-card__text, .legal-container .welcome-card__text p {
  font-size: var(--size-22);
  font-weight: 700;
  align-items: flex-start;
  text-align: right;
}
.legal-container .welcome-card__text a, .legal-container .welcome-card__text p a {
  text-decoration: underline;
}
.legal-container .welcome-card__text a:hover, .legal-container .welcome-card__text p a:hover {
  text-decoration: none;
}

@media screen and (max-width: 768px) {
  .legal-container .welcome-card__inner {
    padding: 0;
  }
  .legal-container .welcome-card__title {
    font-size: 18px;
    font-weight: 600;
  }
  .legal-container .welcome-card__title:not(:last-child) {
    margin-bottom: 16px;
  }
  .legal-container .welcome-card__text, .legal-container .welcome-card__text p {
    font-size: 14px;
    font-weight: 600;
    display: block;
  }
}/*# sourceMappingURL=style.css.map */