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-back, .btn-back-big, .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);
}

@font-face {
  font-family: "OpenSansHebrew";
  src: url("../fonts/OpenSansHebrew-Regular.eot"); /* IE9 Compat Modes */
  src: url("../fonts/OpenSansHebrew-Regular.eot?#iefix") format("embedded-opentype"), url("../fonts/OpenSansHebrew-Regular.woff2") format("woff2"), url("../fonts/OpenSansHebrew-Regular.woff") format("woff"), url("../fonts/OpenSansHebrew-Regular.ttf") format("truetype"), url("../fonts/OpenSansHebrew-Regular.svg#MyFont") format("svg");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "OpenSansHebrew";
  src: url("../fonts/OpenSans-Medium.eot"); /* IE9 Compat Modes */
  src: url("../fonts/OpenSans-Medium.eot?#iefix") format("embedded-opentype"), url("../fonts/OpenSans-Medium.woff2") format("woff2"), url("../fonts/OpenSans-Medium.woff") format("woff"), url("../fonts/OpenSans-Medium.ttf") format("truetype"), url("../fonts/OpenSans-Medium.svg#MyFont") format("svg");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "OpenSansHebrew";
  src: url("../fonts/OpenSansHebrew-SemiBold.eot"); /* IE9 Compat Modes */
  src: url("../fonts/OpenSansHebrew-SemiBold.eot?#iefix") format("embedded-opentype"), url("../fonts/OpenSansHebrew-SemiBold.woff2") format("woff2"), url("../fonts/OpenSansHebrew-SemiBold.woff") format("woff"), url("../fonts/OpenSansHebrew-SemiBold.ttf") format("truetype"), url("../fonts/OpenSansHebrew-SemiBold.svg#MyFont") format("svg");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "OpenSansHebrew";
  src: url("../fonts/OpenSansHebrew-Bold.eot"); /* IE9 Compat Modes */
  src: url("../fonts/OpenSansHebrew-Bold.eot?#iefix") format("embedded-opentype"), url("../fonts/OpenSansHebrew-Bold.woff2") format("woff2"), url("../fonts/OpenSansHebrew-Bold.woff") format("woff"), url("../fonts/OpenSansHebrew-Bold.ttf") format("truetype"), url("../fonts/OpenSansHebrew-Bold.svg#MyFont") format("svg");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
:root {
  --color-primary: #2194BE;
  --color-primary-hover: #00577C;
  --color-danger: #FC5555;
  --color-text-main: #212121;
  --color-text-secondary: #555555;
  --color-text-muted: #ACACAC;
  --color-border: #ACACAC;
  --color-bg-card: #fdfdfd;
  --color-bg-page: #fdfdfd;
  --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-text-disabled: #9F9C9C;
  --radius-pill: 999px;
  --font-family: "OpenSansHebrew", 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-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-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-80:clamp(42.67px, 5.556vw, 150.00px);
  --size-90:clamp(47.60px, 6.191vw, 150.00px);
  --size-100:clamp(53.33px, 6.944vw, 208.33px);
  --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-290:clamp(155.33px, 20.139vw, 416.67px);
  --size-300:clamp(159.33px, 20.556vw, 450.00px);
  --size-425:clamp(227.50px, 29.444vw, 583.33px);
  --size-456:clamp(242.67px, 31.528vw, 630.00px);
  --size-580:clamp(308.00px, 39.722vw, 880.00px);
  --size-705:clamp(375.00px, 48.611vw, 1020.83px);
}

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);
}

#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);
}
#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);
}

#app-footer {
  background-color: var(--color-bg-footer);
  color: #fff;
  padding: var(--size-34) var(--size-56) var(--size-40);
  display: flex;
  justify-content: space-between;
}
#app-footer .footer-logo {
  width: var(--size-140);
}
#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;
  margin-bottom: var(--size-15);
}
#app-footer .footer-contact__link {
  color: #fff;
  display: block;
}
#app-footer .footer-contact__link:not(:last-child) {
  margin-bottom: var(--size-15);
}
#app-footer .footer-contact__link:hover {
  text-decoration: underline;
}

.btn, .btn-big {
  background-color: var(--color-primary);
  color: #fff;
  font-size: var(--size-18);
  line-height: 1;
  font-weight: 700;
  padding: var(--size-10) var(--size-30);
  min-height: var(--size-48);
  border-radius: var(--size-12);
  box-shadow: var(--shadow-button);
  transition: all 0.3s;
  max-width: 100%;
}
.btn:hover, .btn-big:hover {
  background-color: var(--color-primary-hover);
}
.btn.fullwidth, .fullwidth.btn-big {
  width: 100%;
}
.btn:disabled, .btn-big:disabled {
  background-color: var(--color-bg-disabled);
  color: var(--color-text-disabled);
  cursor: not-allowed;
  pointer-events: none;
  box-shadow: unset;
}

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

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

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

