/* ========= THEME VARIABLES ========= */
.callback-modal {
    /* default (neutral light) */
    --c-bg: #f7f7f8;
    --c-surface: #ffffff;
    --c-surface-2: #fbfbfc;
    --c-border: #e6e7ea;
    --c-text: #1e293b;
    --c-muted: #6b7280;
    --c-primary: #6b7280; /* neutral */
    --c-primary-600: #565d67;
    --c-primary-700: #434a55;
    --c-primary-ctr: #ffffff;
    --c-shadow: rgba(15, 23, 42, .15);
    --c-ring: 40, 50, 60; /* rgb for focus ring */
    --c-success-bg: #eef7ee;
    --c-success-tx: #1f7a1f;
    --c-success-br: #d6edd6;
    --c-danger-bg: #fff1f0;
    --c-danger-tx: #b02a1e;
    --c-danger-br: #ffd6d2;
}

    /* ========= LAYOUT & MOTION ========= */
    .callback-modal .modal-dialog {
        max-width: 560px;
    }

    .callback-modal .modal-content {
        border: 1px solid var(--c-border);
        border-radius: 16px;
        background: linear-gradient(180deg, var(--c-surface-2), var(--c-surface));
        box-shadow: 0 10px 30px var(--c-shadow), 0 2px 8px rgba(0,0,0,.06);
        overflow: hidden;
    }

    /* Entrance animation */
    .callback-modal.modal.fade .modal-dialog {
        transform: translateY(18px) scale(.985);
        opacity: .98;
        transition: transform .34s cubic-bezier(.2,.8,.2,1), opacity .34s ease;
    }

    .callback-modal.modal.fade.show .modal-dialog {
        transform: translateY(0) scale(1);
        opacity: 1;
    }

    /* Header */
    .callback-modal .modal-header {
        position: relative;
        background: linear-gradient(180deg, color-mix(in srgb, var(--c-primary) 6%, transparent), transparent);
        color: var(--c-text);
        align-items: center;
        padding: 16px 18px 12px;
        border-bottom: 1px solid var(--c-border);
    }

        .callback-modal .modal-header::after {
            content: "";
            position: absolute;
            left: 0;
            right: 0;
            bottom: -1px;
            height: 2px;
            background: linear-gradient(90deg, color-mix(in srgb, var(--c-primary) 35%, transparent), color-mix(in srgb, var(--c-primary) 0%, transparent), color-mix(in srgb, var(--c-primary) 35%, transparent));
            background-size: 200% 100%;
            animation: cb-shimmer 5s linear infinite;
            opacity: .9;
        }

@keyframes cb-shimmer {
    0% {
        background-position: 0 0
    }

    100% {
        background-position: 200% 0
    }
}

.callback-modal .modal-title {
    display: flex;
    align-items: center;
    gap: .6rem;
    font-weight: 800;
    letter-spacing: .2px;
    color: var(--c-text);
}

    .callback-modal .modal-title i {
        font-size: 1.2rem;
        color: color-mix(in srgb, var(--c-primary) 65%, var(--c-text));
        transition: transform .22s ease, color .22s ease;
    }

    .callback-modal .modal-title:hover i {
        transform: translateY(-1px);
    }

/* Body */
.callback-modal .modal-body {
    background: var(--c-surface);
    padding: 18px 18px 16px;
}

@media (min-width:576px) {
    .callback-modal .modal-body {
        padding: 22px 22px 18px;
    }
}

/* Forms */
.callback-modal .form-label {
    font-weight: 600;
    color: var(--c-text);
}

.callback-modal .input-group-text {
    background: var(--c-bg);
    border-color: var(--c-border);
    color: var(--c-muted);
}

.callback-modal .form-control {
    border-color: var(--c-border);
    background: #fff;
    color: var(--c-text);
    transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}

    .callback-modal .form-control::placeholder {
        color: var(--c-muted);
        opacity: .7;
    }

    .callback-modal .form-control:focus {
        border-color: var(--c-primary-600);
        box-shadow: 0 0 0 .2rem rgba(var(--c-ring), .18);
        background: #fff;
    }

.callback-modal .form-check-input {
    border-color: var(--c-border);
}

    .callback-modal .form-check-input:checked {
        background-color: var(--c-primary-700);
        border-color: var(--c-primary-700);
        box-shadow: 0 0 0 .2rem rgba(var(--c-ring), .14);
    }

/* Validation */
.callback-modal .is-invalid,
.callback-modal .was-validated .form-control:invalid {
    border-color: #dc3545;
}

.callback-modal .invalid-feedback {
    color: #c03221;
}

@keyframes cb-shake {
    0%,100% {
        transform: translateX(0)
    }

    20% {
        transform: translateX(-2px)
    }

    40% {
        transform: translateX(2px)
    }

    60% {
        transform: translateX(-1px)
    }

    80% {
        transform: translateX(1px)
    }
}

.callback-modal .ps-shake {
    animation: cb-shake .28s ease;
}

/* Button */
.callback-modal .btn-primary {
    background: var(--c-primary);
    border-color: var(--c-primary);
    color: var(--c-primary-ctr);
    font-weight: 800;
    letter-spacing: .2px;
    transition: transform .08s ease, box-shadow .2s ease, background .18s ease, border-color .18s ease;
    box-shadow: 0 10px 24px color-mix(in srgb, var(--c-primary) 20%, transparent);
}

    .callback-modal .btn-primary:hover {
        background: var(--c-primary-600);
        border-color: var(--c-primary-600);
        transform: translateY(-1px);
    }

    .callback-modal .btn-primary:active {
        background: var(--c-primary-700);
        border-color: var(--c-primary-700);
        transform: translateY(0);
    }

    .callback-modal .btn-primary:disabled,
    .callback-modal .btn-primary.disabled {
        background: color-mix(in srgb, var(--c-primary) 45%, #9ca3af);
        border-color: color-mix(in srgb, var(--c-primary) 45%, #9ca3af);
        opacity: .85;
        box-shadow: none;
    }

/* Alerts */
.callback-modal .alert-success {
    background: var(--c-success-bg);
    color: var(--c-success-tx);
    border-color: var(--c-success-br);
}

.callback-modal .alert-danger {
    background: var(--c-danger-bg);
    color: var(--c-danger-tx);
    border-color: var(--c-danger-br);
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
    .callback-modal .modal-dialog, .callback-modal .modal-header::after, .callback-modal .btn-primary {
        transition: none !important;
        animation: none !important;
    }
}