/* =========================================
   Base Layout & Canvas Scaling
   ========================================= */
.everyrep-3d-wrapper {
    position: relative;
    width: 100%;
    max-width: none !important; /* Seamless Gutenberg Wide/Full alignment */
    height: 700px; 
    background-color: transparent;
    overflow: hidden;
    cursor: grab;
}

@media (min-width: 768px) {
    .everyrep-3d-wrapper {
        height: 650px; /* Taller on desktop */
    }
}

.everyrep-3d-wrapper:active {
    cursor: grabbing;
}

.everyrep-3d-wrapper canvas {
    opacity: 0;
    transition: opacity 1s ease-in-out;
    touch-action: pan-y !important;
    outline: none;
}

.everyrep-3d-wrapper canvas.ready {
    opacity: 1;
}

/* =========================================
   Loading Skeleton & Interaction Hints
   ========================================= */
.everyrep-loading {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: inherit;
    font-size: 11px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #888;
    pointer-events: none;
    transition: opacity 0.5s ease;
    z-index: 10;
}

.everyrep-loading::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 0%;
    height: 1px;
    background-color: #333;
    animation: loadingLine 1.5s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

body.er-men .everyrep-loading::after {
    background-color: #ddd; 
}

@keyframes loadingLine {
    0% { width: 0%; opacity: 0; }
    50% { width: 100%; opacity: 1; }
    100% { width: 100%; opacity: 0; }
}

.everyrep-interaction-hint {
    position: absolute;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    font-family: inherit;
    font-size: 10px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: rgba(0, 0, 0, 0.4); 
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.8s ease;
    z-index: 10;
}

body.er-men .everyrep-interaction-hint {
    color: rgba(255, 255, 255, 0.4); 
}

body.er-women .everyrep-interaction-hint {
    color: rgba(0, 0, 0, 0.75); 
}

.everyrep-interaction-hint.visible {
    opacity: 1;
}

/* =========================================
   Hotspot Positioning & Dots
   ========================================= */
.everyrep-hotspots-container {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    pointer-events: none;
    z-index: 20;
}

.everyrep-hotspot {
    position: absolute;
    transform: translate(-50%, -50%);
    pointer-events: auto;
    transition: opacity 0.2s ease !important; 
}

.everyrep-hotspot-dot {
    width: 14px;
    height: 14px;
    background: #000000; 
    border: 3px solid #fff;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 2px 5px rgba(0,0,0,0.3);
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.everyrep-hotspot:hover .everyrep-hotspot-dot {
    transform: scale(1.2);
}

/* =========================================
   Base Hotspot Cards
   ========================================= */
.everyrep-3d-wrapper .everyrep-hotspot-card {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.2s ease-out, visibility 0s linear 0.2s;
    
    position: absolute;
    bottom: 35px;
    left: 50%;
    transform: translateX(-50%);
    
    padding: 15px;
    border-radius: 30px; 
    width: 220px;
    text-align: left;
    font-family: inherit; 
}

.everyrep-3d-wrapper .everyrep-hotspot-card.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity 0.2s ease-out, visibility 0s;
}

/* Base Mobile Sizes */
.everyrep-3d-wrapper .everyrep-hotspot-card h4 {
    margin: 0 0 8px 0;
    font-size: 16px !important; 
    font-weight: 600 !important; 
    line-height: 1.2;
}

.everyrep-3d-wrapper .everyrep-hotspot-card p {
    margin: 0 0 12px 0;
    font-size: 14px !important; 
    line-height: 1.4;
}

@media (min-width: 768px) {
    .everyrep-3d-wrapper .everyrep-hotspot-card h4 { font-size: 18px !important; }
    .everyrep-3d-wrapper .everyrep-hotspot-card p { font-size: 16px !important; }
}

/* =========================================
   Men's Dark Theme (Frosted Glass)
   ========================================= */
body.er-men .everyrep-3d-wrapper .everyrep-hotspot-card {
    background: rgba(20, 20, 20, 0.50) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4); 
}

body.er-men .everyrep-3d-wrapper .everyrep-hotspot-card h4,
body.er-men .everyrep-3d-wrapper .everyrep-hotspot-card p {
    color: #ffffff !important; 
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6); 
}

/* =========================================
   Women's Light Theme (Acrylic Glass)
   ========================================= */
body.er-women .everyrep-3d-wrapper .everyrep-hotspot-card {
    background: rgba(255, 255, 255, 0.60) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.05);
}

body.er-women .everyrep-3d-wrapper .everyrep-hotspot-card h4,
body.er-women .everyrep-3d-wrapper .everyrep-hotspot-card p,
body.er-women .everyrep-3d-wrapper .everyrep-hotspot-card a {
    color: #111111 !important; 
    text-shadow: none !important;
}

/* =========================================
   Automatic Smart-Flipped Hotspots
   ========================================= */
.everyrep-hotspot.everyrep-flipped .everyrep-hotspot-card {
    bottom: auto !important;
    top: 20px !important; 
}

/* =========================================
   Safari iOS Touch Target Fix
   ========================================= */
.everyrep-hotspot-dot {
    position: relative !important; /* Anchors the invisible hitbox */
}

/* Creates a 44x44px invisible touch area around the 14px dot */
.everyrep-hotspot-dot::after {
    content: "" !important;
    position: absolute !important;
    top: -25px !important;
    left: -25px !important;
    right: -25px !important;
    bottom: -25px !important;
    background-color: rgba(0, 0, 0, 0) !important; /* Safari requires an actual color to register touch */
    border-radius: 50%;
}