/**
 * Jasmine RMS - Reusable Component Styles
 * ========================================
 *
 * This file contains shared styles used across multiple pages
 * in the Jasmine RMS website. Include this file in any page
 * that uses video thumbnails, feature icons, or FAQ accordions.
 *
 * Usage:
 *   <link href="/assets/css/jasmine-components.css" rel="stylesheet" type="text/css" />
 *
 * Components included:
 *   - .feature-icon-box    : Icon container for feature lists
 *   - .video-thumbnail     : Video thumbnail with play button overlay
 *   - .play-button         : Circular play button with CSS triangle
 *   - .image-thumbnail     : Clickable image with GLightbox (magnifier icon)
 *   - .zoom-button         : Circular magnifier button for image lightbox
 *   - .faq-accordion       : Styled Bootstrap 5 accordion for FAQs
 *   - Lazy Loading         : Shimmer placeholder + fade-in for images
 *
 * Dependencies:
 *   - Bootstrap 5
 *   - CSS custom property: --vz-primary (from Velzon theme)
 *
 * Author: Jasmine RMS Team
 * Version: 1.0.0
 */

/* ==========================================================================
   Feature Icon Box
   ========================================================================== */

/**
 * Square icon container used in feature lists
 * Pairs with Bootstrap color utilities (bg-primary-subtle, text-primary, etc.)
 *
 * Example:
 *   <div class="feature-icon-box bg-primary-subtle text-primary">
 *       <i class="ri-eye-line fs-20"></i>
 *   </div>
 */
.feature-icon-box {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    flex-shrink: 0;
}

/* ==========================================================================
   Video Thumbnail
   ========================================================================== */

/**
 * Responsive video thumbnail container with hover effects
 * Use with GLightbox for modal video playback
 *
 * Example:
 *   <a href="https://youtube.com/watch?v=VIDEO_ID"
 *      class="glightbox video-thumbnail position-relative d-block shadow overflow-hidden"
 *      data-type="video"
 *      title="Video Title">
 *       <img src="cover.jpg" alt="Video" class="img-fluid rounded-4 shadow w-100">
 *       <div class="position-absolute top-50 start-50 translate-middle z-1">
 *           <div class="play-button"></div>
 *       </div>
 *   </a>
 */
.video-thumbnail {
    border-radius: 12px;
}

.video-thumbnail img {
    transition: transform 0.3s ease;
}

.video-thumbnail:hover img {
    transform: scale(1.02);
}

/* ==========================================================================
   Play Button (video play icon)
   ========================================================================== */

/**
 * Circular play button with CSS triangle icon
 * No font icon dependency - pure CSS
 * Centers automatically when used with Bootstrap positioning utilities
 *
 * Size variants:
 *   - .play-button         : Large (64px) - default
 *   - .play-button-md      : Medium (48px)
 *   - .play-button-sm      : Small (36px)
 *
 * Example:
 *   <div class="play-button"></div>
 *   <div class="play-button-md"></div>
 *   <div class="play-button-sm"></div>
 */

/* Base styles shared by all sizes */
.play-button,
.play-button-md,
.play-button-sm {
    background: rgba(255, 255, 255, 0.95);
    border-radius: 50%;
    position: relative;
    box-shadow: 0 4px 25px rgba(0, 0, 0, 0.3);
    transition: all 0.3s ease;
}

/* Large (default) - 64px */
.play-button {
    width: 64px;
    height: 64px;
}

.play-button::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 54%; /* Slightly offset for optical centering */
    transform: translate(-50%, -50%);
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 12px 0 12px 20px;
    border-color: transparent transparent transparent var(--vz-primary);
}

/* Medium - 48px */
.play-button-md {
    width: 48px;
    height: 48px;
}

.play-button-md::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 54%;
    transform: translate(-50%, -50%);
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 9px 0 9px 15px;
    border-color: transparent transparent transparent var(--vz-primary);
}

/* Small - 36px */
.play-button-sm {
    width: 36px;
    height: 36px;
}

.play-button-sm::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 54%;
    transform: translate(-50%, -50%);
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 7px 0 7px 11px;
    border-color: transparent transparent transparent var(--vz-primary);
}

