/* =========================================================
   CAMPAIGN MANAGEMENT
========================================================= */

.campaign-dashboard{
    width:100%;
    color:#fff;
}

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

.campaign-hero{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:20px;
    background:#111;
    border-radius:10px;
    padding:20px;
    margin-bottom:20px;
}

.campaign-hero h2{
    margin:0;
    color:#fff;
    font-size:28px;
}

.campaign-hero p{
    margin:8px 0 0;
    color:#bbb;
}

.campaign-date-badge{
    background:#0b3d91;
    color:#fff;
    padding:10px 18px;
    border-radius:8px;
    font-weight:bold;
    font-size:18px;
}

/* =========================================================
   GRID
========================================================= */

.campaign-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:20px;
    margin-bottom:20px;
}

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

.campaign-card{
    background:#1f1f1f;
    border-radius:10px;
    padding:20px;
    margin-bottom:20px;
}

.campaign-card h3{
    margin:0 0 15px;
    color:#fff;
}

/* =========================================================
   SELECTORS
========================================================= */

.campaign-select-row{
    display:grid;
    grid-template-columns:1fr 1fr 1fr;
    gap:12px;
    margin-bottom:20px;
}

.campaign-select-row label{
    display:block;
    color:#ddd;
    margin-bottom:6px;
}

.campaign-select-row select{
    width:100%;
}

/* =========================================================
   INFO
========================================================= */

.campaign-info-line{
    display:flex;
    justify-content:space-between;
    padding:10px 0;
    border-bottom:1px solid #333;
}

.campaign-info-line:last-child{
    border-bottom:none;
}

.campaign-info-line span{
    color:#aaa;
}

.campaign-info-line strong{
    color:#fff;
}

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

.campaign-preview{
    width:100%;
    overflow:hidden;
    border-radius:8px;
    background:#fff;
}

.campaign-preview-frame{
    width:100%;
    height:calc(100vh - 220px);
    border:none;
    display:block;
    background:#fff;
}

/* =========================================================
   IMAGE PREVIEW
========================================================= */

.campaign-preview-img{
    width:100%;
    display:block;
    border-radius:8px;
}

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

.campaign-actions{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
}

.campaign-actions .btn,
.campaign-actions button{
    padding:12px 18px;
    border:none;
    border-radius:6px;
    cursor:pointer;
    font-weight:bold;
    text-decoration:none;
}

.btn{
    background:#0b3d91;
    color:#fff;
}

.btn-save{
    background:#28a745;
    color:#fff;
}

.btn-whatsapp{
    background:#25D366;
    color:#fff;
}

.btn-facebook{
    background:#1877F2;
    color:#fff;
}

.btn-download{
    background:#ff9800;
    color:#fff;
}

.contacts{
    background:#6f42c1;
    color:#fff;
}

/* =========================================================
   PANEL
========================================================= */

#campaignPanel{
    margin-top:20px;
}

/* =========================================================
   IFRAME PAGE
========================================================= */

.campaign-frame-wrap{
    width:100%;
    height:calc(100vh - 70px);
    overflow:hidden;
}

.campaign-frame{
    width:100%;
    height:100%;
    border:none;
    display:block;
    background:#fff;
}

/* =========================================================
   RESPONSIVE
========================================================= */

@media(max-width:1000px){

    .campaign-grid{
        grid-template-columns:1fr;
    }

    .campaign-select-row{
        grid-template-columns:1fr;
    }

    .campaign-hero{
        flex-direction:column;
        align-items:flex-start;
    }

    .campaign-preview-frame{
        height:70vh;
    }

}

.campaign-toolbar{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:20px;

    flex-wrap:wrap;

}

.campaign-toolbar-left{

    display:flex;

    align-items:center;

    gap:10px;

    flex-wrap:wrap;

}

.campaign-toolbar-left label{

    margin:0;

    color:#fff;

    font-weight:bold;

}

.campaign-toolbar-left select{

    width:90px;

}

.campaign-toolbar-right{

    color:#fff;

    font-size:20px;

    font-weight:bold;

}

.campaign-preview-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:20px;

}

.campaign-column{

    background:#1f1f1f;

    border-radius:10px;

    padding:15px;

}

.campaign-column h3{

    margin:0;

    color:#fff;

}

.campaign-date{

    margin:10px 0 15px;

    color:#4caf50;

    font-weight:bold;

    text-align:center;

    font-size:18px;

}

.campaign-preview-frame{

    width:100%;

    height:1850px;

    border:none;

    background:#fff;
    
    display:block;

}

/* =========================================================
   CAMPAIGN ACTION BUTTONS
========================================================= */

.campaign-column-actions{

    display:flex;

    flex-wrap:wrap;

    gap:8px;

    margin-top:15px;

}

.campaign-column-actions .btn{

    flex:1 1 120px;

    text-align:center;

    padding:10px 14px;

    border-radius:6px;

    font-size:14px;

    font-weight:bold;

    text-decoration:none;

}