/*
// file : frontend/web/css/car_rental.css
*/

/* ====================================================
   MOBILE OPTIMIZATION
   ==================================================== */
@media (max-width: 767px) {
    .scroll-nav, #calculated_interval {
        display:none !important;
        opacity:0 !important;
        position:absolute !important;
        left:-2000px !important;
        top:-2000px !important;
        visibility:hidden !important;
        overflow:hidden !important;
        width:0px !important;
        height:0px !important;
    }
}
@font-face {
    font-family: 'DSEG7';
    src: url('/webfonts/DSEG7ModernMini-Bold.woff2') format('woff2');
    /*src: url('/webfonts/DSEG7ClassicMini-Regular.woff2') format('woff2');*/
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}


.car-rental-page {
    min-height: 100vh;
    background: linear-gradient(160deg, #f5f5f5 0%, #e9e9e9 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 30px 16px 60px;
}

.car-rental-wrapper {
    background: #ffffff;
    border-radius: 14px;
    padding: 38px 42px 34px;
    width: 100%;
    max-width: 700px;
    min-width: 422px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.07),
    0 10px 24px rgba(0, 0, 0, 0.13),
    0 28px 56px rgba(0, 0, 0, 0.14),
    0 0 0 1px rgba(0, 0, 0, 0.04);
    position: relative;
}

/* ---- Alert ---- */
.cr-alert {
    padding: 12px 16px;
    border-radius: 8px;
    margin-bottom: 22px;
    font-size: 14px;
}

.cr-alert-success {
    background: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.cr-alert-error {
    background: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
    font-weight: 500;
}

/* ---- Labels ---- */
.cr-label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.09em;
    color: #1a1a1a;
    margin-bottom: 8px;
    text-transform: uppercase;
}

/* ---- Field groups ---- */
.cr-field-group {
    margin-bottom: 18px;
}

/* ====================================================
   LOCATION SEARCH
   ==================================================== */
.cr-location-search-wrap {
    position: relative;
    display: flex;
    align-items: center;
    border: 1px solid #b0b8c4;
    border-radius: 8px;
    background: #eff0f5;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.cr-location-search-wrap:focus-within {
    border-color: #4A90E2;
    box-shadow: 0 0 0 3px rgba(74, 144, 226, 0.14);
}

.cr-search-icon {
    display: flex;
    align-items: center;
    padding: 0 12px;
    color: #6b7a8d;
    pointer-events: none;
    flex-shrink: 0;
}

.cr-location-input {
    flex: 1;
    border: none;
    outline: none;
    font-size: 15px;
    color: #111;
    padding: 9px 0;
    background: #eff0f5;
    min-width: 0;
    border-radius: 0 8px 8px 0; /* Jobb oldali kerekítés alapértelmezetten */
}

.cr-location-input::placeholder {
    color: #A9B5C3;
}

/* Ha a wrapper-ben van GPS gomb, akkor az input ne legyen lekerekített jobb oldalon */
.cr-location-search-wrap:has(.cr-gps-btn) .cr-location-input {
    border-radius: 0;
}

.cr-gps-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0 14px;
    color: #4A90E2;
    display: flex;
    align-items: center;
    flex-shrink: 0;
    transition: color 0.2s, transform 0.2s;
    border-radius: 0 6px 6px 0;
}

.cr-gps-btn:hover {
    color: #357ABD;
}

.cr-gps-btn.loading {
    animation: cr-spin 1s linear infinite;
}

.cr-gps-btn.cr-gps-active {
    color: #2e9e5b;
}

.cr-gps-btn.cr-gps-active:hover {
    color: #1e7a44;
}

.cr-gps-btn.cr-gps-denied {
    color: #bbb;
}

.cr-gps-btn.cr-gps-denied:hover {
    color: #4A90E2;
}

@keyframes cr-spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* ---- Dropdown ---- */
.cr-location-dropdown {
    position: absolute;
    top: calc(100% + 5px);
    left: 0;
    right: 0;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08),
    0 16px 40px rgba(0, 0, 0, 0.13);
    z-index: 1050;
    max-height: 260px;
    overflow-y: auto;
    display: none;
    scroll-behavior: smooth;
}

.cr-location-dropdown.open {
    display: block;
}

/* Scrollbar */
.cr-location-dropdown::-webkit-scrollbar {
    width: 6px;
}

.cr-location-dropdown::-webkit-scrollbar-track {
    background: #f5f5f5;
    border-radius: 10px;
}

.cr-location-dropdown::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 10px;
}

.cr-location-dropdown::-webkit-scrollbar-thumb:hover {
    background: #aaa;
}

.cr-location-item {
    display: flex;
    justify-content: flex-start;
    align-items: normal;
    padding: 11px 16px;
    font-size: 14px;
    color: #333;
    cursor: default;
    border-bottom: 1px solid #f0f0f0;
    transition: background 0.12s;
    gap: 10px;
    position:relative;
    margin:0 !important;

}

/*.cr-location-item:last-child {*/
/*    border-bottom: none;*/
/*}*/

.cr-location-item:hover,
.cr-location-item.active {
    background: #E8F2FC;
    color: #4A90E2;
    outline: 2px solid #4A90E2;
    outline-offset: -2px;
}

.cr-item-label {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cr-item-address {
    color: #6fa8c8;
    font-size: 13px;
}

.cr-location-item:hover .cr-item-address,
.cr-location-item.active .cr-item-address {
    color: #4a8ab0;
}

.cr-item-dist {
    flex-shrink: 0;
    font-size: 12px;
    color: #881D21;
    background-color: #FDECE3;
    padding: 2px 7px;
    border-radius: 10px;
    white-space: nowrap;
}

.cr-location-item:hover .cr-item-dist,
.cr-location-item.active .cr-item-dist {
    /*background: rgba(226, 144, 226, 0.10);*/
    /*color: #4A90E2;*/
    background-color: #FDECE3;
    color: #881D21;
}

.cr-item-highlight {
    background: rgba(74, 144, 226, 0.12);
    border-radius: 2px;
    padding: 0 1px;
}

.cr-location-item-empty {
    padding: 13px 16px;
    font-size: 14px;
    color: #aaa;
    font-style: italic;
    text-align: center;
}

.cr-location-loading {
    padding: 13px 16px;
    text-align: center;
    color: #aaa;
    font-size: 13px;
}

.cr-checkbox-row {
    margin-bottom: 10px;
    position: relative;
}

.cr-checkbox-label {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    color: #505050;
    cursor: pointer;
    user-select: none;
}

.cr-checkbox-label input[type="checkbox"] {
    display: none;
}

.cr-checkbox-custom {
    width: 18px;
    height: 18px;
    min-width: 18px;
    border: 1px solid #c8c8c8;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color 0.2s, background 0.2s;
    background: #eff0f5;
}

.cr-checkbox-label input[type="checkbox"]:checked + .cr-checkbox-custom {
    background: #4A90E2;
    border-color: #4A90E2;
}

.cr-checkbox-label input[type="checkbox"]:checked + .cr-checkbox-custom::after {
    content: '';
    display: block;
    width: 10px;
    height: 6px;
    border-left: 2px solid #fff;
    border-bottom: 2px solid #fff;
    transform: rotate(-45deg) translateY(-1px);
}

/* ====================================================
   DÁTUM / IDŐ SOR
   ==================================================== */
.cr-dates-row {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 18px;
}

.cr-date-block {
    flex: 1;
}

.cr-dates-arrow {
    font-size: 20px;
    color: #aaa;
    padding-bottom: 11px;
    flex-shrink: 0;

}

.cr-date-time-wrap {
    display: flex;
    gap: 8px;
}

/* jQuery UI datepicker input */
.cr-date-input {
    flex: 1.4;
    border: 1px solid #b0b8c4;
    border-radius: 8px;
    padding: 9px 12px;
    font-size: 15px;
    color: #4A90E2;
    background: #e9f4fa;
    outline: none;
    min-width: 0;
    width: 100%;
    transition: border-color 0.2s, box-shadow 0.2s;
    cursor: pointer;
    box-sizing: border-box;
}

.cr-date-input:focus {
    border-color: #4A90E2;
    box-shadow: 0 0 0 3px rgba(74, 144, 226, 0.14);
    background: #e9f4fa;
    color: #4A90E2;
}

.cr-time-select {
    flex: 1;
    border: 1px solid #b0b8c4;
    border-radius: 8px;
    font-size: 15px;
    color: #5CC3B7;
    outline: none;
    appearance: none;
    -webkit-appearance: none;
    background: #eff0f5 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236b7a8d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat right 10px center;
    padding: 9px 32px 9px 10px;
    cursor: pointer;
    min-width: 0;
    transition: border-color 0.2s, box-shadow 0.2s;
    box-sizing: border-box;
}

.cr-time-select:focus {
    border-color: #4A90E2;
    box-shadow: 0 0 0 3px rgba(74, 144, 226, 0.14);
}

.cr-help-btn {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 1px solid #bbb;
    background: none;
    font-size: 11px;
    font-weight: 700;
    color: #888;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin-left: 2px;
    transition: border-color 0.2s, color 0.2s;
    flex-shrink: 0;
}

.cr-help-btn:hover {
    border-color: #4A90E2;
    color: #4A90E2;
}

.cr-discount-wrap {
    margin-bottom: 10px;
    margin-top: 6px;
}

.cr-text-input {
    width: 100%;
    border: 1px solid #b0b8c4;
    border-radius: 8px;
    padding: 12px 14px;
    font-size: 15px;
    color: #111;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
    box-sizing: border-box;
    /*height:42.5px;*/
    background-color: #eff0f4;

}

.cr-text-input:focus {
    border-color: #4A90E2;
    box-shadow: 0 0 0 3px rgba(74, 144, 226, 0.14);
}

.cr-text-input::placeholder {
    color: #A9B5C3;
}

/* ====================================================
   SUBMIT
   ==================================================== */
.cr-submit-wrap {
    margin-top: 24px;
    text-align: center;
}

/* ============================================
   EGYSÉGES GOMB STÍLUS - cr-btn-primary
   Használat: index, results, personal-data, thank-you, confirm, cancel
   ============================================ */

.cr-btn-primary {
    position: relative;
    display: inline-block;
    width: auto;
    min-width: 200px;
    background: linear-gradient(135deg, #4A90E2 0%, #357ABD 100%);
    color: #fff;
    text-align: center;
    border: none;
    border-radius: 8px;
    padding: 14px 32px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.08em;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(74, 144, 226, 0.4);
    margin: 0 auto;
    transition: all 0.3s ease;
    overflow: hidden;
    text-decoration: none;
}

/* Shine effect - átfutó tükröződés */
.cr-btn-primary::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(
            90deg,
            transparent,
            rgba(255, 255, 255, 0.3),
            transparent
    );
    transition: left 0.5s ease;
}

.cr-btn-primary:hover::before {
    left: 100%;
}

.cr-btn-primary:hover {
    background: linear-gradient(135deg, #357ABD 0%, #2868a8 100%);
    box-shadow: 0 6px 25px rgba(74, 144, 226, 0.6);
    transform: translateY(-2px);
}

.cr-btn-primary:active {
    transform: translateY(0) scale(0.98);
    box-shadow: 0 2px 10px rgba(74, 144, 226, 0.4);
}

.cr-btn-primary:disabled,
.cr-btn-primary.disabled {
    background: #c8cdd4;
    color: #f0f0f0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    cursor: not-allowed;
    transform: none;
}

.cr-btn-primary:disabled:hover,
.cr-btn-primary.disabled:hover {
    background: #c8cdd4;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transform: none;
}

.cr-btn-primary:disabled::before,
.cr-btn-primary.disabled::before {
    display: none;
}

/* PIROS VÁLTOZAT - lemondás, törlés */
.cr-btn-danger {
    position: relative;
    display: inline-block;
    width: auto;
    min-width: 200px;
    background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);
    color: #fff;
    text-align: center;
    border: none;
    border-radius: 8px;
    padding: 14px 32px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.08em;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(231, 76, 60, 0.4);
    margin: 0 auto;
    transition: all 0.3s ease;
    overflow: hidden;
    text-decoration: none;
}

.cr-btn-danger::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(
            90deg,
            transparent,
            rgba(255, 255, 255, 0.3),
            transparent
    );
    transition: left 0.5s ease;
}

