/* =========================
   RESET
========================= */

*{
    box-sizing:border-box;
}

html,
body{
    margin:0;
    padding:0;
}

/* =========================
   ROOT
========================= */

:root{

    --bg-top:#7f97c7;
    --bg-bottom:#7b6df2;
    --panel:#e9eef8;
    --panel-soft:#f4f7fc;
    --input-bg:#ffffff;
    --dark-text:#1e293b;
    --soft-text:#dce7ff;
    --cyan:#71e6ef;
    --cyan-dark:#57cfd9;
    --pink:#E5536B;
    --purple:#D946EF;
    --secondary:#5d7ea8;
    --radius:18px;
    --shadow:
        0 18px 40px rgba(0,0,0,.28);
}

/* =========================
   BODY
========================= */

body{

    font-family:
        "Poppins",
        sans-serif;
    background:
        linear-gradient(
            180deg,
            var(--bg-top),
            var(--bg-bottom)
        );
    min-height:100vh;
    color:#ffffff;
}

/* =========================
   MAIN WRAPPER
========================= */
.pb-wrap{
    width:100%;
    padding:
        40px
        24px
        80px;
}

/* =========================
   HERO
========================= */

.hero{
    text-align:center;
    max-width:980px;
    margin:0 auto 28px;
    padding:42px 20px 22px;
}

.hero-title{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:14px;
    margin-bottom:10px;
}

.hero-icon{
    width:82px;
    height:auto;
}

.hero h1{

    font-size:46px;
    font-weight:700;

    color:#ffffff;

    text-shadow:
        0 2px 10px rgba(0,0,0,.18);

}

.hero p{
    margin:8px auto 0;
    max-width:620px;
    font-size:14px;
    line-height:1.7;
    color:rgba(255,255,255,.88);
}

.hero h3{
    margin-top:22px;
    margin-bottom:6px;
    font-size:28px;
    font-weight:700;
    color:#ffffff;
}

.version{
    font-size:11px;
    letter-spacing:.7px;
    text-transform:uppercase;
    color:rgba(255,255,255,.78);
}

/* =========================
   TOOL CONTAINER
========================= */

.tool-container{
    width:100%;
    max-width:1280px;
    margin:0 auto;
    padding:28px 28px 40px;
    border-radius:26px;
    background:
        rgba(9,22,61,.96);
    border:
        1px solid rgba(255,255,255,.06);
    box-shadow:var(--shadow);
}

.pb-tool-wrapper{
    padding:30px 20px 40px;
}

/* =========================
   TYPOGRAPHY
========================= */

label,
h4{
    display:block;
    margin-bottom:8px;
    font-size:13px;
    font-weight:600;
    letter-spacing:.15px;
    color:var(--soft-text);
}

input[type="text"],
select{
    color:#1e293b;
}
/* =========================
   PRO BANNER
========================= */

.pro-banner{
    display:flex;
    align-items:center;
    justify-content:space-between;

    padding:4px 8px 4px 4px;

    border-radius:16px;

    background:linear-gradient(
        180deg,
        #6f86b5,
        #5d739f
    );
}

.pro-left{
    display:flex;
    align-items:center;
    padding-left:6px;
    gap:14px;
}

.plan-badge{
    height:38px;
    min-width:110px;
    border-radius:12px 0 0 12px;
    margin:0;
    display:flex;
    align-items:center;
    justify-content:center;
}

.pro-status{
    font-size:14px;
    font-weight:700;
    color:#16a34a;
}

.pro-badge{
    background:linear-gradient(
        90deg,
        #f6a400,
        #f7cc59

    );
    color:#1e293b;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.35);
    border:1px solid rgba(255,255,255,.25);
}

.plan-badge:not(.pro-badge){
    background:#7b8598;
    color:#ffffff;
}

.help-btn{

    width:30px;
    height:30px;
    min-width:30px;

    border:none;
    border-radius:50%;

    cursor:pointer;

    color:#ffffff;
    font-weight:700;

    background:linear-gradient(
        135deg,
        var(--pink),
        var(--purple)
    );

    position:relative;
    z-index:10;
}

/* =========================
   PRO ACTIVATION
========================= */

.pro-activate{

    display:flex;
    justify-content:center;
    align-items:center;
    gap:12px;

    margin:18px 0 24px;

}

.pro-activate input{

    width:280px;

}

.pro-activate button{
    min-width:150px;

}

.licence-panel{
    margin:20px auto 30px;
    max-width:620px;
    text-align:center;
}

.licence-row{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:14px;
    margin:18px 0;
    flex-wrap:wrap;
}



