*{box-sizing:border-box}html,body{margin:0;padding:0;font-family:Inter,Arial,sans-serif;color:#241b27;background:#fff8fb}body{min-height:100vh}a{text-decoration:none;color:inherit}.topbar{height:70px;background: linear-gradient(135deg, #ff5b93, #ff2366); border-bottom: 1px solid #c41647;display:flex;align-items:center;justify-content:space-between;padding:0 5%;position:sticky;top:0;z-index:50}.logo{font-weight:800;font-size:22px}.logo span{color:#ef2e68;font-size:28px}.mainnav{display:flex;align-items:center;gap:22px;font-size:14px; color: #ffffff;}.pink-btn,.outline-btn,.soft-btn,.icon-btn{border:0;border-radius:10px;padding:11px 17px;cursor:pointer;font-weight:700}.pink-btn{background:#c41647;color:#fff; border: 1px solid #c41647;}.pink-btn.small{padding:9px 14px}.outline-btn{color: #000000;border:1px solid #efc5d5;background:#fff}.soft-btn{background:#fff0f5;color:#e61e5a}.icon-btn{background:#fff;border:1px solid #eadbe3}.hamburger{display:none;background:none;border:0;font-size:26px}.hero{display:grid;grid-template-columns:1.05fr .95fr;gap:55px;align-items:center;padding:70px 7%;background:linear-gradient(120deg,#fff8fb,#fff)}.hero h1{font-size:60px;line-height:1.03;margin:10px 0 22px}.hero h1 span{color:#f32663}.hero p{font-size:18px;line-height:1.7;color:#6d626a;max-width:600px}.hero-actions{display:flex;gap:12px;margin-top:28px}.hero-card{background:#fff;border:1px solid #f2dce6;border-radius:28px;padding:16px;box-shadow:0 25px 80px #7c29421c}.hero-card img{display:block;width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:20px}.stats,.feature-grid,.cat-grid,.template-grid{display:grid;gap:18px}.stats{grid-template-columns:repeat(4,1fr);margin-top:30px}.stat,.feature,.category,.template-card,.panel,.auth-card,.dash-card{background:#fff;border:1px solid #f1e2e9;border-radius:18px;box-shadow:0 10px 30px #56203b0a}.stat{padding:18px;text-align:center}.stat b{display:block;font-size:28px;color:#ef2e68}.section{padding:55px 7%}.section-head{display:flex;justify-content:space-between;align-items:end;margin-bottom:24px}.section h2{font-size:34px;margin:0}.feature-grid{grid-template-columns:repeat(4,1fr)}.feature{padding:22px}.feature .ico{width:42px;height:42px;border-radius:12px;background:#fff0f5;display:grid;place-items:center;color:#ef2e68;font-size:21px;margin-bottom:14px}.feature p,.category p{color:#766a72;line-height:1.5}.cat-grid{grid-template-columns:repeat(6,1fr)}.category{overflow:hidden}.category img{width:100%;aspect-ratio:1/1;object-fit:cover;display:block}.category div{padding:12px;font-weight:700}.template-grid{grid-template-columns:repeat(4,1fr)}.template-card{overflow:hidden;position:relative}.template-card img{display:block;width:100%;aspect-ratio:3/4;object-fit:cover}.template-card .meta{padding:13px}.template-card .meta small{color:#7c7077}.template-card .use{display:block;margin-top:10px;text-align:center;padding:10px;border-radius:10px;background:#f32663;color:#fff;font-weight:700}.toolbar{display:flex;gap:10px;flex-wrap:wrap;margin:18px 0}.search{width:100%;max-width:500px;border:1px solid #dfd3da;background:#fff;border-radius:12px;padding:13px}.editor-shell{padding:24px 3%;display:grid;grid-template-columns:250px minmax(320px,760px) 300px;gap:18px;align-items:start}.editor-panel,.editor-stage{background:#fff;border:1px solid #eadde4;border-radius:18px;padding:16px}.editor-panel h3{margin:4px 0 15px}.control{margin:12px 0}.control label{display:block;font-size:12px;font-weight:800;margin-bottom:6px}.control input,.control select,.control textarea{width:100%;padding:10px;border:1px solid #ddd1d9;border-radius:10px;background:#fff}.control textarea{min-height:90px;resize:vertical}.canvas-wrap{background:#f4eef1;padding:15px;border-radius:15px;display:flex;justify-content:center;overflow:hidden}.canvas{width:min(100%,620px);aspect-ratio:2/3;position:relative;overflow:hidden;border-radius:12px;background:#ddd;touch-action:none}.canvas>img.bg{width:100%;height:100%;object-fit:cover;display:block}.photo-layer{position:absolute;left:50%;top:38%;width:42%;transform:translate(-50%,-50%);cursor:move;display:none;border:2px solid rgba(255,255,255,.85);box-shadow:0 8px 25px #0004}.photo-layer img{width:100%;display:block;pointer-events:none}.text-layer{position:absolute;left:50%;bottom:12%;transform:translateX(-50%);width:86%;text-align:center;color:#fff;text-shadow:0 2px 10px #000;cursor:move;user-select:none;touch-action:none}.text-layer .name{font-size:38px;font-weight:800}.text-layer .message{font-size:21px;margin-top:7px;line-height:1.25}.editor-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}.upload-box{border:2px dashed #efc9d8;padding:20px;text-align:center;border-radius:12px;background:#fff7fa}.upload-box input{width:100%}.history{font-size:12px;color:#81747b}.auth-card{max-width:450px;margin:70px auto;padding:30px}.auth-card input{width:100%;padding:13px;border:1px solid #ddd1d9;border-radius:10px;margin:7px 0 14px}.notice{border: 1px solid #c41647;font-weight: bold; padding:12px;border-radius:10px;background:#fff0f5;color:#6e3c50;margin:12px 0}.dash-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.dash-card{padding:20px}.admin-layout{display:grid;grid-template-columns:220px 1fr;min-height:calc(100vh - 70px)}.admin-side{background:#1f2029;color:#fff;padding:25px 15px}.admin-side a{display:block;padding:12px;border-radius:9px;color:#ddd;margin:4px 0}.admin-side a.active,.admin-side a:hover{background:#f32663;color:#fff}.admin-main{padding:30px;background:#f7f5f6}.upload-card{padding:22px;background:#fff;border:1px solid #eadde4;border-radius:18px;margin-bottom:20px}.admin-table{width:100%;border-collapse:collapse;background:#fff;border-radius:14px;overflow:hidden}.admin-table th,.admin-table td{padding:12px;border-bottom:1px solid #eee;text-align:left;font-size:13px}.admin-table img{width:54px;height:68px;object-fit:cover;border-radius:7px}.empty{padding:40px;text-align:center;background:#fff;border-radius:16px;border:1px dashed #ddccd5}@media(max-width:1100px){.hero{grid-template-columns:1fr}.feature-grid{grid-template-columns:repeat(2,1fr)}.cat-grid{grid-template-columns:repeat(3,1fr)}.template-grid{grid-template-columns:repeat(3,1fr)}.editor-shell{grid-template-columns:220px 1fr}.editor-shell .right-panel{grid-column:1/-1}.dash-grid{grid-template-columns:repeat(2,1fr)} }@media(max-width:760px){.logo { font-size: 24px; }.mainnav{display:none}.hamburger{display:block; color: #fff;}.nav-open .mainnav{display:flex;position:absolute;top:70px;left:0;right:0;background:#fff;padding:18px;flex-direction:column;align-items:stretch;border-bottom:1px solid #eee; color: #000;    font-weight: bold;}.hero{padding:45px 5%}.hero h1{font-size:42px}.section{padding:40px 5%}.stats{grid-template-columns:repeat(2,1fr)}.feature-grid,.cat-grid,.template-grid{grid-template-columns:repeat(2,1fr)}.editor-shell{grid-template-columns:1fr;padding:12px}.admin-layout{grid-template-columns:1fr}.admin-side{display:flex;overflow:auto;gap:5px}.admin-side a{white-space:nowrap}.footer{flex-direction:column;gap:15px; grid-template-columns: 1fr;} .footer-grid {
        grid-template-columns: 1fr !important;}}@media(max-width:460px){.logo { font-size: 24px; }.feature-grid,.cat-grid,.template-grid{grid-template-columns:1fr}.stats{grid-template-columns:1fr 1fr}.hero-actions{flex-direction:column} footer{flex-direction:column;gap:15px; grid-template-columns: 1fr;}   .footer-grid { grid-template-columns: 1fr !important; }}