.cr-btn-danger:hover::before {
    left: 100%;
}

.cr-btn-danger:hover {
    background: linear-gradient(135deg, #c0392b 0%, #a93226 100%);
    box-shadow: 0 6px 25px rgba(231, 76, 60, 0.6);
    transform: translateY(-2px);
}

.cr-btn-danger:active {
    transform: translateY(0) scale(0.98);
    box-shadow: 0 2px 10px rgba(231, 76, 60, 0.4);
}

/* ============================================
   RÉGI OSZTÁLYOK - KOMPATIBILITÁS
   Ezek mostantól ugyanazt csinálják mint cr-btn-primary
   ============================================ */

.cr-submit-btn {
    position: relative;
    display: inline-block;
    width: auto;
    min-width: 200px;
    background: linear-gradient(135deg, #4A90E2 0%, #357ABD 100%);
    color: #fff;
    text-align: center;
    border: none;
    border-radius: 8px;
    padding: 14px 32px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.08em;
    cursor: pointer;
    /*box-shadow: 0 4px 15px rgba(74, 144, 226, 0.4);*/
    box-shadow: 4px 4px 6px rgba(0, 0, 0, 0.5);
    margin: 0 auto;
    transition: all 0.3s ease;
    overflow: hidden;
    text-decoration: none;
}

.cr-submit-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transition: left 0.5s ease;
}

.cr-submit-btn:hover::before {
    left: 100%;
}

.cr-submit-btn:hover {
    background: linear-gradient(135deg, #357ABD 0%, #2868a8 100%);
    box-shadow: 4px 4px 6px rgba(0, 0, 0, 0.5);
    transform: translateY(-2px);
}

.cr-submit-btn:active {
    transform: translateY(0) scale(0.98);
    box-shadow: 0 2px 10px rgba(74, 144, 226, 0.4);
}

.cr-submit-btn.cr-btn-disabled,
.cr-submit-btn:disabled {
    background: #c8cdd4;
    color: #f0f0f0;
    /*box-shadow: none;*/
    cursor: default;
    transform: none;
    box-shadow: 3px 4px 4px rgba(0,0,0,0.1), inset 0 2px 4px rgba(255,255,255,0.2);

}

.cr-submit-btn.cr-btn-disabled:hover,
.cr-submit-btn:disabled:hover {
    background: #c8cdd4;
    box-shadow: 3px 4px 4px rgba(0,0,0,0.1), inset 0 2px 4px rgba(255,255,255,0.2);

}

.cr-error,
.help-block.help-block-error {
    display: block;
    color: #c0111f;
    font-size: 12px;
    margin-top: 5px;
}

.cr-dropoff-group {
    /*margin-top: 6px;*/
}

/* ====================================================
   JQUERY UI DATEPICKER OVERRIDE
   ==================================================== */
/* ====================================================
   FLATPICKR OVERRIDE
   ==================================================== */
.flatpickr-calendar {
    font-family: inherit;
    font-size: 14px;
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.14);
}

.flatpickr-months {
    background: #4A90E2;
    border-radius: 8px 8px 0 0;
}

.flatpickr-month {
    color: #fff;
    fill: #fff;
}

.flatpickr-current-month .flatpickr-monthDropdown-months {
    background: #4A90E2;
    color: #fff;
}

.flatpickr-current-month input.cur-year {
    color: #fff;
    font-weight: 600;
}

.flatpickr-prev-month,
.flatpickr-next-month {
    fill: #fff !important;
}

.flatpickr-prev-month:hover svg,
.flatpickr-next-month:hover svg {
    fill: rgba(255, 255, 255, 0.8) !important;
}

.flatpickr-day.selected,
.flatpickr-day.selected:hover {
    background: #4A90E2 !important;
    border-color: #4A90E2 !important;
    color: #fff !important;
}

.flatpickr-day.today {
    border-color: #4A90E2;
    color: #4A90E2;
}

.flatpickr-day:hover {
    background: #E8F2FC !important;
    border-color: #E8F2FC !important;
    color: #4A90E2 !important;
}

.flatpickr-weekday {
    font-size: 12px;
    color: #888;
}

/* ====================================================
   RESZPONZÍV
   ==================================================== */
@media (max-width: 600px) {
    .car-rental-wrapper {
        padding: 24px 18px 20px;
    }

    .cr-dates-row {
        flex-direction: column;
        gap: 12px;
    }

    .cr-dates-arrow {
        display: none;
    }

    .cr-date-block {
        width: 100%;
    }
}

/* ====================================================
   AVAILABILITY INDICATOR
   ==================================================== */
.cr-availability-indicator {
    background: #E8F2FC;
    border-left: 4px solid #4A90E2;
    padding: 12px 16px;
    border-radius: 6px;
    margin-bottom: 18px;
    display: none;
    align-items: center;
    gap: 12px;
    font-size: 14px;
    color: #333;
    min-height: 48px;
}

.cr-availability-indicator[style*="display: block"],
.cr-availability-indicator[style*="display: flex"],
.cr-availability-indicator.visible {
    display: flex !important;
}

.cr-availability-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    color: #4A90E2;
}

.cr-availability-text {
    flex: 1;
}

.cr-availability-count {
    font-weight: 700;
    color: #4A90E2;
    font-size: 16px;
}

.cr-availability-loading {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 1px solid #e0e0e0;
    border-top-color: #4A90E2;
    border-radius: 50%;
    animation: cr-spin 0.7s linear infinite;
}

@keyframes cr-bg-drift {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

.maincontainer_car_rental {

    background: linear-gradient(
            180deg,
            #f0f0f0 0%,
            #9DC0E9 25%,
            #f0f0f0 50%,
            #9DC0E9 75%,
            #f0f0f0 100%
    );
    background-size: 100% 400%;
    aanimation: cr-bg-drift 220s ease infinite;
    /*min-height: 100vh;*/
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/*background-color: #fdfdfd;*/
/*background-image:*/
/*!* Kormánykerék mintázat (körívek) *!*/
/*radial-gradient(circle at 30% 30%, rgba(0, 0, 0, 0.11) 0px, transparent 50px),*/
/*radial-gradient(circle at 70% 70%, rgba(0, 0, 0, 0.11) 0px, transparent 50px),*/
/*!* Koncentrikus körök *!*/
/*repeating-radial-gradient(circle at 50% 50%, transparent 0, transparent 15px, rgba(0, 0, 0, 0.11) 16px, rgba(0, 0, 0, 0.11) 17px);*/


/*#region select2*/
/* ====================================================
   KATEGÓRIA SZŰRŐ - SELECT2
   ==================================================== */
.cr-category-select {
    width: 100%;
}

/* SELECT2 Container Override */
.select2-container--default .select2-selection--single {
    border: 1px solid #b0b8c4;
    border-radius: 8px;
    height: auto;
    padding: 10px 14px;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single {
    border-color: #4A90E2;
    box-shadow: 0 0 0 3px rgba(74, 144, 226, 0.14);
    outline: none;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: #111;
    font-size: 15px;
    line-height: 1.4;
    padding: 0;
}

.select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: #A9B5C3;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 100%;
    right: 10px;
}

.select2-dropdown {
    border: 1px solid #b0b8c4;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.10), 0 16px 40px rgba(0, 0, 0, 0.15);
}

.select2-container--default .select2-results__option {
    padding: 10px 14px;
    font-size: 14px;
    color: #222;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: #E8F2FC;
    color: #2a6db5;
}

.select2-container--default .select2-results__option[aria-selected=true] {
    background-color: #4A90E2;
    color: #fff;
}

@media (max-width: 600px) {
    .select2-container--default .select2-selection--single {
        padding: 8px 12px;
    }
}

.select_option1 {
    color:#111111
}

.select_option2 {
    color:#c0c0c0
}


/*#endregion*/

.form-group {
    /*min-height:70px;*/
}


#calculated_interval {
    position: absolute;
    right: 0px;
    top: 0px;
    font-size: 14px;
    display: none;
}

#calculated_interval .cr-interval-value {
    color: #4A90E2;
    font-weight: 700;
}

