/* Backend ----------------------- */
.delete-btn {
    display: none;
    background-color: red;
    color: white;
    padding: 5px 10px;
    border: none;
    cursor: pointer;
}

.delete-btn:hover {
    background-color: darkred;
}

/* Layout ----------------------- */
span {
	cursor:pointer; 
}

.product-shortcode {
	background-color: white;
	padding: 0 30px 30px 30px;
	border-radius: 1em;
}

.sticker-selection {
    max-width: 100%;
}



@media (min-width: 860px) {
	  .container-lappa {
		  display: flex;
	  }
	  .merged-image {
		  margin-right: auto;
	  }
  }

@media (max-width: 859px) {
		.knapp-lapp div[style="display: flex; align-items: center; width:100%;"]{
    	flex-direction: column;
	} 
	.number {
		padding-bottom: 15px;
		margin-right: 0;
	}	

	.merged-header h5 {
		margin-bottom: 0;
	}
	
	.fonts {
		padding:4px;
	}
	
	.sticky-header {
		background-color: white;
		position: sticky;
		top:0;
		padding-top: 1.65em;
		z-index: 10;
	}
}

/* Tekst ----------------------- */
.input-form {
    width: 100%;
}

.input-form {
	width:auto;
	margin-right: 15px;
}

.text-field {
	line-height: 1.5rem;
	font-size: 1rem;
}

.text-field:focus {
	box-shadow: 0 0 10px #CCB9AC;
}

.input-wrapper {
    position: relative;
    display: inline-block;
    width: 100%;
}

.text-input {
	border-radius: 0.5em;
	border: 1px solid #ddd;
	outline: none;
    width: 100%;
	padding-left: 10px;
	padding-top: 6px;
	padding-bottom: 6px;
    font-size: 16px;
	margin-bottom: 4px;
}

.char-count {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 12px;
    color: gray;
    pointer-events: none;
}

/* Forhåndsvisning ----------------------- */
.image-preview-item img {
	width: 98%;
	height: auto;
	margin: 0 auto;
	object-fit: cover;
	border: 1px solid #ddd;
	background: #fff;
	border-radius: 16px;
}

.merged-image {
	padding-bottom: 1em;
}

.merged-header.image-preview-item {
	position: sticky;
	top: 0;
	left: 0; /* Adjust as needed */
	z-index: 10; /* Ensures it stays above other content */
}

/* Ikoner/motiv/bakgrunn ----------------------- */
.tab {
	margin: 30px 50px;
}

.image-gallery {
	margin-top: 30px;
  display: flex;
  flex-wrap: wrap;
	  justify-content: center;
  align-items: center;
}

.custom-upload-item.icon_upload img {
    width: 100px;
    height: 100px;
    object-fit: contain;
	padding: 5px;
}
@media (max-width: 583px) {
    .tab {
	margin: 0;
}
	.custom-upload-item.icon_upload img {
		width: 50px;
		height: 50px;
	} 
  }

.custom-upload-item.background_upload img {
	width: 200px;
	height: 66px;
}

.custom-upload-item.icon_upload img,
.custom-upload-item.background_upload img {
	object-fit: cover;
	padding: 5px;
	background: #fff;
	border-radius: 10px;
}

.custom-upload-item.icon_upload.selected>img, 
.custom-upload-item.background_upload.selected>img,
.font-selector.selected{
    box-shadow: 0 0 0px #CCB9AC;
	background-color: #F6DECD;

}

/* Font-valg ----------------------- */
.font-selector {
	border: 1px solid #ddd;
	border-radius: 10px;
	width: 46%;
	/* height: 75px; */
}

@media (max-width: 774px) {
	.font-selector {
		width: 98%;
	} 
  }

.font-selector div {
	padding: 1em;
	text-align: center;
}

.font-selector p {
	margin-top: 3px;
	margin-bottom: 0;
	font-size: 1.5em;
}

.font-preview-container {
	display: flex;
	flex-wrap: wrap;
    gap: 10px;
	margin-top: 1em;
}



/* Kjøp-knapp og antall -----------------*/
.knapp-lapp {
    padding: 20px 0;
}

.number {
	margin-right: 20px;
	/* width:100%; */
	display:flex;
	font-size: 1.5em;
}

.minus, .plus{
	width:40px;
	height:30px;
	background:#f2f2f200;
	border-radius:4px;
	padding: 0px 6px 12px 6px;
	/* border:1px solid #ddd; */
	display: inline-block;
	vertical-align: middle;
	text-align: center;
}

.minus{margin-left:auto;}
.plus{margin-right:auto;}

input.pcs-field{
	margin-top: 6px;
	height:28px;
	width: 50px;
	text-align: center;
	font-size: 16px;
	border:1px solid #ddd;
	border-radius:8px;
	display: inline-block;
	vertical-align: middle;
}