/* Fieldset padding */
#demo-upload-form fieldset,
#rating-form fieldset {
  padding: 15px;
}
/* Scope if you can (e.g., .demo_player or your form wrapper) */
:root { --input-bg: transparent; } /* your dark red */

.form-control, .form-select {
  background-color: transparent !important;
  color: #fff;
}

/* Kill Chrome's white/yellow autofill paint */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
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 1000px var(--input-bg) inset !important;
  box-shadow:        0 0 0 1000px var(--input-bg) inset !important;
  -webkit-text-fill-color: #fff !important;  /* keep text visible */
  caret-color: #fff !important;
  border-radius: inherit;                    /* keep rounded corners clean */
  transition: background-color 9999s ease-out 0s !important; /* prevent flash */
}
#select#inputProvince {ppadding: inherit!important;}
/* Input spacing */
#demo-upload-form input,
#rating-form input {
  margin-bottom: 15px;
}
#rating-form h4 {color: #fff; text-align: center}
/* Dropzone styling */
#demo-upload-form .dropzone,
#rating-form .dropzone {
  margin: 1%;
  border: 2px dashed #fff !important;
  border-radius: 5px;
  transition: 0.2s;
  margin-top: 15px;
}
.form-check-label {margin-top: -3px}
.form-check {
 
    display: flex !important;
    align-items: start;
    justify-content: left;
    width: 100%;
    text-align: left;
    padding-left: 0!important; /* remove Bootstrap default indent */
}

.form-check-input {
  
    margin: 0px 8px 0 0!important; /* small space between checkbox and label */
}
#termsModal h1, #termsModal h2, #termsModal h3, #termsModal h4 {color: #1b1b1b}
.form-check a {color: #fff}

/* Inputs & selects */
#demo-upload-form input, #demo-upload-form select,
#rating-form input, #rating-form select {
  background: transparent;
  border-radius: 0px;
  border: 0;
  border-bottom: 1px solid #fff;
  color: #fff;
}

#demo-upload-form select,
#rating-form select {
  color: #000;
}

/* Labels */
a.shareLink,
#demo-upload-form label a,
#demo-upload-form label,
#rating-form label {
  color: #fff!important;
}

/* Buttons */
#demo-upload-form button,
#rating-form button {
  background: transparent;
  color: #fff !important;
  border: 1px solid #fff;
  border-radius: 0px!important;
}

#demo-upload-form button:hover,
#rating-form button:hover {
  color: #00269d !important;
  background: #fff !important;
}

/* Thank you message */
#thank_you_message h4,
#thank_you_message h5 {
  color: #fff !important;
}

#thank_you_message img {
  display: none !important;
}

p.spinner {
  color: #fff !important;
}

select.form-select.js-floating-select {
  padding-left: 12px !important;
}

/* Social icon inputs */
#demo-upload-form .with-leading-icon .form-control,
#rating-form .with-leading-icon .form-control {
  padding-left: 2.5rem !important;
}

#demo-upload-form .with-leading-icon > label,
#rating-form .with-leading-icon > label {
  padding-left: 2.5rem;
}

#demo-upload-form .with-leading-icon i.fab,
#demo-upload-form .with-leading-icon i.fa-x-twitter,
#rating-form .with-leading-icon i.fab,
#rating-form .with-leading-icon i.fa-x-twitter {
  position: absolute;
  left: 0.5rem;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: #fff;
  font-size: 1.1rem;
  z-index: 3;
  margin-top: -4px
}

/* Focus states */
#demo-upload-form .form-control:focus,
#demo-upload-form .form-select:focus,
#rating-form .form-control:focus,
#rating-form .form-select:focus {
  outline: none !important;
  box-shadow: none !important;
}

/* Validation: invalid */
#demo-upload-form.was-validated .form-control:invalid,
#demo-upload-form.was-validated .form-select:invalid,
#demo-upload-form .form-control.is-invalid,
#demo-upload-form .form-select.is-invalid,
#rating-form.was-validated .form-control:invalid,
#rating-form.was-validated .form-select:invalid,
#rating-form .form-control.is-invalid,
#rating-form .form-select.is-invalid {
  border-bottom: 2px solid #e31b23 !important;
  border-right-color: transparent !important;
  border-left-color: transparent !important;
  border-top-color: transparent !important;
  border-radius: 0 !important;
}

