/**
 * Product Inquiry Card – Frontend Styles
 *
 * Architecture : BEM (Block__Element--Modifier)
 * Namespace    : pic-  (product-inquiry-card)
 * Version      : 1.0.0
 *
 * Table of Contents
 * -----------------
 *  1. Custom Properties (CSS vars)
 *  2. Card Block
 *  3. Card Image
 *  4. Floating Specifications Button
 *  5. Card Body & Typography
 *  6. Card Footer & Inquiry Text
 *  7. Quick Call Button
 *  8. Popover (desktop quick-call dialog)
 *  9. Specifications Modal
 * 10. Modal Content Styles
 * 11. Utility / Scroll-lock
 * 12. Responsive overrides
 */

/* =========================================================================
   1. Custom Properties
   ========================================================================= */

:root {
    --pic-transition-fast:   150ms ease;
    --pic-transition-normal: 300ms ease;
    --pic-transition-slow:   400ms ease;
    --pic-z-floating:        10;
    --pic-z-popover:         100;
    --pic-z-modal-overlay:   9000;
    --pic-z-modal-dialog:    9001;
    --pic-radius-card:       16px;
    --pic-radius-btn:        8px;
    --pic-radius-popover:    12px;
    --pic-radius-modal:      16px;
    --pic-shadow-card:       0 4px 24px rgba(0, 0, 0, 0.08);
    --pic-shadow-popover:    0 8px 32px rgba(0, 0, 0, 0.14);
    --pic-shadow-modal:      0 20px 60px rgba(0, 0, 0, 0.25);
    --pic-shadow-floating:   0 4px 16px rgba(0, 0, 0, 0.22);
    --pic-shadow-floating-hover: 0 8px 28px rgba(0, 0, 0, 0.32);
    --pic-color-primary:     #1a73e8;
    --pic-color-primary-dark:#1557b0;
    --pic-color-text:        #111827;
    --pic-color-muted:       #6b7280;
    --pic-color-white:       #ffffff;
    --pic-font-size-title:   1.15rem;
    --pic-font-size-desc:    0.875rem;
    --pic-font-size-inquiry: 0.875rem;
    --pic-font-size-btn:     0.9rem;
}

/* =========================================================================
   2. Card Block
   ========================================================================= */

.pic-card {
    position:         relative;
    display:          flex;
    flex-direction:   column;
    background-color: var(--pic-color-white);
    border-radius:    var(--pic-radius-card);
    box-shadow:       var(--pic-shadow-card);
    overflow:         visible; /* allow floating btn to bleed */
    transition:       box-shadow var(--pic-transition-normal);
    width:            100%;
    max-width:        420px;
    margin:           0 auto;
}

.pic-card:focus-within {
    outline: none;
}

/* =========================================================================
   3. Card Image
   ========================================================================= */

.pic-card__image-wrap {
    position:      relative;
    width:         100%;
    height:        260px;
    overflow:      hidden;
    border-radius: 16px 16px 0 0;
    /* Clip the child image transforms */
    -webkit-mask-image: -webkit-radial-gradient(white, black); /* Safari fix */
}

.pic-card__image {
    width:      100%;
    height:     100%;
    will-change: transform; /* GPU layer */
    transition: transform 350ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transform:  scale(1) translateZ(0); /* init GPU layer */
}

.pic-card__image img {
    width:       100%;
    height:      100%;
    object-fit:  cover;
    display:     block;
    /* Prevents sub-pixel gap */
    vertical-align: middle;
}

/* JS adds this class on mouseenter */
.pic-card__image--zoomed {
    transform: scale(var(--pic-zoom-scale, 1.07)) translateZ(0);
}

/* =========================================================================
   4. Floating Specifications Button
   ========================================================================= */

