/* CustomerForm — consistent visual style matching the booking widget.
   Uses explicit colors so appearance is identical in light and dark mode. */

html, body {
    background: #f0f2f5;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 14px;
    line-height: 1.5;
    color: #333;
}

* {
    box-sizing: border-box;
}

/* ---- Brand header ---- */
.brand-header {
    background: #1a1a2e;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 60px;
    padding: 10px 20px;
}

.brand-logo {
    max-height: 40px;
    max-width: 240px;
    object-fit: contain;
}

.brand-name {
    color: #1a1a2e;
    font-size: 1.5rem;
    font-weight: 600;
    letter-spacing: 0.01em;
}

/* ---- Header ---- */
#header {
    text-align: center;
    font-size: 1.8em;
    font-weight: 600;
    color: #333;
    margin-top: 2rem;
    margin-bottom: 1.5rem;
}

/* ---- Form card ---- */
form#customer-form {
    width: 90%;
    max-width: 680px;
    margin: 0 auto 80px auto;
    background: #fafafa;
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    padding: 24px;
}

/* ---- Section titles ---- */
.form-section-title {
    font-weight: 600;
    font-size: 1.05em;
    color: #333;
    margin: 20px 0 14px 0;
    padding-bottom: 6px;
    border-bottom: 1px solid #eee;
}

.form-section-title:first-child {
    margin-top: 0;
}

/* ---- Inputs and selects ---- */
.form-control,
.form-select,
#date-picker {
    background-color: #ffffff !important;
    color: #333 !important;
    border: 1px solid #ccc !important;
    border-radius: 6px !important;
    font-size: 14px !important;
    font-family: inherit !important;
    transition: border-color 0.2s, box-shadow 0.2s;
    /* Tell the browser to render native UI (including autofill) in light mode for these elements,
       regardless of the document-level color-scheme set by the ABP theme */
    color-scheme: light !important;
}

.form-control:focus,
.form-select:focus,
#date-picker:focus {
    border-color: #4a90d9 !important;
    box-shadow: 0 0 0 2px rgba(74, 144, 217, 0.2) !important;
    outline: none !important;
    background-color: #ffffff !important;
}

/* ---- Date picker standalone ---- */
#date-picker {
    width: 100%;
    padding: 8px 12px;
}

/* ---- Floating label colors ---- */
.form-floating > label {
    color: #666 !important;
    font-size: 0.9em;
}

/* ---- Form element containers ---- */
.form-element-container {
    margin-bottom: 16px;
}

/* ---- Labels and descriptions above inputs ---- */
.form-element-label,
p.form-element-label,
p.form-element-description {
    font-weight: 500;
    font-size: 0.9em;
    color: #333;
    margin-bottom: 4px;
    margin-top: 0;
}

p.form-element-subtitle {
    font-size: 0.85em;
    color: #6c757d;
    margin-bottom: 6px;
    margin-top: 0;
}

.form-element-option-description {
    font-size: 0.9em;
    color: #6c757d;
}

/* ---- Check Availability button ---- */
#check-availability-button {
    background-color: #4a90d9 !important;
    border-color: #4a90d9 !important;
    color: #ffffff !important;
    border-radius: 6px !important;
    font-weight: 500;
    padding: 10px 20px;
    margin-top: 4px;
    margin-bottom: 4px;
}

#check-availability-button:hover:not(:disabled) {
    background-color: #357abd !important;
    border-color: #357abd !important;
}

/* ---- Submit button ---- */
#submit-button.btn-primary {
    background-color: #28a745 !important;
    border-color: #28a745 !important;
    color: #ffffff !important;
    border-radius: 6px !important;
    width: 100%;
    padding: 12px !important;
    font-size: 15px;
    font-weight: 500;
    margin-top: 8px;
}

#submit-button.btn-primary:hover:not(:disabled) {
    background-color: #218838 !important;
    border-color: #218838 !important;
}

#submit-button.btn-secondary {
    background-color: #6c757d !important;
    border-color: #6c757d !important;
    color: #ffffff !important;
    border-radius: 6px !important;
    width: 100%;
    padding: 12px !important;
    font-size: 15px;
    font-weight: 500;
    margin-top: 8px;
}

