/*==================================================
    WP Label Generator
==================================================*/

:root {

    --wpgl-primary: #2563eb;
    --wpgl-primary-hover: #1d4ed8;

    --wpgl-heading: #111827;
    --wpgl-text: #6b7280;

    --wpgl-border: #e5e7eb;

    --wpgl-background: #f6f8fb;
    --wpgl-card: #ffffff;

    --wpgl-success: #16a34a;
    --wpgl-danger: #dc2626;

    --wpgl-radius: 16px;

    --wpgl-shadow:
        0 10px 30px rgba(15,23,42,.08);

}


/*==================================================
    Reset
==================================================*/

*,
*::before,
*::after{

    box-sizing:border-box;

}

body{

    margin:0;

    background:var(--wpgl-background);

    color:var(--wpgl-heading);

    font-family:
        Inter,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        sans-serif;

}


/*==================================================
    Page
==================================================*/

.wpgl-page{

    max-width:1500px;

    margin:50px auto;

    padding:0 24px;

}


/*==================================================
    Header
==================================================*/

.wpgl-header{

    margin-bottom:40px;

}

.wpgl-header-content{

    max-width:760px;

}

.wpgl-badge{
    display:inline-flex;
    align-items:center;
    padding:8px 14px;
    background:#dbeafe;
    color:#1d4ed8;
    border-radius:999px;
    font-size:13px;
    font-weight:600;
    margin-bottom:20px;
}

.wpgl-header h1{
    margin:0;
    font-size:42px;
    font-weight:700;
    line-height:1.15;
    letter-spacing:-1px;
}

.wpgl-header p {
    margin-top:14px;
    font-size:17px;
    line-height:1.7;
    color:var(--wpgl-text);
}


/*==================================================
    Main Grid
==================================================*/

.wpgl-wrapper {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:32px;
    align-items:start;
}

/*==================================================
    Cards
==================================================*/

.wpgl-card{
    background:#fff;
    border:1px solid #e5e7eb;
    border-radius:18px;
    box-shadow:
        0 10px 30px rgba(15,23,42,.06);
    overflow:hidden;
}

.wpgl-card-header{
    padding:24px 28px;
    border-bottom:1px solid #eef2f7;
    background:#fafbfc;
}

.wpgl-card-header h2{
    margin:0;
    font-size:22px;
    font-weight:700;
    color:#111827;
}

.wpgl-card-header p{
    margin:6px 0 0;
    color:#6b7280;
    font-size:14px;
}

.wpgl-card-body{
    padding:28px;
}

/*==================================================
    Empty State
==================================================*/

.wpgl-empty{
    padding:40px;
    text-align:center;
    border:2px dashed var(--wpgl-border);
    border-radius:12px;
    color:var(--wpgl-text);
}


/*==================================================
    Sticky Preview
==================================================*/

.wpgl-preview-card{
    position:sticky;
    top:30px;
}

/*==================================================
    Responsive
==================================================*/

@media(max-width:1100px) {

    .wpgl-wrapper{
        grid-template-columns:1fr;
    }

    .wpgl-preview-card{
        position:relative;
        top:0;
    }

}

@media(max-width:768px){

    .wpgl-page{
        margin:30px auto;
        padding:0 18px;
    }

    .wpgl-header h1{

        font-size:34px;

    }

    .wpgl-card-header{

        padding:24px;

    }

    .wpgl-card-body{

        padding:24px;

    }

}

/*==================================================
    WPForms
==================================================*/

.wpgl-form-card .wpforms-container{
    margin:0 !important;
    max-width:100% !important;
}

.wpgl-form-card form{
    margin:0;
}

.wpgl-form-card .wpforms-field{
    margin-bottom:24px !important;
}

.wpgl-form-card .wpforms-field:last-child{
    margin-bottom:0 !important;
}

/*==================================================
    Labels
==================================================*/

.wpgl-form-card .wpforms-field-label{
    display:block;
    margin-bottom:10px !important;
    font-size:14px;
    font-weight:600;
    color:#374151;
    line-height:1.4;
}

/*==================================================
    Inputs
==================================================*/