.pic-floating-btn {
    /* Positioning – partially outside card right edge */
    position:    absolute;
    top:         18%;
    right:       -18px;
    z-index:     var(--pic-z-floating);

    /* Perfect circle */
    display:          flex;
    align-items:      center;
    justify-content:  center;
    width:            52px;
    height:           52px;
    border-radius:    50%;
    border:           none;
    padding:          0;
    cursor:           pointer;

    /* Appearance */
    background-color: var(--pic-color-primary);
    color:            var(--pic-color-white);
    box-shadow:       var(--pic-shadow-floating);

    /* GPU-accelerated transitions */
    will-change:  transform, box-shadow;
    transition:   transform var(--pic-transition-normal),
                  box-shadow var(--pic-transition-normal);
    transform:    translateZ(0);

    /* No text-decoration on focus */
    outline-offset: 3px;
}

.pic-floating-btn:hover,
.pic-floating-btn:focus-visible {
    transform:  scale(1.12) translateZ(0);
    box-shadow: var(--pic-shadow-floating-hover);
}

.pic-floating-btn svg {
    flex-shrink: 0;
    pointer-events: none;
}

/* ─── Animated label ─────────────────────────────────────────── */

.pic-floating-btn__label {
    position:       absolute;
    right:          calc(100% + 10px);
    top:            50%;
    transform:      translateY(-50%) translateX(8px);
    white-space:    nowrap;
    background:     var(--pic-color-primary);
    color:          var(--pic-color-white);
    font-size:      0.78rem;
    font-weight:    600;
    padding:        5px 12px;
    border-radius:  6px;
    letter-spacing: 0.02em;
    pointer-events: none;

    /* Animation states */
    opacity:    0;
    visibility: hidden;
    transition: opacity   var(--pic-transition-normal),
                transform var(--pic-transition-normal),
                visibility var(--pic-transition-normal);

    /* RTL safe – no directional margin trick */
    direction: rtl;
}

/* Arrow on label */
.pic-floating-btn__label::after {
    content:      '';
    position:     absolute;
    right:        -6px;
    top:          50%;
    transform:    translateY(-50%);
    border-width: 5px 0 5px 7px;
    border-style: solid;
    border-color: transparent transparent transparent var(--pic-color-primary);
}

.pic-floating-btn:hover .pic-floating-btn__label,
.pic-floating-btn:focus-visible .pic-floating-btn__label {
    opacity:    1;
    visibility: visible;
    transform:  translateY(-50%) translateX(0);
    pointer-events: auto;
}

/* =========================================================================
   5. Card Body & Typography
   ========================================================================= */

.pic-card__body {
    padding: 20px 22px 18px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1;
}

.pic-card__title {
    margin:      0;
    font-size:   var(--pic-font-size-title);
    font-weight: 700;
    color:       var(--pic-color-text);
    line-height: 1.35;
    word-break:  break-word;
}

.pic-card__description {
    margin:      0;
    font-size:   var(--pic-font-size-desc);
    color:       var(--pic-color-muted);
    line-height: 1.6;
    word-break:  break-word;
}

/* =========================================================================
   6. Card Footer & Inquiry Text
   ========================================================================= */

.pic-card__footer {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             12px;
    margin-top:      4px;
    flex-wrap:       wrap;
}

.pic-card__inquiry {
    font-size:   var(--pic-font-size-inquiry);
    font-weight: 600;
    color:       var(--pic-color-primary);
    white-space: nowrap;
}

/* =========================================================================
   7. Quick Call Button
   ========================================================================= */

.pic-card__btn-wrap {
    position: relative;
    display:  inline-flex;
}

.pic-card__btn {
    display:          inline-flex;
    align-items:      center;
    gap:              6px;
    padding:          9px 20px;
    background-color: var(--pic-color-primary);
    color:            var(--pic-color-white);
    font-size:        var(--pic-font-size-btn);
    font-weight:      600;
    border:           none;
    border-radius:    var(--pic-radius-btn);
    cursor:           pointer;
    white-space:      nowrap;
    letter-spacing:   0.01em;
    transition:       background-color var(--pic-transition-fast),
                      transform        var(--pic-transition-fast),
                      box-shadow       var(--pic-transition-fast);
    will-change:      transform;
    transform:        translateZ(0);
    outline-offset:   3px;
}

