/* ==========================================================================
   UltraPad Model Viewer Styles

   CUSTOMIZATION TIP:
   Change the CSS variables below to quickly update colors throughout the viewer.
   ========================================================================== */

:root {
    /* ==========================================================================
       BRAND COLORS - Change these to match your brand
       ========================================================================== */
    --accent-color: #163767;           /* Navy blue - hotspot border, pulse & expanded header */
    --accent-color-light: #1e4a8a;     /* Lighter navy for hover states */

    /* ==========================================================================
       HOTSPOT DOT STYLING
       ========================================================================== */
    --hotspot-dot-bg: white;           /* Dot background color */
    --hotspot-dot-border: #163767;     /* Dot border color */
    --hotspot-dot-border-width: 5px;   /* Dot border thickness */
    --hotspot-size: 24px;              /* Size of hotspot dot */
    --pulse-size: 40px;                /* Size of pulse animation */
    --animation-speed: 1.5s;           /* Pulse animation duration */

    /* ==========================================================================
       LABEL STYLING - Collapsed State (default small label)
       ========================================================================== */
    --label-bg: #eef2f6;               /* Label background color */
    --label-text: #163767;             /* Label text color */
    --label-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --label-border-radius: 6px;        /* Label corner roundness */
    --label-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);

    /* ==========================================================================
       LABEL STYLING - Expanded State (card with title and description)
       ========================================================================== */
    --expanded-width: 200px;           /* Width of expanded card */
    --expanded-bg: #eef2f6;              /* Card background color */
    --expanded-border-radius: 8px;     /* Card corner roundness */
    --expanded-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);

    /* Title (header bar) */
    --title-bg: #eef2f6;               /* Title background color */
    --title-text-color: #163767;         /* Title text color */
    --title-font-size: 14px;           /* Title font size */
    --title-font-weight: 600;          /* Title font weight */
    --title-padding: 10px 14px;        /* Title padding */

    /* Description (body text) */
    --description-text-color: #163767;    /* Description text color */
    --description-font-size: 12px;     /* Description font size */
    --description-font-weight: 400;    /* Description font weight */
    --description-line-height: 1.5;    /* Description line spacing */
    --description-padding:  0rem 1.25rem 0.75rem 1.25rem;  /* Description padding */

    /* ==========================================================================
       HOTSPOT CONTENT - Edit the text below to customize labels and descriptions
       ========================================================================== */

    /* Hotspot 1: Wear Detection */
    --hotspot-1-title: "Wear detection";
    --hotspot-1-description: "Monitor the UltraPad's wear easily with clear visual indicators on the front, back and sides helping you plan maintenance and replacement schedules.";

    /* Hotspot 2: Special Polymer */
    --hotspot-2-title: "Special polymer";
    --hotspot-2-description: "Advanced polymer material engineered for maximum durability and performance, providing superior resistance to wear and environmental factors.";

    /* Hotspot 3: Improved Locking Mechanism */
    --hotspot-3-title: "Improved locking mechanism";
    --hotspot-3-description: "Enhanced locking system ensures secure attachment and easy installation, reducing downtime and improving operational efficiency.";
}

/* ==========================================================================
   Base Styles
   ========================================================================== */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    width: 100%;
    height: 100%;
    overflow: hidden;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
}

/* ==========================================================================
   Model Viewer Container
   ========================================================================== */

model-viewer {
    width: 100%;
    height: 100dvh;
    background: white;
    --poster-color: transparent;
}

/* ==========================================================================
   Hotspot Styles
   ========================================================================== */

.hotspot {
    /* Reset button styles */
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    outline: none;

    /* Positioning */
    display: flex;
    flex-direction: column;
    align-items: center;

    /* Prevent text selection */
    user-select: none;
    -webkit-user-select: none;
}

/* Hotspot Dot */
.hotspot-dot {
    width: var(--hotspot-size);
    height: var(--hotspot-size);
    background: var(--hotspot-dot-bg);
    border: var(--hotspot-dot-border-width) solid var(--hotspot-dot-border);
    border-radius: 50%;
    position: relative;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

/* Pulse Animation Ring */
.hotspot-dot::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: var(--pulse-size);
    height: var(--pulse-size);
    border: 2px solid var(--accent-color);
    border-radius: 50%;
    animation: pulse var(--animation-speed) ease-out infinite;
    opacity: 0;
}

/* Pulse Animation */
@keyframes pulse {
    0% {
        transform: translate(-50%, -50%) scale(0.5);
        opacity: 0.8;
    }
    100% {
        transform: translate(-50%, -50%) scale(1.5);
        opacity: 0;
    }
}

/* Hotspot Hover State */
.hotspot:hover .hotspot-dot {
    transform: scale(1.15);
    box-shadow: 0 4px 12px rgba(22, 55, 103, 0.4);
    border-color: var(--accent-color-light);
}

/* Active/Focused Hotspot */
.hotspot.active .hotspot-dot,
.hotspot:focus .hotspot-dot {
    transform: scale(1.2);
    background: var(--accent-color);
}

.hotspot.active .hotspot-dot::before {
    animation: none;
    opacity: 0;
}

/* ==========================================================================
   Label Styles - Collapsed State (Default)
   ========================================================================== */

