@-webkit-keyframes RotateClockwise {
    0% {
        transform: rotate(0deg);
    }

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

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

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

@-webkit-keyframes RotateCounterClockwise {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(-359deg);
    }
}

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

    100% {
        transform: rotate(-359deg);
    }
}

@keyframes letItFly {
    25% {
        opacity: 0.4;
    }

    50% {
        opacity: 1;
        transform: scale(1.4) skew(0deg, 0deg);
    }

    75% {
        opacity: 0.7;
    }

    90% {
        opacity: 0.1;
    }

    100% {
        left: 80%;
        transform: scale(1) skew(-15deg, 18deg);
        opacity: 0;
        filter: drop-shadow(rgb(153, 153, 153) 18px 10px 2px);
    }
}

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

.spark-header[data-breakpoint="xs"]:not(.spark-header_placeholder), .spark-header.spark-header--condensed:not(.spark-header_placeholder) {
    height: 6rem;
}

.spark-header[data-breakpoint="xs"]:not(.spark-header__placeholder) .spark-header__nav, .spark-header.spark-header--condensed:not(.spark-header__placeholder) .spark-header__nav {
    height: 6rem;
}

[dir="ltr"] .spark-header[data-breakpoint="xs"]:not(.spark-header__placeholder) .spark-header__title, [dir="ltr"] .spark-header.spark-header--condensed:not(.spark-header__placeholder) .spark-header__title {
    padding: 0px 2rem calc(1.375rem) 1rem;
}

[dir="rtl"] .spark-header[data-breakpoint="xs"]:not(.spark-header__placeholder) .spark-header__title, [dir="rtl"] .spark-header.spark-header--condensed:not(.spark-header__placeholder) .spark-header__title {
    padding: 0px 1rem calc(1.375rem) 2rem;
}

.progress-background {
    max-height: 100vh;
    position: fixed;
    top: 0px;
    max-width: 100vw;
    background: rgb(20, 20, 31) !important;
}

[dir="ltr"] .screen-centered {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: flex-end;
}

html[dir="ltr"] .ProgressIndicator::before {
    background-image: url("../images/gulf-loader.svg");
    width: 120px;
    height: 135px;
    display: block;
    content: "";
    position: absolute;
    top: -60px;
}

html[dir="ltr"] .ProgressIndicator > progress, .ProgressIndicator .spark-progress__text, .ProgressIndicator .spark-progress__meter {
    content: "";
    position: relative;
    right: auto;
    max-width: 25px !important;
    max-height: 25px !important;
    width: 25px !important;
    height: 25px !important;
    border-width: medium !important;
    border-style: none !important;
    border-color: currentcolor !important;
    border-image: initial !important;
    background-color: transparent !important;
    animation: auto ease 0s 1 normal none running none !important;
    display: block !important;
    top: auto !important;
    left: auto !important;
    margin: 0px !important;
    padding: 0px !important;
}

html[dir="ltr"] .ProgressIndicator > progress::before, .ProgressIndicator .spark-progress__text::before, .ProgressIndicator .spark-progress__meter::before {
    max-width: 25px;
    max-height: 25px;
    width: 25px;
    height: 25px;
    position: relative;
    transform: scale(0);
    border-radius: 50%;
    background-color: rgb(161, 143, 99);
    content: "";
    display: block !important;
    top: 0px !important;
    left: 0px !important;
    margin: 0px !important;
    padding: 0px !important;
    border-width: medium !important;
    border-style: none !important;
    border-color: currentcolor !important;
    border-image: initial !important;
    animation: 1.5s linear 0s infinite normal none running pulse !important;
}

html[dir="ltr"] .ProgressIndicator > progress {
    margin-right: 1.5rem !important;
}

.ProgressIndicator .spark-progress__meter {
    margin-left: 1.5rem !important;
}

.ProgressIndicator .spark-progress__text {
    color: rgb(20, 20, 31) !important;
    font-size: 0px !important;
}

.ProgressIndicator .spark-progress__text::before {
    animation-delay: 0.25s !important;
}

.ProgressIndicator .spark-progress__meter::before {
    animation-delay: 0.5s !important;
}

html[dir="ltr"] .ProgressIndicator > progress::after {
    display: none;
}

.initial-progress-indicator {
    background: rgb(20, 20, 31);
    height: 100vh;
    width: 100vw;
    position: fixed;
    top: 0px;
    left: 0px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.dxp-spinner {
    background-image: url("../images/gulf-loader.svg");
    background-repeat: no-repeat;
    width: 120px;
    height: 200px;
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-evenly;
}

.dxp-spinner span {
    width: 25px;
    height: 25px;
    display: block;
    border-radius: 50%;
    background-color: rgb(161, 143, 99);
    transform: scale(0);
    content: "";
    animation: 1.5s linear 0s infinite normal none running pulse !important;
}

.dxp-spinner .bounce2 {
    animation-delay: 0.25s !important;
}

.dxp-spinner .bounce3 {
    animation-delay: 0.5s !important;
}

.page-loading-message {
    display: none;
}

@keyframes pulse {
    0% {
        transform: scale(0);
    }

    20% {
        transform: scale(1);
    }

    25%, 75% {
        transform: scale(0.9);
    }

    100% {
        transform: scale(0);
    }
}

.spark-progress__meter::after {
    display: none !important;
}

#dateOfBirth_error {
    display: none !important;
}

#expirationDate_error {
    display: none !important;
}

.spark-input__message {
    display: none !important;
}

.error-technical-info {
    display: none !important;
}

#dateOfBirth_error {
    display: none !important;
}

div[data-booking-class="Y"][data-first-row="8"][data-last-row="28"] tbody .EXTRA_LEG_SPACE, div[data-booking-class="Y"][data-first-row="8"][data-last-row="31"] tbody .EXTRA_LEG_SPACE, div[data-booking-class="Y"][data-first-row="8"][data-last-row="36"] tbody .EXTRA_LEG_SPACE, div[data-booking-class="Y"][data-first-row="8"][data-last-row="33"] tbody .EXTRA_LEG_SPACE, div[data-booking-class="Y"][data-first-row="8"][data-last-row="38"] tbody .EXTRA_LEG_SPACE, div[data-booking-class="Y"][data-first-row="20"][data-last-row="54"] tbody .EXTRA_LEG_SPACE {
    display: none !important;
}

div[data-booking-class="Y"][data-first-row="8"][data-last-row="28"] .seat-map-slot, div[data-booking-class="Y"][data-first-row="8"][data-last-row="31"] .seat-map-slot, div[data-booking-class="Y"][data-first-row="8"][data-last-row="36"] .seat-map-slot, div[data-booking-class="Y"][data-first-row="8"][data-last-row="33"] .seat-map-slot, div[data-booking-class="Y"][data-first-row="8"][data-last-row="38"] .seat-map-slot, div[data-booking-class="Y"][data-first-row="20"][data-last-row="54"] .seat-map-slot {
    vertical-align: middle !important;
}

div[data-booking-class="Y"][data-first-row="8"][data-last-row="28"] tbody .BASSINET, div[data-booking-class="Y"][data-first-row="8"][data-last-row="31"] tbody .BASSINET, div[data-booking-class="Y"][data-first-row="8"][data-last-row="36"] tbody .BASSINET, div[data-booking-class="Y"][data-first-row="8"][data-last-row="33"] tbody .BASSINET, div[data-booking-class="Y"][data-first-row="8"][data-last-row="38"] tbody .BASSINET, div[data-booking-class="Y"][data-first-row="20"][data-last-row="54"] tbody .BASSINET {
    top: 13px !important;
    z-index: 1 !important;
    position: absolute !important;
    right: -1px !important;
}

div[data-booking-class="Y"][data-first-row="20"][data-last-row="54"] tbody .BASSINET {
    top: 10px !important;
}

@font-face {
    font-family: "GA Sans";
    src: url("../fonts/GASans-Heavy.woff2") format("woff2"), url("../fonts/GASans-Heavy.woff") format("woff"), url("../fonts/GASans-Heavy.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

.body {
    background-color: rgb(255, 255, 255) !important;
}

#SabreDxComponentCheckInBreadcrumbs {
    background-color: rgb(227, 222, 219) !important;
}

[dir] .ducp-component-breadcrumbs {
    background: #f5f3ed !important;
}

.ducp-component-breadcrumbs .spark-step-indicator__list {
    background: #f5f3ed !important;
}

.sabre-dx-container-check-in-flight-summary {
     /* box-shadow: rgba(0, 0, 0, 0.2) 0px 1px 10px inset; */
}

.sabre-dx-container-check-in-hazmat {
    box-shadow: rgba(0, 0, 0, 0.2) 0px 1px 10px inset;
}

.spark-step-indicator__subtext {
    color: rgb(0, 0, 0) !important;
}

.spark-step-indicator__title-text {
    color: rgb(0, 0, 0) !important;
}

.spark-step-indicator__icon {
    color: rgb(0, 0, 0) !important;
}

.park-step-indicator__item {
    color: rgb(0, 0, 0) !important;
}

.spark-step-indicator__item--disabled {
    color: rgb(0, 0, 0) !important;
    font-weight: bold;
}

.ducp-component-breadcrumbs .spark-step-indicator__list button::after {
    line-height: 130%;
}


div[data-booking-class="Y"][data-first-row="8"][data-last-row="28"] tbody .EXTRA_LEG_SPACE, div[data-booking-class="Y"][data-first-row="8"][data-last-row="31"] tbody .EXTRA_LEG_SPACE, div[data-booking-class="Y"][data-first-row="8"][data-last-row="36"] tbody .EXTRA_LEG_SPACE, div[data-booking-class="Y"][data-first-row="8"][data-last-row="33"] tbody .EXTRA_LEG_SPACE, div[data-booking-class="Y"][data-first-row="8"][data-last-row="38"] tbody .EXTRA_LEG_SPACE, div[data-booking-class="Y"][data-first-row="20"][data-last-row="54"] tbody .EXTRA_LEG_SPACE {
    display: none !important;
}

div[data-booking-class="Y"][data-first-row="8"][data-last-row="28"] .seat-map-slot, div[data-booking-class="Y"][data-first-row="8"][data-last-row="31"] .seat-map-slot, div[data-booking-class="Y"][data-first-row="8"][data-last-row="36"] .seat-map-slot, div[data-booking-class="Y"][data-first-row="8"][data-last-row="33"] .seat-map-slot, div[data-booking-class="Y"][data-first-row="8"][data-last-row="38"] .seat-map-slot, div[data-booking-class="Y"][data-first-row="20"][data-last-row="54"] .seat-map-slot {
    vertical-align: middle !important;
}

div[data-booking-class="Y"][data-first-row="8"][data-last-row="28"] tbody .BASSINET, div[data-booking-class="Y"][data-first-row="8"][data-last-row="31"] tbody .BASSINET, div[data-booking-class="Y"][data-first-row="8"][data-last-row="36"] tbody .BASSINET, div[data-booking-class="Y"][data-first-row="8"][data-last-row="33"] tbody .BASSINET, div[data-booking-class="Y"][data-first-row="8"][data-last-row="38"] tbody .BASSINET, div[data-booking-class="Y"][data-first-row="20"][data-last-row="54"] tbody .BASSINET {
    background: none;
    top: 8px !important;
    z-index: 1 !important;
    position: absolute !important;
    right: -3px !important;
}

.seat-map .seat-popover {
    display: block;
    padding: 2px !important;
}

.seat-map .seat-map-icon:not(.facility):not(.exit) {
    background-image: none !important;
    border-radius: 4px !important;
    height: 35px !important;
    width: 35px !important;
}

.seat-map .seat-map-icon.PREMIUM, .seat-map .seat-map-icon.seat-pay {
    background: rgb(140, 204, 207) !important;
}

.seat-map [dir="ltr"] .seat-map-icon.SEAT-EXIT, .seat-map [dir="ltr"] .seat-map-icon.seat-exit {
    background: rgb(237, 135, 102) !important;
}

.seat-map .seat-map-icon.RESERVED, .seat-map .seat-map-icon.seat-unavailable {
    background: rgb(233, 233, 233) !important;
}

.seat-map .seat-map-slot.is-seat > div[class*="-selected"], .seat-map .SeatMapLegend .seat-map-icon.SELECTED {
    background: rgb(173, 157, 115) !important;
}



div[data-booking-class="Y"][data-first-row="8"][data-last-row="28"] tbody .BASSINET::after, div[data-booking-class="Y"][data-first-row="8"][data-last-row="31"] tbody .BASSINET::after, div[data-booking-class="Y"][data-first-row="8"][data-last-row="36"] tbody .BASSINET::after, div[data-booking-class="Y"][data-first-row="8"][data-last-row="33"] tbody .BASSINET::after, div[data-booking-class="Y"][data-first-row="8"][data-last-row="38"] tbody .BASSINET::after, div[data-booking-class="Y"][data-first-row="20"][data-last-row="54"] tbody .BASSINET::after {
    height: 24px;
    width: 23px;
    background: url("https://flights.gulfair.com/assets/icons/seats/bassinet.svg") no-repeat !important;
}

.legend-item-row:has(.EXTRA_LEG_SPACE) {
    display: none !important;
}

.seat-map-passengers .passengers .passenger-container .passenger .passenger-name-item .full-name .passenger-name-sub-text {
    line-height: 100%;
    display: none !important;
}

.ducp-component-flight-route {
    font-size: larger !important;
    line-height: 3rem;
}

.spark-step-indicator__item {
    align-items: center;
    color: rgb(0, 0, 0);
}


.seat:not(.seat-pay):not(.seat-exit):not(.seat-facility):not(.extras .seat) {
    background-color: rgb(255, 222, 167);
}

@media (max-width: 768px) {
    .seat-map-cabin-group {
        padding: 0px !important;
        & .seat-map[data-first-row="20"][data-last-row="54"] {
            & td.column-left-side, & td.column-right-side {
                & .seat-map-icon.exit: :after {
                    background-size: contain !important;
                    width: 30px !important;
                }
            }

            & .aisle {
                font-size: 10px !important;
            }

            & .seat-popover {
                padding: 0px !important;
            }

            & .seat-map-icon:not(.facility):not(.exit) {
                height: 25px !important;
                width: 25px !important;
                margin: 1px !important;
            }

            & .seat-map-icon.BASSINET::after, & .seat-map-icon.bassinet::after {
                background-size: contain !important;
                width: 15px !important;
            }
        }
    }
}

div[data-booking-class="Y"][data-first-row="20"][data-last-row="54"] tbody .BASSINET {
    top: 6px !important;
    right: 1px !important;
}

div[data-booking-class='Y'][data-first-row='8'][data-last-row='28'],

div[data-booking-class='Y'][data-first-row='8'][data-last-row='31'],

div[data-booking-class='Y'][data-first-row='8'][data-last-row='36'],

div[data-booking-class='Y'][data-first-row='8'][data-last-row='33'],

div[data-booking-class='Y'][data-first-row='8'][data-last-row='38'] {

	table tr .seat-map-icon.exit {

		width: 35px !important;

	}

}

@media (max-width: 768px) {

	.seat-map[data-first-row='20'][data-last-row='54'] {

		td.column-left-side,

		td.column-right-side {

			display: block !important;

			.seat-map-icon.exit:after {

				background-size: contain !important;

				width: 30px !important;

			}

		}

	}

}

 .seat-popover-form.active {
	z-index: 2049 !important;
}

h3.hazmat-title {
 margin-top: 1.5rem !important;
}
.spark-menu__list-link {
 font-size: 16px !important;
   padding: 0 13px 0 13px !important;
}

.ducp-component-page-title h1:has(> span[data-translation="SabreDxContainerPageTitle.checkIn.start"]) {
  font-size: 33px !important;
  margin: 6px !important;
  padding-bottom: 30px !important;
  padding-top: 60px !important;
  font-family: 'Oswald' !important;
  position: relative!important;

}

.ducp-component-page-title h1 {
        font-size: 25px !important;
  margin: 0 !important;
  font-family: 'Oswald' !important;
}


.main-container {
      width: 100% !important;
     margin: auto !important;
  > div {
                width: 100% !important;
               margin: auto !important;
    }
    .sabre-dx-component-check-in-lookup .lookup-container {
          background: #fff !important;
           padding: 0 !important;
          color: #000 !important;
        }
        .spark-input__field {
              border: 1px solid rgb(161, 143, 99) !important;
    }
    .lookup-buttons {
              button {
                 max-width: 100% !important;
                   width: 100% !important;
                 border-radius: 4px !important;
               }
       }
}

.sabre-dx-page-check-in-itinerary {
     .sabre-dx-container-check-in-flight-summary,
  .sabre-dx-container-check-in-hazmat,
       .ducp-component-panel-content {
           box-shadow: none !important;
    }

    .spark-panel {
         border: none !important;
      }

      .sabre-dx-container-static[role='main'] {
                box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25) !important;
          margin-bottom: 30px !important;
                margin-top: 20px !important;
         border-radius: 4px !important;
               .ducp-component-page-button-wrapper {
                     text-align: center !important;
            }
            .sabre-dx-component-check-in-flight-summary {
                  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25) !important;
                    border-radius: 4px !important;
                  margin-top: 0px !important;
            }
    }
}

.seat-map-icon.BASSINET {
    pointer-events: none !important;
}

@media (max-width: 768px) {
   .main-container {
             width: 100% !important;
           > div {
                 width: 100% !important;
               }
       }
}


.ducp-component-page-title h1 span[data-translation="SabreDxContainerPageTitle.checkIn.start"] {
  font-family: 'Oswald' !important;
}

.sabre-dx-component-check-in-lookup .page-sub-heading {
  display: none;
}

.spark-step-indicator__item {
	min-width: auto !important;
}

.row {
  display: flex;
  flex-wrap: wrap;
}

.col-xs-12.col-sm-6.col-lg-4.flight-route-info.col-md-7.col-lg-6 {
  order: 1;
}

.col-xs-12.col-lg-2.flight-booking-info.align-right-lg.align-right-md.align-left-xs.col-md-5.col-lg-3.col-sm-4.align-right-sm {
  order: 2;
  margin-left: auto;
}

.col-xs-12.col-sm-8.col-md-12.flight-additional-info.col-lg-12 {
  order: 3;
  flex-basis: 50%;
}

.col-xs-12.col-sm-6.flight-travel-info.align-right-sm.col-md-12.col-lg-3 {
  order: 4;
  flex-basis: 50%;
}

@media (min-width: 992px) {
  .row {
    display: flex;
    flex-wrap: wrap;
  }

  .col-xs-12.col-sm-6.col-lg-4.flight-route-info.col-md-7.col-lg-6 {
    order: 1;
  }

  .col-xs-12.col-lg-2.flight-booking-info.align-right-lg.align-right-md.align-left-xs.col-md-5.col-lg-3.col-sm-4.align-right-sm {
    order: 2;
    margin-left: auto;
  }

  .col-xs-12.col-sm-8.col-md-12.flight-additional-info.col-lg-12 {
    order: 3;
    flex-basis: 50%;
  }

  .col-xs-12.col-sm-6.flight-travel-info.align-right-sm.col-md-12.col-lg-3 {
    order: 4;
    flex-basis: 50%;
  }
}

/* Mobile only - put booking info on same row as route info */
@media (max-width: 991px) {
  .col-xs-12.col-sm-6.col-lg-4.flight-route-info.col-md-7.col-lg-6 {
    flex: 1;
    width: auto;
  }

  .col-xs-12.col-lg-2.flight-booking-info.align-right-lg.align-right-md.align-left-xs.col-md-5.col-lg-3.col-sm-4.align-right-sm {
    flex: 0 0 auto;
    width: auto;
    margin-left: auto;
  }

  .flight-booking-info .row {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    text-align: right;
  }

  .flight-booking-info .flight-status {
    order: 1;
    width: 100%;
    display: flex;
    justify-content: flex-end;
  }

  .flight-booking-info .booking-class {
    order: 2;
    width: 100%;
    display: flex;
    justify-content: flex-end;
	  
  }
}

@media (max-width: 544px) {
  .ducp-component-flight-summary .flight-summary-header .ducp-component-panel-content .flight-summary-content .flight-brand {
    text-align: center;
  }
}


Font size for Cyrcle

.ducp-component-cart-panel ul.ducp-component-cart-panel-list > .ducp-component-cart-panel-section > .ducp-component-accordion > .spark-panel__content, .ducp-component-cart-panel .MessagePopup ul.ducp-component-cart-panel-list > .ducp-component-cart-panel-section > .ducp-component-accordion > .modal-content, .MessagePopup .ducp-component-cart-panel ul.ducp-component-cart-panel-list > .ducp-component-cart-panel-section > .ducp-component-accordion > .modal-content,
.ducp-component-cart-panel ul.ducp-component-cart-panel-list > .ducp-component-cart-panel-section > .ducp-component-accordion > .spark-panel__content .ducp-component-initial-circle,
.ducp-component-cart-panel .MessagePopup ul.ducp-component-cart-panel-list > .ducp-component-cart-panel-section > .ducp-component-accordion > .modal-content .ducp-component-initial-circle,
.MessagePopup .ducp-component-cart-panel ul.ducp-component-cart-panel-list > .ducp-component-cart-panel-section > .ducp-component-accordion > .modal-content .ducp-component-initial-circle,
.ducp-component-cart-panel ul.ducp-component-cart-panel-list > .ducp-component-cart-panel-section > .ducp-component-accordion > .spark-panel__content .PassengerNameItem,
.ducp-component-cart-panel .MessagePopup ul.ducp-component-cart-panel-list > .ducp-component-cart-panel-section > .ducp-component-accordion > .modal-content .PassengerNameItem,
.MessagePopup .ducp-component-cart-panel ul.ducp-component-cart-panel-list > .ducp-component-cart-panel-section > .ducp-component-accordion > .modal-content .PassengerNameItem,
.ducp-component-cart-panel ul.ducp-component-cart-panel-list > .ducp-component-cart-panel-section > .ducp-component-accordion > .spark-panel__content .ducp-component-cart-item .cart-item-label,
.ducp-component-cart-panel .MessagePopup ul.ducp-component-cart-panel-list > .ducp-component-cart-panel-section > .ducp-component-accordion > .modal-content .ducp-component-cart-item .cart-item-label,
.MessagePopup .ducp-component-cart-panel ul.ducp-component-cart-panel-list > .ducp-component-cart-panel-section > .ducp-component-accordion > .modal-content .ducp-component-cart-item .cart-item-label,
.ducp-component-cart-panel ul.ducp-component-cart-panel-list > .ducp-component-cart-panel-section > .ducp-component-accordion > .spark-panel__content .ducp-component-cart-item .cart-item-price,
.ducp-component-cart-panel .MessagePopup ul.ducp-component-cart-panel-list > .ducp-component-cart-panel-section > .ducp-component-accordion > .modal-content .ducp-component-cart-item .cart-item-price,
.MessagePopup .ducp-component-cart-panel ul.ducp-component-cart-panel-list > .ducp-component-cart-panel-section > .ducp-component-accordion > .modal-content .ducp-component-cart-item .cart-item-price,
.ducp-component-cart-panel ul.ducp-component-cart-panel-list > .ducp-component-cart-panel-section > .ducp-component-accordion > .spark-panel__content .ducp-component-cart-item .cart-item-remove-confirmation,
.ducp-component-cart-panel .MessagePopup ul.ducp-component-cart-panel-list > .ducp-component-cart-panel-section > .ducp-component-accordion > .modal-content .ducp-component-cart-item .cart-item-remove-confirmation,
.MessagePopup .ducp-component-cart-panel ul.ducp-component-cart-panel-list > .ducp-component-cart-panel-section > .ducp-component-accordion > .modal-content .ducp-component-cart-item .cart-item-remove-confirmation {
  font-size: 1.2rem;
  line-height: 2rem;
  color: #555;
}

.passengers-title span[data-translation="SabreDxComponentCheckInSeatmap.passengersLabel"] {
    font-size: 21px !important;
}

.spark-panel__header .ducp-component-title span[data-translation="SabreDxComponentCheckInPassengerSummary.title"] {
    font-size: 20px !important;
	color: #A18F63;
}

.sabre-dx-component-check-in-cart-seats .cart-flight-segment-header,
.sabre-dx-component-check-in-cart-seats .cart-flight-segment-header span {
    font-size: 15px !important;
}

.spark-panel__header .ducp-component-title span[data-translation="SabreDxComponentCheckInFlightSummary.flightSummary"] {
    font-size: 20px !important;
	color: #A18F63;
}


[dir] .spark-footer {
  background-color: #ffff;
	
}
.spark-footer {
  color: #4a5767;
  line-height: 5rem;
  overflow-y: hidden;
  width: 100%;
	
}
.spark-footer__list-link {
  color: #000000 !important;
  font-weight: bold !important;
font-size:13px !important;
  display: inline-block;
  line-height: 3rem;
}

.spark-footer .container,
.spark-footer__content {
  font-size: 12px !important;
	
}

.spark-footer__content {
  display: flex !important;
  flex-direction: column !important;

}


.spark-footer__list {
  padding-left: 0 !important;
}

[dir=ltr] .Footer .spark-footer__list-item:last-child {
  display:none;
}

[dir=ltr] .sabre-dx-container-footer .spark-footer__list .spark-footer__list-item:nth-last-child(2)::after {
   display:none;
}

@media (max-width: 543px) {
  [dir] .spark-footer__content {
    text-align: left;
  }
}

.sabre-dx-container-page-title {

  flex: 0 0 33.333% !important;

}
 
.heading.ducp-component-page-title:has(span[data-translation="SabreDxContainerPageTitle.checkIn.start"]) {

	text-align: center;

}
 
@media (max-width: 768px) {

  .sabre-dx-container-page-title {

    width: 100% !important;

    max-width: 100% !important;

    flex: 0 0 100% !important;

  }

}
 
 /* Override inline visibility style on mobile */
@media (max-width: 768px) {
  .spark-step-indicator__list.collapse {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    overflow: hidden !important;
    max-height: 0 !important;
  }

  /* Force the dropdown header to show as single item */
  .spark-step-indicator__body--dropdown 
  .spark-step-indicator__item--dropdown__header {
    display: flex !important;
  }

  /* Hide the full horizontal step list */
  .spark-step-indicator__body:not(.spark-step-indicator__body--dropdown) {
    display: none !important;
  }
}


@media (max-width: 544px) {
  .layout .sabre-dx-container-footer .spark-footer.Footer {
    height: 5rem;
  }
}

.ducp-component-airport.stacked span[data-translation="SabreDxComponentCheckInViewBoardingPass.airportNameFormat"] {
  font-size: 16.5px !important;
}


.sabre-dx-component-check-in-view-boarding-pass .boarding-passes .boarding-pass .boarding-day {
  font-size: 16.5px !important;
}

.sabre-dx-component-check-in-view-boarding-pass .boarding-passes .boarding-pass .field .field-label {
  font-size: 13px !important;
}



[dir=ltr] .ducp-component-accordion.spark-panel--expand > .spark-panel__header.has-right-content {
  padding-right: 2rem;
  display: block !important;
  padding-bottom: 20px !important;
  margin-bottom: 20px !important;
}

[dir] .ducp-component-accordion.spark-panel--expand > .spark-panel__content, [dir] .MessagePopup .ducp-component-accordion.spark-panel--expand > .modal-content {

  margin-top: -20px !important;
}


.flight-additional-details > span.separator {
   display: block !important;
}

.time-details > span.separator {
   display: block !important;
}
[data-translation="SabreDxComponentCheckInCart.views.itinerary.durationArrivalSeparator"] {
  display: none !important;
}
[data-translation="SabreDxComponentCheckInCart.views.itinerary.aircraftClassSeparator"] {
  display: none !important;
}

.duration-details span[aria-hidden="true"] {
  font-size: 15.6px !important;
}

.duration-details span[aria-hidden="true"]::before {
  content: "Travel time: ";
  font-size: 15.6px !important;
}

.duration-details span[aria-hidden="true"]::after {
  content: attr(aria-label);
  font-size: 15.6px !important;
}

.ducp-component-from-to.origin-destination .ducp-component-airport span[data-translation] {
  display: none !important;
}

.ducp-component-from-to.origin-destination .ducp-component-airport::after {
  content: attr(data-code) !important;
  font-size: 15.6px !important;
  font-weight: 500 !important;
}

.flight-status-details {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}



.itinerary-part-flight-details {
  display: contents !important;
}

.ducp-component-from-to.origin-destination {
  order: 1 !important;
}

.itinerary-part-time-details {
  order: 2 !important;
	font-size: 15.6px
}

.time-details {
  order: 3 !important;
}

.flight-additional-details {
  order: 4 !important;
}

.brand {
  order: 5 !important;
}

.flight-number {
  order: 6 !important;
}

.ducp-component-cart-panel ul.ducp-component-cart-panel-list > .ducp-component-cart-panel-section > .ducp-component-accordion > .spark-panel__content h5, .ducp-component-cart-panel .MessagePopup ul.ducp-component-cart-panel-list > .ducp-component-cart-panel-section > .ducp-component-accordion > .modal-content h5, .MessagePopup .ducp-component-cart-panel ul.ducp-component-cart-panel-list > .ducp-component-cart-panel-section > .ducp-component-accordion > .modal-content h5 {
  background: #f2f2f2;
    margin-left: -1rem;
    margin-right: -1rem;
    line-height: 3.5rem;
  
}

span[data-translation="SabreDxComponentCheckInCart.views.passengers.title"] {
  font-weight: 700 !important;
}

[dir] .spark-badge--success, [dir] .ducp-component-flight-status > .flight-status-badge.ON_TIME, [dir] .ducp-component-flight-status > .flight-status-badge.CONFIRMED, [dir] .ducp-component-flight-status > .flight-status-badge.EARLY {
  background-color: #00aba8;;
  border: #00aba8;
}


.flight-additional-details .aircraft-section {
  display: none !important;
}
.time-details .duration-details {
  display: none !important;
}

[dir=ltr] .ducp-component-from-to .left-content {
  /* padding-right: 0.5rem; */
  /* padding-left: 0.5rem; */
}

.spark-step-indicator__item .ducp-component-flight-route {
font-size: 16px !important;
line-height: normal !important;
}

.spark-step-indicator__icon {
padding-top: 20px !important;
}
 

[data-translation="SabreDxContainerPageTitle.checkIn.itinerary"] {
  font-weight: 700 !important;
}

[data-translation="SabreDxContainerPageTitle.checkIn.passengers"] {
  font-weight: 700 !important;
}
[data-translation="SabreDxContainerPageTitle.checkIn.seats"] {
  font-weight: 700 !important;
}

[dir] .ducp-component-page-button-wrapper > button {
  border-radius: 4px !important;
}

/* ============================================================
   Gulf Air — Extras · Custom CSS
   Targets actual DXCI DOM class names from the live component
   ============================================================ */

/* ── Brand Tokens ───────────────────────────────────────────── */
:root {
  --ga-gold:          #9E8456;
  --ga-gold-light:    #C8A96A;
  --ga-gold-pale:     #F5EED8;
  --ga-gold-border:   #C8A96A;
  --ga-navy:          #1C2B4A;
  --ga-bg:            #FFFFFF;
  --ga-bg-muted:      #FAFAFA;
  --ga-text-primary:  #1A1A1A;
  --ga-text-secondary:#6B6B6B;
  --ga-text-tertiary: #A0A0A0;
  --ga-border:        rgba(0,0,0,0.10);
  --ga-radius-md:     8px;
  --ga-radius-lg:     12px;
}


/* ══════════════════════════════════════════════════════════════
   OUTER CARD WRAPPER  →  .ancillary-common.tile
   ══════════════════════════════════════════════════════════════ */
