/* ---- Global Page Styling ---- */
/* Adds space at top of header and curves page corners */
.main-form {
  background: #ffffff !important;
  color: #333333 !important;
  margin-top: 40px !important;
  max-width: 1200px !important;
  /*border-radius: 20px; */
}

/* Changing helper icon to ? instead of i from FontAwesome and moving into field */
.fa-info:before {
  content: "\f059";
}

.fa.fa-info.small.theme-text-info-input {
  margin-left: -20px;
  top: 3px;
}

button {
  cursor: pointer !important;
}

/* Pushing next/back buttons out? */
/*.nav.waiting-nav {
    margin-right: -60px;
    margin-left: -60px;
  }*/

@media screen and (max-width: 1150px) {
  .nav.waiting-nav {
    margin-right: 0px;
    margin-left: 0px;
  }
}

.img-responsive {
  width: 1200px !important;
  /*    border-radius: 20px 20px 0 0; */
}

/*
  .brand-header {
    border-radius: 20px;
  }
*/

div.main-form {
  max-width: 1200px !important;
}

body {
  background-color: #f5f5f5 !important;
  /* Insert Image URL for background here */
  background-image: url("") !important;
  background-attachment: fixed;
  background-size: cover;
  opacity: 0.98;
}

/* Progress bar settings */
.progress {
  height: 18pt;
}

.progress-bar {
  background: #0abb60;
  background-image: linear-gradient(
    45deg,
    #0fcd6c 25%,
    #0000 25%,
    #0000 50%,
    #0fcd6c 50%,
    #0fcd6c 75%,
    #0000 75%,
    #0000
  );
  transition: 1s ease !important;
  line-height: 18pt;
  font-size: 12pt;
  font-weight: 600;
  color: #000;
  animation: animate-progress 8s linear infinite;
  background-size: 100px 100px;
  box-shadow: inset 0px 5px 5px 5px rgba(255, 255, 255, 0.3);
}

.theme-progress {
  border-radius: 0px;
}

@keyframes animate-progress {
  0% {
    background-position: 0 0;
  }

  100% {
    background-position: 100px 0;
  }
}

/* Add currency info to fees */
.fee-amount::before,
.fee-summary::before,
.theme-payment-summary .fixed-width-cost-col::before,
.theme-summary .fixed-width-cost-col:nth-child(4)::before,
.table-payment .text-right::before {
  content: "$";
}

/*
  .fee-amount::after,
  .fee-summary::after,
  .theme-payment-summary .fixed-width-cost-col::after,
  .theme-summary .fixed-width-cost-col>strong::after {
    content: " AUD";
  }*/
/* Sets AMOUNT and TOTAL to bold */
.text-muted {
  font-weight: bold;
}

/* Curves box storing value for + and - */
div.form-group .form-control.theme-number {
  border-radius: 10px;
}

/* Removes shadow around main form and adds padding to bottom of page */
#main-form {
  padding-bottom: 15px;
  box-shadow: none !important;
}

div.delayed-component-content {
  box-shadow: none !important;
}

/* Footer styling */
.brand-footer-bg {
  background-color: transparent;
  margin-bottom: 15px;
  width: auto !important;
  margin-left: 0px;
  margin-right: 0px;
}

/* Changes buttons to black with white text and circular shape */
button,
input.btn,
a.btn {
  border-radius: 15px !important;
  border: 0 !important;
  /*height: 34px !important;*/
  font-size: 0.9167em !important;
  font-weight: bold !important;
  line-height: 34px !important;
  /* padding: 0 15px !important; <-- rectangle button padding */
  /*padding: 0px 30px !important;*/
  white-space: nowrap !important;
  /* text-transform: uppercase !important;*/
  background: #e3880e !important;
  color: #fff !important;
  /* button animation */
  -webkit-transform: perspective(1px) translateZ(0) !important;
  -moz-transform: perspective(1px) translateZ(0) !important;
  transform: perspective(1px) translateZ(0) !important;
  /*box-shadow: 0 0 1px rgba(0, 0, 0, 0) !important;*/
  transition-duration: 0.3s !important;
  transition-property: transform, color, background-color !important;
}

