/** * Limousine Service Germany - Modern Design (Lufthansa-inspired) * Premium, clean, professional look * Toggle: Add class "modern-theme" to to activate */ /* ======================================== CSS Variables - Lufthansa-inspired palette ======================================== */ body.modern-theme { --lsg-primary: #05164d; --lsg-primary-light: #0a2472; --lsg-primary-dark: #030d2e; --lsg-accent: #fdc300; --lsg-accent-hover: #e5b000; --lsg-white: #ffffff; --lsg-bg: #f5f7fa; --lsg-card-bg: #ffffff; --lsg-text: #1a1a1a; --lsg-text-muted: #6b7280; --lsg-border: #e5e7eb; --lsg-border-focus: #05164d; --lsg-success: #059669; --lsg-error: #dc2626; --lsg-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); --lsg-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); --lsg-radius: 8px; --lsg-radius-lg: 12px; --lsg-transition: all 0.2s ease-in-out; } /* ======================================== Base Styles ======================================== */ body.modern-theme { background-color: var(--lsg-bg); font-family: 'Inter', 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif; color: var(--lsg-text); } body.modern-theme .content-wrapper { background-color: var(--lsg-bg); } /* ======================================== Card Container for Form Sections ======================================== */ body.modern-theme .booking-form .box-body { background: var(--lsg-card-bg); border-radius: var(--lsg-radius-lg); box-shadow: var(--lsg-shadow); padding: 2rem; border: 1px solid var(--lsg-border); } body.modern-theme .booking-form .container { padding-top: 1.5rem; } /* ======================================== Form Labels ======================================== */ body.modern-theme label { font-size: 0.875rem; font-weight: 600; color: var(--lsg-text); letter-spacing: -0.01em; } body.modern-theme .form-group { margin-bottom: 1.25rem; } /* ======================================== Form Controls (Inputs, Selects, Textareas) ======================================== */ body.modern-theme .form-control { border: 1.5px solid var(--lsg-border); border-radius: var(--lsg-radius); padding: 0.75rem 1rem; font-size: 0.9375rem; color: var(--lsg-text); background-color: var(--lsg-white); transition: var(--lsg-transition); height: auto; } body.modern-theme .form-control:focus { border-color: var(--lsg-primary); box-shadow: 0 0 0 3px rgba(5, 22, 77, 0.1); outline: none; } body.modern-theme .form-control::placeholder { color: var(--lsg-text-muted); } body.modern-theme .form-control[readonly] { background-color: var(--lsg-bg); border-color: var(--lsg-border); } /* ======================================== Select2 Modern Styling ======================================== */ body.modern-theme .select2-container--default .select2-selection--single { border: 1.5px solid var(--lsg-border); border-radius: var(--lsg-radius); height: 44px; padding: 0.5rem 0.75rem; transition: var(--lsg-transition); } body.modern-theme .select2-container--default .select2-selection--single:hover { border-color: var(--lsg-primary-light); } body.modern-theme .select2-container--default.select2-container--focus .select2-selection--single, body.modern-theme .select2-container--default.select2-container--open .select2-selection--single { border-color: var(--lsg-primary); box-shadow: 0 0 0 3px rgba(5, 22, 77, 0.1); } body.modern-theme .select2-container--default .select2-selection--single .select2-selection__rendered { color: var(--lsg-text); line-height: 28px; padding-left: 0; } body.modern-theme .select2-container--default .select2-selection--single .select2-selection__arrow { height: 42px; right: 8px; } body.modern-theme .select2-dropdown { border: 1.5px solid var(--lsg-border); border-radius: var(--lsg-radius); box-shadow: var(--lsg-shadow-lg); margin-top: 4px; } body.modern-theme .select2-container--default .select2-results__option--highlighted[aria-selected] { background-color: var(--lsg-primary); color: var(--lsg-white); } body.modern-theme .select2-container--default .select2-search--dropdown .select2-search__field { border: 1.5px solid var(--lsg-border); border-radius: var(--lsg-radius); padding: 0.5rem 0.75rem; } body.modern-theme .select2-container--default .select2-search--dropdown .select2-search__field:focus { border-color: var(--lsg-primary); outline: none; } /* ======================================== Buttons ======================================== */ body.modern-theme .btn { border-radius: var(--lsg-radius); padding: 0.75rem 1.5rem; font-weight: 600; font-size: 0.9375rem; transition: var(--lsg-transition); border: none; cursor: pointer; } body.modern-theme .btn-primary, body.modern-theme .btn-save { background-color: var(--lsg-primary); color: var(--lsg-white); } body.modern-theme .btn-primary:hover, body.modern-theme .btn-save:hover { background-color: var(--lsg-primary-light); transform: translateY(-1px); box-shadow: var(--lsg-shadow); } body.modern-theme .btn-success { background-color: var(--lsg-accent); color: var(--lsg-primary); } body.modern-theme .btn-success:hover { background-color: var(--lsg-accent-hover); transform: translateY(-1px); } body.modern-theme .btn-cancel { background-color: var(--lsg-error); color: var(--lsg-white); } body.modern-theme .btn-abort { background-color: var(--lsg-text-muted); color: var(--lsg-white); } body.modern-theme .btn-abort:hover { background-color: #4b5563; } /* ======================================== Service Type Selection (Radio Cards) ======================================== */ body.modern-theme .service-types-list label { font-size: 0.9375rem; line-height: 1.4; margin-top: 0.5rem; } body.modern-theme .service-types-list label .sm-text { font-size: 0.75rem; color: var(--lsg-text-muted); margin-top: 0.25rem; } body.modern-theme .service-types-list [type=radio] { width: 18px; height: 18px; accent-color: var(--lsg-primary); } /* ======================================== Car Selection Cards ======================================== */ body.modern-theme .cars-list .car-info { background: var(--lsg-white); border: 2px solid var(--lsg-border); border-radius: var(--lsg-radius-lg); padding: 1rem; transition: var(--lsg-transition); margin-bottom: 0.75rem; } body.modern-theme .cars-list .car-info:hover { border-color: var(--lsg-primary-light); box-shadow: var(--lsg-shadow); } body.modern-theme .car-type-radio + label { border: 2px solid var(--lsg-border); border-radius: var(--lsg-radius); color: var(--lsg-text); padding: 1rem; transition: var(--lsg-transition); background: var(--lsg-white); } body.modern-theme .car-type-radio + label:hover { border-color: var(--lsg-primary-light); } body.modern-theme .car-type-radio:checked + label { background-color: var(--lsg-primary); border-color: var(--lsg-primary); color: var(--lsg-white); box-shadow: var(--lsg-shadow); } body.modern-theme .car-rates .row { border: 2px solid var(--lsg-success); border-radius: var(--lsg-radius); background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%); } body.modern-theme .cars-list .car-info > span { color: var(--lsg-primary); font-weight: 700; } /* ======================================== Tariff Information Box ======================================== */ body.modern-theme .tarrifs { background: linear-gradient(135deg, var(--lsg-bg) 0%, #e5e7eb 100%); border-radius: var(--lsg-radius-lg); padding: 1.25rem; border-left: 4px solid var(--lsg-accent); } body.modern-theme .tarrifs .title { font-size: 1rem; font-weight: 700; color: var(--lsg-primary); margin-bottom: 0.75rem; } body.modern-theme .tarrifs ul { margin: 0; padding-left: 1.25rem; } body.modern-theme .tarrifs li { color: var(--lsg-text-muted); font-size: 0.875rem; margin-bottom: 0.25rem; } body.modern-theme .total_cont { background: var(--lsg-primary); color: var(--lsg-white); padding: 0.5rem 1rem; border-radius: var(--lsg-radius); } body.modern-theme .total_rate { color: var(--lsg-accent); font-weight: 700; } /* ======================================== Horizontal Rules ======================================== */ body.modern-theme .booking-form hr { border: none; height: 1px; background: linear-gradient(to right, transparent, var(--lsg-border), transparent); margin: 1.5rem 0; } /* ======================================== Remarks Textarea ======================================== */ body.modern-theme textarea.form-control { min-height: 100px; resize: vertical; } /* ======================================== Rate Preview Box ======================================== */ body.modern-theme .rate-preview { background: var(--lsg-bg); border: 2px solid var(--lsg-primary); border-radius: var(--lsg-radius); padding: 0.75rem; text-align: center; color: var(--lsg-primary); font-weight: 600; } body.modern-theme .utc-preview { border-color: var(--lsg-success); color: var(--lsg-success); } /* ======================================== Loading Overlay ======================================== */ body.modern-theme .lds-css { background-color: rgba(5, 22, 77, 0.7); backdrop-filter: blur(4px); } body.modern-theme .lds-css .msg { font-weight: 600; font-size: 1rem; } body.modern-theme .lds-gear > div div { background: var(--lsg-accent); } /* ======================================== Page Header ======================================== */ body.modern-theme .content-header h1 { color: var(--lsg-primary); font-weight: 700; } /* ======================================== Service Type Gold Accent ======================================== */ body.modern-theme .service-type-gold { color: var(--lsg-accent); font-weight: 700; } /* ======================================== Red Label (or) ======================================== */ body.modern-theme .red_label { color: var(--lsg-error); font-weight: 600; font-size: 0.875rem; } /* ======================================== Theme Toggle Button (optional UI) ======================================== */ .theme-toggle { position: fixed; bottom: 20px; right: 20px; z-index: 9999; background: #05164d; color: white; border: none; padding: 10px 16px; border-radius: 8px; cursor: pointer; font-size: 14px; font-weight: 600; box-shadow: 0 4px 12px rgba(0,0,0,0.2); transition: all 0.2s ease; } .theme-toggle:hover { background: #0a2472; transform: translateY(-2px); } /* ======================================== Responsive Adjustments ======================================== */ @media (max-width: 768px) { body.modern-theme .booking-form .box-body { padding: 1rem; } body.modern-theme .btn { width: 100%; margin-bottom: 0.5rem; } body.modern-theme .tarrifs { padding: 1rem; } }