.pic-card__btn:hover {
    background-color: var(--pic-color-primary-dark);
    transform:        translateY(-1px) translateZ(0);
    box-shadow:       0 4px 12px rgba(26, 115, 232, 0.35);
}

.pic-card__btn:active {
    transform: translateY(0) translateZ(0);
}

/* =========================================================================
   8. Popover (desktop quick-call dialog)
   ========================================================================= */

.pic-popover {
    position:         absolute;
    bottom:           calc(100% + 10px);
    left:             50%;
    transform:        translateX(-50%) translateY(6px);
    min-width:        220px;
    background-color: var(--pic-color-white);
    border-radius:    var(--pic-radius-popover);
    box-shadow:       var(--pic-shadow-popover);
    padding:          18px 18px 14px;
    z-index:          var(--pic-z-popover);

    /* Hidden state */
    opacity:    0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity   var(--pic-transition-normal),
                transform var(--pic-transition-normal),
                visibility var(--pic-transition-normal);
}

/* Open state toggled by JS */
.pic-popover--open {
    opacity:    1;
    visibility: visible;
    pointer-events: auto;
    transform:  translateX(-50%) translateY(0);
}

.pic-popover__close {
    position:   absolute;
    top:        10px;
    right:      10px;
    display:    flex;
    align-items: center;
    justify-content: center;
    width:      26px;
    height:     26px;
    background: transparent;
    border:     none;
    cursor:     pointer;
    color:      var(--pic-color-muted);
    border-radius: 50%;
    padding:    0;
    transition: background-color var(--pic-transition-fast),
                color            var(--pic-transition-fast);
    outline-offset: 2px;
}

.pic-popover__close:hover {
    background-color: #f3f4f6;
    color:            var(--pic-color-text);
}

.pic-popover__phone {
    display:         flex;
    align-items:     center;
    gap:             8px;
    font-size:       1rem;
    font-weight:     700;
    color:           var(--pic-color-text);
    text-decoration: none;
    margin-bottom:   12px;
    word-break:      break-all;
    transition:      color var(--pic-transition-fast);
}

.pic-popover__phone:hover {
    color: var(--pic-color-primary);
}

.pic-popover__phone svg {
    flex-shrink: 0;
    color: var(--pic-color-primary);
}

.pic-popover__icons {
    display:     flex;
    align-items: center;
    gap:         10px;
    padding-top: 8px;
    border-top:  1px solid #f3f4f6;
}

.pic-popover__icon {
    display:          flex;
    align-items:      center;
    justify-content:  center;
    width:            40px;
    height:           40px;
    border-radius:    50%;
    background-color: #f3f4f6;
    transition:       background-color var(--pic-transition-fast),
                      transform        var(--pic-transition-fast);
    overflow:         hidden;
    outline-offset:   2px;
}

.pic-popover__icon:hover {
    background-color: #e5e7eb;
    transform:        scale(1.08) translateZ(0);
}

.pic-popover__icon img {
    width:       32px;
    height:      32px;
    object-fit:  contain;
    display:     block;
}

/* =========================================================================
   9. Specifications Modal
   ========================================================================= */

.pic-modal {
    /* Full-viewport overlay */
    position:   fixed;
    inset:      0; /* top:0; right:0; bottom:0; left:0 */
    display:    flex;
    align-items:     center;
    justify-content: center;
    z-index:    var(--pic-z-modal-overlay);
    background-color: rgba(0, 0, 0, 0.55);
    padding:    16px;

    /* Hidden state */
    opacity:    0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity   var(--pic-transition-normal),
                visibility var(--pic-transition-normal);
}

/* Open state */
.pic-modal--open {
    opacity:    1;
    visibility: visible;
    pointer-events: auto;
}

.pic-modal__overlay {
    position:   absolute;
    inset:      0;
    cursor:     pointer;
}