.ancillary-common.tile {
  background: var(--ga-bg) !important;
  border: 0.5px solid var(--ga-border) !important;
  border-radius: var(--ga-radius-lg) !important;
  overflow: hidden !important;
  box-shadow: none !important;
  padding: 0 !important;
  position: relative !important;
}

/* Gold accent stripe at top */
.ancillary-common.tile::before {
  content: '' !important;
  display: block !important;
  height: 3px !important;
  width: 100% !important;
  background: linear-gradient(90deg, #9E8456 0%, #C8A96A 60%, #E8D5A3 100%) !important;
}


/* ══════════════════════════════════════════════════════════════
   LEFT CONTENT PANEL  →  .dxp-ancillary-content
   ══════════════════════════════════════════════════════════════ */
.dxp-ancillary-content {
  padding: 1rem 1.25rem !important;
  border-right: 0.5px solid var(--ga-border) !important;
}


/* ── Card Title  →  .ducp-component-title ───────────────────── */
.ancillary-common .ducp-component-title {
  font-size: 15px !important;
  font-weight: 500 !important;
  color: var(--ga-text-primary) !important;
  margin: 0 0 14px 0 !important;
  line-height: 1.3 !important;
  border: none !important;
  padding: 0 !important;
}

.ancillary-common .ducp-component-title span {
  font-size: 20px !important;
  font-weight: 500 !important;
  color: var(--ga-text-primary) !important;
}

/* "Recommended" badge injected via ::after */
.ancillary-common .ducp-component-title::after {
  content: 'Recommended' !important;
  font-size: 10px !important;
  font-weight: 500 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: #7A6135 !important;
  background: var(--ga-gold-pale) !important;
  border: 0.5px solid var(--ga-gold-border) !important;
  border-radius: 4px !important;
  padding: 3px 8px !important;
  margin-left: 10px !important;
  vertical-align: middle !important;
  font-family: sans-serif !important;
}


/* ── Description block  →  .description ────────────────────── */
.ancillary-common .description {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  margin-top: 8px !important;
}

/* Lounge image */
.ancillary-common .description .img-div {
  width: 100% !important;
  height: 219px !important;
  object-fit: cover !important;
  border-radius: var(--ga-radius-md) !important;
  display: block !important;
}

/* Intro text */
.ancillary-common .description .intro {
  font-size: 14px !important;
  color: var(--ga-text-secondary) !important;
  margin: 0 !important;
  line-height: 1.5 !important;
}

/* Feature bullets injected after intro via ::after */
.ancillary-common .description .intro::after {
  content: '-  Food & beverages included\A-  High-speed Wi-Fi\A-  Priority boarding alert' !important;
  display: block !important;
  white-space: pre !important;
  font-size: 14px !important;
  color: var(--ga-text-secondary) !important;
  margin-top: 8px !important;
  line-height: 2 !important;
}


/* ══════════════════════════════════════════════════════════════
   RIGHT SUMMARY PANEL  →  .ancillary-summary-common
   ══════════════════════════════════════════════════════════════ */
.ancillary-summary-common {
  padding: 1rem 1.25rem !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  gap: 12px !important;
}

/* Spark panel — remove default card styling */
.ancillary-summary-common .spark-panel.spark-panel--card {
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
  padding: 0 !important;
}

.ancillary-summary-common .spark-panel__content {
  padding: 0 !important;
}


/* ── Summary title  →  .ancillary-summary-title ─────────────── */
.ancillary-summary-common .ancillary-summary-title {
  font-size: 14px !important;
  font-weight: 500 !important;
  color: var(--ga-text-primary) !important;
  margin-bottom: -30px !important;
  /* margin: 2rem; */
  margin-left: 2rem;
}

/* ── Starting from price  →  .starting-from ─────────────────── */
.ancillary-summary-common .starting-from {
  font-size: 12.5px !important;
  /* color: var(--ga-text-tertiary) !important; */
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
}

.ancillary-summary-common .price-info .currency.symbol span,
.ancillary-summary-common .price-info .amount .number {
  font-size: 20px !important;
  font-weight: 500 !important;
  color: var(--ga-text-primary) !important;
}


/* ── Add Ancillary button  →  .summary-button-inner ─────────── */
.ancillary-summary-common .summary-button-inner {
  width: 100% !important;
  /* background: var(--ga-navy) !important; */
  color: #ffffff !important;
  border: none !important;
  border-radius: var(--ga-radius-md) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  padding: 10px 18px !important;
  cursor: pointer !important;
  letter-spacing: 0.03em !important;
  transition: background 0.15s ease !important;
  text-align: center !important;
}

.ancillary-summary-common .summary-button-inner:hover {
  background: var(--ga-navy-hover, #253966) !important;
}

/* Button label */
.ancillary-summary-common .summary-button-inner .button-label span {
  font-size: 14px !important;
  font-weight: 500 !important;
  color: #ffffff !important;
}


/* ── More Details link  →  .summary-link ────────────────────── */
.ancillary-summary-common .summary-link {
  font-size: 11px !important;
  color: var(--ga-gold) !important;
  text-decoration: underline !important;
  text-underline-offset: 3px !important;
  cursor: pointer !important;
}

.ancillary-summary-common .summary-link:hover {
  color: var(--ga-gold-light) !important;
}


/* ══════════════════════════════════════════════════════════════
   SEGMENT ROWS  (expanded state after clicking Add Ancillary)
   Targets the passenger/flight rows inside .spark-expand
   ══════════════════════════════════════════════════════════════ */

/* Segment row wrapper */
.spark-expand .ancillary-passenger-row,
.spark-expand .ancillary-segment-row {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  border: 0.5px solid var(--ga-border) !important;
  border-radius: var(--ga-radius-md) !important;
  padding: 10px 14px !important;
  margin-bottom: 8px !important;
  cursor: pointer !important;
  transition: border-color 0.15s ease, background 0.15s ease !important;
  background: var(--ga-bg) !important;
}

.spark-expand .ancillary-passenger-row:hover,
.spark-expand .ancillary-segment-row:hover {
  border-color: rgba(0,0,0,0.20) !important;
  background: var(--ga-bg-muted) !important;
}

/* Selected / checked state */
.spark-expand .ancillary-passenger-row.is-selected,
.spark-expand input[type="checkbox"]:checked + label,
.spark-expand input[type="checkbox"]:checked ~ .ancillary-passenger-row {
  border-color: var(--ga-gold) !important;
  background: #FDFAF5 !important;
}

/* Native checkbox → styled gold box */
.spark-expand input[type="checkbox"] {
  appearance: none !important;
  -webkit-appearance: none !important;
  width: 18px !important;
  height: 18px !important;
  border: 1.5px solid rgba(0,0,0,0.20) !important;
  border-radius: 4px !important;
  background: var(--ga-bg) !important;
  cursor: pointer !important;
  flex-shrink: 0 !important;
  position: relative !important;
  transition: border-color 0.15s ease, background 0.15s ease !important;
}

.spark-expand input[type="checkbox"]:checked {
  background: var(--ga-gold) !important;
  border-color: var(--ga-gold) !important;
}

/* Checkmark via ::after */
.spark-expand input[type="checkbox"]:checked::after {
  content: '' !important;
  display: block !important;
  width: 5px !important;
  height: 9px !important;
  border: 2px solid #ffffff !important;
  border-top: none !important;
  border-left: none !important;
  transform: rotate(45deg) !important;
  position: absolute !important;
  top: 1px !important;
  left: 5px !important;
}

/* Flight route text */
.spark-expand .ancillary-passenger-row .passenger-name,
.spark-expand .ancillary-passenger-row .segment-route {
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--ga-text-primary) !important;
  flex: 1 !important;
}

/* Price inside row */
.spark-expand .ancillary-passenger-row .ducp-component-price,
.spark-expand .ancillary-passenger-row .price-info {
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--ga-text-primary) !important;
  margin-left: auto !important;
}

/* Flight number badge */
.spark-expand .flight-number,
.spark-expand .ancillary-flight-num {
  font-size: 10px !important;
  font-weight: 500 !important;
  letter-spacing: 0.05em !important;
  color: var(--ga-text-tertiary) !important;
  background: var(--ga-bg-muted) !important;
  border: 0.5px solid var(--ga-border) !important;
  border-radius: 3px !important;
  padding: 1px 5px !important;
}

/* Passenger avatar circle */
.spark-expand .passenger-initials,
.spark-expand .ancillary-avatar {
  width: 24px !important;
  height: 24px !important;
  border-radius: 50% !important;
  background: #EBE3D0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 9px !important;
  font-weight: 500 !important;
  color: #7A6135 !important;
  flex-shrink: 0 !important;
}


/* ══════════════════════════════════════════════════════════════
   FOOTER CONFIRM / CANCEL BUTTONS (expanded state)
   ══════════════════════════════════════════════════════════════ */
.ancillary-common .ducp-component-button:not(.summary-button-inner) {
  border-radius: var(--ga-radius-md) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  padding: 10px 18px !important;
  transition: background 0.15s ease !important;
}

/* Confirm */
.ancillary-common .ducp-component-button.confirm-button,
.ancillary-common button[data-test-id="confirm-ancillary"] {
  background: var(--ga-navy) !important;
  color: #ffffff !important;
  border: none !important;
}

.ancillary-common .ducp-component-button.confirm-button:hover,
.ancillary-common button[data-test-id="confirm-ancillary"]:hover {
  background: #253966 !important;
}

/* Cancel */
.ancillary-common .ducp-component-button.cancel-button,
.ancillary-common button[data-test-id="cancel-ancillary"] {
  color: #ffffff !important;
  border: 0.5px solid rgba(0,0,0,0.20) !important;
}

.ancillary-common .ducp-component-button.cancel-button:hover,
.ancillary-common button[data-test-id="cancel-ancillary"]:hover {
  background: var(--ga-bg-muted) !important;
}

/* Bigger card under Flight Options */
div[class*="ancillary"],
div[class*="extra"] {
  /* width: 360px !important; */
  /* max-width: 360px !important; */
  /* min-height: 60px !important; */
}

@media (max-width: 768px) {
  .dxp-masonry {
    height: auto !important;
  }

  /* 2. Take tiles out of absolute positioning */
  .dxp-masonry .ancillary-card.tile {
    position: static !important;
    left: auto !important;
    top: auto !important;
    width: 100% !important;
  }

  /* 3. Stack the two content blocks vertically */
  .ancillary-card.tile {
    display: flex;
    flex-direction: column;
  }

  /* 4. Ensure title is visible */
  .dxp-ancillary-content {
    display: block !important;
    order: 1;
  }

  .dxp-ancillary-content .title {
    display: block !important;
    font-size: 18px;
    margin-bottom: 8px;
  }

  /* 5. Image should not cover text */
  .dxp-ancillary-content .img-div {
    display: block !important;
    width: 100%;
    height: auto;
    position: static !important;
  }

  /* 6. Summary box comes after */
  .ancillary-summary-common {
    order: 2;
  }
}

.sabre-dx-component-check-in-ancillaries .ancillary-summary-common .summary-button .ducp-component-button {
background-color: #a18f63 !important;

}

/* Extras page - airport names and flight number only */
.spark-panel__content.ducp-component-panel-content .segment .ducp-component-airport,
.spark-panel__content.ducp-component-panel-content .segment .flight-name-main {
  font-size: 14px !important;
}

[dir=ltr] .ducp-component-ancillary-views .total-container {
  padding-right: 3rem;

}

.summary-button button[data-test-id="add-ancillary-group3"] {
  padding: 14px 30px !important;
  font-size: 16px !important;
}


[dir=ltr] .sabre-dx-component-check-in-passenger-summary .ducp-component-passenger-summary .passenger-summary-header .button-container .ducp-component-button {
  border-radius: 4px !important;
}

.ancillary-summary-common .spark-panel__content {
  display: flex;
  flex-direction: column;
}

/* Line 1: Added To Cart */
.ancillary-summary-common .added-to-cart-title {
  order: 1;
}

/* Line 2: Total amount (price) */
.ancillary-summary-common .ancillary-price {
  order: 2;
  display: block !important;
}

/* Line 3: Buy your extras now */
.ancillary-summary-common .ancillary-summary-title {
  order: 3;
}


/* Option 2 — pull it up with negative margin */
#group3-starting-from-text {
  margin-top: -16px !important;
  margin-bottom: 10px !important;
}

.sabre-dx-component-check-in-ancillaries .ancillary-summary-common .summary-content .ancillary-summary-title {
  display: none !important;
}


[dir] .spark-badge--warning, [dir] .ducp-component-flight-status > .flight-status-badge.DELAYED {
  border: none
}

  .ducp-component-flight-summary .flight-summary-header .ducp-component-panel-content .flight-booking-info .flight-status .flight-status-badge {
    height: 1.8rem;
    font-size: 1.0rem;
  }

.ancillary-common.ancillary-card {
  border: 0.5px solid #a08c4c !important;
}

[dir] .text-button, [dir] .text-button:hover {
  background-color: #1F2A44 !important;
}

[dir] .spark-btn--secondary, [dir] .cancel-check-in-container .cancel-check-in-button-container .ducp-component-button.cancel-cancel-check-in-button, [dir] .email-boarding-pass-container .email-button-container .ducp-component-button.cancel-email-button, [dir] .TravelExtras .footer > button.go-back, [dir] .sabre-dx-component-check-in-documents .footer > button.go-back, [dir] .ducp-component-toolbar .spark-toolbar.as-buttons .spark-toolbar__item--secondary-button, [dir] .ducp-component-toolbar .spark-toolbar.as-buttons .spark-toolbar__show-more, [dir] .ducp-component-number-selector .spark-number-selector .ducp-component-button.icon-button, [dir] .ducp-component-button.secondary-button {
  background-color: #1F2A44;

}

[dir] .spark-btn--secondary.hover, [dir] .cancel-check-in-container .cancel-check-in-button-container .hover.ducp-component-button.cancel-cancel-check-in-button, [dir] .email-boarding-pass-container .email-button-container .hover.ducp-component-button.cancel-email-button, [dir] .TravelExtras .footer > button.hover.go-back, [dir] .sabre-dx-component-check-in-documents .footer > button.hover.go-back, [dir] .ducp-component-toolbar .spark-toolbar.as-buttons .hover.spark-toolbar__item--secondary-button, [dir] .ducp-component-toolbar .spark-toolbar.as-buttons .hover.spark-toolbar__show-more, [dir] .ducp-component-number-selector .spark-number-selector .hover.ducp-component-button.icon-button, [dir] .hover.ducp-component-button.secondary-button, [dir] .spark-btn--secondary:hover, [dir] .cancel-check-in-container .cancel-check-in-button-container .ducp-component-button.cancel-cancel-check-in-button:hover, [dir] .email-boarding-pass-container .email-button-container .ducp-component-button.cancel-email-button:hover, [dir] .TravelExtras .footer > button.go-back:hover, [dir] .sabre-dx-component-check-in-documents .footer > button.go-back:hover, [dir] .ducp-component-toolbar .spark-toolbar.as-buttons .spark-toolbar__item--secondary-button:hover, [dir] .ducp-component-toolbar .spark-toolbar.as-buttons .spark-toolbar__show-more:hover, [dir] .ducp-component-number-selector .spark-number-selector .ducp-component-button.icon-button:hover, [dir] .ducp-component-button.secondary-button:hover {
  background-color: #1F2A44;

}

[dir] .dxp-ancillary-content.tile .intro {
  padding: 10px 1rem;
}

@media (max-width: 768px) {
  /* Remove absolute positioning from masonry */
  .dxp-masonry {
    display: flex !important;
    justify-content: center !important;
   
  }

}

[dir] .layout .ducp-page {
  padding-bottom: 9rem;
}

@media (max-width: 768px) {
  [dir] .ducp-component-breadcrumbs {
    background-color: rgba(160, 140, 76, 0.1) !important;
  }
}



 /* AGGRESSIVE FIX - Override all sticky behavior on mobile */

@media (max-width: 768px) {
  
  /* Nuclear option - remove sticky from everywhere */
  .sticky-outer-wrapper,
  .sticky-inner-wrapper,
  .sabre-dx-container-check-in-breadcrumbs,
  .sabre-dx-component-check-in-breadcrumbs,
  .spark-step-indicator {
    position: static !important;
    top: auto !important;
    bottom: auto !important;
    transform: none !important;
    will-change: auto !important;
    -webkit-transform: none !important;
    -webkit-will-change: auto !important;
  }
  
  /* Remove any stacking context that might cause sticky behavior */
  .sticky-outer-wrapper {
    display: block !important;
    width: 100% !important;
    height: auto !important;
  }
  
  .sticky-inner-wrapper {
    display: block !important;
    width: 100% !important;
    height: auto !important;
  }
  
  /* Ensure normal flow */
  .sabre-dx-container-check-in-breadcrumbs {
    display: block !important;
    width: 100% !important;
  }
}

/* Desktop - preserve original styling */
@media (min-width: 769px) {
  .sticky-outer-wrapper {
    position: relative !important;
  }
  
  .sticky-inner-wrapper {
    position: relative !important;
    transform: translate3d(0px, 0px, 0px) !important;
  }
}

.seat-popover-form .spark-popover__close {
  font-size: 1.5rem;
}
.seat-popover-form .passenger-name {
  line-height: 2.3rem;

}
@media (min-width: 1800px) {
  .seat-popover-form .passenger-name {
    line-height: 2.3rem;
  }
}

[dir=ltr] .PassengerNameItem .full-name .passenger-type {
  margin-right: 10px;
}

.DucpComponentPopover.spark-popover__close {
  outline: none !important;
  border: none !important;
  box-shadow: none !important;
}

.DucpComponentPopover.spark-popover__close:focus {
  outline: none !important;
  border: none !important;
  box-shadow: none !important;
}

.DucpComponentPopover.spark-popover__close:focus-visible {
  outline: none !important;
  border: none !important;
  box-shadow: none !important;
}

.DucpComponentPopover.spark-popover__close:active {
  outline: none !important;
  border: none !important;
  box-shadow: none !important;
}

/* Alternative - if the border comes from the button itself */
.DucpComponentPopover.spark-popover__close,
.spark-popover__close {
  border: none !important;
  outline: none !important;
}

.spark-popover__close:focus,
.spark-popover__close:focus-visible {
  outline: none !important;
  border: none !important;
}


[dir=ltr] .ducp-component-breadcrumbs .spark-step-indicator__list button {
  margin-left: Auto !important;
  margin-right: 30px;
}

.spark-step-indicator__item--completed .spark-step-indicator__icon::after {
  font-size: 1.8333333333rem;
  color: #000000;

}

[dir] .spark-step-indicator__item--completed .spark-step-indicator__icon {
  background-color:#f5f3ed !important;
  border-color: #f5f3ed;
}

.spark-step-indicator__item:hover {
  background: transparent !important;
  color: inherit !important;
  cursor: default !important;
}
 
.spark-step-indicator__item:hover .spark-icon,
.spark-step-indicator__item:hover .spark-icon * {
  fill: currentColor !important;
  color: inherit !important;
}

@-webkit-keyframes RotateClockwise {
    0% {
        transform: rotate(0deg);
    }

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

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

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

@-webkit-keyframes RotateCounterClockwise {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(-359deg);
    }
}

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

    100% {
        transform: rotate(-359deg);
    }
}

@keyframes letItFly {
    25% {
        opacity: 0.4;
    }

    50% {
        opacity: 1;
        transform: scale(1.4) skew(0deg, 0deg);
    }

    75% {
        opacity: 0.7;
    }

    90% {
        opacity: 0.1;
    }

    100% {
        left: 80%;
        transform: scale(1) skew(-15deg, 18deg);
        opacity: 0;
        filter: drop-shadow(rgb(153, 153, 153) 18px 10px 2px);
    }
}

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

.spark-header[data-breakpoint="xs"]:not(.spark-header_placeholder), .spark-header.spark-header--condensed:not(.spark-header_placeholder) {
    height: 6rem;
}

.spark-header[data-breakpoint="xs"]:not(.spark-header__placeholder) .spark-header__nav, .spark-header.spark-header--condensed:not(.spark-header__placeholder) .spark-header__nav {
    height: 6rem;
}

[dir="ltr"] .spark-header[data-breakpoint="xs"]:not(.spark-header__placeholder) .spark-header__title, [dir="ltr"] .spark-header.spark-header--condensed:not(.spark-header__placeholder) .spark-header__title {
    padding: 0px 2rem calc(1.375rem) 1rem;
}

[dir="rtl"] .spark-header[data-breakpoint="xs"]:not(.spark-header__placeholder) .spark-header__title, [dir="rtl"] .spark-header.spark-header--condensed:not(.spark-header__placeholder) .spark-header__title {
    padding: 0px 1rem calc(1.375rem) 2rem;
}

.progress-background {
    max-height: 100vh;
    position: fixed;
    top: 0px;
    max-width: 100vw;
    background: rgb(20, 20, 31) !important;
}

[dir="ltr"] .screen-centered {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: flex-end;
}

html[dir="ltr"] .ProgressIndicator::before {
    background-image: url("../images/gulf-loader.svg");
    width: 120px;
    height: 135px;
    display: block;
    content: "";
    position: absolute;
    top: -60px;
}

html[dir="ltr"] .ProgressIndicator > progress, .ProgressIndicator .spark-progress__text, .ProgressIndicator .spark-progress__meter {
    content: "";
    position: relative;
    right: auto;
    max-width: 25px !important;
    max-height: 25px !important;
    width: 25px !important;
    height: 25px !important;
    border-width: medium !important;
    border-style: none !important;
    border-color: currentcolor !important;
    border-image: initial !important;
    background-color: transparent !important;
    animation: auto ease 0s 1 normal none running none !important;
    display: block !important;
    top: auto !important;
    left: auto !important;
    margin: 0px !important;
    padding: 0px !important;
}

html[dir="ltr"] .ProgressIndicator > progress::before, .ProgressIndicator .spark-progress__text::before, .ProgressIndicator .spark-progress__meter::before {
    max-width: 25px;
    max-height: 25px;
    width: 25px;
    height: 25px;
    position: relative;
    transform: scale(0);
    border-radius: 50%;
    background-color: rgb(161, 143, 99);
    content: "";
    display: block !important;
    top: 0px !important;
    left: 0px !important;
    margin: 0px !important;
    padding: 0px !important;
    border-width: medium !important;
    border-style: none !important;
    border-color: currentcolor !important;
    border-image: initial !important;
    animation: 1.5s linear 0s infinite normal none running pulse !important;
}

html[dir="ltr"] .ProgressIndicator > progress {
    margin-right: 1.5rem !important;
}

.ProgressIndicator .spark-progress__meter {
    margin-left: 1.5rem !important;
}

.ProgressIndicator .spark-progress__text {
    color: rgb(20, 20, 31) !important;
    font-size: 0px !important;
}

.ProgressIndicator .spark-progress__text::before {
    animation-delay: 0.25s !important;
}

.ProgressIndicator .spark-progress__meter::before {
    animation-delay: 0.5s !important;
}

html[dir="ltr"] .ProgressIndicator > progress::after {
    display: none;
}

.initial-progress-indicator {
    background: rgb(20, 20, 31);
    height: 100vh;
    width: 100vw;
    position: fixed;
    top: 0px;
    left: 0px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.dxp-spinner {
    background-image: url("../images/gulf-loader.svg");
    background-repeat: no-repeat;
    width: 120px;
    height: 200px;
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-evenly;
}

.dxp-spinner span {
    width: 25px;
    height: 25px;
    display: block;
    border-radius: 50%;
    background-color: rgb(161, 143, 99);
    transform: scale(0);
    content: "";
    animation: 1.5s linear 0s infinite normal none running pulse !important;
}

.dxp-spinner .bounce2 {
    animation-delay: 0.25s !important;
}

.dxp-spinner .bounce3 {
    animation-delay: 0.5s !important;
}

.page-loading-message {
    display: none;
}

@keyframes pulse {
    0% {
        transform: scale(0);
    }

    20% {
        transform: scale(1);
    }

    25%, 75% {
        transform: scale(0.9);
    }

    100% {
        transform: scale(0);
    }
}

.spark-progress__meter::after {
    display: none !important;
}

#dateOfBirth_error {
    display: none !important;
}

#expirationDate_error {
    display: none !important;
}

.spark-input__message {
    display: none !important;
}

.error-technical-info {
    display: none !important;
}

#dateOfBirth_error {
    display: none !important;
}

div[data-booking-class="Y"][data-first-row="8"][data-last-row="28"] tbody .EXTRA_LEG_SPACE, div[data-booking-class="Y"][data-first-row="8"][data-last-row="31"] tbody .EXTRA_LEG_SPACE, div[data-booking-class="Y"][data-first-row="8"][data-last-row="36"] tbody .EXTRA_LEG_SPACE, div[data-booking-class="Y"][data-first-row="8"][data-last-row="33"] tbody .EXTRA_LEG_SPACE, div[data-booking-class="Y"][data-first-row="8"][data-last-row="38"] tbody .EXTRA_LEG_SPACE, div[data-booking-class="Y"][data-first-row="20"][data-last-row="54"] tbody .EXTRA_LEG_SPACE {
    display: none !important;
}

div[data-booking-class="Y"][data-first-row="8"][data-last-row="28"] .seat-map-slot, div[data-booking-class="Y"][data-first-row="8"][data-last-row="31"] .seat-map-slot, div[data-booking-class="Y"][data-first-row="8"][data-last-row="36"] .seat-map-slot, div[data-booking-class="Y"][data-first-row="8"][data-last-row="33"] .seat-map-slot, div[data-booking-class="Y"][data-first-row="8"][data-last-row="38"] .seat-map-slot, div[data-booking-class="Y"][data-first-row="20"][data-last-row="54"] .seat-map-slot {
    vertical-align: middle !important;
}

div[data-booking-class="Y"][data-first-row="8"][data-last-row="28"] tbody .BASSINET, div[data-booking-class="Y"][data-first-row="8"][data-last-row="31"] tbody .BASSINET, div[data-booking-class="Y"][data-first-row="8"][data-last-row="36"] tbody .BASSINET, div[data-booking-class="Y"][data-first-row="8"][data-last-row="33"] tbody .BASSINET, div[data-booking-class="Y"][data-first-row="8"][data-last-row="38"] tbody .BASSINET, div[data-booking-class="Y"][data-first-row="20"][data-last-row="54"] tbody .BASSINET {
    top: 13px !important;
    z-index: 1 !important;
    position: absolute !important;
    right: -1px !important;
}

div[data-booking-class="Y"][data-first-row="20"][data-last-row="54"] tbody .BASSINET {
    top: 10px !important;
}

@font-face {
    font-family: "GA Sans";
    src: url("../fonts/GASans-Heavy.woff2") format("woff2"), url("../fonts/GASans-Heavy.woff") format("woff"), url("../fonts/GASans-Heavy.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

.body {
    background-color: rgb(255, 255, 255) !important;
}

#SabreDxComponentCheckInBreadcrumbs {
    background-color: rgb(227, 222, 219) !important;
}

[dir] .ducp-component-breadcrumbs {
    background: #f5f3ed !important;
}

.ducp-component-breadcrumbs .spark-step-indicator__list {
    background: #f5f3ed !important;
}

.sabre-dx-container-check-in-flight-summary {
     /* box-shadow: rgba(0, 0, 0, 0.2) 0px 1px 10px inset; */
}

.sabre-dx-container-check-in-hazmat {
    box-shadow: rgba(0, 0, 0, 0.2) 0px 1px 10px inset;
}

.spark-step-indicator__subtext {
    color: rgb(0, 0, 0) !important;
}

.spark-step-indicator__title-text {
    color: rgb(0, 0, 0) !important;
}

.spark-step-indicator__icon {
    color: rgb(0, 0, 0) !important;
}

.park-step-indicator__item {
    color: rgb(0, 0, 0) !important;
}

.spark-step-indicator__item--disabled {
    color: rgb(0, 0, 0) !important;
    font-weight: bold;
}

.ducp-component-breadcrumbs .spark-step-indicator__list button::after {
    line-height: 130%;
}


div[data-booking-class="Y"][data-first-row="8"][data-last-row="28"] tbody .EXTRA_LEG_SPACE, div[data-booking-class="Y"][data-first-row="8"][data-last-row="31"] tbody .EXTRA_LEG_SPACE, div[data-booking-class="Y"][data-first-row="8"][data-last-row="36"] tbody .EXTRA_LEG_SPACE, div[data-booking-class="Y"][data-first-row="8"][data-last-row="33"] tbody .EXTRA_LEG_SPACE, div[data-booking-class="Y"][data-first-row="8"][data-last-row="38"] tbody .EXTRA_LEG_SPACE, div[data-booking-class="Y"][data-first-row="20"][data-last-row="54"] tbody .EXTRA_LEG_SPACE {
    display: none !important;
}

div[data-booking-class="Y"][data-first-row="8"][data-last-row="28"] .seat-map-slot, div[data-booking-class="Y"][data-first-row="8"][data-last-row="31"] .seat-map-slot, div[data-booking-class="Y"][data-first-row="8"][data-last-row="36"] .seat-map-slot, div[data-booking-class="Y"][data-first-row="8"][data-last-row="33"] .seat-map-slot, div[data-booking-class="Y"][data-first-row="8"][data-last-row="38"] .seat-map-slot, div[data-booking-class="Y"][data-first-row="20"][data-last-row="54"] .seat-map-slot {
    vertical-align: middle !important;
}

div[data-booking-class="Y"][data-first-row="8"][data-last-row="28"] tbody .BASSINET, div[data-booking-class="Y"][data-first-row="8"][data-last-row="31"] tbody .BASSINET, div[data-booking-class="Y"][data-first-row="8"][data-last-row="36"] tbody .BASSINET, div[data-booking-class="Y"][data-first-row="8"][data-last-row="33"] tbody .BASSINET, div[data-booking-class="Y"][data-first-row="8"][data-last-row="38"] tbody .BASSINET, div[data-booking-class="Y"][data-first-row="20"][data-last-row="54"] tbody .BASSINET {
    background: none;
    top: 8px !important;
    z-index: 1 !important;
    position: absolute !important;
    right: -3px !important;
}

.seat-map .seat-popover {
    display: block;
    padding: 2px !important;
}

.seat-map .seat-map-icon:not(.facility):not(.exit) {
    background-image: none !important;
    border-radius: 4px !important;
    height: 35px !important;
    width: 35px !important;
}

.seat-map .seat-map-icon.PREMIUM, .seat-map .seat-map-icon.seat-pay {
    background: rgb(140, 204, 207) !important;
}

.seat-map [dir="ltr"] .seat-map-icon.SEAT-EXIT, .seat-map [dir="ltr"] .seat-map-icon.seat-exit {
    background: rgb(237, 135, 102) !important;
}

.seat-map .seat-map-icon.RESERVED, .seat-map .seat-map-icon.seat-unavailable {
    background: rgb(233, 233, 233) !important;
}

.seat-map .seat-map-slot.is-seat > div[class*="-selected"], .seat-map .SeatMapLegend .seat-map-icon.SELECTED {
    background: rgb(173, 157, 115) !important;
}



div[data-booking-class="Y"][data-first-row="8"][data-last-row="28"] tbody .BASSINET::after, div[data-booking-class="Y"][data-first-row="8"][data-last-row="31"] tbody .BASSINET::after, div[data-booking-class="Y"][data-first-row="8"][data-last-row="36"] tbody .BASSINET::after, div[data-booking-class="Y"][data-first-row="8"][data-last-row="33"] tbody .BASSINET::after, div[data-booking-class="Y"][data-first-row="8"][data-last-row="38"] tbody .BASSINET::after, div[data-booking-class="Y"][data-first-row="20"][data-last-row="54"] tbody .BASSINET::after {
    height: 24px;
    width: 23px;
    background: url("https://flights.gulfair.com/assets/icons/seats/bassinet.svg") no-repeat !important;
}

.legend-item-row:has(.EXTRA_LEG_SPACE) {
    display: none !important;
}

.seat-map-passengers .passengers .passenger-container .passenger .passenger-name-item .full-name .passenger-name-sub-text {
    line-height: 100%;
    display: none !important;
}

.ducp-component-flight-route {
    font-size: larger !important;
    line-height: 3rem;
}

.spark-step-indicator__item {
    align-items: center;
    color: rgb(0, 0, 0);
}


.seat:not(.seat-pay):not(.seat-exit):not(.seat-facility):not(.extras .seat) {
    background-color: rgb(255, 222, 167);
}

@media (max-width: 768px) {
    .seat-map-cabin-group {
        padding: 0px !important;
        & .seat-map[data-first-row="20"][data-last-row="54"] {
            & td.column-left-side, & td.column-right-side {
                & .seat-map-icon.exit: :after {
                    background-size: contain !important;
                    width: 30px !important;
                }
            }

            & .aisle {
                font-size: 10px !important;
            }

            & .seat-popover {
                padding: 0px !important;
            }

            & .seat-map-icon:not(.facility):not(.exit) {
                height: 25px !important;
                width: 25px !important;
                margin: 1px !important;
            }

            & .seat-map-icon.BASSINET::after, & .seat-map-icon.bassinet::after {
                background-size: contain !important;
                width: 15px !important;
            }
        }
    }
}

div[data-booking-class="Y"][data-first-row="20"][data-last-row="54"] tbody .BASSINET {
    top: 6px !important;
    right: 1px !important;
}

div[data-booking-class='Y'][data-first-row='8'][data-last-row='28'],

div[data-booking-class='Y'][data-first-row='8'][data-last-row='31'],

div[data-booking-class='Y'][data-first-row='8'][data-last-row='36'],

div[data-booking-class='Y'][data-first-row='8'][data-last-row='33'],

div[data-booking-class='Y'][data-first-row='8'][data-last-row='38'] {

	table tr .seat-map-icon.exit {

		width: 35px !important;

	}

}

@media (max-width: 768px) {

	.seat-map[data-first-row='20'][data-last-row='54'] {

		td.column-left-side,

		td.column-right-side {

			display: block !important;

			.seat-map-icon.exit:after {

				background-size: contain !important;

				width: 30px !important;

			}

		}

	}

}

 .seat-popover-form.active {
	z-index: 2049 !important;
}

h3.hazmat-title {
 margin-top: 1.5rem !important;
}
.spark-menu__list-link {
 font-size: 16px !important;
   padding: 0 13px 0 13px !important;
}

.ducp-component-page-title h1:has(> span[data-translation="SabreDxContainerPageTitle.checkIn.start"]) {
  font-size: 33px !important;
  margin: 6px !important;
  padding-bottom: 30px !important;
  padding-top: 60px !important;
  font-family: 'Oswald' !important;
  position: relative!important;

}

.ducp-component-page-title h1 {
        font-size: 25px !important;
  margin: 0 !important;
  font-family: 'Oswald' !important;
}


.main-container {
      width: 100% !important;
     margin: auto !important;
  > div {
                width: 100% !important;
               margin: auto !important;
    }
    .sabre-dx-component-check-in-lookup .lookup-container {
          background: #fff !important;
           padding: 0 !important;
          color: #000 !important;
        }
        .spark-input__field {
              border: 1px solid rgb(161, 143, 99) !important;
    }
    .lookup-buttons {
              button {
                 max-width: 100% !important;
                   width: 100% !important;
                 border-radius: 4px !important;
               }
       }
}

.sabre-dx-page-check-in-itinerary {
     .sabre-dx-container-check-in-flight-summary,
  .sabre-dx-container-check-in-hazmat,
       .ducp-component-panel-content {
           box-shadow: none !important;
    }

    .spark-panel {
         border: none !important;
      }

      .sabre-dx-container-static[role='main'] {
                box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25) !important;
          margin-bottom: 30px !important;
                margin-top: 20px !important;
         border-radius: 4px !important;
               .ducp-component-page-button-wrapper {
                     text-align: center !important;
            }
            .sabre-dx-component-check-in-flight-summary {
                  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25) !important;
                    border-radius: 4px !important;
                  margin-top: 0px !important;
            }
    }
}