#submit-button.btn-danger {
    background-color: #dc3545 !important;
    border-color: #dc3545 !important;
    color: #ffffff !important;
    border-radius: 6px !important;
    width: 100%;
    padding: 12px !important;
    font-size: 15px;
    font-weight: 500;
    margin-top: 8px;
}

#submit-button.btn-loading,
#submit-button.btn-loading:hover {
    color: transparent !important;
}

#submit-button.btn-loading > * {
    visibility: hidden;
}

/* ---- Checkbox / radio containers ---- */
.checkbox-container {
    background: #ffffff;
    border: 1px solid #ccc;
    border-radius: 6px;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.checkbox {
    display: flex;
    align-items: center;
    gap: 8px;
}

.checkbox .form-check-label {
    font-weight: normal;
    color: #333;
    cursor: pointer;
    margin: 0;
}

/* ---- Select2 overrides ---- */
.select2-container--default .select2-selection--single {
    background-color: #ffffff !important;
    border: 1px solid #ccc !important;
    border-radius: 6px !important;
    height: 38px !important;
    display: flex;
    align-items: center;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: #333 !important;
    line-height: normal !important;
    padding-left: 8px;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 36px !important;
}

.select2-container--default.select2-container--focus .select2-selection--single {
    border-color: #4a90d9 !important;
    box-shadow: 0 0 0 2px rgba(74, 144, 217, 0.2) !important;
}

.select2-dropdown {
    background-color: #ffffff !important;
    border-color: #ccc !important;
    border-radius: 6px !important;
    color-scheme: light !important;
}

.select2-dropdown .select2-search--dropdown .select2-search__field {
    background-color: #ffffff !important;
    color: #333 !important;
    border-color: #ccc !important;
    color-scheme: light !important;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: #4a90d9 !important;
}

/* ---- jQuery UI Datepicker overrides ---- */
.datepicker,
.datepicker table {
    background-color: #ffffff !important;
    color: #333 !important;
}

.datepicker table td,
.datepicker table th {
    background: #ffffff !important;
    color: #333 !important;
}

.datepicker table td.active,
.datepicker table td.active:hover {
    background: #4a90d9 !important;
    color: #ffffff !important;
}

.datepicker table td:hover,
.datepicker table td.day:hover {
    background: #f0f0f0 !important;
    color: #333 !important;
}

.datepicker table td.old,
.datepicker table td.new {
    color: #aaa !important;
}

/* ---- Alert banners ---- */
.alert {
    border-radius: 8px;
}

/* ---- Elements container (hidden until availability checked) ---- */
#elements-container {
    display: none;
    margin-top: 4px;
}

/* ---- Discount code section ---- */
.discount-code-section {
    margin: 12px 0 8px 0;
}

.discount-input-row {
    display: flex;
    gap: 8px;
    align-items: center;
}

.discount-code-input {
    flex: 1;
    padding: 6px 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 13px;
    text-transform: uppercase;
}

.discount-feedback {
    font-size: 12px;
    margin-top: 4px;
    min-height: 16px;
}

/* ---- Bottom bar (total price) ---- */
.bottom-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: 40px;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: #333;
    color: #ffffff;
    font-weight: 500;
    z-index: 9999;
    padding: 0 16px;
}

/* ---- Due Today bar (stacked above the Total bar) ---- */
.bottom-bar.due-today-bar {
    bottom: 40px;
    background: #555;
}

/* ---- Range input ---- */
input[type="range"] {
    accent-color: #4a90d9;
}

/* ---- Fullcalendar time-picker (legacy, unused) ---- */
#time-picker {
    background-color: #ffffff;
    max-height: 500px;
    overflow: hidden;
    margin-bottom: 16px;
    border-radius: 6px;
    border: 1px solid #ccc;
}

#time-picker thead {
    display: none;
}

:root {
    --fc-today-bg-color: rgba(74, 144, 217, 0.08);
    --fc-bg-event-color: #dc3545;
}

/* ---- Required field validation errors ---- */
.armada-form-element-error .checkbox-container,
.armada-form-element-error input,
.armada-form-element-error select,
.armada-form-element-error textarea {
    border: 1px solid #dc3545 !important;
}

