@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap");
* {
box-sizing: border-box;
}
body {
background: #000000;
margin: 0;
padding: 20px;
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
min-height: 100vh;
overflow-x: hidden;
}
.rental-form {
max-width: 650px;
margin: 0 auto;
color: white;
padding: 40px;
background: linear-gradient(145deg, rgba(15, 15, 15, 0.95), rgba(25, 25, 25, 0.9));
border-radius: 0 0 24px 24px;
box-shadow: 
0 25px 50px rgba(0, 0, 0, 0.5),
0 0 0 1px rgba(255, 255, 255, 0.05),
inset 0 1px 0 rgba(255, 255, 255, 0.1);
backdrop-filter: blur(20px);
position: relative;
overflow-x: hidden;
}
.form-group {
margin-bottom: 28px;
position: relative;
}
.form-label {
display: block;
margin-bottom: 12px;
font-weight: 600;
font-size: 14px;
color: #f0f0f0;
letter-spacing: 0.5px;
text-transform: uppercase;
position: relative;
}
.form-label::after {
content: '';
position: absolute;
bottom: -4px;
left: 0;
width: 30px;
height: 2px;
background: linear-gradient(90deg, #8C52FF, #7A44FF);
border-radius: 1px;
}
.form-input {
width: 100% !important;
padding: 16px 20px !important;
border: 2px solid rgba(255, 255, 255, 0.1) !important;
border-radius: 12px !important;
background: #333 !important;
color: #f0f0f0 !important;
font-size: 16px !important;
font-weight: 400 !important;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
position: relative !important;
backdrop-filter: blur(10px) !important;
box-sizing: border-box !important;
}
.form-input:focus {
outline: none !important;
border-color: #7A44FF !important;
background: #444 !important;
box-shadow: 
0 0 0 4px rgba(122, 68, 255, 0.1),
0 8px 25px rgba(122, 68, 255, 0.15),
inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
transform: translateY(-1px) !important;
}
.form-input:hover {
border-color: rgba(255, 255, 255, 0.2) !important;
background: #3a3a3a !important;
}
.form-input::placeholder {
color: rgba(240, 240, 240, 0.6) !important;
}
#pickup-city,
#return-city {
padding-right: 40px !important;
}
.ios-calendar-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.8);
display: none;
justify-content: center;
align-items: center;
z-index: 10000;
opacity: 0;
transition: opacity 0.3s ease;
backdrop-filter: blur(10px);
}
.ios-calendar-overlay.show {
opacity: 1;
}
.ios-calendar-container {
background: linear-gradient(145deg, rgba(25, 25, 25, 0.98), rgba(35, 35, 35, 0.95));
border-radius: 20px;
padding: 24px;
box-shadow: 
0 25px 50px rgba(0, 0, 0, 0.6),
0 0 0 1px rgba(255, 255, 255, 0.1),
inset 0 1px 0 rgba(255, 255, 255, 0.1);
backdrop-filter: blur(25px);
max-width: 350px;
width: 90vw;
transform: scale(0.9);
transition: transform 0.3s ease;
}
.ios-calendar-overlay.show .ios-calendar-container {
transform: scale(1);
}
.ios-calendar-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
padding: 0 8px;
}
.ios-calendar-title {
font-size: 18px;
font-weight: 600;
color: #f0f0f0;
text-align: center;
flex: 1;
}
.ios-calendar-nav {
background: rgba(122, 68, 255, 0.2);
border: 2px solid rgba(122, 68, 255, 0.3);
border-radius: 8px;
color: #7A44FF;
font-size: 20px;
font-weight: bold;
width: 40px;
height: 40px;
cursor: pointer;
transition: all 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
}
.ios-calendar-nav:hover {
background: rgba(122, 68, 255, 0.3);
border-color: #7A44FF;
transform: scale(1.05);
}
.ios-calendar-weekdays {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 4px;
margin-bottom: 12px;
}
.ios-calendar-weekdays div {
text-align: center;
font-size: 12px;
font-weight: 600;
color: #888;
padding: 8px 4px;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.ios-calendar-days {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 4px;
margin-bottom: 20px;
}
.ios-calendar-day {
aspect-ratio: 1;
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
font-weight: 500;
border-radius: 8px;
cursor: pointer;
transition: all 0.2s ease;
color: #f0f0f0;
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
}
.ios-calendar-day:hover:not(.disabled):not(.empty) {
background: rgba(122, 68, 255, 0.2);
border-color: rgba(122, 68, 255, 0.4);
transform: scale(1.05);
}
.ios-calendar-day.selected {
background: #7A44FF !important;
color: white !important;
border-color: #7A44FF !important;
box-shadow: 0 0 0 2px rgba(122, 68, 255, 0.3);
}
.ios-calendar-day.today {
background: rgba(140, 82, 255, 0.2);
border-color: rgba(140, 82, 255, 0.4);
color: #8C52FF;
font-weight: 600;
}
.ios-calendar-day.disabled {
background: rgba(255, 255, 255, 0.02) !important;
color: #555 !important;
cursor: not-allowed !important;
border-color: rgba(255, 255, 255, 0.05) !important;
}
.ios-calendar-day.empty {
background: transparent !important;
border: none !important;
cursor: default !important;
}
.ios-calendar-actions {
display: flex;
gap: 12px;
justify-content: flex-end;
}
.ios-calendar-btn {
padding: 12px 24px;
border-radius: 8px;
font-size: 14px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
border: 2px solid;
background: transparent;
}
.ios-calendar-cancel {
color: #888;
border-color: rgba(136, 136, 136, 0.3);
}
.ios-calendar-cancel:hover {
background: rgba(136, 136, 136, 0.1);
border-color: #888;
color: #aaa;
}
.ios-calendar-confirm {
color: #7A44FF;
border-color: rgba(122, 68, 255, 0.3);
}
.ios-calendar-confirm:hover {
background: rgba(122, 68, 255, 0.1);
border-color: #7A44FF;
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(122, 68, 255, 0.2);
}
@media screen and (-webkit-min-device-pixel-ratio: 2) {
input[type="date"].form-input {
all: unset !important;
width: 100% !important;
padding: 16px 20px !important;
border: 2px solid rgba(255, 255, 255, 0.1) !important;
border-radius: 12px !important;
background: #333 !important;
color: #f0f0f0 !important;
font-size: 16px !important;
font-weight: 400 !important;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
position: relative !important;
backdrop-filter: blur(10px) !important;
box-sizing: border-box !important;
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
display: block !important;
min-height: 56px !important;
}
input[type="date"].form-input:focus {
outline: none !important;
border-color: #7A44FF !important;
background: #444 !important;
box-shadow: 
0 0 0 4px rgba(122, 68, 255, 0.1),
0 8px 25px rgba(122, 68, 255, 0.15),
inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
transform: translateY(-1px) !important;
}
input[type="date"].form-input:hover {
border-color: rgba(255, 255, 255, 0.2) !important;
background: #3a3a3a !important;
}
.date-time-group input[type="date"].form-input {
border: none !important;
background: transparent !important;
padding: 12px 12px !important;
box-shadow: none !important;
min-height: 48px !important;
}
}
@media (max-width: 480px) {
.ios-calendar-container {
padding: 20px;
max-width: 320px;
}
.ios-calendar-title {
font-size: 16px;
}
.ios-calendar-nav {
width: 36px;
height: 36px;
font-size: 18px;
}
.ios-calendar-day {
font-size: 13px;
}
.ios-calendar-btn {
padding: 10px 20px;
font-size: 13px;
}
input[type="date"].form-input {
all: unset !important;
width: 100% !important;
padding: 14px 16px !important;
border: 2px solid rgba(255, 255, 255, 0.1) !important;
border-radius: 12px !important;
background: #333 !important;
color: #f0f0f0 !important;
font-size: 16px !important;
font-weight: 400 !important;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
position: relative !important;
backdrop-filter: blur(10px) !important;
box-sizing: border-box !important;
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
display: block !important;
min-height: 52px !important;
}
}
.time-dropdown {
width: 100% !important;
padding: 16px 20px !important;
border: 2px solid rgba(255, 255, 255, 0.1) !important;
border-radius: 12px !important;
background: #333 !important;
color: #f0f0f0 !important;
font-size: 16px !important;
font-weight: 400 !important;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
position: relative !important;
backdrop-filter: blur(10px) !important;
box-sizing: border-box !important;
cursor: pointer !important;
appearance: none !important;
background-image: url('data:image/svg+xml;utf8,<svg fill="%23f0f0f0" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5z"/></svg>') !important;
background-repeat: no-repeat !important;
background-position: right 16px center !important;
background-size: 20px !important;
}
.time-dropdown:focus {
outline: none !important;
border-color: #7A44FF !important;
background: #444 !important;
box-shadow: 
0 0 0 4px rgba(122, 68, 255, 0.1),
0 8px 25px rgba(122, 68, 255, 0.15),
inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
transform: translateY(-1px) !important;
}
.time-dropdown:hover {
border-color: rgba(255, 255, 255, 0.2) !important;
background: #3a3a3a !important;
}
.time-dropdown option {
background: #333 !important;
color: #f0f0f0 !important;
padding: 12px 16px !important;
border: none !important;
font-size: 16px !important;
}
.time-dropdown option:hover {
background: #7A44FF !important;
color: #fff !important;
}
.time-dropdown option:checked {
background: #7A44FF !important;
color: #fff !important;
}
@media (min-width: 769px) {
#arrival-time-picker,
#departure-time-picker {
height: 65px !important;
}
.date-time-group #arrival-time-picker,
.date-time-group #departure-time-picker {
height: 48px !important;
}
}
.form-row {
display: flex;
gap: 20px;
margin-bottom: 28px;
}
.form-col {
flex: 1;
min-width: 0;
}
.phone-container {
display: flex !important;
border-radius: 12px !important;
overflow: hidden !important;
border: 2px solid rgba(255, 255, 255, 0.1) !important;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
background: #333 !important;
backdrop-filter: blur(10px) !important;
}
.phone-container:focus-within {
border-color: #7A44FF;
box-shadow: 
0 0 0 4px rgba(122, 68, 255, 0.1),
0 8px 25px rgba(122, 68, 255, 0.15);
transform: none;
}
.country-select {
padding: 16px 15px !important;
background: #2a2a2a !important;
color: #f0f0f0 !important;
border: none !important;
font-size: 14px !important;
cursor: pointer !important;
min-width: 100px !important;
transition: all 0.3s ease !important;
appearance: none !important;
background-image: url('data:image/svg+xml;utf8,<svg fill="%23f0f0f0" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5z"/></svg>') !important;
background-repeat: no-repeat !important;
background-position: right 8px center !important;
background-size: 16px !important;
}
.country-select:focus {
outline: none !important;
background: #444 !important;
}
.phone-input {
flex: 1 !important;
padding: 16px 20px !important;
border: none !important;
background: transparent !important;
color: #f0f0f0 !important;
font-size: 16px !important;
}
.phone-input:focus {
outline: none;
}
.radio-group {
display: flex;
flex-direction: column;
gap: 16px;
margin-top: 8px;
}
.radio-option {
display: flex;
align-items: center;
gap: 12px;
padding: 16px 20px;
border: 2px solid rgba(255, 255, 255, 0.1);
border-radius: 12px;
background: rgba(20, 20, 20, 0.6);
cursor: pointer;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
overflow: hidden;
}
.radio-option::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(122, 68, 255, 0.1), transparent);
transition: left 0.5s ease;
}
.radio-option:hover {
border-color: #7A44FF;
background: rgba(25, 25, 25, 0.8);
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(122, 68, 255, 0.1);
}
.radio-option:hover::before {
left: 100%;
}
.radio-option input[type="radio"] {
width: 20px;
height: 20px;
margin: 0;
accent-color: #7A44FF;
}
.radio-option:has(input[type="radio"]:checked) {
border-color: #7A44FF;
background: rgba(122, 68, 255, 0.15);
box-shadow: 0 0 0 4px rgba(122, 68, 255, 0.1);
}
.radio-option input[type="radio"]:checked {
accent-color: #7A44FF;
}
.radio-option input[type="checkbox"] {
width: 20px;
height: 20px;
margin: 0;
accent-color: #7A44FF;
}
.radio-option:has(input[type="checkbox"]:checked) {
border-color: rgba(255, 255, 255, 0.1);
background: rgba(20, 20, 20, 0.6);
box-shadow: none;
}
.price-summary {
margin-bottom: 24px;
padding: 16px 18px;
background: rgba(20, 20, 20, 0.6);
border: 1px solid rgba(122, 68, 255, 0.25);
border-radius: 12px;
text-align: center;
position: relative;
overflow: hidden;
}
.price-summary::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(45deg, transparent 30%, rgba(255, 255, 255, 0.05) 50%, transparent 70%);
animation: priceShine 3s ease-in-out infinite;
}
@keyframes priceShine {
0% { transform: translateX(-100%); }
100% { transform: translateX(100%); }
}
.price-total {
font-size: 20px;
font-weight: 700;
color: #7A44FF;
margin-bottom: 6px;
text-shadow: none;
}
.price-savings {
font-size: 13px;
font-weight: 600;
color: #2ecc71;
margin-bottom: 8px;
}
.price-savings-note {
font-size: 12px;
font-weight: 500;
color: #bbb;
margin-left: 6px;
}
.price-details {
font-size: 14px;
color: #ddd;
margin-bottom: 4px;
} .price-deposit {
font-size: 13px;
color: #cfc3ff;
margin-top: 8px;
line-height: 1.45;
}
.price-deposit-note {
display: block;
font-size: 12px;
color: #aaa;
margin-top: 2px;
} .price-rate {
font-size: 14px;
color: #bbb;
}
.submit-button {
width: 100% !important;
padding: 18px 40px !important;
background: #8C52FF !important;
color: white !important;
border: 2px solid rgba(255, 255, 255, 0.1) !important;
border-radius: 8px !important;
font-size: 16px !important;
font-weight: 600 !important;
cursor: pointer !important;
transition: all 0.3s ease !important;
position: relative !important;
text-transform: none !important;
letter-spacing: 0.5px !important;
box-shadow: 
0 4px 12px rgba(140, 82, 255, 0.3),
0 2px 4px rgba(0, 0, 0, 0.1) !important;
font-family: inherit !important;
display: inline-block !important;
text-align: center !important;
vertical-align: middle !important;
text-decoration: none !important;
outline: none !important;
}
.submit-button::before {
content: '' !important;
position: absolute !important;
top: 0 !important;
left: 0 !important;
width: 100% !important;
height: 100% !important;
background: transparent !important;
transition: all 0.3s ease !important;
z-index: -1 !important;
}
.submit-button:hover {
background: #7A44FF !important;
transform: translateY(-2px) !important;
box-shadow: 
0 6px 20px rgba(122, 68, 255, 0.4),
0 3px 8px rgba(0, 0, 0, 0.15) !important;
border-color: rgba(255, 255, 255, 0.2) !important;
}
.submit-button:hover::before {
background: rgba(255, 255, 255, 0.1) !important;
}
.submit-button:active {
transform: translateY(0) !important;
box-shadow: 
0 2px 8px rgba(122, 68, 255, 0.3),
0 1px 3px rgba(0, 0, 0, 0.2) !important;
}
.validation-message {
color: #ff6b6b;
font-size: 13px;
margin-top: 8px;
display: none;
font-weight: 500;
animation: fadeInError 0.3s ease;
}
.ramadan-time-note {
color: #f0f0f0;
font-size: 12px;
margin-top: 10px;
opacity: 0.8;
display: none;
}
@keyframes fadeInError {
from { opacity: 0; transform: translateY(-5px); }
to { opacity: 1; transform: translateY(0); }
}
.autocomplete-dropdown {
position: absolute !important;
top: calc(100% + 8px) !important;
left: 0 !important;
width: 100% !important;
max-height: 200px !important;
overflow-y: auto !important;
background: rgba(20, 20, 20, 0.98) !important;
border: 2px solid rgba(122, 68, 255, 0.5) !important;
border-radius: 12px !important;
box-shadow: 
0 15px 35px rgba(0, 0, 0, 0.6),
0 5px 15px rgba(0, 0, 0, 0.4) !important;
z-index: 99999 !important;
display: none !important;
backdrop-filter: blur(25px) !important;
visibility: hidden !important;
opacity: 0 !important;
transition: opacity 0.2s ease, visibility 0.2s ease !important;
}
.form-progress {
margin-bottom: 24px;
}
.progress-track {
position: relative;
height: 6px;
background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 999px;
overflow: hidden;
}
.progress-fill {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 0%;
background: linear-gradient(90deg, #8C52FF, #7A44FF);
box-shadow: 0 8px 25px rgba(122, 68, 255, 0.15);
transition: width 0.3s ease;
}
.progress-labels {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px;
margin-top: 10px;
}
.progress-labels .progress-label {
font-size: 12px;
font-weight: 600;
color: #bbb;
text-align: center;
letter-spacing: 0.5px;
}
.progress-labels .progress-label.active {
color: #f0f0f0;
}
.progress-labels .progress-label.done {
color: #7A44FF;
}
.autocomplete-dropdown[style*="display: block"],
.autocomplete-dropdown.show {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
}
.riad-autocomplete-dropdown.show {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
z-index: 999999 !important;
}
.autocomplete-item {
padding: 12px 16px !important;
cursor: pointer !important;
color: white !important;
border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
transition: all 0.2s ease !important;
background: transparent !important;
display: block !important;
width: 100% !important;
box-sizing: border-box !important;
}
.autocomplete-item:hover {
background: rgba(122, 68, 255, 0.2);
color: #7A44FF;
}
.autocomplete-item:last-child {
border-bottom: none;
}
.terms-deposit-section {
margin: 20px 0;
padding: 16px;
background: rgba(122, 68, 255, 0.05);
border: 1px solid rgba(122, 68, 255, 0.2);
border-radius: 12px;
}
.terms-deposit-label {
display: flex;
align-items: flex-start;
gap: 12px;
cursor: pointer;
margin: 0;
font-weight: normal;
}
.terms-deposit-input {
width: 18px;
height: 18px;
margin: 0;
margin-top: 2px;
cursor: pointer;
accent-color: #7A44FF;
flex-shrink: 0;
}
.terms-deposit-text {
font-size: 14px;
line-height: 1.5;
color: #fff;
flex: 1;
}
#deposit-total-amount {
font-weight: 600;
color: #7A44FF;
}
.terms-deposit-error {
margin-top: 12px;
padding: 8px 12px;
background: rgba(255, 107, 107, 0.1);
border: 1px solid rgba(255, 107, 107, 0.3);
border-radius: 8px;
color: #d63031;
font-size: 13px;
font-weight: 500;
}
@media (max-width: 768px) {
.rental-form {
padding: 24px;
margin: 10px;
border-radius: 0 0 16px 16px;
}
.form-row {
flex-direction: column;
gap: 0;
}
.form-col {
margin-bottom: 20px;
}
.radio-group {
gap: 12px;
}
.submit-button {
font-size: 16px;
padding: 16px 32px;
}
.terms-deposit-section {
margin: 16px 0;
padding: 14px;
}
.terms-deposit-text {
font-size: 13px;
}
.terms-deposit-error {
font-size: 12px;
padding: 6px 10px;
}
.accessories-section {
padding: 20px;
}
.accessory-item {
gap: 14px;
padding: 18px;
}
.accessory-image {
width: 55px;
height: 55px;
}
.accessory-quantity-container {
min-width: 110px;
}
}
@media (max-width: 480px) {
body {
padding: 10px;
}
.rental-form {
padding: 20px;
}
.form-input {
padding: 14px 16px;
font-size: 16px;
}
.date-time-group .form-input {
min-height: 44px !important;
padding: 10px 10px !important;
}
.date-time-group .time-dropdown {
height: 44px !important;
padding: 10px 10px !important;
border-left: 1px solid rgba(255, 255, 255, 0.15) !important;
border-top: none !important;
width: 110px !important;
flex: 0 0 110px !important;
}
.validation-message {
font-size: 12px;
margin-top: 6px;
padding: 6px 8px;
background: rgba(255, 107, 107, 0.15);
border: 1px solid rgba(255, 107, 107, 0.4);
border-radius: 6px;
font-weight: 600;
}
.phone-container {
display: grid !important;
grid-template-columns: 110px 1fr !important;
align-items: center !important;
column-gap: 0 !important;
}
.country-select {
padding: 14px 12px !important;
font-size: 14px !important;
min-width: 90px !important;
flex: 0 0 auto !important;
white-space: nowrap !important;
width: 100% !important;
min-width: auto !important;
margin-bottom: 0 !important;
}
.phone-input {
padding: 14px 16px !important;
font-size: 16px !important;
width: 100% !important;
flex: 0 0 auto !important;
}
.phone-container {
overflow: visible !important;
}
.phone-container[style*="border-color: #ff6b6b"] {
animation: none !important;
}
.phone-container:focus-within {
box-shadow: none !important;
}
.form-input[style*="border-color: #ff6b6b"] {
animation: none !important;
transform: none !important;
}
.quantity-btn {
width: 45px !important;
height: 50px !important;
font-size: 18px !important;
}
.quantity-input {
padding: 14px 16px !important;
font-size: 16px !important;
}
.quantity-label-info {
font-size: 11px !important;
}
.accessories-section {
padding: 16px !important;
margin-bottom: 20px !important;
}
.accessories-title {
font-size: 16px !important;
margin-bottom: 16px !important;
}
.accessory-item {
flex-direction: column !important;
gap: 12px !important;
padding: 16px !important;
text-align: center !important;
}
.accessory-image {
width: 50px !important;
height: 50px !important;
align-self: center !important;
}
.accessory-info {
text-align: center !important;
}
.accessory-name {
font-size: 14px !important;
}
.accessory-price {
font-size: 13px !important;
}
.accessory-description {
font-size: 11px !important;
}
.accessory-quantity-container {
min-width: 100px !important;
}
.accessory-quantity-btn {
width: 30px !important;
height: 35px !important;
font-size: 14px !important;
}
.accessory-quantity-input {
padding: 6px 8px !important;
font-size: 13px !important;
}
.accessories-info {
padding: 8px 12px !important;
font-size: 11px !important;
}
.accessories-accordion-header {
padding: 16px 20px 50px 20px !important;
flex-direction: row !important;
gap: 0 !important;
text-align: left !important;
justify-content: space-between !important;
align-items: flex-start !important;
position: relative !important;
}
.accessories-accordion-title {
font-size: 16px !important;
flex: 1 !important;
text-align: left !important;
}
.accessories-accordion-title::before {
font-size: 18px !important;
}
.accessories-summary {
font-size: 12px !important;
margin: 0 !important;
order: 2 !important;
position: absolute !important;
top: 45px !important;
left: 20px !important;
text-align: left !important;
}
.accessories-accordion-icon {
font-size: 18px !important;
order: 3 !important;
margin-left: auto !important;
flex-shrink: 0 !important;
}
.accessories-info i {
font-size: 12px !important;
}
}
.form-input:focus,
.country-select:focus,
.phone-input:focus {
box-shadow: 
0 0 0 4px rgba(122, 68, 255, 0.1),
0 8px 25px rgba(122, 68, 255, 0.15),
inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
.validation-message[style*="display: block"] {
animation: fadeInError 0.3s ease;
}
.form-label {
color: #f5f5f5;
}
.form-input[style*="border-color: #ff6b6b"] {
animation: shake 0.5s ease-in-out;
}
@keyframes shake {
0%, 100% { transform: translateX(0); }
25% { transform: translateX(-5px); }
75% { transform: translateX(5px); }
}
.form-input[readonly] {
cursor: pointer !important;
background: linear-gradient(135deg, #333, #3a3a3a) !important;
position: relative !important;
}
.form-input[readonly]:hover {
background: linear-gradient(135deg, #3a3a3a, #444) !important;
border-color: rgba(122, 68, 255, 0.3) !important;
transform: translateY(-1px) !important;
}
.form-input[readonly]:focus {
background: linear-gradient(135deg, #444, #4a4a4a) !important;
border-color: #7A44FF !important;
box-shadow: 
0 0 0 4px rgba(122, 68, 255, 0.2),
0 8px 25px rgba(122, 68, 255, 0.15),
inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
transform: translateY(-2px) !important;
}
.form-input[readonly]::after {
content: '🕐';
position: absolute;
right: 15px;
top: 50%;
transform: translateY(-50%);
font-size: 16px;
opacity: 0.7;
pointer-events: none;
}
@keyframes timeFieldPulse {
0%, 100% { box-shadow: 0 0 0 0 rgba(122, 68, 255, 0.1); }
50% { box-shadow: 0 0 0 4px rgba(122, 68, 255, 0.05); }
}
.form-input[readonly]:not(:focus):hover {
animation: timeFieldPulse 2s ease-in-out infinite;
}
.quantity-container {
display: flex !important;
align-items: center !important;
border: 2px solid rgba(255, 255, 255, 0.1) !important;
border-radius: 12px !important;
background: #333 !important;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
backdrop-filter: blur(10px) !important;
overflow: hidden !important;
}
.accessories-section {
margin-bottom: 28px;
padding: 24px;
background: linear-gradient(135deg, rgba(140, 82, 255, 0.08), rgba(122, 68, 255, 0.08));
border: 2px solid rgba(255, 255, 255, 0.1);
border-radius: 16px;
position: relative;
overflow: hidden;
}
.accessories-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(45deg, transparent 30%, rgba(255, 255, 255, 0.02) 50%, transparent 70%);
animation: accessoryShine 4s ease-in-out infinite;
}
@keyframes accessoryShine {
0% { transform: translateX(-100%); }
100% { transform: translateX(100%); }
}
.accessories-title {
font-size: 18px;
font-weight: 600;
color: #f0f0f0;
margin-bottom: 20px;
text-align: center;
letter-spacing: 0.5px;
position: relative;
z-index: 1;
}
.accessories-title::after {
content: '';
position: absolute;
bottom: -8px;
left: 50%;
transform: translateX(-50%);
width: 60px;
height: 2px;
background: linear-gradient(90deg, #8C52FF, #7A44FF);
border-radius: 1px;
}
.accessory-item {
display: flex;
align-items: center;
gap: 16px;
padding: 20px;
background: rgba(20, 20, 20, 0.6);
border: 2px solid rgba(255, 255, 255, 0.1);
border-radius: 12px;
margin-bottom: 16px;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
overflow: hidden;
}
.accessory-item::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(122, 68, 255, 0.1), transparent);
transition: left 0.5s ease;
}
.accessory-item:hover {
border-color: #7A44FF;
background: rgba(25, 25, 25, 0.8);
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(122, 68, 255, 0.1);
}
.accessory-item:hover::before {
left: 100%;
}
.accessory-clickable {
cursor: pointer;
}
.accessory-checkbox {
margin-left: auto;
width: 20px;
height: 20px;
accent-color: #7A44FF;
flex-shrink: 0;
}
.accessory-item:has(.accessory-checkbox:checked) {
border-color: #7A44FF;
background: rgba(122, 68, 255, 0.15);
box-shadow: 0 0 0 4px rgba(122, 68, 255, 0.1);
}
.accessory-image {
width: 60px;
height: 60px;
border-radius: 8px;
object-fit: cover;
border: 2px solid rgba(255, 255, 255, 0.1);
transition: all 0.3s ease;
}
.accessory-item:hover .accessory-image {
border-color: #7A44FF;
transform: scale(1.05);
}
.accessory-info {
flex: 1;
display: flex;
flex-direction: column;
gap: 4px;
}
.accessory-name {
font-size: 16px;
font-weight: 600;
color: #f0f0f0;
margin: 0;
}
.accessory-price {
font-size: 14px;
color: #7A44FF;
font-weight: 500;
margin: 0;
}
.accessory-description {
font-size: 12px;
color: #bbb;
margin: 0;
}
.accessory-quantity {
display: flex;
align-items: center;
gap: 8px;
}
.accessory-quantity-container {
display: flex;
align-items: center;
border: 2px solid rgba(255, 255, 255, 0.1);
border-radius: 8px;
background: #333;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
backdrop-filter: blur(10px);
overflow: hidden;
min-width: 120px;
}
.accessory-quantity-container:focus-within {
border-color: #7A44FF;
box-shadow: 0 0 0 3px rgba(122, 68, 255, 0.1);
}
.accessory-quantity-btn {
width: 35px;
height: 40px;
background: #2a2a2a;
border: none;
color: #f0f0f0;
font-size: 16px;
font-weight: 600;
cursor: pointer;
transition: all 0.2s ease;
display: flex;
align-items: center;
justify-content: center;
user-select: none;
}
.accessory-quantity-btn:hover {
background: #7A44FF;
color: white;
}
.accessory-quantity-btn:active {
background: #7A44FF;
transform: scale(0.95);
}
.accessory-quantity-btn:disabled {
background: #1a1a1a;
color: #666;
cursor: not-allowed;
}
.accessory-quantity-input {
flex: 1;
padding: 8px 12px;
border: none;
background: transparent;
color: #f0f0f0;
font-size: 14px;
font-weight: 500;
text-align: center;
outline: none;
min-width: 50px;
}
.accessories-info {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 20px;
padding: 12px 16px;
background: rgba(122, 68, 255, 0.1);
border: 1px solid rgba(122, 68, 255, 0.3);
border-radius: 8px;
font-size: 13px;
color: #7A44FF;
box-shadow: 0 2px 4px rgba(122, 68, 255, 0.1);
}
.accessories-info i {
color: #7A44FF;
font-size: 14px;
}
.accessories-accordion {
margin-bottom: 28px;
border: 2px solid rgba(255, 255, 255, 0.1);
border-radius: 16px;
background: linear-gradient(135deg, rgba(140, 82, 255, 0.05), rgba(122, 68, 255, 0.05));
overflow: hidden;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.accessories-accordion:hover {
border-color: rgba(255, 255, 255, 0.2);
box-shadow: 0 8px 25px rgba(122, 68, 255, 0.1);
}
.accessories-accordion-header {
padding: 20px 24px;
background: linear-gradient(135deg, rgba(140, 82, 255, 0.08), rgba(122, 68, 255, 0.08));
cursor: pointer;
display: flex;
align-items: center;
justify-content: space-between;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
overflow: hidden;
}
.accessories-accordion-header::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(122, 68, 255, 0.1), transparent);
transition: left 0.5s ease;
}
.accessories-accordion-header:hover {
background: linear-gradient(135deg, rgba(140, 82, 255, 0.12), rgba(122, 68, 255, 0.12));
}
.accessories-accordion-header:hover::before {
left: 100%;
}
.accessories-accordion-title {
font-size: 18px;
font-weight: 600;
color: #f0f0f0;
letter-spacing: 0.5px;
display: flex;
align-items: center;
gap: 12px;
position: relative;
z-index: 1;
}
.accessories-accordion-icon {
font-size: 20px;
color: #7A44FF;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
z-index: 1;
}
.accessories-accordion-icon.rotated {
transform: rotate(180deg);
}
.accessories-accordion-content {
max-height: 0;
overflow: hidden;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
opacity: 0;
}
.accessories-accordion-content.expanded {
max-height: 1000px;
opacity: 1;
padding-bottom: 8px;
}
.accessories-accordion-content .accessories-section {
margin-bottom: 0;
border: none;
background: transparent;
padding: 16px 24px 24px;
}
.accessories-accordion-content .accessories-title {
display: none;
}
.accessories-summary {
font-size: 14px;
color: #bbb;
margin-left: auto;
margin-right: 16px;
position: relative;
z-index: 1;
transition: all 0.3s ease;
}
.accessories-summary.has-items {
color: #7A44FF;
font-weight: 500;
}
.quantity-container:focus-within {
border-color: #7A44FF !important;
box-shadow: 
0 0 0 4px rgba(122, 68, 255, 0.1),
0 8px 25px rgba(122, 68, 255, 0.15) !important;
transform: translateY(-1px) !important;
}
.quantity-container:hover {
border-color: rgba(255, 255, 255, 0.2) !important;
background: #3a3a3a !important;
}
.quantity-btn {
width: 50px !important;
height: 54px !important;
background: #2a2a2a !important;
border: none !important;
color: #f0f0f0 !important;
font-size: 20px !important;
font-weight: 600 !important;
cursor: pointer !important;
transition: all 0.2s ease !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
user-select: none !important;
}
.quantity-btn:hover {
background: #7A44FF !important;
color: white !important;
}
.quantity-btn:active {
background: #7A44FF !important;
transform: scale(0.95) !important;
}
.quantity-btn:disabled {
background: #1a1a1a !important;
color: #666 !important;
cursor: not-allowed !important;
}
.quantity-input {
flex: 1 !important;
padding: 16px 20px !important;
border: none !important;
background: transparent !important;
color: #f0f0f0 !important;
font-size: 16px !important;
font-weight: 500 !important;
text-align: center !important;
outline: none !important;
}
.quantity-label-info {
font-size: 12px !important;
color: #bbb !important;
margin-top: 4px !important;
font-weight: 400 !important;
text-transform: none !important;
letter-spacing: normal !important;
}
.flatpickr-calendar {
background: rgba(20, 20, 20, 0.98) !important;
border: 2px solid rgba(122, 68, 255, 0.5) !important;
border-radius: 12px !important;
box-shadow: 
0 15px 35px rgba(0, 0, 0, 0.6),
0 5px 15px rgba(0, 0, 0, 0.4) !important;
backdrop-filter: blur(25px) !important;
}
.flatpickr-time {
background: transparent !important;
border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
}
.flatpickr-time input {
background: #333 !important;
color: #f0f0f0 !important;
border: 1px solid rgba(255, 255, 255, 0.1) !important;
border-radius: 6px !important;
font-size: 16px !important;
padding: 8px !important;
text-align: center !important;
}
.flatpickr-time input:focus {
border-color: #7A44FF !important;
box-shadow: 0 0 0 2px rgba(122, 68, 255, 0.2) !important;
outline: none !important;
}
.flatpickr-time .flatpickr-time-separator {
color: #f0f0f0 !important;
font-weight: 600 !important;
}
.flatpickr-am-pm {
display: none !important;
}
.flatpickr-time .arrowUp,
.flatpickr-time .arrowDown {
color: #fff !important;
border: none !important;
background: #7A44FF !important;
border-radius: 4px !important;
transition: all 0.2s ease !important;
opacity: 1 !important;
visibility: visible !important;
}
.flatpickr-time .arrowUp:hover,
.flatpickr-time .arrowDown:hover {
background: #7A44FF !important;
color: white !important;
}
@media (max-width: 768px) {
.flatpickr-calendar {
font-size: 14px !important;
}
.flatpickr-time input {
font-size: 14px !important;
padding: 6px !important;
}
}
.form-step {
display: none;
}
.step-navigation {
display: flex;
gap: 12px;
justify-content: flex-end;
margin-top: 16px;
}
.step-button {
width: 160px !important;
padding: 14px 24px !important;
background: #8C52FF !important;
color: white !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
box-sizing: border-box !important;
border: 2px solid rgba(255, 255, 255, 0.1) !important;
border-radius: 8px !important;
font-size: 16px !important;
font-weight: 600 !important;
cursor: pointer !important;
transition: all 0.3s ease !important;
text-transform: none !important;
min-width: 150px !important;
text-align: center !important;
}
.step-button:hover {
background: #7A44FF !important;
}
@media (max-width: 480px) {
.step-navigation {
gap: 8px !important;
}
.step-button {
width: 120px !important;
min-width: 120px !important;
padding: 10px 14px !important;
font-size: 15px !important;
}
}
.date-time-group {
display: flex;
align-items: center;
gap: 0;
border: 2px solid rgba(255, 255, 255, 0.12);
border-radius: 12px;
background: #333;
overflow: hidden;
padding-left: 44px;
position: relative;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.date-time-group::before {
content: '';
position: absolute;
left: 14px;
width: 20px;
height: 20px;
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="%23f0f0f0" viewBox="0 0 24 24"><path d="M19 4h-1V2h-2v2H8V2H6v2H5c-1.103 0-2 .897-2 2v13c0 1.103.897 2 2 2h14c1.103 0 2-.897 2-2V6c0-1.103-.897-2-2-2zM5 19V9h14l.002 10H5z"></path></svg>');
background-repeat: no-repeat;
background-size: 20px 20px;
top: 50%;
transform: translateY(-50%);
opacity: 0.85;
pointer-events: none;
}
.date-time-group:focus-within {
border-color: #7A44FF;
box-shadow:
0 0 0 4px rgba(122, 68, 255, 0.1),
0 8px 25px rgba(122, 68, 255, 0.15);
transform: translateY(-1px);
}
.date-time-group .form-input {
flex: 1 1 auto;
min-width: 0;
padding: 12px 12px !important;
border: none !important;
background: transparent !important;
box-shadow: none !important;
min-height: 40px !important;
}
.date-time-group .form-input:focus {
box-shadow: none !important;
}
.date-time-group .time-dropdown {
flex: 0 0 120px;
min-width: 0;
padding: 12px 12px !important;
border: none !important;
border-left: 1px solid rgba(255, 255, 255, 0.15) !important;
background: transparent !important;
box-shadow: none !important;
height: 40px !important;
}
.date-time-group .time-dropdown option {
background: #333 !important;
color: #f0f0f0 !important;
}
@media (max-width: 768px) {
.date-time-group {
padding-left: 40px;
flex-direction: row;
}
.date-time-group .time-dropdown {
border-left: 1px solid rgba(255, 255, 255, 0.15) !important;
border-top: none !important;
width: 120px !important;
flex: 0 0 120px !important;
height: 44px !important;
}
.date-time-group .form-input {
min-height: 44px !important;
}
}
@media (min-width: 1024px) {
.rental-form {
max-width: 1200px;
padding: 48px;
}
.rental-form form {
display: grid;
grid-template-columns: 1fr 1fr;
column-gap: 28px;
row-gap: 18px;
align-items: start;
overflow-x: hidden;
}
.form-row.step-1 {
grid-column: span 2;
}
#price-summary.step-1 {
grid-column: span 2;
position: static;
margin-top: 8px;
}
.form-group.step-2 {
grid-column: 1;
}
.form-group.step-2.full-width {
grid-column: span 2;
}
#pickup-address-field.step-2 {
grid-column: 1;
}
#return-address-field.step-2 {
grid-column: 2;
}
#pickup-city-field.step-2 {
grid-column: 1;
}
#return-city-field.step-2 {
grid-column: 2;
}
#same-return-section.step-2 {
grid-column: span 2;
}
.form-row.step-2.full-width {
grid-column: span 2;
}
.form-row.step-2 > .form-group {
flex: 1;
min-width: 0;
}
.step-navigation.step-1,
.step-navigation.step-2 {
grid-column: span 2;
}
.accessories-section.step-3,
.terms-deposit-section.step-3,
#price-summary-final.step-3,
.rental-form form > .step-3 {
grid-column: span 2;
}
}
.rental-form .form-group.step-2 {
margin-bottom: 12px !important;
}
.rental-form .form-row.step-1 {
flex-direction: column;
}
.rental-form .form-row.step-2 {
gap: 12px !important;
margin-bottom: 12px !important;
}
.rental-form .step-2 .form-label {
margin-bottom: 6px !important;
font-size: 13px !important;
}
.rental-form .step-2 .form-input {
padding: 12px 16px !important;
font-size: 15px !important;
min-height: 40px !important;
}
.rental-form .step-navigation.step-2 {
justify-content: space-between;
margin-top: 8px !important;
}
.rental-form .step-2 .country-select {
padding: 12px 12px !important;
min-width: 90px !important;
font-size: 13px !important;
min-height: 40px !important;
}
.rental-form .step-2 .phone-input {
padding: 12px 16px !important;
font-size: 15px !important;
}
.rental-form .step-2 .radio-option {
padding: 12px 16px !important;
}
#same-return-section.step-2 {
margin-bottom: 8px !important;
}
@media (max-width: 768px) {
.rental-form .form-group.step-2 {
margin-bottom: 12px !important;
}
.rental-form .step-2 .form-input {
padding: 10px 14px !important;
min-height: 40px !important;
font-size: 14px !important;
}
.rental-form .step-2 .country-select {
padding: 10px 10px !important;
min-width: 84px !important;
font-size: 12px !important;
}
.rental-form .step-2 .phone-input {
padding: 10px 14px !important;
font-size: 14px !important;
}
}
@media (max-width: 768px) {
.accessories-section .accessory-item {
flex-direction: row !important;
text-align: left !important;
gap: 12px !important;
align-items: center !important;
}
.accessories-section .accessory-image {
align-self: flex-start !important;
}
.accessories-section .accessory-info {
text-align: left !important;
}
}
@supports (-webkit-touch-callout: none) {
.rental-form .step-2 select.form-input {
height: 44px !important;
padding: 12px 16px !important;
font-size: 16px !important;
line-height: 1.2 !important;
-webkit-appearance: none !important;
appearance: none !important;
}
}
@media (max-width: 480px) {
.rental-form .step-2 select.form-input {
height: 44px !important;
padding: 12px 14px !important;
font-size: 15px !important;
}
}