@font-face {
  font-family: 'FunShip';
  src: url(../fonts/FunShip-Regular.woff2) format('woff2');
  font-style: normal;
}

@font-face {
  font-family: 'Carnival Instrument Sans';
  src: url(../fonts/CarnivalInstrumentSans.ttf) format('truetype');
  font-style: normal;
}

@font-face {
  font-family: 'Inter';
  src: url(../fonts/Inter-Variable.woff2) format('woff2');
  font-weight: 100 900;
  font-style: normal;
}

/*
 * Carnival brand fonts (PBS).
 * `html:root` is used deliberately instead of `:root` so this definition always wins
 * the specificity tie against the externally-hosted shared header/footer bundle's own
 * plain `:root { --font-family-* }` fallback block, regardless of stylesheet load order.
 */
html:root {
  --font-family-header: 'FunShip', Arial, sans-serif;
  --font-family-subheader: 'Carnival Instrument Sans', Arial, sans-serif;
  --font-family-content: 'Inter', Arial, sans-serif;

  /* cclr-components public compatibility shim (opaque names by design). */
  --font-family-open_sans: var(--font-family-content);
  --font-family-tempo_std-heavycondensed: var(--font-family-header);
}

/* ===========================================================================
 * PBS Figma typographic scale (PBS / Credit Card Overlay / Upgrade Confirmation)
 * ---------------------------------------------------------------------------
 * Exact values taken from the three Figma redlines. Percent letter-spacing values
 * are converted to px per the migration guidance: px = (percent / 100) * font-size.
 *
 *   H1                FunShip          40/48 / 0%      (mobile 28/32 / 0%)
 *   H3                Inter            20/28 / 0.3%    (mobile 18/28 / 0.3%)
 *   Paragraph Large   Inter            16/20 / -0.3%
 *   Paragraph Medium  Inter            14/20 / 0.5%
 *   Paragraph Small   Inter            12/16 / 1%
 *   Button            Instrument Sans  18/24 / 1%
 *   Link              Inter            14/20 / -0.3%
 *
 * Covers the annotated screens: "Your Upgrade Offers" (SelectUpgradeOffer:
 * itinerary header, Cabin Upgrade Total box, sidebar, offer cards, CTAs),
 * "Confirm Your Room Upgrade" (Payment/Summary: H1, YOUR STATEROOM table,
 * TEST PBSTEST row, TOTAL UPGRADE COST) and "Upgrade Confirmation" (the
 * BookedGuest `.booking-complete` markup also styled in
 * BookedGuest-3.0.css: CONGRATS / UPGRADE INFORMATION H1, UPGRADE DETAIL H3,
 * stateroom table, green-arrow list, MANAGE MY CRUISE button).
 *
 * Converted letter-spacing (desktop):
 *   0.3% of 20px  -> 0.06px     0.3% of 18px  -> 0.054px
 *   -0.3% of 16px -> -0.048px   -0.3% of 14px -> -0.042px
 *   0.5% of 14px  -> 0.07px     1% of 12px    -> 0.12px
 *   1% of 18px    -> 0.18px
 *
 * This sheet is linked as the LAST stylesheet in the shared layouts' <head>,
 * so these rules win same-specificity ties by source order; the `html` prefix
 * raises specificity above the component/vendor rules.
 * =========================================================================== */

/* --- H1: FunShip 40/48 / 0%, mobile 28/32 / 0% --------------------------- */
html .ssc-content__title,
html .ssc-content__title-payment,
html .tglp-heading__title,
html .common-h1,
html .booking-complete h1,
html .booking-complete .check-message h1,
html .booking-complete h2,
html .booking-complete .header-box h2,
html .booking-complete.all h2 {
  font-family: var(--font-family-header);
  font-size: 40px;
  line-height: 48px;
  font-weight: 400;
  letter-spacing: 0;
}

/* --- H3: Inter 20/28 / 0.3%, mobile 18/28 / 0.3% ------------------------- */
html .cwt-text-block__middle,
html .cwt-text-block__bottom--large,
html .summary-head .head-title,
html .summary-base .strong,
html .summary-base .total-value,
html .selected-price-point-pricing-amount,
html .booking-complete h3 {
  font-family: var(--font-family-content);
  font-size: 20px;
  line-height: 28px;
  font-weight: 700;
  letter-spacing: 0.06px;
}

