body {
    font-family: 'Arial', sans-serif;
    background-color: #f4f4f4;
    height: 100%;
    margin: 0;
    padding: 0;
}
.title-container {
    text-align: center;
    margin: 0 auto;
    padding: 0;
    max-width: 1200px;
}
.form-container {
    background-color: white;
    padding: 20px;
    margin: 20px;
    border-radius: 10px;
    box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.1);
    max-width: 800px;
    margin: 20px auto;
    text-align: left;
}
.form-container.expanded   { max-width: 90vw; }   /* grow to 90 % of viewport */
h2 {
    margin-bottom: 20px;
}
.form-step h2 {
    text-align: center; /* Centers the text horizontally */
    margin-bottom: 20px; /* Adds space below the title */
    color: #333; /* Optional: Sets a dark gray color for the text */
}
.form-step {
    display: none;
}
.form-step.active {
    display: block;
}
.form-section {
    /*margin-bottom: 30px; !* Space between sections *!*/
    /*padding: 10px;*/
    /*border-top: 1px solid #e0e0e0; !* Optional: add a top border for separation *!*/
}

/* Optional: Style section headers */
.form-section h3 {
    text-align: center;
    margin-bottom: 20px; /* Optional: Adds space below the title */
    color: #333; /* Optional: Adjusts the text color */
}

.textbox {
    text-align: center;
    margin: 0 auto; /* Centers the div itself if it has a set width */

}



/* Ensure that form columns within sections behave as intended */
.form-section .columns-container {
    /*margin-top: 10px; !* Space between section header and columns *!*/
}
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="date"],
select,
textarea {
    width: 100%;
    padding: 10px;
    margin: 10px 0;
    border-radius: 5px;
    border: 1px solid #ccc;
    font-size: 16px;
    box-sizing: border-box;
}
button {
    padding: 10px 20px;
    background-color: #28a745;
    color: white;
    border: none;
    margin: 5px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
}
button[disabled] {
    background-color: #ccc;
    cursor: not-allowed;
}
.columns-container {
  display:flex;
  flex-wrap:wrap;
  gap:20px;                 /* keeps the old 10 px margin on each column */
  justify-content:flex-start;
}
/* Center columns on mobile */
@media (max-width: 768px) {
    /* 1️⃣  columns flow downward instead of wrapping side‑by‑side */
  .columns-container {
    flex-direction: column;
  }

  /* 2️⃣  every column becomes a 100 %‑wide row */
  .form-column,
  .form-column.fixed-column {  /* <- covers the “fixed” helper */
    flex: 1 0 100% !important; /* basis = 100&#8239;%, no side&#8209;by&#8209;side */
    max-width: 100% !important;/* neutralise any JS&#8209;added maxWidth */
  }
}
.form-column {
  flex:1 1 0;               /* grow + shrink, no preset basis        */
  box-sizing:border-box;
    /*padding: 10px;*/
}
.form-column.fixed-column{
  flex:0 0 auto;            /* don’t grow – width obeys max&#8209;width     */
}
.form-group {
    margin-top: 15px;
    /*margin-bottom: 15px;*/
}
label {
    font-weight: bold;
    display: block;
    margin-bottom: 5px;
}
/* Responsive Styles */
@media (min-width: 600px) {
    .form-column {
        flex: 1 1 calc(50% - 20px);
        margin: 10px;
    }
}
/* Image Styles */
.image-container {
    max-width: 800px;
    margin: 0 auto;
    padding: 10px;
}
.image-container-top {
    max-width: 250px;
    margin: 0 auto;
    padding: 10px;
}
img {
    width: 100%;
    max-width: 100%;
    height: auto;
}
/* Navigation Buttons */
.nav-buttons {
    text-align: center;
    margin-top: 20px;
}
.submitting-message {
    text-align: center;
    font-size: 18px;
    margin-top: 20px;
}
input.is-invalid, select.is-invalid, textarea.is-invalid {
    border: 2px solid red;
}