/* Hover state for all sizes */
.video-thumbnail:hover .play-button,
.video-thumbnail:hover .play-button-md,
.video-thumbnail:hover .play-button-sm {
    background: #fff;
    transform: scale(1.1);
}

/* Mobile: Scale down all sizes */
@media (max-width: 575.98px) {
    .play-button {
        width: 56px;
        height: 56px;
    }

    .play-button::after {
        border-width: 10px 0 10px 16px;
    }

    .play-button-md {
        width: 42px;
        height: 42px;
    }

    .play-button-md::after {
        border-width: 8px 0 8px 13px;
    }

    .play-button-sm {
        width: 32px;
        height: 32px;
    }

    .play-button-sm::after {
        border-width: 6px 0 6px 10px;
    }
}

/* ==========================================================================
   FAQ Accordion
   ========================================================================== */

/**
 * Styled Bootstrap 5 accordion for FAQ sections
 * Removes default focus ring and adds brand colors
 *
 * Example:
 *   <div class="accordion faq-accordion" id="faqAccordion">
 *       <div class="accordion-item border-0 shadow-sm mb-3 rounded-3 overflow-hidden">
 *           <h2 class="accordion-header">
 *               <button class="accordion-button fw-semibold" ...>Question?</button>
 *           </h2>
 *           <div class="accordion-collapse collapse show" ...>
 *               <div class="accordion-body text-muted">Answer...</div>
 *           </div>
 *       </div>
 *   </div>
 */
.faq-accordion .accordion-button:not(.collapsed) {
    background-color: var(--vz-primary-bg-subtle);
    color: var(--vz-primary);
}

.faq-accordion .accordion-button:focus {
    box-shadow: none;
    border-color: rgba(0, 0, 0, 0.125);
}

/* ==========================================================================
   Module Link Items (for homepage sections)
   ========================================================================== */

/**
 * Clickable module links used in Front Office / Back Office sections
 *
 * Example:
 *   <div class="module-link-item">
 *       <a href="POS.aspx">
 *           <div class="feature-icon-box bg-primary-subtle text-primary">
 *               <i class="ri-file-list-3-line fs-20"></i>
 *           </div>
 *           <div>
 *               <strong>POS & Cashier</strong>
 *               <p class="mb-0 fs-14">Description text...</p>
 *           </div>
 *       </a>
 *   </div>
 */
.module-link-item {
    padding: 16px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.module-link-item:last-child {
    border-bottom: none;
}

.module-link-item a {
    text-decoration: none;
    color: inherit;
    display: flex;
    align-items: flex-start;
    gap: 16px;
    transition: color 0.2s ease;
}

.module-link-item a:hover {
    color: var(--vz-primary);
}

.module-link-item a:hover strong {
    color: var(--vz-primary);
}

.module-link-item strong {
    font-weight: 600;
    color: var(--vz-primary);
    transition: color 0.2s ease;
}

/* ==========================================================================
   Image Thumbnail (clickable image with GLightbox)
   ========================================================================== */

/**
 * Clickable image container that opens in GLightbox
 * Similar to video-thumbnail but with magnifier icon instead of play button
 *
 * Example:
 *   <a href="full-size-image.jpg"
 *      class="glightbox image-thumbnail position-relative d-block shadow overflow-hidden"
 *      data-gallery="gallery-name"
 *      title="Image Title">
 *       <img src="thumbnail.jpg" alt="Description" class="img-fluid rounded-4 shadow w-100">
 *       <div class="position-absolute top-50 start-50 translate-middle z-1">
 *           <div class="zoom-button"></div>
 *       </div>
 *   </a>
 */
.image-thumbnail {
    border-radius: 12px;
}

.image-thumbnail img {
    transition: transform 0.3s ease;
}

.image-thumbnail:hover img {
    transform: scale(1.02);
}

/* ==========================================================================
   Zoom Button (magnifier icon for image lightbox)
   ========================================================================== */

/**
 * Circular zoom/magnifier button with CSS icon
 * Same size and style as play-button but with magnifier icon
 *
 * Size variants:
 *   - .zoom-button         : Large (70px) - default, same as play-button
 *   - .zoom-button-md      : Medium (60px)
 *   - .zoom-button-sm      : Small (50px)
 *
 * Example:
 *   <div class="zoom-button"></div>
 *   <div class="zoom-button-md"></div>
 *   <div class="zoom-button-sm"></div>
 */

/* Base styles shared by all sizes */
.zoom-button,
.zoom-button-md,
.zoom-button-sm {
    background: rgba(255, 255, 255, 0.95);
    border-radius: 50%;
    position: relative;
    box-shadow: 0 4px 25px rgba(0, 0, 0, 0.3);
    transition: all 0.3s ease;
}

/* Large (default) - 70px */
.zoom-button {
    width: 64px;
    height: 64px;
}

.zoom-button::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 46%;
    transform: translate(-50%, -50%);
    width: 20px;
    height: 20px;
    border: 3px solid var(--vz-primary);
    border-radius: 50%;
}

