@font-face {
  font-family: "inter";
  src: url("roboto.eot");
}

:root {
  --top-pad: 200px;
  --btns-h: 125px;
  --footer-h: 155px;
  --gap-btw: 40px;
  --brand-red: #ffffff;
  --safe-b: max(24px, env(safe-area-inset-bottom, 0px));
  --bottom-ui: calc(var(--btns-h) + var(--footer-h) + var(--gap-btw) + var(--safe-b));
}

body {
  display: flex;
  flex-direction: column;
  font-family: "inter", sans-serif;
  margin: 0;
  padding: 0;
  background-color: #f2f6fc;
  width: 1080px;
  max-width: 1080px;
  height: 1920px;
}

.div {
  display: none;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 100%;
}

.background-image {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  z-index: -1;
}


.logout-btn {
  width: 100px;
  height: 100px;
  font-size: 80px;
  font-weight: bold;
  color: transparent;
  background-color: transparent;
  border: transparent;
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.3s ease;
  position: absolute;
  bottom: 0px;
  right: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "inter", sans-serif;
}

.back-btn {
  background-color: transparent;
  color: transparent;
  border: none;
  cursor: pointer;
  position: absolute;
  height: 100px;
  width: 140px;
  top: 1800px;
  left: 30px;
}

/* home page */

.home-body {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  display: flex;
  justify-content: space-around;
  align-items: stretch;
  text-align: center;
  color: #FFFFFF;
  font-family: inter;
  background-image: url(..//images/Home.png);
  flex-direction: column;
  flex-wrap: nowrap;
}

.slogan {
  font-size: 40px;
  font-weight: 700;
  font-family: "inter", sans-serif;
  color: #232E64;
}

.homeTitle {
  font-size: 70px;
  font-weight: 700;
  font-family: "inter", sans-serif;
  color: #0399D7;
  margin-top: 80px;
  font-family: "inter", sans-serif;
}

.start-button {
  font-size: 45px;
  font-weight: bold;
  color: #FBB040;
  background-color: transparent;
  border: transparent;
  cursor: pointer;
  font-family: "inter", sans-serif;
  margin-bottom: 15rem;
  margin-left: 22px;
}

/* select enter type */
.screen--search-type {
  width: 1080px;
  height: 1920px;
  background: #ffffff;
  overflow: hidden;
}

.screen_content {
  width: 1080px;
  height: calc(1920px - 137px);
  display: flex;
  flex-direction: column;
  align-items: center;
  box-sizing: border-box;
  padding-top: 120px;
}

.brand {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-bottom: 20rem;
  margin-top: 15rem;
}

.brand_logo {
  height: 114px;
  width: 777px;
}

.choices {
  width: 900px;
  display: flex;
  flex-direction: column;
  gap: 34px;
}

.choice {
  width: 100%;
  height: 180px;
  border: none;
  cursor: pointer;
  background: #0B84C6;
  border-radius: 20px;
  display: flex;
  align-items: center;
  padding: 0 34px 0 24px;
  box-sizing: border-box;
  text-align: left;
}

.choice:active {
  transform: scale(0.995);
}

.choice_icon {
  width: 120px;
  height: 120px;
  border-radius: 999px;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 22px;
  flex: 0 0 auto;
}

.choice_icon img {
  width: 54px;
  height: 54px;
}

.choice_text {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1 1 auto;
  color: #ffffff;
}

.choice_title {
  font-size: 35px;
  font-weight: 700;
  line-height: 1.1;
  font-family: "inter", sans-serif;
}

.choice_sub {
  font-size: 20px;
  letter-spacing: 0.6px;
  opacity: 0.92;
  font-family: "inter", sans-serif;
}

.choice_arrow {
  font-size: 44px;
  font-weight: 700;
  color: #ffffff;
  margin-left: 16px;
  flex: 0 0 auto;
  font-family: "inter", sans-serif;
}

/*bottom*/
.bottom-bar {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 1080px;
  height: 137px;
  background: #0399D7;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  z-index: 99;
}

.bottom-bar_btn {
  width: 190px;
  height: 64px;
  border: none;
  background-color: transparent;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.bottom-bar_btn--back {
  background-image: url("../icons/back.png");
  height: 108px;
}

.bottom-bar_btn--logout {
  background-image: url("../icons/logout.png");
  height: 108px;
}

.bottom-bar_btn span {
  color: #ffffff;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 0.5px;
  pointer-events: none;
  margin-top: 25px;
  font-family: "inter", sans-serif;
}

.bottom-bar_btn:active {
  transform: scale(0.97);
}

.bottom-bar_langs {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
}

.bottom-bar_langs img {
  width: 65px;
  height: 45px;
  border-radius: 4px;
}

/* manuel input*/
.manual {
  width: 1080px;
  height: 1920px;
  position: relative;
  background: #fff;
  overflow: hidden;
  font-family: "Inter", sans-serif;
}

.manual_topbar {
  position: absolute;
  left: 0;
  top: 0;
  width: 1080px;
  height: 300px;
  background: #0399d7;
}

.manual_header {
  position: absolute;
  left: 49%;
  top: 25px;
  transform: translateX(-50%);
  width: 1080px;
  z-index: 2;
}

.manual_header-img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 28px;
}

.manual_content {
  position: absolute;
  left: 0;
  top: 600px;
  width: 1080px;
  padding: 0 110px;
  box-sizing: border-box;
  text-align: center;
  z-index: 2;
}

.manual_pnr {
  margin-top: 10px;
  font-size: 24px;
  font-weight: 800;
  font-family: "inter", sans-serif;
  margin-left: 12rem;
  color: #AC1F29;
  width: 160px;
}

.manual_desc {
  margin-top: 40px;
  font-size: 30px;
  font-weight: 700;
  font-family: "inter", sans-serif;
  color: #232E64;
  line-height: 1.35;
}

.manual_input {
  margin: 25px auto 0 auto;
  width: 700px;
  height: 100px;
  border: 2px solid #232E64;
  border-radius: 10px;
  outline: none;
  font-size: 28px;
  font-family: "inter", sans-serif;
  text-align: center;
  letter-spacing: 6px;
  color: #232E64;
  background: #fff;
  box-sizing: border-box;
}

.manual_keyboard {
  margin: 34px auto 0 auto;
  width: 980px;
  min-height: 340px;
}

.manual_continue {
  margin: 60px auto 0 auto;
  width: 520px;
  height: 130px;
  border: none;
  border-radius: 10px;
  background: #FBB040;
  color: #fff;
  font-size: 35px;
  font-weight: 800;
  font-family: "inter", sans-serif;
  cursor: pointer;
}

.manual_continue:active {
  transform: scale(0.99);
}

/* keyboard */
.manual_keyboard {
  width: 980px;
  margin: 34px auto 0 auto;
}

#vk {
  background: #ffffff;
  border-radius: 14px;
  padding: 40px 18px 16px 18px;
  box-sizing: border-box;
  border: 1px solid rgba(0, 0, 0, 0.171);
  margin-left: -4.4rem;
}