.seat-map-icon.BASSINET {
    pointer-events: none !important;
}

@media (max-width: 768px) {
   .main-container {
             width: 100% !important;
           > div {
                 width: 100% !important;
               }
       }
}


.ducp-component-page-title h1 span[data-translation="SabreDxContainerPageTitle.checkIn.start"] {
  font-family: 'Oswald' !important;
}

.sabre-dx-component-check-in-lookup .page-sub-heading {
  display: none;
}

.spark-step-indicator__item {
	min-width: auto !important;
}

.row {
  display: flex;
  flex-wrap: wrap;
}

.col-xs-12.col-sm-6.col-lg-4.flight-route-info.col-md-7.col-lg-6 {
  order: 1;
}

.col-xs-12.col-lg-2.flight-booking-info.align-right-lg.align-right-md.align-left-xs.col-md-5.col-lg-3.col-sm-4.align-right-sm {
  order: 2;
  margin-left: auto;
}

.col-xs-12.col-sm-8.col-md-12.flight-additional-info.col-lg-12 {
  order: 3;
  flex-basis: 50%;
}

.col-xs-12.col-sm-6.flight-travel-info.align-right-sm.col-md-12.col-lg-3 {
  order: 4;
  flex-basis: 50%;
}

@media (min-width: 992px) {
  .row {
    display: flex;
    flex-wrap: wrap;
  }

  .col-xs-12.col-sm-6.col-lg-4.flight-route-info.col-md-7.col-lg-6 {
    order: 1;
  }

  .col-xs-12.col-lg-2.flight-booking-info.align-right-lg.align-right-md.align-left-xs.col-md-5.col-lg-3.col-sm-4.align-right-sm {
    order: 2;
    margin-left: auto;
  }

  .col-xs-12.col-sm-8.col-md-12.flight-additional-info.col-lg-12 {
    order: 3;
    flex-basis: 50%;
  }

  .col-xs-12.col-sm-6.flight-travel-info.align-right-sm.col-md-12.col-lg-3 {
    order: 4;
    flex-basis: 50%;
  }
}

/* Mobile only - put booking info on same row as route info */
@media (max-width: 991px) {
  .col-xs-12.col-sm-6.col-lg-4.flight-route-info.col-md-7.col-lg-6 {
    flex: 1;
    width: auto;
  }

  .col-xs-12.col-lg-2.flight-booking-info.align-right-lg.align-right-md.align-left-xs.col-md-5.col-lg-3.col-sm-4.align-right-sm {
    flex: 0 0 auto;
    width: auto;
    margin-left: auto;
  }

  .flight-booking-info .row {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    text-align: right;
  }

  .flight-booking-info .flight-status {
    order: 1;
    width: 100%;
    display: flex;
    justify-content: flex-end;
  }

  .flight-booking-info .booking-class {
    order: 2;
    width: 100%;
    display: flex;
    justify-content: flex-end;
	  
  }
}

@media (max-width: 544px) {
  .ducp-component-flight-summary .flight-summary-header .ducp-component-panel-content .flight-summary-content .flight-brand {
    text-align: center;
  }
}


Font size for Cyrcle

.ducp-component-cart-panel ul.ducp-component-cart-panel-list > .ducp-component-cart-panel-section > .ducp-component-accordion > .spark-panel__content, .ducp-component-cart-panel .MessagePopup ul.ducp-component-cart-panel-list > .ducp-component-cart-panel-section > .ducp-component-accordion > .modal-content, .MessagePopup .ducp-component-cart-panel ul.ducp-component-cart-panel-list > .ducp-component-cart-panel-section > .ducp-component-accordion > .modal-content,
.ducp-component-cart-panel ul.ducp-component-cart-panel-list > .ducp-component-cart-panel-section > .ducp-component-accordion > .spark-panel__content .ducp-component-initial-circle,
.ducp-component-cart-panel .MessagePopup ul.ducp-component-cart-panel-list > .ducp-component-cart-panel-section > .ducp-component-accordion > .modal-content .ducp-component-initial-circle,
.MessagePopup .ducp-component-cart-panel ul.ducp-component-cart-panel-list > .ducp-component-cart-panel-section > .ducp-component-accordion > .modal-content .ducp-component-initial-circle,
.ducp-component-cart-panel ul.ducp-component-cart-panel-list > .ducp-component-cart-panel-section > .ducp-component-accordion > .spark-panel__content .PassengerNameItem,
.ducp-component-cart-panel .MessagePopup ul.ducp-component-cart-panel-list > .ducp-component-cart-panel-section > .ducp-component-accordion > .modal-content .PassengerNameItem,
.MessagePopup .ducp-component-cart-panel ul.ducp-component-cart-panel-list > .ducp-component-cart-panel-section > .ducp-component-accordion > .modal-content .PassengerNameItem,
.ducp-component-cart-panel ul.ducp-component-cart-panel-list > .ducp-component-cart-panel-section > .ducp-component-accordion > .spark-panel__content .ducp-component-cart-item .cart-item-label,
.ducp-component-cart-panel .MessagePopup ul.ducp-component-cart-panel-list > .ducp-component-cart-panel-section > .ducp-component-accordion > .modal-content .ducp-component-cart-item .cart-item-label,
.MessagePopup .ducp-component-cart-panel ul.ducp-component-cart-panel-list > .ducp-component-cart-panel-section > .ducp-component-accordion > .modal-content .ducp-component-cart-item .cart-item-label,
.ducp-component-cart-panel ul.ducp-component-cart-panel-list > .ducp-component-cart-panel-section > .ducp-component-accordion > .spark-panel__content .ducp-component-cart-item .cart-item-price,
.ducp-component-cart-panel .MessagePopup ul.ducp-component-cart-panel-list > .ducp-component-cart-panel-section > .ducp-component-accordion > .modal-content .ducp-component-cart-item .cart-item-price,
.MessagePopup .ducp-component-cart-panel ul.ducp-component-cart-panel-list > .ducp-component-cart-panel-section > .ducp-component-accordion > .modal-content .ducp-component-cart-item .cart-item-price,
.ducp-component-cart-panel ul.ducp-component-cart-panel-list > .ducp-component-cart-panel-section > .ducp-component-accordion > .spark-panel__content .ducp-component-cart-item .cart-item-remove-confirmation,
.ducp-component-cart-panel .MessagePopup ul.ducp-component-cart-panel-list > .ducp-component-cart-panel-section > .ducp-component-accordion > .modal-content .ducp-component-cart-item .cart-item-remove-confirmation,
.MessagePopup .ducp-component-cart-panel ul.ducp-component-cart-panel-list > .ducp-component-cart-panel-section > .ducp-component-accordion > .modal-content .ducp-component-cart-item .cart-item-remove-confirmation {
  font-size: 1.2rem;
  line-height: 2rem;
  color: #555;
}

.passengers-title span[data-translation="SabreDxComponentCheckInSeatmap.passengersLabel"] {
    font-size: 21px !important;
}

.spark-panel__header .ducp-component-title span[data-translation="SabreDxComponentCheckInPassengerSummary.title"] {
    font-size: 20px !important;
	color: #A18F63;
}

.sabre-dx-component-check-in-cart-seats .cart-flight-segment-header,
.sabre-dx-component-check-in-cart-seats .cart-flight-segment-header span {
    font-size: 15px !important;
}

.spark-panel__header .ducp-component-title span[data-translation="SabreDxComponentCheckInFlightSummary.flightSummary"] {
    font-size: 20px !important;
	color: #A18F63;
}


[dir] .spark-footer {
  background-color: #ffff;
	
}
.spark-footer {
  color: #4a5767;
  line-height: 5rem;
  overflow-y: hidden;
  width: 100%;
	
}
.spark-footer__list-link {
  color: #000000 !important;
  font-weight: bold !important;
font-size:13px !important;
  display: inline-block;
  line-height: 3rem;
}

.spark-footer .container,
.spark-footer__content {
  font-size: 12px !important;
	
}

.spark-footer__content {
  display: flex !important;
  flex-direction: column !important;

}


.spark-footer__list {
  padding-left: 0 !important;
}

[dir=ltr] .Footer .spark-footer__list-item:last-child {
  display:none;
}

[dir=ltr] .sabre-dx-container-footer .spark-footer__list .spark-footer__list-item:nth-last-child(2)::after {
   display:none;
}

@media (max-width: 543px) {
  [dir] .spark-footer__content {
    text-align: left;
  }
}

.sabre-dx-container-page-title {

  flex: 0 0 33.333% !important;

}
 
.heading.ducp-component-page-title:has(span[data-translation="SabreDxContainerPageTitle.checkIn.start"]) {

	text-align: center;

}
 
@media (max-width: 768px) {

  .sabre-dx-container-page-title {

    width: 100% !important;

    max-width: 100% !important;

    flex: 0 0 100% !important;

  }

}
 
 /* Override inline visibility style on mobile */
@media (max-width: 768px) {
  .spark-step-indicator__list.collapse {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    overflow: hidden !important;
    max-height: 0 !important;
  }

  /* Force the dropdown header to show as single item */
  .spark-step-indicator__body--dropdown 
  .spark-step-indicator__item--dropdown__header {
    display: flex !important;
  }

  /* Hide the full horizontal step list */
  .spark-step-indicator__body:not(.spark-step-indicator__body--dropdown) {
    display: none !important;
  }
}


@media (max-width: 544px) {
  .layout .sabre-dx-container-footer .spark-footer.Footer {
    height: 5rem;
  }
}

.ducp-component-airport.stacked span[data-translation="SabreDxComponentCheckInViewBoardingPass.airportNameFormat"] {
  font-size: 16.5px !important;
}


.sabre-dx-component-check-in-view-boarding-pass .boarding-passes .boarding-pass .boarding-day {
  font-size: 16.5px !important;
}

.sabre-dx-component-check-in-view-boarding-pass .boarding-passes .boarding-pass .field .field-label {
  font-size: 13px !important;
}



[dir=ltr] .ducp-component-accordion.spark-panel--expand > .spark-panel__header.has-right-content {
  padding-right: 2rem;
  display: block !important;
  padding-bottom: 20px !important;
  margin-bottom: 20px !important;
}

[dir] .ducp-component-accordion.spark-panel--expand > .spark-panel__content, [dir] .MessagePopup .ducp-component-accordion.spark-panel--expand > .modal-content {

  margin-top: -20px !important;
}


.flight-additional-details > span.separator {
   display: block !important;
}

.time-details > span.separator {
   display: block !important;
}
[data-translation="SabreDxComponentCheckInCart.views.itinerary.durationArrivalSeparator"] {
  display: none !important;
}
[data-translation="SabreDxComponentCheckInCart.views.itinerary.aircraftClassSeparator"] {
  display: none !important;
}

.duration-details span[aria-hidden="true"] {
  font-size: 15.6px !important;
}

.duration-details span[aria-hidden="true"]::before {
  content: "Travel time: ";
  font-size: 15.6px !important;
}

.duration-details span[aria-hidden="true"]::after {
  content: attr(aria-label);
  font-size: 15.6px !important;
}

.ducp-component-from-to.origin-destination .ducp-component-airport span[data-translation] {
  display: none !important;
}

.ducp-component-from-to.origin-destination .ducp-component-airport::after {
  content: attr(data-code) !important;
  font-size: 15.6px !important;
  font-weight: 500 !important;
}

.flight-status-details {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}



.itinerary-part-flight-details {
  display: contents !important;
}

.ducp-component-from-to.origin-destination {
  order: 1 !important;
}

.itinerary-part-time-details {
  order: 2 !important;
	font-size: 15.6px
}

.time-details {
  order: 3 !important;
}

.flight-additional-details {
  order: 4 !important;
}

.brand {
  order: 5 !important;
}

.flight-number {
  order: 6 !important;
}

.ducp-component-cart-panel ul.ducp-component-cart-panel-list > .ducp-component-cart-panel-section > .ducp-component-accordion > .spark-panel__content h5, .ducp-component-cart-panel .MessagePopup ul.ducp-component-cart-panel-list > .ducp-component-cart-panel-section > .ducp-component-accordion > .modal-content h5, .MessagePopup .ducp-component-cart-panel ul.ducp-component-cart-panel-list > .ducp-component-cart-panel-section > .ducp-component-accordion > .modal-content h5 {
  background: #f2f2f2;
    margin-left: -1rem;
    margin-right: -1rem;
    line-height: 3.5rem;
  
}

span[data-translation="SabreDxComponentCheckInCart.views.passengers.title"] {
  font-weight: 700 !important;
}

[dir] .spark-badge--success, [dir] .ducp-component-flight-status > .flight-status-badge.ON_TIME, [dir] .ducp-component-flight-status > .flight-status-badge.CONFIRMED, [dir] .ducp-component-flight-status > .flight-status-badge.EARLY {
  background-color: #00aba8;;
  border: #00aba8;
}


.flight-additional-details .aircraft-section {
  display: none !important;
}
.time-details .duration-details {
  display: none !important;
}

[dir=ltr] .ducp-component-from-to .left-content {
  /* padding-right: 0.5rem; */
  /* padding-left: 0.5rem; */
}

.spark-step-indicator__item .ducp-component-flight-route {
font-size: 16px !important;
line-height: normal !important;
}

.spark-step-indicator__icon {
padding-top: 20px !important;
}
 

[data-translation="SabreDxContainerPageTitle.checkIn.itinerary"] {
  font-weight: 700 !important;
}

[data-translation="SabreDxContainerPageTitle.checkIn.passengers"] {
  font-weight: 700 !important;
}
[data-translation="SabreDxContainerPageTitle.checkIn.seats"] {
  font-weight: 700 !important;
}

[dir] .ducp-component-page-button-wrapper > button {
  border-radius: 4px !important;
}

/* ============================================================
   Gulf Air — Extras · Custom CSS
   Targets actual DXCI DOM class names from the live component
   ============================================================ */

/* ── Brand Tokens ───────────────────────────────────────────── */
:root {
  --ga-gold:          #9E8456;
  --ga-gold-light:    #C8A96A;
  --ga-gold-pale:     #F5EED8;
  --ga-gold-border:   #C8A96A;
  --ga-navy:          #1C2B4A;
  --ga-bg:            #FFFFFF;
  --ga-bg-muted:      #FAFAFA;
  --ga-text-primary:  #1A1A1A;
  --ga-text-secondary:#6B6B6B;
  --ga-text-tertiary: #A0A0A0;
  --ga-border:        rgba(0,0,0,0.10);
  --ga-radius-md:     8px;
  --ga-radius-lg:     12px;
}


/* ══════════════════════════════════════════════════════════════
   OUTER CARD WRAPPER  →  .ancillary-common.tile
   ══════════════════════════════════════════════════════════════ */
.ancillary-common.tile {
  background: var(--ga-bg) !important;
  border: 0.5px solid var(--ga-border) !important;
  border-radius: var(--ga-radius-lg) !important;
  overflow: hidden !important;
  box-shadow: none !important;
  padding: 0 !important;
  position: relative !important;
}

/* Gold accent stripe at top */
.ancillary-common.tile::before {
  content: '' !important;
  display: block !important;
  height: 3px !important;
  width: 100% !important;
  background: linear-gradient(90deg, #9E8456 0%, #C8A96A 60%, #E8D5A3 100%) !important;
}


/* ══════════════════════════════════════════════════════════════
   LEFT CONTENT PANEL  →  .dxp-ancillary-content
   ══════════════════════════════════════════════════════════════ */
.dxp-ancillary-content {
  padding: 1rem 1.25rem !important;
  border-right: 0.5px solid var(--ga-border) !important;
}


/* ── Card Title  →  .ducp-component-title ───────────────────── */
.ancillary-common .ducp-component-title {
  font-size: 15px !important;
  font-weight: 500 !important;
  color: var(--ga-text-primary) !important;
  margin: 0 0 14px 0 !important;
  line-height: 1.3 !important;
  border: none !important;
  padding: 0 !important;
}

.ancillary-common .ducp-component-title span {
  font-size: 20px !important;
  font-weight: 500 !important;
  color: var(--ga-text-primary) !important;
}

/* "Recommended" badge injected via ::after */
.ancillary-common .ducp-component-title::after {
  content: 'Recommended' !important;
  font-size: 10px !important;
  font-weight: 500 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: #7A6135 !important;
  background: var(--ga-gold-pale) !important;
  border: 0.5px solid var(--ga-gold-border) !important;
  border-radius: 4px !important;
  padding: 3px 8px !important;
  margin-left: 10px !important;
  vertical-align: middle !important;
  font-family: sans-serif !important;
}


/* ── Description block  →  .description ────────────────────── */
.ancillary-common .description {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  margin-top: 8px !important;
}

/* Lounge image */
.ancillary-common .description .img-div {
  width: 100% !important;
  height: 219px !important;
  object-fit: cover !important;
  border-radius: var(--ga-radius-md) !important;
  display: block !important;
}

/* Intro text */
.ancillary-common .description .intro {
  font-size: 14px !important;
  color: var(--ga-text-secondary) !important;
  margin: 0 !important;
  line-height: 1.5 !important;
}

/* Feature bullets injected after intro via ::after */
.ancillary-common .description .intro::after {
  content: '-  Food & beverages included\A-  High-speed Wi-Fi\A-  Priority boarding alert' !important;
  display: block !important;
  white-space: pre !important;
  font-size: 14px !important;
  color: var(--ga-text-secondary) !important;
  margin-top: 8px !important;
  line-height: 2 !important;
}


/* ══════════════════════════════════════════════════════════════
   RIGHT SUMMARY PANEL  →  .ancillary-summary-common
   ══════════════════════════════════════════════════════════════ */
.ancillary-summary-common {
  padding: 1rem 1.25rem !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  gap: 12px !important;
}

/* Spark panel — remove default card styling */
.ancillary-summary-common .spark-panel.spark-panel--card {
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
  padding: 0 !important;
}

.ancillary-summary-common .spark-panel__content {
  padding: 0 !important;
}


/* ── Summary title  →  .ancillary-summary-title ─────────────── */
.ancillary-summary-common .ancillary-summary-title {
  font-size: 14px !important;
  font-weight: 500 !important;
  color: var(--ga-text-primary) !important;
  margin-bottom: -30px !important;
  /* margin: 2rem; */
  margin-left: 2rem;
}

/* ── Starting from price  →  .starting-from ─────────────────── */
.ancillary-summary-common .starting-from {
  font-size: 12.5px !important;
  /* color: var(--ga-text-tertiary) !important; */
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
}

.ancillary-summary-common .price-info .currency.symbol span,
.ancillary-summary-common .price-info .amount .number {
  font-size: 20px !important;
  font-weight: 500 !important;
  color: var(--ga-text-primary) !important;
}


/* ── Add Ancillary button  →  .summary-button-inner ─────────── */
.ancillary-summary-common .summary-button-inner {
  width: 100% !important;
  /* background: var(--ga-navy) !important; */
  color: #ffffff !important;
  border: none !important;
  border-radius: var(--ga-radius-md) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  padding: 10px 18px !important;
  cursor: pointer !important;
  letter-spacing: 0.03em !important;
  transition: background 0.15s ease !important;
  text-align: center !important;
}

.ancillary-summary-common .summary-button-inner:hover {
  background: var(--ga-navy-hover, #253966) !important;
}

/* Button label */
.ancillary-summary-common .summary-button-inner .button-label span {
  font-size: 14px !important;
  font-weight: 500 !important;
  color: #ffffff !important;
}


/* ── More Details link  →  .summary-link ────────────────────── */
.ancillary-summary-common .summary-link {
  font-size: 11px !important;
  color: var(--ga-gold) !important;
  text-decoration: underline !important;
  text-underline-offset: 3px !important;
  cursor: pointer !important;
}

.ancillary-summary-common .summary-link:hover {
  color: var(--ga-gold-light) !important;
}


/* ══════════════════════════════════════════════════════════════
   SEGMENT ROWS  (expanded state after clicking Add Ancillary)
   Targets the passenger/flight rows inside .spark-expand
   ══════════════════════════════════════════════════════════════ */

/* Segment row wrapper */
.spark-expand .ancillary-passenger-row,
.spark-expand .ancillary-segment-row {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  border: 0.5px solid var(--ga-border) !important;
  border-radius: var(--ga-radius-md) !important;
  padding: 10px 14px !important;
  margin-bottom: 8px !important;
  cursor: pointer !important;
  transition: border-color 0.15s ease, background 0.15s ease !important;
  background: var(--ga-bg) !important;
}

.spark-expand .ancillary-passenger-row:hover,
.spark-expand .ancillary-segment-row:hover {
  border-color: rgba(0,0,0,0.20) !important;
  background: var(--ga-bg-muted) !important;
}

/* Selected / checked state */
.spark-expand .ancillary-passenger-row.is-selected,
.spark-expand input[type="checkbox"]:checked + label,
.spark-expand input[type="checkbox"]:checked ~ .ancillary-passenger-row {
  border-color: var(--ga-gold) !important;
  background: #FDFAF5 !important;
}

/* Native checkbox → styled gold box */
.spark-expand input[type="checkbox"] {
  appearance: none !important;
  -webkit-appearance: none !important;
  width: 18px !important;
  height: 18px !important;
  border: 1.5px solid rgba(0,0,0,0.20) !important;
  border-radius: 4px !important;
  background: var(--ga-bg) !important;
  cursor: pointer !important;
  flex-shrink: 0 !important;
  position: relative !important;
  transition: border-color 0.15s ease, background 0.15s ease !important;
}

.spark-expand input[type="checkbox"]:checked {
  background: var(--ga-gold) !important;
  border-color: var(--ga-gold) !important;
}

/* Checkmark via ::after */
.spark-expand input[type="checkbox"]:checked::after {
  content: '' !important;
  display: block !important;
  width: 5px !important;
  height: 9px !important;
  border: 2px solid #ffffff !important;
  border-top: none !important;
  border-left: none !important;
  transform: rotate(45deg) !important;
  position: absolute !important;
  top: 1px !important;
  left: 5px !important;
}

/* Flight route text */
.spark-expand .ancillary-passenger-row .passenger-name,
.spark-expand .ancillary-passenger-row .segment-route {
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--ga-text-primary) !important;
  flex: 1 !important;
}

/* Price inside row */
.spark-expand .ancillary-passenger-row .ducp-component-price,
.spark-expand .ancillary-passenger-row .price-info {
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--ga-text-primary) !important;
  margin-left: auto !important;
}

/* Flight number badge */
.spark-expand .flight-number,
.spark-expand .ancillary-flight-num {
  font-size: 10px !important;
  font-weight: 500 !important;
  letter-spacing: 0.05em !important;
  color: var(--ga-text-tertiary) !important;
  background: var(--ga-bg-muted) !important;
  border: 0.5px solid var(--ga-border) !important;
  border-radius: 3px !important;
  padding: 1px 5px !important;
}

/* Passenger avatar circle */
.spark-expand .passenger-initials,
.spark-expand .ancillary-avatar {
  width: 24px !important;
  height: 24px !important;
  border-radius: 50% !important;
  background: #EBE3D0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 9px !important;
  font-weight: 500 !important;
  color: #7A6135 !important;
  flex-shrink: 0 !important;
}


/* ══════════════════════════════════════════════════════════════
   FOOTER CONFIRM / CANCEL BUTTONS (expanded state)
   ══════════════════════════════════════════════════════════════ */
.ancillary-common .ducp-component-button:not(.summary-button-inner) {
  border-radius: var(--ga-radius-md) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  padding: 10px 18px !important;
  transition: background 0.15s ease !important;
}

/* Confirm */
.ancillary-common .ducp-component-button.confirm-button,
.ancillary-common button[data-test-id="confirm-ancillary"] {
  background: var(--ga-navy) !important;
  color: #ffffff !important;
  border: none !important;
}

.ancillary-common .ducp-component-button.confirm-button:hover,
.ancillary-common button[data-test-id="confirm-ancillary"]:hover {
  background: #253966 !important;
}

/* Cancel */
.ancillary-common .ducp-component-button.cancel-button,
.ancillary-common button[data-test-id="cancel-ancillary"] {
  color: #ffffff !important;
  border: 0.5px solid rgba(0,0,0,0.20) !important;
}

.ancillary-common .ducp-component-button.cancel-button:hover,
.ancillary-common button[data-test-id="cancel-ancillary"]:hover {
  background: var(--ga-bg-muted) !important;
}

/* Bigger card under Flight Options */
div[class*="ancillary"],
div[class*="extra"] {
  /* width: 360px !important; */
  /* max-width: 360px !important; */
  /* min-height: 60px !important; */
}

@media (max-width: 768px) {
  .dxp-masonry {
    height: auto !important;
  }

  /* 2. Take tiles out of absolute positioning */
  .dxp-masonry .ancillary-card.tile {
    position: static !important;
    left: auto !important;
    top: auto !important;
    width: 100% !important;
  }

  /* 3. Stack the two content blocks vertically */
  .ancillary-card.tile {
    display: flex;
    flex-direction: column;
  }

  /* 4. Ensure title is visible */
  .dxp-ancillary-content {
    display: block !important;
    order: 1;
  }

  .dxp-ancillary-content .title {
    display: block !important;
    font-size: 18px;
    margin-bottom: 8px;
  }

  /* 5. Image should not cover text */
  .dxp-ancillary-content .img-div {
    display: block !important;
    width: 100%;
    height: auto;
    position: static !important;
  }

  /* 6. Summary box comes after */
  .ancillary-summary-common {
    order: 2;
  }
}

.sabre-dx-component-check-in-ancillaries .ancillary-summary-common .summary-button .ducp-component-button {
background-color: #a18f63 !important;

}

/* Extras page - airport names and flight number only */
.spark-panel__content.ducp-component-panel-content .segment .ducp-component-airport,
.spark-panel__content.ducp-component-panel-content .segment .flight-name-main {
  font-size: 14px !important;
}

[dir=ltr] .ducp-component-ancillary-views .total-container {
  padding-right: 3rem;

}

.summary-button button[data-test-id="add-ancillary-group3"] {
  padding: 14px 30px !important;
  font-size: 16px !important;
}


[dir=ltr] .sabre-dx-component-check-in-passenger-summary .ducp-component-passenger-summary .passenger-summary-header .button-container .ducp-component-button {
  border-radius: 4px !important;
}

.ancillary-summary-common .spark-panel__content {
  display: flex;
  flex-direction: column;
}

/* Line 1: Added To Cart */
.ancillary-summary-common .added-to-cart-title {
  order: 1;
}

/* Line 2: Total amount (price) */
.ancillary-summary-common .ancillary-price {
  order: 2;
  display: block !important;
}

/* Line 3: Buy your extras now */
.ancillary-summary-common .ancillary-summary-title {
  order: 3;
}


/* Option 2 — pull it up with negative margin */
#group3-starting-from-text {
  margin-top: -16px !important;
  margin-bottom: 10px !important;
}

.sabre-dx-component-check-in-ancillaries .ancillary-summary-common .summary-content .ancillary-summary-title {
  display: none !important;
}


[dir] .spark-badge--warning, [dir] .ducp-component-flight-status > .flight-status-badge.DELAYED {
  border: none
}

  .ducp-component-flight-summary .flight-summary-header .ducp-component-panel-content .flight-booking-info .flight-status .flight-status-badge {
    height: 1.8rem;
    font-size: 1.0rem;
  }

.ancillary-common.ancillary-card {
  border: 0.5px solid #a08c4c !important;
}

[dir] .text-button, [dir] .text-button:hover {
  background-color: #1F2A44 !important;
}

