:root {
  --tire-accent-color: #fd7e14; /* Bootstrap Orange */
  --tire-accent-color-lighter: #feb272; /* Soft Pastel Orange (Good for backgrounds/badges) */
  --tire-accent-color-darker: #c96410;  /* Deep Orange (Good for text/borders) */
}
.tire-accent {
    color: var(--tire-accent-color);
}

.bg-dark a,
footer.bg-dark     a {
    color: var(--tire-accent-color);
    text-decoration:none;
}

.bg-dark a:hover,
footer.bg-dark     a:hover {
    color: var(--tire-accent-color-darker);
}

header.bg-dark nav a {
    color: #EEEEEE;
}
header.bg-dark nav a:hover {
    color: #CCCCCC;
} 

.form-control::placeholder, input.form-control::placeholder, textarea.form-control::placeholder {
  color: #d5d5d5; /* A very light grey color */
  opacity: 1; /* Ensures consistent appearance across browsers, especially Firefox */
}
.form-label {
    color: #adb5bd;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 2px;
}
.section-header {
    border-bottom: 1px solid #495057;
    padding-bottom: 5px;
    margin-bottom: 15px;
    color: #fd7e14; /* Orange accent */
    font-weight: 600;
}
/* Custom Drag and Drop styling */
.drop-zone {
    border: 2px dashed #495057;
    border-radius: 5px;
    padding: 20px;
    text-align: center;
    cursor: pointer;
    transition: border 0.3s;
    position: relative;
}
.drop-zone:hover {
    border-color: #fd7e14;
}
.drop-zone-input {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    opacity: 0;
    cursor: pointer;
}