.vk-row {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin-bottom: 12px;
}

.vk-row--nums .vk-key {
  width: 80px;
}

.vk-key {
  width: 90px;
  height: 82px;
  border: none;
  border-radius: 8px;
  background: #5c5c5c;
  color: #ffffff;
  font-size: 25px;
  font-weight: 700;
  font-family: "inter", sans-serif;
  cursor: pointer;
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.12);
}

.vk-key:active {
  transform: translateY(1px);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.12);
}

.vk-key--active {
  background: #F4AE3A;
  color: #ffffff;
}

.vk-key--backspace {
  width: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 18px;
  font-weight: 700;
  font-family: "inter", sans-serif;
}

.vk-back-icon {
  font-size: 22px;
  font-weight: 900;
}

/* scan */
.scan {
  width: 1080px;
  height: 1920px;
  position: relative;
  background: #ffffff;
  overflow: hidden;
  font-family: "Inter", sans-serif;
}

.scan_topbar {
  position: absolute;
  left: 0;
  top: 0;
  width: 1080px;
  height: 300px;
  background: #0399d7;
  z-index: 1;
}

.scan_header {
  position: absolute;
  left: 49%;
  top: 25px;
  transform: translateX(-50%);
  width: 1080px;
  z-index: 2;
}

.scan_header-img {
  width: 100%;
  display: block;
  border-radius: 28px;
}

.scan_passport {
  margin-top: 10px;
  font-size: 24px;
  font-weight: 800;
  font-family: "inter", sans-serif;
  margin-left: 10rem;
  color: #AC1F29;
  width: 110px;
}

.scan_qr {
  font-family: "inter", sans-serif;
  font-weight: 700;
  font-size: 17px;
  color: #706A6A;
  margin-left: 24.5rem;
  margin-top: -13rem;
  width: 80px;
}

.scan_boarding {
  font-family: "inter", sans-serif;
  font-weight: 700;
  font-size: 17px;
  color: #706A6A;
  margin-left: 38rem;
  margin-top: -2rem;
  width: 90px;
  text-align: center;
}

.scan_id {
  font-family: "inter", sans-serif;
  font-weight: 700;
  font-size: 17px;
  color: #706A6A;
  margin-left: 52.7rem;
  margin-top: -1.7rem;
  width: 70px;
}

.scan_content {
  position: absolute;
  left: 0;
  top: 600px;
  width: 1080px;
  height: calc(1920px - 520px - 137px);
  text-align: center;
  padding: 0 70px;
  box-sizing: border-box;
  z-index: 1;
}

.scan_title {
  margin-top: 20px;
  font-size: 18px;
  font-weight: 800;
  color: #AC1F29;
}

.scan_desc {
  margin-bottom: 520px;
  font-size: 35px;
  font-weight: 700;
  color: #1E2A59;
  z-index: 10;
}

.scan_illustration {
  margin-top: 40px;
  width: 920px;
  height: auto;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

/*passenger-selection*/
.passenger-selection-page {
  position: relative;
  width: 1080px;
  height: 1920px;
  background: #f3f6fa;
  overflow: hidden;
  font-family: "Inter", sans-serif;
}

.ps-topbar {
  position: absolute;
  top: 0;
  left: 0;
  width: 1080px;
  height: 360px;
  background: #0399D7;
}

.ps-content {
  position: relative;
  z-index: 2;
  width: 100%;
  height: calc(1920px - 137px);
  padding: 70px 80px 180px 80px;
  box-sizing: border-box;
}

.ps-flight-card {
  width: 920px;
  border-radius: 22px;
  background: #ffffff;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.10);
  padding: 34px 36px 22px 36px;
  box-sizing: border-box;
  margin-top: 70px;
}

.ps-flight-card__row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}

.ps-airport {
  width: 260px;
}

.ps-code {
  font-size: 56px;
  font-family: "inter", sans-serif;
  font-weight: 800;
  color: #1d78c2;
  line-height: 1;
}

.ps-city {
  font-size: 26px;
  font-weight: 600;
  color: #4a4a4a;
  margin-top: 10px;
}

.ps-time {
  font-size: 26px;
  font-weight: 700;
  color: #4a4a4a;
  margin-top: 10px;
}

.ps-mid {
  flex: 1;
  text-align: center;
  padding-top: 6px;
}

.ps-plane-line {
  position: relative;
  width: 100%;
  height: 70px;
  margin-top: 10px;
}

.ps-dots {
  position: absolute;
  top: 33px;
  left: 10px;
  right: 10px;
  height: 2px;
  background-image: linear-gradient(to right, rgba(0, 0, 0, 0.15) 33%, rgba(255, 255, 255, 0) 0%);
  background-position: bottom;
  background-size: 12px 2px;
  background-repeat: repeat-x;
}