/* zeeshan */
footer {
    background: #161429;
    color: #fff;
    padding: 80px 0 30px;
    margin-top: 80px;
    font-size: 14px;
}
.footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 40px;
    margin-bottom: 50px;
}
footer ul {
    list-style: none;
        padding: 0;
}
footer ul li {
    margin-bottom: 12px;
    color: #ddd;
}
footer h4 {
    margin-bottom: 18px;
    font-family: 'Poppins',sans-serif;
}
.container-home {
    width: 92%;
    max-width: 1280px;
    margin: auto;
}
.footer-logo {
    font-family: 'Poppins', sans-serif;
    font-size: 34px;
    font-weight: 800;
    color: #ff5b93;
    margin-bottom: 18px;
    width: 50%;
}
.copyright {
    text-align: center;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 25px;
    color: #bbb;
}
.heading-h1{
    font-size: 42px;
    margin: 0;
}
/* =========================================================
   LOVE NAME PIX — EDITOR
   Single clean editor CSS
========================================================= */

.editor-object,
.editor-text-object,
.photo-layer,
.text-layer {
    position: absolute;
    user-select: none;
    -webkit-user-select: none;
    touch-action: none;
    cursor: move;
    box-sizing: border-box;
}

/* =========================================================
   CANVAS
========================================================= */