.shine-text {
    font-size: 13px;
    color: #4A90E2;
    font-weight: 400;
    letter-spacing: 3px;
    margin: 0;

    display: inline-block; /* fontos */
    position: relative;
    overflow: hidden; /* levágja a kilógó részt */
    white-space: nowrap; /* ne törjön sort */
}

/* fénycsík */
.shine-text::after {
    content: "";
    position: absolute;
    inset: 0; /* top:0 right:0 bottom:0 left:0 */
    transform: translateX(-150%) skewX(-20deg);

    background: linear-gradient(
            120deg,
            rgba(255, 255, 255, 0) 40%,
            rgba(255, 255, 255, 0.6) 50%,
            rgba(255, 255, 255, 0) 60%
    );

    animation: shine 12s linear infinite;
    pointer-events: none; /* biztonság kedvéért */
}

@keyframes shine {
    0% {
        transform: translateX(-150%) skewX(-20deg);
    }

    16.6% { /* ~2 mp */
        transform: translateX(150%) skewX(-20deg);
    }

    100% {
        transform: translateX(150%) skewX(-20deg);
    }
}

/* ====================================================
MINDEGY OPCIÓ A DROPDOWN-BAN
==================================================== */
.cr-location-any-item {
    background: #f0f7ff;
    border-bottom: 2px solid #d0e4f7 !important;
    color: #4A90E2 !important;
    font-style: italic;
    padding: 12px 16px;
}

.cr-location-any-item:hover,
.cr-location-any-item.active {
    background: #d8ecff !important;
    color: #2a6db5 !important;
}

.cr-location-any-item .cr-item-label em {
    font-style: normal;
    font-weight: 500;
}

/* ====================================================
   LOADING OVERLAY
   ==================================================== */
.cr-loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(2px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 999999;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.cr-loading-overlay.visible {
    opacity: 1;
    visibility: visible;
}

/* Animált autó iframe háttérként */
.cr-loading-animation {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
    opacity: 0.5;
    pointer-events: none;
    z-index: 1;
}

/* Loading tartalom (spinner + text) */
.cr-loading-content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: rgba(255, 255, 255, 0.9);
    padding: 40px 60px;
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

.cr-loading-spinner {
    width: 50px;
    height: 50px;
    border: 4px solid #e0e0e0;
    border-top-color: #4A90E2;
    border-radius: 50%;
    animation: cr-loading-spin 0.8s linear infinite;
}

.cr-loading-text {
    margin-top: 16px;
    font-size: 15px;
    color: #4A90E2;
    font-weight: 600;
    letter-spacing: 0.05em;
}

@keyframes cr-loading-spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}


/*
// file : frontend/web/css/car_rental_results.css
*/

/* =============================================
   Autóbérlés Találati Oldal
   ============================================= */

/*
// file : frontend/web/css/car_rental_results.css
*/

/* =============================================
   Autóbérlés Találati Oldal
   ============================================= */

@keyframes cr-bg-drift2 {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}


.car-rental-results-page {

    background: linear-gradient(
            135deg,
            #000000 0%,
            #eaeaea 25%,
            #e2e2e2 50%,
            #4a90e2 75%,
            #dddddd 100%
    );
    background-size: 400% 400%;
    animation: cr-bg-drift2 22s ease infinite;
    min-height: 100vh;

}

.car-rental-results-wrapper {
    max-width: 1400px;
    margin: 0 auto;
}

/* =============================================
   LÉPÉSJELZŐ (STEPPER)
   ============================================= */
.cr-stepper {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 32px;
    gap: 0;
    width: 100%;
}

.cr-step {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: inherit;
    flex-shrink: 0;
}

.cr-step__circle {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
    flex-shrink: 0;
    transition: background 0.2s;
}

.cr-step__label {
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
}

/* Kész lépés (1.) */
.cr-step--done .cr-step__circle {
    background: #4a90e2;
    color: #fff;
}

.cr-step--done .cr-step__label {
    color: #4a90e2;
}

a.cr-step--done:hover .cr-step__circle {
    background: #3a7bc8;
}

/* Aktív lépés (2.) */
.cr-step--active .cr-step__circle {
    background: #4a90e2;
    color: #fff;
    box-shadow: 0 0 0 4px rgba(74, 144, 226, 0.2);
    /*cursor:default;*/
}

.cr-step--active .cr-step__label {
    color: #1a1a1a;
    font-weight: 700;
    /*cursor:default;*/
}

/* Inaktív lépés (3.) */
.cr-step--inactive .cr-step__circle {
    background: #ddd;
    color: #999;
}

.cr-step--inactive .cr-step__label {
    color: #aaa;
}

/* Összekötő vonal */
.cr-step__connector {
    flex: 0 0 60px;
    height: 2px;
    background: #ddd;
    margin: 0 8px;
}

.cr-step__connector--done {
    background: #4a90e2;
}

/* =============================================
   FEJLÉC + RENDEZÉS TOPBAR
   ============================================= */
.cr-results-topbar {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 28px;
}

.cr-results-header {
    flex: 1;
}

.cr-results-title {
    font-size: 28px;
    font-weight: 300;
    color: #333;
    margin: 0 0 6px 0;
    letter-spacing: 0.04em;
    line-height: 1.3;
}

.cr-results-count {
    font-weight: 700;
    color: #1a1a1a;
}

.cr-results-subtitle {
    font-size: 22px;
    font-weight: 400;
    color: #4A90E2;
}

.cr-results-info {
    font-size: 13px;
    color: #666;
    margin: 6px 0 0 0;
}

.cr-results-info a {
    color: #4A90E2;
    text-decoration: none;
    border-bottom: 1px solid #4A90E2;
}

.cr-results-info a:hover {
    color: #3a7bc8;
    border-bottom-color: #3a7bc8;
}

/* Rendezés */
.cr-sort-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    padding-top: 4px;
}

.cr-sort-label {
    font-size: 12px;
    color: #888;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap;
}

.cr-sort-btn {
    padding: 6px 14px;
    border: 1.5px solid #ddd;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    color: #555;
    text-decoration: none;
    transition: border-color 0.2s, color 0.2s, background 0.2s;
    white-space: nowrap;
    background-color: #ffffff;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.cr-sort-btn i {
    font-size: 11px;
    display: inline-flex;
    align-items: center;
}

.cr-sort-btn:hover {
    border-color: #4a90e2;
    color: #4a90e2;
}

.cr-sort-btn--active {
    background: #4a90e2;
    border-color: #4a90e2;
    color: #fff;
}

.cr-sort-btn--active:hover {
    background: #3a7bc8;
    border-color: #3a7bc8;
    color: #fff;
}

/* =============================================
   AUTÓ KÁRTYA
   ============================================= */
.cr-results-list {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.cr-car-card {
    background: #ffffff;
    border-radius: 12px;
    padding: 0;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06),
    0 6px 16px rgba(0, 0, 0, 0.1);
    display: flex;
    overflow: hidden;
    transition: box-shadow 0.3s, transform 0.2s;
    cursor:default;
}

.cr-car-card:hover {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08),
    0 12px 24px rgba(0, 0, 0, 0.12);
    transform: translateY(-1px);
}

/* =============================================
   BAL OLDAL - KÉP
   ============================================= */
.cr-car-left {
    flex: 0 0 300px;
    background: #f8f9fa;
    padding: 24px;
    display: flex;
    flex-direction: column;
    position: relative;
    border-right: 1px dotted #e5e5e5;
}

.cr-car-category-badge {
    position: absolute;
    top: 16px;
    left: 16px;
    background: #4A90E2;
    color: #ffffff;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    z-index: 2;
}

.cr-car-license-plate-badge {
    position: absolute;
    bottom: 16px;
    left: 16px;
    z-index: 2;
}

.cr-car-number {
    position: absolute;
    top: 2px;
    right: 5px;
    font-size: 48px;
    font-weight: 900;
    color: rgba(0, 0, 0, 0.04);
    line-height: 1;
    z-index: 1;
    pointer-events: none;
    font-family: 'Montserrat', sans-serif;
}

.cr-car-name-top {
    font-size: 14px;
    color: #333;
    margin-top: 50px;
    margin-bottom: 8px;
    text-align: center;
    font-weight: 600;
}

.cr-car-image-container {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 160px;
}

.cr-car-image {
    width: 100%;
    height: auto;
    max-height: 190px;
    object-fit: contain;
}

.cr-car-no-image {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ccc;
}

/* =============================================
   KÖZÉPSŐ RÉSZ
   ============================================= */
.cr-car-middle {
    flex: 1;
    padding: 28px 32px;
    display: flex;
    flex-direction: column;
}

.cr-section-title {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.09em;
    color: #1a1a1a;
    margin-bottom: 16px;
    text-transform: uppercase;
}

.cr-includes-list {
    margin-bottom: 20px;
}

.cr-include-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 14px;
    color: #333;
    margin-bottom: 8px;
    line-height: 1.4;
}