.inp, .login-layout .otp-inputs .otp-input {
  border: 1px solid var(--color-border);
  border-radius: var(--size-4);
  padding: var(--size-4) var(--size-16);
  font-size: var(--size-16);
  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-38);
}
.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);
}

.modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
}
.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-50) var(--size-36) var(--size-40);
  text-align: center;
}
.modal__icon {
  width: var(--size-54);
  height: var(--size-54);
  display: inline-block;
  margin: 0 auto var(--size-24);
  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-24);
  line-height: 1.33;
}
.modal__text {
  font-size: var(--size-16);
  font-weight: 700;
  line-height: 1.375;
}
.modal__actions {
  margin-top: var(--size-34);
  display: grid;
  gap: var(--size-12);
  justify-items: center;
}
.modal__actions .btn, .modal__actions .btn-big {
  width: 100%;
}

.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;
  }
}
#login-container,
#otp-container,
.login-layout {
  min-height: 100vh;
}

.login-layout {
  display: flex;
  flex-flow: row wrap;
}
.login-layout .login-hero {
  width: 44vw;
  background-size: cover;
  background-position: center;
  overflow: hidden;
}
.login-layout .login-hero__image {
  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 {
  background: var(--color-bg-placeholder);
}
.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: #fff;
  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 {
  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: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 {
  margin-top: var(--size-40);
  width: 68%;
}
.login-layout .otp-inputs {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--size-12);
}
.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: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%;
}

.packages-page {
  padding: var(--size-20) var(--size-56) var(--size-100);
}

.packages-topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--size-16);
  margin-bottom: var(--size-24);
}
.packages-topbar__pdf {
  display: inline-flex;
  align-items: center;
  gap: var(--size-10);
  font-size: var(--size-16);
  color: var(--color-text-secondary);
  font-weight: 700;
  text-decoration: underline;
}
.packages-topbar__pdf:hover {
  color: var(--color-text-main);
}
.packages-topbar__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");
}
.packages-topbar__greeting {
  text-align: right;
}
.packages-topbar__hello {
  font-size: var(--size-24);
  font-weight: 700;
  color: var(--color-text-secondary);
  line-height: 1.2;
}

.packages-hero {
  position: relative;
  border-radius: var(--size-12);
  overflow: hidden;
  margin-bottom: var(--size-48);
  box-shadow: var(--shadow-card);
}
.packages-hero__img {
  height: var(--size-425);
  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;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  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-26);
  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);
  right: var(--size-20);
  background: var(--color-green-light);
  border: 1px solid var(--color-green-dark);
  color: var(--color-green-dark);
  padding: var(--size-6) var(--size-12);
  border-radius: var(--radius-pill);
  font-size: var(--size-12);
  font-weight: 700;
  display: inline-flex;
  gap: var(--size-4);
  align-items: center;
}
.packages-hero__badge::before {
  content: "";
  width: var(--size-15);
  height: var(--size-13);
  background-image: url("../images/icon-building.svg");
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: center;
  display: block;
}

.packages-intro {
  text-align: center;
  color: var(--color-text-secondary);
  margin-bottom: var(--size-32);
}

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

.pkg-card {
  background: var(--color-page-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;
  position: relative;
}
.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__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;
}

.flow-page {
  padding: var(--size-68) var(--size-56) var(--size-145);
}

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

.flow-left {
  width: 39.9%;
  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);
}

.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-24) var(--size-24) var(--size-50);
  color: var(--color-text-secondary);
  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);
}

.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;
}

.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 {
  min-width: var(--size-170);
}

/* Back link like screenshot */
.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 {
    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%;
  }
}
.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 {
  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-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;
}

.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);
}

/* Responsive */
@media (max-width: 1100px) {
  .confirmation-card {
    min-height: auto;
  }
}
@media (max-width: 1100px) {
  .meeting-actions {
    flex-direction: column;
    align-items: stretch;
  }
  .meeting-actions .btn, .meeting-actions .btn-big {
    width: 100%;
  }
  .meeting-fields {
    justify-content: stretch;
  }
  .meeting-field {
    width: 100%;
  }
  .calendar-popover,
  .time-popover {
    width: 100%;
  }
}
@media (max-width: 1100px) {
  .flow-layout {
    grid-template-columns: 1fr;
  }
  .flow-left__img {
    min-height: 320px;
  }
  .flow-options {
    grid-template-columns: 1fr;
  }
  .flow-actions {
    flex-direction: column;
    align-items: stretch;
  }
  .flow-actions #flow-next {
    width: 100%;
  }
  .flow-actions .flow-backlink {
    justify-content: center;
  }
}
@media (max-width: 1100px) {
  .packages-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 640px) {
  .packages-page {
    padding: var(--size-16);
  }
  .packages-grid {
    grid-template-columns: 1fr;
  }
  .packages-topbar {
    flex-direction: column-reverse;
    align-items: stretch;
  }
  .packages-topbar__greeting {
    text-align: right;
  }
}
@media (max-width: 768px) {
  .login-layout {
    flex-direction: column;
  }
}/*# sourceMappingURL=style.css.map */