/* --- Paragraph Large: Inter 16/20 / -0.3% -------------------------------- */
html .summary-head .head-sup,
html .summary-base .simple,
html .component-cruise-glance .cruise-glance .destination-title .ship-name,
html .component-cruise-glance .cruise-glance .date-range,
html .booking-complete .booking-complete-check-message p,
html .booking-complete p,
html .booking-complete .reservation-content,
html .booking-complete .section table.upgrade-details,
html .booking-complete table.summary,
html .booking-complete table.summary td {
  font-family: var(--font-family-content);
  font-size: 16px;
  line-height: 20px;
  font-weight: 400;
  letter-spacing: -0.048px;
}

html .gi-heading-description,
html .booking-complete .check-message p {
  font-family: var(--font-family-content);
  font-size: 16px;
  line-height: 20px;
  font-weight: 600;
  letter-spacing: -0.048px;
}

html .summary-base .value,
html .summary-head .head-sub,
html .cwt-text-block__bottom,
html #select-type-content .cwt-text-block__bottom,
html .component-cruise-glance .cruise-glance .destination-title .itin-name,
html .booking-complete ul.green-arrow li,
html .booking-complete .section table.upgrade-details .heading-title,
html .booking-complete table.summary td.label {
  font-family: var(--font-family-content);
  font-size: 16px;
  line-height: 20px;
  font-weight: 700;
  letter-spacing: -0.048px;
}

/* --- Paragraph Medium: Inter 14/20 / 0.5% -------------------------------- */
html .cwt-text-block__upper {
  font-family: var(--font-family-content);
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
  letter-spacing: 0.07px;
}

/* Left "Your Deal" sidebar labels (SideNavigation): Paragraph Small 12/16 / 1%.
 * The .snb-component__subtitle values keep their own styling. */
html .snb-component__title {
  font-family: var(--font-family-content);
  font-size: 12px;
  line-height: 16px;
  font-weight: 400;
  letter-spacing: 0.12px;
}

html .snb-component__subtitle {
  font-family: var(--font-family-content);
  font-size: 14px;
  line-height: 20px;
  font-weight: 700;
  letter-spacing: 0.07px;
}

html .pavgp-component__label,
html .common-list__item.shs-list-item,
html .selected-price-point-pricing-cabin,
html .selected-price-point-pricing-total {
  font-family: var(--font-family-content);
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
  letter-spacing: 0.07px;
}

html .pavgp-price__currency,
html .pavgp-price__amount {
  font-family: var(--font-family-content);
  font-size: 14px;
  line-height: 20px;
  font-weight: 700;
  letter-spacing: 0.07px;
}

/* --- Paragraph Small: Inter 12/16 / 1% ----------------------------------- */
html .crc-component .ext-component-container,
html .ext-component--gray,
html .ext-component--gray .ext-component-container {
  font-family: var(--font-family-content);
  font-size: 12px;
  line-height: 16px;
  font-weight: 400;
  letter-spacing: 0.12px;
}

/* Checklist / deal list items (OfferBox offer items): Paragraph Medium Regular 14/20 / 0.5% */
html .common-list__text--deal,
html .common-list__text.shs__list-text {
  font-family: var(--font-family-content);
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
  letter-spacing: 0.07px;
}

html .imw-info__text {
  font-family: var(--font-family-content);
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
  letter-spacing: 0.12px;
}

/* ===========================================================================
 * PBS "Choose Your New Location" (SectionSelection) typography
 * ---------------------------------------------------------------------------
 *   back / middle / front   FunShip          28/32 / 0%    (mobile 20/24 / 0%)
 *   location description     Paragraph Small  Inter 12/16 / 1%
 *   Sold Out                 Paragraph Large  Inter 16/20 / 0.3% (0.048px)
 * =========================================================================== */