.invalid-feedback {
    display: block; /* Ensure the error message takes up the full width */
    color: red;
    font-weight: bold;
    font-style: italic;
    margin-top: 5px; /* Space between radio group and error message */
}

        .parsley-errors-list {
    color: red;
    font-weight: bold;
    font-style: italic;
    margin-top: 5px;
    list-style: none;
    padding-left: 0;
}

/* Optional: Remove default list styling from error messages */
.parsley-errors-list li {
    list-style: none;
}

/* Align checkbox labels to the right of the checkbox */
.form-group input[type="checkbox"] + label {
    display: inline;
    margin-bottom: 0; /* Remove any bottom margin */
    vertical-align: middle; /* Align label vertically with the checkbox */
}

/* Add spacing between checkbox and label */
.form-group input[type="checkbox"] {
    margin-right: 10px; /* Space between checkbox and label */
    vertical-align: middle; /* Align checkbox vertically with the label */
}


.progress-bar-wrapper {
position: relative;
width: 100%;
margin-bottom: 30px;
height: 150px; /* Adjusted to make room for the labels */
display: flex;
justify-content: center;
align-items: center;
/* Optional: Add overflow hidden to prevent any unintended overflow */
overflow: hidden;
}


.progress-bar-background {
    position: absolute;
    top: 50%;
    left: 15px;          /* &#10229; was 18 % */
    right: 15px;         /* &#10229; was 18 % */
    height: 4px;
    background: #ccc;
    transform: translateY(-50%);
    z-index: 0;
}

/* Progress-bar fill */
.progress-bar-fill {
    position: absolute;
    top: 50%;
    left: 15px;          /* &#10229; keep aligned with new track inset */
    height: 4px;
    background: #007bff;
    transform: translateY(-50%);
    width: 0;            /* set dynamically in JS */
    z-index: 1;
    transition: width 0.4s ease;
}


/* Container for circles */
.progress-bar {
display: flex;
justify-content: space-between;
align-items: center;
position: relative;
width: calc(100%); /* Total width minus left and right offsets */
z-index: 2; /* Above the progress bar */
}

/* Progress Circle */
.progress-step {
position: relative;
text-align: center;
cursor: pointer;
flex: 1; /* Equal spacing */
}

/* Circle element */
.progress-step-circle {
width: 30px;
height: 30px;
background-color: #ccc;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-weight: bold;
margin: 0 auto;
z-index: 3;
position: relative;
}

/* Labels for steps */
.progress-step-label {
position: absolute;
top: 40px; /* Directly below the circle */
width: 100%;
height: 100%;
font-size: 14px;
text-align: center;
}

/* Completed steps (Green) */
.progress-step.completed .progress-step-circle {
background-color: #28a745;
}

/* Current step (Blue) */
.progress-step.active .progress-step-circle {
background-color: #007bff;
}

.radio-group {
display: flex;
flex-direction: row;
}

.radio-group.radio-row {
flex-direction: row;
}

.radio-group.radio-column {
flex-direction: column;
}

.radio-option {
display: flex;
align-items: center;
margin-bottom: 5px;
margin-left: 10%;
}

.radio-option input {
margin-right: 10px;
}

.signature-container {
    display: flex;
    flex-direction: column;
    align-items: center; /* Centers the content horizontally */
    margin-bottom: 10px; /* Add space below the signature pad */
}

.clear-signature-button {
    margin-top: 10px; /* Add space between canvas and button */
}

.invalid-feedback {
    display: block; /* Ensure the error message is displayed */
    color: red; /* Optional: Change text color */
    margin-top: 5px; /* Optional: Add space above the error message */



}

#pdfContainer {
    max-width: 800px; /* Adjust the width as needed */
    margin: 0 auto;
    min-height: 100%;
    position: relative;
    padding: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Center page titles */