[dir] .spark-btn--secondary, [dir] .cancel-check-in-container .cancel-check-in-button-container .ducp-component-button.cancel-cancel-check-in-button, [dir] .email-boarding-pass-container .email-button-container .ducp-component-button.cancel-email-button, [dir] .TravelExtras .footer > button.go-back, [dir] .sabre-dx-component-check-in-documents .footer > button.go-back, [dir] .ducp-component-toolbar .spark-toolbar.as-buttons .spark-toolbar__item--secondary-button, [dir] .ducp-component-toolbar .spark-toolbar.as-buttons .spark-toolbar__show-more, [dir] .ducp-component-number-selector .spark-number-selector .ducp-component-button.icon-button, [dir] .ducp-component-button.secondary-button {
  background-color: #1F2A44;

}

[dir] .spark-btn--secondary.hover, [dir] .cancel-check-in-container .cancel-check-in-button-container .hover.ducp-component-button.cancel-cancel-check-in-button, [dir] .email-boarding-pass-container .email-button-container .hover.ducp-component-button.cancel-email-button, [dir] .TravelExtras .footer > button.hover.go-back, [dir] .sabre-dx-component-check-in-documents .footer > button.hover.go-back, [dir] .ducp-component-toolbar .spark-toolbar.as-buttons .hover.spark-toolbar__item--secondary-button, [dir] .ducp-component-toolbar .spark-toolbar.as-buttons .hover.spark-toolbar__show-more, [dir] .ducp-component-number-selector .spark-number-selector .hover.ducp-component-button.icon-button, [dir] .hover.ducp-component-button.secondary-button, [dir] .spark-btn--secondary:hover, [dir] .cancel-check-in-container .cancel-check-in-button-container .ducp-component-button.cancel-cancel-check-in-button:hover, [dir] .email-boarding-pass-container .email-button-container .ducp-component-button.cancel-email-button:hover, [dir] .TravelExtras .footer > button.go-back:hover, [dir] .sabre-dx-component-check-in-documents .footer > button.go-back:hover, [dir] .ducp-component-toolbar .spark-toolbar.as-buttons .spark-toolbar__item--secondary-button:hover, [dir] .ducp-component-toolbar .spark-toolbar.as-buttons .spark-toolbar__show-more:hover, [dir] .ducp-component-number-selector .spark-number-selector .ducp-component-button.icon-button:hover, [dir] .ducp-component-button.secondary-button:hover {
  background-color: #1F2A44;

}

[dir] .dxp-ancillary-content.tile .intro {
  padding: 10px 1rem;
}

@media (max-width: 768px) {
  /* Remove absolute positioning from masonry */
  .dxp-masonry {
    display: flex !important;
    justify-content: center !important;
   
  }

}

[dir] .layout .ducp-page {
  padding-bottom: 9rem;
}

@media (max-width: 768px) {
  [dir] .ducp-component-breadcrumbs {
    background-color: rgba(160, 140, 76, 0.1) !important;
  }
}



 /* AGGRESSIVE FIX - Override all sticky behavior on mobile */

@media (max-width: 768px) {
  
  /* Nuclear option - remove sticky from everywhere */
  .sticky-outer-wrapper,
  .sticky-inner-wrapper,
  .sabre-dx-container-check-in-breadcrumbs,
  .sabre-dx-component-check-in-breadcrumbs,
  .spark-step-indicator {
    position: static !important;
    top: auto !important;
    bottom: auto !important;
    transform: none !important;
    will-change: auto !important;
    -webkit-transform: none !important;
    -webkit-will-change: auto !important;
  }
  
  /* Remove any stacking context that might cause sticky behavior */
  .sticky-outer-wrapper {
    display: block !important;
    width: 100% !important;
    height: auto !important;
  }
  
  .sticky-inner-wrapper {
    display: block !important;
    width: 100% !important;
    height: auto !important;
  }
  
  /* Ensure normal flow */
  .sabre-dx-container-check-in-breadcrumbs {
    display: block !important;
    width: 100% !important;
  }
}

/* Desktop - preserve original styling */
@media (min-width: 769px) {
  .sticky-outer-wrapper {
    position: relative !important;
  }
  
  .sticky-inner-wrapper {
    position: relative !important;
    transform: translate3d(0px, 0px, 0px) !important;
  }
}

.seat-popover-form .spark-popover__close {
  font-size: 1.5rem;
}
.seat-popover-form .passenger-name {
  line-height: 2.3rem;

}
@media (min-width: 1800px) {
  .seat-popover-form .passenger-name {
    line-height: 2.3rem;
  }
}

[dir=ltr] .PassengerNameItem .full-name .passenger-type {
  margin-right: 10px;
}

.DucpComponentPopover.spark-popover__close {
  outline: none !important;
  border: none !important;
  box-shadow: none !important;
}

.DucpComponentPopover.spark-popover__close:focus {
  outline: none !important;
  border: none !important;
  box-shadow: none !important;
}

.DucpComponentPopover.spark-popover__close:focus-visible {
  outline: none !important;
  border: none !important;
  box-shadow: none !important;
}

.DucpComponentPopover.spark-popover__close:active {
  outline: none !important;
  border: none !important;
  box-shadow: none !important;
}

/* Alternative - if the border comes from the button itself */
.DucpComponentPopover.spark-popover__close,
.spark-popover__close {
  border: none !important;
  outline: none !important;
}

.spark-popover__close:focus,
.spark-popover__close:focus-visible {
  outline: none !important;
  border: none !important;
}


[dir=ltr] .ducp-component-breadcrumbs .spark-step-indicator__list button {
  margin-left: Auto !important;
  margin-right: 30px;
}

.spark-step-indicator__item--completed .spark-step-indicator__icon::after {
  font-size: 1.8333333333rem;
  color: #000000;

}

[dir] .spark-step-indicator__item--completed .spark-step-indicator__icon {
  background-color:#f5f3ed !important;
  border-color: #f5f3ed;
}

.spark-step-indicator__item:hover {
  background: transparent !important;
  color: inherit !important;
  cursor: default !important;
}
 
.spark-step-indicator__item:hover .spark-icon,
.spark-step-indicator__item:hover .spark-icon * {
  fill: currentColor !important;
  color: inherit !important;
}

@-webkit-keyframes RotateClockwise {
    0% {
        transform: rotate(0deg);
    }

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

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

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

@-webkit-keyframes RotateCounterClockwise {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(-359deg);
    }
}

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

    100% {
        transform: rotate(-359deg);
    }
}

@keyframes letItFly {
    25% {
        opacity: 0.4;
    }

    50% {
        opacity: 1;
        transform: scale(1.4) skew(0deg, 0deg);
    }

    75% {
        opacity: 0.7;
    }

    90% {
        opacity: 0.1;
    }

    100% {
        left: 80%;
        transform: scale(1) skew(-15deg, 18deg);
        opacity: 0;
        filter: drop-shadow(rgb(153, 153, 153) 18px 10px 2px);
    }
}

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

.spark-header[data-breakpoint="xs"]:not(.spark-header_placeholder), .spark-header.spark-header--condensed:not(.spark-header_placeholder) {
    height: 6rem;
}

.spark-header[data-breakpoint="xs"]:not(.spark-header__placeholder) .spark-header__nav, .spark-header.spark-header--condensed:not(.spark-header__placeholder) .spark-header__nav {
    height: 6rem;
}

[dir="ltr"] .spark-header[data-breakpoint="xs"]:not(.spark-header__placeholder) .spark-header__title, [dir="ltr"] .spark-header.spark-header--condensed:not(.spark-header__placeholder) .spark-header__title {
    padding: 0px 2rem calc(1.375rem) 1rem;
}

[dir="rtl"] .spark-header[data-breakpoint="xs"]:not(.spark-header__placeholder) .spark-header__title, [dir="rtl"] .spark-header.spark-header--condensed:not(.spark-header__placeholder) .spark-header__title {
    padding: 0px 1rem calc(1.375rem) 2rem;
}

.progress-background {
    max-height: 100vh;
    position: fixed;
    top: 0px;
    max-width: 100vw;
    background: rgb(20, 20, 31) !important;
}

[dir="ltr"] .screen-centered {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: flex-end;
}

html[dir="ltr"] .ProgressIndicator::before {
    background-image: url("../images/gulf-loader.svg");
    width: 120px;
    height: 135px;
    display: block;
    content: "";
    position: absolute;
    top: -60px;
}

html[dir="ltr"] .ProgressIndicator > progress, .ProgressIndicator .spark-progress__text, .ProgressIndicator .spark-progress__meter {
    content: "";
    position: relative;
    right: auto;
    max-width: 25px !important;
    max-height: 25px !important;
    width: 25px !important;
    height: 25px !important;
    border-width: medium !important;
    border-style: none !important;
    border-color: currentcolor !important;
    border-image: initial !important;
    background-color: transparent !important;
    animation: auto ease 0s 1 normal none running none !important;
    display: block !important;
    top: auto !important;
    left: auto !important;
    margin: 0px !important;
    padding: 0px !important;
}

html[dir="ltr"] .ProgressIndicator > progress::before, .ProgressIndicator .spark-progress__text::before, .ProgressIndicator .spark-progress__meter::before {
    max-width: 25px;
    max-height: 25px;
    width: 25px;
    height: 25px;
    position: relative;
    transform: scale(0);
    border-radius: 50%;
    background-color: rgb(161, 143, 99);
    content: "";
    display: block !important;
    top: 0px !important;
    left: 0px !important;
    margin: 0px !important;
    padding: 0px !important;
    border-width: medium !important;
    border-style: none !important;
    border-color: currentcolor !important;
    border-image: initial !important;
    animation: 1.5s linear 0s infinite normal none running pulse !important;
}

html[dir="ltr"] .ProgressIndicator > progress {
    margin-right: 1.5rem !important;
}

.ProgressIndicator .spark-progress__meter {
    margin-left: 1.5rem !important;
}

.ProgressIndicator .spark-progress__text {
    color: rgb(20, 20, 31) !important;
    font-size: 0px !important;
}

.ProgressIndicator .spark-progress__text::before {
    animation-delay: 0.25s !important;
}

.ProgressIndicator .spark-progress__meter::before {
    animation-delay: 0.5s !important;
}

html[dir="ltr"] .ProgressIndicator > progress::after {
    display: none;
}

.initial-progress-indicator {
    background: rgb(20, 20, 31);
    height: 100vh;
    width: 100vw;
    position: fixed;
    top: 0px;
    left: 0px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.dxp-spinner {
    background-image: url("../images/gulf-loader.svg");
    background-repeat: no-repeat;
    width: 120px;
    height: 200px;
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-evenly;
}

.dxp-spinner span {
    width: 25px;
    height: 25px;
    display: block;
    border-radius: 50%;
    background-color: rgb(161, 143, 99);
    transform: scale(0);
    content: "";
    animation: 1.5s linear 0s infinite normal none running pulse !important;
}

.dxp-spinner .bounce2 {
    animation-delay: 0.25s !important;
}

.dxp-spinner .bounce3 {
    animation-delay: 0.5s !important;
}

.page-loading-message {
    display: none;
}

@keyframes pulse {
    0% {
        transform: scale(0);
    }

    20% {
        transform: scale(1);
    }

    25%, 75% {
        transform: scale(0.9);
    }

    100% {
        transform: scale(0);
    }
}

.spark-progress__meter::after {
    display: none !important;
}

#dateOfBirth_error {
    display: none !important;
}

#expirationDate_error {
    display: none !important;
}

.spark-input__message {
    display: none !important;
}

.error-technical-info {
    display: none !important;
}

#dateOfBirth_error {
    display: none !important;
}

div[data-booking-class="Y"][data-first-row="8"][data-last-row="28"] tbody .EXTRA_LEG_SPACE, div[data-booking-class="Y"][data-first-row="8"][data-last-row="31"] tbody .EXTRA_LEG_SPACE, div[data-booking-class="Y"][data-first-row="8"][data-last-row="36"] tbody .EXTRA_LEG_SPACE, div[data-booking-class="Y"][data-first-row="8"][data-last-row="33"] tbody .EXTRA_LEG_SPACE, div[data-booking-class="Y"][data-first-row="8"][data-last-row="38"] tbody .EXTRA_LEG_SPACE, div[data-booking-class="Y"][data-first-row="20"][data-last-row="54"] tbody .EXTRA_LEG_SPACE {
    display: none !important;
}

div[data-booking-class="Y"][data-first-row="8"][data-last-row="28"] .seat-map-slot, div[data-booking-class="Y"][data-first-row="8"][data-last-row="31"] .seat-map-slot, div[data-booking-class="Y"][data-first-row="8"][data-last-row="36"] .seat-map-slot, div[data-booking-class="Y"][data-first-row="8"][data-last-row="33"] .seat-map-slot, div[data-booking-class="Y"][data-first-row="8"][data-last-row="38"] .seat-map-slot, div[data-booking-class="Y"][data-first-row="20"][data-last-row="54"] .seat-map-slot {
    vertical-align: middle !important;
}

div[data-booking-class="Y"][data-first-row="8"][data-last-row="28"] tbody .BASSINET, div[data-booking-class="Y"][data-first-row="8"][data-last-row="31"] tbody .BASSINET, div[data-booking-class="Y"][data-first-row="8"][data-last-row="36"] tbody .BASSINET, div[data-booking-class="Y"][data-first-row="8"][data-last-row="33"] tbody .BASSINET, div[data-booking-class="Y"][data-first-row="8"][data-last-row="38"] tbody .BASSINET, div[data-booking-class="Y"][data-first-row="20"][data-last-row="54"] tbody .BASSINET {
    top: 13px !important;
    z-index: 1 !important;
    position: absolute !important;
    right: -1px !important;
}

div[data-booking-class="Y"][data-first-row="20"][data-last-row="54"] tbody .BASSINET {
    top: 10px !important;
}

@font-face {
    font-family: "GA Sans";
    src: url("../fonts/GASans-Heavy.woff2") format("woff2"), url("../fonts/GASans-Heavy.woff") format("woff"), url("../fonts/GASans-Heavy.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

.body {
    background-color: rgb(255, 255, 255) !important;
}

#SabreDxComponentCheckInBreadcrumbs {
    background-color: rgb(227, 222, 219) !important;
}

[dir] .ducp-component-breadcrumbs {
    background: #f5f3ed !important;
}

.ducp-component-breadcrumbs .spark-step-indicator__list {
    background: #f5f3ed !important;
}

.sabre-dx-container-check-in-flight-summary {
     /* box-shadow: rgba(0, 0, 0, 0.2) 0px 1px 10px inset; */
}

.sabre-dx-container-check-in-hazmat {
    box-shadow: rgba(0, 0, 0, 0.2) 0px 1px 10px inset;
}

.spark-step-indicator__subtext {
    color: rgb(0, 0, 0) !important;
}

.spark-step-indicator__title-text {
    color: rgb(0, 0, 0) !important;
}

.spark-step-indicator__icon {
    color: rgb(0, 0, 0) !important;
}

.park-step-indicator__item {
    color: rgb(0, 0, 0) !important;
}

.spark-step-indicator__item--disabled {
    color: rgb(0, 0, 0) !important;
    font-weight: bold;
}

.ducp-component-breadcrumbs .spark-step-indicator__list button::after {
    line-height: 130%;
}

div[data-booking-class="Y"][data-first-row="8"][data-last-row="28"] tbody .EXTRA_LEG_SPACE, div[data-booking-class="Y"][data-first-row="8"][data-last-row="31"] tbody .EXTRA_LEG_SPACE, div[data-booking-class="Y"][data-first-row="8"][data-last-row="36"] tbody .EXTRA_LEG_SPACE, div[data-booking-class="Y"][data-first-row="8"][data-last-row="33"] tbody .EXTRA_LEG_SPACE, div[data-booking-class="Y"][data-first-row="8"][data-last-row="38"] tbody .EXTRA_LEG_SPACE, div[data-booking-class="Y"][data-first-row="20"][data-last-row="54"] tbody .EXTRA_LEG_SPACE {
    display: none !important;
}

div[data-booking-class="Y"][data-first-row="8"][data-last-row="28"] .seat-map-slot, div[data-booking-class="Y"][data-first-row="8"][data-last-row="31"] .seat-map-slot, div[data-booking-class="Y"][data-first-row="8"][data-last-row="36"] .seat-map-slot, div[data-booking-class="Y"][data-first-row="8"][data-last-row="33"] .seat-map-slot, div[data-booking-class="Y"][data-first-row="8"][data-last-row="38"] .seat-map-slot, div[data-booking-class="Y"][data-first-row="20"][data-last-row="54"] .seat-map-slot {
    vertical-align: middle !important;
}

div[data-booking-class="Y"][data-first-row="8"][data-last-row="28"] tbody .BASSINET, div[data-booking-class="Y"][data-first-row="8"][data-last-row="31"] tbody .BASSINET, div[data-booking-class="Y"][data-first-row="8"][data-last-row="36"] tbody .BASSINET, div[data-booking-class="Y"][data-first-row="8"][data-last-row="33"] tbody .BASSINET, div[data-booking-class="Y"][data-first-row="8"][data-last-row="38"] tbody .BASSINET, div[data-booking-class="Y"][data-first-row="20"][data-last-row="54"] tbody .BASSINET {
    background: none;
    top: 8px !important;
    z-index: 1 !important;
    position: absolute !important;
    right: -3px !important;
}

.seat-map .seat-popover {
    display: block;
    padding: 2px !important;
}

.seat-map .seat-map-icon:not(.facility):not(.exit) {
    background-image: none !important;
    border-radius: 10px !important;
    height: 35px !important;
    width: 35px !important;
}

.seat-map .seat-map-icon.PREMIUM, .seat-map .seat-map-icon.seat-pay {
    background: #52B4AB !important;
}

.seat-map [dir="ltr"] .seat-map-icon.SEAT-EXIT:not(.seat-unavailable), .seat-map [dir="ltr"] .seat-map-icon.seat-exit:not(.seat-unavailable) {
    background: #F86A42 !important;
}

.seat-map .seat-map-icon.RESERVED, .seat-map .seat-map-icon.seat-unavailable {
    background: rgb(233, 233, 233) !important;
}

.seat-map .seat-map-slot.is-seat > div[class*="-selected"], .seat-map .SeatMapLegend .seat-map-icon.SELECTED {
    background: #AD9D73 !important;
}



div[data-booking-class="Y"][data-first-row="8"][data-last-row="28"] tbody .BASSINET::after,
div[data-booking-class="Y"][data-first-row="8"][data-last-row="31"] tbody .BASSINET::after,
div[data-booking-class="Y"][data-first-row="8"][data-last-row="36"] tbody .BASSINET::after,
div[data-booking-class="Y"][data-first-row="8"][data-last-row="33"] tbody .BASSINET::after,
div[data-booking-class="Y"][data-first-row="8"][data-last-row="38"] tbody .BASSINET::after,
div[data-booking-class="Y"][data-first-row="20"][data-last-row="54"] tbody .BASSINET::after {
    
    inset: 0 !important;
    margin: auto !important;
 background-image: url("https://dmcc-p-001.sitecorecontenthub.cloud/api/public/content/d5a47133b7b140c69c210aef860dede1?v=590d4e77") !important;
    
    background-size: 22px 22px !important;
    filter: brightness(0) invert(1) !important;
	background-position: center 0% !important;
	transform: translateX(-1px) !important;
}


}

.legend-item-row:has(.EXTRA_LEG_SPACE) {
    display: none !important;
}

.seat-map-passengers .passengers .passenger-container .passenger .passenger-name-item .full-name .passenger-name-sub-text {
    line-height: 100%;
    display: none !important;
}

.ducp-component-flight-route {
    font-size: larger !important;
    line-height: 3rem;
}

.spark-step-indicator__item {
    align-items: center;
    color: rgb(0, 0, 0);
}


.seat:not(.seat-pay):not(.seat-exit):not(.seat-facility):not(.extras .seat) {
    background-color: #FFC107!important;
}

@media (max-width: 768px) {
    .seat-map-cabin-group {
        padding: 0px !important;
        & .seat-map[data-first-row="20"][data-last-row="54"] {
            & td.column-left-side, & td.column-right-side {
                & .seat-map-icon.exit: :after {
                    background-size: contain !important;
                    width: 30px !important;
                }
            }

            & .aisle {
                font-size: 10px !important;
            }

            & .seat-popover {
                padding: 0px !important;
            }

            & .seat-map-icon:not(.facility):not(.exit) {
                height: 25px !important;
                margin: 1px !important;
            }

            & .seat-map-icon.BASSINET::after, & .seat-map-icon.bassinet::after {
                background-size: contain !important;
                width: 15px !important;
            }
        }
    }
}

div[data-booking-class="Y"][data-first-row="20"][data-last-row="54"] tbody .BASSINET {
    top: 6px !important;
    right: 1px !important;
}

div[data-booking-class='Y'][data-first-row='8'][data-last-row='28'],

div[data-booking-class='Y'][data-first-row='8'][data-last-row='31'],

div[data-booking-class='Y'][data-first-row='8'][data-last-row='36'],

div[data-booking-class='Y'][data-first-row='8'][data-last-row='33'],

div[data-booking-class='Y'][data-first-row='8'][data-last-row='38'] {

	table tr .seat-map-icon.exit {

		width: 35px !important;

	}

}

@media (max-width: 768px) {

	.seat-map[data-first-row='20'][data-last-row='54'] {

		td.column-left-side,

		td.column-right-side {

			display: block !important;

			.seat-map-icon.exit:after {

				background-size: contain !important;

				width: 30px !important;

			}

		}

	}

}

 .seat-popover-form.active {
	z-index: 2049 !important;
}

h3.hazmat-title {
 margin-top: 1.5rem !important;
}
.spark-menu__list-link {
 font-size: 16px !important;
   padding: 0 13px 0 13px !important;
}

.ducp-component-page-title h1:has(> span[data-translation="SabreDxContainerPageTitle.checkIn.start"]) {
  font-size: 33px !important;
  margin: 6px !important;
  padding-bottom: 30px !important;
  padding-top: 60px !important;
  font-family: 'Oswald' !important;
  position: relative!important;

}

.ducp-component-page-title h1 {
        font-size: 25px !important;
  margin: 0 !important;
  font-family: 'Oswald' !important;
}


.main-container {
      width: 100% !important;
     margin: auto !important;
  > div {
                width: 100% !important;
               margin: auto !important;
    }
    .sabre-dx-component-check-in-lookup .lookup-container {
          background: #fff !important;
           padding: 0 !important;
          color: #000 !important;
        }
        .spark-input__field {
              border: 1px solid rgb(161, 143, 99) !important;
    }
    .lookup-buttons {
              button {
                 max-width: 100% !important;
                   width: 100% !important;
                 border-radius: 4px !important;
               }
       }
}

.sabre-dx-page-check-in-itinerary {
     .sabre-dx-container-check-in-flight-summary,
  .sabre-dx-container-check-in-hazmat,
       .ducp-component-panel-content {
           box-shadow: none !important;
    }

    .spark-panel {
         border: none !important;
      }

      .sabre-dx-container-static[role='main'] {
                box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25) !important;
          margin-bottom: 30px !important;
                margin-top: 20px !important;
         border-radius: 4px !important;
               .ducp-component-page-button-wrapper {
                     text-align: center !important;
            }
            .sabre-dx-component-check-in-flight-summary {
                  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25) !important;
                    border-radius: 4px !important;
                  margin-top: 0px !important;
            }
    }
}

.seat-map-icon.BASSINET {
    pointer-events: none !important;
}

@media (max-width: 768px) {
   .main-container {
             width: 100% !important;
           > div {
                 width: 100% !important;
               }
       }
}


.ducp-component-page-title h1 span[data-translation="SabreDxContainerPageTitle.checkIn.start"] {
  font-family: 'Oswald' !important;
}

.sabre-dx-component-check-in-lookup .page-sub-heading {
  display: none;
}

.spark-step-indicator__item {
	min-width: auto !important;
}

.row {
  display: flex;
  flex-wrap: wrap;
}

.col-xs-12.col-sm-6.col-lg-4.flight-route-info.col-md-7.col-lg-6 {
  order: 1;
}

.col-xs-12.col-lg-2.flight-booking-info.align-right-lg.align-right-md.align-left-xs.col-md-5.col-lg-3.col-sm-4.align-right-sm {
  order: 2;
  margin-left: auto;
}

.col-xs-12.col-sm-8.col-md-12.flight-additional-info.col-lg-12 {
  order: 3;
  flex-basis: 50%;
}

.col-xs-12.col-sm-6.flight-travel-info.align-right-sm.col-md-12.col-lg-3 {
  order: 4;
  flex-basis: 50%;
}

@media (min-width: 992px) {
  .row {
    display: flex;
    flex-wrap: wrap;
  }

  .col-xs-12.col-sm-6.col-lg-4.flight-route-info.col-md-7.col-lg-6 {
    order: 1;
  }

  .col-xs-12.col-lg-2.flight-booking-info.align-right-lg.align-right-md.align-left-xs.col-md-5.col-lg-3.col-sm-4.align-right-sm {
    order: 2;
    margin-left: auto;
  }

  .col-xs-12.col-sm-8.col-md-12.flight-additional-info.col-lg-12 {
    order: 3;
    flex-basis: 50%;
  }

  .col-xs-12.col-sm-6.flight-travel-info.align-right-sm.col-md-12.col-lg-3 {
    order: 4;
    flex-basis: 50%;
  }
}

/* Mobile only - put booking info on same row as route info */
@media (max-width: 991px) {
  .col-xs-12.col-sm-6.col-lg-4.flight-route-info.col-md-7.col-lg-6 {

    width: auto;
  }

  .col-xs-12.col-lg-2.flight-booking-info.align-right-lg.align-right-md.align-left-xs.col-md-5.col-lg-3.col-sm-4.align-right-sm {
    flex: 0 0 auto;
    width: auto;
    margin-left: auto;
  }

  .flight-booking-info .row {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    text-align: right;
  }

  .flight-booking-info .flight-status {
    order: 1;
    width: 100%;
    display: flex;
    justify-content: flex-end;
  }

  .flight-booking-info .booking-class {
    order: 2;
    width: 100%;
    display: flex;
    justify-content: flex-end;
	  
  }
}

@media (max-width: 544px) {
  .ducp-component-flight-summary .flight-summary-header .ducp-component-panel-content .flight-summary-content .flight-brand {
    text-align: center;
  }
}


Font size for Cyrcle

.ducp-component-cart-panel ul.ducp-component-cart-panel-list > .ducp-component-cart-panel-section > .ducp-component-accordion > .spark-panel__content, .ducp-component-cart-panel .MessagePopup ul.ducp-component-cart-panel-list > .ducp-component-cart-panel-section > .ducp-component-accordion > .modal-content, .MessagePopup .ducp-component-cart-panel ul.ducp-component-cart-panel-list > .ducp-component-cart-panel-section > .ducp-component-accordion > .modal-content,
.ducp-component-cart-panel ul.ducp-component-cart-panel-list > .ducp-component-cart-panel-section > .ducp-component-accordion > .spark-panel__content .ducp-component-initial-circle,
.ducp-component-cart-panel .MessagePopup ul.ducp-component-cart-panel-list > .ducp-component-cart-panel-section > .ducp-component-accordion > .modal-content .ducp-component-initial-circle,
.MessagePopup .ducp-component-cart-panel ul.ducp-component-cart-panel-list > .ducp-component-cart-panel-section > .ducp-component-accordion > .modal-content .ducp-component-initial-circle,
.ducp-component-cart-panel ul.ducp-component-cart-panel-list > .ducp-component-cart-panel-section > .ducp-component-accordion > .spark-panel__content .PassengerNameItem,
.ducp-component-cart-panel .MessagePopup ul.ducp-component-cart-panel-list > .ducp-component-cart-panel-section > .ducp-component-accordion > .modal-content .PassengerNameItem,
.MessagePopup .ducp-component-cart-panel ul.ducp-component-cart-panel-list > .ducp-component-cart-panel-section > .ducp-component-accordion > .modal-content .PassengerNameItem,
.ducp-component-cart-panel ul.ducp-component-cart-panel-list > .ducp-component-cart-panel-section > .ducp-component-accordion > .spark-panel__content .ducp-component-cart-item .cart-item-label,
.ducp-component-cart-panel .MessagePopup ul.ducp-component-cart-panel-list > .ducp-component-cart-panel-section > .ducp-component-accordion > .modal-content .ducp-component-cart-item .cart-item-label,
.MessagePopup .ducp-component-cart-panel ul.ducp-component-cart-panel-list > .ducp-component-cart-panel-section > .ducp-component-accordion > .modal-content .ducp-component-cart-item .cart-item-label,
.ducp-component-cart-panel ul.ducp-component-cart-panel-list > .ducp-component-cart-panel-section > .ducp-component-accordion > .spark-panel__content .ducp-component-cart-item .cart-item-price,
.ducp-component-cart-panel .MessagePopup ul.ducp-component-cart-panel-list > .ducp-component-cart-panel-section > .ducp-component-accordion > .modal-content .ducp-component-cart-item .cart-item-price,
.MessagePopup .ducp-component-cart-panel ul.ducp-component-cart-panel-list > .ducp-component-cart-panel-section > .ducp-component-accordion > .modal-content .ducp-component-cart-item .cart-item-price,
.ducp-component-cart-panel ul.ducp-component-cart-panel-list > .ducp-component-cart-panel-section > .ducp-component-accordion > .spark-panel__content .ducp-component-cart-item .cart-item-remove-confirmation,
.ducp-component-cart-panel .MessagePopup ul.ducp-component-cart-panel-list > .ducp-component-cart-panel-section > .ducp-component-accordion > .modal-content .ducp-component-cart-item .cart-item-remove-confirmation,
.MessagePopup .ducp-component-cart-panel ul.ducp-component-cart-panel-list > .ducp-component-cart-panel-section > .ducp-component-accordion > .modal-content .ducp-component-cart-item .cart-item-remove-confirmation {
  font-size: 1.2rem;
  line-height: 2rem;
  color: #555;
}

.passengers-title span[data-translation="SabreDxComponentCheckInSeatmap.passengersLabel"] {
    font-size: 21px !important;
}

.spark-panel__header .ducp-component-title span[data-translation="SabreDxComponentCheckInPassengerSummary.title"] {
    font-size: 20px !important;
	color: #A18F63;
}

.sabre-dx-component-check-in-cart-seats .cart-flight-segment-header,
.sabre-dx-component-check-in-cart-seats .cart-flight-segment-header span {
    font-size: 15px !important;
}

.spark-panel__header .ducp-component-title span[data-translation="SabreDxComponentCheckInFlightSummary.flightSummary"] {
    font-size: 20px !important;
	color: #A18F63;
}


[dir] .spark-footer {
  background-color: #ffff;
	
}
.spark-footer {
  color: #4a5767;
  line-height: 5rem;
  overflow-y: hidden;
  width: 100%;
	
}
.spark-footer__list-link {
  color: #000000 !important;
  font-weight: bold !important;
font-size:13px !important;
  display: inline-block;
  line-height: 3rem;
}

.spark-footer .container,
.spark-footer__content {
  font-size: 12px !important;
	
}

.spark-footer__content {
  display: flex !important;
  flex-direction: column !important;

}


.spark-footer__list {
  padding-left: 0 !important;
}

[dir=ltr] .Footer .spark-footer__list-item:last-child {
  display:none;
}

[dir=ltr] .sabre-dx-container-footer .spark-footer__list .spark-footer__list-item:nth-last-child(2)::after {
   display:none;
}

@media (max-width: 543px) {
  [dir] .spark-footer__content {
    text-align: left;
  }
}

.sabre-dx-container-page-title {

  flex: 0 0 33.333% !important;

}
 