.ps-plane {
  position: absolute;
  top: 15px;
  left: 50%;
  transform: translateX(-50%);
  width: 110px;
  height: auto;
  opacity: 0.9;
}

.ps-brand {
  margin-top: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.ps-brand img {
  height: 70px;
  margin-top: 10rem;
  margin-bottom: 10rem;
}

.ps-brand__text {
  font-size: 34px;
  font-weight: 800;
  color: #1d78c2;
  letter-spacing: 0.2px;
}

.ps-flight-card__meta {
  margin-top: 18px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 18px;
}

.ps-meta-item {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.ps-meta-label {
  font-size: 22px;
  color: #9a9a9a;
  font-weight: 700;
}

.ps-meta-value {
  font-size: 26px;
  color: #4a4a4a;
  font-weight: 800;
  margin-top: 4px;
}

.ps-meta-sep {
  width: 1px;
  height: 46px;
  background: rgba(0, 0, 0, 0.12);
}

.ps-greeting {
  width: 920px;
  text-align: center;
  margin-top: 26px;
  color: #2d2d2d;
}

.ps-greeting__desc {
  margin-top: 10px;
  font-size: 40px;
  font-weight: 600;
  color: #232E64;
}

/* passenger list */
.ps-passenger-list {
  width: 920px;
  margin-top: 26px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.ps-passenger-item {
  width: 920px;
  height: 120px;
  background: #ffffff;
  border-radius: 18px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08);
  display: flex;
  align-items: center;
  padding: 0 28px;
  box-sizing: border-box;
  cursor: pointer;
  user-select: none;
}

.ps-passenger-item.is-child {
  opacity: 0.75;
}

.ps-passenger-item__left {
  width: 74px;
  height: 74px;
  border-radius: 999px;
  background: #e6e6e6;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

.ps-passenger-item.selected .ps-passenger-item__left {
  background: #f5b63a;
}

.ps-passenger-check {
  width: 30px;
  height: 30px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.85);
  display: none;
  position: relative;
}

.ps-passenger-item.selected .ps-passenger-check {
  display: block;
}

.ps-passenger-check::after {
  content: "";
  position: absolute;
  width: 10px;
  height: 18px;
  border-right: 4px solid #ffffff;
  border-bottom: 4px solid #ffffff;
  transform: rotate(45deg);
  left: 9px;
  top: 4px;
}

.ps-passenger-item__name {
  margin-left: 22px;
  font-size: 26px;
  font-weight: 800;
  color: #2d2d2d;
}

.ps-passenger-item__seat {
  margin-left: auto;
  font-size: 22px;
  font-weight: 800;
  color: #4a4a4a;
}

.ps-continue {
  width: 520px;
  height: 92px;
  border: none;
  border-radius: 16px;
  background: #f5b63a;
  color: #ffffff;
  font-size: 30px;
  font-weight: 900;
  display: block;
  margin: 34px auto 0 auto;
  cursor: pointer;
  font-family: "inter", sans-serif;
}

.ps-continue:active {
  transform: scale(0.99);
}

/* seat selection */
.seat-selection-body {
  width: 100%;
  height: 100vh;
  background-size: cover;
  background-position: center;
  position: relative;
  overflow: hidden;
}

.plane {
  position: absolute;
  top: 60px;
  left: 80px;
}

.emergency_exit {
  position: absolute;

  z-index: 1000;
  top: 1300px;
  left: 500px;
}

.emergency-exit-icon {
  width: 100%;
  height: auto;
  display: block;
  margin: 10px 0;
}

.seat-selection-btn-wrapper {
  position: absolute;
  top: 1720px;
  left: 0px;
  width: 1079px;
  height: 200px;
  background-color: white;
  border-radius: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 5;
}

.seat-selection-button {
  width: 524px;
  height: 144px;
  font-size: 40px;
  font-weight: bold;
  font-family: "inter", sans-serif;
  border: none;
  border-radius: 15px;
  background-color: #FBB040;
  color: white;
  z-index: 10;
}

.seat-selection-button:hover {
  transform: scale(1.03);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
}

.seat-label {
  width: 60px;
  margin: 8px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: 900;
  font-size: 20px;
  color: #232E64;
}

.row-number {
  width: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: 900;
  font-size: 18px;
  color: #232E64;
}

.row-number.empty {
  color: transparent;
}

.seat-map-overlay {
  position: absolute;
  top: 300px;
  left: 470px;
  z-index: 10;

}

.seat-container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.seat-row {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 15px;
}

.seat {
  width: 60px;
  height: 60px;
  margin: 8px;
  border-radius: 10px;
  background-color: transparent;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: bold;
  transition: transform 0.2s;
}

.seat:hover {
  transform: scale(1.1);
}

#seat-selection-name-display {
  display: flex;
  gap: 15px;
  justify-content: center;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.passenger-tab-box {
  display: flex;
  align-items: center;
  padding: 10px 20px;
  border: 2px solid #ccc;
  border-radius: 8px;
  background: white;
  cursor: pointer;
  transition: all 0.2s;
}

/* This styles the passenger you are currently selecting a seat for */
.passenger-tab-box.active-tab {
  border-color: #64A70B;
  background: #f2fceb;
  transform: scale(1.05);
  box-shadow: 0 4px 10px rgba(100, 167, 11, 0.2);
}

.passenger-status-icon {
  margin-right: 8px;
  display: flex;
}

.passenger-seat-badge {
  margin-left: 10px;
  font-weight: bold;
  color: #64A70B;
}

.seat.selected {
  background-color: green;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  border: none;
  transform: scale(1.2);
  z-index: 50;
}

#seatGrid {
  max-height: 1400px;
  overflow-y: auto;
  padding-bottom: 20px;
}

#seatGrid::-webkit-scrollbar {
  width: 8px;
}

