/**
 * Product Inquiry Card – Frontend Styles
 *
 * Architecture : BEM (Block__Element--Modifier)
 * Namespace    : pic-  (product-inquiry-card)
 * Version      : 1.1.0
 *
 * Changelog v1.1.0
 * ----------------
 *  - Floating button: removed hardcoded width/height/top/right so
 *    Elementor responsive controls can override them cleanly.
 *  - Floating button: removed hardcoded background-color / color so
 *    Elementor color controls are the sole source of truth.
 *  - Floating button label: inherits colour from button via CSS var.
 *  - Call button: border defaults set to transparent (not none) so
 *    Elementor border-width + border-color controls work immediately.
 *  - Inquiry text: removed hardcoded color; default applied via
 *    Elementor control default so it is user-overridable.
 *  - Added `pic-card__inquiry--has-hover` hook for hover transition.
 *
 * 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;
    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; /* Overridden by Elementor image_height control */
    overflow:      hidden;
    border-radius: 16px 16px 0 0;
    -webkit-mask-image: -webkit-radial-gradient(white, black); /* Safari fix */
}

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

.pic-card__image img {
    width:          100%;
    height:         100%;
    object-fit:     cover;
    display:        block;
    vertical-align: middle;
}

.pic-card__image--zoomed {
    transform: scale(var(--pic-zoom-scale, 1.07)) translateZ(0);
}

/* =========================================================================
   4. Floating Specifications Button
   =========================================================================
   v1.1.0: width, height, top, right, background-color and color are now
   intentionally NOT hardcoded here. Elementor responsive controls
   (specs_btn_width, specs_btn_height, specs_btn_offset_vertical,
    specs_btn_offset_horizontal, specs_btn_bg_color, specs_btn_icon_color)
   emit the values via inline selectors, which always win specificity.
   We keep sane fallback values only for non-Elementor use.
   ========================================================================= */

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

    /* Size – fallback values; overridden by Elementor responsive controls */
    display:         flex;
    align-items:     center;
    justify-content: center;
    width:           52px;  /* fallback */
    height:          52px;  /* fallback */
    border-radius:   50%;

    /* Border – transparent by default so Elementor border controls work */
    border:  0 solid transparent;
    padding: 0;
    cursor:  pointer;

    /* Appearance – fallback; Elementor color controls override */
    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),
                    background-color var(--pic-transition-normal),
                    color            var(--pic-transition-normal),
                    border-color     var(--pic-transition-normal);
    transform:      translateZ(0);
    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;
    /* width/height overridden by Elementor specs_btn_icon_size control */
}

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

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

    /* Use a pseudo-layer so text reads as white on any bg */
    color:          var(--pic-color-white);

    opacity:    0;
    visibility: hidden;
    transition: opacity   var(--pic-transition-normal),
                transform var(--pic-transition-normal),
                visibility var(--pic-transition-normal);
    direction: rtl;
}

/* Arrow on label – inherits colour via border-left-color trick */
.pic-floating-btn__label::after {
    content:      '';
    position:     absolute;
    right:        -6px;
    top:          50%;
    transform:    translateY(-50%);
    border-width: 5px 0 5px 7px;
    border-style: solid;
    /* currentColor picks up whatever background-color the button has */
    border-color: transparent transparent transparent currentColor;
}

.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
   =========================================================================
   v1.1.0: hardcoded color removed from .pic-card__inquiry.
   The default color (#1a73e8) is now set via the Elementor
   inquiry_text_color control default, making it fully overridable
   without any CSS specificity fights.
   Hover transition added for the new inquiry_text_hover_color control.
   ========================================================================= */

.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 intentionally omitted – set by Elementor inquiry_text_color control */
    white-space: nowrap;
    transition:  color var(--pic-transition-fast);
}

/* =========================================================================
   7. Quick Call Button
   =========================================================================
   v1.1.0: border changed from `none` to `0 solid transparent` so that
   Elementor border-width + border-color controls activate immediately
   without the user needing to fight specificity.
   background-color and color remain as CSS-var fallbacks; Elementor
   selectors override them on first paint.
   ========================================================================= */

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

.pic-card__btn {
    display:          inline-flex;
    align-items:      center;
    gap:              6px;
    padding:          9px 20px;  /* fallback; overridden by Elementor button_padding */
    background-color: var(--pic-color-primary);
    color:            var(--pic-color-white);
    font-size:        var(--pic-font-size-btn);
    font-weight:      600;
    border:           0 solid transparent; /* transparent border: ready for Elementor controls */
    border-radius:    var(--pic-radius-btn);
    cursor:           pointer;
    white-space:      nowrap;
    letter-spacing:   0.01em;
    transition:       background-color var(--pic-transition-fast),
                      color            var(--pic-transition-fast),
                      border-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);

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

.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 {
    position:         fixed;
    inset:            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;

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

.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;

    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
   ========================================================================= */

.pic-scroll-locked {
    overflow: hidden !important;
}

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

@media (max-width: 767px) {

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

    .pic-popover {
        display: none !important;
    }

    /* Floating button right fallback on mobile
       (overridden by Elementor specs_btn_offset_horizontal mobile_default) */
    .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;
    }
}

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