.heading.ducp-component-page-title:has(span[data-translation="SabreDxContainerPageTitle.checkIn.start"]) {

	text-align: center;

}
 
@media (max-width: 768px) {

  .sabre-dx-container-page-title {

    width: 100% !important;

    max-width: 100% !important;

    flex: 0 0 100% !important;

  }

}
 
 /* Override inline visibility style on mobile */
@media (max-width: 1024px) {
  .spark-step-indicator__list.collapse {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    overflow: hidden !important;
    max-height: 0 !important;
  }

  /* Force the dropdown header to show as single item */
  .spark-step-indicator__body--dropdown 
  .spark-step-indicator__item--dropdown__header {
    display: flex !important;
  }

  /* Hide the full horizontal step list */
  .spark-step-indicator__body:not(.spark-step-indicator__body--dropdown) {
    display: none !important;
  }
}


@media (max-width: 544px) {
  .layout .sabre-dx-container-footer .spark-footer.Footer {
    height: 5rem;
  }
}

.ducp-component-airport.stacked span[data-translation="SabreDxComponentCheckInViewBoardingPass.airportNameFormat"] {
  font-size: 16.5px !important;
}


.sabre-dx-component-check-in-view-boarding-pass .boarding-passes .boarding-pass .boarding-day {
  font-size: 16.5px !important;
}

.sabre-dx-component-check-in-view-boarding-pass .boarding-passes .boarding-pass .field .field-label {
  font-size: 13px !important;
}



[dir=ltr] .ducp-component-accordion.spark-panel--expand > .spark-panel__header.has-right-content {
  padding-right: 2rem;
  display: block !important;
  padding-bottom: 20px !important;
  margin-bottom: 20px !important;
}

[dir] .ducp-component-accordion.spark-panel--expand > .spark-panel__content, [dir] .MessagePopup .ducp-component-accordion.spark-panel--expand > .modal-content {

  margin-top: -20px !important;
}


.flight-additional-details > span.separator {
   display: block !important;
}

.time-details > span.separator {
   display: block !important;
}
[data-translation="SabreDxComponentCheckInCart.views.itinerary.durationArrivalSeparator"] {
  display: none !important;
}
[data-translation="SabreDxComponentCheckInCart.views.itinerary.aircraftClassSeparator"] {
  display: none !important;
}

.duration-details span[aria-hidden="true"] {
  font-size: 15.6px !important;
}

.duration-details span[aria-hidden="true"]::before {
  content: "Travel time: ";
  font-size: 15.6px !important;
}

.duration-details span[aria-hidden="true"]::after {
  content: attr(aria-label);
  font-size: 15.6px !important;
}

.ducp-component-from-to.origin-destination .ducp-component-airport span[data-translation] {
  display: none !important;
}

.ducp-component-from-to.origin-destination .ducp-component-airport::after {
  content: attr(data-code) !important;
  font-size: 15.6px !important;
  font-weight: 500 !important;
}

.flight-status-details {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}



.itinerary-part-flight-details {
  display: contents !important;
}

.ducp-component-from-to.origin-destination {
  order: 1 !important;
}

.itinerary-part-time-details {
  order: 2 !important;
	font-size: 15.6px
}

.time-details {
  order: 3 !important;
}

.flight-additional-details {
  order: 4 !important;
}

.brand {
  order: 5 !important;
}

.flight-number {
  order: 6 !important;
}

.ducp-component-cart-panel ul.ducp-component-cart-panel-list > .ducp-component-cart-panel-section > .ducp-component-accordion > .spark-panel__content h5, .ducp-component-cart-panel .MessagePopup ul.ducp-component-cart-panel-list > .ducp-component-cart-panel-section > .ducp-component-accordion > .modal-content h5, .MessagePopup .ducp-component-cart-panel ul.ducp-component-cart-panel-list > .ducp-component-cart-panel-section > .ducp-component-accordion > .modal-content h5 {
  background: #f2f2f2;
    margin-left: -1rem;
    margin-right: -1rem;
    line-height: 3.5rem;
  
}

span[data-translation="SabreDxComponentCheckInCart.views.passengers.title"] {
  font-weight: 700 !important;
}

[dir] .spark-badge--success, [dir] .ducp-component-flight-status > .flight-status-badge.ON_TIME, [dir] .ducp-component-flight-status > .flight-status-badge.CONFIRMED, [dir] .ducp-component-flight-status > .flight-status-badge.EARLY {
  background-color: #00aba8;;
  border: #00aba8;
}


.flight-additional-details .aircraft-section {
  display: none !important;
}
.time-details .duration-details {
  display: none !important;
}

[dir=ltr] .ducp-component-from-to .left-content {
  /* padding-right: 0.5rem; */
  /* padding-left: 0.5rem; */
}

.spark-step-indicator__item .ducp-component-flight-route {
font-size: 16px !important;
line-height: normal !important;
}

.spark-step-indicator__icon {
padding-top: 20px !important;
}
 

[data-translation="SabreDxContainerPageTitle.checkIn.itinerary"] {
  font-weight: 700 !important;
}

[data-translation="SabreDxContainerPageTitle.checkIn.passengers"] {
  font-weight: 700 !important;
}
[data-translation="SabreDxContainerPageTitle.checkIn.seats"] {
  font-weight: 700 !important;
}

[dir] .ducp-component-page-button-wrapper > button {
  border-radius: 4px !important;
}

/* ============================================================
   Gulf Air — Extras · Custom CSS
   Targets actual DXCI DOM class names from the live component
   ============================================================ */

/* ── Brand Tokens ───────────────────────────────────────────── */
:root {
  --ga-gold:          #9E8456;
  --ga-gold-light:    #C8A96A;
  --ga-gold-pale:     #F5EED8;
  --ga-gold-border:   #C8A96A;
  --ga-navy:          #1C2B4A;
  --ga-bg:            #FFFFFF;
  --ga-bg-muted:      #FAFAFA;
  --ga-text-primary:  #1A1A1A;
  --ga-text-secondary:#6B6B6B;
  --ga-text-tertiary: #A0A0A0;
  --ga-border:        rgba(0,0,0,0.10);
  --ga-radius-md:     8px;
  --ga-radius-lg:     12px;
}


/* ══════════════════════════════════════════════════════════════
   OUTER CARD WRAPPER  →  .ancillary-common.tile
   ══════════════════════════════════════════════════════════════ */
.ancillary-common.tile {
  background: var(--ga-bg) !important;
  border: 0.5px solid var(--ga-border) !important;
  border-radius: var(--ga-radius-lg) !important;
  overflow: hidden !important;
  box-shadow: none !important;
  padding: 0 !important;
  position: relative !important;
}

/* Gold accent stripe at top */
.ancillary-common.tile::before {
  content: '' !important;
  display: block !important;
  height: 3px !important;
  width: 100% !important;
  background: linear-gradient(90deg, #9E8456 0%, #C8A96A 60%, #E8D5A3 100%) !important;
}


/* ══════════════════════════════════════════════════════════════
   LEFT CONTENT PANEL  →  .dxp-ancillary-content
   ══════════════════════════════════════════════════════════════ */
.dxp-ancillary-content {
  padding: 1rem 1.25rem !important;
  border-right: 0.5px solid var(--ga-border) !important;
}


/* ── Card Title  →  .ducp-component-title ───────────────────── */
.ancillary-common .ducp-component-title {
  font-size: 15px !important;
  font-weight: 500 !important;
  color: var(--ga-text-primary) !important;
  margin: 0 0 14px 0 !important;
  line-height: 1.3 !important;
  border: none !important;
  padding: 0 !important;
}

.ancillary-common .ducp-component-title span {
  font-size: 20px !important;
  font-weight: 500 !important;
  color: var(--ga-text-primary) !important;
}

/* "Recommended" badge injected via ::after */
.ancillary-common .ducp-component-title::after {
  content: 'Recommended' !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: #00aba8 !important;
  background: #ffffff !important;
  border: 0.5px solid #ffffff !important;
  border-radius: 4px !important;
  padding: 3px 8px !important;
  margin-left: 10px !important;
  vertical-align: middle !important;
  font-family: sans-serif !important;
}



/* ── Description block  →  .description ────────────────────── */
.ancillary-common .description {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  margin-top: 8px !important;
}

/* Lounge image */
.ancillary-common .description .img-div {
  width: 100% !important;
  height: 219px !important;
  object-fit: cover !important;
  border-radius: var(--ga-radius-md) !important;
  display: block !important;
}

/* Intro text */
.ancillary-common .description .intro {
  font-size: 14px !important;
  color: var(--ga-text-secondary) !important;
  margin: 0 !important;
  line-height: 1.5 !important;
}

/* Feature bullets with custom icons */
.ancillary-common .description .intro::after {
    content:
        "Food & beverages included\A"
        "High-speed Wi-Fi\A"
        "Priority boarding alert" !important;

    display: block !important;
    white-space: pre !important;
    font-size: 14px !important;
    color: var(--ga-text-secondary) !important;
    margin-top: 8px !important;
    line-height: 32px !important;

    padding-left: 32px !important;

    background-image:
        url("https://dmcc-p-001.sitecorecontenthub.cloud/api/public/content/e6b7ca267a674519bef0e26b3f0cbd67?v=997e9db6"),
        url("https://dmcc-p-001.sitecorecontenthub.cloud/api/public/content/0cab6e6a83fa41db825b7a490edb5ac2?v=fd61e603"),
        url("https://dmcc-p-001.sitecorecontenthub.cloud/api/public/content/f87a7a5aeb9b4de5a66413ce69c0859f?v=73a5e44e") !important;

    background-size:
        20px 20px,
        20px 20px,
        20px 20px !important;

    background-position:
        0 6px,
        0 38px,
        0 70px !important;

    background-repeat: no-repeat !important;
}


/* ══════════════════════════════════════════════════════════════
   RIGHT SUMMARY PANEL  →  .ancillary-summary-common
   ══════════════════════════════════════════════════════════════ */
.ancillary-summary-common {
  padding: 1rem 1.25rem !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  gap: 12px !important;
}

/* Spark panel — remove default card styling */
.ancillary-summary-common .spark-panel.spark-panel--card {
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
  padding: 0 !important;
}

.ancillary-summary-common .spark-panel__content {
  padding: 0 !important;
}


/* ── Summary title  →  .ancillary-summary-title ─────────────── */
.ancillary-summary-common .ancillary-summary-title {
  font-size: 14px !important;
  font-weight: 500 !important;
  color: var(--ga-text-primary) !important;
  margin-bottom: -30px !important;
  /* margin: 2rem; */
  margin-left: 2rem;
}

/* ── Starting from price  →  .starting-from ─────────────────── */
.ancillary-summary-common .starting-from {
  font-size: 12.5px !important;
  /* color: var(--ga-text-tertiary) !important; */
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
}

.ancillary-summary-common .price-info .currency.symbol span,
.ancillary-summary-common .price-info .amount .number {
  font-size: 20px !important;
  font-weight: 500 !important;
  color: var(--ga-text-primary) !important;
}


/* ── Add Ancillary button  →  .summary-button-inner ─────────── */
.ancillary-summary-common .summary-button-inner {
  width: 100% !important;
  /* background: var(--ga-navy) !important; */
  color: #ffffff !important;
  border: none !important;
  border-radius: var(--ga-radius-md) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  padding: 10px 18px !important;
  cursor: pointer !important;
  letter-spacing: 0.03em !important;
  transition: background 0.15s ease !important;
  text-align: center !important;
}

.ancillary-summary-common .summary-button-inner:hover {
  background: var(--ga-navy-hover, #253966) !important;
}

/* Button label */
.ancillary-summary-common .summary-button-inner .button-label span {
  font-size: 14px !important;
  font-weight: 500 !important;
  color: #ffffff !important;
}


/* ── More Details link  →  .summary-link ────────────────────── */
.ancillary-summary-common .summary-link {
  font-size: 11px !important;
  color: var(--ga-gold) !important;
  text-decoration: underline !important;
  text-underline-offset: 3px !important;
  cursor: pointer !important;
}

.ancillary-summary-common .summary-link:hover {
  color: var(--ga-gold-light) !important;
}


/* ══════════════════════════════════════════════════════════════
   SEGMENT ROWS  (expanded state after clicking Add Ancillary)
   Targets the passenger/flight rows inside .spark-expand
   ══════════════════════════════════════════════════════════════ */

/* Segment row wrapper */
.spark-expand .ancillary-passenger-row,
.spark-expand .ancillary-segment-row {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  border: 0.5px solid var(--ga-border) !important;
  border-radius: var(--ga-radius-md) !important;
  padding: 10px 14px !important;
  margin-bottom: 8px !important;
  cursor: pointer !important;
  transition: border-color 0.15s ease, background 0.15s ease !important;
  background: var(--ga-bg) !important;
}

.spark-expand .ancillary-passenger-row:hover,
.spark-expand .ancillary-segment-row:hover {
  border-color: rgba(0,0,0,0.20) !important;
  background: var(--ga-bg-muted) !important;
}

/* Selected / checked state */
.spark-expand .ancillary-passenger-row.is-selected,
.spark-expand input[type="checkbox"]:checked + label,
.spark-expand input[type="checkbox"]:checked ~ .ancillary-passenger-row {
  border-color: var(--ga-gold) !important;
  background: #FDFAF5 !important;
}

/* Native checkbox → styled gold box */
.spark-expand input[type="checkbox"] {
  appearance: none !important;
  -webkit-appearance: none !important;
  width: 18px !important;
  height: 18px !important;
  border: 1.5px solid rgba(0,0,0,0.20) !important;
  border-radius: 4px !important;
  background: var(--ga-bg) !important;
  cursor: pointer !important;
  flex-shrink: 0 !important;
  position: relative !important;
  transition: border-color 0.15s ease, background 0.15s ease !important;
}

.spark-expand input[type="checkbox"]:checked {
  background: var(--ga-gold) !important;
  border-color: var(--ga-gold) !important;
}

/* Checkmark via ::after */
.spark-expand input[type="checkbox"]:checked::after {
  content: '' !important;
  display: block !important;
  width: 5px !important;
  height: 9px !important;
  border: 2px solid #ffffff !important;
  border-top: none !important;
  border-left: none !important;
  transform: rotate(45deg) !important;
  position: absolute !important;
  top: 1px !important;
  left: 5px !important;
}

/* Flight route text */
.spark-expand .ancillary-passenger-row .passenger-name,
.spark-expand .ancillary-passenger-row .segment-route {
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--ga-text-primary) !important;
  flex: 1 !important;
}

/* Price inside row */
.spark-expand .ancillary-passenger-row .ducp-component-price,
.spark-expand .ancillary-passenger-row .price-info {
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--ga-text-primary) !important;
  margin-left: auto !important;
}

/* Flight number badge */
.spark-expand .flight-number,
.spark-expand .ancillary-flight-num {
  font-size: 10px !important;
  font-weight: 500 !important;
  letter-spacing: 0.05em !important;
  color: var(--ga-text-tertiary) !important;
  background: var(--ga-bg-muted) !important;
  border: 0.5px solid var(--ga-border) !important;
  border-radius: 3px !important;
  padding: 1px 5px !important;
}

/* Passenger avatar circle */
.spark-expand .passenger-initials,
.spark-expand .ancillary-avatar {
  width: 24px !important;
  height: 24px !important;
  border-radius: 50% !important;
  background: #EBE3D0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 9px !important;
  font-weight: 500 !important;
  color: #7A6135 !important;
  flex-shrink: 0 !important;
}


/* ══════════════════════════════════════════════════════════════
   FOOTER CONFIRM / CANCEL BUTTONS (expanded state)
   ══════════════════════════════════════════════════════════════ */
.ancillary-common .ducp-component-button:not(.summary-button-inner) {
  border-radius: var(--ga-radius-md) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  padding: 10px 18px !important;
  transition: background 0.15s ease !important;
}

/* Confirm */
.ancillary-common .ducp-component-button.confirm-button,
.ancillary-common button[data-test-id="confirm-ancillary"] {
  background: var(--ga-navy) !important;
  color: #ffffff !important;
  border: none !important;
}

.ancillary-common .ducp-component-button.confirm-button:hover,
.ancillary-common button[data-test-id="confirm-ancillary"]:hover {
  background: #253966 !important;
}

/* Cancel */
.ancillary-common .ducp-component-button.cancel-button,
.ancillary-common button[data-test-id="cancel-ancillary"] {
  color: #ffffff !important;
  border: 0.5px solid rgba(0,0,0,0.20) !important;
}

.ancillary-common .ducp-component-button.cancel-button:hover,
.ancillary-common button[data-test-id="cancel-ancillary"]:hover {
  background: var(--ga-bg-muted) !important;
}

/* Bigger card under Flight Options */
div[class*="ancillary"],
div[class*="extra"] {
  /* width: 360px !important; */
  /* max-width: 360px !important; */
  /* min-height: 60px !important; */
}

@media (max-width: 768px) {
  .dxp-masonry {
    height: auto !important;
  }

  /* 2. Take tiles out of absolute positioning */
  .dxp-masonry .ancillary-card.tile {
    position: static !important;
    left: auto !important;
    top: auto !important;
    width: 100% !important;
  }

  /* 3. Stack the two content blocks vertically */
  .ancillary-card.tile {
    display: flex;
    flex-direction: column;
  }

  /* 4. Ensure title is visible */
  .dxp-ancillary-content {
    display: block !important;
    order: 1;
  }

  .dxp-ancillary-content .title {
    display: block !important;
    font-size: 18px;
    margin-bottom: 8px;
  }

  /* 5. Image should not cover text */
  .dxp-ancillary-content .img-div {
    display: block !important;
    width: 100%;
    height: auto;
    position: static !important;
  }

  /* 6. Summary box comes after */
  .ancillary-summary-common {
    order: 2;
  }
}

.sabre-dx-component-check-in-ancillaries .ancillary-summary-common .summary-button .ducp-component-button {
background-color: #a18f63 !important;

}

/* Extras page - airport names and flight number only */
.spark-panel__content.ducp-component-panel-content .segment .ducp-component-airport,
.spark-panel__content.ducp-component-panel-content .segment .flight-name-main {
  font-size: 14px !important;
}

[dir=ltr] .ducp-component-ancillary-views .total-container {
  padding-right: 3rem;

}

.summary-button button[data-test-id="add-ancillary-group3"] {
  padding: 14px 30px !important;
  font-size: 16px !important;
}


[dir=ltr] .sabre-dx-component-check-in-passenger-summary .ducp-component-passenger-summary .passenger-summary-header .button-container .ducp-component-button {
  border-radius: 4px !important;
}

.ancillary-summary-common .spark-panel__content {
  display: flex;
  flex-direction: column;
}

/* Line 1: Added To Cart */
.ancillary-summary-common .added-to-cart-title {
  order: 1;
}

/* Line 2: Total amount (price) */
.ancillary-summary-common .ancillary-price {
  order: 2;
  display: block !important;
}

/* Line 3: Buy your extras now */
.ancillary-summary-common .ancillary-summary-title {
  order: 3;
}


/* Option 2 — pull it up with negative margin */
#group3-starting-from-text {
  margin-top: -16px !important;
  margin-bottom: 10px !important;
}

.sabre-dx-component-check-in-ancillaries .ancillary-summary-common .summary-content .ancillary-summary-title {
  display: none !important;
}


[dir] .spark-badge--warning, [dir] .ducp-component-flight-status > .flight-status-badge.DELAYED {
  border: none
}

  .ducp-component-flight-summary .flight-summary-header .ducp-component-panel-content .flight-booking-info .flight-status .flight-status-badge {
    height: 1.8rem;
    font-size: 1.0rem;
  }

.ancillary-common.ancillary-card {
  border: 0.5px solid #a08c4c !important;
}

[dir] .text-button, [dir] .text-button:hover {
  background-color: #1F2A44 !important;
}

[dir] .spark-btn--secondary, [dir] .cancel-check-in-container .cancel-check-in-button-container .ducp-component-button.cancel-cancel-check-in-button, [dir] .email-boarding-pass-container .email-button-container .ducp-component-button.cancel-email-button, [dir] .TravelExtras .footer > button.go-back, [dir] .sabre-dx-component-check-in-documents .footer > button.go-back, [dir] .ducp-component-toolbar .spark-toolbar.as-buttons .spark-toolbar__item--secondary-button, [dir] .ducp-component-toolbar .spark-toolbar.as-buttons .spark-toolbar__show-more, [dir] .ducp-component-number-selector .spark-number-selector .ducp-component-button.icon-button, [dir] .ducp-component-button.secondary-button {
  background-color: #1F2A44;

}

[dir] .spark-btn--secondary.hover, [dir] .cancel-check-in-container .cancel-check-in-button-container .hover.ducp-component-button.cancel-cancel-check-in-button, [dir] .email-boarding-pass-container .email-button-container .hover.ducp-component-button.cancel-email-button, [dir] .TravelExtras .footer > button.hover.go-back, [dir] .sabre-dx-component-check-in-documents .footer > button.hover.go-back, [dir] .ducp-component-toolbar .spark-toolbar.as-buttons .hover.spark-toolbar__item--secondary-button, [dir] .ducp-component-toolbar .spark-toolbar.as-buttons .hover.spark-toolbar__show-more, [dir] .ducp-component-number-selector .spark-number-selector .hover.ducp-component-button.icon-button, [dir] .hover.ducp-component-button.secondary-button, [dir] .spark-btn--secondary:hover, [dir] .cancel-check-in-container .cancel-check-in-button-container .ducp-component-button.cancel-cancel-check-in-button:hover, [dir] .email-boarding-pass-container .email-button-container .ducp-component-button.cancel-email-button:hover, [dir] .TravelExtras .footer > button.go-back:hover, [dir] .sabre-dx-component-check-in-documents .footer > button.go-back:hover, [dir] .ducp-component-toolbar .spark-toolbar.as-buttons .spark-toolbar__item--secondary-button:hover, [dir] .ducp-component-toolbar .spark-toolbar.as-buttons .spark-toolbar__show-more:hover, [dir] .ducp-component-number-selector .spark-number-selector .ducp-component-button.icon-button:hover, [dir] .ducp-component-button.secondary-button:hover {
  background-color: #1F2A44;

}

[dir] .dxp-ancillary-content.tile .intro {
  padding: 10px 1rem;
}

@media (max-width: 768px) {
  /* Remove absolute positioning from masonry */
  .dxp-masonry {
    display: flex !important;
    justify-content: center !important;
   
  }

}

[dir] .layout .ducp-page {
  padding-bottom: 9rem;
}

@media (max-width: 768px) {
  [dir] .ducp-component-breadcrumbs {
    background-color: rgba(160, 140, 76, 0.1) !important;
  }
}



 /* AGGRESSIVE FIX - Override all sticky behavior on mobile */

@media (max-width: 768px) {
  
  /* Nuclear option - remove sticky from everywhere */
  .sticky-outer-wrapper,
  .sticky-inner-wrapper,
  .sabre-dx-container-check-in-breadcrumbs,
  .sabre-dx-component-check-in-breadcrumbs,
  .spark-step-indicator {
    position: static !important;
    top: auto !important;
    bottom: auto !important;
    transform: none !important;
    will-change: auto !important;
    -webkit-transform: none !important;
    -webkit-will-change: auto !important;
  }
  
  /* Remove any stacking context that might cause sticky behavior */
  .sticky-outer-wrapper {
    display: block !important;
    width: 100% !important;
    height: auto !important;
  }
  
  .sticky-inner-wrapper {
    display: block !important;
    width: 100% !important;
    height: auto !important;
  }
  
  /* Ensure normal flow */
  .sabre-dx-container-check-in-breadcrumbs {
    display: block !important;
    width: 100% !important;
  }
}

/* Desktop - preserve original styling */
@media (min-width: 769px) {
  .sticky-outer-wrapper {
    position: relative !important;
  }
  
  .sticky-inner-wrapper {
    position: relative !important;
    transform: translate3d(0px, 0px, 0px) !important;
  }
}

.seat-popover-form .spark-popover__close {
  font-size: 1.5rem;
}
.seat-popover-form .passenger-name {
  line-height: 2.3rem;

}
@media (min-width: 1800px) {
  .seat-popover-form .passenger-name {
    line-height: 2.3rem;
  }
}

[dir=ltr] .PassengerNameItem .full-name .passenger-type {
  margin-right: 10px;
}

.DucpComponentPopover.spark-popover__close {
  outline: none !important;
  border: none !important;
  box-shadow: none !important;
}

.DucpComponentPopover.spark-popover__close:focus {
  outline: none !important;
  border: none !important;
  box-shadow: none !important;
}

.DucpComponentPopover.spark-popover__close:focus-visible {
  outline: none !important;
  border: none !important;
  box-shadow: none !important;
}

.DucpComponentPopover.spark-popover__close:active {
  outline: none !important;
  border: none !important;
  box-shadow: none !important;
}

/* Alternative - if the border comes from the button itself */
.DucpComponentPopover.spark-popover__close,
.spark-popover__close {
  border: none !important;
  outline: none !important;
}

.spark-popover__close:focus,
.spark-popover__close:focus-visible {
  outline: none !important;
  border: none !important;
}


[dir=ltr] .ducp-component-breadcrumbs .spark-step-indicator__list button {
  margin-left: Auto !important;
  margin-right: 30px;
}

.spark-step-indicator__item--completed .spark-step-indicator__icon::after {
  font-size: 1.8333333333rem;
  color: #000000;

}

[dir] .spark-step-indicator__item--completed .spark-step-indicator__icon {
  background-color:#f5f3ed !important;
  border-color: #f5f3ed;
}

.spark-step-indicator__item:hover {
  background: transparent !important;
  color: inherit !important;
  cursor: default !important;
}
 
.spark-step-indicator__item:hover .spark-icon,
.spark-step-indicator__item:hover .spark-icon * {
  fill: currentColor !important;
  color: inherit !important;
}

[dir] .spark-step-indicator__item--current::after, [dir] .spark-step-indicator__item--current::before {
  background-color: #ffffff;
}

.Seatmap .seat-map-cabin-group .seat-map table tr td.is-seat .facility {
  width: 56%;
  display: inline-block;
}

@media (min-width: 768px) and (max-width: 1024px) {
.col-xs-12.col-sm-6.flight-travel-info.align-right-sm.col-md-12.col-lg-3 {
  order: 2;
  flex-basis: 50%;
}
}




@media (min-width: 820px) and (max-width: 1000px) {
.col-xs-12.col-lg-2.flight-booking-info.align-right-lg.align-right-md.align-left-xs.col-md-5.col-lg-3.col-sm-4.align-right-sm {
  order: 1;
  margin-left: auto;
}
}



@media (max-width: 1360px) {
	.ducp-component-flight-summary
		.flight-summary-header
		.ducp-component-panel-content
		.flight-summary-content
		.flight-route-info
		.date {
		font-size: 0.98rem !important;
	}
	.ancillary-summary-common,
	div[class*='ancillary'],
	[dir] .ancillary-summary-common {
		width: 100% !important;
	}
}


@media (max-width: 911px) {
  .col-xs-12.col-sm-6.col-lg-4.flight-route-info.col-md-7.col-lg-6 {
     /* flex: 1; */ */
     width: auto;
  }
}




@media (min-width: 768px) and (max-width: 1024px) {
  .col-xs-12.col-sm-6.flight-travel-info.align-right-sm.col-md-12.col-lg-3 {
  order: 1;
  flex-basis: 50%;
}
}
@media (min-width: 344px) and (max-width: 882px) {
.col-xs-12.col-sm-8.col-md-12.flight-additional-info.col-lg-12 {
  flex-basis: 62%;
}
}

@media (min-width: 912px) and (max-width: 1368px) {
  .col-xs-12.col-sm-6.flight-travel-info.align-right-sm.col-md-12.col-lg-3 {
  flex-basis: 32%;
}
}

@media (min-width: 344px) {
.ducp-component-from-to {
  flex-wrap: nowrap;
}
}

@media (min-width: 800px) and (max-width: 1223px) {
  /* Forces mobile-style seat map for 830px range */
  .seat-map { width: 100% !important; display: block; }
  .seat-map-icon { height: 25px !important; width: 25px !important; }
  .SeatMapLegend { flex-wrap: wrap !important; }
}
.expanded-content {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  overflow: visible !important;
  max-height: none !important;
}

@media (min-width: 768px) and (max-width: 1223px) {
  
  /* Fix masonry container */
  .dxp-masonry {
    position: static !important;
    height: auto !important;
    width: 100% !important;
    display: block !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    gap: 20px !important;
  }
 
  /* Fix card positioning */
  .ancillary-common.ancillary-card {
    position: static !important;
    overflow: visible !important;
    width: 100% !important;
    max-width: 100% !important;
    display: block !important;
    margin: 20px auto !important;
    padding: 0 !important;
    left: auto !important;
    top: auto !important;
  }
 
  .dxp-masonry .ancillary-card.tile {
    position: static !important;
    left: auto !important;
    top: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
 
  /* Stack card content vertically on tablet */
  .ancillary-common {
    display: flex !important;
    flex-direction: column !important;
  }
 
  .dxp-ancillary-content {
    width: 100% !important;
    padding: 1rem !important;
    border-right: none !important;
    border-bottom: 0.5px solid rgba(0,0,0,0.10) !important;
    order: 1 !important;
  }
 
  .ancillary-summary-common {
    width: 100% !important;
    padding: 1rem !important;
    order: 2 !important;
  }
 
  /* Fix expanded content */
  .expanded-content {
    width: 100% !important;
    max-width: 100% !important;
    display: block !important;
    visibility: visible !important;
  }
 
  /* Prevent overflow */
  div[class*="ancillary"],
  div[class*="extra"] {
    width: 100% !important;
    max-width: 100% !important;
    display: block !important;
    overflow-x: hidden !important;
  }
 
}

@media (min-width: 800px) and (max-width: 1223px) {
.sabre-dx-container-page-title {
	flex: 1 0 33.333% !important;
							   
							   }
}


@media (min-width: 1000px) and (max-width: 1880px) {
.col-xs-12.col-lg-2.flight-booking-info.align-right-lg.align-right-md.align-left-xs.col-md-5.col-lg-3.col-sm-4.align-right-sm {
  order: 1;
  margin-left: -11rem;
}
}


@media (min-width: 800px) and (max-width: 1880px) {
.ducp-component-flight-summary .flight-summary-header .ducp-component-panel-content .flight-booking-info .flight-status {
  order: 1;
  margin-left: -4rem;
}
	div[data-booking-class="Y"][data-first-row="20"][data-last-row="54"] tbody .BASSINET {
    top: 6px !important;
    right: -10px !important;
}
	
}


@media (min-width: 768px) and (max-width: 1024px) {
.Seatmap .seat-map-cabin-group .seat-map.seat-map-13 table td {

  width: 5.692308%;
}
}

[dir=ltr] .SeatMapLegend .seat-map-icon.EXIT, [dir=ltr] .SeatMapLegend .seat-map-icon.exit {
  background-position: 0rem 9.1842%;

}

[dir=rtl] .SeatMapLegend .seat-map-icon.EXIT, [dir=rtl] .SeatMapLegend .seat-map-icon.exit {
  background-position: right 0rem top 9.1842%;
}


[dir=rtl] .Seatmap .seat-map-cabin-group .seat-map table tr td.column-left-side .seat-map-icon.exit {
  background-position: right 0rem top 15.0105073551%;
}


[dir=rtl] .SeatMapLegend .seat-map-icon.SEAT-EXIT, [dir=rtl] .SeatMapLegend .seat-map-icon.seat-exit {
  background-position: right 0rem top 17.812258581%;
}

[dir=ltr] .Seatmap .seat-map-cabin-group .seat-map table tr td.column-right-side .seat-map-icon.exit {
  background-position: 0rem 15.0105073551%;
}
[dir=ltr] .Seatmap .seat-map-cabin-group .seat-map table tr td.column-left-side .seat-map-icon.exit {
  background-position: 0rem 15.0105073551%;
}

[dir] .Seatmap .seat-map-cabin-group .seat-map table tr td.column-right-side.side {
  background-size: 100%;
  background-image: none ;
}
[dir] .Seatmap .seat-map-cabin-group .seat-map table tr td.column-left-side.side {
  background-size: 100%;
  background-image: none ;
}

[dir] .Seatmap .seat-map-cabin-group .seat-map table tr td.column-right-side.plane-wing-end {
  background-image: none;
}

[dir] .Seatmap .seat-map-cabin-group .seat-map table tr td.column-left-side.plane-wing-end {
  background-image: none;
}	

[dir] .Seatmap .seat-map-cabin-group .seat-map table tr.exit-row td {
  background-color: rgb(0 0 0 / 0%);
  background-size: 100% 100%;
}

[dir] .Seatmap .seat-map-cabin-group .seat-map table tr td.column-right-side.plane-wing-begin {
  background-image: none;
}
[dir] .Seatmap .seat-map-cabin-group .seat-map table tr td.column-left-side.plane-wing-begin {
  background-image: none;
}

/* Make Save and Cancel buttons match in size + rounding */
[dir] .ducp-component-button.save,
[dir] .ducp-component-button.cancel.text-button {
  height: 35px !important;
  padding: 1px 24px !important;
  font-size: 1.3333333rem !important;
  border-radius: 4px !important;
}

.spark-icon-pencil {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background-color: #1F2A44 !important;
  color: #ffffff !important;
  padding: 6px 16px !important;
  border-radius: 4px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  line-height: 1.2 !important;
}

.spark-icon-pencil::before {
  content: "Change";
  font-family: inherit !important;
  font-size: 13px !important;
  color: #ffffff !important;
}

/* Turn the popover into a flex column so we can reorder children */
#seat-info.seat-popover {
  display: flex !important;
  flex-direction: column !important;
}