.licence-divider{
    margin:16px 0;
    color:#cbd5e1;
    font-size:13px;
    letter-spacing:2px;
}

.premium-btn{
    background:#f6a400;
    color:#fff;
    border:none;
    border-radius:10px;
    padding:12px 30px;
    font-weight:700;
    cursor:pointer;
    transition:.25s;
}

.premium-btn:hover{
    transform:translateY(-2px);
    box-shadow:0 8px 18px rgba(0,0,0,.25);
}

#proLicence{
    text-align:center;
    color:white;
}

#activatePro,
#upgradeBtn{
    min-width:150px;
}

#proCode{
    width:160px;
    height:30px;
}

#proLicence h3{
    margin-bottom:8px;
}

#proLicence p{
    color:#39d353;
    font-weight:700;
}

#proLicence small{
    opacity:.8;
}

.hidden{
    display:none;
}
/* =========================
   TOP CONTROLS
========================= */

.top-controls{
    display:grid;
    grid-template-columns:
        1fr
        1.15fr
        1fr;
    gap:18px;
    margin-bottom:24px;
}

/* =========================
   INPUTS
========================= */

input[type="text"],
select{
    width:100%;
    height:46px;
    padding:0 14px;
    border:none;
    border-radius:12px;
    outline:none;
    background:
        linear-gradient(
            180deg,
            #f3f5fb,
            #dfe6f2
        );
    color:#334155;
    font-size:14px;
    font-weight:500;
    text-align:center;
}

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

.upload-left{
    flex-direction:row;
}

.upload-right{
    flex-direction:row;
}
/* =========================
   FILE INPUTS
========================= */

.file-wrap{
    display:flex;
    align-items:center;
    justify-content:space-between;
    height:44px;
    border-radius:14px;
    overflow:hidden;
    background:#e5e7eb;
    border:1px solid rgba(0,0,0,.06);
}

.file-btn{
    display:flex;
    align-items:center;
    justify-content:center;
    align-self:stretch;
    min-height:100%;
    padding:0 18px;
    flex-shrink:0;
    font-size:13px;
    font-weight:700;
}

/* =========================
   MAIN IMAGE UPLOAD
========================= */

.upload-left .file-btn{
    border-radius:12px 0 0 12px;
}

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

.upload-right .file-btn{
    border-radius:0 12px 12px 0;
}

.file-wrap span{
    flex:1;
    padding:0 14px;
    font-size:13px;
    color:#111827;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    text-align:center;
}

input[type="file"]{
    display:none;
}

.action-buttons{
    display:flex;
    justify-content:center;
    gap:84px;
    margin-top:28px;
    margin-bottom:18px;
}

.download-grid{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:45px;
    margin-top:20px;
    margin-bottom:26px;
}

.reset-wrap{
    display:flex;
    justify-content:center;
    margin-top:18px;
    padding-top:8px;
    padding-bottom:14px;
}
/* =========================
   MOBILE
========================= */

@media(max-width:768px){
    .hero h1{
        font-size:36px;
    }

    .hero h3{
        font-size:22px;
    }

    .tool-container{
        padding:18px;
    }

    .top-controls{
        grid-template-columns:1fr;
    }
}
/* =========================
   WATERMARK CONTROLS
========================= */

.watermark-controls{
    display:flex;
    flex-direction:column;
    gap:18px;
    margin-bottom:24px;
}

.control-grid{
    display:grid;
    grid-template-columns:
        repeat(3, 1fr);
    gap:24px;
    align-items:end;
}

/* =========================
   SECOND CONTROL ROW
========================= */

.watermark-controls
.control-grid:last-child{

    grid-template-columns:
        repeat(2, 220px);

    justify-content:center;

    gap:80px;

}

/* =========================
   SIZE + ROTATION ALIGNMENT
========================= */

.watermark-controls
.control-grid:last-child{
    justify-items:center;
}

.watermark-controls
.control-grid:last-child
label{
    text-align:center;
}

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

input[type="range"]{

    -webkit-appearance:none;
    appearance:none;

    width:100%;

    height:8px;

    border-radius:999px;

    background:#d1d5db;

    outline:none;
}

input[type="range"]::-webkit-slider-thumb{

    -webkit-appearance:none;

    width:20px;
    height:20px;

    border-radius:50%;

    cursor:pointer;

    background:#2563eb;
}
/* =========================
   WATERMARK COLOUR
========================= */

.watermark-colour{
    -webkit-appearance:none;
    appearance:none;
    width:100%;
    height:46px;
    padding:4px;
    border:none;
    border-radius:14px;
    overflow:hidden;
    cursor:pointer;
    background:
        linear-gradient(
            180deg,
            #eef2fb,
            #dbe3f2
        );
}