.canvas {
    position: relative;
    width: min(100%, 620px);
    aspect-ratio: 2/3;
    overflow: hidden;
    background: #ddd;
    touch-action: none;
}

.canvas > img.bg {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #eee;
    user-select: none;
    -webkit-user-drag: none;
    pointer-events: none;
}


/* =========================================================
   PHOTO LAYER
========================================================= */

.photo-layer {
    z-index: 5;

    overflow: visible;

    border: 2px solid rgba(255,255,255,.9);

    box-shadow: 0 8px 25px rgba(0,0,0,.25);
}

.photo-layer img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
}


/* =========================================================
   TEXT LAYER
========================================================= */

.text-layer {
    position: absolute;

    inset: 0;

    z-index: 10;

    pointer-events: none;
}

.text-layer .name,
.text-layer .message {
    position: absolute;

    transform: translate(-50%, -50%);

    text-align: center;

    white-space: pre-wrap;

    line-height: 1.2;

    cursor: move;

    pointer-events: auto;

    user-select: none;

    -webkit-user-select: none;

    max-width: 90%;
}


/* =========================================================
   TEXT RESIZE HANDLE
========================================================= */

.name .text-resize-handle,
.message .text-resize-handle {
    display: none;

    position: absolute;

    right: -12px;
    bottom: -10px;

    width: 18px;
    height: 18px;

    border-radius: 50%;

    background: #1581c5;

    border: 3px solid #fff;

    box-shadow: 0 2px 8px rgba(0,0,0,.25);

    cursor: nwse-resize;

    z-index: 100;

    touch-action: none;
}

.name.selected .text-resize-handle,
.message.selected .text-resize-handle {
    display: block;
}


/* =========================================================
   SELECTED ELEMENT
========================================================= */

.editor-selected,
.editor-object.selected,
.photo-layer.editor-selected,
.text-layer.editor-selected,
.name.selected,
.message.selected {
    outline: 2px dashed rgba(21,129,197,.9);

    outline-offset: 4px;
}


/* =========================================================
   PHOTO RESIZE HANDLES
========================================================= */