#seatGrid::-webkit-scrollbar-thumb {
  background-color: #c0c0c0;
  border-radius: 10px;
}

.seat-purple {
  background-color: #6C3F98;
}

.seat-orange {
  background-color: #E38743;
}

.seat-blue {
  background-color: #30B8E2;
}

.seat-yellow {
  background-color: #f4c03b;
}

.seat.occupied {
  background-color: #989898;
  cursor: not-allowed;
  color: #dcdcdc;
  box-shadow: none;
}

.aisle {
  width: 50px;
  height: 100%;
}

.emergency-exit {
  height: 60px;
  width: 100%;
}

.seat-selection-name-display-container {
  display: flex;
  gap: 15px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

.passenger-tab-box {
  display: flex;
  align-items: center;
  padding: 10px 15px;
  border: 2px solid #cbd5e1;
  border-radius: 8px;
  background: #f8fafc;
  cursor: pointer;
  transition: all 0.2s ease;
}

/* Make the currently selected passenger pop out */
.passenger-tab-box.active-passenger-tab {
  border-color: #64A70B;
  background: #f2fceb;
  transform: scale(1.05);
  box-shadow: 0 4px 10px rgba(100, 167, 11, 0.2);
}

.passenger-status-icon {
  margin-right: 10px;
  display: flex;
  align-items: center;
}

.passenger-seat-badge {
  margin-left: 10px;
  font-weight: bold;
  color: #64A70B;
}

.seat-selection-name-display-box {
  position: absolute;
  top: 845px;
  left: 24px;
  height: 70px;
  width: 365px;
  background-color: transparent;
  border-radius: 40px;
  padding: 10px 15px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 15;
}

.passenger-status-icon,
.passenger-arrow-icon {
  display: flex;
  align-items: center;
  justify-content: center;
}


.passenger-name-text {
  flex-grow: 1;
  text-align: left;
  margin-left: 40px;
  font-size: 24px;
  font-weight: bold;
  color: #232E64;
  white-space: nowrap;
}

.seat-legend-container {
  position: absolute;
  top: 138px;
  left: 0px;
  width: 1200px;
  height: 140px;
  background-color: #E2E2E2;
  z-index: 10;
}

.legend-color-box {
  position: absolute;
  top: 25px;
  width: 30px;
  height: 30px;
  border-radius: 4px;
}

.seat-legend-text {
  position: absolute;
  top: 20px;
  width: 150px;
  text-align: left;
  font-size: 22px;
  color: #000000;
  line-height: 1.2;
}

.seat-legend-price {
  position: absolute;
  top: 85px;
  width: 150px;
  text-align: left;
  font-size: 26px;
  font-weight: bold;
  color: #000000;
  white-space: nowrap;
}

.seat-header-row {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 10px;
  font-weight: bold;
  font-size: 20px;
}

.seat-col-label {
  width: 60px;
  margin: 8px;
  text-align: center;
}

.row-label {
  width: 40px;
  text-align: center;
  font-weight: bold;
  font-size: 18px;
}

.seat-header-corner {
  width: 40px;
}

.seat-PR,
.color-purple {
  background-color: #6a4197 !important;
  color: rgb(187, 187, 187);
}

.seat-FR,
.color-orange {
  background-color: #de8943
}

.seat-EX,
.color-yellow {
  background-color: #f4c03b
}

.seat-WN,
.color-blue {
  background-color: #35b5e5
}

.seat-AS,
.color-darkblue {
  background-color: #232E64 !important;
  color: rgb(187, 187, 187);
}

.seat.selected {
  background-color: green !important;
}

.color-grey {
  background-color: #9d9d9d;
}

#icon-firstRow {
  left: 50px;
}

#text-firstRow {
  left: 90px;
}

#seat-selection-firstRow {
  left: 50px;
}

#icon-frontRow {
  left: 260px;
}

#text-frontRow {
  left: 300px;
}

#seat-selection-frontRow {
  left: 260px;
}

#icon-extraLegroom {
  left: 480px;
}

#text-extraLegroom {
  left: 530px;
}

#seat-selection-extraLegroom {
  left: 500px;
}

#icon-standart {
  left: 700px;
}

#text-standart {
  left: 750px;
}

#seat-selection-standart {
  left: 730px;
}

#icon-occupied {
  left: 900px;
}

#text-occupied {
  left: 940px;
}

#icon-PR {
  left: 30px;
}

#text-PR {
  left: 70px;
}

#price-PR {
  left: 30px;
}

#icon-EX {
  left: 210px;
}

#text-EX {
  left: 250px;
}

#price-EX {
  left: 210px;
}

#icon-WN {
  left: 390px;
}

#text-WN {
  left: 430px;
}

#price-WN {
  left: 390px;
}

#icon-AS {
  left: 570px;
}

#text-AS {
  left: 610px;
}

#price-AS {
  left: 570px;
}

#icon-FR {
  left: 750px;
}

#text-FR {
  left: 790px;
}

#price-FR {
  left: 750px;
}

#icon-occupied {
  left: 930px;
}

#text-occupied {
  left: 970px;
}

.seat-selection-bar {
  position: absolute;
  left: 0;
  top: 0;
  width: 1080px;
  height: 137px;
  background: #0399D7;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  z-index: 99;
}

.seat-selection-bar-txt {
  position: absolute;
  top: 50px;
  left: 420px;
  text-align: left;
  font-size: 40px;
  z-index: 15;
  color: white;
}