/* Makes 'Edit' circular and smaller than regular buttons */
a.btn {
  border-radius: 15px !important;
  border: 0 !important;
  height: 34px !important;
  font-size: 0.9167em !important;
  font-weight: bold !important;
  line-height: 34px !important;
  padding: 0px 30px !important;
  white-space: nowrap !important;
  text-transform: uppercase !important;
  background: #e3880e !important;
  color: #fff !important;
  -webkit-transform: perspective(1px) translateZ(0) !important;
  -moz-transform: perspective(1px) translateZ(0) !important;
  transform: perspective(1px) translateZ(0) !important;
  box-shadow: 0 0 1px rgb(0 0 0 / 0%) !important;
  transition-duration: 0.3s !important;
  transition-property: transform, color, background-color !important;
}

.btn-file {
  background: #e3880e !important;
  border-color: #e3880e !important;
}

.btn-default:hover {
  background: #102433 !important;
  border-color: #102433 !important;
}

.theme-button {
  margin-bottom: 2px !important;
  cursor: pointer !important;
  display: inline-block !important;
  background: white !important;
  border: 0px !important;
  color: #e3880e !important;
  padding: 5px !important;
}

.theme-label-primary {
  background-color: #e3880e;
  border-radius: 10px;
}

/* Padding across text used in all forms */
form p {
  padding: 15px;
}

.main-form form p {
  padding: 5px 15px 5px 15px;
}

/* Hide nav bar */
.navbar {
  height: 40px !important;
  border: 0 !important;
  padding: 0 !important;
  background: none !important;
  border-radius: 0 !important;
  height: 40px !important;
  min-height: 41px !important;
}

.nav {
  padding-top: 18px !important;
}

/* Styling for headings1-6 */
h1,
h2,
h3,
h4,
h5,
h6 {
  color: #e3880e !important;
}

h1,
h2 {
  background: #e3880e !important;
  color: #ffffff !important;
  margin-left: -15px !important;
  margin-right: -15px !important;
  margin-top: -15px !important;
  padding: 10px;
}

/* Adds 'line' underneath h3 and h4 with bold font */
h3,
h4 {
  font-weight: bold !important;
  padding-bottom: 5px !important;
  padding-left: 0 !important;
  border-bottom: 4px solid #e3880e !important;
  margin-left: 0% !important;
}

h5 {
  border-bottom: 1px solid;
  padding-bottom: 5px;
  font-weight: bold;
  margin: 0 15px;
  padding: 5px 0;
  font-size: 16px;
}

h2 {
  margin-top: 10px !important;
}

.text-left.h2 {
  padding: 15px !important;
}

/* Formats secondary headers to not have underline */
.text-left.h4 {
  font-weight: bold;
  padding-bottom: 5px !important;
  padding-left: 0 !important;
  border-bottom: none !important;
  margin-left: 1% !important;
}

/* Radio buttons/Checkboxes made larger, coloured and filled correctly */
.radio input,
.checkbox input,
.main-form input[type="radio"],
.main-form input[type="checkbox"] {
  background: #f8f8fc !important;
  border: 1px solid #e3880e !important;
}

.radio input:checked,
.checkbox input:checked,
.main-form input[type="radio"]:checked,
.main-form input[type="checkbox"]:checked {
  background: #e3880e !important;
  color: #ffffff !important;
  transition: 0.3s linear !important;
}

.radio input:focus,
.main-form input[type="radio"]:focus {
  outline: none !important;
}

.radio input:checked,
.main-form input[type="radio"]:checked {
  border: none !important;
}

.radio input,
.main-form input[type="radio"] {
  -webkit-appearance: none !important;
  box-shadow: none !important;
  padding: 9px !important;
  border-radius: 50% !important;
  display: inline-block !important;
  position: relative !important;
  width: 24px !important;
  height: 24px !important;
  margin-right: 8px !important;
  top: -5px !important;
}

.checkbox input:checked,
.main-form input[type="checkbox"]:checked {
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  width: 24px !important;
  height: 24px !important;
}

/* Checkbox has tick appear when selected */
.checkbox input:checked::after,
.main-form input[type="checkbox"]:checked::after {
  content: "\2714" !important;
  font-size: 14px !important;
  position: absolute !important;
  top: 2px !important;
  left: 6px !important;
}