.cr-check {
    width: 16px;
    height: 16px;
    color: #22c55e;
    flex-shrink: 0;
    margin-top: 2px;
}

/* ---- Spec ikonok – kompakt flex-wrap ---- */
.cr-tech-specs {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 28px;
    margin-bottom: 20px;
    align-items: center;
}

.cr-spec {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 500;
    color: #4a90e2; /* kék szöveg */
    white-space: nowrap;
}

.cr-spec-icon-img {
    width: 22px;
    height: 22px;
    object-fit: contain;
    flex-shrink: 0;


}

/* ---- Helyszín – alul ---- */
.cr-car-location {
    margin-top: auto;
    padding-top: 16px;
    border-top: 1px solid #eee;
    font-size: 13px;
    color: #333;
    display: flex;
    align-items: center;
    gap: 5px;
    font-weight: 500;
    flex-wrap: wrap;
}

.cr-car-location svg {
    color: #4A90E2;
    flex-shrink: 0;
}

.cr-car-distance {
    color: #4A90E2;
    font-weight: 700;
    display:none !important;
}

/* =============================================
   JOBB OLDAL - ÁR
   ============================================= */
.cr-car-right {
    flex: 0 0 260px;
    background: #fafafa;
    padding: 28px 24px;
    border-left: 1px dotted #e5e5e5;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.cr-price-section {
    display: flex;
    flex-direction: column;
}

.cr-price-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.09em;
    color: #666;
    text-transform: uppercase;
    margin-bottom: 8px;
    text-align: right;
}

.cr-price-main {
    font-size: 34px;
    font-weight: 700;
    color: #4a90e2;
    line-height: 1;
    padding-bottom: 15px;
    text-align: right;
}

.cr-price-days {
    font-size: 12px;
    color: #888;
    margin-bottom: 25px;
    line-height: 1.4;
    text-align: right;
}

.cr-price-action {
    margin-bottom: 16px;
}

.cr-choose-btn {
    position: relative;
    display: block;
    width: 100%;
    background: linear-gradient(135deg, #4A90E2 0%, #357ABD 100%);
    color: #ffffff;
    text-align: center;
    padding: 11px 24px;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    box-shadow: 4px 4px 6px rgba(0, 0, 0, 0.5);
    transition: all 0.3s ease;
    margin: 0 auto;
    height: 42px;
    overflow: hidden;
}

.cr-choose-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transition: left 0.5s ease;
}

.cr-choose-btn:hover::before {
    left: 100%;
}

