<!DOCTYPE html>
<html lang="id">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Plossa Experience</title>

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="preload" href="/fonts/ColumbiaSerial-RegularItalic.ttf" as="font" type="font/ttf"
        crossorigin="anonymous">

    <style>
        @font-face {
            font-family: 'ColumbiaSerial';
            src: url('/fonts/ColumbiaSerial-RegularItalic.ttf') format('truetype');
            font-display: swap;
        }

        #previewHeading,
        #captureHeading,
        #previewSubtitle,
        #captureSubtitle {
            font-family: 'ColumbiaSerial', sans-serif !important;
            /* color: white !important; */
            text-shadow:
                -3px -3px 0 black,
                0px -3px 0 black,
                3px -3px 0 black,
                3px 0px 0 black,
                3px 3px 0 black,
                0px 3px 0 black,
                -3px 3px 0 black,
                -3px 0px 0 black;
        }


        #heading,
        #subtitle {
            font-family: 'ColumbiaSerial', sans-serif !important;
            color: white !important;
            -webkit-text-stroke: 2px black;
            font-size: 28px;
            font-weight: normal;
        }


        body {
            background-color: #f8f9fa;
        }

        .navbar-brand img {
            height: 40px;
        }

        .sticky-top-shadow {
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
            background-color: white;
            z-index: 1020;
        }

        .editor-sidebar {
            max-height: calc(100vh - 80px);
            /* viewport height dikurangi tinggi navbar */
            overflow-y: auto;
            padding-right: 10px;
        }

        #finalCaptureArea {
            width: 600px;
            height: 800px;
            position: relative;
        }

        /* Styling untuk menyesuaikan elemen di dalam modal */
        .modal-body {
            max-height: 500px;
            overflow-y: auto;
            /* Agar scroll bisa muncul jika konten terlalu banyak */
        }

        /* Styling untuk courier options */
        #dlvr-courier .row {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
        }

        #dlvr-courier .col-md-4 {
            width: 48%;
            /* Membuat kolom lebih kecil */
            margin-bottom: 10px;
        }

        #dlvr-courier label {
            padding: 12px;
            font-size: 14px;
            border-radius: 10px;
            transition: background-color 0.3s;
        }

        #dlvr-courier label:hover {
            background-color: #f8f9fa;
            /* Hover effect */
        }

        #dlvr-courier input[type="radio"]:checked+span {
            font-weight: bold;
            color: #28a745;
        }

        .btn-check:checked+label {
            border: 2px solid #198754 !important;
            /* hijau Bootstrap */
            box-shadow: 0 0 0 0.2rem rgba(25, 135, 84, 0.25);
        }

        .skeleton-box {
            background: linear-gradient(90deg, #e0e0e0 25%, #f8f8f8 50%, #e0e0e0 75%);
            background-size: 200% 100%;
            animation: shimmer 1.5s infinite;
        }

        @keyframes  shimmer {
            0% {
                background-position: 200% 0;
            }

            100% {
                background-position: -200% 0;
            }
        }

        .template-skeleton {
            width: 100px;
            height: 100px;
            border-radius: 6px;
            margin: 5px;
        }

        .preview-skeleton {
            width: 100%;
            height: 450px;
            border-radius: 10px;
            background-color: #e0e0e0;
        }

        .skeleton-text {
            height: 24px;
            width: 40%;
            margin: 10px 0;
            border-radius: 4px;
        }

        .fade-in {
            animation: fadeIn 0.4s ease-in forwards;
        }

        .fade-out {
            animation: fadeOut 0.2s ease-out forwards;
        }

        @keyframes  fadeIn {
            from {
                opacity: 0;
                transform: scale(0.98);
            }

            to {
                opacity: 1;
                transform: scale(1);
            }
        }

        @keyframes  fadeOut {
            from {
                opacity: 1;
                transform: scale(1);
            }

            to {
                opacity: 0;
                transform: scale(0.98);
            }
        }
    </style>
</head>

<body>

    <!-- Header: Logo -->
    <nav class="navbar navbar-light sticky-top sticky-top-shadow px-4">
        <a class="navbar-brand" href="/">
            <img src="<?php echo e(env('LOGO_IMG')); ?>" style="max-height: 20px" alt="Logo Plossa">
        </a>
    </nav>

    <!-- Main Content -->
    <main>
        <?php echo $__env->yieldContent('content'); ?>
    </main>

    <!-- Bootstrap JS -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

    <!-- Custom Page Scripts -->
    <?php echo $__env->yieldPushContent('scripts'); ?>

</body>

</html>
<?php /**PATH /home/plossayokesen/public_html/resources/views/layouts/app.blade.php ENDPATH**/ ?>