.resize-handle {
    position: absolute;

    width: 18px;
    height: 18px;

    background: #1581c5;

    border: 3px solid #fff;

    border-radius: 50%;

    box-shadow: 0 2px 8px rgba(0,0,0,.25);

    z-index: 100;

    box-sizing: border-box;

    touch-action: none;
}


/* Hide handles unless selected */

.photo-layer:not(.editor-selected) .resize-handle,
.photo-layer:not(.selected) .resize-handle {
    display: none;
}


/* =========================================================
   CORNER HANDLES
========================================================= */

.resize-nw {
    left: -9px;
    top: -9px;
    cursor: nwse-resize;
}

.resize-ne {
    right: -9px;
    top: -9px;
    cursor: nesw-resize;
}

.resize-sw {
    left: -9px;
    bottom: -9px;
    cursor: nesw-resize;
}

.resize-se {
    right: -9px;
    bottom: -9px;
    cursor: nwse-resize;
}


/* =========================================================
   SINGLE DEFAULT HANDLE
   Used by the current JS if it creates only one handle
========================================================= */

.photo-layer > .resize-handle:not(.resize-nw):not(.resize-ne):not(.resize-sw):not(.resize-se) {
    right: -9px;
    bottom: -9px;

    cursor: nwse-resize;
}


/* =========================================================
   HOVER
========================================================= */

.photo-layer:hover,
.name:hover,
.message:hover {
    outline: 1px dashed rgba(21,129,197,.6);
}


/* =========================================================
   EDITOR STEPS
========================================================= */

.editor-steps {
    display: flex;
    align-items: center;
    gap: 10px;

    margin-top: 15px;

    font-size: 14px;

    flex-wrap: wrap;
}

.editor-steps span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.editor-steps b {
    display: inline-flex;

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

    width: 24px;
    height: 24px;

    border-radius: 50%;

    background: #1581c5;

    color: #fff;

    font-size: 12px;
}


/* =========================================================
   ADVANCED CONTROLS
========================================================= */

.advanced-controls {
    margin-top: 15px;

    border-top: 1px solid #eee;

    padding-top: 12px;
}

.advanced-controls summary {
    cursor: pointer;

    font-weight: 600;

    padding: 8px 0;
}


/* =========================================================
   RANGE
========================================================= */

.range-row {
    display: flex;

    align-items: center;

    gap: 10px;
}

.range-row input {
    flex: 1;
}

#sizeValue {
    min-width: 45px;

    font-size: 13px;
}


/* =========================================================
   UPLOAD
========================================================= */

.upload-box {
    cursor: pointer;

    transition: transform .15s ease;
}

.upload-box:hover {
    transform: translateY(-1px);
}

.upload-box input[type="file"] {
    cursor: pointer;
}


/* =========================================================
   EDITOR CONTROLS
========================================================= */

.editor-panel select,
.editor-panel input,
.editor-panel textarea {
    max-width: 100%;

    box-sizing: border-box;
}

#fontInput {
    font-size: 15px;
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 900px) {

    .editor-shell {
        grid-template-columns: 1fr;
    }

    .editor-panel {
        width: 100%;
    }

    .editor-stage {
        order: -1;
    }

    .right-panel {
        order: 3;
    }

    .canvas-wrap {
        width: 100%;

        max-width: 100%;

        overflow: auto;

        padding: 10px;
    }

    .canvas {
        width: 100%;

        max-width: 620px;

        margin: 0 auto;
    }

}


/* =========================================================
   MOBILE RESIZE HANDLES
========================================================= */

@media (max-width: 768px) {

    .resize-handle {
        width: 22px;
        height: 22px;

        margin: 0;
    }

    .resize-nw {
        left: -11px;
        top: -11px;
    }

    .resize-ne {
        right: -11px;
        top: -11px;
    }

    .resize-sw {
        left: -11px;
        bottom: -11px;
    }

    .resize-se {
        right: -11px;
        bottom: -11px;
    }

    .photo-layer > .resize-handle:not(.resize-nw):not(.resize-ne):not(.resize-sw):not(.resize-se) {
        right: -11px;
        bottom: -11px;
    }

    .editor-steps {
        font-size: 13px;
    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 460px) {

    .canvas-wrap {
        padding: 6px;
    }

    .canvas {
        width: 100%;
        min-width: 280px;
    }

}

/* =========================================================
   PUBLIC EDITOR PHOTO SHAPES
   ========================================================= */

#photoLayer {
    overflow: hidden;
    box-sizing: border-box;
    touch-action: none;
}