.cr-choose-btn:hover {
    background: linear-gradient(135deg, #357ABD 0%, #2868a8 100%);
    box-shadow: 4px 4px 6px rgba(0, 0, 0, 0.5);
    transform: translateY(-2px);
    color: #fff;
}

.cr-choose-btn:active {
    transform: translateY(0) scale(0.98);
    box-shadow: 0 2px 10px rgba(74, 144, 226, 0.4);
}

.cr-free-cancel {
    font-size: 12px;
    color: #22c55e;
    font-weight: 600;
    text-align: center;
    margin-bottom: 8px;
    letter-spacing:2px;
    text-transform: uppercase;
}

.cr-availability-confirm {
    font-size: 11px;
    color: #777;
    text-align: center;
    line-height: 1.4;
}

/* =============================================
   NINCS EREDMÉNY
   ============================================= */
.cr-no-results {
    background: #ffffff;
    border-radius: 12px;
    padding: 60px 40px;
    text-align: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.cr-no-results svg {
    color: #ccc;
    margin-bottom: 20px;
}

.cr-no-results h3 {
    font-size: 24px;
    font-weight: 400;
    color: #333;
    margin: 0 0 12px 0;
}

.cr-no-results p {
    font-size: 15px;
    color: #666;
    margin: 0 0 28px 0;
}

/* =============================================
   RESPONSIVE
   ============================================= */
@media (max-width: 1200px) {
    .cr-car-card {
        flex-direction: column;
    }

    .cr-car-left,
    .cr-car-right {
        flex: none;
        width: 100%;
    }

    .cr-car-right {
        border-left: none;
        border-top: 1px solid #e5e5e5;
    }

    .cr-car-location {
        margin-top: 20px;
    }
}

@media (max-width: 900px) {
    .cr-results-topbar {
        flex-direction: column;
        align-items: flex-start;
    }

    .cr-sort-bar {
        flex-wrap: wrap;
    }
}

@media (max-width: 768px) {
    .car-rental-results-page {
        padding: 12px 12px 40px;
    }

    .cr-stepper {
        gap: 0;
    }

    .cr-step__connector {
        flex: 0 0 30px;
    }

    .cr-step__label {
        display: none;
    }

    .cr-results-title {
        font-size: 20px;
    }

    .cr-results-subtitle {
        font-size: 16px;
    }

    .cr-car-left,
    .cr-car-middle,
    .cr-car-right {
        padding: 20px;
    }

    .cr-price-main {
        font-size: 28px;
        text-align: right;

    }

    .cr-tech-specs {
        gap: 10px 20px;
    }
}

/* CAR RENTAL PERSONAL DATA PAGE  */

/*
// file: frontend/web/css/car_rental_booking.css
// Autóbérlés – 3. lépés: személyes adatok / foglalás oldal
*/

/* =============================================
   OLDAL WRAPPER
   ============================================= */
.cr-booking-page {
    padding: 0 16px 60px;
}

.cr-booking-wrap {
    max-width: 960px;
    margin: 0 auto;
    padding-top: 16px;
}

/* =============================================
   FOGLALÁS ÖSSZEFOGLALÓ PANEL - CARD LAYOUT v4 FIXED
   ============================================= */
.cr-summary-bar {
    background: rgba(255, 255, 255, 0.95);
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(74, 144, 226, .12), 0 2px 8px rgba(0, 0, 0, .08);
    border: 1px solid rgba(74, 144, 226, .15);
    margin-bottom: 32px;
    overflow: hidden;
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
    cursor:default;
    text-align:left;
    /*pointer-events: none;*/
}

.cr-summary-header {
    background: linear-gradient(135deg, #4a90e2 0%, #357ABD 100%);
    color: #fff;
    padding: 12px 28px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.cr-summary-header h2 {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.cr-summary-edit {
    font-size: 12px;
    color: rgba(255, 255, 255, .9);
    text-decoration: underline;
    cursor: pointer;
    transition: color .2s;
}

.cr-summary-edit:hover {
    color: #fff;
}

/* FŐSZEKCIO: Autó kép + Infók */
.cr-summary-content {
    display: flex;

    gap: 0;
    background: #fff;
    padding: 0;
}

/* BAL OLDAL - Autó kép + Kategória + Ikonok */
.cr-summary-left {
    flex: 0 0 640px;
    display: flex;
    flex-direction: column;
    background: linear-gradient(135deg, #fefefe 0%, #fefefe 100%);
    padding: 20px 20px;
    /* border-right: 1px dotted rgba(0,0,0,0.5); --- EZT TÖRÖLD KI, mert a pszeudoelem helyettesíti */

    /* Fontos! */
    position: relative;
}

.cr-summary-left::after {
    content: '';
    position: absolute;
    right: 0;
    top: 5%;
    height: 90%;
    width: 1px;
    background-color: rgba(0, 0, 0, 0.1); /* dotted helyett solid, de használhatsz dotted-ot is, lásd lent */

    /* Ha dotted kell: */
    /* background: repeating-linear-gradient(to bottom, rgba(0,0,0,0.5) 0px, rgba(0,0,0,0.5) 4px, transparent 4px, transparent 8px); */
}

.cr-car-image-main {
    /*max-width: 100%;*/
    /*width: 100%;*/
    /*height: auto;*/
    display: block;
    border-radius: 8px;
    margin-bottom: 0px;

    /* HOVER SHINE EFFECT - EREDETI */
    --a: 8deg;
    /*transform: perspective(400px) rotate3d(var(--r,1,-1),0,calc(var(--i,1)*var(--a)));*/
    -webkit-mask:
            linear-gradient(135deg,#000c 40%,#000,#000c 60%)
            100% 100%/250% 250%;
    transition: 0s;
    cursor: pointer; /* Ez változott: default → pointer */
}

.cr-car-image-main:hover {
    /*--i: -1;*/
    -webkit-mask-position: 0 0;
    transition: .4s;
}

/* Kategória + Ikonok alul a képen */
.cr-car-info-bottom {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: auto;
    position: relative; /* Szükséges az absolute rendszámhoz */
}

.cr-car-category {
    font-size: 19px;
    color: #333;
    transform: scaleY(1.1);
}

.cr-car-category strong {
    font-weight: 700;
}

.cr-car-specs-row {
    display: flex;
    gap: 20px;
    align-items:center;
    flex-wrap: wrap;
    border:0px solid black;
}


.cr-spec-item {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    color: #4A90E2;
    font-weight: 500;
    padding-right:10px;
    border-right:2px solid #f0f0f0;
}

.cr-spec-item:last-child {
    border-right:0px solid #f0f0f0;
}




.cr-spec-item img {
    width: 22px;
    height: 22px;
    object-fit: contain;
    flex-shrink: 0;
}

/* JOBB OLDAL - Infók + Ár */
.cr-summary-right {
    flex: 0 0 335px;
    padding: 20px 22px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.cr-booking-info {
    display: flex;
    flex-direction: column;
    gap: 0px;
}

.cr-booking-section {
    border-bottom: 1px solid #f0f0f0;
    padding-bottom: 16px;
}

.cr-booking-section:last-of-type {
    border-bottom: none;
    padding-bottom: 0;
}

.cr-booking-title {
    font-size: 18px;
    font-weight: normal;
    color: #333;
    margin: 0 0 22px 0;
}

/* Dátumok grid */
.cr-booking-dates-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    /*border-left:1px solid black;*/
}

.cr-date-col {
    display: flex;
    flex-direction: column;
}

.cr-date-label {
    font-size: 14px;
    font-weight: bold;
    color: #4A90E2;
    margin-bottom: 1px;
}

.cr-date-value {
    font-size: 14px;
    font-weight: 600;
    color: #333;
    line-height: 1.4;
}

/* Helyek */
.cr-location-item {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    margin-bottom: 12px;
}

.cr-location-item:last-child {
    margin-bottom: 0;
}

.cr-location-icon {
    color: #4a90e2;
    flex-shrink: 0;
    margin-top: 2px;
}

.cr-location-label {
    font-size: 11px;
    font-weight: 700;
    color: #888;
    margin-bottom: 4px;
}

.cr-location-value {
    font-size: 16px;
    font-weight: normal;
    color: #333;
    margin-left:20px;
    white-space: normal;
    overflow-wrap: break-word;
    word-break: break-word;
}

.cr-location-address {
    font-size: 14px;
    color: #666;
    margin-top: 2px;
    font-weight:normal;

}

.cr-location-address2 {
    font-size: 14px;
    color: #666;
    margin-top: 2px;
    font-weight:normal;
    margin-left: 89px;
}


/* Időtartam */
.cr-duration-text {
    /*font-size: 17px;*/
    /*color: #555;*/
    border-bottom: 1px solid #f0f0f0;
    padding-bottom:10px;
    padding-TOP:10px;

    font-size: 14px;
    font-weight: bold;
    color: #4A90E2;
    text-transform: uppercase;


}

.cr-duration-text strong {
    color: #333;
    font-weight: 700;
    border:0
}

/* Ár (jobb alsó sarok - NINCS BOX!) */
.cr-booking-price-corner {
    text-align: right;
    margin-top: 24px;
    margin-right:20px;


}

.cr-price-main {
    font-size: 36px;
    font-weight: 800;
    color: #4a90e2;
    line-height: 1;
    margin-bottom: 4px;

    text-shadow: 3px 3px 3px rgba(0,0,0,0.25);


}

.cr-price-details {
    font-size: 13px;
    color: #666;
    margin-bottom: 0px;
}

.cr-price-note {
    font-size: 10px;
    color: #22c55e;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing:1px;
}

/* =============================================
   FOGLALÁSI FORM
   ============================================= */
.cr-book-form {
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(6px);
    border-radius: 16px;
    padding: 36px 40px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, .07);
}

.cr-form-section {
    margin-bottom: 32px;
}

.cr-form-section-title {
    font-size: 12px;
    font-weight: 700;
    color: #4a90e2;
    text-transform: uppercase;
    letter-spacing: .09em;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 2px solid rgba(74, 144, 226, .15);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.cr-form-completion {
    font-size: 11px;
    font-weight: normal;
    color: #b8b8b8;
    text-transform: none;
    letter-spacing: 1px;

}

.cr-completion-percent, #cr-completion-percent {
    color: #4a90e2;
    font-weight: normal;
    font-size: 13px;
}

/* Grid sorok */
.cr-input-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 16px;
}

.cr-input-row.single {
    grid-template-columns: 1fr;
}

.cr-input-row.triple {
    grid-template-columns: 1fr 1fr 1fr;
}

/* Mező */
.cr-field {
    display: flex;
    flex-direction: column;
}

.cr-field label {
    font-size: 11px;
    font-weight: 700;
    color: #888;
    text-transform: uppercase;
    letter-spacing: .08em;
    margin-bottom: 6px;
}

.cr-field input,
.cr-field select,
.cr-field textarea {
    padding: 12px 14px;
    border: 1.5px solid #e0e0e0;
    border-radius: 9px;
    font-size: 14px;
    color: #222;
    background: #fff;
    outline: none;
    transition: border-color .2s, box-shadow .2s;
    width: 100%;
    box-sizing: border-box;
}

.cr-field textarea {
    min-height: 80px;
    resize: vertical;
}

.cr-field input::placeholder,
.cr-field textarea::placeholder {
    color: rgba(138, 149, 163, 0.7);
    opacity: 1;
}

.cr-field input:focus,
.cr-field select:focus,
.cr-field textarea:focus {
    border-color: #4a90e2;
    box-shadow: 0 0 0 3px rgba(74, 144, 226, .10);
}

.cr-field input.cr-input-error {
    border-color: #dc2626;
}

/* =============================================
   JELSZÓ RÉSZ (toggle)
   ============================================= */
.cr-password-section {
    display: none;
    margin-top: 8px;
}

.cr-password-section.visible {
    display: block;
}

/* =============================================
   SZÁMLÁZÁSI CÍM MÁSOLÁS LINK
   ============================================= */
.cr-billing-copy-link {
    font-size: 12px;
    color: #4a90e2;
    cursor: pointer;
    /*text-decoration: underline;*/
    border-bottom: 1px dotted #4a90e2;
    margin-bottom: 14px;
    display: inline-block;
    transition: color .2s;
    text-transform:none;
    font-weight:normal
}

.cr-billing-copy-link:hover {
    color: #3a7bc8;
}

#cr-open-terms {
    color: #4a90e2;
    cursor: pointer;
    /*text-decoration: underline;*/
    border-bottom: 1px dotted #4a90e2;
    text-decoration: none;
    letter-spacing:1px;

}

/* =============================================
   CHECKBOX SOROK
   ============================================= */
.cr-check-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
    cursor: pointer;
    user-select: none;
}

.cr-check-row input[type="checkbox"] {
    display: none;
}

.cr-check-box {
    width: 20px;
    height: 20px;
    border: 2px solid #ccc;
    border-radius: 5px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    transition: border-color .2s, background .2s;
    flex-shrink: 0;
}

.cr-check-box-invalid {
    border-color: #e74c3c !important;
    box-shadow: 0 0 3px rgba(255, 68, 68, 0.6) !important;
    /*background-color: #fffff !Important;*/
}

.cr-check-box-valid {
    border-color: #27ae60 !important;
}

.cr-check-row input[type="checkbox"]:checked + .cr-check-box {
    background: #4a90e2;
    border-color: #4a90e2;
}

.cr-check-row input[type="checkbox"]:checked + .cr-check-box::after {
    content: '';
    display: block;
    width: 5px;
    height: 9px;
    border: 2px solid #fff;
    border-top: none;
    border-left: none;
    transform: rotate(45deg) translateY(-1px);
}

.cr-check-text {
    font-size: 14px;
    color: #444;
    line-height: 1.5;
}

.cr-check-text a {
    color: #4a90e2;
    text-decoration: underline;
    cursor: pointer;
}

/* =============================================
   VALIDÁCIÓS HIBA DOBOZ
   ============================================= */
.cr-errors-box {
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 10px;
    padding: 16px 20px;
    margin-bottom: 24px;
}

.cr-errors-box ul {
    margin: 0;
    padding-left: 20px;
}

.cr-errors-box li {
    color: #dc2626;
    font-size: 14px;
    margin-bottom: 4px;
}

/* =============================================
   FELTÉTELEK MODAL
   ============================================= */
.cr-modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(0, 0, 0, 0.55);
    align-items: center;
    justify-content: center;
}

.cr-modal-overlay.active {
    display: flex;
}

.cr-modal {
    background: #fff;
    border-radius: 16px;
    max-width: 640px;
    width: 90%;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.20);
}

.cr-modal-header {
    background: #4a90e2;
    color: #fff;
    padding: 18px 24px;
    border-radius: 16px 16px 0 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.cr-modal-header h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
}

.cr-modal-close {
    background: none;
    border: none;
    color: #fff;
    cursor: pointer;
    font-size: 24px;
    line-height: 1;
    padding: 0;
    opacity: .8;
    transition: opacity .2s;
}

.cr-modal-close:hover {
    opacity: 1;
}

.cr-modal-body {
    padding: 24px;
    overflow-y: auto;
    flex: 1;
    font-size: 14px;
    color: #444;
    line-height: 1.7;
}

.cr-modal-footer {
    padding: 16px 24px;
    border-top: 1px solid #eee;
    text-align: right;
}

/* =============================================
   SUBMIT GOMB
   ============================================= */
.cr-book-submit-wrap {
    text-align: center;
    margin-top: 32px;
}

.cr-book-submit-btn {
    position: relative;
    display: inline-block;
    background: linear-gradient(135deg, #4A90E2 0%, #357ABD 100%);
    color: #fff;
    padding: 11px 56px;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.08em;
    cursor: pointer;
    transition: all 0.3s ease;
    text-transform: uppercase;
    text-decoration: none;
    box-shadow: 4px 4px 6px rgba(0, 0, 0, 0.5);
    height: 42px;
    overflow: hidden;
}

.cr-book-submit-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transition: left 0.5s ease;
}

.cr-book-submit-btn:hover::before {
    left: 100%;
}

.cr-book-submit-btn:hover {
    background: linear-gradient(135deg, #357ABD 0%, #2868a8 100%);
    color: #fff;
    box-shadow: 4px 4px 6px rgba(0, 0, 0, 0.5);
    transform: translateY(-2px);
}

.cr-book-submit-btn:active {
    transform: translateY(0) scale(0.98);
    box-shadow: 0 2px 10px rgba(74, 144, 226, 0.4);
}

.cr-book-submit-btn:disabled {
    background: #c8cdd4;
    color: #f0f0f0;
    cursor: not-allowed;
    transform: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.cr-book-submit-btn:disabled:hover {
    background: #c8cdd4;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transform: none;
}

.cr-book-submit-btn:disabled::before {
    display: none;
}

/* =============================================
   RESPONSIVE
   ============================================= */
/* RESPONSIVE - Summary Card Layout v4 */
@media (max-width: 900px) {
    .cr-summary-content {
        flex-direction: column;
        padding: 24px;
    }

    .cr-summary-left {
        flex: 1;
    }

    .cr-summary-right {
        padding-left: 0;
        padding-top: 24px;
    }
}

@media (max-width: 600px) {
    .cr-summary-content {
        padding: 20px 16px;
    }

    .cr-booking-dates-grid {
        grid-template-columns: 1fr;
    }

    .cr-booking-price-corner {
        text-align: center;
    }

    .cr-car-specs-row {
        flex-wrap: wrap;
        gap: 12px;
    }

    .cr-input-row {
        grid-template-columns: 1fr;
    }

    .cr-input-row.triple {
        grid-template-columns: 1fr 1fr;
    }

    .cr-book-form {
        padding: 24px 18px;
    }

    .cr-booking-wrap {
        padding-top: 8px;
    }
}

/* ENDS */

/* Dropdown option */
.select2-results__option {
    position: relative;
    padding-right: 40px !important; /* hely az ikonnak */
}

/* Belső flex csak a text miatt */
.car-option {
    display: block;
}

/* Szöveg */
.car-text {
    display: block;
}

/* Ikon fixen jobbra */
.select2-results__option img {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    height: 18px;
    width: auto;
    filter: blur(0.5px);
    opacity: 0.5
}

.select2-selection__rendered {
    position: relative !important;
    padding-right: 40px !important;
}

.select2-selection__rendered img {
    position: absolute;
    right: 22px;
    top: 50%;
    transform: translateY(-50%);
    height: 18px;
}


.shine-img {
    display: inline-block;
    position: relative;
    overflow: hidden; /* levágja a kilógó fényt */
}

.shine-img img {
    display: block;
}

/* fénycsík */
.shine-img::after {
    content: "";
    position: absolute;
    inset: 0;
    transform: translateX(-150%) skewX(-20deg);

    background: linear-gradient(
            120deg,
            rgba(255, 255, 255, 0) 40%,
            rgba(255, 255, 255, 0.2) 50%,
            rgba(255, 255, 255, 0) 60%
    );

    animation: shine 12s linear infinite;
    pointer-events: none;
}

@keyframes shine {
    0% {
        transform: translateX(-150%) skewX(-20deg);
    }

    16.6% {
        transform: translateX(150%) skewX(-20deg);
    }

    100% {
        transform: translateX(150%) skewX(-20deg);
    }
}

/* ====================================================
   TOOLTIPSTER CUSTOM THEME (NOIR OVERRIDE)
   ==================================================== */


/* ===== MODERN TOOLTIP ===== */

.tooltipster-modern.tooltipster-sidetip .tooltipster-box {
    background: #ffffcc;
    border: 1px solid rgba(0, 0, 0, 0.4);
    border-radius: 6px;
    box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.5);
}

.tooltipster-modern.tooltipster-sidetip .tooltipster-content {
    color: #333333;
    padding: 8px 12px;
    font-size: 16px;
    line-height: 1.4;
}

/* ===== NYÍL – TELJES RESET ===== */

/* kikapcsoljuk a gyári border háromszöget */
.tooltipster-modern .tooltipster-arrow-border {
    display: none !important;
}

/* új, tiszta 1px-es nyíl */
.tooltipster-modern.tooltipster-sidetip.tooltipster-top .tooltipster-arrow-background {
    border-top-color: #ffffcc;
}

.tooltipster-modern.tooltipster-sidetip.tooltipster-bottom .tooltipster-arrow-background {
    border-bottom-color: #ffffcc;
}

.tooltipster-modern.tooltipster-sidetip.tooltipster-left .tooltipster-arrow-background {
    border-left-color: #ffffcc;
}

.tooltipster-modern.tooltipster-sidetip.tooltipster-right .tooltipster-arrow-background {
    border-right-color: #ffffcc;
}

/* nyíl méret */
.tooltipster-modern .tooltipster-arrow-background {
    border-width: 8px;
}

/* A kiválasztott elem szövege */
.select2-selection__rendered {
    /*color: #4A90E2 !important;  !* Például piros *!*/
}

/* Vagy ha specifikusabb akarsz lenni */
.select2-container--default .select2-selection--single .select2-selection__rendered {
    /*color: #4A90E2 !important;*/
}



#cr-start-date {
    color: #4A90E2; /* Például piros */
    height:40.5px
}

#cr-end-date {
    color: #4A90E2; /* Például piros */
}

