/* Estilos existentes */
body {
    display: flexbox;
    font-family: 'Verdana', Arial, sans-serif;
    font-size: 16px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    margin: 0;
    height: 100vh;
    background-color: #cccccc;
    /*background-image: linear-gradient( 0deg, #FF0000, #ffa500, #ffff00, #008000, #0000ff, #3F00FF, #ee82ee);*/
}

header {
    background-color: #333;
    color: #fff;
    padding: 1rem 0;
    text-align: center;
}

header h1 {
    margin-bottom: 0.5rem;
}

nav ul {
    list-style: none;
    padding: 0;
}

nav ul li {
    display: inline;
    margin: 0 10px;
}

nav ul li a {
    color: #fff;
    text-decoration: none;
}

#card-form-container, #pix-container, #boleto-container {
    width: 100%;
    max-width: 600px;
    margin: auto;
    padding: 20px;
    background: white;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
    display: none;
}

#btnPagar {
    margin-top: 20px;
    padding: 10px 20px;
    font-size: 18px;
    cursor: pointer;
    background-color: #009ee3;
    border: none;
    color: white;
    border-radius: 5px;
}

.container {
    display: flex;
    flex-direction: row;
    width: 100%;
    height: auto;
}

.controls {
    width: 40%;
    padding: 20px;
    background: #e0e0e030;
    overflow-y: auto;
}

.canvas-container {
    width: 60%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.canvas {
    width: 55%;
    aspect-ratio: 210 / 297;
    position: relative;
    background: black;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
}

#cardPaymentBrick_container {
    background: black;
}

.frame {
    position: absolute;
    width: 100%;
    height: 100%;
    border: 15px solid black;
    box-sizing: border-box;
}

.radio-color {
    appearance: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    border: 2px solid #000;
}

.radio-codigo {
    width: 25px;
    height: 25px;
    cursor: pointer;
}

.radio-color[value="black"] { background-color: black; }
.radio-color[value="darkslategray"] { background-color: darkslategray; }
.radio-color[value="DodgerBlue"] { background-color: DodgerBlue; }
.radio-color[value="indigo"] { background-color: indigo; }
.radio-color[value="magenta"] { background-color: magenta; }
.radio-color[value="darkmagenta"] { background-color: darkmagenta; }
.radio-color:checked {
    outline: 3px solid #000;
}

.icon-option {
    width: 45px;
    height: 45px;
    margin: 5px;
    cursor: pointer;
    border: 2px solid transparent;
    border-radius: 30%;
    transition: transform 0.2s;
    background: black;
}

.icon-option:hover {
    transform: scale(1.1);
}

.icon-option.selected {
    border: 2px solid black;
}

.text-input, textarea {
    display: block;
    width: 100%;
    padding: 5px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-family: 'Verdana', Arial, sans-serif;
    font-size: 14px;
}

textarea {
    resize: vertical; /* Permite redimensionar verticalmente */
}

.nomeQuadro, .text, .extra-text {
    position: absolute;
    text-align: center;
    width: 100%;
    color: white;
}

.nomeQuadro { font-size: 20px; font-weight: bold; top: 67%; }
.text { font-size: 13px; top: 73%; }
.extra-text { font-size: 10px; }

#dateText {
    top: 89%;
}

#cityText {
    top: 91.5%;
}

#coordenadas {
    top: 93.5%;
    font-size: 9px;
    font-weight: bold;
}

.decor-image {
    position: absolute;
    width: 88%;
    height: auto;
    top: 3%;
    left: 50%;
    transform: translateX(-50%);
}

#barcode {
    display: none;
    top: 82%;
}

.barcode {
    position: absolute;
    width: 20%;
    left: 50%;
    transform: translateX(-50%);
    display: none;
}

#barcodeQR {
    display: none;
    top: 83%;
}

.barcodeQR {
    position: absolute;
    width: 9%;
    left: 50%;
    transform: translateX(-50%);
    display: none;
}

.inline-controls {
    display: flex;
    gap: 20px;
    align-items: flex-end;
}

.inline-controls > div {
    flex: 1;
}

.inline-controls label {
    display: block;
    margin-bottom: 5px;
}

#qrcodeInputContainer, #spotifyInputContainer {
    margin-top: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
}

input[type="radio"] {
    margin-right: 5px;
}

.whatsapp-button {
    display: block;
    width: 100%;
    padding: 10px;
    margin-top: 20px;
    background-color: #25D366;
    color: white;
    border: none;
    border-radius: 4px;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.3s;
}

.whatsapp-button:hover {
    background-color: #128C7E;
}

/* Estilos para o botão de pagamento */
#finalizarCompra {
    background-color: #009ee3;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

#finalizarCompra:hover {
    background-color: #007bb5;
}

.barcode-input-container {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.barcode-input-container > div {
    display: flex;
    align-items: center;
    gap: 10px;
}

.barcode-input-container label {
    margin-bottom: 0;
}

#qrcodeInputContainer, #spotifyInputContainer {
    display: none;
    align-items: center;
    gap: 10px;
}


/* Media Queries para Responsividade */
@media (max-width: 768px) {
    .container {
        flex-direction: column;
    }

    .controls {
        width: 100%;
        padding: 10px;
        background: #e0e0e030;
        overflow-y: auto;
    }

    .canvas-container {
        width: 100%;
    }

    .canvas {
        width: 80%;
    }

    #coordenadas {
        top: 94%;
        font-size: 9px;
        font-weight: bold;
    }

    .inline-controls {
        flex-direction: column;
        gap: 10px;
    }

    .inline-controls > div {
        width: 100%;
    }

    .barcode-input-container {
        flex-direction: column;
    }

    .barcode-input-container > div {
        flex-direction: column;
        align-items: flex-start;
    }
}

@media (max-width: 480px) {
    .canvas {
        width: 90%;
    }

    .nomeQuadro {
        font-size: 18px;
    }

    .text {
        font-size: 12px;
    }

    .extra-text {
        font-size: 9px;
    }

    .whatsapp-button {
        font-size: 14px;
    }
}