/* =====================================
   RCTX LOGO MAKER
   ACCORDION BUTTONS
===================================== */

.controls {
    width: 100%;
}


.accordion {
    margin-bottom: 12px;
    border-radius: 12px;
    overflow: hidden;
    background: #ffffff;
    border: 1px solid #dbeafe;
}


/* Toggle button */

.accordion-header {

    width: 100%;
    padding: 15px 18px;

    display: flex;
    justify-content: space-between;
    align-items: center;

    background: #0052a3;
    color: white;

    border: none;
    cursor: pointer;

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

    text-align: left;

    transition: 0.25s ease;

}


/* Hover */

.accordion-header:hover {

    background: #003f7d;

}


/* Open state */

.accordion-header.active {

    background: #003f7d;

}



/* Add arrow */

.accordion-header::after {

    content: "＋";

    font-size: 22px;
    font-weight: bold;

}



/* Change icon when open */

.accordion-header.active::after {

    content: "−";

}



/* Hidden content */

.accordion-content {

    padding: 15px;

    background: #f8fbff;

}


/* Smooth labels */

.accordion-content label {

    display: block;

    margin-bottom: 15px;

    font-size: 14px;
    font-weight: 600;

}


/* Inputs inside accordion */

.accordion-content input,
.accordion-content select {

    width: 100%;

    margin-top: 6px;

    padding: 10px;

    border-radius: 8px;

    border: 1px solid #cbd5e1;

    font-size: 15px;

}