/* v7 unified notifications + cargo hover alignment */

/* Единый визуальный стандарт уведомлений */
.address-required-notification,
.map-distance-warning,
.map-address-limit-warning,
.mobile-distance-error,
.map-distance-error,
.time-update-notification,
.address-limit-notification,
.address-validation-notification,
.address-selection-notification,
.validation-notification,
.mobile-route-notification {
    background: var(--notice-bg) !important;
    border: 1px solid var(--notice-border) !important;
    border-left: 4px solid var(--notice-border-strong) !important;
    border-radius: 14px !important;
    box-shadow: var(--notice-shadow) !important;
    color: var(--notice-text) !important;
}

.address-required-notification .notification-icon,
.map-distance-warning .warning-icon,
.map-address-limit-warning .warning-icon,
.mobile-distance-error .warning-icon,
.map-distance-error-content i,
.time-update-notification__content i,
.address-limit-notification .notification-icon,
.address-validation-notification .validation-header i,
.address-selection-notification .notification-icon,
.mobile-route-notification .notification-content i,
.validation-error-header i,
.validation-error-item i {
    color: var(--notice-icon-color) !important;
}

.address-required-notification .notification-text strong,
.map-address-limit-warning .warning-text strong,
.distance-error-text strong,
.time-update-notification__content span,
.address-limit-notification .notification-title,
.address-validation-notification .validation-title,
.address-selection-notification .notification-title,
.validation-error-header,
.mobile-route-notification span {
    color: var(--notice-title) !important;
}

.address-required-notification .notification-text span,
.map-distance-warning .warning-text span,
.map-address-limit-warning .warning-text span,
.distance-error-text span,
.map-distance-error-text,
.address-limit-notification .notification-message,
.address-validation-notification .validation-message,
.address-selection-notification .notification-address,
.validation-error-item {
    color: var(--notice-text) !important;
}

.address-required-notification .notification-close,
.map-distance-warning .distance-warning-close,
.map-address-limit-warning .limit-warning-close,
.distance-error-close,
.notification-close {
    color: #64748b !important;
}

.address-required-notification .notification-close:hover,
.map-distance-warning .distance-warning-close:hover,
.map-address-limit-warning .limit-warning-close:hover,
.distance-error-close:hover,
.notification-close:hover {
    color: var(--notice-title) !important;
    background: rgba(37, 99, 235, 0.08) !important;
}

.address-selection-notification.loading-type,
.address-selection-notification.unloading-type,
.address-selection-notification.intermediate-type,
.mobile-route-notification.info,
.mobile-route-notification.success,
.mobile-route-notification.error {
    background: var(--notice-bg) !important;
    border: 1px solid var(--notice-border) !important;
    border-left: 4px solid var(--notice-border-strong) !important;
    color: var(--notice-text) !important;
}

.address-selection-notification.loading-type .notification-icon,
.address-selection-notification.unloading-type .notification-icon,
.address-selection-notification.intermediate-type .notification-icon {
    background: var(--notice-icon-bg) !important;
    color: var(--notice-icon-color) !important;
}

.address-selection-notification.loading-type .notification-title,
.address-selection-notification.unloading-type .notification-title,
.address-selection-notification.intermediate-type .notification-title {
    color: var(--notice-title) !important;
}

/* Уведомления валидации */
.validation-error-header {
    background: #eff6ff !important;
    border-left: 4px solid var(--notice-border-strong) !important;
    border-radius: 10px !important;
}

.validation-error-item {
    background: #f8fbff !important;
    border-left: 3px solid var(--notice-border-strong) !important;
    border-radius: 0 8px 8px 0 !important;
}

.validation-error-item:hover {
    background: #eef5ff !important;
}

.address-validation-notification .validation-header {
    border-bottom: 1px solid rgba(37, 99, 235, 0.08) !important;
}

.map-hint-notification .hint-dont-show-btn {
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%) !important;
    color: #fff !important;
    border: none !important;
    box-shadow: 0 10px 18px rgba(37, 99, 235, 0.18) !important;
}