.select2-container--default .select2-results__option[aria-selected="true"] {
    background: linear-gradient(180deg, #4A90E2, #4B9DF0, #4A90E2) !important;

    /*background-color: #4A90E2;*/

    /*color: white !important;*/
}

.cr-booking-dates-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0; /* gap eltávolítva */
    position: relative;
}

/* Elválasztó vonal a két oszlop között */
.cr-booking-dates-grid::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 5%;  /* fentről 10%-nál kezdődik */
    bottom: 5%; /* lent 10%-nál végződik */
    width: 1px;
    transform: translateX(-50%);
    background-color: #e0e0e0;
    pointer-events: none;
}


/* ====================================================
   COUNTDOWN TIMER (BOOKING PAGE)
   ==================================================== */
.cr-countdown-alert {
    width: 960px;
    max-width: calc(100% - 24px);
    /*margin: 24px auto 24px auto;*/
    margin: 0px auto 0px auto;
    padding: 16px 74px;
    background: linear-gradient(135deg, #fff9e6 0%, #fff3d4 100%);
    border: 1px solid rgba(255, 193, 7, 0.5);
    border-radius: 16px;
    display: flex;
    align-items: center;
    gap: 16px;
    box-shadow: 0 4px 20px rgba(74, 144, 226, .12), 0 2px 8px rgba(0, 0, 0, .08);
    cursor:default;
    transition: all 0.3s ease;
    position: relative;
}

.cr-countdown-icon {
    flex-shrink: 0;
    color: #f57c00;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cr-countdown-icon svg {
    animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
}

.cr-countdown-text {
    flex: 1;
    font-size: 14px;
    color: #6d4c00;
    line-height: 1.5;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 4px;
}

.cr-countdown-text strong {
    font-size: 16px;
    color: #e65100;
    font-weight: 700;
}

/* Warning state (after 5 minutes, before last 5 minutes) */
.cr-countdown-alert.cr-countdown-warning {
    background: linear-gradient(135deg, #fff3e0 0%, #ffe0b2 100%);
    border-color: #ff9800;
}

.cr-countdown-alert.cr-countdown-warning .cr-countdown-icon {
    color: #ef6c00;
}

.cr-countdown-alert.cr-countdown-warning .cr-countdown-text {
    color: #e65100;
}

.cr-countdown-alert.cr-countdown-warning .cr-countdown-text strong {
    color: #d84315;
}

/* Danger state (last 5 minutes) */
.cr-countdown-alert.cr-countdown-danger {
    background: linear-gradient(135deg, #ffebee 0%, #ffcdd2 100%);
    border-color: #f44336;
    border-width: 3px;
    box-shadow: 0 4px 12px rgba(244, 67, 54, 0.25);
    animation: shake 0.5s ease-in-out infinite;
}

@keyframes shake {
    0%, 100% {
        transform: translateX(0);
    }
    25% {
        transform: translateX(-2px);
    }
    75% {
        transform: translateX(2px);
    }
}

.cr-countdown-alert.cr-countdown-danger .cr-countdown-icon {
    color: #d32f2f;
}

.cr-countdown-alert.cr-countdown-danger .cr-countdown-icon svg {
    animation: pulse-fast 1s ease-in-out infinite;
}

@keyframes pulse-fast {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.2);
    }
}

.cr-countdown-alert.cr-countdown-danger .cr-countdown-text {
    color: #c62828;
    font-weight: 600;
}

.cr-countdown-alert.cr-countdown-danger .cr-countdown-text strong {
    color: #b71c1c;
    font-size: 18px;
}

/* Responsive */
@media (max-width: 768px) {
    .cr-countdown-alert {
        width: 100%;
        margin: 16px 0px;
        padding: 12px 6px;
        gap: 12px;
    }

    .cr-countdown-text {
        font-size: 13px;
        justify-content: center;
        text-align: center;
        flex-wrap: wrap;
    }

    .cr-countdown-text strong {
        font-size: 15px;
    }

    .cr-countdown-alert.cr-countdown-danger .cr-countdown-text strong {
        font-size: 16px;
    }
}

.select2-selection--single {
    background-color:#eff0f4 !important;
    font-weight: normal !important;
}

.badnews {
    filter: brightness(0.85) sepia(1) hue-rotate(320deg);


    /*transition: all 0.3s ease;*/
    /*background-color: #FFEAF5;*/
    /*border-color: #ff6060;*/
}

/* ====================================================
   FORM LOADING ANIMATIONS
   ==================================================== */

/* Initial state - form hidden */
.cr-form-loading {
    opacity: 0;
}

/* Fade in animation */
.cr-form-visible {
    animation: fadeIn 0.6s ease-out forwards;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Loading spinner container */
.cr-loading-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
    width: 100%;

}

/* Spinner animation */
.cr-loading-spinner {
    width: 48px;
    height: 48px;
    border: 4px solid #e9e9e9;
    border-top: 4px solid #4A90E2;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.cr-loading-text {
    font-size: 14px;
    color: #6b7a8d;
    font-weight: 500;
    letter-spacing: 0.05em;
}

/* Header animations - slide in from left */
.cr-header-container {
    opacity: 0;
}

.cr-header-visible {
    animation: slideInLeft 0.6s ease-out forwards;
}

@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Stagger animation for header elements */
.cr-header-logo {
    animation-delay: 0s;
}

.cr-header-title {
    animation-delay: 0.1s;
}

.cr-header-tagline {
    animation-delay: 0.2s;
}

/* Digital clock hover effect - green to red */
#digital-clock-wrapper:hover {
    background: #200000 !important;
    border-color: #330000 !important;
}