/* back / middle / front: FunShip 28/32 / 0% (mobile 20/24 / 0%) */
html .ssg-header__title {
  font-family: var(--font-family-header);
  font-size: 28px;
  line-height: 32px;
  font-weight: 400;
  letter-spacing: 0;
}

/* Location description: Paragraph Small Inter 12/16 / 1% */
html .ssg-header__description {
  font-family: var(--font-family-content);
  font-size: 12px;
  line-height: 16px;
  font-weight: 400;
  letter-spacing: 0.12px;
}

/* Sold Out: Paragraph Large Inter 16/20 / 0.3% (0.048px) */
html .ssg-footer__sold-out {
  font-family: var(--font-family-content);
  font-size: 16px;
  line-height: 20px;
  letter-spacing: 0.048px;
}

@media (max-width: 767px) {
  html .ssg-header__title {
    font-size: 20px;
    line-height: 24px;
  }
}

/* Location card price (Choose Your New Location): Inter 20/28 / 0.3% (0.06px)
 * (mobile S/XS: 18/28 / 0.3% (0.054px)) */
html .ssg-price-change__item--price,
html .ssg-price-change__item--price .price,
html .ssg-price__amount.price,
html .ssg-price__currency {
  font-family: var(--font-family-content);
  font-size: 20px;
  line-height: 28px;
  letter-spacing: 0.06px;
}

/* ===========================================================================
 * PBS "Choose Your New Deck" (Deck) typography
 * ---------------------------------------------------------------------------
 *   selected deck card price  Inter 24/32 / 0%  - M and up; 22/32 / 0% S/XS
 *   deck # ("Deck 9")         Inter 14/20 / 0.5% (0.07px) Bold
 *   deck name ("Lido")        Inter 12/16 / 1%   (0.12px)
 *   deck row price            Inter 16/20 / 0.3% (0.048px) Regular
 * =========================================================================== */

/* Selected deck card price: Inter 24/32 / 0% (M and up); 22/32 / 0% (S/XS) */
html .ded-deck-description__right {
  font-family: var(--font-family-content);
  font-size: 24px;
  line-height: 32px;
  letter-spacing: 0;
}

@media (max-width: 767px) {
  html .ded-deck-description__right {
    font-size: 22px;
    line-height: 32px;
    letter-spacing: 0;
  }
}

/* Deck # ("Deck 9"): Inter 14/20 / 0.5% Bold */
html .ded-breadcrumbs__item--bold {
  font-family: var(--font-family-content);
  font-size: 14px;
  line-height: 20px;
  font-weight: 700;
  letter-spacing: 0.07px;
}

/* Deck name ("Lido", "Verandah"): Inter 12/16 / 1% */
html .ded-breadcrumbs__item--small {
  font-family: var(--font-family-content);
  font-size: 12px;
  line-height: 16px;
  font-weight: 400;
  letter-spacing: 0.12px;
}

/* Vertical centering for the deck breadcrumb items: the token line-heights
 * above (20px/16px) would otherwise pin the single line of text to the top of
 * the 45px bar. Flex centering keeps the required line-heights while aligning
 * the content. gap restores the space between "Deck" and its number, which
 * flexbox strips. */
html .ded-breadcrumbs__item--bold,
html .ded-breadcrumbs__item--small {
  display: flex;
  align-items: center;
}

html .ded-breadcrumbs__item--bold {
  gap: 4px;
}

/* Bootstrap's global label rule adds margin-bottom: 5px, which offsets the
 * deck number inside the vertically-centered breadcrumb item. Reset it here. */
html .ded-breadcrumbs__item--bold label {
  margin-bottom: 0;
}

/* Deck row price: Inter 16/20 / 0.3% Regular */
html .ded-price,
html .ded-price__currency {
  font-family: var(--font-family-content);
  font-size: 16px;
  line-height: 20px;
  font-weight: 400;
  letter-spacing: 0.048px;
}

/* Deck rooms left ("3 Rooms Left"): Inter 14/20 / 0.5% Bold */
html .ded-deck__rooms {
  font-family: var(--font-family-content);
  font-size: 14px;
  line-height: 20px;
  font-weight: 700;
  letter-spacing: 0.07px;
}

