.custom_video-holder {
	width: 100%;
	height: 350px;
	border-top-left-radius: 300px;
	border-top-right-radius: 300px;
	overflow: hidden;
}

.custom_image-holder {
	width: 100%;
	height: 550px;
	border-top-left-radius: 300px;
	border-top-right-radius: 300px;
	overflow: hidden;
}


.custom_background-postion-top {
	background-position: top center;
}
.custom_background-postion-bottom {
	background-position: bottom center;
}
.custom_header-pattern {
	width: 100px;
	margin: auto;
}
.custom_circle-small {
	background-color: #fff;
	width: 15px;
	height: 15px;
	border-radius: 10px;
	margin: auto;
	margin-top: 50px;
}
.custom_circle-medium {
	background-color: #fff;
	width: 20px;
	height: 20px;
	border-radius: 10px;
	margin: auto;
	margin-top: 50px;
}

.custom_card-body {
	margin-top: 200px;
}

.custom_option-button > span {
	padding: 20px;
	border-radius: 5px;
	color: var(--color-dark);
	display: flex;
	align-items: center;
	gap: 20px;
}

.custom_option-button input[type="radio"]:checked + span {
	padding: 20px;
	border-radius: 5px;
	color: var(--color-dark);
	background-color: initial;
	border-color: var(--color-primary);
}



.custom_modal-overlay {
	display: none;
	position: fixed;
	inset: 0;
	background: rgba(0,0,0,0.5);
	align-items: center;
	justify-content: center;
	padding: 20px; /* så custom_modal alltid har luft på mobil */
	z-index: 1000;
}
.custom_modal-overlay.is-open {
	display: flex;
}
.custom_modal {
	background: white;
	width: 100%;
	max-width: 900px;   /* större för produkter / desktop */
	max-height: 90vh;   /* så den aldrig går utanför skärmen */
	overflow: auto;     /* om mycket innehåll */
	border-radius: 10px;
	padding: 30px;
	box-shadow: 0 10px 30px rgba(0,0,0,0.25);
}


.custom_wrapper-positions > :nth-child(1) { top: 0; position: relative; }
.custom_wrapper-positions > :nth-child(2) { top: 60px; position: relative; }
.custom_wrapper-positions > :nth-child(3) { top: 120px; position: relative; }

/* På mobil (max 600px bred) - återställ */
@media (max-width: 600px) {
  .custom_wrapper-positions > * { top: 0 !important; }
}

:root{
  --bouquet-color: #2f2f2f;   /* ikonens grundfärg (flat) */
  --bouquet-accent: #1e88e5;  /* kort accent vid klick */
  --bubble-color: #90caf9;    /* bubblor (flat blå) */
  --ease-pop: cubic-bezier(.68,-0.4,.27,1.35);
}


.custom_option-button .bouquet-icon svg{
  display:inline-block;
  color:var(--bouquet-color);
}

/* Bubblor osynliga tills aktiv */
.custom_option-button .bouquet-icon .bubbles .b{
  opacity:0;
  transform: translateY(0) scale(.8);
}
/* Pop + kort färgaccent (flat) */
@keyframes bouquet-pop {
  0%   { transform: scale(.9) rotate(-2deg); }
  60%  { transform: scale(1.07) rotate(.8deg); }
  100% { transform: scale(1) rotate(0deg); }
}
@keyframes color-flash {
  0%   { color: var(--bouquet-accent); }
  100% { color: var(--bouquet-color); }
}

.custom_option-button input[type="radio"]:checked + span.bouquet-icon svg{
  animation: bouquet-pop .6s var(--ease-pop) both, color-flash .7s ease-in-out both;
}

/* Bubblor: enkel “flat” uppflytning med fade */
@keyframes bubble-up {
  0%   { opacity:0; transform: translateY(0) scale(.8); }
  12%  { opacity:1; }
  100% { opacity:0; transform: translateY(-18px) scale(1.1); }
}
.custom_option-button input[type="radio"]:checked + span.bouquet-icon .bubbles .b:nth-child(1){ animation: bubble-up 1.1s ease-out .0s 1 both; }
.custom_option-button input[type="radio"]:checked + span.bouquet-icon .bubbles .b:nth-child(2){ animation: bubble-up 1.1s ease-out .05s 1 both; }
.custom_option-button input[type="radio"]:checked + span.bouquet-icon .bubbles .b:nth-child(3){ animation: bubble-up 1.1s ease-out .10s 1 both; }
.custom_option-button input[type="radio"]:checked + span.bouquet-icon .bubbles .b:nth-child(4){ animation: bubble-up 1.1s ease-out .15s 1 both; }
.custom_option-button input[type="radio"]:checked + span.bouquet-icon .bubbles .b:nth-child(5){ animation: bubble-up 1.1s ease-out .20s 1 both; }

/* Reduced motion: behåll flat highlight utan rörelse */
@media (prefers-reduced-motion: reduce){
  .custom_option-button input[type="radio"]:checked + span.bouquet-icon svg,
  .custom_option-button input[type="radio"]:checked + span.bouquet-icon .bubbles .b{
    animation:none !important;
  }
  .custom_option-button input[type="radio"]:checked + span.bouquet-icon{
    background: rgba(30,136,229,.12);
    box-shadow: 0 0 0 2px rgba(30,136,229,.25) inset;
  }
}