.seat-selection-bar_btn {
  width: 190px;
  height: 64px;
  border: none;
  background-color: transparent;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.seat-selection-bar_btn--back {
  background-image: url("../icons/back.png");
  height: 108px;
}

.seat-selection-bar_btn--logout {
  background-image: url("../icons/logout.png");
  height: 108px;
}

.seat-selection-bar_btn span {
  color: #ffffff;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 0.5px;
  pointer-events: none;
  margin-top: 25px;
  font-family: "inter", sans-serif;
}

.seat-selection-bar_btn:active {
  transform: scale(0.97);
}


/* Seat Question */

.top-close-btn {
  position: absolute;
  top: 20px;
  right: 30px;
  background: transparent;
  border: none;
  font-size: 50px;
  font-weight: bold;
  color: #706A6A;
  cursor: pointer;
  z-index: 10;
  transition: color 0.2s ease;
  padding: 0;
  line-height: 1;
}

.top-close-btn:hover {
  color: #232E64;
}

.seat-question-modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.75);
  z-index: 100;
  align-items: center;
  justify-content: center;
}

.seat-question-content {
  position: relative;
  width: 983px;
  height: 931px;
  background-size: cover;
  background-position: center;
  border-radius: 20px;
  padding: 40px;
  background-color: #FFFFFF;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.seat_question_img {
  position: absolute;
  top: 50px;
  left: 350px;
  width: 300px;
  height: 300px;
}

.seat-question-main-question {
  position: absolute;
  top: 350px;
  left: 180px;
  text-align: center;
  font-size: 40px;
  font-weight: 600;
  color: #232E64;
}

.seat-question-sub-text {
  position: absolute;
  top: 450px;
  left: 0px;
  text-align: center;
  font-size: 40px;
  color: #232E64;
  line-height: 1.6;
}

.seat-question-highlight-word {
  font-weight: bold;
}

.seat-question-actions {
  position: relative;
  width: 100%;
  height: 200px;
}

.seat-question-btn.primary-btn {
  position: absolute;
  top: 50px;
  left: 50px;

  background-color: transparent;
  color: #706A6A;
  font-size: 40px;
  font-weight: bold;
  width: 360px;
  height: 144px;
  border: 8px solid #FBB040;
  border-radius: 15px;
  padding: 30px 50px;

}


.seat-question-btn.secondary-btn {
  position: absolute;
  top: 50px;
  left: 500px;
  background-color: transparent;
  color: white;
  font-size: 40px;
  border-radius: 15px;
  padding: 30px 30px;
  width: 360px;
  height: 144px;
  background-color: #FBB040;
}

.seat-question-btn {
  font-weight: bold;
  border-radius: 65px;
  border: none;
  cursor: pointer;
  font-family: "inter", sans-serif;
  transition: transform 0.2s;
}

/* payment */

.payment-body {
  width: 100%;
  height: 100vh;
  background-size: cover;
  background-position: center;
  position: relative;
  overflow: hidden;
}

.payment-text-1 {
  position: absolute;
  top: 450px;
  left: 200px;
  font-size: 32px;
  font-weight: 600;
  color: #232E64;
}

.pos-img {
  position: absolute;
  top: 587px;
  left: 129px;

  width: 630px;
  height: 630px;


}

.pos-icon {
  position: absolute;
  top: 790px;
  left: 802px;
  width: 195px;
  height: 195px;
}

.payment-text {
  position: absolute;
  top: 1280px;
  left: 350px;

  width: 400px;
  padding: 40px 30px;

  background-color: white;
  border-radius: 40px;
  display: flex;
  flex-direction: column;
  align-items: center;

}

.payment-text-2 {
  font-size: 36px;
  font-weight: 500;
  color: #232E64;
  margin: 0 0 20px 0;
  position: static;
}

.payment-amount {
  font-size: 36px;
  font-weight: 600;
  color: #232E64;
  margin: 0;
  position: static;
}

.payment-btn {
  position: absolute;
  top: 1560px;
  left: 280px;

  width: 524px;
  height: 144px;

  font-size: 40px;
  font-weight: bold;
  font-family: "inter", sans-serif;
  color: white;

  background-color: #FBB040;
  border: none;
  border-radius: 20px;

  cursor: pointer;
  z-index: 10;

}


/* Header container */
.Header {
  width: 1080px;
  height: 280px;
  background-size: cover;
  background-position: center;
  position: relative;
  z-index: 10;
  background-color: #0399D7;
}

.Header-plane {
  position: absolute;
  top: 120px;
  left: 190px;
  height: 50px;
  width: 452px;
}

.Header-line {
  position: absolute;
  top: 30px;
  left: 835px;
  height: 245px;
}

.Header-departure-from {
  top: 30px;
  left: 65px;
  color: #7D7979;
  font-size: 30px;
  position: absolute;
}

.Header-departure-code {
  top: 70px;
  left: 65px;
  color: white;
  font-size: 42px;
  position: absolute;
}

.Header-departure-place {
  top: 140px;
  left: 65px;
  color: white;
  font-size: 30px;
  position: absolute;
}

.Header-departure-time {
  top: 180px;
  left: 65px;
  color: white;
  font-size: 30px;
  position: absolute;
}

.Header-arrival-to {
  top: 30px;
  left: 670px;
  color: #7D7979;
  font-size: 30px;
  position: absolute;
}

.Header-arrival-code {
  top: 70px;
  left: 670px;
  color: white;
  font-size: 42px;
  position: absolute;
}

.Header-arrival-place {
  top: 140px;
  left: 670px;
  color: white;
  font-size: 30px;
  position: absolute;
}

.Header-arrival-time {
  top: 180px;
  left: 670px;
  color: white;
  font-size: 30px;
  position: absolute;
}

.Header-flight-number-txt {
  left: 890px;
  color: #7D7979;
  font-size: 30px;
  position: absolute;
}

.Header-flight-number {
  top: 50px;
  left: 900px;
  color: white;
  font-size: 30px;
  position: absolute;
}

.Header-pnr-number-txt {
  left: 890px;
  top: 140px;
  color: #7D7979;
  font-size: 30px;
  position: absolute;
}