#digital-clock-wrapper:hover #counterdiv {
    color: #ff0000 !important;
    text-shadow: 0 0 3px #ff0000 !important;
}

#digital-clock-wrapper:hover #ghostdiv {
    color: #ff0000 !important;
}


/*
 * Personal Data Validation CSS
 * Hozzáadandó a car_rental.css fájlhoz
 */

/* Invalid mező stílusok */
.cr-field-invalid {
    border: 1px solid #ff4444 !important;
    box-shadow: 0 0 12px rgba(255, 68, 68, 0.6) !important;
    transition: all 0.3s ease;
}

/* Valid mező stílusok (opcionális, ha zöld keretet szeretnél) */
.cr-field-valid {
    border: 1px solid #4CAF50 !important;
    box-shadow: 0 0 8px rgba(76, 175, 80, 0.3) !important;
    transition: all 0.3s ease;
}

/* Random töltő link stílusok (alternatíva az inline CSS helyett) */
#cr-random-filler-link {
    position: fixed;
    bottom: 20px;
    right: 20px;
    padding: 10px 20px;
    background: #4A90E2;
    color: #fff;
    text-decoration: none;
    border-radius: 8px;
    fontSize: 14px;
    font-weight: bold;
    z-index: 10000;
    box-shadow: 0 4px 12px rgba(74, 144, 226, 0.4);
    transition: all 0.3s ease;
    cursor: pointer;
}

#cr-random-filler-link:hover {
    background: #357ABD;
    box-shadow: 0 6px 16px rgba(74, 144, 226, 0.6);
    transform: translateY(-2px);
}

#cr-random-filler-link:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(74, 144, 226, 0.4);
}

/* Animáció invalid mezőkhöz */
@keyframes shake-field {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-3px); }
    20%, 40%, 60%, 80% { transform: translateX(3px); }
}

.cr-field-invalid.cr-shake {
    animation: shake-field 0.5s ease-in-out;
}

/* Validáció ikon (opcionális) */
.cr-field-wrapper {
    position: relative;
}

.cr-field-icon {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 18px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.cr-field-wrapper .cr-field-invalid ~ .cr-field-icon.cr-invalid {
    opacity: 1;
    color: #ff4444;
}

.cr-field-wrapper .cr-field-valid ~ .cr-field-icon.cr-valid {
    opacity: 1;
    color: #4CAF50;
}

/* Tooltip invalid mezőkhöz */
.cr-field-error-tooltip {
    position: absolute;
    background: #ff4444;
    color: white;
    padding: 6px 12px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 1000;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    bottom: 100%;
    left: 0;
    margin-bottom: 8px;
}

.cr-field-error-tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 20px;
    border: 6px solid transparent;
    border-top-color: #ff4444;
}

.cr-field-invalid:focus ~ .cr-field-error-tooltip {
    opacity: 1;
}

/* Form csoport stílusok validációval */
.cr-form-group {
    margin-bottom: 20px;
    position: relative;
}

.cr-form-group.has-error .cr-label {
    color: #ff4444;
}

.cr-form-group.has-success .cr-label {
    color: #4CAF50;
}

/* Responsive */
@media (max-width: 768px) {
    #cr-random-filler-link {
        bottom: 10px;
        right: 10px;
        padding: 8px 16px;
        font-size: 12px;
    }

    .cr-field-error-tooltip {
        font-size: 11px;
        padding: 4px 8px;
    }
}

/* Loading state a formhoz */
.cr-form-loading {
    opacity: 0.6;
}

.cr-form-loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 40px;
    height: 40px;
    margin: -20px 0 0 -20px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid #4A90E2;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.input-wrapper {
    position: relative;
}


/*.input-wrapper input {*/
/*    width: 100%;*/
/*    padding-right: 30px;*/
/*    box-sizing: border-box;*/
/*}*/
/*.input-wrapper::after {*/
/*    content: "qqqq\f00c"; !* Font Awesome unicode (check) *!*/
/*    font-family: "Font Awesome 5 Free";*/
/*    font-weight: 900;*/
/*    position: absolute;*/
/*    right: 10px;*/
/*    top: 50%;*/
/*    transform: translateY(-50%);*/
/*    color: #4CAF50;*/
/*    pointer-events: none;*/
/*    display: none;*/
/*}*/
/*.input-wrapper.valid::after {*/
/*    display: inline-block;*/
/*}*/



.input-wrapper-valid::after {
    content:"\f058";
    font-family: FontAwesome;
    position:absolute;
    right:10px;
    top:6px;
    color:#4CAF50;
    font-size:20px;
    opacity:0.8
}



/*.input-wrapper input {*/
/*    padding-right:30px;*/
/*}*/

.cr-book-form input[type="text"],
.cr-book-form input[type="email"],
.cr-book-form input[type="number"],
.cr-book-form input[type="tel"] ,
.cr-book-form input[type="password"] {
    height: 42px;
    padding-right:35px;
    background-color:rgb(239, 240, 245);
    transition: background-color 0.5s;
}

.cr-book-form input[type="text"]:focus,
.cr-book-form input[type="email"]:focus,
.cr-book-form input[type="number"]:focus,
.cr-book-form input[type="tel"]:focus,
.cr-book-form input[type="password"]:focus {
    height: 42px;
    padding-right:35px;
    /*background-color:#ebf0f8;*/
    background-color:#ffffee;
    transition: background-color 0.5s;
}

#cr-agree-terms {
    display:none !importaNT;
}

/* INVALID állapot - nincs checked (PIROS) */
.cr-check-box.cr-check-box-invalid {
    border-color: #e74c3c !important;
    background: #ffe8e8 !important;
}

/* VALID állapot - nincs checked (ZÖLD) */
.cr-check-box.cr-check-box-valid {
    border-color: #27ae60 !important;
}

/* CHECKED állapot - MINDIG KÉK (felülírja az invalid/valid-et) */
.cr-check-row input[type="checkbox"]:checked + .cr-check-box {
    background: #4a90e2 !important;
    border-color: #4a90e2 !important;
}

/*#region billing autocomplete */


/* =============================================
   BILLING AUTOCOMPLETE DROPDOWN
   ============================================= */

.billing-autocomplete-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #fff;
    border: 1px solid #ddd;
    border-top: none;
    border-radius: 0 0 8px 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    max-height: 300px;
    overflow-y: auto;
    z-index: 1000;
    margin-top: -1px;
}

.billing-autocomplete-item {
    padding: 10px 14px;
    cursor: pointer;
    transition: background-color 0.15s;
    font-size: 14px;
    color: #333;
    border-bottom: 1px solid #f0f0f0;
}

.billing-autocomplete-item:last-child {
    border-bottom: none;
}

.billing-autocomplete-item:hover,
.billing-autocomplete-item-active {
    background-color: #f5f8fa;
}

.billing-autocomplete-highlight {
    background-color: #fff3cd;
    font-weight: 600;
    padding: 0 2px;
    border-radius: 2px;
}

/*#endregion*/

.scroll-nav {
    position: fixed;
    right: 30px;
    bottom: 30px;
    display: none; /* Kezdetben rejtve */
    z-index: 9999;
}

.scroll-btn {
    width: 50px;
    height: 50px;
    background-color: #4a5568;
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    margin-bottom: 10px;
}

