/* previewSizes.css - Preview dimensions for different types */

:root {
    --preview-scale: 2.5;  /* Adjusted scale for mobile-friendly size */
    --preview-base-width: 1080px;
}

/* HD Preview (1080x1920) - Mobile optimized */
.kilo-flyers-template-preview.hd-preview {
    width: calc(var(--preview-base-width) / var(--preview-scale));   /* 1080px / 2.5 = 432px */
    height: calc(1920px / var(--preview-scale)); /* Full calculated height */
    max-height: 600px; /* Maximum height limit */
    display: block;
    max-width: 90vw; /* Ensure it fits on mobile screens */
}

/* Post Preview (1080x1350) */
.kilo-flyers-template-preview.post-preview {
    width: calc(var(--preview-base-width) / var(--preview-scale));   /* 1080px / 2.5 = 432px */
    height: calc(1350px / var(--preview-scale));                     /* 1350px / 2.5 = 540px */
    display: inline-block;
}

/* Square Preview (1080x1080) */
.kilo-flyers-template-preview.square-preview {
    width: calc(var(--preview-base-width) / var(--preview-scale));   /* 1080px / 2.5 = 432px */
    height: calc(var(--preview-base-width) / var(--preview-scale));  /* 1080px / 2.5 = 432px */
    display: inline-block;
}

/* Banner Preview (1080x360) */
.kilo-flyers-template-preview.banner-preview {
    width: calc(var(--preview-base-width) / var(--preview-scale));   /* 1080px / 2.5 = 432px */
    height: calc(360px / var(--preview-scale));                      /* 360px / 2.5 = 144px */
    display: inline-block;
}

/* Preview container styles */
.kilo-flyers-template-preview {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border: 3px solid #ffffff; /* White outline for generated views */
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}

/* Preview image sizes - using the same dimensions as their containers */
.kilo-flyers-template-preview img.background,
.kilo-flyers-template-preview img.foreground {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Z-index for layers */
.kilo-flyers-template-preview img.background {
    z-index: 1;
}

.kilo-flyers-template-preview img.foreground {
    z-index: 3;
    pointer-events: none; /* Allow clicking through foreground to text layers */
}

/* Preview interaction styles */
.kilo-flyers-template-preview {
    position: relative;  /* Create stacking context for absolute children */
    overflow: hidden;    /* Contain the portrait */
    cursor: pointer;
    border: 2px solid transparent;
    transition: border-color 0.3s ease;
}

.kilo-flyers-template-preview.selected {
    border-color: white;
}

/* Client version - Only show HD preview */

/* Hide all preview types except HD */
.post-preview,
.square-preview,
.banner-preview {
    display: none !important;
}

/* Ensure HD preview is visible and centered */
.hd-preview {
    display: block !important;
    margin: 0 auto;
}

/* Hide editing tools popup */
.editing-tools-popup {
    display: none !important;
}

/* Adjust preview container for single preview */
.preview-container {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px 10px;
}

.preview {
    display: flex;
    justify-content: center;
    width: 100%;
}

/* Enable preview interactions for portrait and text layers */
.kilo-flyers-template-preview {
    pointer-events: auto; /* Enable interactions */
}

.kilo-flyers-template-preview img.preview-portrait {
    pointer-events: auto; /* Ensure portrait is interactive */
    z-index: 2; /* Between background and foreground */
}

/* Mobile responsive adjustments */
@media (max-width: 768px) {
    .kilo-flyers-template-preview.hd-preview {
        width: calc(var(--preview-base-width) / 3);   /* 1080px / 3 = 360px */
        height: calc(1920px / 3); /* Full calculated height */
        max-height: 600px;
        max-width: 85vw;
    }
    
    .preview-container {
        padding: 15px 5px;
    }
}

@media (max-width: 480px) {
    .kilo-flyers-template-preview.hd-preview {
        width: calc(var(--preview-base-width) / 3.5); /* 1080px / 3.5 = 308px */
        height: calc(1920px / 3.5); /* Full calculated height */
        max-height: 600px;
        max-width: 80vw;
    }
    
    .preview-container {
        padding: 10px 5px;
    }
}