/**
 * TangoHUB Confirm Modal
 *
 * Reusable BuddyBoss-themed confirmation dialog styles.
 * Paired with assets/js/tgh-confirm.js which auto-injects the modal markup.
 *
 * Dependencies:
 *   - assets/css/tgh-design-tokens.css     (design tokens / BuddyBoss vars)
 *   - assets/css/tgh-button-components.css  (button hierarchy)
 *
 * @package TangoHUB_Event_Manager
 * @since   1.0.5
 * @see     docs/decisions/ADR-008-buddyboss-styling-integration.md
 */

/* ==========================================================================
   Confirm Modal — BuddyBoss Themed
   ========================================================================== */

.tgh-confirm-modal {
    display: none;
    position: fixed;
    z-index: var(--tgh-z-modal, 1000);
    inset: 0;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(2px);
}

.tgh-confirm-modal__content {
    position: relative;
    background: var(--tgh-color-background, #fff);
    width: 90%;
    max-width: 440px;
    padding: var(--tgh-spacing-xl, 32px) var(--tgh-spacing-xxl, 48px) var(--tgh-spacing-xxl, 48px);
    border-radius: var(--bb-block-radius, 10px);
    box-shadow: var(--tgh-shadow-lg, 0 4px 16px rgba(0, 0, 0, 0.12));
    text-align: center;
    animation: tghConfirmSlideDown 200ms ease;
}

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

/* Close button (X) */
.tgh-confirm-modal__close {
    position: absolute;
    right: var(--tgh-spacing-lg, 24px);
    top: var(--tgh-spacing-lg, 24px);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: var(--tgh-color-background-alt, #F8F9FA);
    color: var(--tgh-color-text-light, #4D5C6D);
    cursor: pointer;
    transition: all 150ms ease-in-out;
}

.tgh-confirm-modal__close:hover {
    background: var(--tgh-color-border, #E7E9EC);
    color: var(--tgh-color-text, #122B46);
}

.tgh-confirm-modal__close svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

/* Title */
.tgh-confirm-modal__title {
    margin: 0 0 var(--tgh-spacing-sm, 8px);
    font-size: var(--tgh-font-size-xl, 1.25rem);
    font-weight: var(--tgh-font-weight-semibold, 600);
    color: var(--tgh-color-text, #122B46);
    line-height: 1.4;
}

/* Message */
.tgh-confirm-modal__message {
    margin: 0 0 var(--tgh-spacing-xl, 32px);
    font-size: var(--tgh-font-size-md, 1rem);
    color: var(--tgh-color-text-light, #4D5C6D);
    line-height: 1.5;
}

/* Actions row */
.tgh-confirm-modal__actions {
    display: flex;
    gap: var(--tgh-spacing-md, 16px);
    justify-content: center;
}

.tgh-confirm-modal__actions .tgh-btn {
    min-width: 120px;
    padding: var(--tgh-spacing-sm, 8px) var(--tgh-spacing-lg, 24px);
    font-family: inherit; /* Inherit from BuddyBoss theme — never hardcode (ADR-008) */
}

/* Responsive */
@media (max-width: 480px) {
    .tgh-confirm-modal__content {
        width: 95%;
        padding: var(--tgh-spacing-lg, 24px);
    }

    .tgh-confirm-modal__actions {
        flex-direction: column;
    }

    .tgh-confirm-modal__actions .tgh-btn {
        width: 100%;
    }
}