.pdfpage h2 {
    text-align: center;
}

        .pdfpage {
            position: relative;
            margin: 0;
            top: 0;
        }
        /* Ensure columns are displayed in a row within the section */
        .section {
            display: flex;
            flex-direction: row;
            justify-content: space-evenly; /* Centers the columns horizontally */
            flex-wrap: wrap; /* Allows columns to wrap to the next line if necessary */
        }
               /* Center section titles */
        .section h3 {
            text-align: center;
            border-bottom: 1px solid #ccc;
            padding-bottom: 5px;
            width: 100%;
        }
        .field-group {
            display: flex;
            flex-wrap: wrap;
            page-break-inside: avoid;
        }
        .field {
            margin: 10px;
        }
        .field label {
            font-weight: bold;
            display: block;
            margin-bottom: 5px;
        }
        /* Style the columns */
        .column {
            /*flex: 1 1 45%; !* Adjust as needed to control the width of columns *!*/
            box-sizing: border-box;
            margin: 10px;
        }

        /* Center any titles within columns if they exist */
        .column h4 {
            text-align: center;
        }
        /* Optional: Center field labels if desired */
        .field label {
            font-weight: bold;
            display: block;
            margin-bottom: 5px;
        }
        .signature {
            text-align: center;
        }
        .signature img {
            max-width: 400px;
            height: auto;
            border: 1px solid #ccc;
        }
        table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 10px;
        }
        td, th {
            border: 1px solid #ccc;
            padding: 8px;
        }

        @media print {
            .print-button,.button, .printHide {
                display: none; !important
                max-width: 73px
            }
            .printOnly {
                  display: block !important;
                }
              .pdfpage::after {
                content: "";
                display: block;
                height: 60px; /* Adjust to your footer height */
              }

.printOnly {
    display: block !important;
  }

  .finalPrintFooter {
    margin-top: 40px;
    padding-top: 15px;
    font-size: 0.85em;
    text-align: center;
  }
                    .column {
                flex: 1 1 45%; /* Ensure columns are maintained when printing */
            }
            .section {
                max-width: 100%; /* Ensure sections are displayed in a single column */
            }

        }
.print-button {
    display: none; !important
    max-width: 73px
}

.payment-container {
  border: 1px solid #ccc;
  padding: 20px;
  margin-bottom: 20px;
}

#card-element-${field.quickbase_fid} {
  padding: 10px;
  border: 1px solid #ccc;
}


.pay-button {
  background-color: #28a745;
  color: #fff;
  padding: 10px 20px;
  border: none;
  cursor: pointer;
}

.pay-button:disabled {
  background-color: #6c757d;
  cursor: not-allowed;
}

.payment-error {
  color: #dc3545;
  margin-top: 10px;
}

.payment-success {
  color: #28a745;
  font-weight: bold;
}

.processing-container {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 10px;
}

.spinner {
  width: 24px;
  height: 24px;
  border: 4px solid rgba(0, 0, 0, 0.1);
  border-top-color: #000;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-right: 10px;
}

.processing-message {
  font-size: 16px;
  color: #000;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.parsley-error {
  border: 2px solid red;
  /* You might also add a background color or an error message element */
}

.bill-table { width:100%; margin-bottom:1rem; border-collapse:collapse }
.bill-table td { padding:4px 8px }
.bill-total  td { font-weight:600; border-top:1px solid #ccc }

/* ——— payment section ——— */
.payment-container {
  border: 2px solid #ddd;
  border-radius: 8px;               /* rounded card */
  padding: 25px;
  margin-bottom: 30px;
}

/* title that sits right above the card element */
.payment-title {
  font-size: 18px;
  font-weight: 600;
  margin: 0 0 15px;
  text-align: center;
  color: #333;
}

/* the Stripe “iframe” element */
.StripeElement,
#card-element-main {                /* fallback for older markup */
  width: 100%;
  padding: 14px 16px;               /* larger click-target */
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 17px;                  /* match other inputs */
  background: #fff;
  box-sizing: border-box;
}