/* Validation: valid */
#demo-upload-form.was-validated .form-control:valid,
#demo-upload-form.was-validated .form-select:valid,
#demo-upload-form .form-control.is-valid,
#demo-upload-form .form-select.is-valid,
#rating-form.was-validated .form-control:valid,
#rating-form.was-validated .form-select:valid,
#rating-form .form-control.is-valid,
#rating-form .form-select.is-valid {
  border-bottom: 2px solid #28a745 !important;
  border-right-color: transparent !important;
  border-left-color: transparent !important;
  border-top-color: transparent !important;
  border-radius: 0 !important;
}

/* Firefox-specific outline removal */
#demo-upload-form .form-control:-moz-focusring,
#demo-upload-form .form-select:-moz-focusring,
#rating-form .form-control:-moz-focusring,
#rating-form .form-select:-moz-focusring {
  outline: none !important;
}

/* Floating label fixes */
.form-floating > .form-select {
  padding-top: 1.625rem;
  padding-bottom: 0.625rem;
}

.form-floating > label {
  padding-top: 0.75rem;
}

/* Legend styling */
legend {
  font-weight: 600;
  font-size: 1.2rem;
  color: #fff !important;
  margin-bottom: 30px !important;
  text-align: center;
}

/* Step 3 row spacing */
#step-3 fieldset row {
  margin-bottom: 15px;
}

/* Remove Firefox focus outline on buttons */
#demo-upload-form button:focus,
#demo-upload-form button:focus-visible,
#rating-form button:focus,
#rating-form button:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}
#ratings-form-wrapper h4 {color: #fff; font-weight: normal}
#ratings-form-wrapper h4 strong{font-weight: 600}
#rating-form h5 {color: #fff; font-weight: normal; text-align: center; font-size: 16px}

/* Make the checkbox clearly show as checked on dark bg */
#rating-form .form-check-input {
  width: 1.1rem; height: 1.1rem;
  cursor: pointer;
  border: 1px solid #fff;
  background-color: transparent;
}
#rating-form .form-check-input:focus {
  box-shadow: none; outline: none;
}

/* Checked state – white box with a black tick */
#rating-form .form-check-input:checked {
  background-color: #fff;
  border-color: #fff;
  /* black checkmark svg */
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='%23000' d='M7.629 14.233l-3.89-3.89 1.414-1.415 2.476 2.476 5.619-5.62 1.415 1.414z'/%3e%3c/svg%3e");
  background-size: 1rem 1rem;
  background-position: center;
  background-repeat: no-repeat;
}
#rating-form .form-check-label { cursor: pointer; }
#rating-form .invalid-feedback { display: none; }
#rating-form.was-validated .form-check-input:invalid ~ .invalid-feedback,
#rating-form .form-check-input.is-invalid ~ .invalid-feedback { display:block; color:#e31b23; }

#ratingConfirmationModal .btn-success {
  color: #fff;
  background-color: #198755 !important;
  border-color: #198754;
  color: #fff !important;
}
#ratingConfirmationModal  .btn-danger {
  background-color: #dc3545 !important;
  border-color: #dc3545;
  color: #fff !important;
}
/* Force native checkbox rendering + brand color for the tick */
.form-check-input {
  appearance: auto !important;
  -webkit-appearance: checkbox !important;
  accent-color: #d31315;            /* tick + fill color (modern browsers) */
  background-color: #fff;            /* checkbox background */
  border: 1px solid #fff;            /* keep your white border */
}

/* Fallback styling for older browsers / Bootstrap */
.form-check-input:checked {
  background-color: #d31315 !important;
  border-color: #d31315 !important;
}
#upload-status {padding: 0 15px!important;}
#upload-status .spinner {text-align: center; font-size: 24px!important}
small.upload-info {
  color: #fff;
  padding: 0 10px;
}

#rating-form {
 
  padding: 30px;
  background: #1b1b1b;
}