.Header-pnr-number {
  top: 190px;
  left: 890px;
  color: white;
  font-size: 30px;
  position: absolute;
}


/* paymet done */

.payment-done-body {
  width: 100%;
  height: 100vh;
  background-size: cover;
  background-position: center;
  position: relative;
  overflow: hidden;
}

.payment-done-text {
  position: absolute;
  top: 500px;
  left: 400px;
  font-size: 32px;
  font-weight: 600;
  color: #232E64;
}

.payment-done_illustration {
  margin-top: 400px;
  width: 920px;
  height: auto;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

/* bcbp print */

.bcbp-print-body {
  width: 100%;
  height: 100vh;
  background-size: cover;
  background-position: center;
  position: relative;
  overflow: hidden;
}

.bcbp-print-text {
  position: absolute;
  top: 600px;
  left: 150px;
  font-size: 32px;
  font-weight: 600;
  color: #232E64;
}

.bcbp_illustration {
  margin-top: 40px;
  width: 920px;
  height: auto;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

/* bcbp final screen */

.final-screen-bcbp-body {
  width: 100%;
  height: 100vh;
  background-image: url('../images/bcbp_final_screen.png');
  background-size: cover;
  background-position: center;
  position: relative;
  overflow: hidden;
}

.final-screen-bcbp-text1 {
  position: absolute;
  top: 500px;
  left: 200px;
  font-size: 32px;
  font-weight: 600;
  color: #232E64;
}

.final-screen-bcbp-text2 {
  position: absolute;
  top: 1400px;
  left: 250px;
  font-size: 64px;
  font-weight: 600;
  color: #FBB040;
}

.final_bcbp_illustration {
  margin-top: 400px;
  width: 740px;
  height: 730px;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

/* baggage-question */
.baggage-question-body {
  width: 100%;
  height: 100vh;
  position: relative;
  overflow: hidden;
}

.baggage-question-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 40px;
  margin-top: 380px;
}

.baggage-question-title {
  text-align: center;
  font-size: 40px;
  font-weight: 600;
  color: #2c3e50;
  margin-bottom: 12px;
}

.baggage-question-btn {
  width: 980px;
  height: 287px;
  background: #FBB040;
  border-radius: 24px;
  display: flex;
  align-items: center;
  cursor: pointer;
  transition: 0.25s ease;
}

.baggage-question-btn-left {
  margin-right: 20px;
}

.icon-circle {
  width: 200px;
  height: 200px;
  background: #E6E6E6;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-left: 20px;
}

.icon-circle img {
  width: 100%;
  height: 100%;
}

.baggage-question-btn-text {
  flex: 1;
  margin-left: 10px;
}

.baggage-question-btn-text .title {
  font-size: 40px;
  font-weight: 700;
  color: #ffffff;
}

.baggage-question-btn-text .subtitle {
  margin-top: 12px;
  font-size: 20px;
  letter-spacing: 2px;
  color: #ffffff;
  opacity: 0.85;
}

.baggage-question-btn-arrow {
  font-size: 60px;
  color: #ffffff;
  margin-right: 25px;
}

/*  putbag */
.putbag-body {
  width: 100%;
  height: 100vh;
  position: relative;
  overflow: hidden;
}

.putbag-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 50px;
  margin-top: 180px;
}

.putbag-title {
  text-align: center;
  font-size: 45px;
  font-weight: 600;
  color: #2c3e50;
  margin-bottom: 12px;
}

.putbag-circle {
  width: 900px;
  height: 900px;
  background: #e5e5e5;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  overflow: hidden;
}

.putbag-circle img {
  max-width: 100%;
  max-height: 100%;
  object-fit: cover;
}

.putbag-arrow img {
  width: 200px;
}

/*  baggage-scaling */
.baggage-scaling-body {
  width: 100%;
  height: 100vh;
  position: relative;
  overflow: hidden;
}

.baggage-scaling-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 50px;
  margin-top: 150px;
}

.baggage-scaling-title {
  text-align: center;
  font-size: 45px;
  font-weight: 600;
  color: #2c3e50;
  margin-bottom: 12px;
  padding: 0 120px;
}

.baggage-scaling-circle {
  width: 900px;
  height: 900px;
  background: #e5e5e5;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  overflow: hidden;
}

.baggage-scaling-circle img {
  max-width: 100%;
  max-height: 100%;
  object-fit: cover;
}

.baggage-scaling-arrow img {
  width: 200px;
}

/*  get-weight */
.get-weight-body {
  width: 100%;
  height: 100vh;
  position: relative;
  overflow: hidden;
}

.get-weight-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 130px;
  margin-top: 150px;
}

.get-weight-title {
  text-align: center;
  font-size: 40px;
  font-weight: 600;
  color: #2c3e50;
  max-width: 900px;
}

.get-weight-circle {
  width: 600px;
  height: 600px;
  background: #e5e5e5;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.get-weight-circle img {
  max-width: 85%;
  max-height: 85%;
  object-fit: contain;
}

.weight-info {
  width: 800px;
  background: #e9e9e9;
  border-radius: 24px;
  display: flex;
  justify-content: space-between;
  padding: 40px 60px;
}

.weight-box {
  text-align: center;
  flex: 1;
}

.weight-box .label {
  font-size: 26px;
  color: #2c3e50;
  margin-bottom: 14px;
}

.weight-box .value {
  font-size: 36px;
  font-weight: 700;
  color: #2c3e50;
}

.weight-info {
  gap: 40px;
}

.weight-box .value.success {
  color: #2e7d32;
}

.value.success {
  color: #2e7d32;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.check-icon {
  width: 30px;
  height: 30px;
}


/* counter error */

.counter-error-body {
  width: 100%;
  height: 100vh;
  background-size: cover;
  background-position: center;
  position: relative;
  overflow: hidden;
}

