:root { 
    --accent: #1e3c72; 
    --panel-bg: #ffffff; 
    --view-bg: #2c3e50; 
}
        * { box-sizing: border-box; }
        body { 
            /*margin: 0; 
            font-family: 'Poppins', sans-serif; 
            background: #f0f2f5; 
            height: 100vh; 
            display: flex; 
            overflow: hidden; */
            margin: 0; 
            /*font-family: 'Poppins', sans-serif; */
            background: #f0f2f5; 
            /*height: 100vh; 
            width: 100vw;*/
            display: block;
             /* Desktop remains fixed */
        }
        
        /* Layout */
        .app-container { 
            /*display: flex; 
            width: 100vw;   /* Force full viewport width */
            height: 100vh;  /* Force full viewport height */
            /*overflow: hidden;*/
            display: flex; 
            width: 100%; 
            /*min-height: calc(100vh - 60px); /* Leaves space for footer height */
            align-items: stretch;
            gap:16px;
  padding:16px;
        }
        @media (max-width: 900px) { 
            .app-container { 
                flex-direction: column; 
            } 
            body { 
                overflow: auto; 
            } 
            .preview-pane { 
                /*min-height: 400px;
                /*max-height: 450px;*/
                padding: 10px;
                z-index: 10 !important;
                overflow: visible !important; /* Critical for mobile too */
                max-height: none; /* Let it grow if the dropdown opens */
            }
        }

        /* Left Side: Preview */
        .preview-pane { 
            /*flex: 1; 
            background: var(--view-bg); 
            display: flex; 
            flex-direction: column; 
            align-items: center; 
            justify-content: center; 
            padding: 40px; 
            position: relative; 
            min-height: 400px; */
            flex: 1; /* This pushes the controls-pane to the right */
            background: var(--view-bg); 
            display: flex; 
            flex-direction: column; 
            align-items: center; 
            justify-content: center; 
            padding: 40px; 
            position: relative; 
            min-height: 400px; 
            overflow: hidden; /* Prevents card from bleeding out */
            
            
        }
        .card-container { 
            position: relative; 
            z-index: 1; /* Lower than dropdowns */
        }
        .card { 
            width: 350px; 
            height: 200px; 
            background: #fff; 
            border-radius: 8px; 
            position: relative; 
            overflow: hidden; 
            box-shadow: 0 30px 60px rgba(0,0,0,0.4); 
            transform-origin: center;
        }
        .card.vertical { 
            width: 200px; 
            height: 350px; 
        }
        
        /* Elements Base Positioning */
        .card div, .card img { 
            position: absolute; 
            display: block; 
            border: 0px solid transparent; 
        }
        #p-logo-f, #p-logo-b { 
            width: 60px; 
            top: 20px; 
            left: 20px; 
        }
        #p-photo-box {
             width: 70px; 
             height: 70px; 
             top: 20px; 
             left: 260px; 
             overflow: hidden; 
             display: flex; 
             align-items: center; 
             justify-content: center; 
             background: #eee; 
         }
        #p-photo-box img { 
            position: relative; 
            width: 100%; 
            height: 100%; 
            object-fit: cover; 
        }
        #p-name { 
            top: 80px; 
            left: 20px; 
            font-size: 20px; 
            font-weight: bold; 
        }
        #p-desig { 
            top: 105px; 
            left: 20px; 
            font-size: 11px; 
        }
        #p-serv-b {
            position: absolute;
            white-space: pre-wrap; /* Allows the multiline text to work */
            display: block;
        }
        /*#p-contact { top: 130px; left: 20px; font-size: 8px; line-height: 1.4; display: flex; flex-direction: column; }*/
        /* Container: Handles overall position and vertical stacking */
        /* The Main Container */
