/**
 * File: /shared/css/modal.css
 * Purpose: Shared modal structure, controls, validation states, and presentation.
 *
 * Defines modal behavior and reusable customization-modal styling
 * across the Signs Platform.
 *
 * Brand-specific visual values are supplied through CSS custom properties.
 *
 * Dependencies:
 * - /shared/css/tokens.css
 * - /brand/{brand}/css/tokens.css
 *
 * This file must not contain:
 * - Hard-coded brand-specific colors
 * - Brand-specific imagery
 * - Business logic
 * - Page-specific modal behavior
 */


/* ==========================================
   MODAL PAGE STATE
   ========================================== */

/*
 * Prevent background scrolling while a modal is open.
 *
 * padding-right is explicitly reset because some modal
 * frameworks add scrollbar compensation to the body.
 */
 body.modal-open {
    overflow: hidden !important;
    padding-right: 0 !important;
}


/* ==========================================
   MODAL CLOSE BUTTON
   ========================================== */

.close-modal {
    position: absolute;
    top: 27px;
    right: 27px;

    width: 35px;
    height: 35px;

    background-color: var(--color-overlay-dark);
    color: var(--color-surface);

    border: none;
    border-radius: 50%;

    font-size: 1.8rem;

    cursor: pointer;
    z-index: 1050;
}


/* ==========================================
   CUSTOMIZATION MODAL HEADER
   ========================================== */

#customizationModal .modal-header {
    background-color: var(
        --brand-primary,
        var(--color-surface)
    );

    color: var(
        --brand-text-on-primary,
        var(--color-surface)
    );
}


/* ==========================================
   CUSTOMIZATION MODAL VALIDATION
   ========================================== */

/*
 * Validation states are semantic platform states rather
 * than brand-specific states.
 */
#customizationModal .error-message,
#customizationModal .error-icon {
    color: var(--color-error);
}

#customizationModal .char-counter {
    color: var(--color-text-subtle);
}


/* ==========================================
   CUSTOMIZATION MODAL RESET CONTROL
   ========================================== */

#customizationModal .reset-icon {
    color: var(
        --brand-primary,
        var(--color-text)
    );
}


/* ==========================================
   CUSTOMIZATION MODAL FORM CONTROLS
   ========================================== */

#customizationModal .form-control {
    border-color: var(
        --brand-primary,
        var(--color-border)
    );
}

#customizationModal input:focus {
    outline: 2px solid var(
        --brand-primary,
        var(--color-border-hover)
    );
}


/* ==========================================
   CUSTOMIZATION PREVIEW
   ========================================== */

.preview-image {
    border: 1px solid var(--color-border-dark);
}


/*
 * The SVG preview uses the brand's secondary color as its
 * default background.
 *
 * Individual product/customization colors may still override
 * this dynamically where required by application behavior.
 */
#customizationModal .modal-body svg {
    background-color: var(
        --brand-secondary,
        var(--color-text)
    );
}

#customizationModal .modal-body svg text {
    fill: var(
        --brand-text-on-primary,
        var(--color-surface)
    );
}


/* ==========================================
   CUSTOMIZATION CONTAINER
   ========================================== */

#container-customization {
    color: var(--color-text-muted);
    background-color: var(--color-overlay-light);
    box-shadow: var(--shadow-md);
}