.pic-modal__dialog {
    position:         relative;
    z-index:          var(--pic-z-modal-dialog);
    background-color: var(--pic-color-white);
    border-radius:    var(--pic-radius-modal);
    box-shadow:       var(--pic-shadow-modal);
    width:            100%;
    max-width:        600px;
    max-height:       85vh;
    display:          flex;
    flex-direction:   column;
    overflow:         hidden;

    /* Scale-in animation */
    transform:  scale(0.92) translateZ(0);
    transition: transform var(--pic-transition-normal);
}

.pic-modal--open .pic-modal__dialog {
    transform: scale(1) translateZ(0);
}

.pic-modal__close {
    position:   absolute;
    top:        14px;
    right:      14px;
    display:    flex;
    align-items: center;
    justify-content: center;
    width:      34px;
    height:     34px;
    background: #f3f4f6;
    border:     none;
    cursor:     pointer;
    color:      var(--pic-color-muted);
    border-radius: 50%;
    padding:    0;
    z-index:    1;
    transition: background-color var(--pic-transition-fast),
                color            var(--pic-transition-fast),
                transform        var(--pic-transition-fast);
    outline-offset: 3px;
}

.pic-modal__close:hover {
    background-color: #e5e7eb;
    color:            var(--pic-color-text);
    transform:        rotate(90deg);
}

.pic-modal__header {
    padding:       22px 56px 14px 24px;
    border-bottom: 1px solid #f3f4f6;
    flex-shrink:   0;
}

.pic-modal__title {
    margin:      0;
    font-size:   1.2rem;
    font-weight: 700;
    color:       var(--pic-color-text);
    line-height: 1.3;
}

.pic-modal__body {
    padding:    22px 24px 28px;
    overflow-y: auto;
    flex:       1;
    color:      #374151;
    font-size:  0.925rem;
    line-height: 1.7;
    -webkit-overflow-scrolling: touch;
}

/* =========================================================================
   10. Modal Content Styles (WYSIWYG / specs table)
   ========================================================================= */

.pic-modal__body table {
    width:           100%;
    border-collapse: collapse;
    font-size:       0.9rem;
}

.pic-modal__body table th,
.pic-modal__body table td {
    padding:    10px 14px;
    text-align: left;
    border-bottom: 1px solid #f3f4f6;
}

.pic-modal__body table th {
    font-weight:      600;
    color:            var(--pic-color-text);
    background-color: #fafafa;
    width:            38%;
}

.pic-modal__body table td {
    color: #374151;
}

.pic-modal__body table tr:last-child th,
.pic-modal__body table tr:last-child td {
    border-bottom: none;
}

.pic-modal__body h1,
.pic-modal__body h2,
.pic-modal__body h3,
.pic-modal__body h4 {
    margin: 0 0 10px;
    color:  var(--pic-color-text);
}

.pic-modal__body p {
    margin: 0 0 12px;
}

.pic-modal__body ul,
.pic-modal__body ol {
    margin:       0 0 12px;
    padding-left: 20px;
}

.pic-modal__body li {
    margin-bottom: 5px;
}

/* =========================================================================
   11. Utility / Scroll-lock
   ========================================================================= */

/* Applied to <body> by JS when modal is open */
.pic-scroll-locked {
    overflow: hidden !important;
}

/* =========================================================================
   12. Responsive Overrides
   ========================================================================= */

/* Tablet and below */
@media (max-width: 767px) {

    .pic-card {
        max-width: 100%;
    }

    /* On mobile the popover is never shown; tel: link fires directly */
    .pic-popover {
        display: none !important;
    }

    .pic-floating-btn {
        right: -12px;
    }

    .pic-modal__dialog {
        max-height: 92vh;
    }

    .pic-modal__body {
        padding: 18px 18px 24px;
    }

    .pic-modal__header {
        padding: 18px 52px 12px 18px;
    }
}

/* Large screens */
@media (min-width: 1200px) {
    .pic-card {
        max-width: 440px;
    }
}