.checkbox input,
.main-form input[type="checkbox"] {
  -webkit-appearance: none !important;
  box-shadow: none !important;
  padding: 9px !important;
  border-radius: 0px !important;
  display: inline-block !important;
  position: relative !important;
  margin: 0 !important;
  width: 24px !important;
  height: 24px !important;
  margin-right: 8px !important;
}

/* Change mouse to pointer when hovering radio/checkbox button */
.checkbox input,
.radio input {
  cursor: pointer !important;
}

/* Styling for box around panels */
.theme-panel {
  box-shadow:
    inset 0 -5px 0 0 #e3880e,
    0px 0px 0px 0 rgb(0 0 0 / 5%),
    0px 0px 0px 2px rgb(0 0 0 / 5%) !important;
  border-radius: 5px;
  padding: 2% 2%;
}

/* Shifts text next to checkboxes and + - to be closer on mobile and desktop */
.col-sm-2 {
  width: none;
}

@media (min-width: 768px) {
  .col-sm-2 {
    width: unset !important;
  }
}

/* Program table formatting to extend across page, colour column header and alternate row background colour*/
.programTable {
  width: 100% !important;
  border-collapse: collapse;
}

/* Header cells */
.programTable th {
  background-color: #e3880e;
  color: #ffffff;
  padding: 4px 6px; /* tighter header spacing */
  text-align: center;
  vertical-align: middle;
  font-weight: 400; /* not bold by default */
}

/* Body cells */
.programTable td {
  padding: 8px;
  text-align: center;
  vertical-align: middle;
  border-left: 1px solid #ececec;
  border-right: 1px solid #ececec;
  border-bottom: 1px solid #ececec;
}

/* First column always left aligned */
.programTable th:first-child,
.programTable td:first-child {
  text-align: left;
  width: 30%;
}

/* Zebra striping for body rows only */
.programTable tbody tr:nth-child(odd) {
  background-color: #f2f2f2;
}

/* Prevent paragraph spacing inside table cells */
.programTable th p,
.programTable td p {
  margin: 0;
}

.inclusionsTable {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  margin-bottom: 20px;
  border: 1px solid #e0e0e0;
}

.inclusionsTable th {
  background-color: #e3880e;
  color: #ffffff;
  text-align: center;
  padding: 8px 6px;
  font-weight: 600;
  font-size: 13px;
  border-right: 1px solid #ffffff;
  vertical-align: middle;
}

.inclusionsTable th:last-child {
  border-right: none;
}

.inclusionsTable td {
  text-align: center;
  padding: 12px;
  border-top: 1px solid #e0e0e0;
  border-right: 1px solid #e0e0e0;
  vertical-align: middle;
  background-color: #fafafa;
}

.inclusionsTable td:last-child {
  border-right: none;
}

.inclusionsTable td.dash {
  font-size: 16px;
  color: #666666;
}

.inclusionsTable input[type="checkbox"] {
  cursor: default;
}

/* ---- Global Page Styling End ---- */

/* ---- Incomplete registration page ---- */
.main-form.landing h2 {
  background: #e3880e !important;
  color: #ffffff !important;
  padding: 15px !important;
  margin-left: -15px;
  margin-right: -15px;
  margin-top: -15px !important;
  opacity: 1 !important;
  transition: opacity 0.6s !important;
  font-size: 20pt;
  background-color: white;
}

#main-form.landing > div > div.component > p {
  border: 1px solid #ccc;
  padding: 10px !important;
}

#main-form.landing > div > div.component p a {
  background: #e3880e;
  color: #ffffff !important;
  border-radius: 25px !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
  font-weight: bold !important;
  white-space: nowrap !important;
  text-transform: uppercase !important;
  padding: 9px 12px;
  line-height: 40px !important;
  display: inline !important;
  /* button animation */
  -webkit-transform: perspective(1px) translateZ(0) !important;
  -moz-transform: perspective(1px) translateZ(0) !important;
  transform: perspective(1px) translateZ(0) !important;
  box-shadow: 0 0 1px rgba(0, 0, 0, 0) !important;
  transition-duration: 0.3s !important;
  transition-property: transform, color, background-color !important;
}

#main-form.landing > div > div.component p a:hover,
#main-form.landing > div > div.component p a:first-of-type:hover {
  background: #102433 !important;
}