#photoLayer img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    pointer-events: none;
    user-select: none;
}

#photoLayer.shape-rectangle {
    border-radius: 0;
}

#photoLayer.shape-rounded {
    border-radius: 24px;
}

#photoLayer.shape-circle {
    border-radius: 50%;
}

#photoLayer.shape-oval {
    border-radius: 50%;
}


/* =========================================================
   RESIZE HANDLES
   ========================================================= */

#photoLayer .resize-handle {
    position: absolute;
    width: 14px;
    height: 14px;
    margin: 0;
    padding: 0;

    background: #ffffff;
    border: 2px solid #1581C5;
    border-radius: 50%;

    z-index: 100;

    touch-action: none;
    box-sizing: border-box;
}

#photoLayer .resize-nw {
    left: -7px;
    top: -7px;
    cursor: nwse-resize;
}

#photoLayer .resize-ne {
    right: -7px;
    top: -7px;
    cursor: nesw-resize;
}

#photoLayer .resize-sw {
    left: -7px;
    bottom: -7px;
    cursor: nesw-resize;
}

#photoLayer .resize-se {
    right: -7px;
    bottom: -7px;
    cursor: nwse-resize;
}

.photo-layer {
    box-sizing: border-box;
}

.photo-layer img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    pointer-events: none;
}

.photo-layer.shape-rectangle img {
    border-radius: 0;
}

.photo-layer.shape-rounded img {
    border-radius: 24px;
}

.photo-layer.shape-circle img {
    border-radius: 50%;
}

.photo-layer.shape-oval img {
    border-radius: 50%;
}

/* =========================================================
   PUBLIC EDITOR PHOTO SHAPES
========================================================= */

#photoLayer {
    box-sizing: border-box;
}

#photoLayer #photoImage {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    pointer-events: none;
}

#photoLayer.shape-rectangle #photoImage {
    border-radius: 0;
}

#photoLayer.shape-rounded #photoImage {
    border-radius: 24px;
}

#photoLayer.shape-circle #photoImage {
    border-radius: 50%;
}

#photoLayer.shape-oval #photoImage {
    border-radius: 50%;
}

.photo-layer {
    position: absolute;
}

.photo-layer .resize-handle {
    position: absolute;
    width: 14px;
    height: 14px;
    background: #ffffff;
    border: 2px solid #1581C5;
    border-radius: 50%;
    z-index: 20;
    pointer-events: auto;
}

.photo-layer .resize-nw {
    left: -7px;
    top: -7px;
    cursor: nwse-resize;
}

.photo-layer .resize-ne {
    right: -7px;
    top: -7px;
    cursor: nesw-resize;
}

.photo-layer .resize-sw {
    left: -7px;
    bottom: -7px;
    cursor: nesw-resize;
}

.photo-layer .resize-se {
    right: -7px;
    bottom: -7px;
    cursor: nwse-resize;
}


/* =========================================================
   LoveNamePix - FORCE PHOTO SELECTION + RESIZE HANDLES
   ========================================================= */

#photoLayer {
    position: absolute !important;
    z-index: 1000 !important;
}

#photoLayer.selected {
    outline: 2px dashed #1581C5 !important;
    outline-offset: 4px !important;
}

#photoLayer #photoImage {
    position: relative !important;
    z-index: 1 !important;
    pointer-events: none !important;
    user-select: none !important;
    -webkit-user-drag: none !important;
}

#photoLayer .resize-handle {
    display: block !important;
    position: absolute !important;
    width: 18px !important;
    height: 18px !important;
    background: #ffffff !important;
    border: 5px solid #ef2e68 !important;
    border-radius: 50% !important;
    z-index: 9999 !important;
    pointer-events: auto !important;
    touch-action: none !important;
}

