/* =========================================================
   DETAILINFO PRODUCT INFORMATION
   ========================================================= */

.detailinfo-section {
    position: relative;
    overflow: hidden;
}

.detailinfo-section::before {
    content: "";
    position: absolute;
    width: 420px;
    height: 420px;
    top: -260px;
    right: -180px;
    border-radius: 50%;
    background: radial-gradient(
        circle,
        rgba(var(--bs-primary-rgb), 0.13),
        transparent 68%
    );
    pointer-events: none;
}

.detailinfo-shell {
    position: relative;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 1.35rem;
    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.055),
            rgba(255, 255, 255, 0.015)
        );
    overflow: hidden;
}

.detailinfo-shell::before {
    content: "";
    position: absolute;
    top: 0;
    left: 2rem;
    width: 85px;
    height: 4px;
    background: var(--bs-primary);
    border-radius: 0 0 10px 10px;
}


/* =========================================================
   MAIN PANELS
   ========================================================= */

.detailinfo-panel {
    height: 100%;
    padding: clamp(1.5rem, 3vw, 2.5rem);

    display: flex;
    flex-direction: column;
}

.detailinfo-panel-border {
    border-left: 1px solid rgba(255, 255, 255, 0.1);
}


/* =========================================================
   TOP LABELS
   ========================================================= */

.detailinfo-eyebrow {
    min-height: 24px;
    width: 100%;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 0.45rem;

    margin-top: 0;
    margin-bottom: 0.85rem;

    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;

    text-align: center;
}


/* =========================================================
   HEADINGS + COPY
   ========================================================= */

.detailinfo-heading {
    font-family: "Oswald", sans-serif;

    font-size: clamp(1.4rem, 2.5vw, 2rem);

    line-height: 1.15;

    margin-top: 0;
    margin-bottom: 1rem;

    text-align: center;
}

.detailinfo-copy {
    color: rgba(255, 255, 255, 0.72);

    line-height: 1.75;

    margin-bottom: 0;
}


/* =========================================================
   PACKAGE CONTENTS
   ========================================================= */

.detailinfo-package {
    background: rgba(0, 0, 0, 0.1);
}