/* focus / error states for nicer feedback */
.StripeElement--focus {
  border-color: #007bff;
  box-shadow: 0 0 0 2px rgba(0,123,255,.25);
}
.StripeElement--invalid {
  border-color: #dc3545;
}
/* prettier payment box on error / focus ---------------------------------- */
.payment-container.parsley-error {
  border-color:#dc3545;
  box-shadow:0 0 0 2px rgba(220,53,69,.25);
}
.payment-container.parsley-error .payment-title {
  color:#dc3545;
}

/* put at the bottom of your stylesheet */
#ratepicker-global-error {
  color: red;
  font-weight: bold;
  font-style: italic;
  margin: 5px 0 15px;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}

.submitting-msg {
  margin-top: .75rem;
  font-weight: 600;
  color: #b45309;     /* amber-600 — or your palette */
}

/* skip-steps ---------------------------------------------------------- */
.progress-step.skipped            { pointer-events:none; }   /* can’t click */
.progress-step.skipped .progress-step-circle {               /* stays grey  */
  background:#ccc !important;
}

.field-table td:first-child {
    width: 25%;
    min-width: 100px;
    font-weight: bold;
    vertical-align: top;
}
/* widen the label / narrow the value ONLY on checkbox rows */
.field-table .checkbox-row td:first-child {  width: 75% !important; }
.field-table .checkbox-row td:nth-child(2)  { width: 25% !important; }
/* centred heading above the invoice */
.payment-heading {
    text-align: center;
    margin: 0 0 8px;
}

/* invoice column widths: description flexes, amount just wide enough */
.payment-table td:first-child  { width: auto;        }
.payment-table td:nth-child(2) { width: 120px; text-align: right; }

/* keep existing bill-table look for totals */
.payment-table .bill-total td:first-child  { font-weight: 600; }


/* &#9472;&#9472;&#9472;&#9472;&#9472; Responsive sub&#8209;record table &#9472;&#9472;&#9472;&#9472;&#9472; */
@media (max-width: 640px) {

  /* 1&#65039;&#8419;  ditch the header row */
  .modal-subrecord-table thead {
    display: none;
  }

  /* 2&#65039;&#8419;  make every part of the table block&#8209;level */
  .modal-subrecord-table,
  .modal-subrecord-table tbody,
  .modal-subrecord-table tr,
  .modal-subrecord-table td {
    display: block;
    width: 100%;
  }

  /* 3&#65039;&#8419;  style each record like a card */
  .modal-subrecord-table tr {
    margin: 0 0 1rem;
    padding: 0.75rem 0.5rem;
    border: 1px solid #e0e0e0;
    border-radius: 0.5rem;
    background: #fff;
  }

  /* 4&#65039;&#8419;  kill the default cell borders/padding */
  .modal-subrecord-table td {
    border: 0;
    padding: 0.25rem 0;
  }

  /* 5&#65039;&#8419;  show the field label above the value */
  .modal-subrecord-table td::before {
    content: attr(data-label);     /* &#8592; thanks to your JS this already exists */
    display: block;
    font-weight: 600;
    font-size: 0.85rem;
    color: #555;
    margin-bottom: 0.15rem;
  }

  /* 6&#65039;&#8419;  put the delete button on its own line & centre it */
  .modal-subrecord-table td:last-child {
    text-align: center;
    margin-top: 0.5rem;
  }
}

.modal-subrecord-table {
  border-collapse: collapse;
  width: 100%;
  margin-top: 0.75rem;
}

.modal-subrecord-table th,
.modal-subrecord-table td {
  padding: 0.5rem 0.75rem;
  border: 1px solid #d6d6d6;
}