.counter-error-text {
  position: absolute;
  top: 1400px;
  left: 250px;
  font-size: 64px;
  font-weight: 600;
  color: red;
}

.counter-error-illustration {
  margin-top: 300px;
  width: 966px;
  height: 637;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

/* error modal */
.error-modal {
  display: none;
  align-items: center;
  justify-content: center;
  position: fixed;
  inset: 0;
  background: #000000c9;
  z-index: 20;
}

.modal-content.error-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  width: 800px;
  border-radius: 20px;
  padding: 55px 30px;
  background-color: white;
  overflow: hidden;
}

.error-header-img {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  margin-bottom: 55px;
}

.error-header-img img {
  width: 225px;
  height: 225px;
}

.error-message {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  margin: 0;
  color: #0399d7;
  font-size: 40px;
  line-height: 1.35;
}

.error-popup-btn-body {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 40px;
  width: 100%;
}

.close-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  background: #FBB040;
  ;
  color: #fff;
  border: none;
  border-radius: 10px;
  font-family: "inter", sans-serif;
  font-size: 40px;
  font-weight: 700;
  cursor: pointer;
  padding: 25px;
  min-width: 300px;
  margin-top: 50px;
  justify-self: end;
}

/* bagtag final screen */

.final-screen-bagtag-body {
  width: 100%;
  height: 100vh;
  position: relative;
  overflow: hidden;
}

.final-screen-bagtag-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 110px;
  margin-top: 150px;
}

.final-screen-bagtag-title {
  text-align: center;
  font-size: 45px;
  font-weight: 600;
  color: #2c3e50;
  margin-bottom: 12px;
  padding: 0 120px;
}

.final-screen-bagtag-circle {
  width: 700px;
  height: 700px;
  background: #e5e5e5;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  overflow: hidden;
}

.final-screen-bagtag-circle img {
  max-width: 100%;
  max-height: 100%;
  object-fit: cover;
}

.final-screen-bagtag-enjoy {
  font-family: sans-serif;
  font-size: 64px;
  font-weight: 700;
  color: #6FAC1F;
  text-align: center;
  letter-spacing: 1px;
  margin-top: 20px;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

/* loading */
.loading-container {
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 15;
  background: #000000c9;
  -webkit-user-select: none;
  user-select: none;
  pointer-events: none;
}

.loading-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 40px;
  width: 100%;
  height: 100%;
}

.loading-text {
  font-size: 50px;
  color: #fff;
}

.loading-spinner {
  border: 16px solid #f3f3f3;
  border-top: 16px solid #3498db;
  border-radius: 50%;
  width: 120px;
  height: 120px;
  animation: spin 2s linear infinite;
}

/* apis */

.apis-screen {
  display: none;
  width: 1080px;
  height: 1920px;
  background:
    radial-gradient(circle at top right, rgba(3, 153, 215, 0.10), transparent 320px),
    linear-gradient(180deg, #eef4fb 0%, #f6f9fd 100%);
  align-items: stretch;
  justify-content: center;
  overflow: hidden;
  font-family: "inter", sans-serif;
}

.apis-screen.active,
#apis[style*="display: block"],
#apis[style*="display:block"],
#apis[style*="display: flex"],
#apis[style*="display:flex"] {
  display: flex;
}

.apis-shell {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: 72px 64px 165px;
  display: flex;
  flex-direction: column;
  gap: 28px;
  position: relative;
}