.hotspot-label {
    /* Positioning - above the dot */
    position: absolute;
    bottom: calc(100% + 12px);
    left: 50%;
    transform: translateX(-50%);

    /* Appearance - collapsed state */
    background: var(--label-bg);
    color: var(--label-text);
    padding: 8px 14px;
    border-radius: var(--label-border-radius);
    font-family: var(--label-font-family);
    font-size: 1rem;
    font-weight: 500;
    white-space: nowrap;
    width: auto;
    max-width: var(--expanded-width);
    overflow: hidden;
    text-align: left;

    /* Visual effects */
    box-shadow: var(--label-shadow);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);

    /* Smooth transition for expand/collapse */
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Label title - always visible */
.label-title {
    font-weight: 600;
    font-size: .875rem;
    color: var(--label-text);
    text-align: left;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Label description - hidden by default with smooth animation */
.label-description {
    font-weight: var(--description-font-weight);
    font-size: var(--description-font-size);
    line-height: var(--description-line-height);
    color: var(--label-text);
    opacity: 0;
    max-height: 0;
    padding: 0 .875rem;
    overflow: hidden;
    white-space: normal;
    text-align: left;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Arrow pointer below label */
.hotspot-label::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: var(--label-bg);
    transition: border-color 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Label hover enhancement */
.hotspot:hover .hotspot-label {
    transform: translateX(-50%) translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
}

/* ==========================================================================
   Label Styles - Expanded State (When Active/Clicked)
   ========================================================================== */

.hotspot.active .hotspot-label {
    /* Expanded appearance */
    background: var(--expanded-bg);
    padding: 0;
    border-radius: var(--expanded-border-radius);
    white-space: normal;
    width: var(--expanded-width);
    max-width: var(--expanded-width);
    overflow: visible;
    box-shadow: var(--expanded-shadow);
    transform: translateX(-50%) translateY(-4px);
}

/* Title becomes header when expanded */
.hotspot.active .label-title {
    display: block;
    background: var(--title-bg);
    color: var(--title-text-color);
    padding: var(--title-padding);
    border-radius: var(--expanded-border-radius) var(--expanded-border-radius) 0 0;
    font-size: var(--title-font-size);
    font-weight: var(--title-font-weight);
    text-align: left;
}

/* Description shows when expanded with smooth animation */
.hotspot.active .label-description {
    opacity: 1;
    max-height: min-content;
    padding: var(--description-padding);
    color: var(--description-text-color);
}

/* Arrow changes color when expanded */
.hotspot.active .hotspot-label::after {
    border-top-color: var(--expanded-bg);
}

/* ==========================================================================
   Hotspot Content (from CSS variables for easy editing)
   ========================================================================== */

/* Hotspot 1 Content */
.hotspot-1-label .label-title::before {
    content: var(--hotspot-1-title);
}
.hotspot-1-label .label-description::before {
    content: var(--hotspot-1-description);
}

/* Hotspot 2 Content */
.hotspot-2-label .label-title::before {
    content: var(--hotspot-2-title);
}
.hotspot-2-label .label-description::before {
    content: var(--hotspot-2-description);
}

/* Hotspot 3 Content */
.hotspot-3-label .label-title::before {
    content: var(--hotspot-3-title);
}
.hotspot-3-label .label-description::before {
    content: var(--hotspot-3-description);
}

/* ==========================================================================
   Progress Bar (Loading)
   ========================================================================== */

.progress-bar {
    display: block;
    width: 33%;
    height: 4px;
    max-height: 4px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.5);
    overflow: hidden;
}

.progress-bar.hide {
    display: none;
}

.update-bar {
    height: 100%;
    background: var(--accent-color);
    width: 0%;
    transition: width 0.3s ease;
}


/* Debug mode: Force AR button to be visible */
#ar-button.debug-visible {
    display: flex !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

/* ==========================================================================
   AR Prompt (Hand gesture icon)
   ========================================================================== */

#ar-prompt {
    position: absolute;
    left: 50%;
    bottom: 60px;
    transform: translateX(-50%);
    animation: float 2s ease-in-out infinite;
}

#ar-prompt img {
    width: 48px;
    height: 48px;
    opacity: 0.8;
}

@keyframes float {
    0%, 100% {
        transform: translateX(-50%) translateY(0);
    }
    50% {
        transform: translateX(-50%) translateY(-10px);
    }
}

/* Hide AR prompt when not in AR mode */
model-viewer:not([ar-status="session-started"]) #ar-prompt {
    display: none;
}

/* ==========================================================================
   Mobile Responsive Styles
   ========================================================================== */

@media screen and (max-width: 768px) {
    :root {
        --hotspot-size: 28px;    /* Larger touch targets on mobile */
        --pulse-size: 44px;
    }

    .hotspot-label {
        font-size: .875rem;
        padding: .375rem .625rem;
        bottom: calc(100% + 10px);
    }

    .label-title {
        font-size: .875rem;
    }

    .label-description {
        font-size: .875rem;
    }

    .hotspot.active .label-title {
        padding: .75rem 0.625rem 0.375rem 0.625rem;
        font-size: .875rem;
    }

    .hotspot.active .label-description {
        padding: 0rem .75rem 0.625rem .75rem;
    }

}