.armada-form-element-error .checkbox-container {
    border-radius: 6px;
}

.armada-field-error {
    color: #dc3545;
    font-size: 0.85em;
    font-weight: 500;
    margin-top: 4px;
}

/* ---- Mobile responsive ---- */
@media (max-width: 575px) {
    /* Stack Bootstrap .col pairs (address/city, state/zip) to full width */
    form#customer-form .row > .col {
        flex: 0 0 100%;
        max-width: 100%;
    }

    /* Push option descriptions to their own line below the option value */
    .form-element-option-description {
        display: block;
        margin-top: 2px;
    }
}

/* ---- Autofill overrides ---- */
/* Chrome animates autofill via background-color transition; setting a 9999s delay freezes it at white.
   The inset box-shadow is a fallback for older browsers. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 9999px #ffffff inset !important;
    box-shadow: 0 0 0 9999px #ffffff inset !important;
    -webkit-text-fill-color: #333 !important;
    caret-color: #333;
    transition: background-color 9999s ease-in-out 0s !important;
}

/* ── Package selector ── */
#package-selector {
    margin-bottom: 16px;
}

.package-option {
    border: 1px solid #dee2e6;
    border-radius: 8px;
    padding: 12px 14px;
    margin-bottom: 8px;
    background: #fff;
    transition: border-color 0.15s;
}

.package-option.pkg-unavailable {
    opacity: 0.5;
    pointer-events: none;
}

.package-option-header {
    display: flex;
    align-items: center;
    gap: 10px;
}

.package-option-label {
    display: flex;
    flex-direction: column;
    cursor: pointer;
    flex: 1;
}

.pkg-option-name {
    font-weight: 500;
}

.pkg-option-meta {
    font-size: 0.85em;
    color: #6c757d;
}

.pkg-quantity-section {
    margin-top: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.pkg-qty-display {
    min-width: 24px;
    text-align: center;
    font-weight: 600;
}

.pkg-qty-label {
    color: #6c757d;
    font-size: 0.85em;
}

/* ── Frontend Booking Form — Apple-Inspired Design Overrides ── */

:root {
  --form-bg:            #f5f5f7;
  --form-card-bg:       #ffffff;
  --form-surface:       #ffffff;
  --form-surface-alt:   #f9f9f9;
  --form-border:        #e0e0e5;
  --form-border-focus:  #1d1d1f;
  --form-text-primary:  #1d1d1f;
  --form-text-secondary:#6e6e73;
  --form-text-placeholder: #aeaeb2;
  --form-accent:        #1d1d1f;
  --form-accent-light:  #f2f2f7;
  --form-success:       #34c759;
  --form-error:         #ff3b30;
  --form-warning-bg:    #fff9ed;
  --form-warning-border:#f5a623;
  --form-radius-input:  999px;
  --form-radius-card:   18px;
  --form-radius-btn:    999px;
  --form-radius-section:14px;
  --form-shadow-xs:     0 1px 2px rgba(0,0,0,0.06);
  --form-shadow-sm:     0 2px 8px rgba(0,0,0,0.07), 0 1px 2px rgba(0,0,0,0.04);
  --form-shadow-md:     0 4px 20px rgba(0,0,0,0.08), 0 1px 4px rgba(0,0,0,0.04);
  --form-shadow-focus:  0 0 0 3px rgba(29,29,31,0.12);
  --form-font:          'DM Sans', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
  --form-transition:    0.18s ease;
}

body {
  background: var(--form-bg) !important;
  font-family: var(--form-font) !important;
  -webkit-font-smoothing: antialiased;
}

.m-5.card.mb-3 {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

#customer-form {
  background: var(--form-card-bg);
  border-radius: var(--form-radius-card);
  box-shadow: var(--form-shadow-md);
  padding: 40px 44px 48px;
  max-width: 720px;
  margin: 0 auto;
  border: 1px solid var(--form-border);
}

.form-section-title {
  font-family: var(--form-font) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: var(--form-text-secondary) !important;
  padding: 0 0 10px 0 !important;
  margin: 32px 0 15px !important;
  border-bottom: 1px solid var(--form-border) !important;
  background: none !important;
}

.form-section-title:first-child {
  margin-top: 0 !important;
}

.form-element-container h1.form-element {
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: var(--form-text-secondary) !important;
  margin: 28px 0 4px !important;
  padding-bottom: 10px !important;
  border-bottom: 1px solid var(--form-border) !important;
}

.form-element-container {
  margin-bottom: 14px !important;
  position: relative;
}

.form-element-label {
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--form-text-primary) !important;
  margin-bottom: 6px !important;
  letter-spacing: -0.01em;
}