.apis-top {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.apis-header-card {
  width: 100%;
  min-height: 160px;
  border-radius: 34px;
  background: linear-gradient(135deg, #183b7a 0%, #0a74b8 100%);
  box-shadow: 0 20px 50px rgba(13, 49, 107, 0.22);
  display: flex;
  align-items: center;
  padding: 30px 34px;
  box-sizing: border-box;
}

.apis-header-card__icon {
  width: 92px;
  height: 92px;
  min-width: 92px;
  border-radius: 26px;
  background: rgba(255, 255, 255, 0.16);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 42px;
  margin-right: 24px;
  backdrop-filter: blur(6px);
}

.apis-header-card__content {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.apis-header-card__title {
  font-size: 46px;
  line-height: 1.08;
  font-weight: 800;
  color: #ffffff;
  letter-spacing: 0.2px;
}

.apis-header-card__subtitle {
  font-size: 24px;
  line-height: 1.35;
  color: rgba(255, 255, 255, 0.90);
  font-weight: 500;
}

.apis-passenger-card {
  width: 100%;
  min-height: 156px;
  background: #ffffff;
  border-radius: 28px;
  box-shadow: 0 14px 34px rgba(17, 43, 84, 0.10);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24px 28px;
  box-sizing: border-box;
  border: 1px solid rgba(17, 43, 84, 0.06);
}

.apis-passenger-card__left {
  display: flex;
  align-items: center;
  gap: 22px;
  min-width: 0;
}

.apis-passenger-avatar {
  width: 92px;
  height: 92px;
  border-radius: 50%;
  background: linear-gradient(135deg, #2d63d3 0%, #1d9de0 100%);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 34px;
  font-weight: 800;
  box-shadow: 0 10px 24px rgba(45, 99, 211, 0.22);
}

.apis-passenger-meta {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.apis-passenger-label {
  font-size: 20px;
  color: #7b8798;
  font-weight: 700;
  letter-spacing: 0.3px;
}

.apis-passenger-name {
  font-size: 34px;
  color: #182848;
  font-weight: 800;
  line-height: 1.1;
}

.apis-passenger-status {
  font-size: 22px;
  color: #4f6482;
  font-weight: 600;
}

.apis-passenger-card__right {
  min-width: 170px;
  text-align: right;
  padding-left: 18px;
}

.apis-progress-label {
  font-size: 20px;
  color: #7b8798;
  font-weight: 700;
}

.apis-progress-value {
  margin-top: 6px;
  font-size: 34px;
  color: #183b7a;
  font-weight: 900;
}

.apis-main {
  flex: 1;
  display: grid;
  grid-template-columns: 1.65fr 0.95fr;
  gap: 26px;
  min-height: 0;
}

.apis-main__left,
.apis-main__right {
  min-height: 0;
}

.apis-main__left {
  background: #ffffff;
  border-radius: 30px;
  box-shadow: 0 14px 36px rgba(17, 43, 84, 0.08);
  padding: 28px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.apis-main__right {
  display: flex;
  flex-direction: column;
}

.apis-section-title {
  font-size: 28px;
  font-weight: 800;
  color: #1e2f52;
  margin-bottom: 20px;
}

.apis-dynamic-fields {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding-right: 8px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}

.apis-dynamic-fields::-webkit-scrollbar {
  width: 10px;
}

.apis-dynamic-fields::-webkit-scrollbar-thumb {
  background: rgba(24, 59, 122, 0.20);
  border-radius: 10px;
}

.apis-doc-card {
  background: linear-gradient(180deg, #ffffff 0%, #fbfcff 100%);
  border: 1px solid #dbe5f1;
  border-radius: 24px;
  padding: 22px 22px 18px;
  box-shadow: 0 8px 22px rgba(18, 40, 80, 0.06);
}

.apis-doc-card--filled {
  border-color: #bfe1cb;
  background: linear-gradient(180deg, #ffffff 0%, #f3fcf6 100%);
}

.apis-doc-card__header {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}

.apis-doc-card__icon {
  font-size: 26px;
}

.apis-doc-card__title {
  font-size: 28px;
  font-weight: 800;
  color: #1d2f56;
}

.apis-doc-card__check {
  margin-left: auto;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #18b35b;
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 900;
}

.apis-doc-badge {
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 16px;
  font-weight: 800;
  line-height: 1;
}

.apis-doc-badge--mandatory {
  background: #ffe7d6;
  color: #b85b18;
}

.apis-doc-badge--optional {
  background: #e8eef8;
  color: #587198;
}

.apis-doc-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.apis-doc-field {
  min-height: 92px;
  border-radius: 18px;
  background: #f6f9fd;
  border: 1px solid #e1e8f2;
  padding: 14px 16px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.apis-doc-field--required {
  border-color: #ffd2b3;
}

.apis-doc-field__label {
  font-size: 16px;
  color: #7d8ba1;
  font-weight: 700;
  margin-bottom: 8px;
}

.apis-doc-field__value {
  font-size: 23px;
  color: #223354;
  font-weight: 800;
  line-height: 1.2;
  word-break: break-word;
}

.apis-doc-field__value--empty {
  color: #b4bfce;
  font-weight: 700;
}

.apis-doc-scan-btn {
  margin-top: 18px;
  width: 100%;
  height: 68px;
  border: none;
  border-radius: 18px;
  background: linear-gradient(135deg, #0d84c7 0%, #1756b3 100%);
  color: #ffffff;
  font-size: 22px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 12px 22px rgba(13, 132, 199, 0.20);
}

.apis-doc-scan-btn__icon {
  margin-right: 10px;
}

.apis-scan-panel {
  flex: 1;
  border-radius: 30px;
  background: linear-gradient(180deg, #ffffff 0%, #f9fbff 100%);
  box-shadow: 0 14px 36px rgba(17, 43, 84, 0.08);
  padding: 34px 28px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  border: 1px solid rgba(17, 43, 84, 0.06);
}

.apis-scan-panel__inner {
  position: relative;
  width: 280px;
  height: 280px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 26px;
}

.apis-scan-panel__ring,
.apis-scan-panel__ring--second {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid rgba(29, 99, 211, 0.20);
}

.apis-scan-panel__ring--second {
  inset: 22px;
  border-color: rgba(29, 157, 224, 0.20);
}

.apis-scan-panel__icon {
  width: 132px;
  height: 132px;
  border-radius: 50%;
  background: linear-gradient(135deg, #2d63d3 0%, #1d9de0 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 58px;
  color: #ffffff;
  box-shadow: 0 18px 34px rgba(29, 99, 211, 0.20);
}

.apis-scan-panel__title {
  font-size: 34px;
  font-weight: 900;
  color: #183b7a;
  margin-bottom: 12px;
}

.apis-scan-panel__desc {
  max-width: 320px;
  font-size: 22px;
  line-height: 1.5;
  color: #62748d;
  font-weight: 600;
}

.apis-footer-actions {
  position: absolute;
  left: 64px;
  right: 64px;
  bottom: 42px;
  display: flex;
  gap: 20px;
  justify-content: space-between;
}

.apis-btn {
  height: 96px;
  border: none;
  border-radius: 22px;
  font-size: 30px;
  font-weight: 800;
  cursor: pointer;
  font-family: "inter", sans-serif;
  padding: 0 34px;
  min-width: 280px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}

.apis-btn--secondary {
  background: #ffffff;
  color: #223354;
  border: 2px solid #d8e2ef;
  box-shadow: 0 10px 26px rgba(18, 40, 80, 0.06);
}

.apis-btn--primary {
  margin-left: auto;
  background: linear-gradient(135deg, #f5b63a 0%, #f39c12 100%);
  color: #ffffff;
  box-shadow: 0 14px 28px rgba(243, 156, 18, 0.24);
}

.apis-btn:active,
.apis-doc-scan-btn:active {
  transform: scale(0.99);
}

.apis-warning-box {
  border-radius: 28px;
  padding: 28px;
}

.apis-warning-box__header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
}

.apis-warning-box__icon {
  font-size: 34px;
}

.apis-warning-box__title {
  font-size: 30px;
  font-weight: 800;
  color: #223354;
}

.apis-eligible-list {
  margin: 16px 0 22px;
  padding-left: 24px;
  font-size: 22px;
  color: #4a5d79;
}