.watermark-colour::-webkit-color-swatch-wrapper{
    padding:0;
}

.watermark-colour::-webkit-color-swatch{
    border:none;
    border-radius:10px;
    background:
        linear-gradient(
            90deg,
            #ff4f8b 0%,
            #d946ef 45%,
            #7c3aed 100%
        );
}

/* =========================
   BUTTON SYSTEM
========================= */

.primary,
.secondary,
.tertiary{

    display:inline-flex;
    align-items:center;
    justify-content:center;

    border:none;

    cursor:pointer;

    font-weight:700;

    transition:
        transform .18s ease,
        opacity .18s ease;

    text-decoration:none;
}

/* =========================
   PRIMARY
========================= */

.primary{

    color:#ffffff;

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

    background:
        linear-gradient(
            90deg,
            #ff4f8b 0%,
            #d946ef 45%,
            #7c3aed 100%
        );

    box-shadow:
        0 10px 24px rgba(217,70,239,.22);
}

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

/* =========================
   SECONDARY
========================= */

.secondary{

    color:#ffffff;

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

    background:
        linear-gradient(
            135deg,
            #7c3aed,
            #9333ea
        );

    box-shadow:
        0 10px 22px rgba(124,58,237,.18);
}

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

/* =========================
   TERTIARY
========================= */

.tertiary{

    background:#f59e0b;
    color:#ffffff;

    border:none;

    transition:0.25s;

}

.tertiary:hover{

    background:#d97706;

    transform:translateY(-2px);

}

/* =========================
   POSITION BUTTONS
========================= */

.position-buttons{
    display:flex;
    justify-content:center;
    gap:10px;
    margin-bottom:22px;
}

.posBtn{
    min-width:86px;
    height:34px;
    border:none;
    border-radius:10px;
    cursor:pointer;
    font-size:13px;
    font-weight:700;
    color:#111827;
    background:var(--cyan);
}

.posBtn:hover{
    background:#8ef3fb;
    transform:translateY(-1px);
}

/* =========================
   PREVIEW PLACEHOLDER
========================= */

.preview-area{
    background:
        linear-gradient(
            180deg,
            #7c91c4,#a7b3cf);
    border-radius:22px;
    border:
        1px solid rgba(0,0,0,.06);
    min-height:600px;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
    position:relative;
}

.preview-placeholder{
    position:absolute;
    inset:0;
    display:flex;
    gap:22px;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
    padding:40px;
}

.preview-placeholder h4{
    color:#1e293b;
}

.preview-icon{
    width:220px;
    height:auto;
    opacity:.28;
    filter:grayscale(15%);
    margin-bottom:24px;
    user-select:none;
    pointer-events:none;
}

.preview-placeholder h4{
    margin-bottom:14px;
    text-align:center;
    font-size:22px;
    opacity:.48;
}

.preview-placeholder p{
    max-width:420px;
    text-align:center;
    line-height:1.7;
    font-size:14px;
    color:rgba(30,41,59,.60);
}

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

#previewCanvas{
    display:block;
    max-width:100%;
    max-height:600px;
    width:auto;
    height:auto;
    border-radius:18px;
}

/* =========================
   BUTTON SIZING
========================= */

.action-small{
    min-width:88px;
    min-height:42px;
    padding:
        10px
        18px;
    border-radius:14px;
    font-size:13px;
    font-weight:700;
}

.action-large{
    width:260px;
    min-height:48px;
    padding:
        12px
        20px;
    border-radius:14px;
    font-size:14px;
    font-weight:700;
}

.reset-wrap button{
    min-width:160px;
    height:42px;
    padding:0 18px;
    border-radius:12px;
    font-size:13px;
    font-weight:700;
}

/* =========================
   PATTERN TOGGLE
========================= */

.pattern-row{
    display:flex;
    justify-content:center;
    margin-bottom:24px;
}

.checkbox-wrap{
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding:10px 14px;
    border-radius:12px;
    font-size:13px;
    font-weight:600;
}

.checkbox-wrap input{
    width:16px;
    height:16px;
    accent-color:#7ef2ff;
}

/* =========================
   HELP MODAL
========================= */

#helpModal{
    display:none;
    position:fixed;
    inset:0;
    justify-content:center;
    align-items:center;
    background:
        rgba(15,23,42,.55);
    backdrop-filter:blur(4px);
    z-index:99999;
}

.modal-content{
    width:92%;
    max-width:440px;
    padding:24px;
    border-radius:20px;
    background:#e5e7eb;
    box-shadow:
        0 20px 60px rgba(0,0,0,.22);
    animation:
        modalFade .22s ease;
}