.modal-subrecord-table th {
  background: #f8f8f8;
  text-align: left;
  font-weight: 600;
}
/* &#9472;&#9472; stop the sub&#8209;record modal from overflowing on small screens &#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472; */
@media (max-width: 640px) {

  /* 1&#65039;&#8419;  keep the table inside the viewport */
  .modal-subrecord-table {
    width: 100%;
    table-layout: fixed;          /* cells share space instead of growing */
  }

  /* 2&#65039;&#8419;  make the padding part of the box so 100&#8239;% really means 100&#8239;% */
  .modal-subrecord-table td,
  .modal-subrecord-table th {
    box-sizing: border-box;
    padding: 6px;                 /* was 8&#8239;px – a touch slimmer for phones */
  }

  /* 3&#65039;&#8419;  never let the controls add their own width */
  .modal-subrecord-table input,
  .modal-subrecord-table select,
  .modal-subrecord-table textarea {
    width: 100%;
    max-width: 100%;
  }
}
/* &#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;  Improved radio buttons  &#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472; */

/* container */
.radio-group {
  display: flex;
  flex-direction: column;
  gap: 2px;                 /* small space between rows without breaking border */
  border: 1px solid #d1d5db;
  border-radius: .5rem;
  padding: 0;               /* or adjust as needed */
  overflow: hidden;
}

/* “row” */
.radio-option {
  display: flex;
  align-items: center;
  margin: 0;                /* remove any vertical margin */
  border: none;             /* ensure no border around individual options */
  border-radius: 0;         /* remove radius so it doesn’t conflict */
  padding: .6rem .9rem;
  background:#fff;
  cursor: pointer;                     /* whole row is tappable */
  transition: border-color .15s ease;
}

.radio-option:hover {
    background-color: #f9f9f9; /* subtle hover */
}

/* hide the native dot */
.radio-option input[type=radio] {
  appearance: none;
  -webkit-appearance: none;
  width: 1.25rem;
  height: 1.25rem;
  margin: 0 .75rem 0 0;
  position: relative;
  cursor: inherit;                     /* inherits hand/arrow from row */
}

.radio-group:has(input.parsley-error) {
  border-color: #dc3545; /* Bootstrap red */
  box-shadow: 0 0 0 2px rgba(220, 53, 69, 0.2); /* optional: highlight */
}
  .printOnly {
    display: none;
  }

/* custom filled&#8209;in state */
.radio-option input[type=radio]::before {
  content: "";
  position: absolute;
  inset: 2px;
  border-radius: 50%;
  background: #007bff;
  transform: scale(0);                     /* hidden when unchecked */
  transition: scale .15s ease-out;
}

.radio-option input[type=radio]:checked::before {
  transform: scale(1);                /* visible when checked */
}

/* label text */
.radio-option label {
  flex: 1;                             /* takes remaining width */
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.25;
  cursor: inherit;
}

/* error state inherited from your Parsley logic */
.parsley-error .radio-option {
  border-color: #dc3545;
}

/* &#9472;&#9472;&#9472;&#9472;&#9472;  desktop tweaks  (>640 px)  &#9472;&#9472;&#9472;&#9472;&#9472; */
@media (min-width: 640px) {
  .radio-group.radio-row {             /* if JS adds .radio-row */
    flex-direction: row;
  }
}

/* &#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;
   RADIO  v2 – resilient in sub&#8209;record modals & elsewhere
   (keep the earlier block if you want desktop hover rings;
    these rules simply override what needs fixing)
&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472; */

