/* Form styles extracted from theme.css */

.form-group,
.mb-3 {
  position: relative;
}
.form-group .form-label,
.mb-3 .form-label,
.form-group label:not(.form-check-label),
.mb-3 label:not(.form-check-label) {
  font-size: 14px;
  margin-left: 2px;
}
.form-group label.label-checkbox,
.mb-3 label.label-checkbox {
  font-size: 15px;
}

/* Bootstrap 5: Use .form-check for custom controls */
.form-check {
  padding-left: 1.5rem;
}
.form-check-input[type="radio"] {
  margin-left: 0.5rem;
}
.form-check-label {
  margin-left: 0.5rem;
}

/* ==========================================================================
 * BOOTSTRAP 4 COMPATIBILITY - REMOVED (December 26, 2025)
 * ==========================================================================
 * BS4 custom-control classes (.custom-control, .custom-checkbox, .custom-radio,
 * .custom-control-input, .custom-control-label) have been removed.
 * All templates now use BS5 .form-check classes.
 * ~90 lines of CSS removed, saving ~2KB.
 */

select.form-control:not([size]):not([multiple]) {
  height: auto;
}
.form-control.loading {
  background: white url("../../images/loading.gif") no-repeat right center;
  background-size: 10%;
}
.input-group > .form-control:focus {
  box-shadow: none;
}
select.form-control {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  min-width: 100px;
}
.card-search .form-group,
.card-search .mb-3 {
  margin-bottom: 0;
}
#tcs-table {
  min-height: 400px;
}
.input-daterange input {
  text-align: left;
}

/* Datepicker dropdown (moved from theme.css) */
.datepicker-dropdown.dropdown-menu {
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 5px;
  margin: 0;
}

/* Chosen (select enhancement) - highlighted result */
.chosen-container .chosen-results li.highlighted {
  background: var(--primary-color) !important;
  color: #fff !important;
}

.ajax-responsive.loading {
  height: 300px;
  width: 200px;
  margin: auto;
  background: url("../../images/loading.gif") no-repeat center;
  background-size: 20%;
}

.radio + .radio,
.checkbox + .checkbox {
  margin-top: 1rem;
}
.form-control:disabled,
.form-control[readonly] {
  background-color: #f7f7f7;
  opacity: 0.5;
}

.input-group > .form-select:not(:first-child),
.input-group > .form-control:not(:first-child) {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  border: #e0e0e0 solid 1px;
  border-left: none;
}

.input-captcha .form-control::-webkit-input-placeholder {
  text-transform: capitalize;
}

.input-captcha .form-control:-ms-input-placeholder {
  text-transform: capitalize;
}

.input-captcha .form-control::placeholder {
  text-transform: capitalize;
}

/* Legacy checkbox/radio spacing (moved from theme.css) */
input[type="checkbox"],
input[type="radio"] {
  margin-right: 8px;
}

/* Form section headings (moved from theme.css) */
.form h5 {
  text-transform: uppercase;
  color: #000;
  padding: 0.5rem 0;
  margin-bottom: 4px;
  font-size: 15px;
}

/* Quantity input group (moved from theme.css) */
.input-qnt .form-control {
  padding: 0;
  border-left: none !important;
  border-right: none !important;
}

.input-qnt .input-group-text {
  border-radius: 50%;
  height: 40px;
  width: 40px;
  padding: 0;
  text-align: center;
  display: block;
  line-height: 38px;
  font-weight: bold;
  cursor: pointer;
  background: white;
}

/* Legacy custom checkbox/radio controls (moved from theme.css) */
.checkbox label {
  position: relative;
  cursor: pointer;
  padding-left: 25px;
  text-align: left;
  display: block;
  margin-top: -8px;
}

.checkbox input {
  width: 16px;
  opacity: 0.00000001;
  position: absolute;
  left: 0;
  z-index: 999;
  height: 16px;
  cursor: pointer;
}

.checkbox + label {
  display: none;
}

.radio .helper {
  position: absolute;
  top: -0.25rem;
  left: -0.25rem;
  cursor: pointer;
  display: block;
  font-size: 1rem;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  color: #999;
}

.radio .helper::before,
.radio .helper::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  margin: 0.25rem;
  width: 15px;
  height: 15px;
  transition: transform 0.28s ease;
  border: 1px solid currentColor;
}

.radio .helper::after {
  transform: scale(0);
  background-color: #5e83db;
  border-color: #5e83db;
}

.radio label:hover .helper {
  color: #5e83db;
}

.radio input:checked ~ .helper::after {
  transform: scale(0.5);
}

.radio input:checked ~ .helper::before {
  color: #5e83db;
}

.checkbox,
.radio {
  margin: 0;
  display: block;
  padding: 6px 0;
  vertical-align: middle;
}

