/* =====================================================
           TOPBOOKIE MODERN MODAL SYSTEM
           Keeps Bootstrap 4 behavior, modernizes only visuals.
           ===================================================== */

        .modal-backdrop {
            z-index: 2200 !important;
            background-color: #151922 !important;
        }

        .modal-backdrop.show {
            opacity: .58 !important;
        }

        .tb-modern-modal {
            z-index: 2300 !important;
        }

        .tb-modern-modal .modal-dialog {
            max-width: 610px;
            margin-top: 88px;
        }

        .tb-modern-modal .modal-content {
            overflow: hidden;
            border: 0;
            border-radius: 18px;
            background: #ffffff;
            box-shadow: 0 28px 70px rgba(20, 26, 38, .25);
        }

        .tb-modern-modal .tb-modal-header {
            display: flex;
            align-items: flex-start;
            padding: 22px 24px 18px;
            border-bottom: 1px solid #edf0f3;
            background: #ffffff;
        }

        .tb-modern-modal .tb-modal-heading {
            display: flex;
            align-items: center;
            gap: 12px;
            padding-right: 18px;
        }

        .tb-modern-modal .tb-modal-icon {
            width: 44px;
            height: 44px;
            flex: 0 0 44px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-radius: 12px;
            background: #fff0f3;
            color: #d7192d;
            font-size: 18px;
        }

        .tb-modern-modal .tb-modal-title {
            margin: 0;
            color: #1e232a;
        }

        .tb-modern-modal .tb-modal-subtitle {
            margin: 4px 0 0;
            color: #777e87;
        }

        .tb-modern-modal .tb-modal-close {
            width: 38px;
            height: 38px;
            flex: 0 0 38px;
            margin: 0 0 0 auto !important;
            padding: 0 !important;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-radius: 10px;
            background: #f5f6f8;
            color: #4b5159;
            opacity: 1;
            font-size: 22px;
            font-weight: 400;
            text-shadow: none;
        }

        .tb-modern-modal .tb-modal-close:hover {
            background: #fff0f3;
            color: #d7192d;
        }

        .tb-modern-modal .modal-body {
            padding: 22px 24px 24px;
        }

        .tb-modern-modal .tb-field {
            margin-bottom: 14px;
        }

        .tb-modern-modal .tb-field-label {
            display: block;
            margin-bottom: 6px;
            color: #343a42;
        }

        .tb-modern-modal .tb-input-wrap {
            position: relative;
        }

        .tb-modern-modal .tb-input-icon {
            position: absolute;
            z-index: 2;
            top: 50%;
            left: 15px;
            transform: translateY(-50%);
            color: #9aa0a8;
            font-size: 14px;
            pointer-events: none;
        }

        .tb-modern-modal .tb-input,
        .tb-modern-modal .tb-textarea {
            width: 100%;
            border: 1px solid #dfe3e8;
            border-radius: 11px;
            background: #fbfcfd;
            color: #252a32;
            box-shadow: none !important;
            transition: border-color .18s ease,
                        background-color .18s ease,
                        box-shadow .18s ease;
        }

        .tb-modern-modal .tb-input {
            height: 48px;
            padding: 0 14px 0 42px;
        }

        .tb-modern-modal .tb-input.tb-input-no-icon {
            padding-left: 14px;
        }

        .tb-modern-modal .tb-textarea {
            min-height: 125px;
            padding: 13px 14px;
            resize: vertical;
        }

        .tb-modern-modal .tb-input:focus,
        .tb-modern-modal .tb-textarea:focus {
            outline: none;
            border-color: #e9aab4;
            background: #ffffff;
            box-shadow: 0 0 0 3px rgba(215, 25, 45, .06) !important;
        }

        .tb-modern-modal .tb-modal-note {
            display: flex;
            align-items: flex-start;
            gap: 8px;
            margin: 2px 0 0;
            padding: 11px 12px;
            border-radius: 10px;
            background: #f8f9fa;
            color: #6f767f;
        }

        .tb-modern-modal .tb-modal-note i {
            margin-top: 1px;
            color: #d7192d;
        }

        .tb-modern-modal .modal-footer {
            padding: 16px 24px 22px;
            border-top: 1px solid #edf0f3;
            background: #ffffff;
        }

        .tb-modern-modal .tb-btn-secondary,
        .tb-modern-modal .tb-btn-primary {
            min-height: 42px;
            padding: 0 18px;
            border-radius: 10px;
            transition: all .18s ease;
        }

        .tb-modern-modal .tb-btn-secondary {
            border: 1px solid #dfe3e8;
            background: #ffffff;
            color: #555c65;
        }

        .tb-modern-modal .tb-btn-secondary:hover {
            background: #f6f7f9;
            color: #242931;
        }

        .tb-modern-modal .tb-btn-primary {
            border: 1px solid #d7192d;
            background: #d7192d;
            color: #ffffff;
        }

        .tb-modern-modal .tb-btn-primary:hover {
            border-color: #b91425;
            background: #b91425;
            color: #ffffff;
            transform: translateY(-1px);
        }

        .tb-modern-modal .tb-btn-primary i {
            margin-left: 6px;
        }

        .tb-modern-modal.tb-newsletter-modal .modal-dialog {
            max-width: 530px;
        }

        .tb-modern-feedback .modal-dialog {
            max-width: 440px;
            margin-top: 110px;
        }

        .tb-modern-feedback .modal-content {
            overflow: hidden;
            border: 0;
            border-radius: 15px;
            box-shadow: 0 24px 60px rgba(20, 26, 38, .22);
        }

        .tb-modern-feedback .alert {
            margin: 0;
            padding: 18px 20px;
            border: 0;
            border-radius: 0;
        }

        @media (max-width: 767.98px) {
            .tb-modern-modal .modal-dialog {
                margin: 70px 12px 20px;
            }

            .tb-modern-modal .tb-modal-header,
            .tb-modern-modal .modal-body,
            .tb-modern-modal .modal-footer {
                padding-left: 18px;
                padding-right: 18px;
            }
        }