/* Journey price panel - one design on every journey page, from the hotel-highlights prototype
   (its rendered values). Covers each page's own class names:
     hotel page      .aip-summary  / .aip-summary__* / .aip-include__*   (AccommodationItem.cshtml)
     product page    .pp-summary   / .pp-summary__*  / .pp-include__*    (ProductPage.cshtml, PricePanel-vue.cshtml)
     basket pages    .bp-quote     / .bp-quote__*    / .bp-include__*    (BasketPage.cshtml, BasketPageHO.cshtml)
   Works in the desktop sidebar and the mobile summary sheets (same inner markup).
   Deliberately NOT changed: the include notes (.aip-include__note etc. - green background/text). */

/* ---- Panel shell (desktop sidebar only) ---- */
aside.aip-summary,
aside.pp-summary,
aside.bp-quote {
  padding: 20px;
  border-radius: 10px;
  box-shadow: none;
}

/* ---- Top block: left-aligned (the site's own alignment), tight spacing ---- */
:is(.aip-summary__stay, .pp-summary__stay, .bp-quote__stay) {
  margin: 0 0 6px;
  font: 600 13px/1.45 Lato, "Segoe UI", sans-serif;
  color: #3c4e5a;
  text-align: left;
}
:is(.aip-summary__match, .pp-summary__match, .bp-quote__match) {
  justify-content: flex-start;
  margin: 0 0 4px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.45;
  text-align: left;
}

/* Price: small £, big amount, "pp" - all on one baseline. */
:is(.aip-summary__pp, .pp-summary__pp, .bp-quote__pp) {
  display: flex;
  justify-content: flex-start;
  align-items: baseline;
  gap: 2px;
  margin: 4px 0 0;
  font: 900 42px/1.1 Lato, sans-serif;
  letter-spacing: -0.24px;
  color: #3c4e5a;
  text-align: left;
}
:is(.aip-summary__pp, .pp-summary__pp, .bp-quote__pp) .cp-price-currency { font-size: 0.6em; font-weight: 900; line-height: 1.1; }
:is(.aip-summary__pp, .pp-summary__pp, .bp-quote__pp) .cp-price-amount { font-size: 1em; font-weight: 900; }
:is(.aip-summary__pp, .pp-summary__pp, .bp-quote__pp) small {
  margin: 0;
  font: 700 0.42em/1 Lato, sans-serif;
  color: inherit;
}

:is(.aip-summary__total, .pp-summary__total, .bp-quote__total) {
  margin: 2px 0 6px;
  font: 600 16px/1.45 Lato, "Segoe UI", sans-serif;
  color: #3c4e5a;
  text-align: left;
}

/* Discount: red with a tag icon. */
.cp-discount-label {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 6px;
  margin: 4px 0 10px;
  font: 600 14px/1.4 Lato, sans-serif;
  color: #dd0309;
  text-align: left;
}
.cp-discount-label::before {
  content: "";
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' fill-rule='evenodd' d='M21 3H12L2 13a2 2 0 0 0 0 3l6 6a2 2 0 0 0 3 0L21 12V3Zm-5 3a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3Z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' fill-rule='evenodd' d='M21 3H12L2 13a2 2 0 0 0 0 3l6 6a2 2 0 0 0 3 0L21 12V3Zm-5 3a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3Z'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* Deposit line -> the prototype's teal deposit box. */
.cph-pay-plan.cph-pay-plan--sidebar {
  margin: 10px 0;
  padding: 10px 12px;
  border: 1px solid #b9dedd;
  border-radius: 10px;
  background: #def6f5;
  color: #3c4e5a;
  font: 400 13px/1.5 Lato, "Segoe UI", sans-serif;
  letter-spacing: -0.24px;
  text-align: left;
}
.cph-pay-plan.cph-pay-plan--sidebar strong { color: #3c4e5a; font-weight: 700; }
.cph-pay-plan.cph-pay-plan--sidebar .cph-text-btn {
  display: block;
  margin: 2px 0 0;
  padding: 0;
  border: 0;
  background: none;
  color: #218887;
  font: 400 13px/1.5 Lato, "Segoe UI", sans-serif;
  text-decoration: underline;
  cursor: pointer;
}

/* Main button: Montserrat, chevron. */
:is(.aip-summary, .pp-summary, .bp-quote) .journey-btn--gold {
  min-height: 46px;
  gap: 10px;
  border: 0;
  box-shadow: none;
  color: #3c4e5a;
  font: 700 17px/1.3 Montserrat, sans-serif;
}
:is(.aip-summary, .pp-summary, .bp-quote) .journey-btn--gold .cp-chevron {
  width: 24px;
  height: 28px;
  fill: none;
  stroke: currentColor;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}
:is(.aip-summary, .pp-summary, .bp-quote) .journey-atol { margin: 10px 0 14px; }
:is(.aip-summary, .pp-summary, .bp-quote) .journey-atol__logo { width: 26px; height: 26px; }
:is(.aip-summary, .pp-summary, .bp-quote) .journey-atol__label { font-size: 14px; font-weight: 600; line-height: 1.5; }

/* ---- "Included in your holiday" ---- */
:is(.aip-summary, .pp-summary, .bp-quote) > h2,
:is(.aip-summary, .pp-summary, .bp-quote) .pp-summary__included-title {
  margin: 0 0 8px;
  padding-top: 14px;
  font: 600 18px/1.3 Montserrat, Lato, sans-serif;
  letter-spacing: normal;
  color: #3c4e5a;
}
:is(.aip-include__card, .pp-include__card, .bp-include__card) { gap: 10px; padding-top: 8px; padding-bottom: 8px; }
:is(.aip-include__icon, .pp-include__icon, .bp-include__icon) {
  width: 22px;
  height: 21px;
  color: #3c4e5a;
}
:is(.aip-include__icon, .pp-include__icon, .bp-include__icon) svg { width: 100%; height: 100%; }
:is(.aip-include__value, .pp-include__value, .bp-include__value) {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;
  color: #3c4e5a;
}
/* "2 x Adults" and the board chip sit side by side. */
:is(.aip-include__hint, .pp-include__hint, .bp-include__hint) {
  display: inline-block;
  margin: 4px 8px 0 0;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
  color: #3c4e5a;
}
:is(.aip-chip-board, .pp-chip-board, .bp-chip-board) {
  display: inline-block;
  padding: 5px 9px;
  border-radius: 10px;
  background: #def6f5;
  color: #3c4e5a;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.35;
}
/* Notes keep their own green look, but start on their own line under the inline hints. */
:is(.aip-include__note, .pp-include__note, .bp-include__note) { clear: both; }
:is(.aip-include__hint, .pp-include__hint, .bp-include__hint) + :is(.aip-include__note, .pp-include__note, .bp-include__note) { display: block; }