/* ============================================================================
   MODEL MODAL - ITERATION 4: TECHNICAL SPEC SHEET
   ============================================================================ */

/* Modal Backdrop - Navy Grid */
#model-modal {
    position: fixed;
    inset: 0;
    z-index: 9999; /* Higher than header */
    display: flex;
    align-items: center;
    justify-content: center;
    background: 
        linear-gradient(rgba(15, 30, 46, 0.92), rgba(15, 30, 46, 0.92)),
        repeating-linear-gradient(0deg, 
            transparent, 
            transparent 19px, 
            rgba(212, 165, 116, 0.05) 20px),
        repeating-linear-gradient(90deg,
            transparent,
            transparent 19px,
            rgba(212, 165, 116, 0.05) 20px);
}

#model-modal.hidden {
    display: none;
}

/* Modal Container - Navy Frame */
#modal-container {
    background: linear-gradient(135deg, var(--navy), var(--dark-navy));
    border: 3px solid var(--gold);
    border-radius: var(--radius-xl);
    box-shadow: 0 0 0 4px rgba(212, 165, 116, 0.2),
                0 8px 32px rgba(0, 0, 0, 0.4);
    animation: techSlideIn 0.4s ease;
    position: relative;
}

/* Corner Markers - Gold Accents */
#modal-container::before,
#modal-container::after {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    border: 3px solid var(--bright-gold);
}

#modal-container::before {
    top: -3px;
    left: -3px;
    border-right: none;
    border-bottom: none;
}

#modal-container::after {
    top: -3px;
    right: -3px;
    border-left: none;
    border-bottom: none;
}

@keyframes techSlideIn {
    from {
        opacity: 0;
        transform: scale(0.95);
        filter: blur(2px);
    }
    to {
        opacity: 1;
        transform: scale(1);
        filter: blur(0);
    }
}

/* Header - Gold Title Block */
#modal-title {
    font-family: 'Courier New', 'Consolas', monospace;
    font-size: 1.75rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--bright-gold);
    text-transform: uppercase;
    margin: 0;
    padding: 0.5rem 0;
    text-shadow: 0 2px 8px rgba(244, 196, 48, 0.3);
    border-bottom: 2px solid var(--gold);
}

/* Model ID - Gold Badge */
#modal-model-id {
    font-family: 'Courier New', 'Consolas', monospace;
    font-size: 0.875rem;
    font-weight: 700;
    background: linear-gradient(135deg, var(--gold), var(--bright-gold));
    color: var(--dark-navy);
    padding: 0.375rem 0.75rem;
    border-radius: var(--radius-md);
    letter-spacing: 0.1em;
    border: 2px solid var(--gold);
    box-shadow: 0 2px 8px rgba(244, 196, 48, 0.3);
}

/* Spec Cards - Navy Sections */
#modal-container .p-4.rounded-lg {
    background: rgba(30, 58, 95, 0.3);
    border: 2px solid var(--gold);
    border-left: 4px solid var(--bright-gold);
    border-radius: var(--radius-lg);
    padding: 1.25rem;
    position: relative;
}

#modal-container .p-4.rounded-lg::before {
    content: attr(data-section);
    position: absolute;
    top: -2px;
    left: -2px;
    background: linear-gradient(135deg, var(--gold), var(--bright-gold));
    color: var(--dark-navy);
    font-size: 0.625rem;
    font-weight: 700;
    padding: 0.125rem 0.5rem;
    letter-spacing: 0.05em;
    font-family: 'Courier New', monospace;
    border-radius: var(--radius-sm);
}

/* Section Headers - Gold Style */
#modal-container h4 {
    font-family: 'Courier New', 'Consolas', monospace;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--bright-gold);
    margin-bottom: 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px dashed rgba(212, 165, 116, 0.5);
}

/* Label/Value Pairs - Spec List */
#modal-container .flex.items-center {
    font-family: 'Courier New', 'Consolas', monospace;
    font-size: 0.8125rem;
    padding: 0.375rem 0;
    border-bottom: 1px solid rgba(212, 165, 116, 0.2);
}

#modal-container .flex.items-center:last-child {
    border-bottom: none;
}

#modal-container .flex.items-center span:first-child {
    font-weight: 700;
    color: var(--gold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 0.75rem;
}

#modal-container .flex.items-center span:last-child {
    color: var(--cream);
    font-weight: 400;
}

/* Gallery - Gold Bordered Grid */
.modal-thumbnail {
    border: 2px solid var(--gold);
    border-radius: var(--radius-lg);
    transition: all 0.2s ease;
    cursor: pointer;
    position: relative;
}

.modal-thumbnail::after {
    content: '⊕';
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    background: rgba(212, 165, 116, 0.9);
    color: var(--dark-navy);
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    opacity: 0;
    transition: opacity 0.2s ease;
    border-radius: var(--radius-sm);
}

.modal-thumbnail:hover {
    border-color: var(--bright-gold);
    box-shadow: 0 0 0 2px rgba(244, 196, 48, 0.3),
                0 4px 12px rgba(212, 165, 116, 0.2);
}

.modal-thumbnail:hover::after {
    opacity: 1;
}

/* Close Button - Gold Symbol */
#close-modal {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-md);
    background: linear-gradient(135deg, var(--gold), var(--bright-gold));
    color: var(--dark-navy);
    border: 2px solid var(--gold);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(244, 196, 48, 0.3);
    transition: all 0.2s ease;
    font-family: 'Courier New', monospace;
    font-size: 1.5rem;
    font-weight: 700;
}

#close-modal:hover {
    background: linear-gradient(135deg, var(--bright-gold), var(--gold));
    border-color: var(--bright-gold);
    transform: rotate(90deg);
    box-shadow: 0 4px 12px rgba(244, 196, 48, 0.4);
}

/* Grid Lines for Variants Table */
#variants-table {
    border: 2px solid var(--gold);
    border-collapse: separate;
    border-spacing: 0;
    border-radius: var(--radius-lg);
}

#variants-table th,
#variants-table td {
    border-right: 1px solid rgba(212, 165, 116, 0.3);
    border-bottom: 1px solid rgba(212, 165, 116, 0.3);
}

#variants-table th:last-child,
#variants-table td:last-child {
    border-right: none;
}

#variants-table tr:last-child td {
    border-bottom: none;
}

/* ============================================================================
   BOX VARIANT THUMBNAILS
   ============================================================================ */

.variant-thumbnails {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.75rem;
    flex-wrap: wrap;
}

/* Compact mode when more than 3 variants */
.variant-thumbnails.compact {
    gap: 0.4rem;
}

.variant-thumb {
    width: 100px;
    height: 100px;
    border: 2px solid rgba(212, 165, 116, 0.4);
    background: linear-gradient(135deg, var(--navy), var(--dark-navy));
    cursor: pointer;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    border-radius: var(--radius-sm);
    flex-shrink: 0;
}

/* Compact thumbnails for >3 variants */
.variant-thumbnails.compact .variant-thumb {
    width: 70px;
    height: 70px;
}

.variant-thumb:hover {
    border-color: var(--gold);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(212, 165, 116, 0.3);
}

.variant-thumb.active {
    border-color: var(--bright-gold);
    box-shadow: 0 0 0 2px var(--bright-gold), 0 4px 12px rgba(244, 196, 48, 0.4);
}

.variant-thumb .variant-icon-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: var(--radius-xs);
}

.variant-thumb .variant-icon {
    font-size: 2rem;
}

.variant-thumb-label {
    display: none; /* SVGs have built-in labels */
}