/* ==========================================================
   CARDS
========================================================== */

.png-card{

    background:#ffffff;

    border:1px solid #E8EDF5;

    border-radius:20px;

    padding:32px;

    margin-bottom:40px;

    box-shadow:
        0 10px 28px rgba(15,23,42,.05);

    transition:.25s;

}

.png-card:hover{

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

}

/* ==========================================================
   CARD HEADER
========================================================== */

.png-card-header{

    display:flex;

    justify-content:space-between;

    align-items:flex-start;

    margin-bottom:30px;

}

.png-card-header h1{

    margin:0;

    font-size:30px;

    font-weight:700;

    color:#111827;

}

.png-card-header p{

    margin-top:8px;

    color:#64748B;

    font-size:15px;

}

/* ==========================================================
   RESULT CARD
========================================================== */

.png-card > h2{

    margin:0 0 26px;

}

.result-card{

    background:#ffffff;

    border:1px solid #E5E7EB;

    border-radius:18px;

    padding:24px;

    margin-bottom:24px;

    transition:.25s;

}

.result-card:hover{

    transform:translateY(-2px);

    box-shadow:
        0 14px 36px rgba(15,23,42,.06);

}

/* ==========================================================
   RESULT HEADER
========================================================== */

.result-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:18px;

}

.result-header h3{

    margin:0;

    font-size:18px;

    font-weight:700;

    color:#111827;

}

/* ==========================================================
   OUTPUT BOX
========================================================== */

.output-box{

    width:100%;

    min-height:70px;

    background:#F8FAFC;

    border:1px solid #E5E7EB;

    border-radius:14px;

    padding:18px;

    font-size:15px;

    line-height:1.75;

    color:#0F172A;

    white-space:pre-wrap;

    word-break:break-word;

    transition:.25s;

}

.output-box:hover{

    border-color:#CBD5E1;

}

.output-box.large{

    min-height:220px;

}

.output-box.xlarge{

    min-height:340px;

}

/* ==========================================================
   TAGS
========================================================== */

.tags-wrapper{

    display:flex;

    flex-wrap:wrap;

    gap:10px;

}

.tag{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:9px 14px;

    margin:0 6px 8px 0;

    background:#EEF7F3;

    color:#0E6544;

    border-radius:999px;

    font-size:13px;

    font-weight:600;

    border:1px solid #D7EFE5;

}



/* ==========================================
   Generated Listing Textareas
========================================== */

.result-card textarea{

    width:100%;

    min-height:80px;

    padding:18px;

    border:1px solid #D9E1EC;

    border-radius:14px;

    background:#F8FAFC;

    font-size:15px;

    line-height:1.7;

    color:#111827;

    font-family:inherit;

    resize:vertical;

    transition:.2s ease;

}

.result-card textarea:focus{

    outline:none;

    border-color:#0E6544;

    box-shadow:0 0 0 4px rgba(14,101,68,.10);

}
/* ==========================================================
   BUNDLE PLANNER (Prompt Generator page)
========================================================== */

.png-bundle-planner{

    display:flex;

    flex-direction:column;

    gap:10px;

    margin-top:20px;

}

.bundle-item{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:16px;

    padding:14px 16px;

    border:1px solid #E5E7EB;

    border-radius:12px;

    background:#F8FAFC;

}

.bundle-item strong{

    color:#0E6544;

    margin-right:6px;

}

.generate-prompt{

    background:#fff;

    color:#0E6544;

    border:1.5px solid #0E6544;

    border-radius:9px;

    padding:8px 16px;

    font-size:13px;

    font-weight:600;

    cursor:pointer;

    transition:.2s;

    flex-shrink:0;

}

.generate-prompt:hover{

    background:#0E6544;

    color:#fff;

}

.generate-prompt:disabled{

    opacity:.6;

    cursor:not-allowed;

}

.generate-prompt.generated{

    background:#EEF7F3;

    border-color:#BFE3D1;

    color:#0E6544;

}

/* ==========================================================
   GENERATED PROMPT CARDS
========================================================== */

.generated-prompt-card{

    border:1px solid #E5E7EB;

    border-radius:12px;

    padding:16px;

    margin-bottom:14px;

    background:#F8FAFC;

}

.generated-header{

    display:flex;

    align-items:center;

    justify-content:space-between;

    margin-bottom:10px;

}

.generated-header strong{

    color:#111827;

    font-size:14px;

}

.generated-header div{

    display:flex;

    gap:8px;

}

.copy-generated,
.delete-generated{

    background:#fff;

    border:1px solid #E2E8F0;

    border-radius:8px;

    padding:6px 12px;

    font-size:12px;

    font-weight:600;

    color:#334155;

    cursor:pointer;

    transition:.2s;

}

.copy-generated:hover{

    background:#EEF7F3;

    border-color:#BFE3D1;

    color:#0E6544;

}

.delete-generated:hover{

    background:#FEF2F2;

    border-color:#FEE2E2;

    color:#DC2626;

}

.generated-prompt-card textarea{

    width:100%;

    box-sizing:border-box;

    border:1px solid #E5E7EB;

    border-radius:8px;

    padding:12px;

    font-size:13.5px;

    color:#334155;

    background:#fff;

    resize:vertical;
}