body, html { height: 100%; width: 100%; }
.bg { background-image: url('../images/troya-auto.webp'); min-height: 100vh; background-position: left center; background-repeat: no-repeat; background-size: 100% auto; display: flex; justify-content: center; align-items: center; }
.calc { background-color: rgba(255, 255, 255, 0.85); padding: 30px; border-radius: 10px; box-shadow: 0 4px 8px rgba(0,0,0,0.1); margin-bottom: 20px; }
.form-container select, .form-container input[type="date"], .form-container input[type="text"] {
    width: 100%; height: 45px; padding: 0.375rem 0.75rem; font-size: 1.25rem; font-weight: 400; line-height: 1.5; color: #495057; background-color: #fff; border: 1px solid #ced4da; border-radius: 0.25rem; transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out; margin-bottom: 15px;
}
.form-container select:focus, .form-container input[type="date"]:focus, .form-container input[type="text"]:focus { border-color: #80bdff; outline: 0; box-shadow: 0 0 0 0.2rem rgba(0,123,255,0.25); }
.price { font-size: 28px; padding: 10px 20px; border-radius: 10px; }
.badge { background-color: #4D5863; color: #ffffff; }
@media (max-width: 768px) {
    .bg { background-size: cover; background-position: right center; padding: 20px 10px; }
    .calc { width: 100%; padding: 20px; }
    .price { font-size: 22px; padding: 8px 16px; }
}

#loading {
    display: none;
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(255,255,255,0.7);
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
}
.loader {
    border: 8px solid #f3f3f3;
    border-top: 8px solid #314251;
    border-radius: 50%;
    width: 60px;
    height: 60px;
    animation: spin 1s linear infinite;
}
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.select2-container {
    margin-bottom: 15px !important;
    width: 100% !important;
    display: block;
}

.js-example-basic-single {
    margin-bottom: 15px;
}

.select2-container--default .select2-selection--single {
    height: 45px !important;
    padding: 0;
    border: 1px solid #ced4da;
    border-radius: 4px;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 45px !important;
    padding-left: 10px;
}

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

.select2-container--default .select2-results__option {
    padding: 6px 12px;
    font-size: 16px;
}