.scroll-btn:hover:not(.inactive) {
    background-color: #2d3748;
    transform: scale(1.1);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.scroll-btn svg {
    width: 24px;
    height: 24px;
}

.scroll-btn.inactive {
    background-color: #cbd5e0;
    color: #a0aec0;
    cursor: default;
    opacity: 0.6;
    pointer-events: none; /* Kattintás tiltása */
}

/* Reszponzív */
@media (max-width: 768px) {
    .scroll-nav {
        right: 20px;
        bottom: 20px;
    }

    .scroll-btn {
        width: 40px;
        height: 40px;
    }

    .scroll-btn svg {
        width: 20px;
        height: 20px;
    }
}

.cr-car-year {
    text-transform: uppercase;
    color:#303030 !important
}

.cr-car-year-title {
    text-transform: uppercase;
    color:#4A90E2 ;
    letter-spacing:1px;
    font-size:12px;
    /*font-weight:normal;*/
}


/* =========================================================
   MAGYAR RENDSZÁMTÁBLA STYLING
   ========================================================= */

/* Web fontok betöltése a rendszámokhoz */
@font-face {
    font-family: FEFont;
    src: url('../webfonts/fe.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: DIN1451StdEngschrift;
    src: url('../webfonts/DIN 1451 Std Engschrift.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

.eu-stars {
    /* Csillagok wrapper */
}

.lp-number {
    /* Rendszám szöveg stílusok */
}

/* Responsive méretezés */
@media (max-width: 768px) {
    .license-plate-wrapper {
        transform: scale(0.7) !important;
        transform-origin: left center;
    }
}

@media (max-width: 480px) {
    .license-plate-wrapper {
        transform: scale(0.5) !important;
        transform-origin: left center;
    }
}
/* =========================================================
   MAGYAR RENDSZÁMTÁBLA STYLING - CLASS ALAPÚ
   ========================================================= */

/* Web fontok */
@font-face {
    font-family: 'FEFont';
    src: url('../webfonts/fe.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'DIN1451StdEngschrift';
    src: url('../webfonts/DIN 1451 Std Engschrift.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* Wrapper */
.license-plate-wrapper {
    display: inline-block;
    transform-origin: left center;
}

/* Alap rendszám tábla */
.license-plate {
    display: inline-block;
    border-style: solid;
    border-color: rgba(0,0,0,0.7);
    filter: blur(0.25px);
    box-shadow: 3px 4px 4px rgba(0,0,0,0.1), inset 0 2px 4px rgba(255,255,255,0.25);
    position: relative;
    font-weight: normal;
    color: #1a1a1a;
    text-align: center;
    white-space: nowrap;
    overflow: visible;
    user-select: none;
}

/* Háttérszínek */
.lp-bg-normal {
    background: #EBE2E0;
}

.lp-bg-electric {
    background: #c8e6c9;
}

/* Font család */
.lp-font-new {
    font-family: DIN1451StdEngschrift, Arial, sans-serif;
    letter-spacing: 0.01em;
}

.lp-font-old {
    font-family: FEFont, 'Courier New', monospace;
    letter-spacing: 0.05em;
}

/* EU sáv */
.lp-eu-strip {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    background-color: #0097fe;
    background-repeat: no-repeat;
    background-position: 60% 20%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
}

/* H betű */
.lp-h-letter {
    color: white;
    font-weight: normal;
    font-family: Arial, sans-serif;
    line-height: normal;
    margin-bottom: 15%;
    margin-left: 10%;
}

/* Címer (csak új rendszám) */
.lp-cimer {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1;
}

.lp-cimer img {
    width: 100%;
    height: 100%;
    display: block;
}

/* Rendszám szöveg */
.lp-number {
    font-weight: normal;
    color: #303030;
    filter: blur(0.5px);
}

/* Hover effect */
.license-plate:hover {
    box-shadow: 3px 4px 6px rgba(0,0,0,0.35), inset 0 2px 4px rgba(255,255,255,0.5);
    transform: translateY(-1px);
    transition: all 0.2s ease;
}

/* Responsive */
@media (max-width: 768px) {
    .license-plate-wrapper {
        transform: scale(0.7) !important;
    }
}

@media (max-width: 480px) {
    .license-plate-wrapper {
        transform: scale(0.5) !important;
    }
}

@media (min-width: 900px) {
    .cr-summary-bar {
        min-width: 960px;
    }
}

.superHD {
    display:none;
    visibility: hidden;
    opacity:0;
    position:absolute;
    left:-5000px;
    top:-5000px;
}

#carrentalform-discount_code {
    height:40.5px;
}

#cr-category-select {

    height:40.5px;
}

#car-rental-form {
    opacity:0
}

@media (max-width: 768px) {
    .cr-car-number {
        font-size: 36px;
        top: 14px;
        right: 15px;
    }
}

/*#region openinghours*/

/* Nyitvatartási ikon a telephelyek listájában */
.cr-hours-icon {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    margin-left: auto;
    margin-right: 8px;
    opacity: 0.5;
    transition: opacity 0.2s;
    cursor: help;
    color: #4A90E2;
}

.cr-location-item:hover .cr-hours-icon,
.cr-location-item.active .cr-hours-icon {
    opacity: 0.8;
}

/* Tooltipster tartalom stílus */
.opening-hours-tooltip {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    font-size: 13px;
    line-height: 1.6;
}

.opening-hours-tooltip .hours-title {
    font-weight: 600;
    font-size: 14px;
    margin-bottom: 10px;
    color: #333;
    border-bottom: 1px solid rgba(0,0,0,0.1);
    padding-bottom: 6px;
}

.opening-hours-tooltip .hours-row {
    display: flex;
    justify-content: space-between;
    padding: 4px 0;
    gap: 20px;
}

.opening-hours-tooltip .hours-day {
    color: #666;
    min-width: 80px;
}

.opening-hours-tooltip .hours-time {
    font-weight: 500;
    color: #4A90E2;
    white-space: nowrap;
}

.opening-hours-tooltip .hours-closed {
    color: #999;
    font-style: italic;
}

/*#endregion openinghours*/

/* ====================================================
   CONTACT INFO SECTION
   ==================================================== */
.cr-contact-info {
    margin-top: 40px;
    width: 100%;
    display: flex;
    justify-content: center;
}

.cr-contact-box {
    background: #ffffff;
    border-radius: 14px;
    padding: 25px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05), 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    width: 100%;
    max-width: 960px;

}

/* Az index oldalon ne legyen dupla árnyék/box, ha már eleve fehér kártyában van */
.car-rental-wrapper .cr-contact-info {
    margin-top: 30px;
}

.car-rental-wrapper .cr-contact-box {
    background: transparent;
    box-shadow: none;
    border-top: 1px solid #e2e8f0;
    border-radius: 0;
    padding: 25px 0 0 0;
    max-width: none;
}

.cr-contact-box p {
    color: #4a5568;
    font-weight: 500;
    margin-bottom: 20px !important;
    font-size: 14px;
    text-align: center;
}

.cr-contact-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 15px;
}

.cr-contact-item {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px 16px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 50px;
    color: #4a90e2;
    text-decoration: none !important;
    transition: all 0.3s ease;
    font-size: 13px;
    white-space: nowrap;
    letter-spacing:-0.95px;
}

.cr-contact-item i {
    margin-right: 8px;
    font-size: 14px;
}

.cr-contact-item:hover {
    background: #4a90e2;
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(74, 144, 226, 0.25);
    border-color: #4a90e2;
}

@media (max-width: 991px) {
    .cr-include-item {
        font-size: 13px;
        margin-bottom: 6px;
    }
}

@media (max-width: 600px) {
    .cr-contact-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }
    .cr-contact-item {
        padding: 8px 10px;
        font-size: 12px;
    }
}

@media (max-width: 400px) {
    .cr-contact-grid {
        grid-template-columns: 1fr;
    }
}

.top-right-logo:nth-child(2) {
    display: none !important;
    position:absolute !important;
    top:-1000px !important;

}

h1 {
    color:#4a90e2;
    font-size:18px !important;
}

/* ====================================================
   LANGUAGE SELECTOR
   ==================================================== */
.ls {
    display: inline-flex;
    gap: 2px;
    padding: 4px;
    background: #ffffff;
    border-radius: 16px;
    box-shadow:
        0 1px 3px rgba(0,0,0,0.06),
        0 6px 24px rgba(0,0,0,0.08),
        inset 0 0 0 0.5px rgba(0,0,0,0.06);
    margin-top: 15px;
}

.ls-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 9px 14px 10px;
    background: transparent;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    transition:
        background 0.16s ease,
        transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
    outline: none;
    position: relative;
    text-decoration: none;
    width:72px;
}

.ls-btn::after {
    content: '';
    position: absolute;
    bottom: 15px;
    left: 50%;
    transform: translateX(-50%) scaleX(0);
    width: 65px;
    height: 2px;
    border-radius: 2px;
    background: #007AFF;
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.ls-btn.active::after {
    transform: translateX(-50%) scaleX(1);
}

.ls-btn:hover {
    background: #f4f4f8;
    transform: translateY(-2px);
}

.ls-btn:focus-visible {
    box-shadow: 0 0 0 3px rgba(0,122,255,0.35);
}

.ls-btn.active {
    background: #f0f0f8;
}

/* === FLAG BASE === */
.flag {
    width: 32px;
    height: 20px;
    border-radius: 3px;
    overflow: hidden;
    flex-shrink: 0;
    position: relative;
    box-shadow:
        0 1px 2px rgba(0,0,0,0.22),
        inset 0 0 0 0.5px rgba(0,0,0,0.14);
    transition:
        transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1),
        box-shadow 0.2s ease;
}

.ls-btn:hover .flag {
    transform: scale(1.14) translateY(-1px);
    box-shadow:
        0 4px 10px rgba(0,0,0,0.2),
        inset 0 0 0 0.5px rgba(0,0,0,0.14);
}

.ls-btn.active .flag {
    transform: scale(1.06);
}

/* === LABEL === */
.ls-name {
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #aaa;
    transition: color 0.16s;
    white-space: nowrap;
    padding-bottom: 8px;
}

.ls-btn:hover .ls-name { color: #444; }
.ls-btn.active .ls-name { color: #007AFF; font-weight: 600; }

.uk-inner {
    position: absolute; top: 0; left: 0;
    width: 200px; height: 125px;
    background: #012169;
    transform: scale(0.16);
    transform-origin: top left;
}
.uk-el { position: absolute; }

.uk-wd1 { width: 260px; height: 22px; background: #fff;    top:50%; left:50%; transform:translate(-50%,-50%) rotate( 32deg); z-index:1; }
.uk-wd2 { width: 260px; height: 22px; background: #fff;    top:50%; left:50%; transform:translate(-50%,-50%) rotate(-32deg); z-index:1; }

.uk-rd1 { width: 260px; height: 11px; background: #C8102E; top:50%; left:50%; transform:translate(-50%,-50%) rotate( 32deg); z-index:3; }
.uk-rd2 { width: 260px; height: 11px; background: #C8102E; top:50%; left:50%; transform:translate(-50%,-50%) rotate(-32deg); z-index:3; }

.uk-wh  { width:200px; height:42px; background:#fff;    top:50%; left:0;   transform:translateY(-50%); z-index:2; }
.uk-wv  { width:42px;  height:125px; background:#fff;   top:0;   left:50%; transform:translateX(-50%); z-index:2; }

.uk-rh  { width:200px; height:25px; background:#C8102E; top:50%; left:0;   transform:translateY(-50%); z-index:5; }
.uk-rv  { width:25px;  height:125px; background:#C8102E;top:0;   left:50%; transform:translateX(-50%); z-index:5; }

.flag-de {
    background: linear-gradient(
        to bottom,
        #000000 0%   33.34%,
        #DD0000 33.34% 66.67%,
        #FFCE00 66.67% 100%
    );
}

.flag-hu {
    background: linear-gradient(
        to bottom,
        #CE2939 0%   33.34%,
        #ffffff 33.34% 66.67%,
        #477050 66.67% 100%
    );
}

.flag-pl {
    background: linear-gradient(
        to bottom,
        #ffffff 0%   50%,
        #dc143c 50% 100%
    );
}

.huf {

    position:relative;


}