/* Default order for all children */

#seat-info.seat-popover > .thumbnailStatic {
  order: 4 !important;
}

/* Move seat-price-section right above the Select Seat button */
#seat-info.seat-popover > .seat-price-section {
  order: 5 !important;
}

#seat-info.seat-popover > button.select-seat {
  order: 6 !important;
}

.ducp-component-price {
  font-weight: bold;
}

[dir] .seat-popover-form .seat-price-section {
	margin-bottom:1.0rem !important;
  margin-top: 0rem;
	
}

/* Hide the "Change" icon pill inside Modify Ancillary button — Extras page only */
.sabre-dx-component-check-in-ancillaries button[data-test-id="add-ancillary-group3"] .spark-icon-pencil {
  display: none !important;
}

[dir] .sabre-dx-component-check-in-document .document-buttons .save {
   padding: 1px 24px !important;
}

.spark-icon-alert-triangle::before, .MessagePopup .warning .modal-icon::before {
  content: none;
}

[dir=rtl] .sabre-dx-component-check-in-passenger-summary .ducp-component-passenger-summary .passenger-summary-header .button-container .ducp-component-button {
	height: 35px !important;
  padding: 1px 24px !important;
  font-size: 1.3333333rem !important;
  border-radius: 4px !important;
}

[dir] .spark-btn--secondary, [dir] .cancel-check-in-container .cancel-check-in-button-container .ducp-component-button.cancel-cancel-check-in-button, [dir] .email-boarding-pass-container .email-button-container .ducp-component-button.cancel-email-button, [dir] .TravelExtras .footer > button.go-back, [dir] .sabre-dx-component-check-in-documents .footer > button.go-back, [dir] .ducp-component-toolbar .spark-toolbar.as-buttons .spark-toolbar__item--secondary-button, [dir] .ducp-component-toolbar .spark-toolbar.as-buttons .spark-toolbar__show-more, [dir] .ducp-component-number-selector .spark-number-selector .ducp-component-button.icon-button, [dir] .ducp-component-button.secondary-button {
  background-color: #141441;
  border: none;
  box-shadow: inset 0 -0.125rem 0 #ffffff;
}

.ancillary-summary-common u,
[dir] .sabre-dx-component-check-in-cart u {
  text-decoration: none !important;
}

@media (max-width: 768px) {
  .ancillary-common {
    height: 100% !important;
  }

  .expanded-content {
    order: 3 !important;
  }
}

[dir=ltr] .sabre-dx-component-check-in-passenger-summary .ducp-component-passenger-summary .passenger-summary-header .button-container .ducp-component-button:not(.icon-button):not(.toolbar-icon-item) {
  border-radius: 4px !important;
  min-width: 190px !important;
  text-align: center !important;
}

.ducp-component-breadcrumbs .spark-step-indicator__list button:nth-child(4):after {
  content: "4"!important;
}

.ducp-component-breadcrumbs .spark-step-indicator__list button:nth-child(5):after {
  content: "5"!important;
}

/* ============================================================
   SUCCESS + ERROR MESSAGE DESIGN
   ============================================================ */


/* ============================================================
   1. SUCCESS / CHECKED-IN MESSAGES
   ============================================================ */

.ducp-component-message:has(
    :is(
        [data-translation="SabreDxContainerCheckInConfirmationMessaging.checkInSuccess.title"],
        [data-translation="SabreDxContainerCheckInConfirmationMessaging.airportPassengerPartialBoardingPass.title"],
        [data-translation="SabreDxContainerCheckInConfirmationMessaging.airportPassengerNoBoardingPass.title"],
        [data-translation="SabreDxContainerCheckInConfirmationMessaging.noMobileBoardingPass.title"],
        [data-translation="SabreDxContainerCheckInConfirmationMessaging.partialMobileBoardingPass.title"],
        [data-translation="SabreDxContainerCheckInConfirmationMessaging.isNonRevenue.title"],
        [data-translation="SabreDxContainerCheckInConfirmationMessaging.paymentSuccess.title"],
        [data-translation="SabreDxContainerCheckInConfirmationMessaging.partialCheckIn.title"]
    )
) {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;

    margin: 20px 24px !important;
    padding: 0 !important;
}


/* SUCCESS MAIN LAYOUT */
.ducp-component-message:has(
    :is(
        [data-translation="SabreDxContainerCheckInConfirmationMessaging.checkInSuccess.title"],
        [data-translation="SabreDxContainerCheckInConfirmationMessaging.airportPassengerPartialBoardingPass.title"],
        [data-translation="SabreDxContainerCheckInConfirmationMessaging.airportPassengerNoBoardingPass.title"],
        [data-translation="SabreDxContainerCheckInConfirmationMessaging.noMobileBoardingPass.title"],
        [data-translation="SabreDxContainerCheckInConfirmationMessaging.partialMobileBoardingPass.title"],
        [data-translation="SabreDxContainerCheckInConfirmationMessaging.isNonRevenue.title"],
        [data-translation="SabreDxContainerCheckInConfirmationMessaging.paymentSuccess.title"],
        [data-translation="SabreDxContainerCheckInConfirmationMessaging.partialCheckIn.title"]
    )
) .spark-panel__content {
    display: grid !important;

    grid-template-columns: 40px 1fr !important;
    grid-template-rows: auto auto !important;

    column-gap: 14px !important;
    row-gap: 14px !important;

    align-items: center !important;

    padding: 0 8px !important;
}


/* SUCCESS CONTENT */
.ducp-component-message:has(
    :is(
        [data-translation="SabreDxContainerCheckInConfirmationMessaging.checkInSuccess.title"],
        [data-translation="SabreDxContainerCheckInConfirmationMessaging.airportPassengerPartialBoardingPass.title"],
        [data-translation="SabreDxContainerCheckInConfirmationMessaging.airportPassengerNoBoardingPass.title"],
        [data-translation="SabreDxContainerCheckInConfirmationMessaging.noMobileBoardingPass.title"],
        [data-translation="SabreDxContainerCheckInConfirmationMessaging.partialMobileBoardingPass.title"],
        [data-translation="SabreDxContainerCheckInConfirmationMessaging.isNonRevenue.title"],
        [data-translation="SabreDxContainerCheckInConfirmationMessaging.paymentSuccess.title"],
        [data-translation="SabreDxContainerCheckInConfirmationMessaging.partialCheckIn.title"]
    )
) .spark-message__content {
    display: contents !important;
}


/* HIDE ORIGINAL SUCCESS ICON */
.ducp-component-message:has(
    :is(
        [data-translation="SabreDxContainerCheckInConfirmationMessaging.checkInSuccess.title"],
        [data-translation="SabreDxContainerCheckInConfirmationMessaging.airportPassengerPartialBoardingPass.title"],
        [data-translation="SabreDxContainerCheckInConfirmationMessaging.airportPassengerNoBoardingPass.title"],
        [data-translation="SabreDxContainerCheckInConfirmationMessaging.noMobileBoardingPass.title"],
        [data-translation="SabreDxContainerCheckInConfirmationMessaging.partialMobileBoardingPass.title"],
        [data-translation="SabreDxContainerCheckInConfirmationMessaging.isNonRevenue.title"],
        [data-translation="SabreDxContainerCheckInConfirmationMessaging.paymentSuccess.title"],
        [data-translation="SabreDxContainerCheckInConfirmationMessaging.partialCheckIn.title"]
    )
) .spark-message__icon {
    display: none !important;
}


/* SUCCESS TITLE */
.ducp-component-message:has(
    :is(
        [data-translation="SabreDxContainerCheckInConfirmationMessaging.checkInSuccess.title"],
        [data-translation="SabreDxContainerCheckInConfirmationMessaging.airportPassengerPartialBoardingPass.title"],
        [data-translation="SabreDxContainerCheckInConfirmationMessaging.airportPassengerNoBoardingPass.title"],
        [data-translation="SabreDxContainerCheckInConfirmationMessaging.noMobileBoardingPass.title"],
        [data-translation="SabreDxContainerCheckInConfirmationMessaging.partialMobileBoardingPass.title"],
        [data-translation="SabreDxContainerCheckInConfirmationMessaging.isNonRevenue.title"],
        [data-translation="SabreDxContainerCheckInConfirmationMessaging.paymentSuccess.title"],
        [data-translation="SabreDxContainerCheckInConfirmationMessaging.partialCheckIn.title"]
    )
) .spark-message__heading {
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;

    position: relative !important;

    margin: 0 !important;
    padding: 8px 0 8px 52px !important;

    min-height: 40px !important;

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

    color: #00ABA8 !important;

    font-family: inherit !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
}


/* SUCCESS TICK */
.ducp-component-message:has(
    :is(
        [data-translation="SabreDxContainerCheckInConfirmationMessaging.checkInSuccess.title"],
        [data-translation="SabreDxContainerCheckInConfirmationMessaging.airportPassengerPartialBoardingPass.title"],
        [data-translation="SabreDxContainerCheckInConfirmationMessaging.airportPassengerNoBoardingPass.title"],
        [data-translation="SabreDxContainerCheckInConfirmationMessaging.noMobileBoardingPass.title"],
        [data-translation="SabreDxContainerCheckInConfirmationMessaging.partialMobileBoardingPass.title"],
        [data-translation="SabreDxContainerCheckInConfirmationMessaging.isNonRevenue.title"],
        [data-translation="SabreDxContainerCheckInConfirmationMessaging.paymentSuccess.title"],
        [data-translation="SabreDxContainerCheckInConfirmationMessaging.partialCheckIn.title"]
    )
) .spark-message__heading::before {
    content: "\2713" !important;

    position: absolute !important;

    left: 0 !important;
    top: 50% !important;

    transform: translateY(-50%) !important;

    width: 38px !important;
    height: 38px !important;

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

    background: #DFF5F4 !important;

    border: 1px solid #00ABA8 !important;
    border-radius: 50% !important;

    color: #00ABA8 !important;

    font-family: Arial, sans-serif !important;
    font-size: 20px !important;
    font-weight: bold !important;

    line-height: 1 !important;
}


/* ============================================================
   2. ERROR / RESTRICTION MESSAGES
   ============================================================ */

.ducp-component-message:has(
    :is(
         [data-translation="SabreDxContainerErrorMessage.specificErrors.checkinWindowClosed.title"],
        [data-translation="SabreDxContainerErrorMessage.systemError.defaultTitle"],
        [data-translation="SabreDxContainerCheckInConfirmationMessaging.checkinWindowClosed.title"],
        [data-translation="SabreDxContainerCheckInConfirmationMessaging.checkinWindowClosed.title"],
        [data-translation="SabreDxContainerCheckInConfirmationMessaging.checkinWindowClosed.title"],
        [data-translation="SabreDxContainerCheckInConfirmationMessaging.cancelCheckInError.title"],

        [data-translation="SabreDxContainerErrorMessage.specificErrors.aeContactGovt.title"],
        [data-translation="SabreDxContainerErrorMessage.specificErrors.aeVisaNotFound.title"],
        [data-translation="SabreDxContainerErrorMessage.specificErrors.bahAPPContactGDNPR.title"],
        [data-translation="SabreDxContainerErrorMessage.specificErrors.bahAPPExpiryOutsideRange.title"],
        [data-translation="SabreDxContainerErrorMessage.specificErrors.bahAPPInvalidFamilyNameFormat.title"],
        [data-translation="SabreDxContainerErrorMessage.specificErrors.dataMissingForNonRevenuePassenger.title"],
        [data-translation="SabreDxContainerErrorMessage.specificErrors.flightNotInitialized.title"],
        [data-translation="SabreDxContainerErrorMessage.specificErrors.groupCheckin.title"],
        [data-translation="SabreDxContainerErrorMessage.specificErrors.inhibitedPassengerType.title"],
        [data-translation="SabreDxContainerErrorMessage.specificErrors.inhibitedSsrFound.title"],
        [data-translation="SabreDxContainerErrorMessage.specificErrors.internationalCheckInIsNotAllowed.title"],
        [data-translation="SabreDxContainerErrorMessage.specificErrors.invalidVCR.title"],
        [data-translation="SabreDxContainerErrorMessage.specificErrors.reservationLevelSegmentsNotOpen.title"],
        [data-translation="SabreDxContainerErrorMessage.specificErrors.saudiVisaNotFound.title"],
        [data-translation="SabreDxContainerErrorMessage.specificErrors.segmentRestricted.title"],
        [data-translation="SabreDxContainerErrorMessage.specificErrors.thaiAPP.title"],
          [data-translation="SabreDxContainerErrorMessage.specificErrors.unableToContact.title"],
        [data-translation="SabreDxContainerErrorMessage.specificErrors.checkInRestrictedContactEES.title"],
        [data-translation="SabreDxContainerErrorMessage.specificErrors.visaNotFound.title"]
        
    )
) {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;

    margin: 20px 24px !important;
    padding: 0 !important;
}


/* ERROR MAIN LAYOUT */
.ducp-component-message:has(
    :is(
         [data-translation="SabreDxContainerErrorMessage.specificErrors.checkinWindowClosed.title"],
        [data-translation="SabreDxContainerErrorMessage.systemError.defaultTitle"],
        [data-translation="SabreDxContainerCheckInConfirmationMessaging.checkinWindowClosed.title"],
        [data-translation="SabreDxContainerCheckInConfirmationMessaging.checkinWindowClosed.title"],
        [data-translation="SabreDxContainerCheckInConfirmationMessaging.cancelCheckInError.title"],

        [data-translation="SabreDxContainerErrorMessage.specificErrors.aeContactGovt.title"],
        [data-translation="SabreDxContainerErrorMessage.specificErrors.aeVisaNotFound.title"],
        [data-translation="SabreDxContainerErrorMessage.specificErrors.bahAPPContactGDNPR.title"],
        [data-translation="SabreDxContainerErrorMessage.specificErrors.bahAPPExpiryOutsideRange.title"],
        [data-translation="SabreDxContainerErrorMessage.specificErrors.bahAPPInvalidFamilyNameFormat.title"],
        [data-translation="SabreDxContainerErrorMessage.specificErrors.dataMissingForNonRevenuePassenger.title"],
        [data-translation="SabreDxContainerErrorMessage.specificErrors.flightNotInitialized.title"],
        [data-translation="SabreDxContainerErrorMessage.specificErrors.groupCheckin.title"],
        [data-translation="SabreDxContainerErrorMessage.specificErrors.inhibitedPassengerType.title"],
        [data-translation="SabreDxContainerErrorMessage.specificErrors.inhibitedSsrFound.title"],
        [data-translation="SabreDxContainerErrorMessage.specificErrors.internationalCheckInIsNotAllowed.title"],
        [data-translation="SabreDxContainerErrorMessage.specificErrors.invalidVCR.title"],
        [data-translation="SabreDxContainerErrorMessage.specificErrors.reservationLevelSegmentsNotOpen.title"],
        [data-translation="SabreDxContainerErrorMessage.specificErrors.saudiVisaNotFound.title"],
        [data-translation="SabreDxContainerErrorMessage.specificErrors.segmentRestricted.title"],
        [data-translation="SabreDxContainerErrorMessage.specificErrors.thaiAPP.title"],
          [data-translation="SabreDxContainerErrorMessage.specificErrors.unableToContact.title"],
        [data-translation="SabreDxContainerErrorMessage.specificErrors.checkInRestrictedContactEES.title"],
        [data-translation="SabreDxContainerErrorMessage.specificErrors.visaNotFound.title"]
    )
) .spark-panel__content {
    display: grid !important;

    grid-template-columns: 40px 1fr !important;
    grid-template-rows: auto auto !important;

    column-gap: 14px !important;
    row-gap: 14px !important;

    align-items: center !important;

    padding: 0 8px !important;
}


/* ERROR CONTENT */
.ducp-component-message:has(
    :is(
         [data-translation="SabreDxContainerErrorMessage.specificErrors.checkinWindowClosed.title"],
        [data-translation="SabreDxContainerErrorMessage.systemError.defaultTitle"],
        [data-translation="SabreDxContainerCheckInConfirmationMessaging.checkinWindowClosed.title"],
        [data-translation="SabreDxContainerCheckInConfirmationMessaging.checkinWindowClosed.title"],
        [data-translation="SabreDxContainerCheckInConfirmationMessaging.cancelCheckInError.title"],

        [data-translation="SabreDxContainerErrorMessage.specificErrors.aeContactGovt.title"],
        [data-translation="SabreDxContainerErrorMessage.specificErrors.aeVisaNotFound.title"],
        [data-translation="SabreDxContainerErrorMessage.specificErrors.bahAPPContactGDNPR.title"],
        [data-translation="SabreDxContainerErrorMessage.specificErrors.bahAPPExpiryOutsideRange.title"],
        [data-translation="SabreDxContainerErrorMessage.specificErrors.bahAPPInvalidFamilyNameFormat.title"],
        [data-translation="SabreDxContainerErrorMessage.specificErrors.dataMissingForNonRevenuePassenger.title"],
        [data-translation="SabreDxContainerErrorMessage.specificErrors.flightNotInitialized.title"],
        [data-translation="SabreDxContainerErrorMessage.specificErrors.groupCheckin.title"],
        [data-translation="SabreDxContainerErrorMessage.specificErrors.inhibitedPassengerType.title"],
        [data-translation="SabreDxContainerErrorMessage.specificErrors.inhibitedSsrFound.title"],
        [data-translation="SabreDxContainerErrorMessage.specificErrors.internationalCheckInIsNotAllowed.title"],
        [data-translation="SabreDxContainerErrorMessage.specificErrors.invalidVCR.title"],
        [data-translation="SabreDxContainerErrorMessage.specificErrors.reservationLevelSegmentsNotOpen.title"],
        [data-translation="SabreDxContainerErrorMessage.specificErrors.saudiVisaNotFound.title"],
        [data-translation="SabreDxContainerErrorMessage.specificErrors.segmentRestricted.title"],
        [data-translation="SabreDxContainerErrorMessage.specificErrors.thaiAPP.title"],
          [data-translation="SabreDxContainerErrorMessage.specificErrors.unableToContact.title"],
        [data-translation="SabreDxContainerErrorMessage.specificErrors.checkInRestrictedContactEES.title"],
        [data-translation="SabreDxContainerErrorMessage.specificErrors.visaNotFound.title"]
    )
) .spark-message__content {
    display: contents !important;
}


/* HIDE ORIGINAL ERROR ICON */
.ducp-component-message:has(
    :is(
         [data-translation="SabreDxContainerErrorMessage.specificErrors.checkinWindowClosed.title"],
        [data-translation="SabreDxContainerErrorMessage.systemError.defaultTitle"],
        [data-translation="SabreDxContainerCheckInConfirmationMessaging.checkinWindowClosed.title"],
        [data-translation="SabreDxContainerCheckInConfirmationMessaging.checkinWindowClosed.title"],
        [data-translation="SabreDxContainerCheckInConfirmationMessaging.cancelCheckInError.title"],

        [data-translation="SabreDxContainerErrorMessage.specificErrors.aeContactGovt.title"],
        [data-translation="SabreDxContainerErrorMessage.specificErrors.aeVisaNotFound.title"],
        [data-translation="SabreDxContainerErrorMessage.specificErrors.bahAPPContactGDNPR.title"],
        [data-translation="SabreDxContainerErrorMessage.specificErrors.bahAPPExpiryOutsideRange.title"],
        [data-translation="SabreDxContainerErrorMessage.specificErrors.bahAPPInvalidFamilyNameFormat.title"],
        [data-translation="SabreDxContainerErrorMessage.specificErrors.dataMissingForNonRevenuePassenger.title"],
        [data-translation="SabreDxContainerErrorMessage.specificErrors.flightNotInitialized.title"],
        [data-translation="SabreDxContainerErrorMessage.specificErrors.groupCheckin.title"],
        [data-translation="SabreDxContainerErrorMessage.specificErrors.inhibitedPassengerType.title"],
        [data-translation="SabreDxContainerErrorMessage.specificErrors.inhibitedSsrFound.title"],
        [data-translation="SabreDxContainerErrorMessage.specificErrors.internationalCheckInIsNotAllowed.title"],
        [data-translation="SabreDxContainerErrorMessage.specificErrors.invalidVCR.title"],
        [data-translation="SabreDxContainerErrorMessage.specificErrors.reservationLevelSegmentsNotOpen.title"],
        [data-translation="SabreDxContainerErrorMessage.specificErrors.saudiVisaNotFound.title"],
        [data-translation="SabreDxContainerErrorMessage.specificErrors.segmentRestricted.title"],
        [data-translation="SabreDxContainerErrorMessage.specificErrors.thaiAPP.title"],
          [data-translation="SabreDxContainerErrorMessage.specificErrors.unableToContact.title"],
        [data-translation="SabreDxContainerErrorMessage.specificErrors.checkInRestrictedContactEES.title"],
        [data-translation="SabreDxContainerErrorMessage.specificErrors.visaNotFound.title"]
    )
) .spark-message__icon {
    display: none !important;
}


/* ERROR TITLE */
.ducp-component-message:has(
    :is(
         [data-translation="SabreDxContainerErrorMessage.specificErrors.checkinWindowClosed.title"],
        [data-translation="SabreDxContainerErrorMessage.systemError.defaultTitle"],
        [data-translation="SabreDxContainerCheckInConfirmationMessaging.checkinWindowClosed.title"],
        [data-translation="SabreDxContainerCheckInConfirmationMessaging.checkinWindowClosed.title"],
        [data-translation="SabreDxContainerCheckInConfirmationMessaging.cancelCheckInError.title"],

        [data-translation="SabreDxContainerErrorMessage.specificErrors.aeContactGovt.title"],
        [data-translation="SabreDxContainerErrorMessage.specificErrors.aeVisaNotFound.title"],
        [data-translation="SabreDxContainerErrorMessage.specificErrors.bahAPPContactGDNPR.title"],
        [data-translation="SabreDxContainerErrorMessage.specificErrors.bahAPPExpiryOutsideRange.title"],
        [data-translation="SabreDxContainerErrorMessage.specificErrors.bahAPPInvalidFamilyNameFormat.title"],
        [data-translation="SabreDxContainerErrorMessage.specificErrors.dataMissingForNonRevenuePassenger.title"],
        [data-translation="SabreDxContainerErrorMessage.specificErrors.flightNotInitialized.title"],
        [data-translation="SabreDxContainerErrorMessage.specificErrors.groupCheckin.title"],
        [data-translation="SabreDxContainerErrorMessage.specificErrors.inhibitedPassengerType.title"],
        [data-translation="SabreDxContainerErrorMessage.specificErrors.inhibitedSsrFound.title"],
        [data-translation="SabreDxContainerErrorMessage.specificErrors.internationalCheckInIsNotAllowed.title"],
        [data-translation="SabreDxContainerErrorMessage.specificErrors.invalidVCR.title"],
        [data-translation="SabreDxContainerErrorMessage.specificErrors.reservationLevelSegmentsNotOpen.title"],
        [data-translation="SabreDxContainerErrorMessage.specificErrors.saudiVisaNotFound.title"],
        [data-translation="SabreDxContainerErrorMessage.specificErrors.segmentRestricted.title"],
        [data-translation="SabreDxContainerErrorMessage.specificErrors.thaiAPP.title"],
          [data-translation="SabreDxContainerErrorMessage.specificErrors.unableToContact.title"],
        [data-translation="SabreDxContainerErrorMessage.specificErrors.checkInRestrictedContactEES.title"],
        [data-translation="SabreDxContainerErrorMessage.specificErrors.visaNotFound.title"]
    )
) .spark-message__heading {
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;

    position: relative !important;

    margin: 0 !important;
    padding: 8px 0 8px 52px !important;

    min-height: 40px !important;

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

    color: #E6293D !important;

    font-family: inherit !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
}


/* ERROR RED CIRCLE + X */
.ducp-component-message:has(
    :is(
         [data-translation="SabreDxContainerErrorMessage.specificErrors.checkinWindowClosed.title"],
        [data-translation="SabreDxContainerErrorMessage.systemError.defaultTitle"],
        [data-translation="SabreDxContainerCheckInConfirmationMessaging.checkinWindowClosed.title"],
        [data-translation="SabreDxContainerCheckInConfirmationMessaging.checkinWindowClosed.title"],
        [data-translation="SabreDxContainerCheckInConfirmationMessaging.cancelCheckInError.title"],

        [data-translation="SabreDxContainerErrorMessage.specificErrors.aeContactGovt.title"],
        [data-translation="SabreDxContainerErrorMessage.specificErrors.aeVisaNotFound.title"],
        [data-translation="SabreDxContainerErrorMessage.specificErrors.bahAPPContactGDNPR.title"],
        [data-translation="SabreDxContainerErrorMessage.specificErrors.bahAPPExpiryOutsideRange.title"],
        [data-translation="SabreDxContainerErrorMessage.specificErrors.bahAPPInvalidFamilyNameFormat.title"],
        [data-translation="SabreDxContainerErrorMessage.specificErrors.dataMissingForNonRevenuePassenger.title"],
        [data-translation="SabreDxContainerErrorMessage.specificErrors.flightNotInitialized.title"],
        [data-translation="SabreDxContainerErrorMessage.specificErrors.groupCheckin.title"],
        [data-translation="SabreDxContainerErrorMessage.specificErrors.inhibitedPassengerType.title"],
        [data-translation="SabreDxContainerErrorMessage.specificErrors.inhibitedSsrFound.title"],
        [data-translation="SabreDxContainerErrorMessage.specificErrors.internationalCheckInIsNotAllowed.title"],
        [data-translation="SabreDxContainerErrorMessage.specificErrors.invalidVCR.title"],
        [data-translation="SabreDxContainerErrorMessage.specificErrors.reservationLevelSegmentsNotOpen.title"],
        [data-translation="SabreDxContainerErrorMessage.specificErrors.saudiVisaNotFound.title"],
        [data-translation="SabreDxContainerErrorMessage.specificErrors.segmentRestricted.title"],
        [data-translation="SabreDxContainerErrorMessage.specificErrors.thaiAPP.title"],
          [data-translation="SabreDxContainerErrorMessage.specificErrors.unableToContact.title"],
        [data-translation="SabreDxContainerErrorMessage.specificErrors.checkInRestrictedContactEES.title"],
        [data-translation="SabreDxContainerErrorMessage.specificErrors.visaNotFound.title"]
    )
) .spark-message__heading::before {
    content: "\00D7" !important;

    position: absolute !important;

    left: 0 !important;
    top: 50% !important;

    transform: translateY(-50%) !important;

    width: 38px !important;
    height: 38px !important;

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

    background: #FDE3E6 !important;

    border: 1px solid #E6293D !important;
    border-radius: 50% !important;

    color: #E6293D !important;

    font-family: Arial, sans-serif !important;
    font-size: 24px !important;
    font-weight: 400 !important;

    line-height: 1 !important;
}


/* ============================================================
   3. SHARED MESSAGE BOX
   SAME FOR SUCCESS + ERROR
   ============================================================ */