#main-form.landing > div > div.component p a:first-of-type {
  background: #4bb543 !important;
}

#main-form.landing > div > div.component p a:nth-child(4) {
  background: #bb2124;
}

#main-form.landing > div > div.component p a::before {
  background: none;
}

#main-form.landing > div > div.component p a:link,
#main-form.landing > div > div.component p a:visited,
#main-form.landing > div > div.component p a:hover,
#main-form.landing > div > div.component p a:active {
  text-decoration: none;
}

/* ---- Incomplete Registration Page End ---- */

/* ---- Accommodation Page ---- */
/* Hide empty room photo for accommodation page */
.row.room-type div.col-sm-2.hidden-xs {
  display: none;
}

.row.room-type div.col-sm-4.col-xs-8 {
  padding-top: 30px;
  padding-left: 30px;
}

.row.room-type div.col-sm-2.col-xs-4 {
  padding-top: 30px;
}

.row.room-type div.col-sm-3.col-xs-12 {
  padding-top: 23px;
}

.row.room-type div.col-sm-1 {
  padding-top: 25px;
}

/* ---- Accommodation Page End ---- */

/* ---- Summary Page ---- */

/* General summary content styling (pushing content inwards) */
.summary-content.theme-summary-content {
  padding: 5px 15px 5px 15px;
}

.main-form div[data-templateplaceholder="policies"] strong {
  padding-bottom: 5px !important;
  font-weight: bold !important;
  color: #e3880e !important;
  border-bottom: 0 !important;
  font-size: 16px !important;
}

.main-form div[data-templateplaceholder="policies"] > div {
  margin-left: -12px !important;
}

/* Hides edit button next to each heading below main */
.summary-table h4 > a.btn {
  display: none;
}

/* ---- Summary Page End ---- */

/* Align "None" option with fee rows */
/* None option, match label indent, do not push the radio */
.row.radio.form-group:not(.theme-feetype-box) > .col-xs-6 {
  padding-left: 15px !important;
}

.row.radio.form-group:not(.theme-feetype-box)
  input[type="radio"][id$="_NoOption"] {
  margin-left: 0 !important;
}

/* GroupComponent only, remove panel shadow and spacing */
.component.modern-component[data-component-type="NextGen.Online.Components.Client.Group.GroupComponent"] {
  box-shadow: none !important;
  border: none !important;
  background: transparent !important;
}

/* Remove padding applied by theme panel and spacing utilities */
.component.modern-component[data-component-type="NextGen.Online.Components.Client.Group.GroupComponent"]
  form.theme-panel.modern-spacing-3xl {
  padding: 0 !important;
  margin: 0 !important;
  box-shadow: none !important;
  border: none !important;
}

/* Remove Bootstrap gutter padding from the registration content block */
.component.modern-component[data-component-type="NextGen.Online.Components.Client.Group.GroupComponent"]
  .row.no-theme
  > .col-xs-12,
.component.modern-component[data-component-type="NextGen.Online.Components.Client.Group.GroupComponent"]
  .row.no-theme
  > .col-xs-12
  > .col-xs-12 {
  padding-left: 0 !important;
  padding-right: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* Neutralise the row’s negative margins so the content sits flush */
.component.modern-component[data-component-type="NextGen.Online.Components.Client.Group.GroupComponent"]
  .row.no-theme {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Ensure nested spacing helpers inside this component do not reintroduce padding */
.component.modern-component[data-component-type="NextGen.Online.Components.Client.Group.GroupComponent"]
  .modern-spacing-3xl,
.component.modern-component[data-component-type="NextGen.Online.Components.Client.Group.GroupComponent"]
  .modern-spacing-xl {
  padding: 0 !important;
  margin: 0 !important;
}

/* Hide the entire row that contains the Group Size control */
#group-component-details .row:has(#membersCount) {
  display: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Hide the "(Group Contact)" / numbering column */
#group-component-details .member-row > .col-sm-2.col-xs-12 {
  display: none !important;
}

/* Revert the earlier width override so inputs return to their normal sizing */
#group-component-details .member-row > .col-sm-4.col-xs-12 {
  width: auto !important;
}