.detailinfo-package-main {
    padding-bottom: 1.4rem;
    margin-bottom: 1.4rem;

    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.detailinfo-package-title {
    font-family: "Oswald", sans-serif;

    font-size: 1.2rem;

    margin-top: 0;
    margin-bottom: 0.75rem;

    text-align: center;
}

.detailinfo-primary-format {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    gap: 0.5rem;

    padding: 0.45rem 0.75rem;

    margin-top: 0.85rem;

    border-radius: 999px;

    background: rgba(var(--bs-primary-rgb), 0.12);

    border: 1px solid rgba(var(--bs-primary-rgb), 0.24);

    font-size: 0.85rem;
    font-weight: 600;
}


/* =========================================================
   ADDITIONAL FORMATS
   ========================================================= */

.detailinfo-format-list {
    margin: 0;
    padding: 0;

    list-style: none;

    text-align: center;
}

.detailinfo-format-list li {
    padding: 0.65rem 0;

    color: rgba(255, 255, 255, 0.72);

    line-height: 1.5;
}

.detailinfo-format-list li + li {
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.detailinfo-format-list strong {
    display: block;

    color: #fff;

    margin-bottom: 0.12rem;
}


/* =========================================================
   APPLICATION + FORMAT GROUPS
   ========================================================= */

.detailinfo-icon-group {
    width: 100%;

    text-align: center;
}

.detailinfo-icon-group + .detailinfo-icon-group {
    margin-top: 2rem;
}

.detailinfo-icon-title {
    font-family: "Oswald", sans-serif;

    font-size: 1.05rem;

    margin-top: 0;
    margin-bottom: 0.9rem;

    text-align: center;
}


/* =========================================================
   CENTERED ICON GRID
   ========================================================= */

.detailinfo-icon-grid {
    width: 100%;

    display: flex;
    flex-wrap: wrap;

    justify-content: center;
    align-items: center;

    gap: 0.75rem;
}


/* =========================================================
   CLICKABLE ICON BUTTONS
   ========================================================= */

.detailinfo-info-trigger {
    width: 58px;
    height: 58px;

    padding: 0;

    position: relative;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    border: 1px solid rgba(255, 255, 255, 0.13);

    border-radius: 0.85rem;

    background: rgba(255, 255, 255, 0.035);

    cursor: pointer;

    transition:
        transform 0.18s ease,
        border-color 0.18s ease,
        background-color 0.18s ease,
        box-shadow 0.18s ease;
}

.detailinfo-info-trigger:hover,
.detailinfo-info-trigger:focus {
    transform: translateY(-3px);

    border-color: rgba(255, 255, 255, 0.35);

    background: rgba(255, 255, 255, 0.075);

    box-shadow:
        0 0.8rem 1.5rem rgba(0, 0, 0, 0.18);
}


/* =========================================================
   BLACK INFORMATION BADGE
   ========================================================= */

.detailinfo-info-trigger::after {
    content: "i";

    position: absolute;

    width: 19px;
    height: 19px;

    right: -6px;
    top: -6px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: #000;

    border: 1px solid #fff;

    color: #fff;

    font-family: Arial, sans-serif;

    font-size: 0.68rem;
    font-weight: 700;

    line-height: 1;

    box-shadow:
        0 2px 5px rgba(0, 0, 0, 0.35);
}


/* =========================================================
   ICON IMAGES
   ========================================================= */

.detailinfo-info-trigger img {
    width: 32px;
    height: 32px;

    display: block;

    object-fit: contain;

    margin: 0 auto;
}

.detailinfo-icon-help {
    margin-top: 0.9rem;

    color: rgba(255, 255, 255, 0.5);

    font-size: 0.78rem;

    text-align: center;
}


/* =========================================================
   MODAL
   ========================================================= */

.detailinfo-modal-content {
    overflow: hidden;

    border: 1px solid rgba(255, 255, 255, 0.14);

    border-radius: 1rem;
}

.detailinfo-modal-header {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.detailinfo-modal-icon {
    width: 54px;
    height: 54px;

    object-fit: contain;

    padding: 0.4rem;

    border: 1px solid rgba(255, 255, 255, 0.1);

    border-radius: 0.75rem;

    background: rgba(255, 255, 255, 0.04);
}

.detailinfo-modal-title {
    font-family: "Oswald", sans-serif;
}

.detailinfo-modal-description {
    line-height: 1.7;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 991.98px) {

    .detailinfo-panel-border {
        border-left: 0;

        border-top:
            1px solid rgba(255, 255, 255, 0.1);
    }

    .detailinfo-shell::before {
        left: 1.5rem;
    }

}


@media (max-width: 767.98px) {

    .detailinfo-shell {
        border-radius: 1rem;
    }

    .detailinfo-panel {
        padding: 1.4rem;
    }

    .detailinfo-icon-grid {
        gap: 0.65rem;
    }

    .detailinfo-info-trigger {
        width: 54px;
        height: 54px;
    }

}
</style>


<!-- =========================================================
     PRODUCT INFORMATION SECTION
     ========================================================= -->

<section class="detailinfo-section py-4 py-lg-5">

    <div class="container">

        <div class="detailinfo-shell">

            <div class="row g-0 align-items-stretch">


                <!-- =================================================
                     COLUMN 1
                     SCALABLE VECTOR ARTWORK
                     ================================================= -->

                <div class="col-lg-4">

                    <div class="detailinfo-panel">


                        <div class="detailinfo-eyebrow text-primary">

                            <i class="bi bi-bezier2"></i>

                            Scalable Vector Artwork

                        </div>


                        <h3 class="detailinfo-heading text-white">

                            Resize Without Losing Quality

                        </h3>


                        <p class="detailinfo-copy">

                            Our vector patterns allow you to enlarge each image
                            as much as needed while maintaining clean, sharp
                            artwork.

                            Open the files in compatible Adobe or Affinity
                            applications to create additional effects,
                            textures and custom variations for your next
                            design.

                        </p>


                    </div>

                </div>



                <!-- =================================================
                     COLUMN 2
                     PACKAGE CONTENTS
                     ================================================= -->

                <div class="col-lg-4">

                    <div
                        class="
                            detailinfo-panel
                            detailinfo-panel-border
                            detailinfo-package
                            text-center
                        ">


                        <div class="detailinfo-eyebrow text-primary">

                            <i class="bi bi-box-seam"></i>

                            Package Contents

                        </div>


                        <div class="detailinfo-package-main">


                            <h3 class="detailinfo-heading text-white">

                                Included in This Package

                            </h3>


                            <p class="detailinfo-copy">

                                A high-resolution vector image supplied
                                in EPS format for flexible professional
                                editing.

                            </p>


                            <div class="detailinfo-primary-format">

                                <i class="bi bi-file-earmark-vector"></i>

                                Primary File: EPS Vector

                            </div>


                        </div>



                        <h4 class="detailinfo-package-title text-white">

                            Additional Formats

                        </h4>



                        <ul class="detailinfo-format-list">


                            <li>

                                <strong>
                                    PDF Format
                                </strong>

                                Adobe Acrobat compatible document.

                            </li>


                            <li>

                                <strong>
                                    AI Format
                                </strong>

                                Adobe Illustrator vector artwork.

                            </li>


                            <li>

                                <strong>
                                    JPG Format
                                </strong>

                                Raster preview supplied at
                                2048 pixels wide.

                            </li>


                        </ul>


                    </div>

                </div>



                <!-- =================================================
                     COLUMN 3
                     COMPATIBILITY + FILES
                     ================================================= -->

                <div class="col-lg-4">

                    <div
                        class="
                            detailinfo-panel
                            detailinfo-panel-border
                        ">


                        <!-- =========================================
                             EDIT WITH
                             ========================================= -->

                        <div class="detailinfo-icon-group">


                            <div class="detailinfo-eyebrow text-primary">

                                <i class="bi bi-pencil-square"></i>

                                Compatibility

                            </div>


                            <h3 class="detailinfo-heading text-white">

                                Edit With

                            </h3>


                            <div class="detailinfo-icon-grid">


                                <!-- Adobe Illustrator -->

                                <button
                                    type="button"
                                    class="detailinfo-info-trigger"

                                    data-bs-toggle="modal"

                                    data-bs-target="#detailinfoInfoModal"

                                    data-detailinfo-title="Adobe Illustrator"

                                    data-detailinfo-image="images/application-icons/adobe-illustrator-logo.webp"

                                    data-detailinfo-description="Adobe Illustrator is a professional vector graphics application. Use it to edit paths, colors, shapes, patterns, scale and other vector properties contained in the artwork."

                                    aria-label="Learn more about Adobe Illustrator">

                                    <img
                                        src="images/application-icons/adobe-illustrator-logo.webp"
                                        alt="Adobe Illustrator">

                                </button>



                                <!-- Affinity Designer -->

                                <button
                                    type="button"
                                    class="detailinfo-info-trigger"

                                    data-bs-toggle="modal"

                                    data-bs-target="#detailinfoInfoModal"

                                    data-detailinfo-title="Affinity Designer"

                                    data-detailinfo-image="images/application-icons/affinity-designer-logo.webp"

                                    data-detailinfo-description="Affinity Designer supports professional vector editing and can be used to resize, modify, recolor and customize compatible vector artwork."

                                    aria-label="Learn more about Affinity Designer">

                                    <img
                                        src="images/application-icons/affinity-designer-logo.webp"
                                        alt="Affinity Designer">

                                </button>



                                <!-- GraphicConverter -->

                                <button
                                    type="button"
                                    class="detailinfo-info-trigger"

                                    data-bs-toggle="modal"

                                    data-bs-target="#detailinfoInfoModal"

                                    data-detailinfo-title="GraphicConverter"

                                    data-detailinfo-image="images/application-icons/graphic-converter-logo.webp"

                                    data-detailinfo-description="GraphicConverter provides image conversion and editing tools for working with a wide variety of graphic file formats."

                                    aria-label="Learn more about GraphicConverter">

                                    <img
                                        src="images/application-icons/graphic-converter-logo.webp"
                                        alt="GraphicConverter">

                                </button>


                            </div>


                            <div class="detailinfo-icon-help">

                                Click an application icon for more information.

                            </div>


                        </div>



                        <!-- =========================================
                             FORMATS INCLUDED
                             ========================================= -->

                        <div class="detailinfo-icon-group">


                            <div class="detailinfo-eyebrow text-primary">

                                <i class="bi bi-files"></i>

                                Files

                            </div>


                            <h3 class="detailinfo-icon-title text-white">

                                Formats Included

                            </h3>


                            <div class="detailinfo-icon-grid">



                                <!-- AI FORMAT -->

                                <button
                                    type="button"
                                    class="detailinfo-info-trigger"

                                    data-bs-toggle="modal"

                                    data-bs-target="#detailinfoInfoModal"

                                    data-detailinfo-title="AI — Adobe Illustrator"

                                    data-detailinfo-image="images/file-format-icons/ai-format-logo.webp"

                                    data-detailinfo-description="AI is Adobe Illustrator's native vector file format. It preserves editable vector paths, shapes and other Illustrator-specific information."

                                    aria-label="Learn more about AI format">

                                    <img
                                        src="images/file-format-icons/ai-format-logo.webp"
                                        alt="AI">

                                </button>



                                <!-- EPS FORMAT -->

                                <button
                                    type="button"
                                    class="detailinfo-info-trigger"

                                    data-bs-toggle="modal"

                                    data-bs-target="#detailinfoInfoModal"

                                    data-detailinfo-title="EPS — Encapsulated PostScript"

                                    data-detailinfo-image="images/file-format-icons/eps-format-logo.webp"

                                    data-detailinfo-description="EPS is a widely supported professional vector format suitable for scalable graphics, print production and importing artwork into many design applications."

                                    aria-label="Learn more about EPS format">

                                    <img
                                        src="images/file-format-icons/eps-format-logo.webp"
                                        alt="EPS">

                                </button>



                                <!-- JPG FORMAT -->

                                <button
                                    type="button"
                                    class="detailinfo-info-trigger"

                                    data-bs-toggle="modal"

                                    data-bs-target="#detailinfoInfoModal"

                                    data-detailinfo-title="JPG — JPEG Image"

                                    data-detailinfo-image="images/file-format-icons/jpg-format-logo.webp"

                                    data-detailinfo-description="JPG is a widely supported raster image format. This package includes a 2048-pixel-wide JPG for quick previews and applications that do not require editable vectors."

                                    aria-label="Learn more about JPG format">

                                    <img
                                        src="images/file-format-icons/jpg-format-logo.webp"
                                        alt="JPG">

                                </button>



                                <!-- PDF FORMAT -->

                                <button
                                    type="button"
                                    class="detailinfo-info-trigger"

                                    data-bs-toggle="modal"

                                    data-bs-target="#detailinfoInfoModal"

                                    data-detailinfo-title="PDF — Portable Document Format"

                                    data-detailinfo-image="images/file-format-icons/pdf-format-logo.webp"

                                    data-detailinfo-description="PDF provides a highly portable document format that can be viewed in Adobe Acrobat and many other applications while maintaining consistent artwork presentation."

                                    aria-label="Learn more about PDF format">

                                    <img
                                        src="images/file-format-icons/pdf-format-logo.webp"
                                        alt="PDF">

                                </button>


                            </div>


                            <div class="detailinfo-icon-help">

                                Click a file-format icon to learn more.

                            </div>


                        </div>


                    </div>

                </div>


            </div>

        </div>

    </div>

</section>



<!-- =========================================================
     REUSABLE BOOTSTRAP INFORMATION MODAL
     ========================================================= -->

<div
    class="modal fade"
    id="detailinfoInfoModal"
    tabindex="-1"
    aria-labelledby="detailinfoInfoModalLabel"
    aria-hidden="true">


    <div class="modal-dialog modal-dialog-centered">


        <div
            class="
                modal-content
                detailinfo-modal-content
                bg-dark
                text-white
            ">


            <!-- MODAL HEADER -->

            <div
                class="
                    modal-header
                    detailinfo-modal-header
                ">


                <div class="d-flex align-items-center gap-3">


                    <img
                        id="detailinfoModalImage"
                        class="detailinfo-modal-icon"
                        src=""
                        alt="">


                    <h3
                        class="
                            modal-title
                            h5
                            detailinfo-modal-title
                            mb-0
                        "
                        id="detailinfoInfoModalLabel">
                    </h3>


                </div>



                <button
                    type="button"
                    class="btn-close btn-close-white"
                    data-bs-dismiss="modal"
                    aria-label="Close">
                </button>


            </div>



            <!-- MODAL BODY -->

            <div class="modal-body">


                <p
                    id="detailinfoModalDescription"
                    class="
                        detailinfo-modal-description
                        mb-0
                        text-white-50
                    ">
                </p>


            </div>



            <!-- MODAL FOOTER -->

            <div
                class="
                    modal-footer
                    border-0
                    pt-0
                ">


                <button
                    type="button"
                    class="btn btn-outline-light"
                    data-bs-dismiss="modal">

                    Close

                </button>


            </div>


        </div>

    </div>

</div>



<!-- =========================================================
     MODAL DATA CONTROLLER
     Requires Bootstrap 5 bootstrap.bundle.min.js
     ========================================================= -->

<script>
document.addEventListener(
    'DOMContentLoaded',
    function () {

        const detailinfoModal =
            document.getElementById(
                'detailinfoInfoModal'
            );


        if (!detailinfoModal) {
            return;
        }


        detailinfoModal.addEventListener(
            'show.bs.modal',
            function (event) {


                const trigger =
                    event.relatedTarget;


                if (!trigger) {
                    return;
                }


                const title =
                    trigger.getAttribute(
                        'data-detailinfo-title'
                    ) || '';


                const description =
                    trigger.getAttribute(
                        'data-detailinfo-description'
                    ) || '';


                const image =
                    trigger.getAttribute(
                        'data-detailinfo-image'
                    ) || '';


                const modalTitle =
                    detailinfoModal.querySelector(
                        '#detailinfoInfoModalLabel'
                    );


                const modalDescription =
                    detailinfoModal.querySelector(
                        '#detailinfoModalDescription'
                    );


                const modalImage =
                    detailinfoModal.querySelector(
                        '#detailinfoModalImage'
                    );


                modalTitle.textContent =
                    title.trim();


                modalDescription.textContent =
                    description.trim();


                modalImage.src =
                    image.trim();


                modalImage.alt =
                    title.trim();


            }
        );

    }
);
</style>