/*
 * Shared "How E-Puja Works" video CTA trust bar + "Why e-Puja" answer
 * card + video modal. Used by both services/show.blade.php (individual
 * puja page) and services/index.blade.php (e-puja listing page).
 * Extracted verbatim from the original show.blade.php inline styles —
 * page-specific tweaks (card width, extra stat rows, etc.) live in each
 * page's own pages/*.css file, loaded after this one.
 */

        /* ═══════════════════════════════════════════════════════════════════
           VCTA TRUST BAR
           3 responsive sizes — content always stays in ONE row
           SIZE 1  ≥ 1100px  : full — title + button | G 4.9 (review text) | label + avatars
           SIZE 2  576–1099px: title + button | G 4.9  | avatars + arrow (no text labels)
           SIZE 3  < 576px   : 2 rows — heading on top, then button | G 4.9 | avatars
           ═══════════════════════════════════════════════════════════════════ */

        /* ── Outer card ── */
        .vcta-bar {
            background: linear-gradient(135deg, #ddeeff 0%, #e8f4ff 100%);
            border: 1px solid rgba(99, 170, 230, 0.22);
            border-radius: 18px;
            padding: 10px;
            overflow: hidden;
        }

        /* ── Inner flex row ── */
        .vcta-inner {
            display: flex;
            align-items: center;
            gap: 0;
            min-height: 64px;
        }

        /* ── Each column: equal flex distribution ── */
        .vcta-col {
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 0 20px;
            flex: 1 1 0;
            min-width: 0;
        }

        /* ── Thin separator ── */
        .vcta-sep {
            width: 1px;
            height: 36px;
            background: rgba(26, 43, 60, 0.15);
            flex-shrink: 0;
            border-radius: 1px;
        }

        /* ── LEFT col ── */
        .vcta-col-left { flex: 1.4 1 0; }
        .vcta-pill {
            display: flex;
            align-items: center;
            gap: 12px;
            background: #ffffff;
            border-radius: 12px;
            padding: 10px 18px;
            width: 100%;
            box-shadow: 0 2px 8px rgba(0,0,0,0.07);
        }
        .vcta-pill-title {
            font-size: 0.92rem;
            font-weight: 800;
            color: #1a2b3c;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            flex: 1 1 auto;
            min-width: 0;
        }
        .vcta-watch-btn {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            background: #e65c00;
            color: #fff;
            font-size: 0.82rem;
            font-weight: 700;
            border: none;
            border-radius: 50px;
            padding: 7px 16px 7px 7px;
            cursor: pointer;
            white-space: nowrap;
            flex-shrink: 0;
            transition: opacity 0.18s, transform 0.15s;
        }
        .vcta-watch-btn:hover { opacity: 0.88; transform: translateY(-1px); }
        .vcta-play-icon {
            width: 26px;
            height: 26px;
            border-radius: 50%;
            background: #fff;
            color: #e65c00;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.65rem;
            flex-shrink: 0;
        }
        .vcta-watch-label { line-height: 1; }

        /* ── MID col: Google badge ── */
        .vcta-col-mid { flex: 1 1 0; }
        .vcta-col-mid .grb-badge {
            display: flex !important;
            align-items: center !important;
            background: transparent !important;
            border: none !important;
            box-shadow: none !important;
            padding: 0 !important;
            gap: 6px !important;
            text-decoration: none !important;
            color: inherit !important;
            cursor: pointer !important;
            transition: opacity 0.2s ease, transform 0.2s ease;
        }
        .vcta-col-mid .grb-badge:hover,
        .vcta-col-mid .grb-badge:focus {
            opacity: 0.82;
            text-decoration: none !important;
            color: inherit !important;
            transform: translateY(-1px);
        }

        /* ── RIGHT col ── */
        .vcta-col-right { flex: 1.4 1 0; gap: 10px; }
        .vcta-reviews-label {
            font-size: 0.84rem;
            font-weight: 600;
            color: #1a2b3c;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            flex-shrink: 1;
            min-width: 0;
        }
        .vcta-avatars-btn {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            background: none;
            border: none;
            padding: 0;
            cursor: pointer;
            flex-shrink: 0;
        }
        .vcta-avatar-stack { display: flex; align-items: center; }
        .vcta-avatar {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            object-fit: cover;
            border: 2.5px solid #fff;
            margin-left: -10px;
            box-shadow: 0 2px 5px rgba(0,0,0,0.14);
            transition: transform 0.18s;
        }
        .vcta-avatar:first-child { margin-left: 0; }
        .vcta-avatars-btn:hover .vcta-avatar { transform: translateY(-2px); }
        .vcta-arrow {
            width: 30px;
            height: 30px;
            border-radius: 50%;
            background: #e65c00;
            color: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.7rem;
            flex-shrink: 0;
            box-shadow: 0 3px 10px rgba(230,92,0,0.35);
            transition: transform 0.15s;
        }
        .vcta-avatars-btn:hover .vcta-arrow { transform: scale(1.1); }

        /* ── Mobile-only heading (hidden on desktop/tablet) ── */
        .vcta-heading { display: none; }

        /* ════════════════════════════════════════════════════════════
           SIZE 2: 576px – 1099px — hide text labels, keep 1 row
           ════════════════════════════════════════════════════════════ */
        @media (min-width: 576px) and (max-width: 1099.98px) {
            .vcta-bar   { padding: 8px; border-radius: 16px; }
            .vcta-inner { min-height: 56px; }
            .vcta-col   { padding: 0 14px; }
            .vcta-pill       { padding: 8px 10px; gap: 0; background: transparent; box-shadow: none; }
            .vcta-pill-title { display: none; }
            .vcta-watch-btn  { font-size: 0.8rem; padding: 7px 14px 7px 7px; }
            .vcta-play-icon  { width: 24px; height: 24px; }
            .vcta-col-mid .grb-count { display: none !important; }
            .vcta-reviews-label { display: none; }
            .vcta-avatar  { width: 34px; height: 34px; margin-left: -9px; }
            .vcta-arrow   { width: 28px; height: 28px; font-size: 0.66rem; }
            .vcta-sep     { height: 30px; }
        }

        /* ════════════════════════════════════════════════════════════
           SIZE 3: < 576px — heading top row + button | G 4.9★ | avatars
           ════════════════════════════════════════════════════════════ */
        @media (max-width: 575.98px) {
            .vcta-bar {
                padding: 12px 10px 10px;
                border-radius: 14px;
                display: flex;
                flex-direction: column;
                gap: 10px;
            }
            .vcta-heading {
                display: block;
                font-size: 0.95rem;
                font-weight: 800;
                color: #1a2b3c;
                text-align: center;
                line-height: 1.3;
                padding: 0 4px;
            }
            .vcta-inner {
                min-height: 44px;
                justify-content: space-evenly;
                gap: 0;
            }
            .vcta-col {
                padding: 0 4px;
                flex: 0 0 auto;
                min-width: 0;
            }
            .vcta-col-left  { flex: 0 0 auto; }
            .vcta-col-mid   { flex: 0 0 auto; }
            .vcta-col-right { flex: 0 0 auto; }

            .vcta-pill        { padding: 0; gap: 0; background: transparent; box-shadow: none; width: auto; }
            .vcta-pill-title  { display: none; }
            .vcta-watch-btn   { font-size: 0.74rem; padding: 6px 11px 6px 6px; gap: 5px; }
            .vcta-play-icon   { width: 22px; height: 22px; font-size: 0.58rem; }
            .vcta-col-mid .grb-count       { display: none !important; }
            .vcta-col-mid .grb-google-icon { width: 16px !important; height: 16px !important; }
            .vcta-col-mid .grb-rating      { font-size: 0.8rem !important; }
            .vcta-reviews-label { display: none; }
            .vcta-avatar  { width: 26px; height: 26px; margin-left: -7px; border-width: 2px; }
            .vcta-avatar:nth-child(n+4) { display: none; }
            .vcta-arrow   { width: 22px; height: 22px; font-size: 0.55rem; }
            .vcta-avatars-btn { gap: 4px; }
            .vcta-sep     { height: 24px; margin: 0 2px; }
        }

        @media (max-width: 460px) {
            .vcta-bar {
                padding: 10px 6px 8px;
                gap: 8px;
            }
            .vcta-heading {
                font-size: 0.88rem;
            }
            .vcta-inner {
                justify-content: space-between;
            }
            .vcta-col {
                padding: 0 2px;
            }
            .vcta-watch-btn {
                font-size: 0.72rem;
                padding: 5px 9px 5px 5px;
                gap: 4px;
            }
            .vcta-play-icon {
                width: 20px;
                height: 20px;
                font-size: 0.52rem;
            }
            .vcta-col-mid .grb-rating {
                font-size: 0.76rem !important;
            }
            .vcta-col-mid .grb-google-icon {
                width: 15px !important;
                height: 15px !important;
            }
            .vcta-avatar {
                width: 23px;
                height: 23px;
                margin-left: -6px;
            }
            .vcta-arrow {
                width: 20px;
                height: 20px;
                font-size: 0.5rem;
            }
        }

        /* \u2500\u2500 Video Modal \u2500\u2500 */
        .video-modal-overlay {
            display: none;
            position: fixed;
            inset: 0;
            background: rgba(20, 10, 5, 0.82);
            z-index: 10001;
            align-items: center;
            justify-content: center;
            padding: 20px;
        }
        .video-modal-overlay.open { display: flex; }
        .video-modal-box {
            position: relative;
            width: 100%;
            max-width: 800px;
            background: #111;
            border-radius: 14px;
            padding: 14px;
            box-shadow: 0 20px 60px rgba(0,0,0,0.5);
        }
        .video-modal-close {
            position: absolute;
            top: -14px;
            right: -14px;
            width: 34px;
            height: 34px;
            border-radius: 50%;
            background: #fff;
            color: #333;
            border: none;
            box-shadow: 0 4px 12px rgba(0,0,0,0.3);
            cursor: pointer;
            font-size: 0.9rem;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .video-modal-nav {
            display: none;
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background: rgba(255,255,255,0.9);
            color: #333;
            border: none;
            cursor: pointer;
            font-size: 1rem;
            z-index: 1;
            align-items: center;
            justify-content: center;
        }
        .video-modal-overlay.carousel-mode .video-modal-nav { display: flex; }
        .video-modal-prev { left: -20px; }
        .video-modal-next { right: -20px; }
        .video-modal-title {
            color: #fff;
            font-size: 0.95rem;
            font-weight: 600;
            margin: 4px 4px 10px;
        }
        .video-modal-frame-wrap {
            position: relative;
            width: 100%;
            padding-top: 56.25%;
            border-radius: 10px;
            overflow: hidden;
        }
        .video-modal-frame-wrap iframe {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
        }

        /* \u2500\u2500 Why e-Puja - decorative invitation-style card \u2500\u2500 */
        .why-puja-card {
            position: relative;
            max-width: 420px;
            margin: 0 auto;
            padding: 14px 20px;
            background: #fffdf8;
            border: 1px solid #ecd3ac;
            border-radius: 4px;
        }
        .why-puja-card::before {
            content: "";
            position: absolute;
            inset: 6px;
            border: 1px dashed #ecd3ac;
            pointer-events: none;
        }
        .why-puja-corner {
            position: absolute;
            width: 20px;
            height: 20px;
            border: 2px solid #f37420;
        }
        .why-puja-corner-tl { top: -2px; left: -2px; border-right: none; border-bottom: none; }
        .why-puja-corner-tr { top: -2px; right: -2px; border-left: none; border-bottom: none; }
        .why-puja-corner-bl { bottom: -2px; left: -2px; border-right: none; border-top: none; }
        .why-puja-corner-br { bottom: -2px; right: -2px; border-left: none; border-top: none; }
        .why-puja-inner {
            position: relative;
            text-align: center;
            padding: 4px;
        }
        .why-puja-icon {
            color: #f37420;
            font-size: 1.1rem;
            margin-bottom: 4px;
        }
        .why-puja-title {
            font-weight: 700;
            color: #7a3b00;
            font-size: 0.92rem;
            text-transform: uppercase;
            letter-spacing: 0.6px;
            margin-bottom: 6px;
        }
        .why-puja-divider {
            width: 40px;
            height: 2px;
            background: #f37420;
            margin: 0 auto 8px;
        }
        .why-puja-stat {
            font-size: 1.3rem;
            font-weight: 800;
            color: #f37420;
            margin-bottom: 4px;
        }
        .why-puja-text {
            font-size: 0.8rem;
            color: #6b5847;
            line-height: 1.4;
        }