* {
box-sizing: border-box;
}

body {

margin: 0;

font-family: 'Inter', sans-serif;

background: #f6f7fb;

color: #222;

}

/* Layout */

/* Layout */

.layout {

display: flex;
height: 100vh;

}

.layout.fullscreen .sidebar {

width: 0;
padding: 0;
overflow: hidden;

}
/* Collapse sidebar */

.sidebar {

width: 320px;
flex-shrink: 0;

background: white;
border-right: 1px solid #eee;
padding: 20px;

overflow-y: auto;

transition: 0.3s ease;

}

.sidebar.collapsed {

width: 0;
padding: 0;
overflow: hidden;
border: none;

}


/* Sidebar */

.sidebar {

min-width: 0;
overflow: hidden;

background: white;

border-right: 1px solid #eee;

padding: 20px;

overflow-y: auto;

}

/* Sections */

.section {

background: #ffffff;

border-radius: 12px;

padding: 16px;

margin-bottom: 20px;

box-shadow: 0 4px 12px rgba(0,0,0,0.04);

}

.section h3 {

margin-top: 0;

font-weight: 500;

font-size: 16px;

}

/* Input */

.sidebar input {

width: 100%;

padding: 12px;

border-radius: 8px;

border: 1px solid #ddd;

font-size: 14px;

transition: 0.2s;

}

.sidebar input:focus {

outline: none;

border-color: #888;

}

/* Viewer */

.viewer-wrapper {

flex: 1;
background: #eaeaea;

position: relative;
z-index: 1;

}

#viewer {

width: 100%;
height: 100%;

display: flex;
flex: 1;

}

.model-select{

width:100%;

padding:12px;

border-radius:8px;

border:1px solid #ddd;

font-size:14px;

background:white;

}

/* Silhouettes */

.silhouette-title {

padding: 10px;

background: #f4f5f8;

border-radius: 8px;

margin-top: 10px;

cursor: pointer;

font-weight: 500;

transition: 0.2s;

}

.silhouette-title:hover {

background: #eceef3;

}

.silhouette-subtitle {

padding: 8px;

background: #f7f7f7;

border-radius: 6px;

margin-top: 6px;

cursor: pointer;

font-size: 14px;

}


/* Desktop grid */

.silhouette-images {

display:grid !important;
grid-template-columns:1fr 1fr !important;
gap:10px;

}

.thumb {

width:100%;
height:120px !important;

object-fit:contain;

background:#f5f5f5;

padding:8px;

border-radius:8px;

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

}


.silhouette-images img {
width:100%;
height:auto;
}

.thumb:hover {

border-color: #000;

transform: scale(1.02);

}

.cta-button{

display:block;
width:80%;

margin:16px auto 0 auto;

padding:12px;

border:none;
border-radius:10px;

background:#8a4b2a;
color:white;

font-weight:500;

cursor:pointer;
transition:0.2s;

}

.cta-button:disabled{
opacity: 0.55;
cursor: not-allowed;
box-shadow: none;
}

.cta-button:hover{

transform:translateY(-1px);
box-shadow:0 6px 14px rgba(0,0,0,0.12);

}

.cta-button.loading{
opacity:0.8;
}

.cta-button.success{
background:#2e7d32;
opacity:1;
}



/*Anvandarvillkor*/

.terms{
margin: 8px 0 18px 0;
font-size:13px;
color:#666;
padding-left:4px;
}

.terms label{
display:flex;
align-items:center;
gap:8px;
line-height:1.3;
}

.terms input{
width:auto;
padding:0;
margin:0;
flex-shrink:0;
}

.terms a{
color:#8a4b2a;
text-decoration:none;
}

.terms a:hover{
text-decoration:underline;
}

/* Info text */

.info-text{

font-size:13px;
color:#666;

margin-bottom:10px;
line-height:1.4;

font-style: italic;

}

.topbar{
height:50px;
background:white;
border-bottom:1px solid #eee;
display:flex;
align-items:center;
padding:0 15px;
z-index:20;
}

.toggle-btn{
background:white;
border:1px solid #ddd;
padding:6px 12px;
border-radius:8px;
cursor:pointer;
font-size:14px;
transition:0.2s;
}

.toggle-btn:hover{
background:#f5f5f5;
}

/* DESKTOP POSITION */
@media (min-width: 901px){

.toggle-btn{

position: fixed;
top: 15px;
left: 20px;
right: auto;
transform: none;

padding:6px 14px;
font-size:13px;

z-index:100;

}

}

/* COOKIE POPUP */

/* COOKIE POPUP */

.cookie-notice{

display:none;

position:fixed;

left:15px;
right:15px;
bottom:15px;

background:white;
color:#333;

padding:12px 16px;

border-radius:10px;
box-shadow:0 8px 24px rgba(0,0,0,0.12);

font-size:13px;

z-index:999999;

max-width:420px;
margin:auto;

transform:translateZ(0);

}

.cookie-notice button{

margin-left:8px;
padding:4px 10px;

border:none;
background:#8a4b2a;
color:white;

border-radius:6px;
cursor:pointer;

font-size:12px;

}

@keyframes cookieFade{
from{
opacity:0;
transform:translateY(10px);
}
to{
opacity:1;
transform:translateY(0);
}
}

/* MOBILE */

@media (max-width: 900px) {

/* Layout mobil */

.layout {

display: flex;
flex-direction: column;
height: 100vh;

}

.viewer-wrapper {
height: 55vh;
min-height: 300px;
}

/* Fullscreen mobil */

.layout.fullscreen .sidebar {

display: none;

}

.layout.fullscreen .viewer-wrapper {

height: 100vh;

}

.sidebar {

height: auto;

}

.sidebar {

height: auto;
width: 100%;
max-width: 100%;
flex-shrink: 0;

}

.sidebar {
padding-top: 60px;
}

.sidebar.collapsed {

width: 0;
padding: 0;
overflow: hidden;
border: none;

}

/* Grid för siluetter */

.sidebar .silhouette-images {

display: grid !important;
grid-template-columns: repeat(2, 1fr);
gap: 10px;
padding-top: 8px;

}

.sidebar .thumb {

width: 100% !important;
margin: 0;

}

.toggle-btn {

position: absolute;
top: 15px;
left: 15px;
z-index: 50;

background: white;
border: 1px solid #ddd;
padding: 8px 12px;
border-radius: 8px;
cursor: pointer;

box-shadow: 0 2px 8px rgba(0,0,0,0.08);

}

.sidebar {

transition: 0.3s ease;

}

.sidebar.collapsed {

transform: translateX(-100%);
position: absolute;
height: 100%;
z-index: 20;

}


.layout.fullscreen #viewer {

width: 100%;
height: 100%;

}

.viewer-wrapper {

transition: 0.3s ease;

}



/* Desktop grid fix */

.silhouette-images{

display:grid !important;
grid-template-columns:repeat(2,1fr);
gap:10px;

}

.silhouette-images img{
width:100%;
height:auto;
}

/* Desktop Grid */

.silhouette-images{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:10px;
}

.silhouette-images .thumb{
width:100%;
margin:0;
}


}