.ducp-component-message:has(
    :is(
        [data-translation="SabreDxContainerCheckInConfirmationMessaging.checkInSuccess.title"],
        [data-translation="SabreDxContainerCheckInConfirmationMessaging.airportPassengerPartialBoardingPass.title"],
        [data-translation="SabreDxContainerCheckInConfirmationMessaging.airportPassengerNoBoardingPass.title"],
        [data-translation="SabreDxContainerCheckInConfirmationMessaging.noMobileBoardingPass.title"],
        [data-translation="SabreDxContainerCheckInConfirmationMessaging.partialMobileBoardingPass.title"],
        [data-translation="SabreDxContainerCheckInConfirmationMessaging.isNonRevenue.title"],
        [data-translation="SabreDxContainerCheckInConfirmationMessaging.paymentSuccess.title"],
        [data-translation="SabreDxContainerCheckInConfirmationMessaging.partialCheckIn.title"],

         [data-translation="SabreDxContainerErrorMessage.specificErrors.checkinWindowClosed.title"],
        [data-translation="SabreDxContainerErrorMessage.systemError.defaultTitle"],
        [data-translation="SabreDxContainerCheckInConfirmationMessaging.checkinWindowClosed.title"],
        [data-translation="SabreDxContainerCheckInConfirmationMessaging.checkinWindowClosed.title"],
        [data-translation="SabreDxContainerCheckInConfirmationMessaging.cancelCheckInError.title"],

        [data-translation="SabreDxContainerErrorMessage.specificErrors.aeContactGovt.title"],
        [data-translation="SabreDxContainerErrorMessage.specificErrors.aeVisaNotFound.title"],
        [data-translation="SabreDxContainerErrorMessage.specificErrors.bahAPPContactGDNPR.title"],
        [data-translation="SabreDxContainerErrorMessage.specificErrors.bahAPPExpiryOutsideRange.title"],
        [data-translation="SabreDxContainerErrorMessage.specificErrors.bahAPPInvalidFamilyNameFormat.title"],
        [data-translation="SabreDxContainerErrorMessage.specificErrors.dataMissingForNonRevenuePassenger.title"],
        [data-translation="SabreDxContainerErrorMessage.specificErrors.flightNotInitialized.title"],
        [data-translation="SabreDxContainerErrorMessage.specificErrors.groupCheckin.title"],
        [data-translation="SabreDxContainerErrorMessage.specificErrors.inhibitedPassengerType.title"],
        [data-translation="SabreDxContainerErrorMessage.specificErrors.inhibitedSsrFound.title"],
        [data-translation="SabreDxContainerErrorMessage.specificErrors.internationalCheckInIsNotAllowed.title"],
        [data-translation="SabreDxContainerErrorMessage.specificErrors.invalidVCR.title"],
        [data-translation="SabreDxContainerErrorMessage.specificErrors.reservationLevelSegmentsNotOpen.title"],
        [data-translation="SabreDxContainerErrorMessage.specificErrors.saudiVisaNotFound.title"],
        [data-translation="SabreDxContainerErrorMessage.specificErrors.segmentRestricted.title"],
        [data-translation="SabreDxContainerErrorMessage.specificErrors.thaiAPP.title"],
          [data-translation="SabreDxContainerErrorMessage.specificErrors.unableToContact.title"],
        [data-translation="SabreDxContainerErrorMessage.specificErrors.checkInRestrictedContactEES.title"],
        [data-translation="SabreDxContainerErrorMessage.specificErrors.visaNotFound.title"]
    )
) .spark-message__content p {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;

    position: relative !important;

    margin: 0 !important;

    padding: 14px 20px 14px 54px !important;

    background: var(--Yellow-100, #FFF3CD) !important;

    border: none !important;
    border-radius: 14px !important;

    color: #777 !important;

    /* Same font for both */
    font-family: inherit !important;
    font-size: inherit !important;
    font-weight: 400 !important;
    line-height: 1.35 !important;
}


/* ============================================================
   4. ONE WARNING ICON FOR BOTH
   NO DUPLICATION
   ============================================================ */

.ducp-component-message:has(
    :is(
        [data-translation="SabreDxContainerCheckInConfirmationMessaging.checkInSuccess.title"],
        [data-translation="SabreDxContainerCheckInConfirmationMessaging.airportPassengerPartialBoardingPass.title"],
        [data-translation="SabreDxContainerCheckInConfirmationMessaging.airportPassengerNoBoardingPass.title"],
        [data-translation="SabreDxContainerCheckInConfirmationMessaging.noMobileBoardingPass.title"],
        [data-translation="SabreDxContainerCheckInConfirmationMessaging.partialMobileBoardingPass.title"],
        [data-translation="SabreDxContainerCheckInConfirmationMessaging.isNonRevenue.title"],
        [data-translation="SabreDxContainerCheckInConfirmationMessaging.paymentSuccess.title"],
        [data-translation="SabreDxContainerCheckInConfirmationMessaging.partialCheckIn.title"],

         [data-translation="SabreDxContainerErrorMessage.specificErrors.checkinWindowClosed.title"],
        [data-translation="SabreDxContainerErrorMessage.systemError.defaultTitle"],
        [data-translation="SabreDxContainerCheckInConfirmationMessaging.checkinWindowClosed.title"],
        [data-translation="SabreDxContainerCheckInConfirmationMessaging.checkinWindowClosed.title"],
        [data-translation="SabreDxContainerCheckInConfirmationMessaging.cancelCheckInError.title"],

        [data-translation="SabreDxContainerErrorMessage.specificErrors.aeContactGovt.title"],
        [data-translation="SabreDxContainerErrorMessage.specificErrors.aeVisaNotFound.title"],
        [data-translation="SabreDxContainerErrorMessage.specificErrors.bahAPPContactGDNPR.title"],
        [data-translation="SabreDxContainerErrorMessage.specificErrors.bahAPPExpiryOutsideRange.title"],
        [data-translation="SabreDxContainerErrorMessage.specificErrors.bahAPPInvalidFamilyNameFormat.title"],
        [data-translation="SabreDxContainerErrorMessage.specificErrors.dataMissingForNonRevenuePassenger.title"],
        [data-translation="SabreDxContainerErrorMessage.specificErrors.flightNotInitialized.title"],
        [data-translation="SabreDxContainerErrorMessage.specificErrors.groupCheckin.title"],
        [data-translation="SabreDxContainerErrorMessage.specificErrors.inhibitedPassengerType.title"],
        [data-translation="SabreDxContainerErrorMessage.specificErrors.inhibitedSsrFound.title"],
        [data-translation="SabreDxContainerErrorMessage.specificErrors.internationalCheckInIsNotAllowed.title"],
        [data-translation="SabreDxContainerErrorMessage.specificErrors.invalidVCR.title"],
        [data-translation="SabreDxContainerErrorMessage.specificErrors.reservationLevelSegmentsNotOpen.title"],
        [data-translation="SabreDxContainerErrorMessage.specificErrors.saudiVisaNotFound.title"],
        [data-translation="SabreDxContainerErrorMessage.specificErrors.segmentRestricted.title"],
        [data-translation="SabreDxContainerErrorMessage.specificErrors.thaiAPP.title"],
          [data-translation="SabreDxContainerErrorMessage.specificErrors.unableToContact.title"],
        [data-translation="SabreDxContainerErrorMessage.specificErrors.checkInRestrictedContactEES.title"],
        [data-translation="SabreDxContainerErrorMessage.specificErrors.visaNotFound.title"]
    )
) .spark-message__content p::before {
    content: "\26A0" !important;

    position: absolute !important;

    left: 17px !important;
    top: 50% !important;

    transform: translateY(-50%) !important;

    width: 24px !important;
    height: 24px !important;

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

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

    background: transparent !important;

    border: none !important;
    border-radius: 0 !important;

    color: #CC9A06 !important;

    font-family: Arial, sans-serif !important;
    font-size: 22px !important;
    font-weight: 400 !important;

    line-height: 1 !important;
}


/* ============================================================
   5. REMOVE OUTER BORDER FOR ALL
   ============================================================ */

.ducp-component-message:has(
    :is(
        [data-translation="SabreDxContainerCheckInConfirmationMessaging.checkInSuccess.title"],
        [data-translation="SabreDxContainerCheckInConfirmationMessaging.airportPassengerPartialBoardingPass.title"],
        [data-translation="SabreDxContainerCheckInConfirmationMessaging.airportPassengerNoBoardingPass.title"],
        [data-translation="SabreDxContainerCheckInConfirmationMessaging.noMobileBoardingPass.title"],
        [data-translation="SabreDxContainerCheckInConfirmationMessaging.partialMobileBoardingPass.title"],
        [data-translation="SabreDxContainerCheckInConfirmationMessaging.isNonRevenue.title"],
        [data-translation="SabreDxContainerCheckInConfirmationMessaging.paymentSuccess.title"],
        [data-translation="SabreDxContainerCheckInConfirmationMessaging.partialCheckIn.title"],

         [data-translation="SabreDxContainerErrorMessage.specificErrors.checkinWindowClosed.title"],
        [data-translation="SabreDxContainerErrorMessage.systemError.defaultTitle"],
        [data-translation="SabreDxContainerCheckInConfirmationMessaging.checkinWindowClosed.title"],
        [data-translation="SabreDxContainerCheckInConfirmationMessaging.checkinWindowClosed.title"],
        [data-translation="SabreDxContainerCheckInConfirmationMessaging.cancelCheckInError.title"],

        [data-translation="SabreDxContainerErrorMessage.specificErrors.aeContactGovt.title"],
        [data-translation="SabreDxContainerErrorMessage.specificErrors.aeVisaNotFound.title"],
        [data-translation="SabreDxContainerErrorMessage.specificErrors.bahAPPContactGDNPR.title"],
        [data-translation="SabreDxContainerErrorMessage.specificErrors.bahAPPExpiryOutsideRange.title"],
        [data-translation="SabreDxContainerErrorMessage.specificErrors.bahAPPInvalidFamilyNameFormat.title"],
        [data-translation="SabreDxContainerErrorMessage.specificErrors.dataMissingForNonRevenuePassenger.title"],
        [data-translation="SabreDxContainerErrorMessage.specificErrors.flightNotInitialized.title"],
        [data-translation="SabreDxContainerErrorMessage.specificErrors.groupCheckin.title"],
        [data-translation="SabreDxContainerErrorMessage.specificErrors.inhibitedPassengerType.title"],
        [data-translation="SabreDxContainerErrorMessage.specificErrors.inhibitedSsrFound.title"],
        [data-translation="SabreDxContainerErrorMessage.specificErrors.internationalCheckInIsNotAllowed.title"],
        [data-translation="SabreDxContainerErrorMessage.specificErrors.invalidVCR.title"],
        [data-translation="SabreDxContainerErrorMessage.specificErrors.reservationLevelSegmentsNotOpen.title"],
        [data-translation="SabreDxContainerErrorMessage.specificErrors.saudiVisaNotFound.title"],
        [data-translation="SabreDxContainerErrorMessage.specificErrors.segmentRestricted.title"],
        [data-translation="SabreDxContainerErrorMessage.specificErrors.thaiAPP.title"],
          [data-translation="SabreDxContainerErrorMessage.specificErrors.unableToContact.title"],
        [data-translation="SabreDxContainerErrorMessage.specificErrors.checkInRestrictedContactEES.title"],
        [data-translation="SabreDxContainerErrorMessage.specificErrors.visaNotFound.title"]
    )
).spark-panel {
    border: 0 !important;
}

/* ============================================================
   MOBILE FIX - SUCCESS + ERROR
   ============================================================ */

@media (max-width: 600px) {

    /* Entire message component */
    .ducp-component-message:has(
        [data-translation="SabreDxContainerCheckInConfirmationMessaging.checkInSuccess.title"],
        [data-translation="SabreDxContainerCheckInConfirmationMessaging.airportPassengerPartialBoardingPass.title"],
        [data-translation="SabreDxContainerCheckInConfirmationMessaging.airportPassengerNoBoardingPass.title"],
        [data-translation="SabreDxContainerCheckInConfirmationMessaging.noMobileBoardingPass.title"],
        [data-translation="SabreDxContainerCheckInConfirmationMessaging.partialMobileBoardingPass.title"],
        [data-translation="SabreDxContainerCheckInConfirmationMessaging.isNonRevenue.title"],
        [data-translation="SabreDxContainerCheckInConfirmationMessaging.paymentSuccess.title"],
        [data-translation="SabreDxContainerCheckInConfirmationMessaging.partialCheckIn.title"],

         [data-translation="SabreDxContainerErrorMessage.specificErrors.checkinWindowClosed.title"],
        [data-translation="SabreDxContainerErrorMessage.systemError.defaultTitle"],
        [data-translation="SabreDxContainerCheckInConfirmationMessaging.checkinWindowClosed.title"],
        [data-translation="SabreDxContainerCheckInConfirmationMessaging.checkinWindowClosed.title"],
        [data-translation="SabreDxContainerCheckInConfirmationMessaging.cancelCheckInError.title"],

        [data-translation^="SabreDxContainerErrorMessage.specificErrors."]
    ) {
        margin: 16px 16px !important;
        padding: 0 !important;

        width: auto !important;
        max-width: none !important;

        box-sizing: border-box !important;
    }


    /* Main layout */
    .ducp-component-message:has(
        [data-translation="SabreDxContainerCheckInConfirmationMessaging.checkInSuccess.title"],
        [data-translation="SabreDxContainerCheckInConfirmationMessaging.airportPassengerPartialBoardingPass.title"],
        [data-translation="SabreDxContainerCheckInConfirmationMessaging.airportPassengerNoBoardingPass.title"],
        [data-translation="SabreDxContainerCheckInConfirmationMessaging.noMobileBoardingPass.title"],
        [data-translation="SabreDxContainerCheckInConfirmationMessaging.partialMobileBoardingPass.title"],
        [data-translation="SabreDxContainerCheckInConfirmationMessaging.isNonRevenue.title"],
        [data-translation="SabreDxContainerCheckInConfirmationMessaging.paymentSuccess.title"],
        [data-translation="SabreDxContainerCheckInConfirmationMessaging.partialCheckIn.title"],

         [data-translation="SabreDxContainerErrorMessage.specificErrors.checkinWindowClosed.title"],
        [data-translation="SabreDxContainerErrorMessage.systemError.defaultTitle"],
        [data-translation="SabreDxContainerCheckInConfirmationMessaging.checkinWindowClosed.title"],
        [data-translation="SabreDxContainerCheckInConfirmationMessaging.checkinWindowClosed.title"],
        [data-translation="SabreDxContainerCheckInConfirmationMessaging.cancelCheckInError.title"],

        [data-translation^="SabreDxContainerErrorMessage.specificErrors."]
    ) .spark-panel__content {

        display: grid !important;

        grid-template-columns: 1fr !important;
        grid-template-rows: auto auto !important;

        row-gap: 12px !important;

        width: 100% !important;

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

        box-sizing: border-box !important;
    }


    /* Title */
    .ducp-component-message:has(
        [data-translation="SabreDxContainerCheckInConfirmationMessaging.checkInSuccess.title"],
        [data-translation="SabreDxContainerCheckInConfirmationMessaging.airportPassengerPartialBoardingPass.title"],
        [data-translation="SabreDxContainerCheckInConfirmationMessaging.airportPassengerNoBoardingPass.title"],
        [data-translation="SabreDxContainerCheckInConfirmationMessaging.noMobileBoardingPass.title"],
        [data-translation="SabreDxContainerCheckInConfirmationMessaging.partialMobileBoardingPass.title"],
        [data-translation="SabreDxContainerCheckInConfirmationMessaging.isNonRevenue.title"],
        [data-translation="SabreDxContainerCheckInConfirmationMessaging.paymentSuccess.title"],
        [data-translation="SabreDxContainerCheckInConfirmationMessaging.partialCheckIn.title"],

         [data-translation="SabreDxContainerErrorMessage.specificErrors.checkinWindowClosed.title"],
        [data-translation="SabreDxContainerErrorMessage.systemError.defaultTitle"],
        [data-translation="SabreDxContainerCheckInConfirmationMessaging.checkinWindowClosed.title"],
        [data-translation="SabreDxContainerCheckInConfirmationMessaging.checkinWindowClosed.title"],
        [data-translation="SabreDxContainerCheckInConfirmationMessaging.cancelCheckInError.title"],

        [data-translation^="SabreDxContainerErrorMessage.specificErrors."]
    ) .spark-message__heading {

        grid-column: 1 !important;
        grid-row: 1 !important;

        width: 100% !important;

        margin: 0 !important;

        padding: 7px 4px 7px 48px !important;

        box-sizing: border-box !important;
    }


    /* Yellow message box */
    .ducp-component-message:has(
        [data-translation="SabreDxContainerCheckInConfirmationMessaging.checkInSuccess.title"],
        [data-translation="SabreDxContainerCheckInConfirmationMessaging.airportPassengerPartialBoardingPass.title"],
        [data-translation="SabreDxContainerCheckInConfirmationMessaging.airportPassengerNoBoardingPass.title"],
        [data-translation="SabreDxContainerCheckInConfirmationMessaging.noMobileBoardingPass.title"],
        [data-translation="SabreDxContainerCheckInConfirmationMessaging.partialMobileBoardingPass.title"],
        [data-translation="SabreDxContainerCheckInConfirmationMessaging.isNonRevenue.title"],
        [data-translation="SabreDxContainerCheckInConfirmationMessaging.paymentSuccess.title"],
        [data-translation="SabreDxContainerCheckInConfirmationMessaging.partialCheckIn.title"],

         [data-translation="SabreDxContainerErrorMessage.specificErrors.checkinWindowClosed.title"],
        [data-translation="SabreDxContainerErrorMessage.systemError.defaultTitle"],
        [data-translation="SabreDxContainerCheckInConfirmationMessaging.checkinWindowClosed.title"],
        [data-translation="SabreDxContainerCheckInConfirmationMessaging.checkinWindowClosed.title"],
        [data-translation="SabreDxContainerCheckInConfirmationMessaging.cancelCheckInError.title"],

        [data-translation^="SabreDxContainerErrorMessage.specificErrors."]
    ) .spark-message__content p {

        grid-column: 1 !important;
        grid-row: 2 !important;

        width: auto !important;
        max-width: none !important;
        min-width: 0 !important;

        justify-self: stretch !important;

        margin: 0 !important;

        padding: 12px 14px 12px 42px !important;

        box-sizing: border-box !important;

        background: var(--Yellow-100, #FFF3CD) !important;

        border-radius: 12px !important;

        font-family: inherit !important;
        font-size: inherit !important;
        line-height: 1.35 !important;

        overflow-wrap: break-word !important;
    }


    /* Warning triangle */
    .ducp-component-message:has(
        [data-translation="SabreDxContainerCheckInConfirmationMessaging.checkInSuccess.title"],
        [data-translation="SabreDxContainerCheckInConfirmationMessaging.airportPassengerPartialBoardingPass.title"],
        [data-translation="SabreDxContainerCheckInConfirmationMessaging.airportPassengerNoBoardingPass.title"],
        [data-translation="SabreDxContainerCheckInConfirmationMessaging.noMobileBoardingPass.title"],
        [data-translation="SabreDxContainerCheckInConfirmationMessaging.partialMobileBoardingPass.title"],
        [data-translation="SabreDxContainerCheckInConfirmationMessaging.isNonRevenue.title"],
        [data-translation="SabreDxContainerCheckInConfirmationMessaging.paymentSuccess.title"],
        [data-translation="SabreDxContainerCheckInConfirmationMessaging.partialCheckIn.title"],

          [data-translation="SabreDxContainerErrorMessage.specificErrors.checkinWindowClosed.title"],
        [data-translation="SabreDxContainerErrorMessage.systemError.defaultTitle"],
        [data-translation="SabreDxContainerCheckInConfirmationMessaging.checkinWindowClosed.title"],
        [data-translation="SabreDxContainerCheckInConfirmationMessaging.checkinWindowClosed.title"],
        [data-translation="SabreDxContainerCheckInConfirmationMessaging.cancelCheckInError.title"],

        [data-translation^="SabreDxContainerErrorMessage.specificErrors."]
    ) .spark-message__content p::before {

        left: 12px !important;
        top: 50% !important;

        transform: translateY(-50%) !important;

        font-size: 18px !important;
    }

}

/* ============================================================
   SESSION TIMEOUT MODAL
   SabreDxComponentCheckInSessionTimeout
   ============================================================ */


/* MODAL CONTAINER */
.spark-modal__content.MessagePopup:has(
    [data-translation="SabreDxComponentCheckInSessionTimeout.errorPopupTitle"]
) {
    border: none !important;
    box-shadow: none !important;
}


/* MODAL BODY */
.spark-modal__content.MessagePopup:has(
    [data-translation="SabreDxComponentCheckInSessionTimeout.errorPopupTitle"]
) .spark-modal__body {
    padding: 24px !important;
}


/* REMOVE DEFAULT ERROR BACKGROUND / BORDER */
.spark-modal__content.MessagePopup:has(
    [data-translation="SabreDxComponentCheckInSessionTimeout.errorPopupTitle"]
) .modal-container.error {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}


/* MAIN CONTENT */
.spark-modal__content.MessagePopup:has(
    [data-translation="SabreDxComponentCheckInSessionTimeout.errorPopupTitle"]
) .modal-content {
    background: transparent !important;
    border: none !important;
}


/* ============================================================
   TITLE
   ============================================================ */

.spark-modal__content.MessagePopup:has(
    [data-translation="SabreDxComponentCheckInSessionTimeout.errorPopupTitle"]
) .modal-heading {
    position: relative !important;

    margin: 0 0 14px 0 !important;
    padding: 8px 0 8px 54px !important;

    min-height: 40px !important;

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

    color: #E6293D !important;

    font-family: inherit !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
}


/* HIDE ORIGINAL SABRE ICON */
.spark-modal__content.MessagePopup:has(
    [data-translation="SabreDxComponentCheckInSessionTimeout.errorPopupTitle"]
) .modal-message.modal-icon {
    display: none !important;
}


/* RED CIRCLE + X */
.spark-modal__content.MessagePopup:has(
    [data-translation="SabreDxComponentCheckInSessionTimeout.errorPopupTitle"]
) .modal-heading::before {
    content: "\00D7" !important;
    position: absolute !important;
    left: 0 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;

    width: 38px !important;
    height: 38px !important;

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

    background: #FDE3E6 !important;

    border: 1px solid #E6293D !important;
    border-radius: 50% !important;

    color: #E6293D !important;

    font-family: Arial, sans-serif !important;
    font-size: 24px !important;
    font-weight: 400 !important;

    line-height: 1 !important;
}


/* ============================================================
   MESSAGE BOX
   ============================================================ */

.spark-modal__content.MessagePopup:has(
    [data-translation="SabreDxComponentCheckInSessionTimeout.errorPopupTitle"]
) #ducp-component-message-popup-message-body {
    position: relative !important;
    margin: 0 !important;
    padding: 14px 20px 14px 54px !important;
    background: var(--Yellow-100, #FFF3CD) !important;
    border: none !important;
    border-radius: 14px !important;
    color: #777 !important;
    font-family: inherit !important;
    font-size: inherit !important;
    font-weight: 400 !important;
    line-height: 1.35 !important;
}


/* WARNING TRIANGLE INSIDE MESSAGE */
.spark-modal__content.MessagePopup:has(
    [data-translation="SabreDxComponentCheckInSessionTimeout.errorPopupTitle"]
) #ducp-component-message-popup-message-body::before {
    content: "\26A0" !important;

    position: absolute !important;

    left: 17px !important;
    top: 50% !important;

    transform: translateY(-50%) !important;

    width: 24px !important;
    height: 24px !important;

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

    background: transparent !important;
    border: none !important;

    color: #CC9A06 !important;

    font-family: Arial, sans-serif !important;
    font-size: 22px !important;
    font-weight: 400 !important;

    line-height: 1 !important;
}


/* ============================================================
   BUTTON
   ============================================================ */

.spark-modal__content.MessagePopup:has(
    [data-translation="SabreDxComponentCheckInSessionTimeout.errorPopupTitle"]
) .button-container {
    margin-top: 18px !important;
    padding: 0 !important;
}


.spark-modal__content.MessagePopup:has(
    [data-translation="SabreDxComponentCheckInSessionTimeout.errorPopupTitle"]
) .modal-button {
    min-width: 140px !important;

    padding: 12px 24px !important;

    font-family: inherit !important;
    font-weight: 600 !important;
}

.spark-modal__content.MessagePopup:has(
    [data-translation="SabreDxComponentCheckInSessionTimeout.errorPopupTitle"]
) {
    width: 50% !important;
    max-width: 600px !important;
}

@media (max-width: 600px) {
    .spark-modal__content.MessagePopup:has(
        [data-translation="SabreDxComponentCheckInSessionTimeout.errorPopupTitle"]
    ) {
        width: 90% !important;
        max-width: none !important;
		
    }
}





/* ==========================================================================
   PASSENGERS SECTION — full rewrite
   Scoped to both the component's own class and your page wrapper classes,
   so it applies regardless of which one carries the higher specificity.
   ========================================================================== */

.sabre-dx-component-check-in-cart-passengers,
.gf-passenger-section-moved {
  --navy: #1b2a4a;
  --navy-soft: #6b7280;
  --gold: #8a6d2f;
  --border: #e3e0d6;
}

/* ---- Container ---- */
.gf-itinerary-page .gf-passenger-section-moved {
  width: 100% !important;
  box-sizing: border-box !important;
  margin: 0 0 20px 0 !important;
  padding: 24px 15px 20px !important;
  background: #fff !important;
  box-shadow: none !important;
  border-radius: 8px !important;
}

/* ---- Title ---- */
.gf-itinerary-page .gf-passenger-section-moved .cart-view-title {
  margin: 0 0 18px 0 !important;
  padding: 0 0 14px 0 !important;
  background: #fff !important;
  border: none !important;
  border-bottom: 1px solid var(--border) !important;
  font-family: inherit !important;
  font-size: 25px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
}
.gf-itinerary-page .gf-passenger-section-moved .cart-view-title::after {
  display: none !important;
}
.cart-view-title [data-translation="SabreDxComponentCheckInCart.views.passengers.title"] {
  text-transform: none !important;
}

/* ---- Lay the two passenger groups (Adult / Infant) side by side ---- */
.gf-itinerary-page .gf-passenger-section-moved {
  display: flex !important;
  flex-wrap: wrap !important;
}
.gf-itinerary-page .gf-passenger-section-moved .cart-view-title {
  flex: 1 0 100% !important;
}
.gf-itinerary-page .gf-passenger-section-moved .passenger-cart-item {
  display: block !important;
  vertical-align: top !important;
  flex: 1 1 260px !important;
  min-width: 220px !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  background: #fff !important;
  border: none !important;
  box-shadow: none !important;
}
.gf-itinerary-page .gf-passenger-section-moved .passenger-cart-item.ADULT {
  margin-right: 32px !important;
}

/* ---- Group label ("Adult x 4") ---- */
.gf-itinerary-page .gf-passenger-section-moved .cart-item-label {
  margin: 0 0 6px 0 !important;
  font-family: inherit !important;
  font-size: 13px !important;
  font-weight: 700 !important;
}
.gf-itinerary-page .gf-passenger-section-moved .main-content {
  margin-bottom: 2px !important;
}
.gf-itinerary-page .gf-passenger-section-moved .right-content:empty {
  display: none !important;
}

/* ---- Passenger list ---- */
.gf-itinerary-page .gf-passenger-section-moved .cart-passenger-list {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Each passenger row */
.gf-itinerary-page .gf-passenger-section-moved .PassengerNameItem {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 11px 0 !important;
  border-top: 1px solid var(--border) !important;
}
.gf-itinerary-page .gf-passenger-section-moved .cart-passenger-list .PassengerNameItem:first-of-type {
  border-top: none !important;
}

/* ---- Avatar circle — flat, single tone, no gradient ---- */
.gf-itinerary-page .gf-passenger-section-moved .ducp-component-initial-circle {
  flex: 0 0 auto !important;
  width: 34px !important;
  height: 34px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 12px !important;
  color: #fff !important;
  background: #A18F63 !important;
}
/* Infant row gets navy instead of gold */
.gf-itinerary-page .gf-passenger-section-moved .passenger-cart-item.INFANT .ducp-component-initial-circle {
  background: #A18F63 !important;
}
.gf-itinerary-page .gf-passenger-section-moved .ducp-component-initial-circle .spark-icon {
  color: #fff !important;
  font-size: 16px !important;
}

/* ---- Name + subtext column ---- */
.gf-itinerary-page .gf-passenger-section-moved .full-name {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 2px !important;
}
.gf-itinerary-page .gf-passenger-section-moved .passenger-name {
  font-family: inherit !important;
  font-size: 14px !important; 
  text-transform: none !important; /* source data is ALL CAPS */
}

/* Sub text: name, then Falconflyer number, then baggage pill — each own line */
.gf-itinerary-page .gf-passenger-section-moved .passenger-name-sub-text {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 4px !important;
}
.gf-itinerary-page .gf-passenger-section-moved .frequent-flyer {
  font-family: inherit !important;
  font-size: 12px !important;
  white-space: nowrap !important;
}


/* ---- Mobile ---- */
@media (max-width: 640px) {
  .gf-itinerary-page .gf-passenger-section-moved {
    flex-direction: column !important;
    align-items: stretch !important;
    padding: 18px 18px 14px !important;
  }
  .gf-itinerary-page .gf-passenger-section-moved .cart-view-title {
    width: 100% !important;
    flex: 0 0 auto !important;
    margin-bottom: 14px !important;
  }
  .gf-itinerary-page .gf-passenger-section-moved .passenger-cart-item {
    width: 100% !important;
    flex: 0 0 auto !important;
  }
  .gf-itinerary-page .gf-passenger-section-moved .passenger-cart-item.ADULT {
    margin-right: 0 !important;
    margin-bottom: 8px !important;
  }
}

/* ============================================================
   NEXT FLIGHT INFO MODAL
   SabreDxComponentCheckInSeatmapNextSegmentMessage
   ============================================================ */


/* MODAL WIDTH */
.spark-modal__content.MessagePopup:has(
    [data-translation="SabreDxComponentCheckInSeatmapNextSegmentMessage.nextFlightInfoTitle"]
) {
    width: 50% !important;
    max-width: 600px !important;

    margin-left: auto !important;
    margin-right: auto !important;
}


/* MODAL BODY */
.spark-modal__content.MessagePopup:has(
    [data-translation="SabreDxComponentCheckInSeatmapNextSegmentMessage.nextFlightInfoTitle"]
) .spark-modal__body {
    padding: 24px !important;
}


/* REMOVE DEFAULT CONTAINER STYLE */
.spark-modal__content.MessagePopup:has(
    [data-translation="SabreDxComponentCheckInSeatmapNextSegmentMessage.nextFlightInfoTitle"]
) .modal-container.info {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}


/* MAIN CONTENT */
.spark-modal__content.MessagePopup:has(
    [data-translation="SabreDxComponentCheckInSeatmapNextSegmentMessage.nextFlightInfoTitle"]
) .modal-content {
    background: transparent !important;
    border: none !important;
}


/* ============================================================
   HIDE ORIGINAL SABRE ICON
   ============================================================ */

.spark-modal__content.MessagePopup:has(
    [data-translation="SabreDxComponentCheckInSeatmapNextSegmentMessage.nextFlightInfoTitle"]
) .modal-message.modal-icon {
    display: none !important;
}


/* ============================================================
   TITLE
   ============================================================ */

.spark-modal__content.MessagePopup:has(
    [data-translation="SabreDxComponentCheckInSeatmapNextSegmentMessage.nextFlightInfoTitle"]
) .modal-heading {
    position: relative !important;

    margin: 0 0 14px 0 !important;
    padding: 8px 0 8px 54px !important;

    min-height: 40px !important;

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

    color: #00ABA8 !important;

    font-family: inherit !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
}


/* TURQUOISE CIRCLE + TICK */
.spark-modal__content.MessagePopup:has(
    [data-translation="SabreDxComponentCheckInSeatmapNextSegmentMessage.nextFlightInfoTitle"]
) .modal-heading::before {
    content: "\2713" !important;

    position: absolute !important;

    left: 0 !important;
    top: 50% !important;

    transform: translateY(-50%) !important;

    width: 38px !important;
    height: 38px !important;

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

    background: #DFF5F4 !important;

    border: 1px solid #00ABA8 !important;
    border-radius: 50% !important;

    color: #00ABA8 !important;

    font-family: Arial, sans-serif !important;
    font-size: 20px !important;
    font-weight: bold !important;

    line-height: 1 !important;
}


/* ============================================================
   MESSAGE BOX
   NO WARNING ICON
   ============================================================ */

.spark-modal__content.MessagePopup:has(
    [data-translation="SabreDxComponentCheckInSeatmapNextSegmentMessage.nextFlightInfoTitle"]
) #ducp-component-message-popup-message-body {
    position: relative !important;

    margin: 0 !important;

    padding: 14px 20px !important;

    background: var(--Yellow-100, #FFF3CD) !important;

    border: none !important;
    border-radius: 14px !important;

    color: #777 !important;

    font-family: inherit !important;
    font-size: inherit !important;
    font-weight: 400 !important;
    line-height: 1.35 !important;
}


/* IMPORTANT:
   NO ::before ICON FOR MESSAGE BODY */
.spark-modal__content.MessagePopup:has(
    [data-translation="SabreDxComponentCheckInSeatmapNextSegmentMessage.nextFlightInfoTitle"]
) #ducp-component-message-popup-message-body::before {
    content: none !important;
    display: none !important;
}


/* ============================================================
   BUTTON CONTAINER
   ============================================================ */

.spark-modal__content.MessagePopup:has(
    [data-translation="SabreDxComponentCheckInSeatmapNextSegmentMessage.nextFlightInfoTitle"]
) .button-container {
    display: flex !important;
    gap: 12px !important;

    margin-top: 18px !important;
    padding: 0 !important;
}


/* BOTH BUTTONS */
.spark-modal__content.MessagePopup:has(
    [data-translation="SabreDxComponentCheckInSeatmapNextSegmentMessage.nextFlightInfoTitle"]
) .modal-button {
    flex: 1 !important;

    min-width: 120px !important;

    padding: 12px 20px !important;

    font-family: inherit !important;
    font-weight: 600 !important;
}


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

@media (max-width: 600px) {

    .spark-modal__content.MessagePopup:has(
        [data-translation="SabreDxComponentCheckInSeatmapNextSegmentMessage.nextFlightInfoTitle"]
    ) {
        width: 90% !important;
        max-width: none !important;
    }


    .spark-modal__content.MessagePopup:has(
        [data-translation="SabreDxComponentCheckInSeatmapNextSegmentMessage.nextFlightInfoTitle"]
    ) .spark-modal__body {
        padding: 16px !important;
    }


    .spark-modal__content.MessagePopup:has(
        [data-translation="SabreDxComponentCheckInSeatmapNextSegmentMessage.nextFlightInfoTitle"]
    ) .modal-heading {
        padding-left: 48px !important;
    }


    .spark-modal__content.MessagePopup:has(
        [data-translation="SabreDxComponentCheckInSeatmapNextSegmentMessage.nextFlightInfoTitle"]
    ) #ducp-component-message-popup-message-body {
        padding: 12px 14px !important;
    }


    .spark-modal__content.MessagePopup:has(
        [data-translation="SabreDxComponentCheckInSeatmapNextSegmentMessage.nextFlightInfoTitle"]
    ) .button-container {
        flex-direction: column !important;
    }


    .spark-modal__content.MessagePopup:has(
        [data-translation="SabreDxComponentCheckInSeatmapNextSegmentMessage.nextFlightInfoTitle"]
    ) .modal-button {
        width: 100% !important;
    }
}


