@charset "utf-8";
/* September 2025 new CSS addons */
@import "../../common/css/styles.css";
/* CSS Document */
body {
color: #fff;
font-family: "Gabarito", serif;
overflow-x: hidden;
font-size: 1.1rem;
background: #120820;
}
.navbar-brand {
max-width: 180px;
}
a {
color: rgb(158, 69, 255) !important;
}
.h1, h1 {
font-size: 1.5rem;
}
.h2, h2 {
font-size: 1.75rem;
}
.text-warning {
color: #F0E68C !important;
text-shadow: 0 0 8px rgba(255, 215, 150, 0.2);
}
.bg-dark {
background-color: #521893 !important;
}
.bg-light {
background-color: #e7dafc !important;
}
.card-slot {
width: 175px;
height: 263px;
background: #321954;
background-size: cover;
position: relative;
}
.card-name {
min-height: 36px;
max-width: 100% !important;
}
#availablecards {
transform: perspective(800px) rotateX(25deg);
}
.card-slot .card-option {
margin: 0;
}
.card-option {
width: 80px;
height: 122px;
perspective: 1000px;
cursor: pointer;
margin: -6px;
position: relative;
animation: floatOneByOne 1s ease-in-out 1 forwards;
animation-delay: var(--delay, 0s);
transition: margin-top 0.3s ease;
}
.card-option:hover {
margin-top: -15px;
}
.card-inner {
width: 100%;
height: 100%;
position: relative;
transform-style: preserve-3d;
transition: transform 0.6s;
}
.card-inner.flipped {
transform: rotateY(180deg);
}
.card-front,
.card-back {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
}
.card-front {
transform: rotateY(180deg);
}
.card-back {
transform: rotateY(0deg);
}
@keyframes floatOneByOne {
0%   { transform: translateY(0); filter: brightness(1); }
50%  { transform: translateY(-10px); filter: brightness(1.5); }
100% { transform: translateY(0); filter: brightness(1); }
}
@keyframes flyToSlot {
0% {
transform: translate(0, 0) scale(1) rotateY(0deg);
}
50% {
transform: translate(calc(var(--dx) * 0.5), calc(var(--dy) * 0.5)) scale(2) rotateY(180deg);
}
100% {
transform: translate(var(--dx), var(--dy)) scale(2) rotateY(360deg);
}
}
#questionnaire {
display: none;
}
.question-step {
display: none;
}
.question-step.active {
display: block;
}
.card {
background: #321954 !important;
}
.progress {
background-color: #424242;
height: 20px;
}
.progress-bar {
background-color: #236a42;
font-size: .78rem;
min-width: 70px;
}
.card {
padding: 40px;
border-radius: 20px;
}
#questionnaire .card-body {
min-height: 278px;
}
.btn-primary {
background: linear-gradient(135deg, #7c3aed 0%, #a855f7 100%);
color: #fff !important;
padding: 14px 28px;
font-size: 1.5rem;
letter-spacing: 0.5px;
border-radius: 50px;
text-transform: uppercase;
box-shadow: 0 6px 16px rgba(124, 58, 237, 0.35);
transition: all 0.25s ease-in-out;
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid #fff !important;
}
.btn-primary:hover {
background: linear-gradient(135deg, #a855f7 0%, #9333ea 100%);
box-shadow: 0 8px 24px rgba(148, 63, 230, 0.5);
transform: translateY(-2px);
cursor: pointer;
}
.btn-primary:active {
transform: scale(0.98);
box-shadow: 0 4px
}
.btn-primary span {
	color: #e3caff;
}
.btn-highlight {
animation: glowPulse 1.8s ease-in-out infinite;
box-shadow: 0 0 0 rgba(168, 85, 247, 0.6);
min-width: 280px;
}
@keyframes glowPulse {
0% {
box-shadow: 0 0 0 rgba(168, 85, 247, 0.5);
}
50% {
box-shadow: 0 0 12px 6px rgba(168, 85, 247, 0.7);
}
100% {
box-shadow: 0 0 0 rgba(168, 85, 247, 0.5);
}
}
.text-primary {
color: #9E45FF !important;
}
.text-secondary, footer, footer a {
	color: #a689d2 !important;
}
footer a {
    display: inline-flex;
    margin: 0 6px;
}
.sticky-card-bar {
	position: sticky;
	top: 0;
	z-index: 1000;
	background: rgb(29, 13, 51);
	padding: 8px 12px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
	backdrop-filter: blur(6px);
}
.sticky-card-bar img {
height: 104px;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0,0,0,0.3);
transition: transform 0.2s ease;
object-fit: cover;
}
.sticky-card-bar img:hover {
transform: scale(2);
}
#gift {
font-size: 3rem;
}
.gift {
max-width: 400px;
}
#infoIcon {
cursor: pointer;
color:white !important;
}
.popover-header {
color:black;
}
.form-check-input:checked {
background-color: #236a42;
border-color: #236a42;
}
label {
  color: #fff;
}
.card-footer {
	padding: 0;
}
#offer {
	border: 2px dashed #fff;
	position: relative;
	margin-top: 30px !important;
	background: linear-gradient(135deg, #E58FDE, #8B5CF6);
	border-radius: 10px;
	color: #FFF5FB;
  line-height: 1.4;
}
#title-offer {
	position: absolute;
	top: -12px;
	background: #BA52B2;
	padding: 0 10px;
	font-weight: bold;
}
#portrait {
	width: 120px;
}
.form-switch .form-check-input {
	height: 1.25em;
}
#oneclick, #message-confirmation {
	margin-top: 30px;
	background: linear-gradient(135deg, #EBDCFB, #A77BE1);
	border-radius: 18px;
	padding: 30px 20px;
	color: #2d0247;
	border: 10px solid rgba(255, 255, 255, 0.3);
	box-shadow: inset 0 0 42px rgba(255, 255, 255, 0.5), 0 10px 25px rgba(0, 0, 0, 0.5);
	position: relative;
}
.gift-tag {
	background: #FF79C6;
	color: white;
	font-size: 1.15rem;
	display: inline-block;
	padding: 4px 10px;
	border-radius: 999px;
	font-weight: 600;
	margin-bottom: 10px;
	position: absolute;
	top: -25px;
	left: -15px;
}
#oneclick h2 {
	font-weight: 700;
	margin-bottom: 5px;
}