#photoLayer .resize-nw {
    left: -7px !important;
    top: -7px !important;
    cursor: nwse-resize !important;
}

#photoLayer .resize-ne {
    right: -7px !important;
    top: -7px !important;
    cursor: nesw-resize !important;
}

#photoLayer .resize-sw {
    left: -7px !important;
    bottom: -7px !important;
    cursor: nesw-resize !important;
}

#photoLayer .resize-se {
    right: -7px !important;
    bottom: -7px !important;
    cursor: nwse-resize !important;
}

/* Keep selection visible while hovering */
#photoLayer.selected:hover {
    outline: 2px dashed #1581C5 !important;
    outline-offset: 4px !important;
}

/* Never allow hover to hide the handles */
#photoLayer:hover .resize-handle,
#photoLayer.selected .resize-handle {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}


.text-resize-handle {
    position: absolute !important;
    width: 18px !important;
    height: 18px !important;

    border-radius: 50% !important;

    pointer-events: auto !important;
    touch-action: none !important;

    cursor: nwse-resize !important;

    z-index: 99999 !important;

    box-sizing: border-box !important;

    right: -6px;
    bottom: -6px;
    top: auto;
}

.template-preview {
    container-type:inline-size;
}

.template-demo-name {
    font-size: <?= max(1, $nameSize / 8) ?>cqw !important;
}

.template-demo-message {
    font-size: <?= max(1, $messageSize / 8) ?>cqw !important;
}

.template-demo-message {
    font-size:calc(
        font-size:<?= max(8, $messageSize / 8) ?>cqw
    ) !important;
}

/* =========================================================
   LOVE NAME PIX — CANVAS POSITION SYNC
   Match User Editor canvas to the actual template image
   ========================================================= */

.canvas {
    width: min(100%, 620px) !important;
    height: auto !important;
    aspect-ratio: 2 / 3 !important;
}

.canvas > img.bg {
    width: 100% !important;
    height: auto !important;
    object-fit: initial !important;
}

/* =========================================================
   TEMPLATE FONT OVERRIDE
   Saved Admin font must control the actual visible text
========================================================= */

#nameLayer,
#nameLayer .text-content,
#messageLayer,
#messageLayer .text-content {
    font-weight: 400 !important;
    font-style: normal !important;
    text-decoration: none !important;
}

#nameLayer .text-content,
#messageLayer .text-content {
    font-family: inherit !important;
}

/* =========================================================
   TEMPLATE THUMBNAIL PREVIEW
   Scale saved Admin typography to thumbnail width
========================================================= */

.template-preview {
    container-type: inline-size;
}

/* NAME 
.template-preview .template-demo-name {
    font-size: 5.125cqw !important;
    line-height: 1.15 !important;
    font-weight: 400 !important;
    white-space: nowrap !important;
    text-align: center !important;
    max-width: 95%;
}

/* MESSAGE 
.template-preview .template-demo-message {
    font-size: 4.5cqw !important;
    line-height: 1.15 !important;
    font-weight: 400 !important;
    width: 90% !important;
    text-align: center !important;
    box-sizing: border-box !important;
}
*/
/* Photo stays inside its saved Admin position */
.template-preview .template-demo-photo {
    box-sizing: border-box;
    overflow: hidden;
}

.template-preview .template-demo-photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}


.upload-box {
    cursor: pointer;
}

.upload-box b,
.upload-box p {
    pointer-events: none;
}


.upload-box {
    display: block;
    width: 100%;
    box-sizing: border-box;
    cursor: pointer;
}

.upload-box b,
.upload-box p {
    display: block;
    margin-left: 0;
    margin-right: 0;
}

.upload-box input[type="file"] {
    display: none !important;
}
#photoInput {
    display: none !important;
}

#photoUploadBox {
    cursor: pointer;
}

input[type="color"] {
    width: 100%;
    height: 42px;
    padding: 2px;
    border: 2px solid #999;
    border-radius: 6px;
    cursor: pointer;
}


#canvas {
    touch-action: auto;
}