/*** TEMPLATE PREVIEW POPUP - shared between the landing page (home.html) and
     the Vue Templates page (src/views/TemplatesPage.vue). Loaded as a plain
     script (public/js/template-preview-popup.js) by both, so there is a
     single implementation instead of one per surface. Not used by the
     in-app template pickers (form-builder), where selecting a template is
     still immediate. ***/

body.tpl-preview-open {
    overflow: hidden;
}

.tpl-preview-overlay {
    direction: rtl;
    position: fixed;
    inset: 0;
    z-index: 10050;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    box-sizing: border-box;
    background: rgba(49, 49, 49, .55);
    animation: tpl-preview-fade-in .2s ease;
}

.tpl-preview-overlay[hidden] {
    display: none;
}

.tpl-preview {
    position: relative;
    width: 100%;
    max-width: 1100px;
    max-height: 88vh;
    display: flex;
    flex-flow: column;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .25);
    overflow: hidden;
}

.tpl-preview__close {
    position: absolute;
    top: 14px;
    /* inline-end (left in RTL) - sits above the details panel, clear of the
       media panel's tabs on the right (see templates_preview_b.png) */
    inset-inline-end: 14px;
    z-index: 2;
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 10px;
    background: rgba(255, 255, 255, .9);
    box-shadow: 0 2px 8px rgba(0, 0, 0, .12);
    color: #313131;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
}

.tpl-preview__close:hover {
    background: #fff;
}

.tpl-preview__body {
    display: flex;
    flex-flow: row;
    overflow: hidden;
    min-height: 0;
}

/* media (right side in RTL - first in DOM) */
.tpl-preview__media {
    flex: 0 0 52%;
    display: flex;
    flex-flow: column;
    background: #F7F2F9;
    min-width: 0;
}

/* tabs (start / right in RTL) + device toggle (end / left in RTL) share one row */
.tpl-preview__media-header {
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    gap: 8px;
    padding: 16px 16px 0;
    flex-shrink: 0;
}

.tpl-preview__media-header[hidden] {
    display: none;
}

.tpl-preview__tabs {
    display: flex;
    flex-flow: row;
    gap: 8px;
}

.tpl-preview__tabs[hidden] {
    display: none;
}

.tpl-preview__devices {
    display: flex;
    flex-flow: row;
    gap: 6px;
    margin-inline-start: auto;
}

.tpl-preview__devices[hidden] {
    display: none;
}

.tpl-preview__device {
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid #D8D8D8;
    border-radius: 8px;
    background: #fff;
    color: #313131;
    cursor: pointer;
    transition: border-color .2s, opacity .2s;
}

.tpl-preview__device:hover:not(:disabled) {
    border-color: #90C148;
}

/* inset shadow thickens the border without shifting the icon by a pixel */
.tpl-preview__device--active {
    border-color: #90C148;
    box-shadow: inset 0 0 0 1px #90C148;
}

/* fill-preview only - stays visible on the PDF tab, just inert */
.tpl-preview__device:disabled {
    opacity: .4;
    cursor: not-allowed;
}

.tpl-preview__tab {
    padding: 6px 16px;
    border: 1px solid #D8D8D8;
    border-radius: 20px;
    background: #fff;
    color: #313131;
    font-family: inherit;
    font-size: 13px;
    font-weight: bold;
    cursor: pointer;
    transition: border-color .2s, background-color .2s, color .2s;
}

.tpl-preview__tab--active {
    border-color: #90C148;
    background: #90C148;
}

.tpl-preview__image-wrap {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    min-height: 220px;
}

.tpl-preview__image {
    max-width: 100%;
    max-height: 100%;
    border-radius: 8px;
    box-shadow: 0 4px 18px rgba(0, 0, 0, .12);
    object-fit: contain;
}

.tpl-preview__image[hidden] {
    display: none;
}

/* shown instead of the image when a template has none of its preview
   images set (or one fails to load) - same idea as the cards' own
   colored-initial fallback, so the media panel is never just blank */
.tpl-preview__placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 100%;
    max-height: 100%;
    /* matches the fill/pdf preview crop ratio (650x587), so the "no image"
       state reads as an empty photo slot instead of a wide flat bar */
    aspect-ratio: 650 / 587;
    min-height: 220px;
    border-radius: 8px;
    background: var(--thumb-color, #EFE3EF);
    color: #4E2053;
    font-size: 64px;
    font-weight: bold;
    line-height: 1;
    opacity: .55;
}

.tpl-preview__placeholder[hidden] {
    display: none;
}

/* details (left side in RTL - second in DOM) */
.tpl-preview__details {
    flex: 1 1 auto;
    display: flex;
    flex-flow: column;
    padding: 56px 28px 28px;
    overflow-y: auto;
    min-width: 0;
}

.tpl-preview__title {
    margin: 0 0 10px;
    font-size: 22px;
    font-weight: bold;
    line-height: 1.3;
    color: #4E2053;
}

.tpl-preview__badges {
    display: flex;
    flex-flow: row wrap;
    gap: 6px;
    margin-bottom: 14px;
}