.modal-content h3{
    margin-top:0;
    margin-bottom:14px;
    font-size:26px;
    font-weight:700;
    color:#111827;
}

.modal-content p{
    font-size:14px;
    line-height:1.8;
    color:#4b5563;
}

.modal-close{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:120px;
    height:42px;
    margin-top:18px;
    border:none;
    border-radius:12px;
    font-size:14px;
    font-weight:700;
    color:#ffffff;
    background:
        linear-gradient(
            135deg,
            var(--pink),
            var(--purple)
        );
}

/* =========================
   MODAL ANIMATION
========================= */

@keyframes modalFade{
    from{
        opacity:0;
        transform:
            translateY(12px)
            scale(.98);
    }
    to{
        opacity:1;
        transform:
            translateY(0)
            scale(1);
    }
}

/* =====================================================
   UNIVERSAL TOOLTIPS
===================================================== */

[data-tooltip]{
    position:relative;
}
[data-tooltip]::before{
    max-width:220px;
    white-space:nowrap;
    text-align:center;
    line-height:1.35;
    content:attr(data-tooltip);
    position:absolute;
    left:50%;
    top:-6px;
    transform:
        translate(-50%,-100%);
    background:linear-gradient(
        135deg,
        #6A87AF,
        #4F6D8A
    );
    color:#ffffff;
    padding:8px 12px;
    border-radius:10px;
    font-size:12px;
    font-weight:500;
    pointer-events:none;
    opacity:0;
    transition:
        opacity .18s ease,
        transform .18s ease;
    box-shadow:
        0 10px 24px rgba(0,0,0,.18);
    z-index:9999;
}

[data-tooltip]::after{
    content:"";
    position:absolute;
    left:50%;
    top:-6px;
    transform:
        translateX(-50%);
    border:6px solid transparent;
    border-top-color:#4F6D8A;
    opacity:0;
    transition:opacity .18s ease;
}

[data-tooltip]:hover::before,
[data-tooltip]:hover::after{
    opacity:1;
}
[data-tooltip]:hover::before{
    transform:
        translate(-50%,-105%);
}

/* =====================================================
   MESSAGE DIALOG
===================================================== */

.message-modal{
    position:fixed;
    inset:0;
    display:none;
    justify-content:center;
    align-items:center;
    background:rgba(0,0,0,.55);
    z-index:9999;
}

.message-modal.show{
    display:flex;
}

.message-box{
    width:420px;
    max-width:90%;
    padding:28px;
    border-radius:18px;
    background:#12214d;
    color:#fff;
    text-align:center;
    box-shadow:0 20px 60px rgba(0,0,0,.45);
}
.message-box h3{
    margin-bottom:16px;
}
.message-box button{
    margin-top:20px;
}

/* =====================================================
   EXPORT FORMAT
===================================================== */

.export-format{
    display:flex;
    align-items:center;
    margin-top:0;
    justify-content:center;
    gap:8px;

}

.export-format label{
    margin:0;
    font-size:13px;
    font-weight:600;
    color:var(--soft-text);

}

.export-format select{
    width:190px;
    height:48px;
    padding:0 14px;
    border:none;
    border-radius:12px;
    outline:none;
    background:
        linear-gradient(
            180deg,
            #eef3fb,
            #dfe8f7
        );
    border:2px solid rgba(255,255,255,.65);
    color:#243b67;
    font-size:14px;
    font-weight:600;
    text-align:center;
    cursor:pointer;
}

/* =====================================================
   JPEG QUALITY
===================================================== */

.jpeg-quality{
    display:none;
    flex-direction:column;
    align-items:center;
    gap:8px;
    margin-top:14px;
}

.jpeg-quality.show{
    display:flex;
}

.jpeg-quality input{
    width:190px;
}

.jpeg-quality span{
    font-size:13px;
    font-weight:600;
    color:var(--soft-text);

}

/* =========================
   MOBILE
========================= */
@media(max-width:768px){
    .control-grid{
        grid-template-columns:1fr;
    }
        .hero h1{
        font-size:36px;
    }
    .hero h3{
        font-size:22px;
    }
    .tool-container{
        padding:18px;
    }
    .top-controls{
        grid-template-columns:1fr;
    }
    .position-buttons{
        flex-wrap:wrap;
    }
}

footer{
    text-align:center;
    padding:22px 0 28px;
    margin-top:18px;
    font-size:14px;
    color:rgba(255,255,255,.82);
}

.footer a{
    color:#9119c0;
    font-weight:600;
    text-decoration:none;
}

.footer a:hover{
    color:#29d6e2;
}