[data-component-id="SabreDxContainerCheckInSeatmap"] {
    margin-top: 2rem !important;
}

/* REMOVE INNER FLIGHT SUMMARY BOX */
.sabre-dx-page-check-in-itinerary
.sabre-dx-container-static[role='main']
.sabre-dx-component-check-in-flight-summary {
    box-shadow: none !important;
    border: none !important;
    border-radius: 0 !important;
    background: transparent !important;
}

h3.hazmat-title {
    border-bottom: 1px solid #d9d9d9 !important;
    padding-bottom: 12px !important;
    margin-bottom: 16px !important;
}

h3.hazmat-title {
    font-family: 'Oswald' !important;
    font-size: 25px !important;
    font-weight: 700 !important;
    line-height: normal !important;

    margin-top: 1.5rem !important;
    margin-bottom: 16px !important;
    padding-bottom: 12px !important;

    border-bottom: 1px solid #d9d9d9 !important;
}

.ducp-component-cart-panel-section .spark-panel {
    box-shadow: none !important;
}

.ducp-component-cart-panel-section .spark-panel__header {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08) !important;
}

[data-component-id="SabreDxContainerCheckInPassengerSummary"]
.ducp-component-panel-content {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06) !important;
}


/* Align all flight summary content with route title */
.sabre-dx-component-check-in-flight-summary
.flight-summary-title,
.sabre-dx-component-check-in-flight-summary
.flight-summary-content {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Remove extra inner column padding */
.sabre-dx-component-check-in-flight-summary
.flight-summary-content > .row > [class*="col-"] {
    padding-left: 0 !important;
}

/* Keep consistent spacing between sections */
.sabre-dx-component-check-in-flight-summary
.flight-summary-content > .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.sabre-dx-page-check-in-confirmation
.spark-panel__content.ducp-component-panel-content {
    padding: 2.5rem !important;
}

/* =========================================================
   SYSTEM ERROR POPUP - CUSTOM DESIGN
   ========================================================= */

.spark-modal__content.MessagePopup
:has([data-translation="SabreDxContainerSystemErrorMessage.Unable to complete requested operation"])
.modal-container.error
.spark-message--error {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}


/* Hide Sabre default error icon */
.spark-modal__content.MessagePopup
:has([data-translation="SabreDxContainerSystemErrorMessage.Unable to complete requested operation"])
.spark-message--error
.spark-message__icon {
    display: none !important;
}


/* Main content */
.spark-modal__content.MessagePopup
:has([data-translation="SabreDxContainerSystemErrorMessage.Unable to complete requested operation"])
.spark-message--error
.spark-panel__content {
    display: block !important;
    padding: 0 !important;
}


/* Error title */
.spark-modal__content.MessagePopup
:has([data-translation="SabreDxContainerSystemErrorMessage.Unable to complete requested operation"])
.spark-message__heading.title {
    position: relative !important;

    color: #d32f2f !important;
    font-weight: 600 !important;

    margin: 0 0 16px 0 !important;
    padding-left: 50px !important;

    min-height: 38px !important;

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

    font-family: inherit !important;
}


/* Custom red X circle */
.spark-modal__content.MessagePopup
:has([data-translation="SabreDxContainerSystemErrorMessage.Unable to complete requested operation"])
.spark-message__heading.title::before {
    content: "\00D7";

    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);

    width: 38px;
    height: 38px;

    border: 2px solid #d32f2f;
    border-radius: 50%;

    color: #d32f2f;

    font-size: 28px;
    font-weight: 400;
    line-height: 34px;
    text-align: center;

    box-sizing: border-box;
}


/* Yellow message box */
.spark-modal__content.MessagePopup
:has([data-translation="SabreDxContainerSystemErrorMessage.Unable to complete requested operation"])
.spark-message__content.content p {
    position: relative !important;

    margin: 0 !important;
    padding: 16px 18px 16px 48px !important;

    background: #FFF3CD !important;

    border: 0 !important;
    border-radius: 12px !important;

    color: #6b5b2a !important;

    font-family: inherit !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
}


/* Warning icon inside yellow box */
.spark-modal__content.MessagePopup
:has([data-translation="SabreDxContainerSystemErrorMessage.Unable to complete requested operation"])
.spark-message__content.content p::before {
    content: "\26A0";

    position: absolute;

    left: 16px;
    top: 16px;

    color: #d99b00;

    font-size: 18px;
    line-height: 1;
}


/* Technical information */
.spark-modal__content.MessagePopup
:has([data-translation="SabreDxContainerSystemErrorMessage.Unable to complete requested operation"])
.error-technical-info {
    display: block !important;

    margin-top: 8px !important;

    font-size: 12px !important;
    opacity: 0.75 !important;

    word-break: break-word !important;
}

@media (max-width: 767px) {

    .spark-modal__content.MessagePopup
    :has([data-translation="SabreDxContainerSystemErrorMessage.Unable to complete requested operation"])
    .spark-message__content.content p {
        padding: 12px 12px 12px 36px !important;
        line-height: 1.35 !important;

        white-space: normal !important;
        overflow-wrap: anywhere !important;
        word-break: break-word !important;

        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    .spark-modal__content.MessagePopup
    :has([data-translation="SabreDxContainerSystemErrorMessage.Unable to complete requested operation"])
    .spark-message__content.content p::before {
        left: 10px;
        top: 12px;
    }

    .spark-modal__content.MessagePopup
    :has([data-translation="SabreDxContainerSystemErrorMessage.Unable to complete requested operation"])
    .error-technical-info {
        display: block !important;
        margin-top: 6px !important;
        line-height: 1.25 !important;

        white-space: normal !important;
        overflow-wrap: anywhere !important;
        word-break: break-all !important;
    }
}

.sabre-dx-page-check-in-itinerary .sabre-dx-container-static[role='main'] {
    padding-left: 2rem !important;   /* Adjust this value for desired left space */
    padding-right: 2rem !important;  /* Balances the right side */
    box-sizing: border-box !important;
}
[dir] .spark-tabs__tab, [dir] .spark-tabs__btn {
	background-color: #f5f3ed;

}

[dir=ltr] .spark-tabs__tab::after {
	left: -1.75rem;
  /* transform: skew(-3deg); */

}

.sabre-dx-component-check-in-cart
span[data-translation="SabreDxComponentCheckInCart.views.passengers.title"] {
    margin-left: 1rem;
}


/* =========================================================
   ANCILLARY EXPANDED BOX - FULL WIDTH FIX
   ========================================================= */

.expanded-content .ancilliary-selection-view-container,
.expanded-content .ducp-component-ancillary-views,
.expanded-content .ducp-component-panel,
.expanded-content .spark-panel__content {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}


/* Main visible box */
.expanded-content
.ducp-component-panel.spark-panel.ducp-component-ancillary-views {
    border: 1px solid #ddd !important;
    border-radius: 0 !important;
    overflow: hidden !important;
}


/* Make sure content reaches right edge */
.expanded-content
.ducp-component-panel.spark-panel.ducp-component-ancillary-views
> .spark-panel__content {
    display: block !important;
    width: 100% !important;
    padding-right: 20px !important;
    box-sizing: border-box !important;
}


/* Prevent segment content from overflowing outside box */
.expanded-content .segment,
.expanded-content .flight-details,
.expanded-content .passengers,
.expanded-content .passenger-selection-row {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

.expanded-content .passenger-selection-row > label {
    flex: 1 1 auto !important;
    min-width: 0 !important;
	
}


.expanded-content
.ducp-component-panel.spark-panel.ducp-component-ancillary-views {
    box-shadow:none !important;
}

/* =========================================================
   SESSION TIMEOUT WARNING POPUP - FIXED COMPACT DESIGN
   ========================================================= */

/* Actual popup width */
.spark-modal__content.MessagePopup:has(
    [data-translation="SabreDxComponentCheckInSessionTimeout.warningPopUpTitle"]
) {
    width: 520px !important;
    max-width: calc(100vw - 32px) !important;
    min-width: 0 !important;
}


/* Popup body */
.spark-modal__content.MessagePopup:has(
    [data-translation="SabreDxComponentCheckInSessionTimeout.warningPopUpTitle"]
) .spark-modal__body {
    padding: 24px !important;
}


/* Remove default container styling */
.spark-modal__content.MessagePopup:has(
    [data-translation="SabreDxComponentCheckInSessionTimeout.warningPopUpTitle"]
) .modal-container.warning {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}


/* Remove default icon */
.spark-modal__content.MessagePopup:has(
    [data-translation="SabreDxComponentCheckInSessionTimeout.warningPopUpTitle"]
) .modal-icon {
    display: none !important;
}


/* Remove extra modal styling */
.spark-modal__content.MessagePopup:has(
    [data-translation="SabreDxComponentCheckInSessionTimeout.warningPopUpTitle"]
) .modal-content,
.spark-modal__content.MessagePopup:has(
    [data-translation="SabreDxComponentCheckInSessionTimeout.warningPopUpTitle"]
) .modal-content-main {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
}


/* =========================================================
   TITLE
   ========================================================= */

.spark-modal__content.MessagePopup:has(
    [data-translation="SabreDxComponentCheckInSessionTimeout.warningPopUpTitle"]
) .modal-heading {
    margin: 0 0 14px 0 !important;
    padding: 0 !important;

    font-size: 20px !important;
    line-height: 1.3 !important;
    font-weight: 600 !important;

    color: #A18F63 !important;
}


.spark-modal__content.MessagePopup:has(
    [data-translation="SabreDxComponentCheckInSessionTimeout.warningPopUpTitle"]
) .model-heading-text {
    margin: 0 !important;
    padding: 0 !important;
}


/* =========================================================
   MESSAGE BOX
   ========================================================= */

.spark-modal__content.MessagePopup:has(
    [data-translation="SabreDxComponentCheckInSessionTimeout.warningPopUpTitle"]
) #ducp-component-message-popup-message-body {
    display: block !important;

    width: 100% !important;
    box-sizing: border-box !important;

    background: #FFF3CD !important;
    color: #333 !important;

    padding: 14px 16px !important;
    margin: 0 !important;

    border: none !important;
    border-radius: 6px !important;
    box-shadow: none !important;

    font-size: 14px !important;
    line-height: 1.5 !important;
}


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

.spark-modal__content.MessagePopup:has(
    [data-translation="SabreDxComponentCheckInSessionTimeout.warningPopUpTitle"]
) .button-container {
    display: flex !important;
    justify-content: flex-end !important;
    gap: 10px !important;

    margin-top: 18px !important;
    padding: 0 !important;
}


/* Smaller buttons */
.spark-modal__content.MessagePopup:has(
    [data-translation="SabreDxComponentCheckInSessionTimeout.warningPopUpTitle"]
) .modal-button {
    width: auto !important;
    min-width: 120px !important;
    height: 42px !important;

    padding: 0 18px !important;
    border-radius: 6px !important;
}


/* Continue button */
.spark-modal__content.MessagePopup:has(
    [data-translation="SabreDxComponentCheckInSessionTimeout.warningPopUpTitle"]
) .warning-button {
    background: #A18F63 !important;
    border-color: #A18F63 !important;
    color: #fff !important;
}


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

@media (max-width: 600px) {

    .spark-modal__content.MessagePopup:has(
        [data-translation="SabreDxComponentCheckInSessionTimeout.warningPopUpTitle"]
    ) {
        width: calc(100vw - 24px) !important;
        max-width: calc(100vw - 24px) !important;
    }

    .spark-modal__content.MessagePopup:has(
        [data-translation="SabreDxComponentCheckInSessionTimeout.warningPopUpTitle"]
    ) .spark-modal__body {
        padding: 18px !important;
    }

    .spark-modal__content.MessagePopup:has(
        [data-translation="SabreDxComponentCheckInSessionTimeout.warningPopUpTitle"]
    ) .button-container {
        flex-direction: column-reverse !important;
    }

    .spark-modal__content.MessagePopup:has(
        [data-translation="SabreDxComponentCheckInSessionTimeout.warningPopUpTitle"]
    ) .modal-button {
        width: 100% !important;
    }
}

/* =========================================================
   LOUNGE ANCILLARY - COMPACT FRIENDLY EXPANDED BOX
   ========================================================= */


/* Remove all heavy inner styling */
.expanded-content .ancilliary-selection-view-container,
.expanded-content .ducp-component-ancillary-views,
.expanded-content .ducp-component-panel,
.expanded-content .spark-panel__content,
.expanded-content .ducp-component-panel-content {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}


/* Main content spacing */
.expanded-content .ancilliary-selection-view-container {
    padding: 12px 14px 6px !important;
}


/* Each flight */
.expanded-content .segment {
    padding: 10px 0 12px !important;
    margin: 0 !important;
}


/* Divider only between flights */
.expanded-content .segment + .segment {
    border-top: 1px solid #eee !important;
}


/* =========================================================
   ROUTE
   ========================================================= */


/* Route in one clean row */
.expanded-content .ducp-component-from-to.ducp-component-flight-route {
    display: grid !important;
    grid-template-columns: 1fr auto 1fr !important;
    align-items: center !important;
    gap: 8px !important;
}


/* Airport names */
.expanded-content .ducp-component-airport {
    font-size: 13px !important;
    line-height: 1.35 !important;
    font-weight: 500 !important;
    color: #26354a !important;
}




.expanded-content .separator .spark-icon {
    font-size: 15px !important;
    color: #A18F63 !important;
}






/* =========================================================
   PASSENGER ROW
   ========================================================= */



/* Make passenger item compact */
.expanded-content .ducp-component-passenger-name-item {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}


/* Smaller initials circle */
.expanded-content .ducp-component-initial-circle.light {
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    line-height: 30px !important;
    font-size: 12px !important;
}


/* Passenger name */
.expanded-content .passenger-name {
    font-size: 13px !important;
    font-weight: 500 !important;
    color: #24324a !important;
    white-space: nowrap !important;
}



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

@media (max-width: 768px) {

    .expanded-content .ancilliary-selection-view-container {
        padding: 10px 12px 4px !important;
    }

    .expanded-content .segment {
        padding: 9px 0 11px !important;
    }

}

/* =========================================================
  Hazmat 
   ========================================================= */



[dir] .Hazmat .default-hazmat-template .icons .hazmat-1 {
  background: url(../images/sabre-dx-component-check-in-hazmat/hazmat.png) no-repeat center 12.814%;
}
[dir] .Hazmat .default-hazmat-template .icons .hazmat-3 {
  background: url(../images/sabre-dx-component-check-in-hazmat/hazmat.png) no-repeat center 33.82%;
}

[dir] .Hazmat .default-hazmat-template .icons .hazmat-6 {
  background: url(../images/sabre-dx-component-check-in-hazmat/hazmat.png) no-repeat center 67.28%;
}

[dir] .Hazmat .default-hazmat-template .icons .hazmat-9 {
  background: url(../images/sabre-dx-component-check-in-hazmat/hazmat.png) no-repeat center 99.539%;
}

[dir] .Hazmat .default-hazmat-template .icons .hazmat-icon {
  border: none !important;
  
}



.Hazmat .default-hazmat-template .icons .icon-text {
  position: absolute;
  bottom: 0.2rem;
  white-space: pre-wrap;
  line-height: 1.5rem;
    height: 3rem; /* space for 2 lines */
  display: flex;
  align-items: flex-start;
    justify-content: center;

}


/* Hazardous Material icon boxes */
.Hazmat .default-hazmat-template .icons .hazmat-icon {
    position: relative !important;
    height: 120px !important;
    box-sizing: border-box !important;
}

/* Hazardous Material labels */
.Hazmat .default-hazmat-template .icons .icon-text {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 6px !important;
    width: 100% !important;
    max-width: none !important;
    text-align: center !important;
    white-space: normal !important;
    line-height: 1.5rem !important;
    font-size: 14px !important;
    padding: 0 5px !important;
    box-sizing: border-box !important;
    transform: none !important;
}

/* Keep text itself centered */
.Hazmat .default-hazmat-template .icons .icon-text span {
    display: block !important;
    text-align: center !important;
}

/* =========================================================
   BASSINET ICON - LEGEND
   ========================================================= */

.legend-item-row .legend-icon .seat-map-icon.BASSINET {
    background-image: url("https://dmcc-p-001.sitecorecontenthub.cloud/api/public/content/d5a47133b7b140c69c210aef860dede1?v=590d4e77") !important;

}

/* =========================================================
    ICON - LEGEND
   ========================================================= */

[dir=ltr] .SeatMapLegend .seat-map-icon.PREMIUM, [dir=ltr] .SeatMapLegend .seat-map-icon.seat-pay {
	background: #52B4AB !important;
   
	border-radius: 8px !important;


}

[dir] .seat-map-slot.is-seat > div[class*=-selected], [dir] .SeatMapLegend .seat-map-icon.SELECTED {
	background: #AD9D73 !important;
	border-radius: 8px !important;

}


.SeatMapLegend .legend-item-row .legend-icon .seat-map-icon.REGULAR {
    background: #FFC107 !important;
	border-radius: 8px !important;
}


[dir=ltr] .SeatMapLegend .seat-map-icon.SEAT-EXIT,
[dir=ltr] .SeatMapLegend .seat-map-icon.seat-exit {
    background: #F86A42 !important;
    background-image: none !important;
	border-radius: 8px !important;
}


[dir=ltr] .SeatMapLegend .seat-map-icon.RESERVED,
[dir=ltr] .SeatMapLegend .seat-map-icon.seat-unavailable {
    background: rgb(233, 233, 233) !important;
    border-radius: 8px !important;
}

/* =========================================================
    ICON - LEGEND
   ========================================================= */

#dxci-page-title h1:not(
    :has([data-translation="SabreDxContainerPageTitle.checkIn.start"])
) {
    font-family: 'Oswald' !important;
    font-size: 25px !important;
    font-weight: 700 !important;
    width: 100% !important;
    display: block !important;
}


span.ducp-component-initial-circle.top.light {
    background: #ffffff !important;
    color: #4a5767 !important;
}

.ducp-component-initial-circle.light {
    background: #ffffff !important;
    color: #4a5767 !important;
}


/* =========================================================
   WARNING ICON - DESKTOP + MOBILE
   ========================================================= */

span.spark-icon.spark-icon-alert-triangle.spark-message__icon.ducp-component-icon {
    background: none !important;
    background-image: none !important;
    border: none !important;

    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    min-height: 24px !important;

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

    position: relative !important;

    font-size: 0 !important;
    line-height: 1 !important;
    overflow: visible !important;
}

/* Remove Sabre default icon */
span.spark-icon.spark-icon-alert-triangle.spark-message__icon.ducp-component-icon::before {
    content: "\26A0" !important;

    display: block !important;

    color: #CC9A06 !important;

    font-family: Arial, sans-serif !important;
    font-size: 22px !important;
    font-weight: 400 !important;
    line-height: 32px !important;

    width: 24px !important;
    height: 24px !important;

    position: static !important;
    transform: none !important;

    background: transparent !important;
    border: 0 !important;
}

/* =========================================================
   SEAT MAP LEGEND - SMALLER ICONS ON MOBILE
   ========================================================= */
@media (max-width: 768px) {

    .SeatMapLegend .legend-icon .seat-map-icon {
        width: 28px !important;
        height: 28px !important;
        min-width: 28px !important;
        min-height: 28px !important;
    }

}

/* =========================================================
   787 ONLY - TIGHTER SEAT SPACING
   ========================================================= */

.seat-map[data-first-row="20"][data-last-row="54"]
.seat-map-icon:not(.facility):not(.exit) {
    min-width: 27px !important;
    border-radius: 7px !important;
}

.seat-map[data-first-row="20"][data-last-row="54"]
td.seat-map-slot {
    padding: 1px !important;
}

.seat-map[data-first-row="20"][data-last-row="54"]
table {
    border-spacing: 1px !important;
    border-collapse: separate !important;
}


/* Missing bulkhead line - Seat E only */
div[data-booking-class="Y"][data-first-row="8"]
tr.seat-row.is-facility-row:has(
    > td:nth-child(6).is-facility .BULKHEAD
)
> td.seat-map-slot:nth-child(7):not(.is-facility):has(
    + td.is-facility .BULKHEAD
)::before {
    content: "" !important;
    display: block !important;
    width: 24px !important;
    height: 3px !important;
    background: #aaa !important;
    margin: 0 auto !important;
    transform: translateY(10px) !important;
	transform: translateY(11px) !important;
}

.SeatMapLegend .legend-text:has(
    [data-translation="SabreDxComponentCheckInSeatmap.legendItem.SEAT_EXIT"]
) {
    line-height: 12px !important;
    text-align: center !important;
    margin-top: 6px !important;
}

/* =========================================================
   DXCI - SESSION TIMEOUT WARNING ONLY
   ========================================================= */

/* Hide original Sabre icon */
.spark-modal__content.MessagePopup:has(
    [data-translation="SabreDxComponentCheckInSessionTimeout.warningPopUpTitle"]
) .modal-heading .modal-icon {
    display: none !important;
}

/* Warning title */
.spark-modal__content.MessagePopup:has(
    [data-translation="SabreDxComponentCheckInSessionTimeout.warningPopUpTitle"]
) .modal-heading {
    position: relative !important;
    display: flex !important;
    align-items: center !important;

    padding: 8px 0 8px 54px !important;
    min-height: 40px !important;

    color: #CC9A06 !important;
    font-weight: 600 !important;
}

/* Ensure title text has correct color */
.spark-modal__content.MessagePopup:has(
    [data-translation="SabreDxComponentCheckInSessionTimeout.warningPopUpTitle"]
) .model-heading-text,
.spark-modal__content.MessagePopup:has(
    [data-translation="SabreDxComponentCheckInSessionTimeout.warningPopUpTitle"]
) .model-heading-text span {
    color: #CC9A06 !important;
}

/* Custom warning icon beside title */
.spark-modal__content.MessagePopup:has(
    [data-translation="SabreDxComponentCheckInSessionTimeout.warningPopUpTitle"]
) .modal-heading::before {
    content: "\00D7" !important;
    position: absolute !important;
    left: 0 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;

    width: 38px !important;
    height: 38px !important;

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

    background: #FDE3E6 !important;

    border: 1px solid #E6293D !important;
    border-radius: 50% !important;

    color: #E6293D !important;

    font-family: Arial, sans-serif !important;
    font-size: 24px !important;
    font-weight: 400 !important;

    line-height: 1 !important;
}



/* Warning icon inside yellow message box */
.spark-modal__content.MessagePopup:has(
    [data-translation="SabreDxComponentCheckInSessionTimeout.warningPopUpTitle"]
) #ducp-component-message-popup-message-body {
    position: relative !important;
    padding: 14px 20px 14px 54px !important;
}

.spark-modal__content.MessagePopup:has(
    [data-translation="SabreDxComponentCheckInSessionTimeout.warningPopUpTitle"]
) #ducp-component-message-popup-message-body::before {
    content: "\26A0" !important;

    position: absolute !important;
    left: 17px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;

    color: #CC9A06 !important;
    font-family: Arial, sans-serif !important;
    font-size: 22px !important;
    line-height: 1 !important;

    display: block !important;
	}



/* =========================================================
   SESSION TIMEOUT - FORCE RED TITLE
   ========================================================= */

.spark-modal__content.MessagePopup
.modal-container.warning
.modal-heading,
.spark-modal__content.MessagePopup
.modal-container.warning
.modal-heading .model-heading-text,
.spark-modal__content.MessagePopup
.modal-container.warning
.modal-heading [data-translation="SabreDxComponentCheckInSessionTimeout.warningPopUpTitle"] {
    color: #E6293D !important;
    -webkit-text-fill-color: #E6293D !important;
}


/* =========================================================
   DXCI - SESSION TIMEOUT WARNING - MOBILE ONLY
   ========================================================= */

@media (max-width: 767px) {

    /* Popup width */
    .spark-modal__content.MessagePopup:has(
        [data-translation="SabreDxComponentCheckInSessionTimeout.warningPopUpTitle"]
    ) {
        width: 92% !important;
        max-width: 400px !important;
        margin: auto !important;
    }

    /* Popup inner padding */
    .spark-modal__content.MessagePopup:has(
        [data-translation="SabreDxComponentCheckInSessionTimeout.warningPopUpTitle"]
    ) .spark-modal__body {
        padding: 20px !important;
    }

    /* Title */
    .spark-modal__content.MessagePopup:has(
        [data-translation="SabreDxComponentCheckInSessionTimeout.warningPopUpTitle"]
    ) .modal-heading {
        font-size: 18px !important;
        line-height: 1.3 !important;
        margin-bottom: 14px !important;
    }

    /* Yellow message box */
    .spark-modal__content.MessagePopup:has(
        [data-translation="SabreDxComponentCheckInSessionTimeout.warningPopUpTitle"]
    ) #ducp-component-message-popup-message-body {
        padding: 14px 12px 14px 42px !important;
        text-align: left !important;
        font-size: 13px !important;
        line-height: 1.5 !important;
        border-radius: 8px !important;
    }

    /* Warning icon alignment */
    .spark-modal__content.MessagePopup:has(
        [data-translation="SabreDxComponentCheckInSessionTimeout.warningPopUpTitle"]
    ) #ducp-component-message-popup-message-body::before {
        left: 12px !important;
        font-size: 19px !important;
    }

    /* Buttons container */
    .spark-modal__content.MessagePopup:has(
        [data-translation="SabreDxComponentCheckInSessionTimeout.warningPopUpTitle"]
    ) .button-container {
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
        margin-top: 18px !important;
        padding: 0 !important;
    }

    /* Both buttons */
    .spark-modal__content.MessagePopup:has(
        [data-translation="SabreDxComponentCheckInSessionTimeout.warningPopUpTitle"]
    ) .modal-button {
        width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        height: 44px !important;
    }

    /* Continue first */
    .spark-modal__content.MessagePopup:has(
        [data-translation="SabreDxComponentCheckInSessionTimeout.warningPopUpTitle"]
    ) .warning-button {
        order: 1 !important;
    }

    /* Cancel second */
    .spark-modal__content.MessagePopup:has(
        [data-translation="SabreDxComponentCheckInSessionTimeout.warningPopUpTitle"]
    ) .secondary-button {
        order: 2 !important;
    }
}

/* Replace Note Icon */
span.spark-icon.spark-icon-note.spark-message__icon {
    background-image: url("https://dmcc-p-001.sitecorecontenthub.cloud/api/public/content/9d731e521ec342aca3591efb5dcb3e2b?v=d530980e") !important;
    background-size: contain !important;
    background-color: transparent !important;
    border: none !important;
    height: 24px !important;
    min-width: 24px !important;
    position: relative !important;
    top: 5px !important;
    min-height: 24px !important;
    /* Remove default icon */
    font-size: 0 !important;
    background-repeat: no-repeat !important;
}

span.spark-icon.spark-icon-note.spark-message__icon::before,
span.spark-icon.spark-icon-note.spark-message__icon::after {
    content: none !important;
}

/* ==========================================
   SEAT MAP – B787 Bassinet Alignment
   ========================================== */

.seat-map[data-first-row="20"][data-last-row="54"]
.facility.seat-map-icon.BASSINET {
    top: 8px !important;
    right: 0px !important;
    
}

/* ==========================================
   SEAT MAP – B787 Bassinet Alignment (Mobile)
   ========================================== */

@media (max-width: 768px) {

    .seat-map[data-first-row="20"][data-last-row="54"]
    .facility.seat-map-icon.BASSINET {
        position: absolute !important;
        top: -2px !important;
        right: -1px !important;
    }

    .seat-map[data-first-row="20"][data-last-row="54"]
    .facility.seat-map-icon.BASSINET::after {
        width: 18px !important;
        height: 18px !important;
        background-position: center !important;
    }
}
/* B787 - Improve mobile seat alignment */
@media screen and (max-width: 374px) {

  .seat-map[data-first-row="20"][data-last-row="54"]
  .seat-map-icon:not(.facility):not(.exit) {
    width: 22px !important;
    min-width: 22px !important;
    height: 24px !important;
    margin: 2px !important;
    box-sizing: border-box !important;
  }

  .seat-map[data-first-row="20"][data-last-row="54"]
  .seat-map-slot {
    padding: 1px !important;
    text-align: center !important;
  }

}
/* B787 Seat Map - Mobile Only */
@media screen and (max-width: 768px) {

  .seat-map-cabin-group[data-equipment="789"]
  .seat-map[data-first-row="20"][data-last-row="54"]
  .seat-map-icon:not(.facility):not(.exit) {
    margin: -1px !important;
  }

}
/* ==========================================
   DXCI – Hide Trip Summary on Tablet
   ========================================== */

@media screen and (min-width: 961px) and (max-width: 1100px) {

    /* Hide Trip Summary */
    .sabre-dx-container-check-in-cart {
        display: none !important;
    }
}

.Seatmap td.column-left-side.exit,
.Seatmap td.column-right-side.exit {
  vertical-align: middle !important;
  text-align: center !important;
}

/* ========================================
   B787-9 – Seat visual spacing
   ======================================== */

.seat-map-cabin-group[data-equipment="789"]
.seat-map-slot.is-seat
.seat-map-icon.seat {
    transform: scale(0.9) !important;
    transform-origin: center center !important;
	}
/* ========================================
   B787-9 – Mobile only
   Bigger seat squares
   Keep spacing between seats consistent
   ======================================== */

@media (max-width: 767px) {

    .seat-map-cabin-group[data-equipment="789"] .seat-map-slot.is-seat {
        height: 34px !important;
        padding: 2px !important;
    }

    .seat-map-cabin-group[data-equipment="789"] .seat-map-slot.is-seat .seat-map-icon.seat,
    .seat-map-cabin-group[data-equipment="789"] .seat-map-slot.is-seat .spark-popover__toggle.seat-map-icon.seat-cell-wrapper {
        height: 30px !important;
        min-width: 29px !important;
    }

}

.spark-message__content.content {
    font-size: 13px !important;
}

/* ========================================
   MOBILE – Compact Flight Tabs
   ======================================== */

@media (max-width: 967px) {

    .spark-tabs__nav.scrollable {
        padding: 0 100%x !important;
        overflow: visible !important;
    }

    .spark-tabs__scroll {
        width: 100% !important;
        overflow: visible !important;
    }

    .spark-tabs__list {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 4px !important;
    }

    .spark-tabs__tab {
        width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
    }

    .spark-tabs__tab > a {
        padding: 6px 5px !important;
        min-height: 48px !important;

     
    }