/* ===== sunholidays.ie checkout – quick CSS (Claude, 12 Sep 2026) =====
   Lives in Joomla Custom module "Checkout CSS (Claude)", position aboveContent.
   Scoped to .checkoutElement so nothing outside the booking flow is affected.
   Unpublish the module to remove every change. */

/* --- Section headings: one style (was 22px h4 / 22px h5 / 18px h2 mixed) --- */
.checkoutElement h4.passenger-important-title,
.checkoutElement h4,
.checkoutElement h5.mb-2,
.checkoutElement h2.passengerAddress,
.checkoutElement h2.passengerType {
  font-size: 18px !important;
  font-weight: 700 !important;
  color: #333333 !important;
  margin: 0 0 14px !important;
  padding-top: 22px;
  border-top: 1px solid #EEEDEA;
}
.checkoutElement > h4:first-child,
.checkoutElement > h5:first-child,
.checkoutElement .passenger-important-title:first-child {
  padding-top: 0;
  border-top: 0;
}

/* --- Labels and fields --- */
.checkoutElement label {
  font-size: 14px;
  font-weight: 600;
  color: #333333;
  margin-bottom: 5px;
}
.checkoutElement label .red { color: #E4166C; }
.checkoutElement .form-control {
  height: 45px;
  border: 1px solid #DEDEDE;
  border-radius: 10px;
  font-size: 16px;
  color: #333333;
}
.checkoutElement .form-control:focus {
  border-color: #E4166C;
  box-shadow: 0 0 0 3px rgba(228, 22, 108, 0.14);
  outline: none;
}

/* --- Payment option cards --- */
.checkoutElement .paymentPanels.paymentOption {
  border: 1.5px solid #DEDEDE !important;
  border-radius: 12px !important;
  padding: 16px 18px !important;
  background: #ffffff;
  transition: border-color .15s, background-color .15s;
}
.checkoutElement .paymentPanels.paymentOption.selected {
  border-color: #E4166C !important;
  background: #FFF0F7;
}
.checkoutElement .paymentPanels h2 {
  font-size: 15px !important;
  font-weight: 700 !important;
  border: 0 !important;
  padding: 0 !important;
  margin: 0 0 4px !important;
}
.checkoutElement .paymentPanels h3 {
  font-size: 22px !important;
  font-weight: 800 !important;
  color: #333333 !important;
  letter-spacing: -0.01em;
}

/* --- Important information: quieter --- */
.checkoutElement ol.passenger-important {
  font-size: 13.5px;
  color: #5F6068;
  line-height: 1.5;
}
.checkoutElement ol.passenger-important li { padding: 4px 0; }

/* --- Ryanair terms: keep the text, drop the heading and shrink --- */
.checkoutElement .content--border h4 { display: none; }
.checkoutElement .content--border {
  border: 0 !important;
  padding: 0 !important;
  margin: 0 0 12px !important;
}
.checkoutElement .content--border p {
  font-size: 12px;
  color: #8A8B93;
  line-height: 1.5;
}
.checkoutElement .content--border p a { font-weight: 600; color: #E4166C; }

/* --- Buttons --- */
.checkoutElement .btn-primary,
#next4 {
  height: 48px !important;
  border-radius: 25px !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  padding: 0 34px !important;
  background: #E4166C !important;
  border-color: #E4166C !important;
  box-shadow: 0 4px 12px rgba(228, 22, 108, 0.28);
}
.checkoutElement .btn-primary:hover,
#next4:hover { background: #C9125E !important; border-color: #C9125E !important; }
.checkoutElement .btn-secondary,
#prev4 {
  height: 48px !important;
  border-radius: 25px !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  padding: 0 28px !important;
  background: #ffffff !important;
  color: #333333 !important;
  border: 1.5px solid #DEDEDE !important;
}

/* --- Phones --- */
@media (max-width: 560px) {
  .checkoutElement .btn-primary, #next4,
  .checkoutElement .btn-secondary, #prev4 { width: 100%; justify-content: center; margin: 6px 0 !important; }
}