/* Container: Forcing a Grid layout */
        #p-contact { 
            position: absolute; 
            top: 130px; 
            left: 20px; 
            font-size: 8px; 
            
            /* Using Grid instead of Flex for the parent */
            display: grid !important; 
            grid-template-columns: 1fr;
            row-gap: 5px; /* Physical gap between rows */
            
            width: auto;
            height: auto; 
            z-index: 10;
        }

        /* Individual Rows: Aligning Icon + Text */
        .field-row { 
            display: flex !important; 
            align-items: center !important; 
            /* Force relative to stop them from jumping to the top */
            position: relative !important; 
            top: auto !important;
            left: auto !important;
            width: 100%;
        }

        /* Icons */
        .field-row i { 
            width: 14px; 
            text-align: center; 
            margin-right: 6px;
            flex-shrink: 0; 
        }

        /* Text */
        .field-row span {
            white-space: nowrap;
            line-height: 1;
        }

        .hidden { 
            display: none !important; 
        }
        /*----------------------------*/
        #p-qr-f, #p-qr-b { 
            top: 130px; 
            left: 280px; 
            width: 50px; 
            height: 50px; 
            background: #fff; 
            padding: 2px; 
        }
        /*.field-row { display: flex; align-items: center; gap: 5px; }*/

        /* Container for the template grid */
            .template-row {
                display: grid; 
                grid-template-columns: repeat(3, 1fr); 
                gap: 10px;
            }

            /* The clickable button container */
            .tpl-btn {
                cursor: pointer;
                transition: transform 0.2s ease, filter 0.2s ease;
            }

            /* The colored box (thumbnail) */
            .tpl-preview-box {
                height: 40px;
                border-radius: 4px;
                transition: all 0.3s ease;
            }

            /* The text label below the box */
            .tpl-label {
                font-size: 9px; 
                text-align: center; 
                display: block;
                margin-top: 5px;
                color: #555;
            }

            /* --- MOUSE HOVER EFFECTS --- */
            .tpl-btn:hover {
                transform: translateY(-3px); /* Lifts the button up */
            }

            .tpl-btn:hover .tpl-preview-box {
                box-shadow: 0 5px 15px rgba(0,0,0,0.2); /* Adds a glow/shadow */
                filter: brightness(1.1); /* Makes the color pop slightly */
            }

            .tpl-btn:active {
                transform: scale(0.95); /* Shrinks slightly when clicked */
            }

            /* Specific Border for Minimal (so it's visible on white) */
            .border-light {
                border: 1px solid #ddd;
            }

            /* Specific Border for Gold */
            .border-gold {
                border: 1px solid #FFD700;
            }

        /* Right Side: Controls */
        .controls-pane { 
            /*width: 500px; 
            background: var(--panel-bg); 
            height: 100%; 
            overflow-y: auto; 
            padding: 25px; 
            box-shadow: -10px 0 30px rgba(0,0,0,0.05); */
            width: 500px; /* Slightly narrower for better compatibility */
            min-width: 350px; /* Prevents it from disappearing */
            flex-shrink: 0;   /* CRITICAL: Prevents preview-pane from squishing this to 0px */
            background: var(--panel-bg); 
            height: 100%; 
            overflow-y: auto; 
            padding: 25px; 
            box-shadow: -10px 0 30px rgba(0,0,0,0.05); 
            position: relative; /* Context for dropdown z-index */
        }
        @media (max-width: 900px) { 
            .controls-pane { 
                width: 100%; 
                height: auto; 
                border-radius: 30px 30px 0 0; 
                max-height: 500px;
            } 
        }

        .section { 
            background: #f8f9fa; 
            border: 1px solid #eaeaea; 
            border-radius: 12px; 
            padding: 15px; 
            margin-bottom: 20px; 
        }
        .section-h { 
            display: flex; 
            justify-content: space-between; 
            align-items: center; 
            margin-bottom: 12px; 
            border-bottom: 1px solid #ddd; 
            padding-bottom: 8px; 
        }
        .section-h span { 
            font-weight: 800; 
            font-size: 11px; 
            text-transform: uppercase; 
            color: #444; 
            letter-spacing: 1px; 
        }
        
        label { 
            font-size: 10px; 
            font-weight: 700; 
            color: #777; 
            display: block; 
            margin-top: 10px; 
            text-transform: uppercase; 
        }
        input[type="text"], input[type="number"], select, textarea { 
            width: 100%; 
            padding: 8px; 
            margin-top: 5px; 
            border: 1px solid #ccc; 
            border-radius: 6px; 
            font-size: 13px; 
        }
        .row { 
            display: flex; 
            gap: 8px; 
        }
        .row > * { flex: 1; }
        
        /* Sliders */
        .sld-grp { 
            display: flex; 
            align-items: center; 
            gap: 10px; 
            margin-top: 5px; 
        }
        input[type="range"] { 
            flex: 1; 
            height: 4px; 
        }
        
        .btn-reset { 
            font-size: 9px; 
            background: #eb4d4b; 
            color: #fff; 
            border: none; 
            padding: 4px 8px; 
            border-radius: 4px; 
            cursor: pointer; 
        }
        .fmt-bar { 
            display: flex; 
            gap: 3px; 
            margin-top: 5px; 
        }
        .fmt-btn { 
            flex: 1; 
            padding: 6px; 
            font-size: 10px; 
            font-weight: bold; 
            border: 1px solid #ccc; 
            background: #fff; 
            cursor: pointer; 
            border-radius: 4px; 
        }
        .fmt-btn.active { 
            background: var(--accent); 
            color: #fff; 
            border-color: var(--accent); 
        }
        
        .hidden { 
            display: none !important; 
        }
        .export-btns { 
            position: sticky; 
            bottom: 0; 
            background: #fff; 
            padding-top: 10px; 
            display: flex; 
            gap: 10px; 
            border-top: 2px solid #eee; 
        }
        .btn-dl { 
            flex: 1;
            padding: 15px; 
            border: none; 
            border-radius: 8px; 
            color: #fff; 
            font-weight: bold; 
            cursor: pointer; 
        }

        /* Force the dropdown to show text and have a background */
#f-prim, #f-sec, #f-prim option, #f-sec option {
    display: block !important;
    visibility: visible !important;
    color: #333 !important; /* Dark text */
    background-color: #fff !important; /* White background */
    opacity: 1 !important;
    font-size: 14px !important;
    padding: 5px !important;
}

/* Ensure the parent container isn't hiding it */
#f-prim, #f-sec {
    min-width: 150px;
    min-height: 30px;
    border: 1px solid #ccc !important;
    -webkit-appearance: menulist !important; /* Forces standard browser look */
    appearance: menulist !important;
}
select {
    position: relative;
    z-index: 9999 !important;
}

.dropdown-row {
    position: relative;
    z-index: 9999; /* Higher than the card-container */
}

/* Force the actual select to be clean */
.dropdown-row select {
    position: relative;
    z-index: 10000;
}