/* 1.  Scope a stricter reset so *only* our custom radios are affected */
:where(.radio-option input[type=radio]) {
  appearance: none;
  -webkit-appearance: none;
  inline-size: 1.25rem;
  block-size: 1.25rem;
  margin: 0 .75rem 0 0;
  border: 2px solid var(--radio-border, #007bff);
  border-radius: 50%;
  position: relative;
  flex-shrink: 0;
  cursor: pointer;
  background-color: #fff;            /* ensures no bleed from modal bg */
  transition: border-color .15s ease;
}

/* 2.  Use ::after for the filled&#8209;in state (avoids Safari quirk w/ ::before) */
.radio-option input[type=radio]::after {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: var(--radio-fill, #007bff);
  transform: scale(0);               /* hidden when unchecked */
  transition: transform .15s ease-out;
}

/* 3.  Checked state – visible dot */
.radio-option input[type=radio]:checked::after {
  transform: scale(1);
}

/* 4.  Focus&#8209;visible ring for keyboard users (inside modal gets its own stack) */
.radio-option input[type=radio]:focus-visible {
  outline: 2px solid #1d4ed8;
  outline-offset: 2px;
}

/* 5.  Container row tweaks – modal inherits tighter font & padding */
.radio-option {
  display: flex;
  align-items: center;
  gap: .25rem;
  padding: .6rem .9rem;
  background: #fff;
  font-size: 0.95rem;                /* match modal’s reduced base size */
  line-height: 1.35;
  cursor: pointer;
}

/* change colour on hover only when a mouse is involved */
@media (hover:hover) {
  .radio-option:hover {
    border-color: var(--radio-border-hover, #2563eb);
  }
}

/* 6.  Full&#8209;row clickability fix in case the JS didn’t run */
.radio-option > label {
  flex: 1 1 auto;
  cursor: pointer;
  user-select: none;
}

/* 7.  Error state from Parsley / GBQ */
.parsley-error .radio-option,
.radio-group.parsley-error .radio-option {
  border-color: #dc3545 !important;
}

/* 8.  Modal&#8209;specific layout – keep radios flush to modal edges on mobile */
.subrecord-modal .radio-group {
  margin-inline: 0;
}

/* &#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472; */
/* &#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472; RADIO ALIGNMENT fix (v3) &#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472; */

/* 1&#65039;&#8419;  remove the old 10&#8239;% indent & use gap for spacing */
.radio-option {
  margin: 0 0 6px 0;          /* vertical rhythm only */
  padding: .35rem .5rem;
  display: flex;
  align-items: center;
  gap: .55rem;                /* consistent dot–label distance */
}

/* 2&#65039;&#8419;  make sure the dot never stretches or shrinks */
.radio-option input[type=radio] {
  flex: 0 0 1.2rem;           /* fixed 20&#8239;px box */
}

/* 3&#65039;&#8419;  label takes the rest of the line */
.radio-option > label {
  flex: 1 1 auto;
  line-height: 1.35;
}

/* 4&#65039;&#8419;  optional: nudge multi&#8209;column layouts */
.radio-group.radio-row {
  align-items: center;        /* vertically centre rows in “row” mode */
}

/* 5&#65039;&#8419;  keep the focus outline visible when tabbing */
.radio-option input[type=radio]:focus-visible {
  /*outline: 2px solid #1d4ed8;*/
  /*outline-offset: 2px;*/
}

/* &#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472; */
/* &#9472;&#9472; final radio tidy&#8209;up &#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472; */
.radio-option {
  margin: 0 0 6px 0 !important;   /* no random 10&#8239;% indent */
  gap: .55rem;                    /* crisp dot&#8209;to&#8209;label spacing */
}
/* &#9472;&#9472;&#9472;&#9472;&#9472; responsive signature pad (single source of truth) &#9472;&#9472;&#9472;&#9472;&#9472; */
.signature-container { width: 100%; }

.signature-container canvas {
  width: 100%;
  aspect-ratio: 2 / 1;            /* 2&#8209;to&#8209;1 fallback; gives height immediately */
  max-width: 100%;
  display: block;                 /* remove inline&#8209;block whitespace */
  touch-action: none;             /* prevent page scroll while signing */
  box-sizing: border-box;
}

.clear-signature-button {
  margin-top: 10px;
}

@media (max-width: 480px) {
  .clear-signature-button { width: 100%; }   /* thumb&#8209;friendly */
}


.ratepicker-container.parsley-error {
  border: 2px solid red;
  padding: 10px;
  border-radius: 5px;
}

/* put this next to the rest of your form styles */
.ratepicker-container.parsley-error{
  border: 2px solid #dc3545;      /* Bootstrap’s danger colour */
  border-radius: .25rem;
}
.form-title {
    text-align: center;
}

.h1{
    margin-bottom: 0;
}

@media (max-width: 420px) {
  .progress-step-label {
    font-size: 10px;
    line-height: 1.2;
    word-break: break-word;
  }

  .progress-step {
    min-width: 48px;
    padding: 0 4px;
  }

  .progress-step-circle {
    width: 24px;
    height: 24px;
    font-size: 12px;
  }
}

.progress-step.step-disabled {
    color: grey;/* “grey&#8209;out” effect */
  cursor: default !important;
}
@media (max-width: 900px) {
  .modal-subrecord-table tr          { display: block; margin-bottom: 1rem; }
  .modal-subrecord-table td          { display: flex; width: 100%; }
  .modal-subrecord-table td::before  {
      content: attr(data-label) ": ";
      font-weight: 600;
      margin-right: .5rem;
      min-width: 8rem;               /* keeps labels aligned */
  }
  .modal-subrecord-table thead       { display: none; }   /* hide the old header */
}

/* keeps blank cells almost invisible yet present */
.modal-hidden-cell {
  position: relative;
}

.modal-hidden-cell::after {
  content: '\00a0';      /* non-breaking space as a spacer */
}
/* one cell = one sub-field */

/* &#9472;&#9472;&#9472; Desktop card layout for wide modals (multi-column) &#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472; */
.modal-subrecord-table.card-layout thead { display:none; }

/* CARD  &#10140;  becomes a grid */
.modal-subrecord-table.card-layout tr{
  display:grid;
  /* tweak 240 px if you want narrower or wider cells */
  grid-template-columns: repeat(auto-fill,minmax(240px,1fr));
  gap:0.75rem 1rem;                 /* row-gap   col-gap */

  margin:0 0 1rem;
  padding:0.75rem 0.5rem;
  border:1px solid #e0e0e0;
  border-radius:0.5rem;
  background:#fff;
}

/* individual field cell */
.modal-subrecord-table.card-layout td{
  border:0;
  padding:0;
  display:flex;
  flex-direction:column;      /* &#128260; NEW – stack label over field */
  align-items:flex-start;     /* make both left-aligned */
}

/* label */
.modal-subrecord-table.card-layout td::before{
  content:attr(data-label);
  font-weight:600;
  margin:0 0 .25rem;          /* &#128260; NEW – space *below* label, not right */
  color:#555;
  white-space:normal;         /* allow wrapping on long labels */
}

/* delete / action cell spans full width */
.modal-subrecord-table.card-layout td:last-child{
  grid-column:1/-1;                 /* stretch across the grid */
  justify-content:flex-end;
  margin-top:0.5rem;
}
/* &#9472;&#9472;&#9472; Hide the whole cell (and ::before label) for ruled-out fields &#9472;&#9472;&#9472; */
.modal-subrecord-table.card-layout td:has(> [hidden]),
.modal-subrecord-table.card-layout td:has(> .hidden){
    display:none !important;
}

/* also hide cells flagged by the JS helper */
.modal-subrecord-table.card-layout td.modal-hidden-cell{
  display:none !important;
}

.modal-card-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1rem;
}

.modal-card {
    flex: 1 1 260px;             /* three-up on desktop, auto-wrap */
    border: 1px solid #ccc;
    border-radius: 6px;
    padding: 0.75rem 1rem;
    box-shadow: 0 1px 3px rgb(0 0 0 / 10%);
}

.modal-card h5 {
    margin: 0 0 0.5rem;
    font-size: 1rem;
}

.modal-card p {
    margin: 0.25rem 0;
    line-height: 1.3;
}