.form-element-description {
  font-size: 12px !important;
  color: var(--form-text-secondary) !important;
  margin-top: 5px !important;
  margin-bottom: 0 !important;
}

.form-control.form-element,
input.form-control,
input[type="text"].form-element,
input[type="email"].form-element,
input[type="tel"].form-element,
input[type="number"].form-element,
input[type="time"].form-element,
input[type="date"].form-element {
  height: 48px !important;
  padding: 0 20px !important;
  border-radius: var(--form-radius-input) !important;
  border: 1.5px solid var(--form-border) !important;
  background: var(--form-surface) !important;
  color: var(--form-text-primary) !important;
  font-family: var(--form-font) !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  box-shadow: var(--form-shadow-xs) !important;
  transition: border-color var(--form-transition), box-shadow var(--form-transition) !important;
  outline: none !important;
  -webkit-appearance: none;
}

.form-control.form-element::placeholder,
input.form-control::placeholder {
  color: var(--form-text-placeholder) !important;
}

.form-control.form-element:focus,
input.form-control:focus,
input[type="text"].form-element:focus,
input[type="email"].form-element:focus,
input[type="tel"].form-element:focus,
input[type="number"].form-element:focus {
  border-color: var(--form-border-focus) !important;
  box-shadow: var(--form-shadow-focus) !important;
  background: var(--form-surface) !important;
}

.form-floating {
  position: relative !important;
}

.form-floating > .form-control,
.form-floating > .form-select {
  padding-top: 22px !important;
  padding-bottom: 6px !important;
  height: 56px !important;
  line-height: 1.2 !important;
}

.form-floating > label {
  font-family: var(--form-font) !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  color: var(--form-text-placeholder) !important;
  padding-left: 20px !important;
  padding-right: 20px !important;
  top: 0 !important;
  bottom: 0 !important;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  transform: none !important;
  transition: font-size var(--form-transition), color var(--form-transition), padding-top var(--form-transition), align-items var(--form-transition) !important;
  pointer-events: none !important;
  user-select: none !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  border-radius: var(--form-radius-input) !important;
}

.form-floating > .form-control:focus ~ label,
.form-floating > .form-control:not(:placeholder-shown) ~ label,
.form-floating > .form-select:focus ~ label,
.form-floating > .form-select:not([value=""]):valid ~ label {
  font-size: 11px !important;
  font-weight: 500 !important;
  color: var(--form-text-secondary) !important;
  align-items: flex-start !important;
  padding-top: 8px !important;
}

.form-floating > .form-control:focus,
.form-floating > .form-control:not(:placeholder-shown) {
  padding-top: 24px !important;
  padding-bottom: 4px !important;
}

.form-floating > .form-control::placeholder {
  color: transparent !important;
}

select.form-select.form-element,
select.form-select.generated-select-element {
  height: 48px !important;
  padding: 0 40px 0 20px !important;
  border-radius: var(--form-radius-input) !important;
  border: 1.5px solid var(--form-border) !important;
  background-color: var(--form-surface) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236e6e73' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 16px center !important;
  background-size: 16px !important;
  color: var(--form-text-primary) !important;
  font-family: var(--form-font) !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  box-shadow: var(--form-shadow-xs) !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  cursor: pointer;
  transition: border-color var(--form-transition), box-shadow var(--form-transition) !important;
}

select.form-select.form-element:focus,
select.form-select.generated-select-element:focus {
  border-color: var(--form-border-focus) !important;
  box-shadow: var(--form-shadow-focus) !important;
  outline: none !important;
}