.wpgl-form-card input[type="text"],
.wpgl-form-card input[type="email"],
.wpgl-form-card input[type="number"],
.wpgl-form-card input[type="tel"],
.wpgl-form-card input[type="url"],
.wpgl-form-card textarea,
.wpgl-form-card select{
    width:100% !important;
    min-height:54px;
    padding:14px 18px !important;
    border:1px solid #d1d5db !important;
    border-radius:12px !important;
    background:#fff !important;
    color:#111827;
    font-size:15px !important;
    transition:.25s;
    box-shadow:none !important;
}

.wpgl-form-card textarea{
    min-height:120px;
    resize:vertical;
}

/*==================================================
    Placeholder
==================================================*/

.wpgl-form-card input::placeholder,
.wpgl-form-card textarea::placeholder{
    color:#9ca3af;
}

/*==================================================
    Focus
==================================================*/

.wpgl-form-card input:focus,
.wpgl-form-card textarea:focus,
.wpgl-form-card select:focus{
    outline:none;
    border-color:var(--wpgl-primary) !important;
    box-shadow:
        0 0 0 4px rgba(37,99,235,.12) !important;
}

/*==================================================
    Description
==================================================*/

.wpgl-form-card .wpforms-field-description{
    margin-top:8px;
    color:#6b7280;
    font-size:13px;
}

/*==================================================
    Required *
==================================================*/

.wpgl-form-card .wpforms-required-label{
    color:#ef4444;
}

/*==================================================
    Submit Button
==================================================*/

.wpgl-form-card .wpforms-submit-container{
    margin-top:35px !important;
    padding:0 !important;
}

.wpgl-form-card button[type="submit"]{
    width:100%;
    height:56px;
    border:none;
    border-radius:14px;
    background:var(--wpgl-primary);
    color:#fff;
    font-size:16px;
    font-weight:600;
    cursor:pointer;
    transition:.25s;
}

.wpgl-form-card button[type="submit"]:hover{
    background:var(--wpgl-primary-hover);
    transform:translateY(-1px);
}

.wpgl-form-card button[type="submit"]:active{
    transform:translateY(0);
}

/*==================================================
    Validation
==================================================*/

.wpgl-form-card input.wpforms-error,
.wpgl-form-card textarea.wpforms-error,
.wpgl-form-card select.wpforms-error{
    border-color:#ef4444 !important;
    box-shadow:
        0 0 0 4px rgba(239,68,68,.10) !important;
}

.wpgl-form-card label.wpforms-error{
    margin-top:8px !important;
    color:#ef4444 !important;
    font-size:13px;
}

/*==================================================
    Select
==================================================*/

.wpgl-form-card select{
    cursor:pointer;
}

/*==================================================
    Checkbox & Radio
==================================================*/

.wpgl-form-card ul{

    margin:0;

    padding:0;

    list-style:none;

}

.wpgl-form-card li{

    margin-bottom:12px;

}

.wpgl-form-card input[type="checkbox"],
.wpgl-form-card input[type="radio"]{

    margin-right:8px;

}

.wpgl-form-card .wpforms-container-full{

    margin:0 !important;

}

/*=========================================
    Preview Workspace
=========================================*/

.wpgl-preview-area {
    width:100%;
}