/* Selected deck card title ("Deck 10 Panorama"): FunShip 28/32 / 0%.
 * Mobile S/XS: FunShip 20/24 / 0%. */
html .ded-deck__title {
  font-family: var(--font-family-header);
  font-size: 28px;
  line-height: 32px;
  font-weight: 400;
  letter-spacing: 0;
}

@media (max-width: 767px) {
  html .ded-deck__title {
    font-size: 20px;
    line-height: 24px;
  }
}

/* Location card price mobile override: Inter 18/28 / 0.3% (0.054px) */
@media (max-width: 767px) {
  html .ssg-price-change__item--price,
  html .ssg-price-change__item--price .price,
  html .ssg-price__amount.price,
  html .ssg-price__currency {
    font-size: 18px;
    line-height: 28px;
    letter-spacing: 0.054px;
  }
}

/* --- Button: Instrument Sans 18/24 / 1% ---------------------------------- */
html .nsn-component__button,
html .nsn-component__button--red,
html .nsn-component__button--grey,
html .nsn-component__button .common-link-with-arrow__text,
html .common-button,
html .cam-list__button,
html .tty-button,
html .sff-component__button,
html .booking-complete a.manage-my-cruise-btn {
  font-family: var(--font-family-subheader);
  font-size: 18px;
  line-height: 24px;
  font-weight: 600;
  letter-spacing: 0.18px;
}

/* --- Link: Inter 14/20 / -0.3%, underlined ------------------------------- */
html .nsn-component__button.declineAllOffers .common-link-with-arrow__text,
html .common-outlined-cta__change-option {
  font-family: var(--font-family-content);
  font-size: 14px;
  line-height: 20px;
  font-weight: 700;
  letter-spacing: -0.042px;
  text-decoration: underline;
}

/* "More" expandable link (RoomCard): 1% letter-spacing (12px -> 0.12px) */
html .common-link-with-arrow__text {
  letter-spacing: 0.12px;
}

/* --- Itinerary letter-spacing reset (Figma -0.3%, not the legacy 1px) ----- */
html .component-cruise-glance,
html .component-cruise-glance .cruise-glance .destination-title {
  letter-spacing: normal;
}

/* --- Mobile overrides ---------------------------------------------------- */
@media (max-width: 767px) {
  html .ssc-content__title,
  html .ssc-content__title-payment,
  html .tglp-heading__title,
  html .common-h1,
  html .booking-complete h1,
  html .booking-complete .check-message h1,
  html .booking-complete h2,
  html .booking-complete .header-box h2,
  html .booking-complete.all h2 {
    font-size: 28px;
    line-height: 32px;
    letter-spacing: 0;
  }

  html .cwt-text-block__middle,
  html .cwt-text-block__bottom--large,
  html .summary-head .head-title,
  html .summary-base .strong,
  html .summary-base .total-value,
  html .selected-price-point-pricing-amount,
  html .booking-complete h3 {
    font-size: 18px;
    line-height: 28px;
    letter-spacing: 0.054px;
  }

  /* Room card title ("Balcony"): keep Paragraph Large 16/20 / 0.3% (0.048px)
   * on S/XS so all breakpoints are consistent (desktop already wins this via
   * the .cwt-text-block__bottom rule). */
  html .cwt-text-block__bottom--large.crc-component__title {
    font-size: 16px;
    line-height: 20px;
    letter-spacing: -0.048px;
  }
}

/* ===========================================================================
 * PBS room map legend (Choose Your New Room)
 *   Available / Selected / Connecting Rooms  Inter 12/16 / 1% Regular
 * =========================================================================== */
html .crm-reference,
html .crm-reference .common-middle-inline__item {
  font-family: var(--font-family-content);
  font-size: 12px;
  line-height: 16px;
  font-weight: 400;
  letter-spacing: 0.12px;
}

/* ===========================================================================
 * PBS "Something Went Wrong" modal
 *   title  H1             FunShip 40/48 / 0%  (mobile 28/32 / 0%)
 *   body   Paragraph Large Inter 16/20 / 0.3% (0.048px)
 *   CTA    Button         Instrument Sans 18/24 / 1% (0.18px)
 * =========================================================================== */