.checkbox .helper {
  color: #999;
  position: absolute;
  top: 0;
  left: 0;
  width: 14px;
  height: 14px;
  z-index: 0;
  border: 1px solid currentColor;
  border-radius: 0.0625rem;
  transition: border-color 0.28s ease;
}

.checkbox .helper::before,
.checkbox .helper::after {
  position: absolute;
  height: 0;
  width: 2px;
  background-color: #003087;
  display: block;
  transform-origin: left top;
  border-radius: 0.25rem;
  content: "";
  transition: opacity 0.28s ease, height 0s linear 0.28s;
  opacity: 0;
}

.checkbox .helper::before {
  top: 0.65rem;
  left: 0.38rem;
  transform: rotate(-135deg);
}

.checkbox .helper::after {
  top: 0.3rem;
  left: 0;
  transform: rotate(-45deg);
}

.checkbox label:hover .helper {
  color: #5e83db;
}

.checkbox input:checked ~ .helper {
  color: #0461aa;
}

.checkbox input:checked ~ .helper::after,
.checkbox input:checked ~ .helper::before {
  opacity: 1;
  transition: height 0.28s ease;
}

.checkbox input:checked ~ .helper::after {
  height: 0.5rem;
}

.checkbox input:checked ~ .helper::before {
  height: 1.2rem;
  transition-delay: 0.28s;
}

/* Custom radio center (moved from theme.css) - supports BS4 and BS5 */
.custom-radio-center i.text-lg {
  font-size: 50px;
  margin-right: 10px;
  padding: 7px;
}

.custom-radio-center .custom-radio .custom-control-label::before,
.custom-radio-center .custom-radio .custom-control-label::after,
.custom-radio-center .form-check .form-check-label::before,
.custom-radio-center .form-check .form-check-label::after {
  top: 1.5rem;
}

/* CAPTCHA widgets (used across register/contact/cart/client area) */
.reloadcaptcha {
  height: 15px;
  width: 15px;
  display: block;
  background: #fff url("../../images/captcha-reload.png") no-repeat center;
  background-size: cover;
  vertical-align: middle;
  margin-left: 5px;
  cursor: pointer;
  z-index: 99;
  position: absolute;
  right: 10px;
  top: 14px;
}

#captchaimgs {
  margin-right: 5px;
  max-width: 90% !important;
}

.captchacom {
  border-radius: 3px;
}

/* Digit/OTP group inputs */
.digit-group input[type="number"] {
  width: 55px;
  height: 52px;
  border: solid 1px #ddd;
  text-align: center;
  font-size: 24px;
  font-weight: 200;
  margin: 0;
  line-height: 50px;
  border-radius: 5px;
}

.digit-group input::-webkit-outer-spin-button,
.digit-group input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
.digit-group input[type="number"] {
  -moz-appearance: textfield;
}

.payment-btn .alert {
  margin-bottom: 0;
}

/* ==========================================================================
 * FORM ENHANCEMENTS
 * ========================================================================== */

/* Form validation states */
.form-control[aria-invalid="true"],
.form-control.is-invalid {
  border-color: var(--color-danger-base);
  padding-right: calc(1.5em + 0.75rem);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23ef4444'%3E%3Ccircle cx='6' cy='6' r='4.5'/%3E%3Cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3E%3Ccircle cx='6' cy='8.2' r='.6' fill='%23ef4444' stroke='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right calc(0.375em + 0.1875rem) center;
  background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}

.form-control[aria-invalid="true"]:focus,
.form-control.is-invalid:focus {
  border-color: var(--color-danger-base);
  box-shadow: 0 0 0 0.2rem rgba(239, 68, 68, 0.25);
}

.invalid-feedback,
.error-message {
  display: block;
  margin-top: var(--spacing-xs);
  font-size: var(--font-size-sm);
  color: var(--color-danger-base);
}

.form-control[aria-invalid="false"],
.form-control.is-valid {
  border-color: var(--color-success);
  padding-right: calc(1.5em + 0.75rem);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%2310b981'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 6l3 3 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right calc(0.375em + 0.1875rem) center;
  background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}

.valid-feedback,
.success-message {
  display: block;
  margin-top: var(--spacing-xs);
  font-size: var(--font-size-sm);
  color: var(--color-success);
}

/* Form helper text */
.form-text,
.form-helper {
  display: block;
  margin-top: var(--spacing-xs);
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

/* Required field indicator (scoped to label elements to avoid duplicate stars) */
label.required::after,
.form-group > label.required::after {
  content: " *";
  color: var(--color-danger-base);
}

/* If you need to suppress the automatic CSS marker on a specific element,
   add the class `no-required-marker` to that element in the template. */
.no-required-marker::after {
  content: none !important;
}

/* Character counter */
.char-counter {
  display: block;
  text-align: right;
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
}

.char-counter.limit-approaching {
  color: var(--color-warning);
}

.char-counter.limit-exceeded {
  color: var(--color-danger-base);
  font-weight: var(--font-weight-semibold);
}