.description {
	margin-bottom: 25px;
}

.name {
  color: #8434d9;
  font-weight: 700;
}
.porteur {
	border-radius: 50%;
	max-width: 100px;
	margin-right: 10px;
	margin-bottom: 10px;
	float: left;
}
.plus {
	border-radius: 50%;
	padding: 10px;
	font-size: 34px;
	width: 60px;
	height: 60px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: -90px auto 50px;
	background: #ff79c6;
	color: #fff;
	box-shadow: inset 0 0 42px rgba(255, 255, 255, 0.5), 0 10px 25px rgba(0, 0, 0, 0.5);
}
.astro, aa-sym {
font-size: 55px !important;
}
@media (min-width: 1400px) {
.container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
max-width: 1000px;
}
}
@media (max-width: 991px) {
.card {
padding: 20px;
}
.card-body {
padding: 0;
}
.h1, h1 {
font-size: 1.2rem;
}
header .h1, header h1 {
width:100%;
text-align:center;
}
.sticky-card-bar img {
height: 48px;
}
body, p, ul, details {
font-size: 1rem;
}
.h2, h2 {
font-size: 1.5rem;
}
.card-slot {
width: 110px;
height: 165px;
}
.card-option {
width: 50px;
height: 75px;
}
.navbar-brand {
margin: 0 auto;
}
.card-name {
min-height: 26px;
font-size: .8rem;
}
.form-select-lg, .form-control-lg {
padding-left: .5rem;
padding-right: 0;
}
.btn-primary {
	font-size: 1rem;
	line-height: 1.2;
	padding: 14px;
}
.lead {
font-size: 1.15rem;
}
.small, small {
	font-size: .75em;
}
.card-footer {
	padding: 10px 0;
}
#oneclick h2 {
	font-size: 1.4rem;
}
#portrait {
	width: 80px;
}
#oneclick, #message-confirmation {
	padding: 30px 10px;
}
.gift-tag {
	top: -20px;
}
.porteur {
	max-width: 120px;
}
 .astro, aa-sym {
  font-size: 40px !important;
 }
}
@media (max-width: 575px) {
#title-offer {
	position: inherit;
	font-size: .9rem;
	margin-top: -20px;
}
#oneclick p {
	font-size: .8rem;
}
.gift {
	max-width: 200px;
}
}