/* Modal Backdrop */
.modal-backdrop {
    background-color: rgba(12, 17, 21, 0.8);
}

/* Custom Success Modal Styling */
.success-modal .modal-content {
    background: linear-gradient(135deg, var(--tj-bg-2) 0%, var(--tj-bg-3) 100%);
    border: 1px solid var(--tj-border1);
}

.success-modal .modal-header {
    background: linear-gradient(135deg, var(--tj-theme-primary) 0%, var(--tj-theme-h3-primary-1) 100%);
    border-bottom: 1px solid var(--tj-theme-primary-2);
}

.success-modal .success-icon-circle {
    background: rgba(255, 255, 255, 0.15);
    color: var(--tj-white);
    box-shadow: 0 4px 12px rgba(135, 80, 247, 0.3);
}

.success-modal .large-icon {
    color: var(--tj-theme-primary);
    text-shadow: 0 0 20px rgba(135, 80, 247, 0.5);
}

.success-modal .modal-title {
    color: var(--tj-white);
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.success-modal .text-heading {
    color: var(--tj-off-white);
}

.success-modal .text-body {
    color: var(--tj-grey-2);
}

.success-modal .btn-success-custom {
    background: linear-gradient(135deg, var(--tj-theme-primary) 0%, var(--tj-theme-h3-primary-1) 100%);
    border: 1px solid var(--tj-theme-primary-2);
    color: var(--tj-white);
    box-shadow: 0 4px 15px rgba(135, 80, 247, 0.4);
    transition: all 0.3s ease;
}

.success-modal .btn-success-custom:hover {
    background: linear-gradient(135deg, var(--tj-theme-h3-primary-1) 0%, var(--tj-theme-primary) 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(135, 80, 247, 0.6);
}

/* Custom Error Modal Styling */
.error-modal .modal-content {
    background: linear-gradient(135deg, var(--tj-bg-2) 0%, var(--tj-bg-3) 100%);
    border: 1px solid var(--tj-border1);
}

.error-modal .modal-header {
    background: linear-gradient(135deg, var(--tj-heading-secondary) 0%, #c41421 100%);
    border-bottom: 1px solid rgba(234, 24, 38, 0.3);
}

.error-modal .error-icon-circle {
    background: rgba(255, 255, 255, 0.15);
    color: var(--tj-white);
    box-shadow: 0 4px 12px rgba(234, 24, 38, 0.3);
}

.error-modal .large-icon {
    color: var(--tj-heading-secondary);
    text-shadow: 0 0 20px rgba(234, 24, 38, 0.5);
}

.error-modal .modal-title {
    color: var(--tj-white);
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.error-modal .text-heading {
    color: var(--tj-off-white);
}

.error-modal .text-body {
    color: var(--tj-grey-2);
}

.error-modal .alert-custom {
    background: rgba(234, 24, 38, 0.1);
    border: 1px solid rgba(234, 24, 38, 0.3);
    color: var(--tj-heading-secondary);
    backdrop-filter: blur(10px);
}

.error-modal .btn-outline-danger-custom {
    border: 1px solid var(--tj-heading-secondary);
    color: var(--tj-heading-secondary);
    background: transparent;
    transition: all 0.3s ease;
}

.error-modal .btn-outline-danger-custom:hover {
    background: var(--tj-heading-secondary);
    color: var(--tj-white);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(234, 24, 38, 0.4);
}

.error-modal .btn-danger-custom {
    background: linear-gradient(135deg, var(--tj-heading-secondary) 0%, #c41421 100%);
    border: 1px solid var(--tj-heading-secondary);
    color: var(--tj-white);
    box-shadow: 0 4px 15px rgba(234, 24, 38, 0.4);
    transition: all 0.3s ease;
}

.error-modal .btn-danger-custom:hover {
    background: linear-gradient(135deg, #c41421 0%, var(--tj-heading-secondary) 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(234, 24, 38, 0.6);
}

/* Demo page styling */
body {
    background: linear-gradient(135deg, var(--tj-bg) 0%, var(--tj-bg-2) 100%);
    color: var(--tj-body);
    min-height: 100vh;
}

.demo-container {
    background: rgba(20, 12, 28, 0.6);
    border: 1px solid var(--tj-border1);
    backdrop-filter: blur(10px);
}