body {
    font-family: Arial, sans-serif;
    background: darkgreen;
    margin: 0;
    padding: 0;
}


.app {
    background: #e6e6e6;
    max-width: 450px;
    margin: 20px auto;
    padding: 20px;
    border-radius: 10px;
}

/* App title */

.app-title {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}


.app-title img {
    width: 45px;
    height: 45px;
    object-fit: cover;
    border-radius: 8px;
    border: 2px solid black;
}


.app-title h2 {
    margin: 0;
    font-size: 22px;
}



/* Size inputs */

.sizes {
    display: flex;
    gap: 10px;
    margin-top: 15px;
}


.sizes div {
    flex: 1;
}


input {
    width: 100%;
    padding: 10px;
    margin-top: 5px;
    box-sizing: border-box;
}

/* Country select and size inputs */

#country,
#widthMM,
#heightMM{

    background:white;
    color:black;
    border:1px solid #ccc;
    padding:10px;
    border-radius:8px;

}

/* Canvas area */

.canvas-container {

    position: relative;

    display: flex;

    justify-content: center;

    margin: 20px 0;

}


canvas {

    width: 300px;

    height: 300px;

    border: 2px solid #444;

    background: white;

    border-radius: 8px;

    touch-action: none;

}



/* Glass Move / Lock button */

.glass-button {
	width: auto;

    position: absolute;

    bottom: 15px;

    left: 50%;

    transform: translateX(-50%);


    padding: 7px 20px;


    background: rgba(255,255,255,0.35);

    backdrop-filter: blur(8px);


    border: 1px solid rgba(255,255,255,0.5);

    border-radius: 15px;


    color: #064e3b;

    font-size: 12px;

    font-weight: bold;


    cursor: pointer;


    box-shadow: 0 4px 10px rgba(0,0,0,0.2);

}



/* Normal buttons */

button {

    width: 100%;

    padding: 12px;

    margin-top: 20px;

    background: #007bff;

    color: white;

    border: none;

    border-radius: 5px;

}

button:active {
    background: #0056b3;
    transform: scale(0.98);
}

.footer{

    margin-top:40px;
    padding:25px;
    background:#222;
    color:white;
    text-align:center;

}

.footer-brand img {
    width: 30px;
    height: 30px;
    object-fit: cover;
    border-radius: 6px;
    border: 1px solid black;
}
.footer-brand{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:5px;
}

.footer h3{

    margin-bottom:10px;

}


.footer p{

    font-size:14px;

}


.footer-links{

    margin:20px 0;

}


.footer-links a{

    color:#4da6ff;
    text-decoration:none;
    margin:0 10px;
    font-size:14px;

}


.footer-links a:hover{

    text-decoration:underline;

}


.copyright{

    margin-top:15px;
    opacity:0.8;

}

hr {
    border: none;
    border-top: 1px solid #ccc;
    margin: 15px 0;
}

.tabs{
    display:flex;
    gap:0;
    margin:15px 0;
}

.tabs button{
    flex:1;
    padding:10px;

    border:1px solid #999;
    border-radius:0;

    background:lightgrey;
    color:#333;

    cursor:pointer;

    margin:0;

    font-weight:bold;
}

.tabs button + button{
    border-left:none;
}

.tabs button:hover{
    background:#555;
    color:white;
}

.tabs button.active{
    background: #1976d2;
    color:white;
}

.adjust-tabs{
    display:flex;
    width:100%;
    margin-top:15px;
    border-bottom:1px solid #ccc;
}


.adjust-tabs button{

    flex:1;
    padding:12px;
    border:1px solid #ccc;
    border-bottom:none;
    background:lightgrey;
    color:black;
    font-size:15px;
    cursor:pointer;

}


/* Active tab */

.adjust-tabs .adjust-active{

    background:#1976d2;
    color:white;
    border-color:#1976d2;

}


#adjustSlider input{

    width:100%;

}

.loading {
    display:flex;
    justify-content:center;
    align-items:center;
    gap:10px;
    margin-top:15px;
    font-weight:bold;
    color:#333;
}


.spinner {
    width:18px;
    height:18px;
    border:3px solid #ccc;
    border-top:3px solid #007bff;
    border-radius:50%;
    animation:spin 1s linear infinite;
}


@keyframes spin {

    from {
        transform:rotate(0deg);
    }

    to {
        transform:rotate(360deg);
    }

}

.print-controls label {
    display: block;
    margin-top: 15px;
    margin-bottom: 5px;
}

.print-controls select,
.print-controls input {
    margin-bottom: 15px;
}

#printTab select {
    width: 100%;
    padding: 8px;
    font-size: 15px;
    border-radius: 8px;
}

.print-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 15px;
    gap:15px;
}

.print-row label {
    margin: 0;
    display: flex;
    align-items: center;
    height: 40px;
    position: relative;
    top: -4px;   /* Adjust this value */
}
    


.print-row select {
    width: 55%;
    padding: 10px;
    border-radius: 8px;
    font-size: 15px;
}

#canvas {
    cursor: grab;
}

#canvas:active {
    cursor: grabbing;
}

@media(max-width:500px){

    .app{
        margin:10px;
        padding:15px;
    }

}

@media(max-width:400px){

.footer-links a{
    display:block;
    margin:10px 0;
}

}