textarea.form-control.form-element,
textarea.form-element {
  border-radius: 16px !important;
  border: 1.5px solid var(--form-border) !important;
  background: var(--form-surface) !important;
  color: var(--form-text-primary) !important;
  font-family: var(--form-font) !important;
  font-size: 15px !important;
  padding: 14px 20px !important;
  min-height: 100px !important;
  box-shadow: var(--form-shadow-xs) !important;
  resize: vertical;
  transition: border-color var(--form-transition), box-shadow var(--form-transition) !important;
}

textarea.form-control.form-element:focus {
  border-color: var(--form-border-focus) !important;
  box-shadow: var(--form-shadow-focus) !important;
  outline: none !important;
}

#date-picker {
  height: 48px !important;
  width: 100% !important;
  padding: 0 20px !important;
  border-radius: var(--form-radius-input) !important;
  border: 1.5px solid var(--form-border) !important;
  background: var(--form-surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236e6e73' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E") no-repeat right 16px center !important;
  background-size: 16px !important;
  color: var(--form-text-primary) !important;
  font-family: var(--form-font) !important;
  font-size: 15px !important;
  box-shadow: var(--form-shadow-xs) !important;
  cursor: pointer;
  transition: border-color var(--form-transition), box-shadow var(--form-transition) !important;
}

#date-picker:focus {
  border-color: var(--form-border-focus) !important;
  box-shadow: var(--form-shadow-focus) !important;
  outline: none !important;
}

.flatpickr-calendar {
  border-radius: var(--form-radius-card) !important;
  box-shadow: var(--form-shadow-md) !important;
  border: 1px solid var(--form-border) !important;
  font-family: var(--form-font) !important;
}

.flatpickr-day.selected,
.flatpickr-day.selected:hover {
  background: var(--form-accent) !important;
  border-color: var(--form-accent) !important;
}

button#check-availability-button,
button#check-availability-button.btn,
button#check-availability-button.btn-primary {
  height: 48px !important;
  padding: 0 28px !important;
  border-radius: var(--form-radius-btn) !important;
  background: var(--form-accent) !important;
  background-color: var(--form-accent) !important;
  color: #ffffff !important;
  font-family: var(--form-font) !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  border: none !important;
  box-shadow: var(--form-shadow-sm) !important;
  cursor: pointer !important;
  transition: opacity var(--form-transition), transform var(--form-transition), box-shadow var(--form-transition) !important;
  margin: 4px 0 20px !important;
  letter-spacing: -0.01em !important;
}

button#check-availability-button:hover,
button#check-availability-button.btn-primary:hover {
  opacity: 0.82 !important;
  transform: translateY(-1px) !important;
  box-shadow: var(--form-shadow-md) !important;
  background-color: var(--form-accent) !important;
}

button#check-availability-button:active {
  transform: translateY(0) scale(0.98) !important;
}

#submit-button {
  height: 52px !important;
  width: 100% !important;
  border-radius: var(--form-radius-btn) !important;
  background: #3a3a3c !important;
  color: #ffffff !important;
  font-family: var(--form-font) !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  border: none !important;
  letter-spacing: -0.01em;
  transition: opacity var(--form-transition) !important;
  margin-top: 28px !important;
}

#submit-button:not(:disabled):hover {
  opacity: 0.8 !important;
}

#submit-button:disabled {
  background: #aeaeb2 !important;
  color: #ffffff !important;
  cursor: not-allowed !important;
  opacity: 1 !important;
}

.checkbox-container {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  padding: 3px 0 !important;
}

.checkbox {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 14px 18px !important;
  margin: 6px 10px !important;
  border-radius: 12px !important;
  border: 1.5px solid var(--form-border) !important;
  background: var(--form-surface) !important;
  box-shadow: var(--form-shadow-xs) !important;
  transition: background var(--form-transition), border-color var(--form-transition) !important;
  position: relative !important;
  cursor: pointer !important;
}

.checkbox .form-check-label {
  flex: 1 !important;
  cursor: pointer !important;
  position: static !important;
}

.checkbox .form-check-label::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  border-radius: 12px !important;
  background: transparent !important;
  border: none !important;
  cursor: pointer !important;
  z-index: 0 !important;
}