/* "Something Went Wrong" heading: FunShip 40/48 / 0% */
html .err-title {
  font-family: var(--font-family-header);
  font-size: 40px;
  line-height: 48px;
  font-weight: 400;
  letter-spacing: 0;
}

/* Descriptive text: Paragraph Large Inter 16/20 / 0.3% (0.048px) */
html .err-msg {
  font-family: var(--font-family-content);
  font-size: 16px;
  line-height: 20px;
  font-weight: 400;
  letter-spacing: 0.048px;
}

/* CTA ("Continue"): Button Instrument Sans 18/24 / 1% */
html .err-cta,
html .err-cta a {
  font-family: var(--font-family-subheader);
  font-size: 18px;
  line-height: 24px;
  font-weight: 600;
  letter-spacing: 0.18px;
}

@media (max-width: 767px) {
  html .err-title {
    font-size: 28px;
    line-height: 32px;
    letter-spacing: 0;
  }
}

/* --- Figma: simple-form button labels and input values are not uppercased --- */
html .sff-component__button,
html .sff-component input,
html .fff-input,
html .fff-select__input {
  text-transform: none;
}

/* --- Figma: no uppercase in the payment overlay (vendor ccl-payment-collector) --- */
html .ccl-payment-collector .cpy-tabs-link,
html .ccl-payment-collector .cpy-tabs-content-link,
html .ccl-payment-collector .sec-heading,
html .ccl-payment-collector .err-container,
html .ccl-payment-collector .pya,
html .ccl-payment-collector .pya-installments-amount,
html .ccl-payment-collector .pya-installments-date,
html .ccl-payment-collector .cred-paying,
html .ccl-payment-collector .cred-multiple-number,
html .ccl-payment-collector .cred-remove,
html .ccl-payment-collector .cf-paying,
html .ccl-payment-collector .cf-decision,
html .ccl-payment-collector .bcp-heading,
html .ccl-payment-collector .cht-description,
html .ccl-payment-collector .gca-btn-balance,
html .ccl-payment-collector .gcpa-col label,
html .ccl-payment-collector .pmt-sec-verbiage,
html .ccl-payment-collector .cred .cpy-tabs-content-sidebar .apply-carnival-card h2,
html .ccl-payment-collector .ccl-styles-2021 .cpy-tabs-content-sidebar-2021 .bbnrv-copy h2 {
  text-transform: none;
}

/* ===========================================================================
 * PBS Credit Card Overlay typography (Figma redlines)
 * ---------------------------------------------------------------------------
 *   SECURE CHECKOUT   Paragraph Small  Inter 12/16 / 1%    (Bold)
 *   Form labels       Paragraph Small  Inter 12/16 / 1%    (Reg)
 *   Input values      Paragraph Medium Inter 14/20 / 0.5%  (Bold)
 *   Terms copy        Paragraph Medium Inter 14/20 / 0.5%  (Reg)
 *   Terms links       Link             Inter 14/20 / -0.3% (Reg, underlined)
 *   PAY NOW           Button           Instrument Sans 18/24 / 1%
 *
 * Mirrors Client/pbs-payment-collector/src/pbs-payment-collector.scss so the
 * host stylesheet alone matches the Figma even before the widget bundle is
 * rebuilt. The vendor ccl-payment-collector CSS is concatenated into the
 * widget's own dist/index.css and loaded from the page body (after this head
 * sheet), so each rule below is lifted above the equivalent vendor selector
 * with an `html` prefix (and, where the vendor nested it under
 * `.ccl-styles-2021`, the vendor's full class chain).
 * =========================================================================== */

/* SECURE CHECKOUT / PAYING TOTAL: Paragraph Small Bold 12/16 / 1% */
html .sec-heading,
html .pya {
  font-family: var(--font-family-content);
  font-size: 12px;
  line-height: 16px;
  font-weight: 700;
  letter-spacing: 0.12px;
}

/* Form labels (e.g. "Cardholder's Name"): Paragraph Small Reg 12/16 / 1% */
html .cred-block label,
html .cred-form-container .ff-label,
html .ff-label {
  font-family: var(--font-family-content);
  font-size: 12px;
  line-height: 16px;
  font-weight: 400;
  letter-spacing: 0.12px;
}