/* Remove the "label" look completely */
.label.theme-text-info-input.theme-label-primary.text-success {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 0 0 6px; /* small space from the field */
  box-shadow: none !important;
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
}

/* Style the tick itself */
.label.theme-text-info-input.theme-label-primary.text-success i {
  color: #28a745 !important; /* clean green tick */
  font-size: 16px; /* adjust size if needed */
  line-height: 1;
}

/* Remove any inherited pseudo styling */
.label.theme-text-info-input.theme-label-primary.text-success:before,
.label.theme-text-info-input.theme-label-primary.text-success:after {
  display: none !important;
}

/* ------------------------------------------------------------
   Mobile horizontal scroll for wide tables (fees + inclusions)
   Append at END of registration.css so it overrides earlier rules
   ------------------------------------------------------------ */

@media (max-width: 767px) {
  /* Make each table its own horizontal scroll container */
  table.programTable,
  table.inclusionsTable {
    display: block;
    width: 100% !important;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    border-collapse: collapse;
  }

  /* Keep the table layout intact inside the scroll container */
  table.programTable tbody,
  table.programTable thead,
  table.programTable tr,
  table.inclusionsTable tbody,
  table.inclusionsTable thead,
  table.inclusionsTable tr {
    width: max-content;
  }

  /* Set practical minimum widths so columns don’t squash */
  table.programTable {
    min-width: 760px;
  }

  table.inclusionsTable {
    min-width: 720px;
  }

  /* Reduce padding slightly on small screens */
  .programTable th,
  .programTable td,
  .inclusionsTable th,
  .inclusionsTable td {
    padding: 8px 10px;
  }

  /* Prevent price columns from wrapping into tall cells */
  .programTable th,
  .programTable td,
  .inclusionsTable th,
  .inclusionsTable td {
    white-space: nowrap;
  }

  /* Allow the first column (labels/descriptions) to wrap if needed */
  .programTable th:first-child,
  .programTable td:first-child,
  .inclusionsTable th:first-child,
  .inclusionsTable td:first-child {
    white-space: normal;
    min-width: 220px;
  }
}

/* ============================================================
   Responsive table containment fix
   Keeps tables INSIDE the .col-xs-12 container
   ============================================================ */

@media (max-width: 767px) {
  /* Ensure the grid column clips children correctly */
  .col-xs-12 {
    max-width: 100%;
    overflow: hidden;
  }

  /* Turn tables into scrollable inline blocks */
  table.programTable,
  table.inclusionsTable {
    display: inline-block;
    vertical-align: top;

    max-width: 100%; /* prevents parent overflow */
    overflow-x: auto;
    overflow-y: hidden;

    -webkit-overflow-scrolling: touch;
    white-space: normal;
    border-collapse: collapse;
  }

  /* Inner table keeps its natural width */
  table.programTable > tbody,
  table.inclusionsTable > tbody {
    display: table;
    width: max-content; /* allows horizontal scroll */
  }

  /* Prevent columns collapsing */
  table.programTable th,
  table.programTable td,
  table.inclusionsTable th,
  table.inclusionsTable td {
    white-space: nowrap;
  }

  /* Allow the first descriptive column to wrap nicely */
  table.programTable th:first-child,
  table.programTable td:first-child,
  table.inclusionsTable th:first-child,
  table.inclusionsTable td:first-child {
    white-space: normal;
    min-width: 220px;
  }

  /* Provide a sensible minimum width for pricing matrices */
  table.programTable {
    min-width: 720px;
  }

  table.inclusionsTable {
    min-width: 680px;
  }
}

/* ============================================================
   Horizontal scroll fix for wide pricing tables
   ============================================================ */

.table-scroll {
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}

/* Keep tables behaving like tables */
.table-scroll table {
  border-collapse: collapse;
  width: auto;
  min-width: 720px; /* ensures scroll engages */
}

/* Prevent column crushing */
.table-scroll th,
.table-scroll td {
  white-space: nowrap;
}

/* Allow first column to wrap for readability */
.table-scroll th:first-child,
.table-scroll td:first-child {
  white-space: normal;
  min-width: 240px;
}

/* Optional, nicer scroll behaviour on small screens */
@media (max-width: 767px) {
  .table-scroll {
    margin-bottom: 20px;
  }
}