.zoom-button::after {
    content: '';
    position: absolute;
    top: 58%;
    left: 58%;
    width: 3px;
    height: 12px;
    background: var(--vz-primary);
    transform: rotate(-45deg);
    transform-origin: top center;
}

/* Medium - 60px */
.zoom-button-md {
    width: 48px;
    height: 48px;
}

.zoom-button-md::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 46%;
    transform: translate(-50%, -50%);
    width: 17px;
    height: 17px;
    border: 3px solid var(--vz-primary);
    border-radius: 50%;
}

.zoom-button-md::after {
    content: '';
    position: absolute;
    top: 58%;
    left: 58%;
    width: 3px;
    height: 10px;
    background: var(--vz-primary);
    transform: rotate(-45deg);
    transform-origin: top center;
}

/* Small - 50px */
.zoom-button-sm {
    width: 36px;
    height: 36px;
}

.zoom-button-sm::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 46%;
    transform: translate(-50%, -50%);
    width: 14px;
    height: 14px;
    border: 2px solid var(--vz-primary);
    border-radius: 50%;
}

.zoom-button-sm::after {
    content: '';
    position: absolute;
    top: 58%;
    left: 58%;
    width: 2px;
    height: 8px;
    background: var(--vz-primary);
    transform: rotate(-45deg);
    transform-origin: top center;
}

/* Hover state for all sizes */
.image-thumbnail:hover .zoom-button,
.image-thumbnail:hover .zoom-button-md,
.image-thumbnail:hover .zoom-button-sm {
    background: #fff;
    transform: scale(1.1);
}

/* Mobile: Scale down all sizes */
@media (max-width: 575.98px) {
    .zoom-button {
        width: 56px;
        height: 56px;
    }

    .zoom-button::before {
        width: 16px;
        height: 16px;
        border-width: 2px;
    }

    .zoom-button::after {
        height: 10px;
        width: 2px;
    }

    .zoom-button-md {
        width: 48px;
        height: 48px;
    }

    .zoom-button-md::before {
        width: 14px;
        height: 14px;
        border-width: 2px;
    }

    .zoom-button-md::after {
        height: 8px;
        width: 2px;
    }

    .zoom-button-sm {
        width: 40px;
        height: 40px;
    }

    .zoom-button-sm::before {
        width: 12px;
        height: 12px;
        border-width: 2px;
    }

    .zoom-button-sm::after {
        height: 6px;
        width: 2px;
    }
}

/* ==========================================================================
   Lazy Loading Styles
   ========================================================================== */

/**
 * Native lazy loading enhancement with visual feedback
 * Works with img[loading="lazy"] attribute
 *
 * Features:
 *   - Shimmer placeholder animation while loading
 *   - Smooth fade-in when image loads
 *   - No JavaScript required for basic functionality
 *
 * Usage:
 *   <img src="image.jpg" alt="Description" class="img-fluid" loading="lazy">
 *
 * Note: Do NOT use loading="lazy" on above-the-fold images (hero, logo)
 */

/* Shimmer placeholder while image loads */
img[loading="lazy"]:not(.loaded) {
    background: linear-gradient(90deg, #f0f0f0 25%, #e8e8e8 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: lazy-shimmer 1.5s ease-in-out infinite;
    min-height: 100px; /* Prevent layout shift */
}

@keyframes lazy-shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Fade-in effect when image loads */
img[loading="lazy"] {
    opacity: 0;
    transition: opacity 0.4s ease-out;
}

img[loading="lazy"].loaded {
    opacity: 1;
    background: none;
    animation: none;
}