.checkbox .form-check-input {
  position: relative !important;
  z-index: 1 !important;
}

.checkbox:has(input:checked) {
  background: var(--form-accent-light) !important;
  border-color: var(--form-accent) !important;
}

.checkbox:hover {
  border-color: #b0b0b5 !important;
}

.form-check-input[type="checkbox"],
.form-check-input[type="radio"] {
  width: 20px !important;
  height: 20px !important;
  flex-shrink: 0 !important;
  border-radius: 6px !important;
  border: 1.5px solid var(--form-border) !important;
  background-color: var(--form-surface) !important;
  box-shadow: none !important;
  cursor: pointer;
  -webkit-appearance: none !important;
  appearance: none !important;
  transition: background var(--form-transition), border-color var(--form-transition) !important;
  position: relative;
}

.form-check-input[type="radio"] {
  border-radius: 50% !important;
}

.form-check-input[type="checkbox"]:checked {
  background-color: var(--form-accent) !important;
  border-color: var(--form-accent) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 12px !important;
}

.form-check-input[type="radio"]:checked {
  background-color: var(--form-accent) !important;
  border-color: var(--form-accent) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='5' fill='%23ffffff'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
}

.form-check-label {
  font-family: var(--form-font) !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  color: var(--form-text-primary) !important;
  cursor: pointer;
  user-select: none;
  line-height: 1.3 !important;
}

.form-check-label::before,
.form-check-label::after,
.form-label::before,
.form-label::after,
label::before,
label::after {
  display: none !important;
  background: none !important;
  background-color: transparent !important;
  border: none !important;
  content: none !important;
}

.bottom-bar {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 16px 24px !important;
  margin-top: 24px !important;
  background: var(--form-surface-alt) !important;
  border: 1px solid var(--form-border) !important;
  border-radius: 14px !important;
  font-family: var(--form-font) !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  color: var(--form-text-primary) !important;
  box-shadow: var(--form-shadow-xs) !important;
}

#total-price {
  font-size: 18px !important;
  font-weight: 600 !important;
  color: var(--form-text-primary) !important;
  letter-spacing: -0.02em;
}

.alert.alert-info[role="alert"] {
  background: #f2f2f7 !important;
  border: 1px solid #d1d1d6 !important;
  border-radius: 12px !important;
  color: var(--form-text-secondary) !important;
  font-family: var(--form-font) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  box-shadow: none !important;
  max-width: 720px;
  margin: 16px auto !important;
}

.alert.alert-warning[role="alert"] {
  background: var(--form-warning-bg) !important;
  border: 1px solid var(--form-warning-border) !important;
  border-radius: 12px !important;
  color: #6d4c00 !important;
  font-family: var(--form-font) !important;
  font-size: 13px !important;
  margin-top: 12px !important;
}

.armada-field-error {
  font-family: var(--form-font) !important;
  font-size: 12px !important;
  color: var(--form-error) !important;
  margin-top: 4px !important;
  padding-left: 4px !important;
  min-height: 0 !important;
}

.row {
  gap: 0 !important;
}

.row > .col {
  padding-left: 8px !important;
  padding-right: 8px !important;
}

.row > .col:first-child {
  padding-left: 0 !important;
}

.row > .col:last-child {
  padding-right: 0 !important;
}