.map-hint-notification .hint-dont-show-btn:hover {
    background: linear-gradient(135deg, #1d4ed8 0%, #1e40af 100%) !important;
    color: #fff !important;
}

/* Map hint и подтверждение: тот же образец, без зеленого/золотого */
.map-hint-notification .hint-container,
.hint-confirmation-notification .hint-container {
    background: var(--notice-bg) !important;
    color: var(--notice-text) !important;
    border: 1px solid var(--notice-border) !important;
    border-left: 4px solid var(--notice-border-strong) !important;
    border-radius: 16px !important;
    box-shadow: var(--notice-shadow) !important;
    backdrop-filter: none !important;
}

.map-hint-notification .hint-icon-wrapper,
.hint-confirmation-notification .hint-icon-wrapper {
    background: var(--notice-icon-bg) !important;
    border: 1px solid rgba(37, 99, 235, 0.14) !important;
    box-shadow: none !important;
}

.map-hint-notification .hint-icon,
.hint-confirmation-notification .hint-icon {
    color: var(--notice-icon-color) !important;
    filter: none !important;
}

.map-hint-notification .hint-title,
.hint-confirmation-notification .hint-title {
    color: var(--notice-title) !important;
    background: none !important;
    -webkit-text-fill-color: initial !important;
    text-shadow: none !important;
}

.map-hint-notification .hint-message,
.hint-confirmation-notification .hint-message {
    color: var(--notice-text) !important;
    opacity: 1 !important;
    text-shadow: none !important;
}

.map-hint-notification .hint-message strong {
    color: var(--notice-title) !important;
    text-shadow: none !important;
}

.map-hint-notification .hint-close-btn,
.hint-confirmation-notification .hint-close-btn {
    background: rgba(37, 99, 235, 0.08) !important;
    border: 1px solid rgba(37, 99, 235, 0.14) !important;
    color: var(--notice-title) !important;
    box-shadow: none !important;
}

.map-hint-notification .hint-close-btn:hover,
.hint-confirmation-notification .hint-close-btn:hover {
    background: rgba(37, 99, 235, 0.12) !important;
    color: var(--notice-title) !important;
    transform: scale(1.06) !important;
}

.map-hint-notification::before {
    background: linear-gradient(90deg, #60a5fa 0%, #2563eb 100%) !important;
}

.hint-confirmation-notification .hint-icon-wrapper::before,
.hint-confirmation-notification .hint-container::after,
.map-hint-notification .hint-dont-show-btn::before {
    display: none !important;
}

/* Мобильные всплывашки: тот же образец */
.mobile-route-notification {
    padding: 0.9rem 1.15rem !important;
}

.mobile-route-notification .notification-content {
    gap: 0.65rem !important;
}

@media (max-width: 768px) {
    .mobile-route-notification,
    .validation-notification,
    .address-validation-notification,
    .address-selection-notification,
    .address-limit-notification,
    .address-required-notification,
    .map-distance-warning,
    .map-address-limit-warning {
        width: calc(100% - 24px) !important;
        max-width: 420px !important;
    }
}


/* УСПЕШНЫЕ УВЕДОМЛЕНИЯ — единый зелёный стиль */
.callback-notification.success,
.notification-success,
.mobile-route-notification.success {
    background: #ffffff !important;
    border: 1px solid rgba(16, 185, 129, 0.18) !important;
    border-left: 4px solid #10b981 !important;
    border-radius: 14px !important;
    box-shadow: 0 18px 45px rgba(15, 23, 42, 0.12) !important;
    color: #111827 !important;
}

.callback-notification.success .callback-notification__message,
.notification-success__message,
.notification-success__content span,
.mobile-route-notification.success span {
    color: #111827 !important;
    font-weight: 500 !important;
}

.callback-notification.success .callback-notification__message i,
.notification-success__content > i,
.notification-success__message i,
.mobile-route-notification.success .notification-content i {
    color: #10b981 !important;
}

.notification-success {
    position: fixed;
    top: 20px;
    right: 20px;
    min-width: 300px;
    max-width: 420px;
    z-index: 10050;
    transform: translateX(420px);
    transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.notification-success.show {
    transform: translateX(0);
}

.notification-success__content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.875rem;
    padding: 1rem 1.25rem;
}

.notification-success__message {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.notification-success__close {
    background: transparent;
    border: none;
    color: #64748b;
    cursor: pointer;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    transition: all 0.25s ease;
}

.notification-success__close:hover {
    background: rgba(16, 185, 129, 0.08);
    color: #0f172a;
}

/* ОШИБКИ — оставляем аккуратный синий служебный стиль */
.callback-notification.error,
.notification-error,
.mobile-route-notification.error {
    background: var(--notice-bg) !important;
    border: 1px solid var(--notice-border) !important;
    border-left: 4px solid var(--notice-border-strong) !important;
    color: var(--notice-text) !important;
}

.callback-notification.error .callback-notification__message,
.notification-error__content span,
.mobile-route-notification.error span {
    color: var(--notice-text) !important;
}

.callback-notification.error .callback-notification__message i,
.notification-error__content > i,
.mobile-route-notification.error .notification-content i {
    color: var(--notice-icon-color) !important;
}

.notification-error {
    position: fixed;
    top: 20px;
    right: 20px;
    min-width: 300px;
    max-width: 420px;
    z-index: 10050;
    transform: translateX(420px);
    transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.notification-error.show {
    transform: translateX(0);
}

.notification-error__content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.875rem;
    padding: 1rem 1.25rem;
}

.notification-error__message {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.notification-error__close {
    background: transparent;
    border: none;
    color: #64748b;
    cursor: pointer;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    transition: all 0.25s ease;
}

.notification-error__close:hover {
    background: rgba(37, 99, 235, 0.08);
    color: #0f172a;
}


.address-validation-content--compact {
    padding: 12px 14px !important;
}

.address-validation-content--compact .validation-header {
    margin-bottom: 6px !important;
    padding-bottom: 0 !important;
    border-bottom: none !important;
}

.address-validation-content--compact .validation-message {
    margin-bottom: 0 !important;
    font-size: 13px !important;
    line-height: 1.45 !important;
}

.address-validation-content--compact .validation-title {
    font-size: 14px !important;
}


/* Финальное единое позиционирование уведомлений: одна точка справа сверху */
.callback-notification,
.notification-success,
.notification-error,
.order-error-notification,
.address-required-notification,
.map-address-limit-warning,
.time-update-notification,
.address-limit-notification,
.address-validation-notification,
.address-selection-notification,
.validation-notification,
.mobile-route-notification {
    position: fixed !important;
    top: 20px !important;
    right: 20px !important;
    left: auto !important;
    bottom: auto !important;
    width: min(420px, calc(100vw - 24px)) !important;
    max-width: min(420px, calc(100vw - 24px)) !important;
    transform: translateX(24px) !important;
    transform-origin: top right !important;
}

.callback-notification.show,
.notification-success.show,
.notification-error.show,
.order-error-notification.show,
.address-required-notification.show,
.map-address-limit-warning.show,
.time-update-notification.show,
.address-limit-notification.show,
.address-validation-notification.show,
.address-selection-notification.show,
.validation-notification.show,
.mobile-route-notification.show {
    transform: translateX(0) !important;
}

.mobile-distance-error,
.map-distance-error,
.time-update-notification,
.validation-notification,
.click-mode-hint,
.map-distance-warning {
    margin: 0 !important;
}

.click-mode-hint,
.map-distance-warning,
.mobile-distance-error,
.map-distance-error {
    left: 50% !important;
    right: auto !important;
    top: 20px !important;
    width: min(420px, calc(100vw - 24px)) !important;
    max-width: min(420px, calc(100vw - 24px)) !important;
    transform: translateX(-50%) translateY(-18px) !important;
    transform-origin: top center !important;
}

.click-mode-hint.show,
.map-distance-warning.show,
.mobile-distance-error.show,
.map-distance-error.show {
    transform: translateX(-50%) translateY(0) !important;
}

.click-mode-hint .hint-content {
    align-items: center !important;
    text-align: center !important;
}

@media (max-width: 768px) {
    .callback-notification,
    .notification-success,
    .notification-error,
    .order-error-notification,
    .address-required-notification,
    .map-address-limit-warning,
    .time-update-notification,
    .address-limit-notification,
    .address-validation-notification,
    .address-selection-notification,
    .validation-notification,
    .mobile-route-notification {
        top: 12px !important;
        right: 12px !important;
        width: calc(100vw - 24px) !important;
        max-width: calc(100vw - 24px) !important;
    }
}


@media (max-width: 768px) {
    .click-mode-hint,
    .map-distance-warning,
    .mobile-distance-error,
    .map-distance-error {
        top: 12px !important;
        left: 50% !important;
        right: auto !important;
        width: calc(100vw - 24px) !important;
        max-width: calc(100vw - 24px) !important;
    }
}


.click-mode-hint {
    width: auto !important;
    min-width: 260px !important;
    max-width: min(320px, calc(100vw - 24px)) !important;
}

.click-mode-hint .hint-content {
    gap: 6px !important;
    font-size: 13px !important;
}

.click-mode-hint .hint-content i {
    font-size: 16px !important;
}

.click-mode-hint .hint-content small {
    font-size: 11px !important;
    opacity: 0.9 !important;
}

/* === FINAL_LOADERS_FIELDS_AND_BUTTON_LAYOUT_FIX === */
/*
   Исправление режима грузчиков:
   1) Дата и телефон стоят горизонтально рядом и занимают всю ширину калькулятора.
   2) Поля не обрезаются.
   3) Количество грузчиков и время аренды остаются видимыми.
   4) Кнопка "Отправить заказ" находится под текстом соглашения и не обрезается.
*/

/* В режиме грузчиков блок "Дополнительные услуги" не нужен, поэтому скрываем только его колонку */
.calculator-body.calculator-mode-loaders .calculator-row.services-and-order-row {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    overflow: visible !important;
}

.calculator-body.calculator-mode-loaders .calculator-col.services-col {
    display: none !important;
}

/* Дата и телефон — горизонтально в две равные широкие колонки */
.calculator-body.calculator-mode-loaders .calculator-col.order-col {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(220px, 1fr)) !important;
    align-items: stretch !important;
    gap: .85rem !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: visible !important;
}

.calculator-body.calculator-mode-loaders .date-selection-box,
.calculator-body.calculator-mode-loaders .phone-input-box {
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 65px !important;
    box-sizing: border-box !important;
    overflow: visible !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    animation: none !important;
}

.calculator-body.calculator-mode-loaders .date-selection-box:hover,
.calculator-body.calculator-mode-loaders .phone-input-box:hover,
.calculator-body.calculator-mode-loaders .phone-input-box.focused {
    transform: none !important;
}

.calculator-body.calculator-mode-loaders .date-box-content,
.calculator-body.calculator-mode-loaders .phone-box-content {
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    gap: .65rem !important;
    overflow: visible !important;
}

.calculator-body.calculator-mode-loaders .date-box-icon,
.calculator-body.calculator-mode-loaders .phone-box-icon,
.calculator-body.calculator-mode-loaders .date-box-arrow {
    flex: 0 0 auto !important;
}

.calculator-body.calculator-mode-loaders .date-box-field,
.calculator-body.calculator-mode-loaders .phone-box-field,
.calculator-body.calculator-mode-loaders .phone-box-field input,
.calculator-body.calculator-mode-loaders .phone-input-box input {
    flex: 1 1 auto !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow: visible !important;
    text-overflow: clip !important;
}

/* Количество грузчиков и время аренды — отдельной строкой, тоже не обрезаются */
.calculator-body.calculator-mode-loaders .loaders-options-container {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 0 1rem !important;
    overflow: visible !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
}

.calculator-body.calculator-mode-loaders .loaders-options-row {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(220px, 1fr)) !important;
    gap: .85rem !important;
    width: 100% !important;
    min-width: 0 !important;
    overflow: visible !important;
}

.calculator-body.calculator-mode-loaders .loaders-count-box,
.calculator-body.calculator-mode-loaders .rental-time-box {
    display: flex !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow: visible !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
}

/* Нижний блок: соглашение сверху, кнопка строго под ним */
.calculator-body.calculator-mode-loaders .total-price-box {
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
    transform: none !important;
}

.calculator-body.calculator-mode-loaders .total-price-box:hover {
    transform: none !important;
}

.calculator-body.calculator-mode-loaders .total-price-bottom {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: .65rem !important;
    width: 100% !important;
    min-width: 0 !important;
    overflow: visible !important;
}

.calculator-body.calculator-mode-loaders .total-price-time {
    display: none !important;
}

.calculator-body.calculator-mode-loaders .privacy-agreement {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}

.calculator-body.calculator-mode-loaders .order-now-btn {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    justify-content: center !important;
    transform: none !important;
}

.calculator-body.calculator-mode-loaders .order-now-btn:hover,
.calculator-body.calculator-mode-loaders .order-now-btn:focus-visible,
.calculator-body.calculator-mode-loaders .order-now-btn:hover i {
    transform: none !important;
}

/* Во время переключения режимов отключаем анимации у проблемных элементов */
.calculator-body.is-mode-switching .calculator-row,
.calculator-body.is-mode-switching .calculator-col,
.calculator-body.is-mode-switching .date-selection-box,
.calculator-body.is-mode-switching .phone-input-box,
.calculator-body.is-mode-switching .loaders-options-container,
.calculator-body.is-mode-switching .loaders-count-box,
.calculator-body.is-mode-switching .rental-time-box,
.calculator-body.is-mode-switching .total-price-box,
.calculator-body.is-mode-switching .total-price-bottom,
.calculator-body.is-mode-switching .privacy-agreement,
.calculator-body.is-mode-switching .order-now-btn {
    animation: none !important;
    transition: none !important;
    transform: none !important;
}

/* На узких экранах переносим в одну колонку, чтобы не резать */
@media (max-width: 720px) {
    .calculator-body.calculator-mode-loaders .calculator-col.order-col,
    .calculator-body.calculator-mode-loaders .loaders-options-row {
        grid-template-columns: 1fr !important;
    }
}
/* === /FINAL_LOADERS_FIELDS_AND_BUTTON_LAYOUT_FIX === */