/* Theme Name: Motors - Child Theme Theme URI: http://motors.stylemixthemes.com/ Author: StylemixThemes Author URI: http://stylemixthemes.com/ Description: Motors Child theme Version: 4.0 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Tags: blue, red, one-column, two-columns, three-columns, four-columns, left-sidebar, right-sidebar, fixed-layout, fluid-layout, responsive-layout, flexible-header, custom-background, custom-colors, custom-header, custom-menu, editor-style, sticky-post, theme-options Text Domain: motors-child Template: motors This theme, like WordPress, is licensed under the GPL. Use it to make something cool, have fun, and share what you've learned with others. */ /* Add your own styles here */ /*body, .normal_font, h1, h2, h3, h4, h5, h6, p, div, span, a, label{ font-family: din-2014,Arial,sans-serif !important; }*/ .stm-template-car_rental_elementor .stm-fullwidth-with-parallax-bg{ padding: 30px 0 0 0 !important; } .stm-template-car_rental_elementor .stm-reservation-archive{ padding-top: 0px !important; } .stm-template-car_rental_elementor .location-date-widget{ border-radius: 5px; box-shadow: 0 1px 3px rgba(0, 0, 0, .2); background-color: #fff; padding: 15px 0px; } .location-date-widget2{ background-color: #fff !important; padding: 15px 0px; margin-bottom: 20px; box-shadow: 0 1px 3px rgba(0, 0, 0, .2); border-radius: 5px; } .stm-template-car_rental_elementor .stm_single_class_car{ border-radius: .5rem; box-shadow: 0 1px 3px rgba(0, 0, 0, .2); } .stm-template-car_rental_elementor .stm_single_class_car:hover{ border-radius: .5rem; box-shadow: 1px 1px 6px rgba(0, 0, 0, .3); } .stm-template-car_rental_elementor .stm_single_class_car .stm_rent_prices{ margin-top: 10px; /*padding-right: 0px;*/ } @media only screen and (min-width: 768px) { .stm-template-car_rental_elementor .stm_single_class_car .stm_rent_prices .stm_rent_price{ margin-left: 10px; } } .stm_single_class_car { top: 0px !important; position: relative !important; } .goute-btn, .stm-more{ margin-top: 25px; } @media only screen and (max-width: 992px) { .stm-more{ margin-bottom: 10px; } } .pay{ margin-bottom: 10px; } .stm_rent_car_form_wrapper.style_2 .stm_rent_car_form{ width: 100% !important; border-radius: 10px; } .stm_rent_car_form_wrapper.style_1 .stm_rent_car_form{ width: 100% !important; border-radius: 10px; } .stm_rent_car_form_wrapper.style_2 .stm_rent_car_form .stm_rent_form_fields{ border: 0px !important; padding: 15px 12px !important; margin-bottom: 0px !important; } .stm_rent_car_form_wrapper.style_2 .select2-container{ border: 1px solid rgb(177, 177, 177); border-radius: 5px !important; margin-left: 1px; } .stm_rent_car_form_wrapper.style_2 .stm_rent_car_form .stm_rent_form_fields .stm_form_title{ margin-bottom: 6px !important; } .stm_rent_car_form_wrapper.style_1 .stm_form_title { display: block; color: #fff; } .stm-template-car_rental_elementor .stm_date_time_input .stm_date_input{ border: 1px solid rgb(177, 177, 177); border-radius: 5px 0px 0px 5px !important; } .stm-template-car_rental_elementor .stm_date_time_input #pickup-time, .stm-template-car_rental_elementor .stm_date_time_input #drop-time{ padding-left: 10px !important; } .stm-template-car_rental_elementor .stm_date_time_input .stm_time_input{ border-top: 1px solid rgb(177, 177, 177); border-right: 1px solid rgb(177, 177, 177); border-bottom: 1px solid rgb(177, 177, 177); border-radius: 0px 5px 5px 0px !important; } .stm_rent_car_form_wrapper.style_2 .stm_rent_car_form .stm_rent_form_fields .select2-container--default .select2-selection--single{ background-color: #fff !important; border-radius: 5px !important; } .stm_rent_car_form_wrapper.style_2 .stm_rent_car_form .stm_rent_form_fields .stm_date_time_input .stm_date_input input{ background-color: #fff !important; border-radius: 5px 0px 0px 5px !important; } .stm_rent_car_form_wrapper.style_2 .stm_rent_car_form .stm_rent_form_fields .stm_date_time_input .stm_time_input input{ background-color: #fff !important; border-radius: 0px 5px 5px 0px !important; } .modal-open #wrapper{ filter: none !important; } @media (min-width: 768px) { .modal-dialog { margin: 120px auto !important; } } /*.modal{ top: 100px !important; }*/ .modal-header-iconed { padding: 15px 10px 10px 28px !important; } .modal-header-iconed i { position: absolute; top: 13px !important; right: 32px !important; font-size: 30px !important; left: auto !important; color: #fff !important; cursor: pointer; } #send_email_request{ padding: 20px !important; } .location-date{ padding: 10px 10px; border:2px solid #eee; } #send_email_request label{ margin-bottom: 0px !important; } #send_email_request .error { margin-bottom: -20px !important; display:block !important; } .elementor-widget-motors-rental-vehicle-addons, .elementor-widget-motors-rental-reservation-info{ box-shadow: 0 1px 3px rgba(0, 0, 0, .2); } .extra-options{ width: 100%; } .quantity{ width: 80px; text-align: right; margin-top: 5px; margin-right: 0px !important; } .extra-options-multiple-selections{ opacity: 1 !important; visibility: visible !important; width: 40px; border: 2px solid #999; height: 30px; border-radius: 3px; background: #fff !important; } .quantity input[type="checkbox"]{ width: 25px; height: 25px; border-color: var(--motors-base-color) !important; cursor:pointer; } @media only screen and (min-width: 768px) { .extra-options{ padding-left: 10px; } } .charges-details{ width: 100%; } .woocommerce-input-wrapper select{ display: block; width: 100%; height: 47px; line-height: 47px; padding: 0 21px; font-weight: 400; color: #222; border: 2px solid #eceff3; font-size: 14px; outline: none !important; background-color: #eee; } .timepicker input, .CCNumber input{ padding-left: 35px; } .timepicker .stm-icon-date, .CCNumber .fa-credit-card{ position: absolute; top: 45px; left: 28px; color: #777; } .xdsoft_datetimepicker { border: 1px solid #ccc !important; box-shadow: 1px 1px 1px #ccc !important; } @media only screen and (min-width: 768px) { .customer-info{ padding-left: 10px; } } .your-information .error { color: red !important; font-weight: 400 !important; } .your-information input.error, .your-information select.error{ border: 1px solid red; } .your-information .error option { color: black !important; } .your-information label.error { display: inline !important; text-transform: none !important; } .your-information .modal-body, .modal-header{ padding: 20px 30px; } .your-information .woocommerce form .form-row { margin: 0px !important; min-height: 101px !important; } .your-information .form-row textarea { height: 6em !important; } .your-information .woocommerce form .form-row .input-checkbox{ margin-top: 5px !important; } .your-information .woocommerce-terms-and-conditions-link{ color: var(--motors-base-color) !important; } .your-information select { opacity: 1 !important; visibility: visible !important; } .stm-template-car_rental_elementor .stm_single_class_car .stm_rent_prices .stm_rent_price .pay a{ min-width: 150px; border-radius: 25px !important; } .stm-template-car_rental_elementor .stm_single_class_car .stm_rent_prices .stm_rent_price .pay a.rc-reserve-dark{ color: #fff !important; background-color: var(--motors-base-color) !important; } .stm-template-car_rental_elementor .stm_single_class_car .stm_rent_prices .stm_rent_price .pay a.quote-light{ background-color: rgb(255, 255, 255) !important; } .stm-template-car_rental_elementor .stm_single_class_car .stm_rent_prices .stm_rent_price:last-child .pay a.quote-light:hover{ color: rgba(34,34,34,1) !important; } .stm-template-car_rental_elementor .stm_single_class_car .stm_rent_prices .stm_rent_price .pay .rc-reserve-dark:hover { border-color: transparent !important; } #resForm .heading-font, #rc-reservation-next-step, #reserve-btn{ border-radius: 25px; color: #fff !important; } .stm-template-car_rental_elementor .stm_date_time_input input{ color: #333 !important; } .alert { margin-top: 20px; padding: 15px; margin-bottom: 20px; border: 1px solid transparent; border-top-color: transparent; border-right-color: transparent; border-bottom-color: transparent; border-left-color: transparent; border-radius: 4px; } .alert-warning { color: #8a6d3b; background-color: #fcf8e3; border-color: #faebcc; } .create-quote-btn{ display: block !important; margin-bottom: 0px !important; width: 100%; } #rc-carousel .stm_image{ border-radius: 10px; box-shadow: 0 1px 3px rgba(0, 0, 0, .2); height: auto; background: #fff; padding-bottom: 30px; } #rc-carousel .stm_image img{ max-width:100%; min-height:200px; vertical-align: middle; border-radius: 10px 10px 0px 0px; object-fit: cover; height: 200px; width: 100%; } #rc-carousel .car-name{ margin-top: 10px; } #rc-carousel .car-name h4{ margin-bottom: 20px; padding: 0px 10px; } .rc-btn-dark{ background: var(--motors-base-color) !important; padding: 10px 20px !important; border-radius: 25px; color: #fff; font-weight: 600; } .rc-btn-dark:hover , .rc-btn-dark:focus{ color: #fff !important; } .rc-car-medias{ position: absolute; top: 10px; left: 10px; background: #9e9e9e; padding: 1px 5px; border-radius: 5px; color: #fff; } .wp-post-image{ border-radius: 10px; } .carousel-control.left,.carousel-control.right{ background-image:none; top:45%; width:5%; } .carousel-control { color: #484848; } #autoroyal-advance-search-form input[type="checkbox"] { width: 20px; height: 20px; border-color: var(--motors-base-color) !important; cursor: pointer; } .form-check-label div{ height: 25px; width: 25px; width: 24px; background: #fff; border: 2px solid #c3c3c3; margin-top: auto; margin-right: 10px; transition: background-color 0.3s; position: relative; float: left; } .form-check-label div::after { content: ''; display: block; width: 7px; height: 10px; border: solid white; border-top-width: medium; border-right-width: medium; border-bottom-width: medium; border-left-width: medium; border-width: 0 3px 3px 0; transform: rotate(45deg); position: absolute; left: calc(50% - 3px); top: 2px; } .autoroyal-rent-filter-checkbox-unit.checked .form-check-label div{ background: var(--motors-base-color) !important; border: 2px solid var(--motors-base-color) !important; } .elementor-button, .icon_element{ background-color: var(--motors-base-color) !important; } .elementor-icon{ fill: var(--motors-base-color) !important; color: var(--motors-base-color) !important; border-color: var(--motors-base-color) !important; } .elementor-accordion-icon svg { fill: var(--motors-base-color) !important; } .stm-layout-header-car_rental .header-rental.header-listing{ padding: 0px !important; min-height: auto !important; } #top-bar{ border-bottom: none; } .stm-layout-header-car_rental #top-bar .top-bar-wrapper{ padding: 10px 0 !important; } .stm-layout-header-car_rental .header-rental.header-listing .listing-menu > li { padding: 35px 25px 30px 25px; margin-right: -3px !important; margin-bottom: 0px !important; min-width: 120px; } .stm-layout-header-car_rental .header-rental.header-listing .listing-menu > li:hover{ background-color: #333 !important; } .stm-layout-header-car_rental .header-rental.header-listing .header-inner-content .listing-service-right ul{ margin: 0px !important; } .stm-template-car_rental_elementor #header { min-height: 75px !important; } #header { position: relative; z-index: 999 !important; } #wrapper #header .header-listing.stm-fixed{ padding-top: 0px !important; padding-bottom: 0px !important; } .stm-layout-header-car_dealer .header-nav.header-nav-default, .stm-layout-header-car_dealer .header-nav.header-nav-default.header-nav-fixed.header-nav-sticky{ background-color: #4d4d4d; } .stm-layout-header-car_dealer .main-menu .header-menu{ margin-top: 0px !important; } .stm-layout-header-car_dealer .main-menu .header-menu > li > a{ padding-top: 17px !important; } .stm-layout-header-ev_dealer .main-menu .header-menu > li > a{ height: 25px !important; } .stm-layout-header-ev_dealer .header-main.stm-fixed .header-row{ padding-top: 20px !important; padding-bottom: 20px !important; } .home.stm-layout-header-listing_five #wrapper .header-main:not(.stm-fixed) { padding: 20px 0 0px !important; } .stm-layout-header-motorcycle .stm_motorcycle-header .stm_mc-nav .main-menu .header-menu > li > a { padding: 10px 22px !important; } .stm_rent_car_form_wrapper.style_1 .stm_rent_car_form{ background-color: rgba(24, 24, 24, 0.68) !important; } .stm_rent_car_form_wrapper.style_1 .stm_rent_form_fields{ margin-top: 30px !important; } .stm_rent_car_form_wrapper.style_1 .heading-font{ width: 100% !important; background: var(--motors-base-color) !important;; } .stm_rent_car_form_wrapper.style_1 .stm_rent_car_form .stm_rent_form_fields .select2-container--default .select2-selection--single{ background-color: #fff !important; border-radius: 5px !important; } .stm_rent_car_form_wrapper.style_1 .stm_rent_car_form .stm_rent_form_fields .stm_date_time_input .stm_date_input input{ background-color: #fff !important; border-radius: 5px 0px 0px 5px !important; } .stm_rent_car_form_wrapper.style_1 .stm_rent_car_form .stm_rent_form_fields .stm_date_time_input .stm_time_input input{ background-color: #fff !important; border-radius: 0px 5px 5px 0px !important; } .stm_rent_car_form_wrapper { padding: 0px !important; margin-top: 0px !important; text-align: center !important; } .stm_rent_car_form_wrapper .stm_rent_car_form{ padding: 0px 30px 30px 30px !important; } @media only screen and (max-width: 1114px) { .stm-layout-header-car_rental .header-rental.header-listing{ padding-top: 15px !important; } .stm-fixed-invisible-mobile .header-inner-content{ margin-top: 15px; } } #isotope-containerx{ width: 100%; margin-left: 0px; } .stm_rental_option_content .price{ margin:5px; } .change_booking_info { text-align: center; margin-top: 28px; margin-bottom: 28px; font-weight: 650; } .change_booking_info a{ color: var(--motors-base-color) !important; } .stm-template-car_rental_elementor .stm-fullwidth-with-parallax-bg .container .row > div .stm_nav_wizard_step{ margin-bottom: 15px !important; } .stm-template-car_rental_elementor .stm-fullwidth-with-parallax-bg .container .row > div .stm_nav_wizard_step .inner .top{ border-radius: 5px 5px !important; } .stm-template-car_rental_elementor .stm-fullwidth-with-parallax-bg .container .row > div .stm_nav_wizard_step .inner .top .number{ border-radius: 5px 0px 0px 5px !important; } .stm-template-car_rental_elementor .stm_rental_coupon form.stm_checkout_coupon p.form-row-last::after{ top: 8px !important; } .stm-template-car_rental_elementor .stm_rental_coupon form.stm_checkout_coupon p.form-row-last, .stm-template-car_rental_elementor .stm_rental_coupon form.stm_checkout_coupon .input-text{ height: 40px !important; } .charges-summary{ width: 100%; } .woocommerce-billing-fields, .stm_rent_order_info { border-radius: 5px !important; } @media (max-width: 767px) { .stm_rent_order_info { margin-top: 0px !important; } .promocode{ margin-top: 20px; } .stm-template-car_rental_elementor .stm_single_class_car{ border: 1px solid #00aeef; } } @media (min-width: 767px) { #rc-login .modal-dialog, #rc-forgetPassword .modal-dialog{ max-width: 450px; } } /* ============================================================ Auth modals — login + forgot password. Scoped under .rc-auth-modal so we don't bleed into other modals. */ .rc-auth-modal .modal-dialog { max-width: 460px; margin: 1.75rem auto; } .rc-auth-modal .modal-content { border: none; border-radius: 16px; background: #ffffff; overflow: hidden; box-shadow: 0 24px 60px rgba(15, 23, 42, 0.18), 0 8px 24px rgba(15, 23, 42, 0.10); } /* Header — dark slate with cyan accent brand tile */ #rc-login.rc-auth-modal .modal-header, #rc-forgetPassword.rc-auth-modal .modal-header, .rc-auth-modal .modal-header { padding: 22px 24px !important; background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%) !important; background-color: #0f172a !important; border-bottom: none !important; border-radius: 0 !important; display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 12px; } .rc-auth-modal__brand { display: flex; align-items: center; gap: 14px; min-width: 0; flex: 1; } .rc-auth-modal__brand-icon { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 12px; background: rgba(0, 174, 239, 0.18); color: var(--motors-base-color, #00aeef); } .rc-auth-modal__brand-text { min-width: 0; } #rc-login.rc-auth-modal .modal-title, #rc-forgetPassword.rc-auth-modal .modal-title, .rc-auth-modal .modal-title { margin: 0 0 2px !important; padding: 0 !important; font-size: 17px !important; font-weight: 600 !important; color: #ffffff !important; letter-spacing: 0.2px !important; line-height: 1.25 !important; text-transform: none !important; } .rc-auth-modal__subtitle { display: block; font-size: 12.5px; font-weight: 400; color: rgba(255, 255, 255, 0.65); line-height: 1.3; } /* Close X — frosted-glass icon button consistent with #rc-more-info-modal */ #rc-login.rc-auth-modal .modal-header .rc-auth-modal__close, #rc-forgetPassword.rc-auth-modal .modal-header .rc-auth-modal__close, #rc-login.rc-auth-modal .modal-header .close, #rc-forgetPassword.rc-auth-modal .modal-header .close, .rc-auth-modal .modal-header .rc-auth-modal__close { position: relative; flex-shrink: 0; display: inline-flex !important; align-items: center; justify-content: center; width: 36px; height: 36px; margin: 0 !important; padding: 0 !important; font-size: 22px !important; font-weight: 400 !important; line-height: 1 !important; color: #ffffff !important; background: rgba(255, 255, 255, 0.10) !important; border: 1px solid rgba(255, 255, 255, 0.18) !important; border-radius: 10px !important; text-shadow: none !important; opacity: 1 !important; cursor: pointer; float: none !important; transition: background-color .15s ease, border-color .15s ease, transform .15s ease; } #rc-login.rc-auth-modal .modal-header .rc-auth-modal__close > span, #rc-forgetPassword.rc-auth-modal .modal-header .rc-auth-modal__close > span, #rc-login.rc-auth-modal .modal-header .close > span, #rc-forgetPassword.rc-auth-modal .modal-header .close > span { display: inline-block; margin-top: -2px; line-height: 1; pointer-events: none; } .rc-auth-modal .modal-header .rc-auth-modal__close:hover, .rc-auth-modal .modal-header .close:hover { background: rgba(255, 255, 255, 0.20) !important; border-color: rgba(255, 255, 255, 0.40) !important; transform: scale(1.05); } .rc-auth-modal .modal-header .rc-auth-modal__close:focus, .rc-auth-modal .modal-header .close:focus { outline: none; box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.25) !important; } /* Body */ .rc-auth-modal .modal-body { padding: 24px 28px 28px; background: #ffffff; } .rc-auth-modal .rc-auth-form { margin: 0; } /* Field */ .rc-auth-modal .rc-auth-field { margin: 0 0 16px; } .rc-auth-modal .rc-auth-field > label { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 0 6px !important; padding: 0 !important; font-size: 12.5px !important; font-weight: 600 !important; color: #334155 !important; letter-spacing: 0.2px; text-transform: uppercase; } .rc-auth-modal .rc-auth-field > label .req { color: #dc2626; margin-left: 2px; } /* Forgot link inside the password label row */ .rc-auth-modal__forgot-link { font-size: 11.5px !important; font-weight: 500 !important; letter-spacing: 0 !important; text-transform: none !important; color: var(--motors-base-color, #00aeef) !important; text-decoration: none !important; transition: color .15s ease; } .rc-auth-modal__forgot-link:hover, .rc-auth-modal__forgot-link:focus { color: #007fb0 !important; text-decoration: underline !important; outline: none; } /* Input wrapper with left-side SVG icon (mail/lock) */ .rc-auth-modal .rc-auth-input { position: relative; display: flex; align-items: stretch; } .rc-auth-modal .rc-auth-input::before { content: ""; position: absolute; top: 50%; left: 14px; width: 16px; height: 16px; transform: translateY(-50%); background-repeat: no-repeat; background-position: center; background-size: 16px 16px; opacity: .55; pointer-events: none; z-index: 2; transition: opacity .15s ease; } .rc-auth-modal .rc-auth-input:focus-within::before { opacity: 1; } .rc-auth-modal .rc-auth-input--mail::before { background-image: url("data:image/svg+xml;utf8,"); } .rc-auth-modal .rc-auth-input--lock::before { background-image: url("data:image/svg+xml;utf8,"); } /* Input */ .rc-auth-modal .rc-auth-input > input.form-control, .rc-auth-modal .rc-auth-input > input { flex: 1; width: 100% !important; height: 46px !important; margin: 0 !important; padding: 0 14px 0 40px !important; font-size: 14px !important; font-weight: 500 !important; color: #0f172a !important; background-color: #f8fafc !important; border: 1.5px solid #e2e8f0 !important; border-radius: 10px !important; box-shadow: none !important; outline: none !important; transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease; box-sizing: border-box; font-family: inherit; } /* Password input — room for the eye toggle */ .rc-auth-modal .rc-auth-input--lock > input { padding-right: 44px !important; } .rc-auth-modal .rc-auth-input > input::placeholder { color: #94a3b8 !important; font-weight: 400 !important; opacity: 1; } .rc-auth-modal .rc-auth-input > input:hover { border-color: #cbd5e1 !important; } .rc-auth-modal .rc-auth-input > input:focus { border-color: var(--motors-base-color, #00aeef) !important; background-color: #ffffff !important; box-shadow: 0 0 0 3px rgba(0, 174, 239, 0.15) !important; } /* Show/hide password toggle */ .rc-auth-modal .rc-auth-input__toggle { position: absolute; top: 50%; right: 8px; transform: translateY(-50%); display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; margin: 0; padding: 0; color: #94a3b8 !important; background: transparent !important; border: none !important; border-radius: 8px; cursor: pointer; box-shadow: none !important; transition: color .18s ease, background-color .18s ease, transform .15s ease; z-index: 3; } .rc-auth-modal .rc-auth-input__toggle:hover { color: #334155 !important; background: rgba(15, 23, 42, 0.06) !important; } .rc-auth-modal .rc-auth-input__toggle:focus, .rc-auth-modal .rc-auth-input__toggle:focus-visible { outline: none !important; color: var(--motors-base-color, #00aeef) !important; background: color-mix(in srgb, var(--motors-base-color, #00aeef) 12%, transparent) !important; box-shadow: 0 0 0 2px color-mix(in srgb, var(--motors-base-color, #00aeef) 30%, transparent) !important; } .rc-auth-modal .rc-auth-input__toggle:active { transform: translateY(-50%) scale(.92); } /* When the password is currently revealed, signal the active state with a soft brand-tinted background + brand-colored icon. */ .rc-auth-modal .rc-auth-input__toggle.is-visible { color: var(--motors-base-color, #00aeef) !important; background: color-mix(in srgb, var(--motors-base-color, #00aeef) 14%, transparent) !important; } .rc-auth-modal .rc-auth-input__toggle .rc-auth-input__toggle-hide { display: none; } .rc-auth-modal .rc-auth-input__toggle.is-visible .rc-auth-input__toggle-show { display: none; } .rc-auth-modal .rc-auth-input__toggle.is-visible .rc-auth-input__toggle-hide { display: inline-block; } /* Buttons */ .rc-auth-modal .rc-auth-btn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 46px; padding: 0 18px; margin: 8px 0 0 !important; font-size: 14px; font-weight: 600; letter-spacing: 0.2px; border-radius: 10px; border: 1.5px solid transparent; cursor: pointer; line-height: 1; text-decoration: none !important; transition: filter .15s ease, transform .1s ease, box-shadow .15s ease, background-color .15s ease, border-color .15s ease, color .15s ease; } .rc-auth-modal .rc-auth-btn:focus { outline: none; box-shadow: 0 0 0 3px rgba(0, 174, 239, 0.25); } #rc-login.rc-auth-modal .rc-auth-btn--primary, #rc-forgetPassword.rc-auth-modal .rc-auth-btn--primary, .rc-auth-modal .rc-auth-btn--primary { color: #ffffff !important; background: var(--motors-base-color, #00aeef) !important; border-color: var(--motors-base-color, #00aeef) !important; box-shadow: 0 4px 12px rgba(0, 174, 239, 0.25); margin-top: 8px !important; } .rc-auth-modal .rc-auth-btn--primary:hover { filter: brightness(0.95); transform: translateY(-1px); box-shadow: 0 6px 16px rgba(0, 174, 239, 0.35); } .rc-auth-modal .rc-auth-btn--primary:active { transform: translateY(0); } .rc-auth-modal .rc-auth-btn--ghost { background: #ffffff; color: #fff; border-color: #e2e8f0; margin-top: 10px !important; } .rc-auth-modal .rc-auth-btn--ghost:hover { background: #f8fafc; border-color: #cbd5e1; color: #0f172a; } /* Validation — error chip below the input, minimal & transparent */ .rc-auth-modal .rc-auth-input > input.error { border-color: #ef4444 !important; background-color: #fff5f5 !important; box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.12) !important; } .rc-auth-modal label.error { display: flex !important; align-items: center; gap: 4px; width: fit-content; max-width: 100%; margin: 6px 0 0 !important; padding: 0 !important; font-size: 11px !important; font-weight: 500 !important; line-height: 1.2 !important; color: #dc2626 !important; background: transparent !important; border: none !important; border-radius: 0 !important; box-shadow: none !important; letter-spacing: 0 !important; text-transform: none !important; pointer-events: none; transition: opacity .15s ease, transform .15s ease, visibility 0s linear .15s; } .rc-auth-modal label.error::before { content: ""; flex-shrink: 0; width: 11px; height: 11px; background-repeat: no-repeat; background-position: center; background-size: 11px 11px; background-image: url("data:image/svg+xml;utf8,"); } .rc-auth-modal .rc-auth-input:focus-within ~ label.error, .rc-auth-modal .rc-auth-input:focus-within label.error { opacity: 0; visibility: hidden; } .rc-auth-modal label.error[style*="display: none"], .rc-auth-modal label.error[style*="display:none"], .rc-auth-modal label.error:empty, .rc-auth-modal .rc-auth-input > input:not(.error) + label.error, .rc-auth-modal .rc-auth-input > input.valid + label.error { display: none !important; } .rc-auth-modal .rc-auth-input input.error:focus { border-color: var(--motors-base-color, #00aeef) !important; background-color: #ffffff !important; box-shadow: 0 0 0 3px rgba(0, 174, 239, 0.15) !important; } /* Phone layout */ @media (max-width: 575.98px) { .rc-auth-modal .modal-dialog { margin: 0.75rem; } .rc-auth-modal .modal-header { padding: 18px 18px !important; } .rc-auth-modal .modal-body { padding: 20px 18px 22px; } .rc-auth-modal__brand-icon { width: 36px; height: 36px; } } .stm-reservation-archive .alert-info{ border: 1px solid #00aeef !important; } #order_details .row{ background: #fff !important; padding: 20px; } .stm-layout-header-car_rental #top-bar .top-bar-wrapper{ display: block !important; } .btn:focus, .btn:hover { color: #fff; } /* ============================================================ Account dropdown (top-bar, logged-in state). Parent markup: partials/top-bar.php → #dropdownMenuButton + #account-dropdown Styled here so we don't touch the parent theme. */ /* Trigger button */ .header-top-bar-socs .dropdown > #dropdownMenuButton.btn.dropdown-toggle { display: inline-flex !important; align-items: center; gap: 8px; padding: 0px 6px !important; margin: 0; font-size: 10px !important; font-weight: 600 !important; letter-spacing: 0.4px; text-transform: uppercase; color: #ffffff !important; background: rgba(255, 255, 255, 0.08) !important; border: 1px solid rgba(255, 255, 255, 0.18) !important; border-radius: 999px !important; box-shadow: none !important; cursor: pointer; text-decoration: none !important; transition: background-color .15s ease, border-color .15s ease, color .15s ease, transform .1s ease; } .header-top-bar-socs .dropdown > #dropdownMenuButton.btn.dropdown-toggle:hover, .header-top-bar-socs .dropdown > #dropdownMenuButton.btn.dropdown-toggle:focus, .header-top-bar-socs .dropdown.show > #dropdownMenuButton.btn.dropdown-toggle, .header-top-bar-socs .dropdown > #dropdownMenuButton.btn.dropdown-toggle[aria-expanded="true"] { background: rgba(0, 174, 239, 0.18) !important; border-color: rgba(0, 174, 239, 0.45) !important; color: #ffffff !important; outline: none !important; } .header-top-bar-socs .dropdown > #dropdownMenuButton.btn.dropdown-toggle::before { content: ""; width: 24px; height: 24px; border-radius: 50%; background: var(--motors-base-color, #00aeef); background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: center; background-size: 14px 14px; flex-shrink: 0; box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.10); margin-left: -6px; } /* Override Bootstrap's default caret — use a chevron icon */ .header-top-bar-socs .dropdown > #dropdownMenuButton.btn.dropdown-toggle::after { display: inline-block; width: 8px; height: 8px; margin: 0 0 0 2px; border: none; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translate(-2px, -2px); transition: transform .2s ease; vertical-align: middle; } .header-top-bar-socs .dropdown.show > #dropdownMenuButton.btn.dropdown-toggle::after, .header-top-bar-socs .dropdown > #dropdownMenuButton.btn.dropdown-toggle[aria-expanded="true"]::after { transform: rotate(-135deg) translate(-2px, -2px); } /* Hide the inline caret from the parent markup so we don't have two chevrons. */ .header-top-bar-socs .dropdown > #dropdownMenuButton.btn.dropdown-toggle > i.fa-angle-down { display: none !important; } /* Dropdown panel */ #account-dropdown.dropdown-menu { min-width: 240px; margin-top: 8px !important; padding: 8px !important; background: #ffffff !important; border: 1px solid #e2e8f0 !important; border-radius: 12px !important; box-shadow: 0 16px 40px rgba(15, 23, 42, 0.16), 0 4px 12px rgba(15, 23, 42, 0.08) !important; overflow: hidden; } #account-dropdown li { width: 100%; list-style: none; } #account-dropdown li + li { margin-top: 2px; } /* Divider before Logout */ #account-dropdown li:has(#logout-button) { margin-top: 6px; padding-top: 6px; border-top: 1px solid #f1f5f9; } #account-dropdown a.dropdown-item { display: flex !important; align-items: center; gap: 10px; width: 100%; padding: 10px 12px !important; font-size: 13px !important; font-weight: 500 !important; color: #334155 !important; text-decoration: none !important; text-transform: none !important; letter-spacing: 0.1px !important; line-height: 1.2 !important; border-radius: 8px !important; transition: background-color .12s ease, color .12s ease; } #account-dropdown a.dropdown-item::before { content: ""; flex-shrink: 0; width: 16px; height: 16px; background-repeat: no-repeat; background-position: center; background-size: 16px 16px; opacity: .75; transition: opacity .12s ease; } #account-dropdown a.dropdown-item:hover, #account-dropdown a.dropdown-item:focus { background-color: rgba(0, 174, 239, 0.10) !important; color: #0f172a !important; text-decoration: none !important; outline: none; } #account-dropdown a.dropdown-item:hover::before, #account-dropdown a.dropdown-item:focus::before { opacity: 1; } /* Per-item icons (matched by href containing the slug) */ #account-dropdown a.dropdown-item[href*="my-profile"]::before { background-image: url("data:image/svg+xml;utf8,"); } #account-dropdown a.dropdown-item[href*="my-reservations"]::before { background-image: url("data:image/svg+xml;utf8,"); } #account-dropdown a.dropdown-item[href*="my-rentals"]::before { /* Same brand cyan as the other dropdown items. */ background-image: url("data:image/svg+xml;utf8,"); } #account-dropdown a.dropdown-item#logout-button { color: #b91c1c !important; } #account-dropdown a.dropdown-item#logout-button::before { background-image: url("data:image/svg+xml;utf8,"); opacity: .85; } #account-dropdown a.dropdown-item#logout-button:hover, #account-dropdown a.dropdown-item#logout-button:focus { background-color: rgba(220, 38, 38, 0.10) !important; color: #991b1b !important; } @media (max-width: 1024px) { .stm-layout-header-car_rental #top-bar .top-bar-wrapper .pull-left { padding: 0px 10px 0px 0; } } #promo_code{ border: 1px solid #777; } .stm_rent_accept_wrapper{ padding: 0px 20px; } .cursor-auto{ cursor: auto !important; } .red{ color:#ff0202; } .availability-btn{ display: block !important; padding: 12px 15px 10px !important; width: 100% !important; font-weight: 700 !important; font-size: 16px !important; border: 3px solid var(--motors-base-color) !important; text-transform: uppercase !important; background-color: var(--motors-base-color) !important; text-align: center !important; text-decoration: none !important; color: #fff !important; border-radius: 10px; } .availability-btn:hover, .availability-btn:focus{ color: #fff !important; } @media only screen and (min-width: 1114px) { .carousel-inner .item img{ width:100%; height: 360px; border: 1px solid #eee; } } @media only screen and (max-width: 1114px) { .carousel-inner .item img{ width:100%; height: 200px; border: 1px solid #eee; } } .carousel-inner .item img{ object-fit: cover; } label.error{ color: #b30000; font-size: 10px; } .wpcf7-form{ border:1px solid #ccc; padding:30px; border-radius:10px; } .wpcf7-form label{ width: 100%; margin-bottom: 15px; } .listing-menu li { cursor: pointer; } .d-none{ display: none !important; } .entry-header{ background-position: center; } @media only screen and (min-width: 992px) { .entry-header{ min-height:400px } .entry-header.small_title_box > .container { min-height: 400px; } /*.stm-template-car_rental_elementor .stm_single_class_car .image img{ max-width: 180% !important; max-height: 180px !important; object-fit: contain; }*/ } .entry-header.small_title_box .container .entry-title h2{ text-shadow: 1px 1px 1px #333; } .stm-template-car_rental_elementor .stm_single_class_car .image{ padding-right: 0px !important; } .stm_products_grid_class .stm_product_grid_single .inner .stm_image img{ object-fit: cover; max-height: 250px; top:0px; } .stm_products_grid_class .stm_product_grid_single .inner .stm_top .stm_leftx h3{ font-size: 18px; margin-top: 10px; } .stm_products_grid_class .stm_product_grid_single .inner{ padding-bottom:15px; border-radius: 7px; } .stm_products_grid_class .stm_product_grid_single .inner .stm_top { padding: 25px 15px 25px 15px !important; } #select2-chooseLocation-container, #stm_date_range_input{ border: 1px solid #aaa; border-radius: 20px !important; background: #fff; } #datetime-range{ border-radius: 20px !important; } .stm-template-car_rental_elementor .stm_single_class_car .stm_rent_prices .stm_rent_price{ display: block !important; } .stm-template-car_rental_elementor .stm-more a{ text-transform: capitalize; } .stm_products_grid_class .stm_product_grid_single .inner .stm_top .stm_left { float: left; width: 64%; } .home_rent_price .pay a.rc-reserve-dark { color: #fff !important; background-color: var(--motors-base-color) !important; } .home_rent_price .pay a { display: block; position: relative; height: 44px; line-height: 42px; border: 2px solid var(--motors-base-color) !important; font-size: 12px; text-transform: uppercase; font-weight: 700; color: rgba(34,34,34,1) !important; text-decoration: none !important; opacity: 1; text-align: center; cursor:pointer !important; min-width: 130px; border-radius: 25px !important; } .home_car_block { display: flex; flex-direction: column; /*height: 100%; /* Ensure consistent height */ } .home_car_block .inner { display: flex; flex-direction: column; flex-grow: 1; } .home_car_block .home_rent_price { margin-top: auto; /* Pushes it to the bottom */ } .home_car_block .inner .stm_image img{ min-height: 190px; border-radius: 1px; } .home_car_block .period{ font-weight:700; margin-bottom: 7px; } .home_car_block .features_icon .feature_icon{ width: 20%; float: left; text-align: center; border-right: 1px solid #aaa; font-size: 12px; margin-bottom: 10px; } .home_car_block .features_icon .feature_icon:last-child{ border-right: 0px; } .home_car_block .features_icon .feature_icon p{ margin-bottom: 0px; } .stm_products_grid_class .home_car_block .inner .stm_top { padding: 20px 30px 5px 30px !important; } .stm_products_grid_class .home_car_block .inner .stm_image{ height: 200px; } .stm_products_grid_class .home_car_block .inner .stm_image img { object-fit: cover; max-height: 250px; top: 15px; height: 100%; } .stm-template-car_rental_elementor .stm_single_class_car .stm_rent_prices .stm_rent_price .total{ font-weight: 600; } .more-info-btn{ font-size: 12px !important; color: #000; margin-left: 0; padding-left: 0; padding-right: 0; } .more-info-btn:hover, .more-info-btn:focus{ color: #000 !important; } #vehicleInfoModal{ margin-top: 60px; } /* ============================================================ #rc-more-info-modal — "More information" modal shown from fleet.php and select-vehicle.php vehicle cards. */ .rc-info-modal .modal-dialog { max-width: 560px; margin: 1.75rem auto; } .rc-info-modal .modal-content { border: none; border-radius: 14px; background: #ffffff; overflow: hidden; box-shadow: 0 24px 60px rgba(15, 23, 42, 0.18), 0 8px 24px rgba(15, 23, 42, 0.10); } /* Header — dark slate with cyan accent icon. ID-scoped + !important so parent-theme modal rules can't unstyle it. */ #rc-more-info-modal.rc-info-modal .modal-header, .rc-info-modal .modal-header { padding: 18px 22px !important; background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%) !important; background-color: #0f172a !important; border-bottom: none !important; border-radius: 0 !important; display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 12px; } .rc-info-modal__heading { display: flex; align-items: center; gap: 12px; min-width: 0; flex: 1; } .rc-info-modal__icon { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 10px; background: rgba(0, 174, 239, 0.18); color: var(--motors-base-color, #00aeef); } #rc-more-info-modal.rc-info-modal .modal-title.rc-more-info-title, .rc-info-modal .modal-title.rc-more-info-title { margin: 0 !important; font-size: 17px !important; font-weight: 600 !important; color: #ffffff !important; letter-spacing: 0.2px !important; line-height: 1.3 !important; text-transform: none !important; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Close X — frosted-glass icon button. Same visual language as the primary footer button but neutral (white-on-translucent) so it pairs with the dark header. */ #rc-more-info-modal.rc-info-modal .modal-header .rc-info-modal__close, #rc-more-info-modal.rc-info-modal .modal-header .close, .rc-info-modal .modal-header .rc-info-modal__close { position: relative; flex-shrink: 0; display: inline-flex !important; align-items: center; justify-content: center; width: 36px; height: 36px; margin: 0 !important; padding: 0 !important; font-size: 22px !important; font-weight: 400 !important; line-height: 1 !important; color: #ffffff !important; background: rgba(255, 255, 255, 0.10) !important; border: 1px solid rgba(255, 255, 255, 0.18) !important; border-radius: 10px !important; text-shadow: none !important; opacity: 1 !important; cursor: pointer; float: none !important; transition: background-color .15s ease, border-color .15s ease, transform .15s ease, color .15s ease; } #rc-more-info-modal.rc-info-modal .modal-header .rc-info-modal__close > span, #rc-more-info-modal.rc-info-modal .modal-header .close > span { display: inline-block; margin-top: -2px; line-height: 1; pointer-events: none; } #rc-more-info-modal.rc-info-modal .modal-header .rc-info-modal__close:hover, #rc-more-info-modal.rc-info-modal .modal-header .close:hover { background: rgba(255, 255, 255, 0.20) !important; border-color: rgba(255, 255, 255, 0.40) !important; color: #ffffff !important; transform: scale(1.05); } #rc-more-info-modal.rc-info-modal .modal-header .rc-info-modal__close:focus, #rc-more-info-modal.rc-info-modal .modal-header .close:focus { outline: none; box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.25) !important; } /* Body */ .rc-info-modal .modal-body { padding: 22px 22px 8px; max-height: 60vh; overflow-y: auto; background: #ffffff; } .rc-info-modal .rc-more-info-body { color: #334155; font-size: 14.5px; line-height: 1.6; word-wrap: break-word; } .rc-info-modal .rc-more-info-body > *:first-child { margin-top: 0; } .rc-info-modal .rc-more-info-body > *:last-child { margin-bottom: 0; } .rc-info-modal .rc-more-info-body p { margin: 0 0 12px; } .rc-info-modal .rc-more-info-body h1, .rc-info-modal .rc-more-info-body h2, .rc-info-modal .rc-more-info-body h3, .rc-info-modal .rc-more-info-body h4, .rc-info-modal .rc-more-info-body h5, .rc-info-modal .rc-more-info-body h6 { margin: 16px 0 8px; color: #0f172a; font-weight: 600; line-height: 1.3; } .rc-info-modal .rc-more-info-body ul, .rc-info-modal .rc-more-info-body ol { margin: 0 0 12px; padding-left: 22px; } .rc-info-modal .rc-more-info-body li { margin: 4px 0; } .rc-info-modal .rc-more-info-body a { color: var(--motors-base-color, #00aeef); text-decoration: none; border-bottom: 1px solid rgba(0, 174, 239, 0.35); transition: color .15s ease, border-color .15s ease; } .rc-info-modal .rc-more-info-body a:hover { color: #007fb0; border-bottom-color: #007fb0; } .rc-info-modal .rc-more-info-body img { max-width: 100%; height: auto; border-radius: 8px; margin: 8px 0; } .rc-info-modal .rc-more-info-body table { width: 100%; border-collapse: collapse; margin: 8px 0 12px; font-size: 14px; } .rc-info-modal .rc-more-info-body th, .rc-info-modal .rc-more-info-body td { padding: 8px 10px; border-bottom: 1px solid #e2e8f0; text-align: left; } .rc-info-modal .rc-more-info-body th { font-weight: 600; color: #0f172a; background: #f8fafc; } /* Custom scrollbar in the body */ .rc-info-modal .modal-body::-webkit-scrollbar { width: 8px; } .rc-info-modal .modal-body::-webkit-scrollbar-track { background: transparent; } .rc-info-modal .modal-body::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; } .rc-info-modal .modal-body::-webkit-scrollbar-thumb:hover { background: #94a3b8; } /* Footer */ .rc-info-modal .modal-footer { padding: 14px 22px 18px; background: #ffffff; border-top: 1px solid #e2e8f0; display: flex; justify-content: flex-end; gap: 10px; } .rc-info-modal__btn { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 0 20px; font-size: 13.5px; font-weight: 600; letter-spacing: 0.2px; color: #ffffff !important; background: var(--motors-base-color, #00aeef) !important; border: 1.5px solid var(--motors-base-color, #00aeef) !important; border-radius: 10px; cursor: pointer; box-shadow: 0 4px 12px rgba(0, 174, 239, 0.25); transition: filter .15s ease, transform .1s ease, box-shadow .15s ease; margin: 0; } .rc-info-modal__btn:hover { filter: brightness(0.95); transform: translateY(-1px); box-shadow: 0 6px 16px rgba(0, 174, 239, 0.35); } .rc-info-modal__btn:active { transform: translateY(0); } .rc-info-modal__btn:focus { outline: none; box-shadow: 0 0 0 3px rgba(0, 174, 239, 0.30); } /* Phone layout */ @media (max-width: 575.98px) { .rc-info-modal .modal-dialog { margin: 0.75rem; } .rc-info-modal .modal-title.rc-more-info-title { font-size: 15.5px; } .rc-info-modal__icon { width: 32px; height: 32px; } .rc-info-modal__icon svg { width: 18px; height: 18px; } } .select2-container--default .select2-selection--single{ height: 40px; } .select2-container--default .select2-selection--single .select2-selection__rendered, .select2-container--default .select2-selection--single .select2-selection__arrow{ line-height: 40px !important; } /* ========================================================= Modern frosted-glass page loader with a brand-colored dual-ring spinner. Re-skins the parent theme's #pageloader > .preloader-wrapper > div×8 markup. ========================================================= */ #pageloader { position: fixed; top: 0; bottom: 0; left: 0; right: 0; width: 100%; height: 100%; background: rgba(255, 255, 255, 0.40); -webkit-backdrop-filter: saturate(160%) blur(4px); backdrop-filter: saturate(160%) blur(4px); z-index: 99999999; text-align: center; opacity: 1; } /* Spinner positioned dead-center via fixed + translate. */ .preloader-wrapper { display: block; width: 56px !important; height: 56px !important; position: fixed; top: 50%; left: 50%; margin: 0; transform: translate(-50%, -50%); z-index: 4000; filter: drop-shadow(0 6px 18px rgba(0, 174, 239, 0.22)); } /* Hide the 8 legacy dots — we rebuild the spinner as two concentric pseudo-elements (track + arc). */ .preloader-wrapper > div { display: none !important; animation: none !important; } /* Light track ring */ .preloader-wrapper::before { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 4px solid rgba(15, 23, 42, 0.08); box-sizing: border-box; } /* Brand-colored spinning arc (top + right edges) */ .preloader-wrapper::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 4px solid transparent; border-top-color: var(--motors-base-color, #00aeef); border-right-color: var(--motors-base-color, #00aeef); box-sizing: border-box; animation: rcPageSpin 0.9s cubic-bezier(0.65, 0.05, 0.36, 1) infinite; } @keyframes rcPageSpin { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .preloader-wrapper::after { animation-duration: 2.4s; animation-timing-function: linear; } } /* Legacy keyframe kept as no-op alias in case anything else in the parent theme references it by name. */ @keyframes preloader-wrapper { to { transform: rotate(360deg); } } .select2-dropdown{ z-index: 999999 !important; } @media (max-width: 768px) { /* Break the parent stacking context to fix iOS Safari issues */ body, html, .container, #wrapper, #header { position: static !important; transform: none !important; -webkit-transform: none !important; z-index: auto !important; } /* The mobile menu when opened */ .stm-opened-menu-listing.opened { position: fixed !important; top: 0; right: 0; width: 80% !important; height: 100vh !important; z-index: 9999999999 !important; overflow-y: scroll !important; overflow-x: hidden !important; /* Force iOS to treat as top layer */ -webkit-overflow-scrolling: touch; will-change: transform; } /* Ensure footer never sits above menu */ #footer { position: relative !important; z-index: 1 !important; } .stm_rent_car_form_wrapper .stm_pickup_location .select2-container--default { z-index: 0 !important; } } /* Modern vehicle card grid — used on select-vehicle.php and fleet.php */ .rc-vehicles-heading { font-size: 16px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.6px; color: #1a1a1a; margin: 0px; line-height: 1.3; } .rc-vehicles-heading .count { color: #1a1a1a; font-weight: 800; } .car-block.rc-vehicle-card { width: 33.333%; padding: 10px; box-sizing: border-box; margin: 0 0 16px; } @media (max-width: 992px) { .car-block.rc-vehicle-card { width: 50%; } } @media (max-width: 600px) { .car-block.rc-vehicle-card { width: 100%; } } .rc-vehicle-card-inner { background: #fff; border-radius: 14px; padding: 18px 0 18px; height: 100%; display: flex; flex-direction: column; transition: transform .15s ease, box-shadow .15s ease; overflow: hidden; } .rc-vehicle-card-inner > .rc-card-head, .rc-vehicle-card-inner > .rc-card-specs, .rc-vehicle-card-inner > .rc-card-footer { padding-left: 20px; padding-right: 20px; } .rc-vehicle-card-inner:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,.08); } .rc-card-name { font-size: 17px; font-weight: 800; margin: 0; color: #111; line-height: 1.25; letter-spacing: -0.2px; } .rc-card-subtitle { font-size: 11px; color: #999; font-weight: 700; letter-spacing: 0.4px; margin: 4px 0 0; text-transform: uppercase; } .rc-card-specs { display: flex; gap: 6px; margin: 14px 0 6px; flex-wrap: wrap; } .rc-card-specs .spec { background: #e3e3e3; border-radius: 999px; padding: 5px 11px; font-size: 11px; font-weight: 600; display: inline-flex; align-items: center; gap: 5px; color: #555; white-space: nowrap; } .rc-card-specs .spec i { font-size: 13px; color: #777; } .rc-card-image { margin: 14px 0 12px; width: 100%; height: 180px; display: flex; align-items: center; justify-content: center; padding: 0 20px; box-sizing: border-box; } .rc-card-image img { width: 100%; height: 100%; max-height: 180px; object-fit: contain; display: block; cursor: pointer; } /* Reserve a fixed strip for the "More information" link so cards stay aligned whether or not a description is present. */ .rc-vehicle-card-inner .more-info { padding: 0 20px; min-height: 28px; display: flex; align-items: center; } .rc-vehicle-card-inner .more-info:empty { display: block; } /* Push the rate picker to the bottom of every card so the Select buttons line up across the row. */ .rc-vehicle-card-inner .rc-rate-picker { margin-top: auto; } .rc-card-footer { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; margin-top: auto; } .rc-card-price .amount { font-size: 26px; font-weight: 800; color: #111; line-height: 1; display: inline-block; } .rc-card-price .period { font-size: 13px; color: #555; font-weight: 500; margin-left: 2px; } .rc-card-price .total-tax { font-size: 11px; color: #888; margin-top: 6px; font-weight: 500; line-height: 1.3; } .rc-card-actions { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; } .rc-card-select { background: var(--motors-base-color) !important; color: #fff !important; border-radius: 8px; padding: 10px 24px; font-weight: 700; font-size: 13px; text-decoration: none !important; border: none; cursor: pointer; display: inline-block; white-space: nowrap; transition: background .15s ease; font-family: inherit; } .rc-card-select:hover { color: #fff !important; } .rc-card-quote { font-size: 11px; color: #1a1a1a; font-weight: 600; text-decoration: none; } .rc-card-quote:hover { text-decoration: underline; color: #1a1a1a; } /* Hide the old inner block markup if anything remains */ .rc-vehicle-card .autoroyal-vehicle-blockx { display: none !important; } /* ========================================================================= Pay Now / Pay Later rate picker — radio-style selector inside vehicle cards. Used on the home-page search results (get-vehicles-and-rates.php AJAX). ========================================================================= */ .rc-rate-picker { margin: 12px 20px 18px; border: 1px solid #e2e2e2; border-radius: 10px; background: #fff; overflow: hidden; } .rc-rate-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid #f0f0f0; font-weight: 700; font-size: 14px; color: #111; } .rc-rate-head i { color: #888; font-size: 12px; } .rc-rate-body { padding: 6px; } .rc-rate-option { display: flex; align-items: center; gap: 12px; padding: 14px 14px; border: 1.5px solid transparent; border-radius: 8px; margin: 4px 0; cursor: pointer; position: relative; transition: border-color .15s ease, background .15s ease; } .rc-rate-option:hover { background: #fafafa; } .rc-rate-option.is-selected { border-color: var(--motors-base-color) !important; background: #fff; } .rc-rate-option > input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; } .rc-rate-option .radio-mark { width: 18px; height: 18px; border: 2px solid #444; border-radius: 50%; flex-shrink: 0; position: relative; background: #fff; transition: border-color .15s ease; } .rc-rate-option.is-selected .radio-mark { border-color: #111; } .rc-rate-option.is-selected .radio-mark::after { content: ""; position: absolute; top: 3px; left: 3px; width: 8px; height: 8px; border-radius: 50%; background: #111; } .rc-rate-info { flex: 1 1 auto; min-width: 0; } .rc-rate-info .rc-rate-title { display: block; font-size: 14px; font-weight: 700; color: #111; margin: 0 0 3px; line-height: 1.2; } .rc-rate-info .rc-rate-desc { font-size: 11.5px; color: #777; margin: 0; line-height: 1.4; } .rc-rate-price { text-align: right; flex-shrink: 0; white-space: nowrap; } .rc-rate-price .amount-line { font-size: 20px; font-weight: 800; color: #111; line-height: 1; } .rc-rate-price .amount-line sub { font-size: 12px; font-weight: 700; bottom: 0; } .rc-rate-price .amount-line .period { font-size: 11px; font-weight: 500; color: #777; margin-left: 2px; } .rc-rate-price .total-line { font-size: 11px; color: #777; margin-top: 4px; font-weight: 500; } .rc-rate-submit { display: block; width: calc(100% - 16px); margin: 6px 8px 12px; text-align: center; } @media (max-width: 480px) { .rc-rate-option { gap: 8px; padding: 12px 10px; } .rc-rate-info .rc-rate-title { font-size: 13px; } .rc-rate-info .rc-rate-desc { font-size: 11px; } .rc-rate-price .amount-line { font-size: 17px; } /* Tighten card horizontal padding on phones so all elements (title, specs, image, more-info, rate picker) keep one consistent edge. */ .rc-vehicle-card-inner > .rc-card-head, .rc-vehicle-card-inner > .rc-card-specs, .rc-vehicle-card-inner > .rc-card-footer { padding-left: 16px; padding-right: 16px; } .rc-card-image { padding: 0 16px; } .rc-vehicle-card-inner .more-info { padding: 0 16px; } .rc-rate-picker { margin-left: 16px; margin-right: 16px; } } .stm-template-car_rental_elementor button{ background-color: var(--motors-base-color) !important; box-shadow: none !important; border: 0px !important; } .stm-template-car_rental_elementor .stm_rental_archive_top{ min-height: auto !important; } /* ========================================================================= Grid / List view toggle on select-vehicle.php ========================================================================= */ .rc-archive-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 8px; } .rc-archive-top .rc-vehicles-heading { margin: 0; } /* "Clear filters" link now sits inline beside the filter pills (before the right-side view toggle), nudged into the pill row with vertical alignment. */ .rc-filter-bar .form-clear-label.rc-clear-inline { align-self: center; font-size: 13px; font-weight: 600; color: #1a1a1a; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; margin: 0 4px; padding: 6px 4px; transition: color .15s ease; } .rc-filter-bar .form-clear-label.rc-clear-inline:hover { color: var(--motors-base-color, #00aeef); } .rc-view-toggle { display: inline-flex; background: #f0f1f3; border-radius: 9999px; padding: 3px; gap: 2px; } /* On mobile both views collapse to one column, so hide the toggle and its wrapping actions area to save space. */ @media (max-width: 767px) { .rc-view-toggle { display: none !important; } .rc-filter-bar .rc-filter-actions:empty, .rc-filter-bar .rc-filter-actions:has(> .rc-view-toggle:only-child) { display: none; } } .rc-view-btn { width: 38px; height: 32px; border: none; background: transparent; border-radius: 9999px; color: #6b6b6b; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background .15s ease, color .15s ease, box-shadow .15s ease; padding: 0; } .rc-view-btn:hover { color: #1a1a1a; } .rc-view-btn.is-active { background: #ffffff; color: #1a1a1a; box-shadow: 0 1px 3px rgba(0,0,0,.10); } .rc-view-btn svg { width: 16px; height: 16px; display: block; } /* ----- LIST VIEW ----- */ @media (min-width: 768px) { #isotope-containerx.is-list-view .car-block.rc-vehicle-card { width: 100% !important; padding: 6px 10px; } #isotope-containerx.is-list-view .rc-vehicle-card-inner { display: grid; grid-template-columns: 200px minmax(0, 1fr) 320px; grid-template-areas: "image head rates" "image specs rates" "image more rates"; grid-template-rows: auto auto auto; align-items: center; align-content: center; padding: 14px 18px; gap: 4px 22px; box-shadow: 0 1px 3px rgba(0,0,0,.06); border: 1px solid #ececec; transition: box-shadow .18s ease, transform .15s ease, border-color .15s ease; } #isotope-containerx.is-list-view .rc-vehicle-card-inner:hover { box-shadow: 0 8px 24px rgba(0,0,0,.10); border-color: #d6d6d6; transform: none; } /* Image column — fixed compact size, no full-height plate */ #isotope-containerx.is-list-view .rc-vehicle-card-inner > .rc-card-image { grid-area: image; width: 100%; height: 130px; max-height: 130px; min-height: 0; margin: 0; padding: 0; background: transparent; align-self: center; } #isotope-containerx.is-list-view .rc-vehicle-card-inner > .rc-card-image img { max-height: 130px; object-fit: contain; } /* Content column — title, specs, more-info stacked tightly */ #isotope-containerx.is-list-view .rc-vehicle-card-inner > .rc-card-head { grid-area: head; padding: 0 !important; align-self: end; } #isotope-containerx.is-list-view .rc-card-name { font-size: 15px; } #isotope-containerx.is-list-view .rc-vehicle-card-inner > .rc-card-specs { grid-area: specs; padding: 0 !important; margin: 0; align-self: center; } #isotope-containerx.is-list-view .rc-vehicle-card-inner > .more-info { grid-area: more; padding: 0 !important; min-height: 0; align-self: start; } #isotope-containerx.is-list-view .more-info-btn { margin: 0; } /* Rates column — compact, no extra vertical stretch */ #isotope-containerx.is-list-view .rc-vehicle-card-inner > .rc-rate-picker { grid-area: rates; grid-row: 1 / -1; margin: 0; align-self: center; } #isotope-containerx.is-list-view .rc-rate-picker .rc-rate-body { padding: 4px; } #isotope-containerx.is-list-view .rc-rate-option { padding: 9px 11px; gap: 10px; margin: 2px 0; } #isotope-containerx.is-list-view .rc-rate-info .rc-rate-title { font-size: 13px; margin-bottom: 1px; } #isotope-containerx.is-list-view .rc-rate-info .rc-rate-desc { font-size: 11px; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } #isotope-containerx.is-list-view .rc-rate-price .amount-line { font-size: 17px; } #isotope-containerx.is-list-view .rc-rate-submit { margin: 4px 6px 8px; padding: 9px 18px; } /* Fleet.php cards (no rate-picker, just a Check Availability footer): route the footer into the same right-side "rates" cell. */ #isotope-containerx.is-list-view .rc-vehicle-card-inner > .rc-card-footer { grid-area: rates; margin: 0; padding: 0; align-self: center; } #isotope-containerx.is-list-view .rc-card-footer .rc-card-actions { width: auto !important; } #isotope-containerx.is-list-view .rc-card-footer .rc-card-select { display: inline-block !important; width: auto !important; padding: 11px 26px !important; white-space: nowrap; } } /* On phones the list view collapses to the same single-column stack as grid. */ @media (max-width: 767px) { #isotope-containerx.is-list-view .car-block.rc-vehicle-card { width: 100% !important; } } /* Counter the parent theme's blanket `select { opacity: 0; visibility: hidden }` so flatpickr's native month dropdown (which we intentionally keep un-select2'd) stays visible inside the calendar header. */ .flatpickr-monthDropdown-months { opacity: 1 !important; visibility: visible !important; font-size: 14px !important; line-height: 1.3 !important; } .flatpickr-monthDropdown-months .flatpickr-monthDropdown-month, .flatpickr-monthDropdown-months option { font-size: 14px !important; font-weight: 400; padding: 4px 8px; } /* Match the year input size to the month dropdown. */ .flatpickr-current-month input.cur-year, .flatpickr-current-month .numInputWrapper { font-size: 14px !important; line-height: 1.3 !important; width: 7ch !important; } /* ========================================================================= Vehicle card image gallery (Swiper). Renders inside .rc-card-image; arrows appear on hover (desktop), pagination dots at the bottom, photo-count badge in the top-right. ========================================================================= */ .rc-card-image .rc-card-swiper, .rc-card-image .rc-card-img-single { width: 100%; height: 100%; max-height: 180px; border-radius: 8px; overflow: hidden; } .rc-card-image .rc-card-swiper { position: relative; background: transparent; } .rc-card-image .rc-card-swiper .swiper-wrapper, .rc-card-image .rc-card-swiper .swiper-slide { height: 100%; } .rc-card-image .rc-card-swiper .swiper-slide { display: flex; align-items: center; justify-content: center; } .rc-card-image .rc-card-swiper img { width: 100%; height: 100%; max-height: 180px; object-fit: contain; display: block; cursor: pointer; } .rc-card-image .rc-card-img-single { object-fit: contain; } /* Photo count badge */ .rc-card-image .rc-card-photo-count { position: absolute; top: 8px; right: 8px; display: inline-flex; align-items: center; gap: 4px; padding: 4px 8px; background: rgba(0, 0, 0, 0.62); color: #fff; font-size: 11px; font-weight: 700; border-radius: 9999px; letter-spacing: 0.2px; z-index: 5; pointer-events: none; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); } .rc-card-image .rc-card-photo-count svg { display: block; } /* Navigation arrows — hidden by default, appear on card hover */ .rc-card-image .rc-swiper-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 32px; height: 32px; border-radius: 50%; background: #ffffff; color: #1a1a1a; border: none; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.16); cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; z-index: 5; opacity: 0; transition: opacity .15s ease, transform .15s ease, box-shadow .15s ease; } .rc-card-image .rc-swiper-prev { left: 8px; } .rc-card-image .rc-swiper-next { right: 8px; } .rc-vehicle-card-inner:hover .rc-card-image .rc-swiper-arrow, .rc-card-image .rc-card-swiper:focus-within .rc-swiper-arrow { opacity: 1; } .rc-card-image .rc-swiper-arrow:hover { transform: translateY(-50%) scale(1.06); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.22); } .rc-card-image .rc-swiper-arrow.swiper-button-disabled { opacity: 0 !important; pointer-events: none; } /* On touch / coarse-pointer devices, keep arrows visible since there's no hover */ @media (hover: none) and (pointer: coarse) { .rc-card-image .rc-swiper-arrow { opacity: 0.85; } } /* Pagination dots */ .rc-card-image .rc-swiper-pagination { position: absolute; bottom: 6px; left: 0; right: 0; text-align: center; z-index: 5; pointer-events: auto; } .rc-card-image .rc-swiper-pagination .swiper-pagination-bullet { width: 6px; height: 6px; background: rgba(255, 255, 255, 0.7); opacity: 1; margin: 0 3px !important; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25); transition: transform .15s ease, background .15s ease; } .rc-card-image .rc-swiper-pagination .swiper-pagination-bullet-active { background: #ffffff; transform: scale(1.3); } .stm-billing-fields.row:before{ content: none !important; } /* ============================================================ Account templates — shared styles for my-reservations, my-rentals (and any future "list of records" pages). */ .rc-account-page { padding: 32px 0 48px; background: #f5f7fa; } .rc-account-page .container { max-width: 1100px; } .rc-account-card { background: #ffffff; border-radius: 16px; box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06), 0 1px 3px rgba(15, 23, 42, 0.04); border: 1px solid #eef2f7; overflow: hidden; } .rc-account-card__header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 22px 26px; border-bottom: 1px solid #eef2f7; background: linear-gradient(180deg, #ffffff 0%, #fbfcfe 100%); } .rc-account-card__heading { display: flex; align-items: center; gap: 14px; min-width: 0; } .rc-account-card__icon { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 12px; background: rgba(0, 174, 239, 0.10); color: var(--motors-base-color, #00aeef); } .rc-account-card__title { margin: 0 0 2px; font-size: 22px; font-weight: 700; color: #0f172a; line-height: 1.2; } .rc-account-card__subtitle { margin: 0; font-size: 13.5px; color: #fff; line-height: 1.4; } .rc-account-card__subtitle strong { color: #0f172a; font-weight: 700; } /* Buttons */ .rc-account-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; padding: 0 18px; font-size: 13.5px; font-weight: 600; letter-spacing: 0.2px; border-radius: 10px; border: 1.5px solid transparent; cursor: pointer; line-height: 1; text-decoration: none !important; transition: filter .15s ease, transform .1s ease, box-shadow .15s ease, background-color .15s ease, border-color .15s ease, color .15s ease; } .rc-account-btn--primary { color: #ffffff !important; background: var(--motors-base-color, #00aeef); border-color: var(--motors-base-color, #00aeef); box-shadow: 0 4px 12px rgba(0, 174, 239, 0.25); } .rc-account-btn--primary:hover { filter: brightness(0.95); transform: translateY(-1px); box-shadow: 0 6px 16px rgba(0, 174, 239, 0.35); } .rc-account-btn--ghost { color: #475569 !important; background: #ffffff; border-color: #e2e8f0; } .rc-account-btn--ghost:hover { background: #f8fafc; border-color: #cbd5e1; color: #0f172a !important; } .rc-account-btn--sm { min-height: 32px; padding: 0 12px; font-size: 12px; } /* Alert */ .rc-account-alert { display: flex; align-items: center; gap: 10px; margin: 20px 26px; padding: 12px 14px; border-radius: 10px; font-size: 13.5px; } .rc-account-alert--error { background: #fef2f2; border: 1px solid #fecaca; color: #b91c1c; } .rc-account-alert svg { flex-shrink: 0; } /* Empty state */ .rc-account-empty { padding: 56px 26px 64px; text-align: center; } .rc-account-empty__art { display: inline-flex; align-items: center; justify-content: center; width: 96px; height: 96px; margin: 0 auto 16px; border-radius: 50%; background: rgba(0, 174, 239, 0.08); color: var(--motors-base-color, #00aeef); } .rc-account-empty h2 { margin: 0 0 6px; font-size: 18px; font-weight: 700; color: #0f172a; } .rc-account-empty p { margin: 0 0 20px; color: #64748b; font-size: 14px; line-height: 1.5; max-width: 380px; display: inline-block; } /* Table */ .rc-account-table-wrap { padding: 8px; } .rc-account-table { width: 100%; border-collapse: separate; border-spacing: 0; margin: 0; } .rc-account-table thead th { padding: 12px 16px; font-size: 11px; font-weight: 700; letter-spacing: 0.6px; text-transform: uppercase; color: #94a3b8; background: #f8fafc; border-bottom: 1px solid #eef2f7; text-align: left; } .rc-account-table thead th:first-child { border-top-left-radius: 10px; } .rc-account-table thead th:last-child { border-top-right-radius: 10px; } .rc-account-table__col-action { text-align: right !important; width: 100px; } .rc-account-table tbody tr { transition: background-color .12s ease; } .rc-account-table tbody tr:hover { background-color: #fbfcfe; } .rc-account-table tbody td { padding: 16px; font-size: 13.5px; color: #334155; border-bottom: 1px solid #f1f5f9; vertical-align: middle; } .rc-account-table tbody tr:last-child td { border-bottom: none; } .rc-account-table__primary { color: var(--motors-base-color, #00aeef) !important; font-weight: 700; font-size: 14px; text-decoration: none !important; transition: color .15s ease; } .rc-account-table__primary:hover { color: #007fb0 !important; text-decoration: underline !important; } .rc-account-table__number { font-weight: 700; font-size: 14px; color: #0f172a; } .rc-account-table__date { display: block; font-weight: 600; color: #0f172a; } .rc-account-table__time { display: block; font-size: 12px; color: #64748b; margin-top: 1px; } .rc-account-table__loc { display: block; font-size: 12px; color: #94a3b8; margin-top: 2px; } .rc-account-table__vehicle { font-weight: 600; color: #0f172a; } /* Mobile: stacked-card layout */ @media (max-width: 767.98px) { .rc-account-page { padding: 16px 0 32px; } .rc-account-card__header { flex-direction: column; align-items: flex-start; padding: 18px; } .rc-account-card__icon { width: 38px; height: 38px; } .rc-account-card__title { font-size: 18px; } .rc-account-table thead { display: none; } .rc-account-table, .rc-account-table tbody, .rc-account-table tr, .rc-account-table td { display: block; width: 100%; } .rc-account-table tbody tr { margin: 8px; padding: 12px; background: #ffffff; border: 1px solid #eef2f7; border-radius: 12px; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03); } .rc-account-table tbody td { border: none; padding: 6px 0; display: flex; justify-content: space-between; gap: 16px; text-align: right; } .rc-account-table tbody td::before { content: attr(data-label); font-size: 11px; font-weight: 700; letter-spacing: 0.6px; text-transform: uppercase; color: #94a3b8; flex-shrink: 0; align-self: center; } .rc-account-table__col-action { text-align: left !important; width: auto; } .rc-account-table__col-action::before { display: none; } .rc-account-table__date, .rc-account-table__time, .rc-account-table__loc { display: block; text-align: right; } } /* ============================================================ My Profile — extends the .rc-account-* card system. */ .rc-profile-hero { background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%); border-bottom: none; padding: 28px 26px; } .rc-profile-hero .rc-account-card__title { color: #ffffff; font-size: 22px; } .rc-profile-hero .rc-account-card__subtitle { color: rgba(255, 255, 255, 0.65); display: flex; flex-wrap: wrap; gap: 10px 18px; margin-top: 4px; } .rc-profile-hero__identity { display: flex; align-items: center; gap: 16px; min-width: 0; } .rc-profile-hero__text { min-width: 0; } .rc-profile-hero__meta { display: inline-flex; align-items: center; gap: 6px; color: rgba(255, 255, 255, 0.78); font-size: 13px; } .rc-profile-hero__meta svg { color: var(--motors-base-color, #00aeef); flex-shrink: 0; } .rc-profile-avatar { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 50%; background: linear-gradient(135deg, var(--motors-base-color, #00aeef) 0%, #0ea5e9 100%); color: #ffffff; font-size: 22px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; box-shadow: 0 6px 16px rgba(0, 174, 239, 0.35), 0 0 0 4px rgba(255, 255, 255, 0.08); } .rc-profile-body { padding: 24px 26px 28px; } /* Inline alerts */ .rc-profile-alert { display: flex; align-items: center; gap: 10px; margin: 0 0 18px; padding: 12px 14px; border-radius: 10px; font-size: 13.5px; font-weight: 500; } .rc-profile-alert--success { background: #ecfdf5; border: 1px solid #a7f3d0; color: #047857; } .rc-profile-alert--error { background: #fef2f2; border: 1px solid #fecaca; color: #b91c1c; } .rc-profile-alert svg { flex-shrink: 0; } /* Sections */ .rc-profile-form { margin: 0; } .rc-profile-section { margin-bottom: 26px; } .rc-profile-section + .rc-profile-section { padding-top: 22px; border-top: 1px solid #f1f5f9; } .rc-profile-section__head { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 14px; } .rc-profile-section__icon { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 8px; background: rgba(0, 174, 239, 0.10); color: var(--motors-base-color, #00aeef); } .rc-profile-section__title { margin: 0 0 2px; font-size: 14.5px; font-weight: 700; color: #0f172a; letter-spacing: 0.1px; line-height: 1.3; } .rc-profile-section__opt { margin-left: 4px; padding: 1px 8px; font-size: 11px; font-weight: 600; color: #fff; background: #f1f5f9; border-radius: 999px; text-transform: lowercase; letter-spacing: 0.2px; vertical-align: middle; } .rc-profile-section__hint { margin: 0; font-size: 12.5px; color: #64748b; line-height: 1.4; } /* Field grid */ .rc-profile-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; } .rc-profile-field--full { grid-column: 1 / -1; } @media (max-width: 575.98px) { .rc-profile-grid { grid-template-columns: 1fr; } } .rc-profile-field > label { display: block; margin: 0 0 6px; padding: 0; font-size: 12.5px; font-weight: 600; color: #334155; letter-spacing: 0.2px; text-transform: uppercase; } .rc-profile-field > label .req { color: #dc2626; margin-left: 2px; } .rc-profile-input { position: relative; display: flex; align-items: stretch; } .rc-profile-input::before { content: ""; position: absolute; top: 50%; left: 14px; width: 16px; height: 16px; transform: translateY(-50%); background-repeat: no-repeat; background-position: center; background-size: 16px 16px; opacity: .55; pointer-events: none; z-index: 2; transition: opacity .15s ease; } .rc-profile-input:focus-within::before { opacity: 1; } .rc-profile-input--mail::before { background-image: url("data:image/svg+xml;utf8,"); } .rc-profile-input--phone::before { background-image: url("data:image/svg+xml;utf8,"); } .rc-profile-input--lock::before { background-image: url("data:image/svg+xml;utf8,"); } /* Input — with icon padding when an icon is shown */ .rc-profile-input > input.form-control, .rc-profile-input > input { flex: 1; width: 100% !important; height: 44px !important; margin: 0 !important; padding: 0 14px !important; font-size: 14px !important; font-weight: 500 !important; color: #0f172a !important; background-color: #f8fafc !important; border: 1.5px solid #e2e8f0 !important; border-radius: 10px !important; box-shadow: none !important; outline: none !important; transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease; box-sizing: border-box; font-family: inherit; } .rc-profile-input.rc-profile-input--mail > input.form-control, .rc-profile-input.rc-profile-input--mail > input, .rc-profile-input.rc-profile-input--phone > input.form-control, .rc-profile-input.rc-profile-input--phone > input, .rc-profile-input.rc-profile-input--lock > input.form-control, .rc-profile-input.rc-profile-input--lock > input { padding-left: 40px !important; } .rc-profile-input.rc-profile-input--lock > input.form-control, .rc-profile-input.rc-profile-input--lock > input { padding-right: 44px !important; } .rc-profile-input > input::placeholder { color: #94a3b8 !important; font-weight: 400 !important; opacity: 1; } .rc-profile-input > input:hover { border-color: #cbd5e1 !important; } .rc-profile-input > input:focus { border-color: var(--motors-base-color, #00aeef) !important; background-color: #ffffff !important; box-shadow: 0 0 0 3px rgba(0, 174, 239, 0.15) !important; } .rc-profile-input > input.has-error { border-color: #ef4444 !important; background-color: #fff5f5 !important; box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.12) !important; } .rc-profile-input > input.has-error:focus { border-color: var(--motors-base-color, #00aeef) !important; background-color: #ffffff !important; box-shadow: 0 0 0 3px rgba(0, 174, 239, 0.15) !important; } /* Show/hide password */ .rc-profile-input__toggle { position: absolute; top: 50%; right: 8px; transform: translateY(-50%); display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; margin: 0; padding: 0; color: #64748b; background: transparent; border: none; border-radius: 8px; cursor: pointer; transition: color .15s ease, background-color .15s ease; z-index: 3; } .rc-profile-input__toggle:hover { color: #0f172a; background: rgba(15, 23, 42, 0.06); } .rc-profile-input__toggle .rc-profile-input__toggle-hide { display: none; } .rc-profile-input__toggle.is-visible .rc-profile-input__toggle-show { display: none; } .rc-profile-input__toggle.is-visible .rc-profile-input__toggle-hide { display: inline-block; } /* Save button row */ .rc-profile-actions { display: flex; justify-content: flex-end; padding-top: 20px; border-top: 1px solid #f1f5f9; } .rc-profile-actions .rc-account-btn { min-width: 180px; min-height: 44px; padding: 0 24px; } .rc-profile-actions .rc-account-btn input[type="submit"] { all: unset; cursor: pointer; } /* Loader on the save button */ .rc-profile-actions__spinner { display: none; animation: rc-profile-spin .8s linear infinite; } .rc-account-btn.is-loading { pointer-events: none; opacity: .85; } .rc-account-btn.is-loading .rc-profile-actions__save { display: none; } .rc-account-btn.is-loading .rc-profile-actions__spinner { display: inline-block; } @keyframes rc-profile-spin { from { transform: rotate(0); } to { transform: rotate(360deg); } } /* Phone tweaks */ @media (max-width: 767.98px) { .rc-profile-hero { padding: 22px 18px; } .rc-profile-hero__identity { flex-direction: row; align-items: center; } .rc-profile-avatar { width: 52px; height: 52px; font-size: 19px; } .rc-profile-body { padding: 18px; } .rc-profile-actions .rc-account-btn { width: 100%; } .rc-profile-actions { justify-content: stretch; } } /* ========================================================================== RC Premium Glassy Car-Rental Header Restyles partials/header/header-car_rental.php in place. Pure CSS, no markup changes — uses the parent theme's existing classes: .header-rental.header-listing > .header-inner-content > .listing-logo-main + .listing-service-right (.listing-right-actions + .listing-menu) + .stm-opened-menu-listing (mobile drawer). All brand accents derive from `--motors-base-color` so the header re-tints automatically when the theme color changes. `color-mix()` produces alpha-tinted variants without locking us into one hue. ========================================================================== */ .stm-layout-header-car_rental, .stm-layout-header-car_rental .stm-opened-menu-listing { --rc-brand: var(--motors-base-color, #00aeef); --rc-brand-dark: color-mix(in srgb, var(--rc-brand), #000 18%); /* Shared text color for the primary nav links and the mobile burger bars so both stay in sync. */ --rc-menu-text: rgba(255, 255, 255, 0.88); --rc-menu-text-strong: #ffffff; --rc-brand-08: color-mix(in srgb, var(--rc-brand) 8%, transparent); --rc-brand-10: color-mix(in srgb, var(--rc-brand) 10%, transparent); --rc-brand-15: color-mix(in srgb, var(--rc-brand) 15%, transparent); --rc-brand-16: color-mix(in srgb, var(--rc-brand) 16%, transparent); --rc-brand-18: color-mix(in srgb, var(--rc-brand) 18%, transparent); --rc-brand-22: color-mix(in srgb, var(--rc-brand) 22%, transparent); --rc-brand-25: color-mix(in srgb, var(--rc-brand) 25%, transparent); --rc-brand-28: color-mix(in srgb, var(--rc-brand) 28%, transparent); --rc-brand-32: color-mix(in srgb, var(--rc-brand) 32%, transparent); --rc-brand-35: color-mix(in srgb, var(--rc-brand) 35%, transparent); --rc-brand-40: color-mix(in srgb, var(--rc-brand) 40%, transparent); --rc-brand-45: color-mix(in srgb, var(--rc-brand) 45%, transparent); } .stm-layout-header-car_rental .header-rental.header-listing { position: relative; padding: 0 !important; /* Pure-black bar — override the customizer's inline `style="background-color:…"` that the parent template injects. */ background-color: #000 !important; border-bottom: none !important; box-shadow: none; transition: box-shadow .25s ease; z-index: 1 !important; } /* Flat design — no accent line, no ambient glows. */ .stm-layout-header-car_rental .header-rental.header-listing::before, .stm-layout-header-car_rental .header-rental.header-listing::after { content: none !important; } .stm-layout-header-car_rental .header-rental.header-listing.stm-fixed { background-color: #000 !important; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.5); z-index: 1 !important; } /* Full-bleed inner row: logo (left) + menu track (fills the rest). */ .stm-layout-header-car_rental .header-rental.header-listing .header-inner-content { position: relative; z-index: 2; width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; display: flex !important; align-items: stretch; gap: 0; } /* --- Logo ----------------------------------------------------------------- */ .stm-layout-header-car_rental .header-rental.header-listing .listing-logo-main { flex: 0 0 auto; display: flex; align-items: center; margin: 0 !important; padding: 10px 38px !important; float: none !important; } .stm-layout-header-car_rental .header-rental.header-listing .listing-logo-main > a { display: inline-flex; align-items: center; padding: 0; border-radius: 0; } .stm-layout-header-car_rental .header-rental.header-listing .listing-logo-main > a:hover { background: transparent; transform: none; } .stm-layout-header-car_rental .header-rental.header-listing .listing-logo-main img { width: 130px !important; max-width: 100%; height: auto; filter: none; } /* --- Right side becomes the full-width menu track ------------------------ */ .stm-layout-header-car_rental .header-rental.header-listing .listing-service-right { flex: 1 1 auto; display: flex !important; align-items: stretch; gap: 0; margin: 0 !important; float: none !important; padding: 0 !important; } /* Hide the right-action icons (cart / compare / profile / account) — the mockup shows only logo + menu. The mobile burger also lives in here; the ≤1114px block below re-shows it. */ .stm-layout-header-car_rental .header-rental.header-listing .listing-right-actions { display: none !important; } /* --- Primary nav: equal-width cells with thin vertical dividers ---------- */ .stm-layout-header-car_rental .header-rental.header-listing .listing-menu { flex: 1 1 auto; display: flex !important; align-items: stretch; width: 100%; margin: 0 !important; padding: 0 !important; list-style: none; gap: 0; float: none !important; } .stm-layout-header-car_rental .header-rental.header-listing .listing-menu > li { flex: 1 1 0 !important; display: flex !important; align-items: stretch; min-width: 0 !important; padding: 0 !important; margin: 0 !important; background: transparent !important; border-left: 1px solid rgba(255, 255, 255, 0.18); /* divider */ position: relative; } .stm-layout-header-car_rental .header-rental.header-listing .listing-menu > li:first-child { border-left: 0px; } .stm-layout-header-car_rental .header-rental.header-listing .listing-menu > li:hover { background: transparent !important; } .stm-layout-header-car_rental .header-rental.header-listing .listing-menu > li > a { flex: 1 1 auto; display: flex !important; align-items: center; justify-content: center; text-align: center; white-space: nowrap; padding: 24px 14px !important; color: #ffffff !important; font-family: "Montserrat", "Helvetica Neue", Arial, sans-serif; font-weight: 700; font-size: 16px; line-height: 1.1; letter-spacing: .5px; text-transform: uppercase; border-radius: 0; transition: color .2s ease, background .2s ease; position: relative; } /* No animated underline in the flat design. */ .stm-layout-header-car_rental .header-rental.header-listing .listing-menu > li > a::after { content: none !important; } .stm-layout-header-car_rental .header-rental.header-listing .listing-menu > li:hover > a, .stm-layout-header-car_rental .header-rental.header-listing .listing-menu > li.current-menu-item > a, .stm-layout-header-car_rental .header-rental.header-listing .listing-menu > li.current_page_item > a, .stm-layout-header-car_rental .header-rental.header-listing .listing-menu > li.current-menu-parent > a { color: #ffffff !important; } /* Submenu (only appears if a top-level item gains children). */ .stm-layout-header-car_rental .header-rental.header-listing .listing-menu li ul.sub-menu { background: #0a0a0a !important; border: none !important; border-top: 3px solid var(--rc-brand) !important; border-radius: 0 !important; box-shadow: 0 18px 40px rgba(0, 0, 0, 0.55) !important; overflow: hidden; padding: 0 !important; min-width: 220px; } .stm-layout-header-car_rental .header-rental.header-listing .listing-menu li ul.sub-menu li { flex: none !important; display: block !important; border-left: none !important; border-right: none !important; border-bottom: 1px solid rgba(255, 255, 255, 0.08); } .stm-layout-header-car_rental .header-rental.header-listing .listing-menu li ul.sub-menu li a { display: block !important; justify-content: flex-start !important; text-align: left !important; color: rgba(255, 255, 255, 0.85) !important; border-radius: 0 !important; padding: 13px 18px !important; font-size: 14px; transition: background .15s ease, color .15s ease; } .stm-layout-header-car_rental .header-rental.header-listing .listing-menu li ul.sub-menu li a:hover { background: var(--rc-brand) !important; color: #ffffff !important; } /* --- Right-side icon buttons (cart / compare / add-a-car / profile) ------ */ .stm-layout-header-car_rental .header-rental.header-listing .listing-right-actions > a, .stm-layout-header-car_rental .header-rental.header-listing .listing-right-actions > div > a, .stm-layout-header-car_rental .header-rental.header-listing .stm-rent-lOffer-account { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 50%; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.12); color: #fff !important; text-decoration: none !important; transition: background .2s ease, border-color .2s ease, box-shadow .2s ease, transform .2s ease; } .stm-layout-header-car_rental .header-rental.header-listing .listing-right-actions > a:hover, .stm-layout-header-car_rental .header-rental.header-listing .listing-right-actions > div > a:hover, .stm-layout-header-car_rental .header-rental.header-listing .stm-rent-lOffer-account:hover { background: var(--rc-brand-18); border-color: var(--rc-brand-45); box-shadow: 0 8px 20px var(--rc-brand-25); transform: translateY(-1px); } .stm-layout-header-car_rental .header-rental.header-listing .listing-right-actions i, .stm-layout-header-car_rental .header-rental.header-listing .listing-right-actions svg { font-size: 16px; color: #fff; } /* Cart/compare counter badge sits nicely on the circular button */ .stm-layout-header-car_rental .header-rental.header-listing .listing-right-actions .stm-mini-cart-count, .stm-layout-header-car_rental .header-rental.header-listing .listing-right-actions .stm-compare-count { position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: linear-gradient(135deg, var(--rc-brand) 0%, var(--rc-brand-dark) 100%); color: #fff; font-size: 10px; font-weight: 700; line-height: 18px; text-align: center; box-shadow: 0 4px 10px var(--rc-brand-40); } .stm-layout-header-car_rental .header-rental.header-listing .listing-right-actions > a, .stm-layout-header-car_rental .header-rental.header-listing .listing-right-actions > div { position: relative; } /* Avatar circle when logged in */ .stm-layout-header-car_rental .header-rental.header-listing .stm-dropdown-user-small-avatar img { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; border: 2px solid rgba(255, 255, 255, 0.3); } /* --- Mobile menu trigger (burger) ---------------------------------------- */ .stm-layout-header-car_rental .header-rental.header-listing .listing-menu-mobile-wrapper { display: none; } .stm-layout-header-car_rental .header-rental.header-listing .listing-menu-mobile-wrapper { /* Force hidden on desktop. The mobile media-query block (≤1114px) re-enables it. Also hide the inner trigger as a belt-and-braces guard against source-order quirks. */ display: none !important; /* Right-edge snap (only takes effect when display is restored). */ margin-left: auto !important; margin-right: 0 !important; order: 999; justify-content: flex-end; align-items: center; } .stm-layout-header-car_rental .header-rental.header-listing .listing-menu-mobile-wrapper .stm-menu-trigger { display: none !important; } .stm-layout-header-car_rental .header-rental.header-listing .stm-menu-trigger { /* Slightly slimmer footprint with cleaner proportions. */ width: 44px; height: 44px; border-radius: 12px; /* Soft brand-tinted glass effect with an inner highlight so the button reads on light, dark, or coloured customizer header backgrounds. */ background:var(--rc-brand-45) !important; border: 1.5px solid color-mix(in srgb, var(--rc-brand) 55%, transparent) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 6px 18px var(--rc-brand-25); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; cursor: pointer; margin-left: auto; margin-right: 0; position: relative; isolation: isolate; transition: background .2s ease, transform .2s ease, border-color .2s ease, box-shadow .2s ease; } .stm-layout-header-car_rental .header-rental.header-listing .stm-menu-trigger::before { /* Subtle radial highlight on the top half */ content: ""; position: absolute; inset: 1px; border-radius: inherit; background: radial-gradient(120% 60% at 50% 0%, rgba(255, 255, 255, 0.18) 0%, transparent 60%); pointer-events: none; z-index: -1; transition: opacity .2s ease; } .stm-layout-header-car_rental .header-rental.header-listing .stm-menu-trigger:hover { background: linear-gradient(180deg, var(--rc-brand) 0%, var(--rc-brand-dark) 100%) !important; border-color: var(--rc-brand) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 14px 30px var(--rc-brand-45); transform: translateY(-1px); } .stm-layout-header-car_rental .header-rental.header-listing .stm-menu-trigger:hover::before { opacity: .6; } .stm-layout-header-car_rental .header-rental.header-listing .stm-menu-trigger:active { transform: scale(.94); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 4px 10px var(--rc-brand-25); } .stm-layout-header-car_rental .header-rental.header-listing .stm-menu-trigger span { width: 20px; height: 2px; background: #ffffff !important; border-radius: 2px; display: block; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.22); transition: transform .25s ease, opacity .2s ease, width .2s ease; } .stm-layout-header-car_rental .header-rental.header-listing .stm-menu-trigger:hover span { width: 20px !important; align-self: center !important; } /* When drawer is open, morph burger into an X */ .stm-layout-header-car_rental .stm-menu-trigger.opened span:nth-child(1) { transform: translateY(6px) rotate(45deg); } .stm-layout-header-car_rental .stm-menu-trigger.opened span:nth-child(2) { opacity: 0; } .stm-layout-header-car_rental .stm-menu-trigger.opened span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); } /* ========================================================================== Responsive — premium mobile header ========================================================================== */ @media (max-width: 1114px) { .stm-layout-header-car_rental .header-rental.header-listing { min-height: 76px !important; height: auto !important; padding: 0 !important; } .stm-layout-header-car_rental .header-rental.header-listing .header-inner-content { min-height: 76px; padding-left: 16px; padding-right: 16px; justify-content: space-between; /* logo left, burger right */ flex-wrap: nowrap; align-items: center; gap: 10px; } .stm-layout-header-car_rental .header-rental.header-listing .listing-menu { display: none !important; } /* Re-show the right-action cluster so the burger reappears, and dock it to the right edge (the desktop rule hides it). It only takes its own width and never shrinks, so the burger is always visible. */ .stm-layout-header-car_rental .header-rental.header-listing .listing-service-right { flex: 0 0 auto; justify-content: flex-end; align-items: center; } .stm-layout-header-car_rental .header-rental.header-listing .listing-right-actions { display: flex !important; } .stm-layout-header-car_rental .header-rental.header-listing .listing-menu-mobile-wrapper { display: flex !important; flex: 0 0 auto; } .stm-layout-header-car_rental .header-rental.header-listing .listing-menu-mobile-wrapper .stm-menu-trigger { display: flex !important; } /* Mobile logo: allowed to shrink (flex: 0 1 auto + min-width: 0) and capped in height so the 342×66 wordmark can't fill the whole row and push the burger off-screen. max-width:100% lets it scale down further on very narrow phones as a safety net. */ .stm-layout-header-car_rental .header-rental.header-listing .listing-logo-main { flex: 0 1 auto; min-width: 0; padding: 8px 0 !important; } .stm-layout-header-car_rental .header-rental.header-listing .listing-logo-main > a { padding: 4px 6px; min-width: 170px; } .stm-layout-header-car_rental .header-rental.header-listing .listing-logo-main img { max-height: 48px; width: auto !important; max-width: 100%; height: auto; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.18)) drop-shadow(0 6px 14px rgba(0, 0, 0, 0.25)); } } @media (max-width: 600px) { .stm-layout-header-car_rental .header-rental.header-listing .header-inner-content { gap: 8px; padding-left: 12px; padding-right: 12px; } .stm-layout-header-car_rental .header-rental.header-listing .listing-service-right { gap: 6px; } .stm-layout-header-car_rental .header-rental.header-listing .listing-right-actions { gap: 4px; } /* Slightly smaller circular action icons on small phones */ .stm-layout-header-car_rental .header-rental.header-listing .listing-right-actions > a, .stm-layout-header-car_rental .header-rental.header-listing .listing-right-actions > div > a, .stm-layout-header-car_rental .header-rental.header-listing .stm-rent-lOffer-account { width: 38px; height: 38px; } /* Burger keeps the rounded-square shape but slightly smaller. */ .stm-layout-header-car_rental .header-rental.header-listing .stm-menu-trigger { width: 42px; height: 42px; border-radius: 12px; } .stm-layout-header-car_rental .header-rental.header-listing .stm-menu-trigger span { width: 20px; } .stm-layout-header-car_rental .header-rental.header-listing .listing-logo-main img { max-height: 42px; } } /* ========================================================================== Mobile drawer (.stm-opened-menu-listing) — glassy, modern ========================================================================== */ .stm-layout-header-car_rental .stm-opened-menu-listing { background: linear-gradient(160deg, #050505 0%, #0f0f0f 100%) !important; border-left: 1px solid rgba(255, 255, 255, 0.06); box-shadow: -20px 0 40px rgba(0, 0, 0, 0.6); /* Top padding leaves room for the X close button (14px top + 40px button + 16px breathing room) so the first menu item never sits under it on cramped mobile viewports. */ padding: 72px 22px 32px !important; } .stm-layout-header-car_rental .stm-opened-menu-listing.opened { width: 86% !important; max-width: 360px !important; } /* When the mobile drawer is open, float it above EVERY page (wrapper, container, hero, sticky bars, modals' base layer, …) on all viewport sizes, not just <=768px. */ .stm-opened-menu-listing.opened { position: fixed !important; top: 0 !important; right: 0 !important; bottom: 0 !important; height: 100vh !important; max-height: 100vh !important; overflow-y: auto !important; overflow-x: hidden !important; -webkit-overflow-scrolling: touch; z-index: 2147483647 !important; will-change: transform; } /* The drawer is rendered INSIDE #header, so its own z-index is bounded by #header's stacking context. When the drawer is open, hoist the whole header to the top of the stacking order so the drawer paints over every other section (Elementor heroes, sticky bars, etc.) on every page — about-us, fleet, home, all of them. */ body:has(.stm-opened-menu-listing.opened) #header { position: relative !important; z-index: 2147483647 !important; } /* Prevent the page from scrolling underneath the drawer. */ body:has(.stm-opened-menu-listing.opened) { overflow: hidden !important; } /* Click-blocking dim backdrop behind the drawer (no markup change). */ body:has(.stm-opened-menu-listing.opened)::before { content: ""; position: fixed; inset: 0; background: rgba(0, 0, 0, 0.55); z-index: 2147483600; pointer-events: none; } /* In-drawer close (X) button — injected via rc-global.js. */ .rc-drawer-close { position: absolute; top: 14px; right: 14px; width: 40px; height: 40px; border-radius: 12px; background: rgba(255, 255, 255, 0.06); border: 1.5px solid rgba(255, 255, 255, 0.18); color: var(--rc-menu-text, rgba(255, 255, 255, 0.88)); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; z-index: 2; transition: background .15s ease, border-color .15s ease, box-shadow .15s ease, color .15s ease, transform .12s ease; } .rc-drawer-close:hover { background: var(--rc-brand-18, rgba(0, 174, 239, 0.18)); border-color: var(--rc-brand-45, rgba(0, 174, 239, 0.45)); color: #fff; box-shadow: 0 10px 24px var(--rc-brand-25, rgba(0, 174, 239, 0.25)); } .rc-drawer-close:active { transform: scale(.94); } .rc-drawer-close span { position: absolute; width: 18px; height: 2.5px; background: currentColor; border-radius: 2px; transition: background .15s ease; } .rc-drawer-close span:nth-child(1) { transform: rotate(45deg); } .rc-drawer-close span:nth-child(2) { transform: rotate(-45deg); } /* While the drawer is open, dock the existing burger trigger into the drawer's top-right corner and morph it into a close (X) button. This reuses the theme's existing toggle handler, so clicking it really closes the menu — no markup or JS change. */ body:has(.stm-opened-menu-listing.opened) .stm-menu-trigger { position: fixed !important; top: 16px !important; right: 16px !important; width: 42px !important; height: 42px !important; border-radius: 12px !important; background: rgba(255, 255, 255, 0.06) !important; border: 1.5px solid rgba(255, 255, 255, 0.18) !important; color: #fff !important; z-index: 2147483647 !important; pointer-events: auto !important; } body:has(.stm-opened-menu-listing.opened) .stm-menu-trigger:hover { background: var(--rc-brand-18) !important; border-color: var(--rc-brand-45) !important; box-shadow: 0 10px 24px var(--rc-brand-25) !important; } body:has(.stm-opened-menu-listing.opened) .stm-menu-trigger span:nth-child(1) { transform: translateY(7px) rotate(45deg) !important; width: 22px !important; } body:has(.stm-opened-menu-listing.opened) .stm-menu-trigger span:nth-child(2) { opacity: 0 !important; } body:has(.stm-opened-menu-listing.opened) .stm-menu-trigger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg) !important; width: 22px !important; align-self: center !important; } .stm-layout-header-car_rental .stm-opened-menu-listing .listing-menu-mobile { list-style: none; padding: 0 !important; margin: 0 0 18px !important; } .stm-layout-header-car_rental .stm-opened-menu-listing .listing-menu-mobile > li { margin: 0 !important; border-bottom: 1px solid rgba(255, 255, 255, 0.06); } .stm-layout-header-car_rental .stm-opened-menu-listing .listing-menu-mobile > li:last-child { border-bottom: none; } .stm-layout-header-car_rental .stm-opened-menu-listing .listing-menu-mobile > li > a { display: block; color: rgba(255, 255, 255, 0.92) !important; font-size: 15px; font-weight: 600; letter-spacing: .3px; padding: 14px 12px !important; border-radius: 10px; transition: background .15s ease, color .15s ease, padding-left .15s ease; } .stm-layout-header-car_rental .stm-opened-menu-listing .listing-menu-mobile > li > a:hover, .stm-layout-header-car_rental .stm-opened-menu-listing .listing-menu-mobile > li.current-menu-item > a { background: var(--rc-brand-16); color: #fff !important; padding-left: 18px !important; } .stm-layout-header-car_rental .stm-opened-menu-listing .listing-menu-mobile li ul.sub-menu { list-style: none; padding: 4px 0 8px 14px !important; margin: 0 !important; border-left: 1px solid var(--rc-brand-25); } .stm-layout-header-car_rental .stm-opened-menu-listing .listing-menu-mobile li ul.sub-menu a { display: block; padding: 9px 12px !important; color: rgba(255, 255, 255, 0.78) !important; font-size: 13px; font-weight: 500; border-radius: 8px; transition: background .15s ease, color .15s ease; } .stm-layout-header-car_rental .stm-opened-menu-listing .listing-menu-mobile li ul.sub-menu a:hover { background: rgba(255, 255, 255, 0.05); color: #fff !important; } /* Top bar inside drawer */ .stm-layout-header-car_rental .stm-opened-menu-listing #top-bar { background: transparent !important; border: none !important; padding: 0 !important; margin-top: 14px; } /* Hide working-hours / phone info inside the mobile drawer — those already live in the top bar, no need to duplicate them in the menu. */ .stm-opened-menu-listing .top-bar-info-wrap, .stm-opened-menu-listing .top-bar-info, .stm-opened-menu-listing #top-bar .top-bar-info-wrap, .stm-opened-menu-listing #top-bar .top-bar-info { display: none !important; } .stm-layout-header-car_rental .stm-opened-menu-listing #top-bar a, .stm-layout-header-car_rental .stm-opened-menu-listing #top-bar span, .stm-layout-header-car_rental .stm-opened-menu-listing #top-bar li { color: rgba(255, 255, 255, 0.8) !important; } /* ========================================================================== RC Premium Top Bar (above the main header) Targets partials/top-bar.php — uses the parent theme's existing markup: #top-bar > .container > .top-bar-wrapper. ========================================================================== */ .stm-layout-header-car_rental #top-bar { position: relative; background: #000000 !important; border-bottom: none !important; color: rgba(255, 255, 255, 0.78); font-size: 12.5px; line-height: 1.4; letter-spacing: .25px; /* Sit above the sticky/fixed header so dropdowns opened from the top bar (Account, Language) aren't clipped by the header behind. */ z-index: 1050; } .stm-layout-header-car_rental #top-bar::after { content: none; } .stm-layout-header-car_rental #top-bar .container { position: relative; z-index: 1; } .stm-layout-header-car_rental #top-bar .top-bar-wrapper { display: flex !important; align-items: center; flex-wrap: wrap; gap: 8px 16px; padding: 8px 0 !important; min-height: 38px; } /* Reset pull-left/right used by the parent so flex+order can govern */ .stm-layout-header-car_rental #top-bar .top-bar-wrapper > .pull-left, .stm-layout-header-car_rental #top-bar .top-bar-wrapper > .pull-right { float: none !important; display: inline-flex; align-items: center; } .stm-layout-header-car_rental #top-bar .top-bar-wrapper > .pull-right { margin-left: auto; } /* Info (working hours / phone) — pin to the LEFT side of the top bar */ .stm-layout-header-car_rental #top-bar .top-bar-wrapper { justify-content: flex-start; } .stm-layout-header-car_rental #top-bar .top-bar-info-wrap { order: 1; margin: 0 auto 0 0 !important; padding: 0 !important; float: none !important; justify-content: flex-start; } .stm-layout-header-car_rental #top-bar .top-bar-info { display: flex !important; align-items: center; flex-wrap: wrap; gap: 6px 12px; margin: 0 !important; padding: 0 !important; list-style: none; } .stm-layout-header-car_rental #top-bar .top-bar-info > li { display: inline-flex !important; align-items: center; gap: 8px; margin: 0 !important; padding: 0 12px 0 0 !important; color: rgba(255, 255, 255, 0.78); font-size: 12.5px; font-weight: 500; position: relative; } .stm-layout-header-car_rental #top-bar .top-bar-info > li + li::before { content: ""; position: absolute; left: -8px; top: 50%; transform: translateY(-50%); width: 1px; height: 14px; background: rgba(255, 255, 255, 0.12); } .stm-layout-header-car_rental #top-bar .top-bar-info > li i, .stm-layout-header-car_rental #top-bar .top-bar-info > li svg { width: 22px; height: 22px; border-radius: 50%; background: var(--rc-brand-15); color: var(--rc-brand) !important; display: inline-flex; align-items: center; justify-content: center; font-size: 10px; transition: background .15s ease, color .15s ease; } .stm-layout-header-car_rental #top-bar .top-bar-info > li:hover i { background: var(--rc-brand); color: #fff !important; } .stm-layout-header-car_rental #top-bar .top-bar-info > li a { color: rgba(255, 255, 255, 0.92) !important; font-weight: 600; text-decoration: none !important; transition: color .15s ease; } .stm-layout-header-car_rental #top-bar .top-bar-info > li a:hover { color: var(--rc-brand) !important; } /* Language switcher */ .stm-layout-header-car_rental #top-bar .language-switcher-unit { order: 2; position: relative; } .stm-layout-header-car_rental #top-bar .stm_current_language { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px !important; border-radius: 999px; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.08); color: #fff !important; font-weight: 600; font-size: 12px; cursor: pointer; transition: background .15s ease, border-color .15s ease; } .stm-layout-header-car_rental #top-bar .stm_current_language:hover { background: var(--rc-brand-15); border-color: var(--rc-brand-40); } .stm-layout-header-car_rental #top-bar .stm_current_language img { width: 16px; height: 12px; border-radius: 2px; object-fit: cover; } .stm-layout-header-car_rental #top-bar .stm_current_language i { font-size: 10px; color: rgba(255, 255, 255, 0.7); } .stm-layout-header-car_rental #top-bar .lang_dropdown_menu, .stm-layout-header-car_rental #top-bar .dropdown-menu { margin-top: 6px !important; padding: 6px !important; background: #0a0a0a !important; border: 1px solid rgba(255, 255, 255, 0.08) !important; border-radius: 12px !important; box-shadow: 0 18px 40px rgba(0, 0, 0, 0.55) !important; min-width: 180px; /* Float on top of the main header (and any other page chrome) so the middle of the menu isn't covered by the header underneath. */ z-index: 2147483000 !important; } .stm-layout-header-car_rental #top-bar .language-switcher-unit, .stm-layout-header-car_rental #top-bar .top-bar-socials .dropdown { position: relative; z-index: 1060; } .stm-layout-header-car_rental #top-bar .lang_dropdown_menu li a, .stm-layout-header-car_rental #top-bar .dropdown-menu li a, .stm-layout-header-car_rental #top-bar .dropdown-menu .dropdown-item { display: flex !important; align-items: center; gap: 8px; padding: 8px 12px !important; color: rgba(255, 255, 255, 0.85) !important; font-size: 13px; font-weight: 500; border-radius: 8px !important; background: transparent !important; text-decoration: none !important; transition: background .15s ease, color .15s ease; } .stm-layout-header-car_rental #top-bar .lang_dropdown_menu li a:hover, .stm-layout-header-car_rental #top-bar .dropdown-menu li a:hover, .stm-layout-header-car_rental #top-bar .dropdown-menu .dropdown-item:hover { background: var(--rc-brand-18) !important; color: #fff !important; } .stm-layout-header-car_rental #top-bar .lang_dropdown_menu img { width: 18px; height: 14px; border-radius: 2px; object-fit: cover; } /* Login / Register / Account button cluster (right side) */ .stm-layout-header-car_rental #top-bar .top-bar-auth, .stm-layout-header-car_rental #top-bar .top-bar-socials { order: 3; } .stm-layout-header-car_rental #top-bar .top-bar-socials, .stm-layout-header-car_rental #top-bar .header-top-bar-socs { display: inline-flex; align-items: center; } .stm-layout-header-car_rental #top-bar .menu-login-register-button { margin: 0 !important; padding: 0 !important; list-style: none; } .stm-layout-header-car_rental #top-bar .login-button { display: inline-flex !important; align-items: center; gap: 6px; padding: 4px 2px !important; background: transparent !important; border: none !important; border-radius: 0 !important; box-shadow: none !important; color: rgba(255, 255, 255, 0.85) !important; font-weight: 600 !important; font-size: 12.5px !important; letter-spacing: .35px; text-transform: uppercase; text-decoration: none !important; transition: color .15s ease; } .stm-layout-header-car_rental #top-bar .login-button:hover { color: var(--rc-brand) !important; transform: none; filter: none; box-shadow: none !important; } .stm-layout-header-car_rental #top-bar .login-button i { font-size: 12px; opacity: .85; } /* "Account ▾" dropdown when logged in (custom block in top-bar.php) */ .stm-layout-header-car_rental #top-bar .top-bar-socials .dropdown { display: inline-flex; } .stm-layout-header-car_rental #top-bar .btn-secondary.dropdown-toggle { display: inline-flex !important; align-items: center; gap: 6px; padding: 6px 14px !important; border-radius: 999px !important; background: rgba(255, 255, 255, 0.06) !important; border: 1px solid rgba(255, 255, 255, 0.12) !important; color: #fff !important; font-weight: 600 !important; font-size: 12px !important; letter-spacing: .3px; text-decoration: none !important; box-shadow: none !important; transition: background .15s ease, border-color .15s ease; } .stm-layout-header-car_rental #top-bar .btn-secondary.dropdown-toggle::after { display: none; } .stm-layout-header-car_rental #top-bar .btn-secondary.dropdown-toggle:hover, .stm-layout-header-car_rental #top-bar .btn-secondary.dropdown-toggle:focus, .stm-layout-header-car_rental #top-bar .show > .btn-secondary.dropdown-toggle { background: var(--rc-brand-18) !important; border-color: var(--rc-brand-45) !important; color: #fff !important; box-shadow: 0 6px 16px var(--rc-brand-28) !important; } .stm-layout-header-car_rental #top-bar #account-dropdown { margin-top: 6px !important; } .stm-layout-header-car_rental #top-bar #account-dropdown .dropdown-item { padding: 9px 14px !important; font-size: 13px; } /* Parent's own top-bar-auth (Login / divider / Register) */ .stm-layout-header-car_rental #top-bar .top-bar-auth .header-login-url { display: inline-flex; align-items: center; gap: 10px; padding: 5px 12px; border-radius: 999px; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.08); } .stm-layout-header-car_rental #top-bar .top-bar-auth .header-login-url a { color: rgba(255, 255, 255, 0.88) !important; font-size: 12px; font-weight: 600; text-decoration: none !important; display: inline-flex; align-items: center; gap: 6px; transition: color .15s ease; } .stm-layout-header-car_rental #top-bar .top-bar-auth .header-login-url a:hover { color: var(--rc-brand) !important; } .stm-layout-header-car_rental #top-bar .top-bar-auth .header-login-url a i { color: var(--rc-brand); font-size: 12px; } .stm-layout-header-car_rental #top-bar .top-bar-auth .vertical-divider { width: 1px; height: 14px; background: rgba(255, 255, 255, 0.16); display: inline-block; } /* Top-bar menu list (if enabled) */ .stm-layout-header-car_rental #top-bar .top-bar-menu-wrap, .stm-layout-header-car_rental #top-bar .top_bar_menu { order: 4; } .stm-layout-header-car_rental #top-bar .top_bar_menu ul { display: flex; align-items: center; gap: 4px; margin: 0; padding: 0; list-style: none; } .stm-layout-header-car_rental #top-bar .top_bar_menu ul li a { display: inline-flex; align-items: center; padding: 5px 10px; border-radius: 8px; color: rgba(255, 255, 255, 0.78) !important; font-size: 12px; font-weight: 500; text-decoration: none !important; transition: background .15s ease, color .15s ease; } .stm-layout-header-car_rental #top-bar .top_bar_menu ul li a:hover { background: rgba(255, 255, 255, 0.06); color: #fff !important; } /* Mobile top bar — keep it tight and tidy */ @media (max-width: 992px) { .stm-layout-header-car_rental #top-bar .top-bar-wrapper { padding: 6px 0 !important; gap: 6px 10px; } .stm-layout-header-car_rental #top-bar .top-bar-info > li { font-size: 11.5px; padding-right: 8px !important; } .stm-layout-header-car_rental #top-bar .top-bar-info > li + li::before { left: -5px; } } @media (max-width: 600px) { .stm-layout-header-car_rental #top-bar { font-size: 11.5px; } .stm-layout-header-car_rental #top-bar .container { padding-left: 14px; padding-right: 14px; } .stm-layout-header-car_rental #top-bar .top-bar-wrapper { justify-content: space-between; } .stm-layout-header-car_rental #top-bar .language-switcher-unit { order: 1; } .stm-layout-header-car_rental #top-bar .top-bar-socials { order: 2; } .stm-layout-header-car_rental #top-bar .top-bar-info-wrap { order: 3; width: 100%; justify-content: center; } .stm-layout-header-car_rental #top-bar .top-bar-info { justify-content: center; } .stm-layout-header-car_rental #top-bar .top-bar-auth { display: none; } .stm-layout-header-car_rental #top-bar .login-button, .stm-layout-header-car_rental #top-bar .btn-secondary.dropdown-toggle { padding: 5px 11px !important; font-size: 11.5px !important; } } /* ========================================================================== Header polish — extra micro-interactions on top of the earlier block ========================================================================== */ .stm-layout-header-car_rental .header-rental.header-listing .listing-logo-main img { transition: transform .25s ease, filter .25s ease; } /* Smooth fixed-state transition */ .stm-layout-header-car_rental .header-rental.header-listing.stm-fixed { animation: rcHeaderFixedIn .35s ease both; } @keyframes rcHeaderFixedIn { from { transform: translateY(-6px); opacity: .92; } to { transform: translateY(0); opacity: 1; } } @media (max-width: 440px) { .stm-layout-header-car_rental .listing-right-actions { padding-right: 0px !important; } } @media (max-width: 1024px) { .stm-layout-header-car_rental .stm-opened-menu-listing #top-bar .top-bar-wrapper .header-top-bar-socs { padding: 15px 20px 15px 0px !important; } .stm-layout-header-car_rental .listing-right-actions .stm-menu-trigger span { margin-bottom: 3px !important; } } @media (max-width: 768px) { .swiper, .swiper-wrapper{ z-index: 0 !important; } } /* ========================================================================== RC Premium Footer Restyles partials/footer/footer.php (#footer-main + widgets) and partials/footer/copyright.php (#footer-copyright). Pure CSS — no markup changes. Brand accents derive from --motors-base-color. ========================================================================== */ #footer { --rc-fbrand: var(--motors-base-color, #00aeef); --rc-fbrand-soft: color-mix(in srgb, var(--rc-fbrand) 18%, transparent); --rc-fbrand-glow: color-mix(in srgb, var(--rc-fbrand) 35%, transparent); --rc-foot-text: rgba(255, 255, 255, 0.72); --rc-foot-text-strong: rgba(255, 255, 255, 0.96); position: relative; color: var(--rc-foot-text); } /* Soft top accent gradient line + subtle ambient glow */ #footer-main { position: relative; padding: 0px !important; overflow: hidden; } #footer-main::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 1px; background: linear-gradient(90deg, transparent 0%, var(--rc-fbrand-glow) 20%, rgba(255, 255, 255, 0.35) 50%, var(--rc-fbrand-glow) 80%, transparent 100%); pointer-events: none; } #footer-main::after { content: ""; position: absolute; inset: 0; background: radial-gradient(800px 200px at 12% -20%, color-mix(in srgb, var(--rc-fbrand) 12%, transparent), transparent 60%), radial-gradient(700px 220px at 92% 120%, rgba(255, 255, 255, 0.04), transparent 60%); pointer-events: none; z-index: 0; } #footer-main > * { position: relative; z-index: 1; } /* Widgets grid — auto-fits as many columns as the row can hold, so empty clearfix/spacer nodes inserted by the parent theme can't punch a hole in the layout (which was pushing SOCIAL LINKS into a second row). */ #footer .footer_widgets_wrapper .widgets { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 30px 36px; width: 100%; margin: 0 !important; align-items: start; justify-content: start; } #footer .footer_widgets_wrapper .widgets > .widget, #footer .footer_widgets_wrapper .widgets > aside, #footer .footer_widgets_wrapper .widgets > .stm-widget, #footer .footer_widgets_wrapper .widgets > div, #footer .footer_widgets_wrapper .widgets > section { float: none !important; width: auto !important; margin: 0 !important; padding: 0 !important; min-width: 0; } /* Drop empty children (Bootstrap clearfix `
`, stray `
`, or empty widgets) so they don't consume a grid cell. */ #footer .footer_widgets_wrapper .widgets > br, #footer .footer_widgets_wrapper .widgets > .clearfix, #footer .footer_widgets_wrapper .widgets > :empty { display: none !important; } /* Widget headings */ #footer .widget-title, #footer .widget h2, #footer .widget h3, #footer .widget h4, #footer .widget .widgettitle, #footer .widget .footer-widget-title { position: relative; margin: 0 0 22px !important; padding-bottom: 14px !important; color: var(--rc-foot-text-strong) !important; font-size: 14px !important; font-weight: 700 !important; letter-spacing: 1.4px; text-transform: uppercase; line-height: 1.2; } #footer .widget-title::after, #footer .widget h2::after, #footer .widget h3::after, #footer .widget h4::after, #footer .widget .widgettitle::after, #footer .widget .footer-widget-title::after { content: ""; position: absolute; left: 0; bottom: 0; width: 36px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--rc-fbrand) 0%, color-mix(in srgb, var(--rc-fbrand), #fff 30%) 100%); } /* Body text */ #footer .widget p, #footer .widget li, #footer .widget span, #footer .widget a, #footer .widget address, #footer .widget .textwidget { color: var(--rc-foot-text); font-size: 14px; line-height: 1.7; } #footer .widget p { margin: 0 0 10px; } #footer .widget a { color: var(--rc-foot-text-strong); text-decoration: none !important; transition: color .15s ease; } #footer .widget a:hover { color: var(--rc-fbrand); } /* Contact info / generic icons inside widgets — give them branded circular chips so phone / email / location read as a polished list. */ #footer .widget ul { list-style: none; padding: 0; margin: 0; } #footer .widget ul li { display: flex; align-items: flex-start; gap: 10px; padding: 7px 0; } #footer .widget ul li i, #footer .widget ul li svg, #footer .widget p > i:first-child, #footer .widget p > svg:first-child { flex: 0 0 28px; width: 28px; height: 28px; border-radius: 50%; background: var(--rc-fbrand-soft); color: var(--rc-fbrand) !important; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; margin-right: 0px; transition: background .15s ease, color .15s ease, transform .15s ease; } #footer .widget ul li:hover i, #footer .widget ul li:hover svg, #footer .widget p:hover > i:first-child, #footer .widget p:hover > svg:first-child { background: var(--rc-fbrand); color: #fff !important; transform: scale(1.05); } /* Service hours — when the day name is wrapped in , treat it as a pill-style label so it stands out from the times. */ #footer .widget p strong, #footer .widget li strong, #footer .widget p b, #footer .widget li b { display: inline-block; color: var(--rc-foot-text-strong); font-weight: 700; margin-right: 6px; } /* Social icons (when rendered inside any footer widget) */ #footer .widget .copyright-socials ul, #footer .widget .footer-socials ul, #footer .widget .social-links ul, #footer .widget [class*="social"] ul { display: flex; gap: 10px; flex-wrap: wrap; } #footer .widget .copyright-socials li, #footer .widget .footer-socials li, #footer .widget [class*="social"] ul li { padding: 0; } #footer .widget .copyright-socials a, #footer .widget .footer-socials a, #footer .widget [class*="social"] ul li a { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.1); color: var(--rc-foot-text-strong) !important; transition: background .2s ease, border-color .2s ease, color .2s ease, transform .2s ease, box-shadow .2s ease; } #footer .widget .copyright-socials a:hover, #footer .widget .footer-socials a:hover, #footer .widget [class*="social"] ul li a:hover { background: linear-gradient(135deg, var(--rc-fbrand) 0%, color-mix(in srgb, var(--rc-fbrand), #000 18%) 100%); border-color: transparent; color: #fff !important; transform: translateY(-2px); box-shadow: 0 10px 24px var(--rc-fbrand-glow); } #footer .widget .copyright-socials a i, #footer .widget .footer-socials a i, #footer .widget [class*="social"] ul li a i { font-size: 15px; color: inherit !important; } /* Copyright bar */ #footer-copyright { position: relative; padding: 22px 0; font-size: 13px; color: var(--rc-foot-text); background-color: transparent !important; } #footer-copyright::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 1px; background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.12) 50%, transparent 100%); pointer-events: none; } #footer-copyright .copyright-text { color: var(--rc-foot-text); line-height: 1.6; } #footer-copyright .copyright-text a { color: var(--rc-fbrand) !important; text-decoration: none !important; font-weight: 600; transition: color .15s ease, text-shadow .15s ease; } #footer-copyright .copyright-text a:hover { color: var(--rc-foot-text-strong) !important; text-shadow: 0 0 12px var(--rc-fbrand-glow); } #footer-copyright .copyright-text .divider { display: inline-block; width: 4px; height: 4px; border-radius: 50%; background: rgba(255, 255, 255, 0.25); margin: 0 8px; vertical-align: middle; } /* Responsive — collapse to 2 columns on tablet, 1 on phone */ @media (max-width: 992px) { #footer .footer_widgets_wrapper .widgets { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; } #footer-main { padding: 50px 0 28px; } } @media (max-width: 600px) { #footer .footer_widgets_wrapper .widgets { grid-template-columns: 1fr; gap: 28px; } #footer-main { padding: 40px 0 22px; } #footer-copyright { text-align: center; padding: 18px 0; } #footer-copyright .col-md-8, #footer-copyright .col-md-4 { width: 100%; text-align: center; float: none; } #footer-copyright .pull-right { float: none !important; display: inline-block; margin-top: 10px; } } /* ========================================================================== Contact Form 7 — premium UI Brand accents derive from --motors-base-color via color-mix(). ========================================================================== */ .wpcf7 { --rc-cf-brand: var(--motors-base-color, #00aeef); --rc-cf-brand-dark: color-mix(in srgb, var(--rc-cf-brand), #000 18%); --rc-cf-brand-tint: color-mix(in srgb, var(--rc-cf-brand) 12%, transparent); --rc-cf-brand-ring: color-mix(in srgb, var(--rc-cf-brand) 22%, transparent); --rc-cf-text: #1a1a1a; --rc-cf-muted: #6b7280; --rc-cf-border: #e2e6ec; --rc-cf-bg: #ffffff; max-width: 720px; width: 100%; margin: 0 auto; box-sizing: border-box; } .wpcf7 *, .wpcf7 *::before, .wpcf7 *::after { box-sizing: border-box; } .wpcf7-form { display: grid; gap: 18px; padding: 28px; background: linear-gradient(180deg, #ffffff 0%, #fafbfd 100%); border: 1px solid #ececf1; border-radius: 18px; box-shadow: 0 12px 36px rgba(15, 23, 42, 0.06); width: 100%; max-width: 100%; overflow: hidden; } .wpcf7-form p { margin: 0 !important; display: flex; flex-direction: column; gap: 6px; } .wpcf7-form label { display: flex; flex-direction: column; gap: 6px; color: var(--rc-cf-text); font-size: 13px; font-weight: 600; letter-spacing: 0.3px; text-transform: uppercase; margin: 0 !important; } .wpcf7-form-control-wrap { display: block; position: relative; } /* Inputs / textarea / select */ .wpcf7 input[type="text"], .wpcf7 input[type="email"], .wpcf7 input[type="tel"], .wpcf7 input[type="url"], .wpcf7 input[type="number"], .wpcf7 input[type="date"], .wpcf7 input[type="password"], .wpcf7 select, .wpcf7 textarea { display: block; width: 100%; padding: 13px 16px; font-size: 14.5px; font-weight: 500; color: var(--rc-cf-text); background: var(--rc-cf-bg); border: 1.5px solid var(--rc-cf-border); border-radius: 12px; box-shadow: none; outline: none; transition: border-color .18s ease, box-shadow .18s ease, background .18s ease, transform .12s ease; box-sizing: border-box; } .wpcf7 textarea { min-height: 140px; line-height: 1.55; resize: vertical; } .wpcf7 input::placeholder, .wpcf7 textarea::placeholder { color: #9ca3af; font-weight: 400; } .wpcf7 input:hover, .wpcf7 select:hover, .wpcf7 textarea:hover { border-color: color-mix(in srgb, var(--rc-cf-brand) 35%, var(--rc-cf-border)); } .wpcf7 input:focus, .wpcf7 select:focus, .wpcf7 textarea:focus { border-color: var(--rc-cf-brand); box-shadow: 0 0 0 3px var(--rc-cf-brand-ring); background: #fff; } /* Highlight whichever field is being edited */ .wpcf7 input:focus, .wpcf7 textarea:focus { background: var(--rc-cf-brand-tint); } /* Select caret */ .wpcf7 select { appearance: none; -webkit-appearance: none; -moz-appearance: none; padding-right: 40px; background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: right 14px center; background-size: 12px 8px; } /* Submit button */ .wpcf7 input[type="submit"], .wpcf7 button[type="submit"] { appearance: none; -webkit-appearance: none; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 160px; padding: 14px 32px; border: none; border-radius: 12px; background: linear-gradient(135deg, var(--rc-cf-brand) 0%, var(--rc-cf-brand-dark) 100%); color: #fff !important; font-size: 14px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; cursor: pointer; box-shadow: 0 8px 22px color-mix(in srgb, var(--rc-cf-brand) 35%, transparent); transition: transform .15s ease, box-shadow .15s ease, filter .15s ease; justify-self: start; } .wpcf7 input[type="submit"]:hover, .wpcf7 button[type="submit"]:hover { transform: translateY(-2px); filter: brightness(1.08); box-shadow: 0 14px 30px color-mix(in srgb, var(--rc-cf-brand) 45%, transparent); } .wpcf7 input[type="submit"]:active, .wpcf7 button[type="submit"]:active { transform: scale(.97); } .wpcf7 input[type="submit"]:disabled, .wpcf7 button[type="submit"]:disabled { filter: grayscale(.3) opacity(.7); cursor: not-allowed; } /* CF7 spinner */ .wpcf7-spinner { align-self: center; margin-left: 10px; width: 22px; height: 22px; background: none; border: 2px solid color-mix(in srgb, var(--rc-cf-brand) 35%, transparent); border-top-color: var(--rc-cf-brand); border-radius: 50%; animation: rc-cf-spin .85s linear infinite; } @keyframes rc-cf-spin { to { transform: rotate(360deg); } } /* Validation errors */ .wpcf7 .wpcf7-not-valid-tip { margin-top: 6px; color: #dc2626; font-size: 12.5px; font-weight: 600; } .wpcf7 input.wpcf7-not-valid, .wpcf7 select.wpcf7-not-valid, .wpcf7 textarea.wpcf7-not-valid { border-color: #dc2626 !important; box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.14) !important; background: #fef7f7 !important; } /* Response messages */ .wpcf7 .wpcf7-response-output { margin: 18px 0 0 !important; padding: 14px 18px !important; border-radius: 12px !important; border: 1px solid transparent !important; font-size: 13.5px; font-weight: 600; line-height: 1.5; } .wpcf7 form.sent .wpcf7-response-output { color: #065f46 !important; background: #ecfdf5 !important; border-color: #a7f3d0 !important; } .wpcf7 form.invalid .wpcf7-response-output, .wpcf7 form.unaccepted .wpcf7-response-output, .wpcf7 form.failed .wpcf7-response-output, .wpcf7 form.aborted .wpcf7-response-output, .wpcf7 form.spam .wpcf7-response-output { color: #7f1d1d !important; background: #fef2f2 !important; border-color: #fecaca !important; } /* Acceptance checkbox / radio */ .wpcf7-acceptance, .wpcf7-checkbox, .wpcf7-radio { display: inline-flex; align-items: center; gap: 8px; } .wpcf7-acceptance .wpcf7-list-item, .wpcf7-checkbox .wpcf7-list-item, .wpcf7-radio .wpcf7-list-item { display: inline-flex; align-items: center; gap: 8px; margin: 0 14px 0 0; } .wpcf7-acceptance .wpcf7-list-item label, .wpcf7-checkbox .wpcf7-list-item label, .wpcf7-radio .wpcf7-list-item label { flex-direction: row; text-transform: none; font-size: 13.5px; font-weight: 500; letter-spacing: 0; color: var(--rc-cf-text); } .wpcf7 input[type="checkbox"], .wpcf7 input[type="radio"] { width: 18px; height: 18px; accent-color: var(--rc-cf-brand); } /* Two-column layout when CF7 fields are placed in a Bootstrap row */ .wpcf7-form .row > [class*="col-"] > p { margin: 0 !important; } /* Responsive */ @media (max-width: 768px) { /* Make sure the form never overflows the viewport / its parent col. */ .wpcf7 { max-width: 100% !important; padding-left: 0; padding-right: 0; } .wpcf7-form { padding: 22px 18px; gap: 14px; border-radius: 14px; width: 100%; max-width: 100%; margin: 0; } .wpcf7 input[type="text"], .wpcf7 input[type="email"], .wpcf7 input[type="tel"], .wpcf7 input[type="url"], .wpcf7 input[type="number"], .wpcf7 input[type="date"], .wpcf7 input[type="password"], .wpcf7 select, .wpcf7 textarea { width: 100%; max-width: 100%; padding: 12px 14px; font-size: 14px; } .wpcf7 textarea { min-height: 120px; } .wpcf7 input[type="submit"], .wpcf7 button[type="submit"] { width: 100%; min-width: 0; padding: 14px 24px; } } @media (max-width: 480px) { .wpcf7-form { padding: 18px 14px; gap: 12px; border-radius: 12px; } .wpcf7-form label { font-size: 12px; } .wpcf7 input[type="text"], .wpcf7 input[type="email"], .wpcf7 input[type="tel"], .wpcf7 select, .wpcf7 textarea { padding: 11px 12px; } .wpcf7-form label { width: 90% !important; } } /* ========================================================================== FOR-SALE pages — modern, premium UI for the listing and detail templates (motors-child/rc/for-sale.php and for-sale-vehicledetail.php). All brand accents derive from --motors-base-color via color-mix(). ========================================================================== */ .autoroyal-inventory-flashx, #main .stm-reservation-archive { --rc-fs-brand: var(--motors-base-color, #00aeef); --rc-fs-brand-dark: color-mix(in srgb, var(--rc-fs-brand), #000 18%); --rc-fs-brand-tint: color-mix(in srgb, var(--rc-fs-brand) 12%, transparent); --rc-fs-brand-ring: color-mix(in srgb, var(--rc-fs-brand) 22%, transparent); --rc-fs-brand-glow: color-mix(in srgb, var(--rc-fs-brand) 32%, transparent); --rc-fs-text: #111827; --rc-fs-muted: #6b7280; --rc-fs-border: #e5e7eb; --rc-fs-card: #ffffff; --rc-fs-page: #f4f6fa; } /* Page background */ .page-template-for-sale #wrapper, .page-template-for-sale-vehicledetail #wrapper, body[class*="for-sale"] #wrapper { background-color: var(--rc-fs-page, #f4f6fa) !important; } /* ---------------------------------------------------------------------- Clearfix / layout fix — the parent template floats `.stm-reservation-archive` with `.pull-left`, which collapses its parent's height to 0 and lets the footer flow up underneath the content. Force the wrapper to clear its floated children, give it a block layout, and add a comfortable bottom gap so the footer sits below the content on both for-sale.php and for-sale-vehicledetail.php. ---------------------------------------------------------------------- */ .page-template-for-sale .elementor-container, .page-template-for-sale-vehicledetail #main { display: block; width: 100%; clear: both; padding-bottom: 30px; overflow: hidden; /* contains floats */ } .page-template-for-sale .stm-reservation-archive.pull-left, .page-template-for-sale-vehicledetail #main .stm-reservation-archive { float: none !important; width: 100% !important; clear: both; } .page-template-for-sale .autoroyal-inventory-flashx::after, .page-template-for-sale-vehicledetail #main::after { content: ""; display: block; clear: both; } /* Isotope normally lays cards out with `position: absolute` and forces a fixed `height` on the container, which collides with the for-sale page's full-width stacked card design (phantom blank space, mis-heights, footer overlap). Override its inline styles so the container and the cards flow as normal block elements; Isotope's filter callback still hides non-matching cards via display:none. IMPORTANT: scope via `:has()` to a for-sale-only card class (`.stm_single_class_car`) so fleet.php and select-vehicle.php — which share `#isotope-containerx` and `.autoroyal-inventory-flashx` but use `.rc-vehicle-card` — keep their Isotope 3-per-row grid intact. */ #isotope-containerx:has(.stm_single_class_car)[style] { position: static !important; height: auto !important; overflow: visible !important; } #isotope-containerx:has(.stm_single_class_car) .stm_single_class_car.car-block { position: relative !important; top: auto !important; left: auto !important; right: auto !important; width: 100% !important; float: none !important; transform: none !important; } /* Hidden state when Isotope filters a for-sale card out. */ #isotope-containerx:has(.stm_single_class_car) .car-block.isotope-hidden, #isotope-containerx:has(.stm_single_class_car) .car-block[style*="display: none"] { display: none !important; } /* ============== FOR-SALE LISTING ===================================== */ .autoroyal-inventory-flashx { padding: 30px 0 60px; } /* Filter sidebar card */ #autoroyal-vertical-car-holder { background: var(--rc-fs-card); border: 1px solid #ececf1; border-radius: 16px; box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06); padding: 22px 20px; } #autoroyal-vertical-car-holder .filter-heading { font-size: 14px; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase; color: var(--rc-fs-text); margin: 0 0 14px; padding-bottom: 10px; border-bottom: 1px solid var(--rc-fs-border); position: relative; } #autoroyal-vertical-car-holder .filter-heading::after { content: ""; position: absolute; left: 0; bottom: -1px; width: 36px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--rc-fs-brand), color-mix(in srgb, var(--rc-fs-brand), #fff 30%)); } #autoroyal-vertical-car-holder .vertical-filter-fields-group { margin-bottom: 12px; } #autoroyal-vertical-car-holder .form-clear-label { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; font-size: 12.5px; font-weight: 700; color: var(--rc-fs-brand) !important; background: var(--rc-fs-brand-tint); border-radius: 999px; text-decoration: none !important; transition: background .15s ease, color .15s ease; } #autoroyal-vertical-car-holder .form-clear-label:hover { background: var(--rc-fs-brand); color: #fff !important; } /* Vehicle cards (for-sale list) */ .autoroyal-inventory-flashx .stm_single_class_car.car-block { background: var(--rc-fs-card); border: 1px solid #ececf1; border-radius: 16px; box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06); margin: 0 0 22px; padding: 18px; transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; overflow: hidden; } .autoroyal-inventory-flashx .stm_single_class_car.car-block:hover { transform: translateY(-3px); box-shadow: 0 18px 36px rgba(15, 23, 42, 0.12); border-color: color-mix(in srgb, var(--rc-fs-brand) 25%, #ececf1); } .autoroyal-inventory-flashx .stm_single_class_car .autoroyal-vehicle-blockx { margin: 0 !important; align-items: center; } .autoroyal-inventory-flashx .stm_single_class_car .image { position: relative; border-radius: 12px; overflow: hidden; background: #ffffff; aspect-ratio: 4 / 3; display: flex; align-items: center; justify-content: center; } .autoroyal-inventory-flashx .stm_single_class_car .image img { width: 100%; height: 100%; max-height: none; object-fit: cover; display: block; transition: transform .35s ease; } .autoroyal-inventory-flashx .stm_single_class_car.car-block:hover .image img { transform: scale(1.04); } .autoroyal-inventory-flashx .stm_single_class_car .top h3 { margin: 0 0 12px !important; font-size: 18px; font-weight: 800; color: var(--rc-fs-text); line-height: 1.25; letter-spacing: -0.2px; } .autoroyal-inventory-flashx .stm_single_class_car .top h3 a { color: inherit; text-decoration: none !important; transition: color .15s ease; } .autoroyal-inventory-flashx .stm_single_class_car .top h3 a:hover { color: var(--rc-fs-brand); } .autoroyal-inventory-flashx .stm_single_class_car .infos { display: flex; flex-wrap: wrap; gap: 6px; } .autoroyal-inventory-flashx .stm_single_class_car .infos .single_info { display: inline-flex; align-items: center; gap: 6px; background: #f3f4f6; color: #4b5563; font-size: 12px; font-weight: 600; padding: 5px 11px; border-radius: 999px; white-space: nowrap; } .autoroyal-inventory-flashx .stm_single_class_car .infos .single_info i { font-size: 13px; color: var(--rc-fs-brand); } /* Move the "More Details" button to the bottom of the card. Markup is: .autoroyal-vehicle-blockx (.row) ├── .col-md-5 (image) └── .col-md-7 (content) └── .row ├── .col-md-8 (name + info pills) └── .col-md-4 (button — pushed to the bottom) We turn the .col-md-7 inner .row into a flex column, force its two children to full width, and let `margin-top: auto` push the button row to the bottom of the card content area. */ .autoroyal-inventory-flashx .stm_single_class_car .autoroyal-vehicle-blockx { margin: 0 !important; align-items: stretch !important; } .autoroyal-inventory-flashx .stm_single_class_car .autoroyal-vehicle-blockx > [class*="col-md-7"] { display: flex; flex-direction: column; } .autoroyal-inventory-flashx .stm_single_class_car .autoroyal-vehicle-blockx > [class*="col-md-7"] > .row { display: flex !important; flex-direction: column; flex: 1 1 auto; margin: 0 !important; } .autoroyal-inventory-flashx .stm_single_class_car .autoroyal-vehicle-blockx > [class*="col-md-7"] > .row > [class*="col-md-8"], .autoroyal-inventory-flashx .stm_single_class_car .autoroyal-vehicle-blockx > [class*="col-md-7"] > .row > [class*="col-md-4"] { width: 100% !important; max-width: 100% !important; flex: 0 0 auto !important; float: none !important; padding: 0 !important; } .autoroyal-inventory-flashx .stm_single_class_car .autoroyal-vehicle-blockx > [class*="col-md-7"] > .row > [class*="col-md-4"] { margin-top: auto !important; /* pin the button row to the bottom */ padding-top: 14px !important; } .autoroyal-inventory-flashx .stm_single_class_car .stm_rent_prices, .autoroyal-inventory-flashx .stm_single_class_car .stm_rent_price { margin: 0 !important; padding: 0 !important; } .autoroyal-inventory-flashx .stm_single_class_car .stm_rent_prices { display: flex; justify-content: flex-end; align-items: center; } .autoroyal-inventory-flashx .stm_single_class_car .rc-reserve-dark, .autoroyal-inventory-flashx .stm_single_class_car .pay a.rc-reserve-dark { display: inline-flex !important; align-items: center; justify-content: center; gap: 8px; width: auto !important; min-width: 160px; max-width: 100%; padding: 12px 22px !important; background: linear-gradient(135deg, var(--rc-fs-brand) 0%, var(--rc-fs-brand-dark) 100%) !important; color: #fff !important; font-weight: 700; font-size: 12.5px; letter-spacing: 0.3px; text-transform: uppercase; white-space: nowrap; border: none !important; border-radius: 999px !important; text-decoration: none !important; box-shadow: 0 6px 16px var(--rc-fs-brand-glow); transition: transform .15s ease, box-shadow .15s ease, filter .15s ease; line-height: 1.2; } .autoroyal-inventory-flashx .stm_single_class_car .rc-reserve-dark:hover, .autoroyal-inventory-flashx .stm_single_class_car .pay a.rc-reserve-dark:hover { transform: translateY(-2px); filter: brightness(1.08); box-shadow: 0 10px 22px var(--rc-fs-brand-glow); } /* Desktop: button column sits at the bottom-right of the card. The flex chain (.col-md-7 → .row → .col-md-4) lets margin-top:auto push the button row down; justify-content:flex-end on .stm_rent_prices pins the button to the right edge. */ @media (min-width: 769px) { .autoroyal-inventory-flashx .stm_single_class_car .autoroyal-vehicle-blockx > [class*="col-md-7"] > .row > [class*="col-md-4"] { align-self: stretch; } .autoroyal-inventory-flashx .stm_single_class_car .stm_rent_prices { justify-content: flex-end !important; width: 100%; } .stm-template-car_rental_elementor .stm_custom_rental_checkout .stm_woocommerce_checkout_billing .woocommerce-billing-fields { padding: 30px 0px 30px 0px !important; } } /* Mobile enhancements — premium compact layout */ @media (max-width: 768px) { .autoroyal-inventory-flashx .stm_single_class_car.car-block { padding: 12px; border-radius: 14px; } .autoroyal-inventory-flashx .stm_single_class_car .autoroyal-vehicle-blockx { display: flex !important; flex-direction: column; gap: 12px; } .autoroyal-inventory-flashx .stm_single_class_car .image { aspect-ratio: 16/9; border-radius: 12px; margin: 0; } .autoroyal-inventory-flashx .stm_single_class_car .autoroyal-vehicle-blockx > [class*="col-md-7"] { padding: 0 4px; } .autoroyal-inventory-flashx .stm_single_class_car .top h3 { font-size: 17px !important; margin: 0 0 10px !important; } .autoroyal-inventory-flashx .stm_single_class_car .infos { gap: 6px; } .autoroyal-inventory-flashx .stm_single_class_car .infos .single_info { font-size: 11.5px; padding: 5px 10px; } /* Add clear breathing room above the button on mobile (auto-margin doesn't trigger when the parent's content fills the space, so we set the gap explicitly here). */ .autoroyal-inventory-flashx .stm_single_class_car .autoroyal-vehicle-blockx > [class*="col-md-7"] > .row > [class*="col-md-4"] { margin-top: 18px !important; padding-top: 0 !important; } /* Stretch the button full-width on mobile for a thumb-friendly tap target */ .autoroyal-inventory-flashx .stm_single_class_car .stm_rent_prices { display: flex !important; justify-content: stretch !important; width: 100% !important; } .autoroyal-inventory-flashx .stm_single_class_car .stm_rent_price, .autoroyal-inventory-flashx .stm_single_class_car .stm_rent_price .pay { width: 100%; } .autoroyal-inventory-flashx .stm_single_class_car .rc-reserve-dark, .autoroyal-inventory-flashx .stm_single_class_car .pay a.rc-reserve-dark { display: flex !important; width: 100% !important; min-width: 0 !important; max-width: 100% !important; padding: 13px 22px !important; font-size: 13px; } } /* "No vehicles" message */ .autoroyal-inventory-flashx #isotope-containerx > .col-md-9 h3 { background: var(--rc-fs-card); border: 1px solid #ececf1; border-radius: 16px; padding: 36px; font-size: 16px; font-weight: 600; color: var(--rc-fs-muted); box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06); text-align: center; } /* ============== FOR-SALE DETAIL PAGE ================================ */ /* Main grid container — full-width row */ #main .stm-reservation-archive { padding: 30px 0 60px; } #main .stm_rent_order_info { background: var(--rc-fs-card); border: 1px solid #ececf1; border-radius: 18px; box-shadow: 0 12px 36px rgba(15, 23, 42, 0.06); padding: 24px; } /* Carousel — premium gallery */ #main #carousel-example-generic { border-radius: 14px; overflow: hidden; background: #f3f4f6; box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08); margin-bottom: 22px; } #main #carousel-example-generic .carousel-inner .item img { width: 100%; height: 460px; object-fit: cover; display: block; } #main #carousel-example-generic .carousel-control { width: 44px; height: 44px; border-radius: 50%; background: rgba(255, 255, 255, 0.95) !important; color: var(--rc-fs-text); top: 50%; transform: translateY(-50%); opacity: 1; text-shadow: none; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18); display: inline-flex; align-items: center; justify-content: center; transition: background .15s ease, color .15s ease, transform .15s ease; } #main #carousel-example-generic .carousel-control.left { left: 12px; } #main #carousel-example-generic .carousel-control.right { right: 12px; } #main #carousel-example-generic .carousel-control:hover { background: var(--rc-fs-brand) !important; color: #fff; transform: translateY(-50%) scale(1.06); } #main #carousel-example-generic .carousel-control i { font-size: 18px; } #main #carousel-example-generic .carousel-indicators { bottom: 14px; margin: 0; width: auto; left: 50%; transform: translateX(-50%); display: inline-flex; gap: 6px; padding: 6px 10px; border-radius: 999px; background: rgba(0, 0, 0, 0.35); backdrop-filter: blur(8px); } #main #carousel-example-generic .carousel-indicators li { width: 8px; height: 8px; border-radius: 50%; border: none; background: rgba(255, 255, 255, 0.55); margin: 0; transition: width .2s ease, background .2s ease; } #main #carousel-example-generic .carousel-indicators li.active { width: 22px; border-radius: 4px; background: var(--rc-fs-brand); } /* Vehicle name + price hero */ #main .stm_rent_order_info .title { margin: 18px 0 18px; } #main .vehicle-name { margin: 0 0 8px !important; font-size: 26px !important; font-weight: 800 !important; color: var(--rc-fs-text); letter-spacing: -0.4px; line-height: 1.2; } #main .stm_rent_order_info .subtitle { display: inline-flex; align-items: baseline; gap: 4px; margin: 0 !important; padding: 6px 16px; background: var(--rc-fs-brand-tint); border-radius: 999px; font-size: 20px !important; font-weight: 800 !important; color: var(--rc-fs-brand) !important; } #main .stm_rent_order_info .subtitle .woocommerce-Price-amount, #main .stm_rent_order_info .subtitle .woocommerce-Price-currencySymbol { color: inherit !important; } /* Specs table */ #main .rc-price-table { margin: 20px 0; border-radius: 12px; overflow: hidden; border: 1px solid var(--rc-fs-border); background: #fff; } #main .rc-price-table table { width: 100%; border-collapse: separate; border-spacing: 0; } #main .rc-price-table tbody tr { transition: background .15s ease; } #main .rc-price-table tbody tr:nth-child(even) { background: #fafbfc; } #main .rc-price-table tbody tr:hover { background: var(--rc-fs-brand-tint); } #main .rc-price-table tbody tr td { padding: 12px 18px !important; border: none !important; border-bottom: 1px solid #eef0f3 !important; color: var(--rc-fs-text); font-size: 14px; line-height: 1.4; } #main .rc-price-table tbody tr:last-child td { border-bottom: none !important; } #main .rc-price-table tbody tr td.opt-label { font-weight: 600 !important; color: var(--rc-fs-muted); text-transform: uppercase; letter-spacing: 0.4px; font-size: 12px; width: 40%; } #main .rc-price-table tbody tr td.opt-value { text-align: right; font-weight: 700 !important; color: var(--rc-fs-text); } /* Features list */ #main .vc_custom_heading { margin: 26px 0 14px !important; font-size: 14px; font-weight: 800; letter-spacing: 1.4px; text-transform: uppercase; color: var(--rc-fs-text); position: relative; padding-bottom: 10px; } #main .vc_custom_heading::after { content: ""; position: absolute; left: 0; bottom: 0; width: 36px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--rc-fs-brand), color-mix(in srgb, var(--rc-fs-brand), #fff 30%)); } #main .stm-single-listing-car-features .lists-horizontal ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px 14px; } #main .stm-single-listing-car-features .lists-horizontal ul li.row-2 { display: flex; align-items: center; gap: 10px; padding: 9px 12px; background: #f3f4f6; border-radius: 8px; font-size: 13.5px; font-weight: 500; color: var(--rc-fs-text); transition: background .15s ease, color .15s ease, transform .15s ease; } #main .stm-single-listing-car-features .lists-horizontal ul li.row-2:hover { background: var(--rc-fs-brand-tint); transform: translateX(4px); } #main .stm-single-listing-car-features .lists-horizontal ul li.row-2 i.fa-check-circle { color: var(--rc-fs-brand) !important; font-size: 15px; } /* Contact seller form */ #main .customer-info { margin-top: 0; } #main .stm_custom_rental_checkout { background: var(--rc-fs-card); border: 1px solid #ececf1; border-radius: 18px; box-shadow: 0 12px 36px rgba(15, 23, 42, 0.06); padding: 24px; } #main #check_availability_form .woocommerce-billing-fields { margin: 0 -8px; } #main #check_availability_form .woocommerce-billing-fields > .col-md-12 > h4 { margin: 0 8px 18px; padding-bottom: 12px; font-size: 16px; font-weight: 800; letter-spacing: 0.4px; color: var(--rc-fs-text); border-bottom: 1px solid var(--rc-fs-border); position: relative; } #main #check_availability_form .woocommerce-billing-fields > .col-md-12 > h4::after { content: ""; position: absolute; left: 8px; bottom: -1px; width: 40px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--rc-fs-brand), color-mix(in srgb, var(--rc-fs-brand), #fff 30%)); } #main #check_availability_form .form-group { margin-bottom: 14px !important; } #main #check_availability_form label { display: block; margin: 0 0 6px; font-size: 12px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; color: var(--rc-fs-text); } #main #check_availability_form input[type="text"], #main #check_availability_form input[type="email"], #main #check_availability_form input[type="tel"], #main #check_availability_form textarea { width: 100%; padding: 12px 14px !important; font-size: 14px !important; font-weight: 500; color: var(--rc-fs-text); background: #fff; border: 1.5px solid var(--rc-fs-border) !important; border-radius: 10px !important; box-shadow: none !important; outline: none; transition: border-color .18s ease, box-shadow .18s ease, background .18s ease; box-sizing: border-box; } #main #check_availability_form textarea { min-height: 110px; resize: vertical; line-height: 1.55; } #main #check_availability_form input::placeholder, #main #check_availability_form textarea::placeholder { color: #9ca3af; font-weight: 400; } #main #check_availability_form input:focus, #main #check_availability_form textarea:focus { border-color: var(--rc-fs-brand) !important; box-shadow: 0 0 0 3px var(--rc-fs-brand-ring) !important; background: #fff; } #main #check_availability_form input.error, #main #check_availability_form textarea.error { border-color: #dc2626 !important; box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.12) !important; background: #fef7f7; } #main #check_availability_form label.error { display: block; margin: 6px 0 0; font-size: 12.5px; font-weight: 600; color: #dc2626; text-transform: none; letter-spacing: 0; } /* Check availability CTA */ #main .availability-btn { display: inline-flex !important; align-items: center; justify-content: center; gap: 8px; width: 100%; margin-top: 6px; padding: 14px 22px !important; background: linear-gradient(135deg, var(--rc-fs-brand) 0%, var(--rc-fs-brand-dark) 100%) !important; color: #fff !important; font-size: 14px; font-weight: 800; letter-spacing: 0.5px; text-transform: uppercase; text-decoration: none !important; border: none !important; border-radius: 12px !important; box-shadow: 0 10px 24px var(--rc-fs-brand-glow); cursor: pointer; transition: transform .15s ease, box-shadow .15s ease, filter .15s ease; } #main .availability-btn:hover { transform: translateY(-2px); filter: brightness(1.08); box-shadow: 0 14px 30px var(--rc-fs-brand-glow); } #main .availability-btn:active { transform: scale(.98); } /* Responsive — for-sale list and detail */ @media (max-width: 992px) { .autoroyal-inventory-flashx .stm_single_class_car .autoroyal-vehicle-blockx { flex-direction: column; } .autoroyal-inventory-flashx .stm_single_class_car .image { aspect-ratio: 16 / 9; margin-bottom: 14px; } #main #carousel-example-generic .carousel-inner .item img { height: 340px; } } @media (max-width: 768px) { .autoroyal-inventory-flashx { padding: 18px 0 40px; } #autoroyal-vertical-car-holder { padding: 18px 16px; } .autoroyal-inventory-flashx .stm_single_class_car.car-block { padding: 14px; border-radius: 14px; } #main .stm_rent_order_info { padding: 18px; border-radius: 14px; } #main #carousel-example-generic .carousel-inner .item img { height: 260px; } #main #carousel-example-generic .carousel-control { width: 38px; height: 38px; } #main .vehicle-name { font-size: 22px !important; } #main .rc-price-table tbody tr td { padding: 10px 14px !important; font-size: 13px; } /* Contact-Seller form — full-width on mobile. Neutralise the wrapping Elementor column's gutter and stretch the form card edge-to-edge so it reads as a dedicated section under the gallery/specs instead of a narrow boxed card. */ #main .elementor-column.elementor-col-40, #main .customer-info { width: 100% !important; max-width: 100% !important; padding: 0 !important; margin: 0 !important; } #main .elementor-element.elementor-widget-motors-rental-checkout-form, #main .elementor-widget-motors-rental-checkout-form > .elementor-widget-container { padding: 0 !important; margin: 0 !important; } #main .stm_custom_rental_checkout { width: 100%; padding: 22px 18px; margin: 16px 0 0; border-radius: 14px; box-sizing: border-box; } #main #check_availability_form { width: 100%; } #main #check_availability_form .woocommerce-billing-fields { margin: 0 !important; } #main #check_availability_form .col-md-6, #main #check_availability_form .col-md-12 { width: 100% !important; padding: 0 !important; float: none !important; } #main #check_availability_form input[type="text"], #main #check_availability_form input[type="email"], #main #check_availability_form input[type="tel"], #main #check_availability_form textarea { width: 100%; max-width: 100%; padding: 11px 14px !important; font-size: 14px !important; } #main .availability-btn { width: 100%; padding: 13px 22px !important; font-size: 13.5px; } } @media (max-width: 480px) { #main #carousel-example-generic .carousel-inner .item img { height: 220px; } #main .stm-single-listing-car-features .lists-horizontal ul { grid-template-columns: 1fr; } }