@media (max-width: 640px) {
  #customer-form {
    padding: 24px 20px 32px !important;
    border-radius: 0 !important;
    border-left: none !important;
    border-right: none !important;
    box-shadow: none !important;
  }
  .row {
    flex-direction: column !important;
  }
  .row > .col {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

/* Select2 overrides */
.select2-container--default .select2-selection--single {
  height: 48px !important;
  border-radius: var(--form-radius-input) !important;
  overflow: hidden !important;
  border: 1.5px solid var(--form-border) !important;
  background-color: var(--form-surface) !important;
  box-shadow: var(--form-shadow-xs) !important;
  font-family: var(--form-font) !important;
  display: flex !important;
  align-items: center !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
  font-family: var(--form-font) !important;
  font-size: 15px !important;
  color: var(--form-text-primary) !important;
  padding-left: 20px !important;
  line-height: 48px !important;
}

.select2-container--default .select2-selection--single .select2-selection__placeholder {
  color: var(--form-text-placeholder) !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 48px !important;
  right: 14px !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow b {
  border-color: #6e6e73 transparent transparent transparent !important;
}

.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
  border-color: transparent transparent #6e6e73 transparent !important;
}

.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single {
  border-color: var(--form-border-focus) !important;
  box-shadow: var(--form-shadow-focus) !important;
  outline: none !important;
}

.select2-dropdown {
  border: 1.5px solid var(--form-border) !important;
  border-radius: 14px !important;
  box-shadow: var(--form-shadow-md) !important;
  font-family: var(--form-font) !important;
  overflow: hidden !important;
  background: var(--form-surface) !important;
}

.select2-container--default .select2-results__option--highlighted,
.select2-container--default .select2-results__option--highlighted.select2-results__option,
.select2-container--default .select2-results__option--highlighted:not([aria-selected="true"]) {
  background-color: #f2f2f7 !important;
  background: #f2f2f7 !important;
  color: var(--form-text-primary) !important;
}

.select2-container--default .select2-results__option[aria-selected="true"],
.select2-container--default .select2-results__option[aria-selected="true"].select2-results__option {
  background-color: #e5e5ea !important;
  background: #e5e5ea !important;
  color: var(--form-text-primary) !important;
  font-weight: 500 !important;
}

.select2-results .select2-results__options .select2-results__option.select2-results__option--highlighted {
  background-color: #f2f2f7 !important;
  color: var(--form-text-primary) !important;
}

.form-floating > label,
.form-element-container > label,
.form-element-container .form-label {
  pointer-events: none !important;
  user-select: none !important;
}

.select2-container--default .select2-selection--single {
  border-radius: var(--form-radius-input) !important;
}

.select2-container--default.select2-container--open.select2-container--below .select2-selection--single {
  border-bottom-left-radius: var(--form-radius-input) !important;
  border-bottom-right-radius: var(--form-radius-input) !important;
}

.select2-container--default.select2-container--open.select2-container--above .select2-selection--single {
  border-top-left-radius: var(--form-radius-input) !important;
  border-top-right-radius: var(--form-radius-input) !important;
}

#state-input {
  border-radius: var(--form-radius-input) !important;
}

.form-floating .select2-container,
.form-element-container .select2-container {
  width: 100% !important;
}

.form-floating .select2-selection--single,
.form-element-container .select2-selection--single,
.select2-container .select2-selection--single {
  border-radius: var(--form-radius-input) !important;
  overflow: hidden !important;
}

#customer-form .select2-container--default .select2-selection--single {
  border-radius: var(--form-radius-input) !important;
  height: 48px !important;
  border: 1.5px solid var(--form-border) !important;
  background-color: var(--form-surface) !important;
  display: flex !important;
  align-items: center !important;
}

#customer-form .select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: 48px !important;
}

#customer-form .select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 48px !important;
}

#date-picker.flatpickr-input,
input.flatpickr-input#date-picker,
.flatpickr-wrapper #date-picker,
.flatpickr-wrapper input.flatpickr-input {
  border-radius: var(--form-radius-input) !important;
  height: 48px !important;
  width: 100% !important;
  padding: 0 20px !important;
  border: 1.5px solid var(--form-border) !important;
  font-family: var(--form-font) !important;
  font-size: 15px !important;
  color: var(--form-text-primary) !important;
  box-shadow: var(--form-shadow-xs) !important;
}

.flatpickr-wrapper {
  width: 100% !important;
  display: block !important;
}

#customer-form #date-picker {
  border-radius: var(--form-radius-input) !important;
  height: 48px !important;
  border: 1.5px solid var(--form-border) !important;
  font-family: var(--form-font) !important;
  font-size: 15px !important;
}

.lpx-content .m-5 {
  margin: 0% !important;
}

@media (max-width: 640px) {
  #customer-form {
    width: 100% !important;
  }
}

.brand-header {
  background: none !important;
}

.brand-logo {
  max-height: fit-content !important;
  max-width: 240px !important;
  object-fit: contain !important;
}