/* Filled input values (e.g. card number): Paragraph Medium Bold 14/20 / 0.5% */
html .cpy .ff-input,
html .ff-select__input {
  font-family: var(--font-family-content);
  font-size: 14px;
  line-height: 20px;
  font-weight: 700;
  letter-spacing: 0.07px;
}

/* Empty/placeholder hint text and dropdowns stay regular, not bold. */
html .cpy .ff-input.ff-placeholder,
html .cpy .ff-input::placeholder,
html .ff-select__input {
  font-weight: 400;
}

/* Terms copy: Paragraph Medium Reg 14/20 / 0.5% */
html .ff-checkbox + label.tac-label,
html .ccl-styles-2021 .tac .tac-checkbox-container .ff-checkbox + label.tac-label {
  font-family: var(--font-family-content);
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
  letter-spacing: 0.07px;
}

/* Terms links: Link Reg UL 14/20 / -0.3% */
html .ff-checkbox + label.tac-label a,
html .ff-checkbox + label.tac-label .tac-terms,
html .ccl-styles-2021 .tac .tac-checkbox-container .ff-checkbox + label.tac-label a,
html .ccl-styles-2021 .tac .tac-checkbox-container .ff-checkbox + label.tac-label .tac-terms {
  font-family: var(--font-family-content);
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
  letter-spacing: -0.042px;
  text-decoration: underline;
}

/* PAY NOW: Button 18/24 / 1% */
html #cred-btn-pay-now,
html #pmt-submit {
  font-family: var(--font-family-subheader);
  font-size: 18px;
  line-height: 24px;
  font-weight: 600;
  letter-spacing: 0.18px;
}

/* Credit card tab ("CREDIT CARD"): Paragraph Medium Bold 14/20 / 0.5% */
html .cpy-tabs-link,
html .cpy-tabs-content-link {
  font-family: var(--font-family-content);
  font-size: 14px;
  line-height: 20px;
  font-weight: 700;
  letter-spacing: 0.07px;
}

/* Paying total amount ("$40.00"): H3 20/28 / 0.3% (mobile 18/28 / 0.3%) */
html .pya-amount {
  font-family: var(--font-family-content);
  font-size: 20px;
  line-height: 28px;
  font-weight: 700;
  letter-spacing: 0.06px;
}

/* Secured connection error ("Secured Connection Invalid or Expired."):
 * Paragraph Medium Bold 14/20 / 0.5% */
html .err-container .err-error {
  font-family: var(--font-family-content);
  font-size: 14px;
  line-height: 20px;
  font-weight: 700;
  letter-spacing: 0.07px;
}

/* Secured connection retry link ("Click to retry."): Link 14/20 / -0.3% */
html .err-container .err-list > a {
  font-family: var(--font-family-content);
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
  letter-spacing: -0.042px;
}

/* Field validation errors ("Please enter a valid credit card number"):
 * Paragraph Small 12/16 / 1% */
html .ff-val-msg,
html .ccl-tooltip.ff-val-msg {
  font-family: var(--font-family-content);
  font-size: 12px;
  line-height: 16px;
  font-weight: 400;
  letter-spacing: 0.12px;
}

@media (max-width: 767px) {
  html .pya-amount {
    font-size: 18px;
    line-height: 28px;
    letter-spacing: 0.054px;
  }
}

/* Credit-card surcharge-warning modal Confirm button.
 * The button carries ccl-styles-2016's .ccl-button-primary, which forces the
 * family via var(--font-family-subheader) but also text-transform:uppercase and
 * letter-spacing:1px. Align it to the Figma Button token (Instrument Sans 18/24,
 * 1%, SemiBold) and drop the vendor uppercase. `#ccsw-btn-continue` is an id,
 * so it outranks the vendor class selector regardless of load order. */
html #ccsw-btn-continue {
  font-family: var(--font-family-subheader, Arial, sans-serif);
  font-size: 18px;
  line-height: 24px;
  font-weight: 600;
  letter-spacing: 0.18px;
  text-transform: none;
}