.wpgl-preview-workspace {
    min-height:700px;
    padding:30px;
    border-radius:18px;
    border:1px solid #e5e7eb;
    display:flex;
    justify-content:center;
    align-items:flex-start;
    overflow:auto;
    background-color:#f3f4f6;
    background-image:
        linear-gradient(45deg,#ececec 25%,transparent 25%),
        linear-gradient(-45deg,#ececec 25%,transparent 25%),
        linear-gradient(45deg,transparent 75%,#ececec 75%),
        linear-gradient(-45deg,transparent 75%,#ececec 75%);
    background-size:24px 24px;
    background-position:
        0 0,
        0 12px,
        12px -12px,
        -12px 0;
}

.wpgl-paper{
    width:384px;
    aspect-ratio:2 / 4;
    min-height:auto;
    padding:28px;
}


/*==================================================
    Paper
==================================================*/

.wpgl-paper{
    width:min(100%,520px);
    background:#fff;
    padding:40px;
    border-radius:6px;
    box-shadow:
        0 20px 45px rgba(0,0,0,.12);
}

.wpgl-paper:hover{
    transform:translateY(-3px);
}

/*==================================================
    Label
==================================================*/

.wpgl-label{

    display:flex;
    flex-direction:column;

    width:100%;
    height:100%;

    color:#374151;

}

.wpgl-business{
    font-size:20px;
    font-weight:700;
}

.wpgl-address{
    margin-top:8px;
    color:#4b5563;
    line-height:1.7;
}

.wpgl-divider{
    height:1px;
    background:#e5e7eb;
}

.wpgl-label-caption{

    font-size:11px;

    font-weight:700;

    color:#9ca3af;

    letter-spacing:1px;

    text-transform:uppercase;

    margin-bottom:8px;

}

.wpgl-product{

    font-size:22px;

    font-weight:700;

}

.wpgl-ingredients,

.wpgl-allergens{

    color:#374151;

    line-height:1.8;

}

.wpgl-label-footer{

    margin-top:auto;

    padding-top:20px;

    border-top:1px dashed #d1d5db;

    font-size:12px;

    color:#9ca3af;

}

/*==================================================
    Preview Text
==================================================*/

.wpgl-preview-name{

    font-size:28px;

    font-weight:700;

    color:#111827;

}

.wpgl-preview-company{

    font-size:18px;

    font-weight:600;

}

.wpgl-preview-address{

    color:#4b5563;

    line-height:1.6;

}

.wpgl-preview-city{

    color:#4b5563;

}

.wpgl-template{

    margin-bottom:24px;

}

.wpgl-template select{

    width:100%;

    height:54px;

    border-radius:12px;

    border:1px solid #d1d5db;

    padding:0 18px;

    background:#fff;

    font-size:15px;

}

/*==================================================
    Preview Buttons
==================================================*/

.wpgl-buttons{

    display:flex;

    gap:14px;

    margin-top:28px;

}

.wpgl-buttons button{

    flex:1;

    height:54px;

    border:none;

    border-radius:12px;

    background:#2563eb;

    color:#fff;

    font-size:15px;

    font-weight:600;

    transition:.25s;

    cursor:pointer;

}

.wpgl-buttons button:hover{

    background:#1d4ed8;

}

.wpgl-buttons button:disabled{

    opacity:.55;

    cursor:not-allowed;

}

/*==================================================
    Buttons
==================================================*/

.wpgl-buttons{

    display:flex;

    flex-direction:column;

    gap:14px;

    margin-top:28px;

}

.wpgl-btn{

    width:100%;

    height:56px;

    border:1px solid #dbe2ea;

    border-radius:14px;

    background:#ffffff;

    color:#111827;

    font-size:15px;

    font-weight:600;

    cursor:pointer;

    display:flex;

    justify-content:center;

    align-items:center;

    gap:10px;

    transition:all .25s ease;

}

.wpgl-btn:hover{

    background:#f8fafc;

    border-color:#cbd5e1;

    transform:translateY(-2px);

    box-shadow:0 8px 18px rgba(15,23,42,.08);

}

.wpgl-btn:disabled{

    opacity:.55;

    cursor:not-allowed;

}

.wpgl-btn-primary{

    background:#2563eb;

    color:#ffffff;

    border:none;

}

.wpgl-btn-primary:hover{

    background:#1d4ed8;

}

.wpgl-preview-note{

    margin-top:18px;

    text-align:center;

    color:#6b7280;

    font-size:14px;

    line-height:1.6;

}

/* WPform */

/* Form Card Hover */

.wpgl-form-card .wpforms-field{
    background:#fff;
    border:1px solid #eef2f7;
    border-radius:16px;
    padding:20px;
    transition:.25s ease;
}

.wpgl-form-card .wpforms-field:hover{
    border-color:#2563eb;
    box-shadow:0 12px 28px rgba(37,99,235,.08);
}

/* Better Inputs */

.wpgl-form-card input,
.wpgl-form-card textarea,
.wpgl-form-card select{

    background:#fafafa!important;

    transition:.25s;

}

.wpgl-form-card input:hover,
.wpgl-form-card textarea:hover,
.wpgl-form-card select:hover{

    background:white!important;

}

/* Beautiful Labels */

.wpgl-form-card .wpforms-field-label{

    font-size:15px;

    font-weight:700;

    color:#111827;

    margin-bottom:12px!important;

}

/* Radio Cards */

.wpgl-form-card .wpforms-field-radio li{

    border:1px solid #e5e7eb;

    border-radius:12px;

    padding:14px 16px;

    margin-bottom:12px;

    transition:.2s;

}

.wpgl-form-card .wpforms-field-radio li:hover{

    border-color:#2563eb;

    background:#eff6ff;

}

/* Checkbox Cards */

.wpgl-form-card .wpforms-field-checkbox li{

    border:1px solid #e5e7eb;

    border-radius:12px;

    padding:14px 16px;

    margin-bottom:10px;

    transition:.2s;

}

.wpgl-form-card .wpforms-field-checkbox li:hover{

    background:#f8fbff;

    border-color:#2563eb;

}

/* Address Box */

.wpgl-form-card .wpforms-field-address{

    background:#f8fafc;

    border-radius:16px;

    padding:20px;

}

/* Preview Workspace */

.wpgl-preview-workspace{

    min-height:720px;

    padding:50px;

    border-radius:18px;

    border:1px solid #e5e7eb;

    background:#f3f4f6;

    background-image:

        linear-gradient(45deg,#ececec 25%,transparent 25%),

        linear-gradient(-45deg,#ececec 25%,transparent 25%),

        linear-gradient(45deg,transparent 75%,#ececec 75%),

        linear-gradient(-45deg,transparent 75%,#ececec 75%);

    background-size:24px 24px;

    background-position:0 0,0 12px,12px -12px,-12px 0;

}

/* Paper */

.wpgl-paper{

    background:white;

    border-radius:10px;

    padding:40px;

    box-shadow:

        0 25px 70px rgba(0,0,0,.16);

    transition:.3s;

    border:1px solid #e5e7eb;

}

.wpgl-paper:hover{

    transform:translateY(-6px);

    box-shadow:

        0 35px 80px rgba(0,0,0,.2);

}

/* Nice Section Titles */

.wpgl-label-caption{

    display:inline-block;

    padding:5px 12px;

    background:#eff6ff;

    color:#2563eb;

    border-radius:999px;

    font-size:11px;

    font-weight:700;

    letter-spacing:.8px;

    margin-bottom:12px;

}

/* Product Name */

.wpgl-product{

    font-size:28px;

    font-weight:800;

    color:#111827;

}

/* Business Name */

.wpgl-business{

    font-size:24px;

    font-weight:800;

}

/* Divider */

.wpgl-divider{

    height:2px;

    background:linear-gradient(to right,#2563eb,#e5e7eb);

}

/* Buttons */

.wpgl-btn{

    font-size:16px;

    border-radius:16px;

    height:58px;

    font-weight:700;

}

.wpgl-btn:hover{

    transform:translateY(-3px);

}

/* Live Preview Header */

.wpgl-card-header{

    background:linear-gradient(180deg,#ffffff,#f8fafc);

}

@keyframes paperFloat{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-4px);

    }

    100%{

        transform:translateY(0);

    }

}

.wpgl-paper{

    animation:paperFloat 5s ease-in-out infinite;

}

.wpforms-container input.wpforms-field-medium, .wp-core-ui div.wpforms-container select.wpforms-field-medium, .wp-core-ui div.wpforms-container .wpforms-field-row.wpforms-field-medium {
    max-width: 100%;
    width:100% !important;
}

.wpforms-container input.wpforms-field-medium, .wpforms-container select.wpforms-field-medium, .wpforms-container .wpforms-field-row.wpforms-field-medium, .wp-core-ui div.wpforms-container input.wpforms-field-medium, .wp-core-ui div.wpforms-container select.wpforms-field-medium, .wp-core-ui div.wpforms-container .wpforms-field-row.wpforms-field-medium {
    max-width: 100%;
    width:100% !important;
}

.wpforms-container .wpforms-field {
    padding: 15px !important;
}

.wpforms-container input.wpforms-field-medium, .wpforms-container select.wpforms-field-medium, .wpforms-container .wpforms-field-row.wpforms-field-medium, .wp-core-ui div.wpforms-container input.wpforms-field-medium, .wp-core-ui div.wpforms-container select.wpforms-field-medium, .wp-core-ui div.wpforms-container .wpforms-field-row.wpforms-field-medium {
    max-width: 100%;
    width:100% !important;
}


.wpgl-preview-item{

    margin-bottom:18px;

}

.wpgl-preview-item[data-type="heading"]{

    font-size:26px;

    font-weight:700;

    color:#111827;

}

.wpgl-preview-item[data-type="text"]{

    font-size:16px;

    line-height:1.6;

    color:#374151;

}

.wpgl-preview-item[data-type="paragraph"]{

    white-space:pre-line;

    line-height:1.8;

    color:#4b5563;

}

.wpgl-preview-item[data-type="small"]{

    font-size:13px;

    color:#6b7280;

}


/* Preview styling */

.wpgl-preview-item[data-type="heading"] .wpgl-preview-value{
    font-size:30px;
    font-weight:700;
    line-height:1.2;
    color:#111827;
}

.wpgl-preview-item[data-type="text"] .wpgl-preview-value{
    font-size:18px;
    font-weight:500;
    line-height:1.5;
}

.wpgl-preview-item[data-type="paragraph"] .wpgl-preview-value{
    font-size:15px;
    line-height:1.7;
    white-space:pre-line;
    color:#4b5563;
}

.wpgl-preview-item[data-type="small"] .wpgl-preview-value{
    font-size:12px;
    color:#6b7280;
}


.wpgl-preview-item strong{
    display:block;
    margin-bottom:6px;
    font-size:11px;
    font-weight:700;
    letter-spacing:1px;
    text-transform:uppercase;
    color:#9ca3af;
}


.wpgl-item:last-child{
    margin-bottom:0;
}

.wpgl-item-label{
    font-size:11px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.08em;
    color:#6b7280;
    margin-bottom:6px;
}

.wpgl-preview-value{
    white-space:normal;
    word-break:break-word;
}













/* ---------------------------------------
   Layout
---------------------------------------- */




/* ---------------------------------------
   Preview Paper
---------------------------------------- */

.wpgl-paper {

    background: #fff;
    border-radius: 6px;
    border: 8px solid #f4efe8;
    padding: 32px;
    box-shadow: 0 12px 40px rgba(0,0,0,.12);

}


/* ---------------------------------------
   Label Items
---------------------------------------- */

.wpgl-preview-value {

    font-family: Inter, system-ui, sans-serif;

}


/* ---------------------------------------
   Business Name
---------------------------------------- */

.label-business-name .wpgl-preview-value{

    color:#2563EB;
    font-size:22px;
    font-weight:700;
    text-align:center;

}


/* ---------------------------------------
   Product Name
---------------------------------------- */

.label-product-name .wpgl-preview-value{
    font-size:24px;
    font-weight:800;
    color:#1E293B;
    text-align:center;
    letter-spacing:-1px;

}


/* ---------------------------------------
   Address
---------------------------------------- */

.label-address .wpgl-preview-value{
    color:#64748B;
    text-align:center;
    font-size:14px;

}


/* ---------------------------------------
   Ingredients
---------------------------------------- */

.label-ingredients{

    border-top:2px solid #DBEAFE;
    padding-top:18px;

}

.label-ingredients .wpgl-preview-value {

    font-size: 14px;
    line-height: 1.5;

}

.wpgl-paper{
    background:#fff;
    border-radius:14px;
    border:1px solid #D6E4F5;
    box-shadow:
        0 20px 60px rgba(37,99,235,.08);
}

.wpgl-btn-primary{

    background:#2563EB;

}

.wpgl-btn-primary:hover{

    background:#1D4ED8;

}


/* ---------------------------------------
   Footer
---------------------------------------- */

.label-made-on,
.label-batch{

    color:#64748B;
    font-size:13px;

}

.label-made-on .wpgl-preview-value,
.label-batch .wpgl-preview-value {

    font-size: 13px;
    color: #666;

}