.tpl-preview__badges[hidden] {
    display: none;
}

.tpl-preview__badge {
    padding: 2px 10px;
    border-radius: 12px;
    background: #F0F0F0;
    font-size: 13px;
    line-height: 20px;
    color: #4E2053;
}

.tpl-preview__type-row {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
}

.tpl-preview__type-row[hidden] {
    display: none;
}

.tpl-preview__type-text {
    font-size: 14px;
    color: #555;
}

.tpl-preview__type-info-wrap {
    position: relative;
    display: inline-flex;
}

.tpl-preview__type-info {
    width: 20px;
    height: 20px;
    border: none;
    border-radius: 50%;
    background: #EFE3EF;
    color: #4E2053;
    font-size: 12px;
    font-weight: bold;
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.tpl-preview__tooltip {
    position: absolute;
    top: 26px;
    inset-inline-start: 0;
    z-index: 3;
    width: 260px;
    padding: 12px 14px;
    border-radius: 10px;
    background: #313131;
    color: #fff;
    font-size: 13px;
    line-height: 1.5;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .2);
}

.tpl-preview__tooltip[hidden] {
    display: none;
}

.tpl-preview__desc {
    margin: 0 0 6px;
    font-size: 15px;
    line-height: 1.6;
    color: #313131;
}

.tpl-preview__desc--clamped {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.tpl-preview__actions {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: auto;
    padding-top: 20px;
}

.tpl-preview__cta {
    flex: 0 0 auto;
    padding: 13px 28px;
    border: none;
    border-radius: 10px;
    background: #90C148;
    color: #313131;
    font-family: inherit;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    transition: background-color .2s;
}

.tpl-preview__cta:hover {
    background: #446E0C;
    color: #fff;
}

.tpl-preview__menu {
    position: relative;
    flex: 0 0 auto;
}

.tpl-preview__menu[hidden] {
    display: none;
}

.tpl-preview__menu-toggle {
    width: 44px;
    height: 44px;
    border: 1px solid #D8D8D8;
    border-radius: 10px;
    background: #fff;
    color: #313131;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
}

.tpl-preview__menu-toggle:hover {
    border-color: #90C148;
}

.tpl-preview__menu-list {
    position: absolute;
    bottom: calc(100% + 8px);
    inset-inline-end: 0;
    z-index: 3;
    min-width: 160px;
    padding: 6px;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .18);
}

.tpl-preview__menu-list[hidden] {
    display: none;
}

.tpl-preview__menu-item {
    display: block;
    width: 100%;
    padding: 10px 12px;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: #313131;
    font-family: inherit;
    font-size: 14px;
    text-align: start;
    cursor: pointer;
}

.tpl-preview__menu-item[hidden] {
    display: none;
}

.tpl-preview__menu-item:hover {
    background: #F7F2F9;
}

.tpl-preview__toast {
    position: absolute;
    bottom: calc(100% + 8px);
    inset-inline-start: 0;
    padding: 6px 12px;
    border-radius: 8px;
    background: #313131;
    color: #fff;
    font-size: 12px;
    animation: tpl-preview-fade-in .15s ease;
}

.tpl-preview__toast[hidden] {
    display: none;
}

@keyframes tpl-preview-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* mobile: slide-up sheet instead of a centered modal */
@media screen and (max-width: 730px) {
    .tpl-preview-overlay {
        align-items: flex-end;
        justify-content: stretch;
        padding: 0;
    }

    .tpl-preview {
        max-width: 100%;
        max-height: 92vh;
        border-radius: 16px 16px 0 0;
        animation: tpl-preview-slide-up .28s ease;
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }

    .tpl-preview__body {
        flex-flow: column;
        overflow-y: auto;
    }

    .tpl-preview__media {
        flex: 0 0 auto;
    }

    .tpl-preview__tab {
        font-size: 13px;
    }

    .tpl-preview__device {
        width: 36px;
        height: 36px;
    }

    /* stacked layout puts the media panel on top, so the close button
       (top / inline-end corner) would sit right on the device toggle -
       reserve its 36px + 12px offset plus a little gap */
    .tpl-preview__media-header {
        padding-inline-end: 56px;
    }

    .tpl-preview__image-wrap {
        padding: 12px 16px;
        min-height: 160px;
        /* lets the image grow into extra vertical space instead of always
           sitting at a fixed height, while still leaving room below for the
           details panel + actions */
        max-height: 45vh;
    }

    .tpl-preview__image {
        max-height: 45vh;
    }

    .tpl-preview__placeholder {
        min-height: 160px;
        max-height: 45vh;
        font-size: 48px;
    }

    .tpl-preview__details {
        padding: 52px 20px 24px;
        overflow-y: visible;
    }

    .tpl-preview__close {
        top: 12px;
        inset-inline-end: 12px;
    }

    /* a full-width primary action reads better as a bottom action bar on
       mobile - matches .fixed-btn in MobilePopup.vue */
    .tpl-preview__cta {
        flex: 1 1 auto;
    }
}

@keyframes tpl-preview-slide-up {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    .tpl-preview-overlay,
    .tpl-preview {
        animation: none;
    }
}