:root {
    --magenta: #e91e63;
    --light-pink: #fce4ec;
    --border-pink: #f8bbd0;
    --text-dark: #333;
    --light-magenta: #fa7eb0;
}

body {
    background-color: #ffffff;
    color: var(--text-dark);
    font-family: 'Montserrat', sans-serif;
}

.btn-product,
.btn-theme-card,
.btn-material,
.btn-size,
.font-label,
.input-custom,
.quantity-selector,
.total-price,
.btn-cart,
.preview-card,
.text-size-control {
    box-shadow: 0 3px 6px rgba(124, 124, 124, 0.18);
}

/* titoli sezioni */
.section-title {
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 1rem;
}
.small-title {
    font-size: 1rem;
}

/* bottoni prodotto */
.btn-product {
    background-color: var(--light-pink);
    border: 2px solid var(--magenta);
    border-radius: 10px;
    padding: 12px;
    font-weight: 600;
}
.btn-product.active {
    background-color: var(--magenta);
    color: white;
}
.btn:hover {
    background-color: var(--light-magenta);
    border-color: var(--light-magenta);
    color: white;
}
.btn.active:hover {
    background-color: var(--light-magenta);
    border-color: var(--light-magenta);
    color: white;
}

/* card tema */
.btn-theme-card {
    background-color: var(--light-pink);
    border: 2px solid var(--magenta);
    border-radius: 15px;
    padding: 15px;
    font-weight: 600;
    cursor: pointer;
}
.btn-check:checked + .btn-theme-card {
    background-color: var(--magenta);
    border: 2px solid var(--magenta);
    color: white;
}
.btn-check + .btn:hover {
    background-color: var(--light-magenta);
    border-color: var(--light-magenta);
    scale: 1.05;
    color: white;
}
.btn-theme-card .icon {
    display: block;
    font-size: 2rem;
    margin-bottom: 5px;
}

.theme-animation {
    position: absolute;
    left: 50%;
    bottom: 8px;
    transform: translateX(-50%);
    width: 160px;
    height: 340px;
    border: none;
    display: block;
    overflow: visible;
    pointer-events: none;
    background: transparent;
    z-index: 2;
}

.btn-theme-card {
    position: relative;
    overflow: visible;
    min-height: 170px;
}

.btn-theme-card,
.btn-theme-card.d-block,
.btn-theme-card.d-block small,
.row.g-2,
.row.g-2 .col-4 {
    overflow: visible;
}

.btn-theme-card small {
    position: relative;
    z-index: 3;
}

@media (max-width: 768px) {
    .theme-animation {
        bottom: 4px;
    }
}

/* bottoni materiale */
.btn-material {
    background-color: var(--light-pink);
    border: 2px solid var(--magenta);
    border-radius: 15px;
    padding: 15px;
    font-weight: 600;
    cursor: pointer;
}
.btn-check:checked + .btn-material {
    background-color: var(--magenta);
    border: 2px solid var(--magenta);
    color: white;
}
.btn-material:hover {
    background-color: var(--light-magenta);
    border-color: var(--light-magenta);
    color: white;
}
.btn.active {
    background-color: var(--magenta);
    color: white;
}

/* bottoni colore */
.btn-color{
    width:50px;
    height:50px;
    border-radius:50%;
    margin-bottom: 20px;
    border:2px solid var(--magenta);
    cursor:pointer;
    position:relative;
    opacity:0.5;
    transition:0.3s;
}
.azzurro{
    background:#bcebff;
}
.oro{
    background:#ffd900;
}
.argento{
    background:#b8b8b8;
}
.legno{
    background:#d19a63;
}
.color-picker{
    display:flex;
    gap:15px;
}
.color-check{
    display:none;
}
.btn-color:hover{
    opacity:1;
}
.tooltip-color{
    position:absolute;
    top:-40px;
    left:50%;
    transform:translateX(-50%);
    background:#333;
    color:white;
    padding:5px 10px;
    border-radius:8px;
    font-size:13px;
    white-space:nowrap;
    opacity:0;
    transition:0.3s;
    z-index:10;
    pointer-events:none;
}
.btn-color:hover .tooltip-color{
    opacity:1;
}
.color-check:checked + .btn-color{
    opacity:1;
    transform:scale(1.1);
}

/* bottone dimensione */
.btn-size {
    background-color: var(--light-pink);
    border: 2px solid var(--magenta);
    border-radius: 15px;
    padding: 15px;
    font-weight: 600;
    cursor: pointer;
}
.btn-check:checked + .btn-size {
    background-color: var(--magenta);
    border: 2px solid var(--magenta);
    color: white;
}
.btn-size:hover {
    background-color: var(--light-magenta);
    border-color: var(--light-magenta);
    color: white;
}
.btn-size.active {
    background-color: var(--magenta);
    color: white;
}

/* riquadro anteprima */
.preview-card {
    border: 2px solid var(--magenta);
    border-radius: 25px;
    min-height: 350px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    background-color: #fff;
    overflow: hidden;
}
.preview-background {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-size: 85%;
    background-position: center 20%;
    background-repeat: no-repeat;
    opacity: 0;
    transition: opacity 0.4s ease;
}
/* Cake topper */
.preview-card.product-cake-topper .preview-background {
    background-size: 85%;
    background-position: center 20%;
}

/* Segnaposto */
.preview-card.product-segnaposto .preview-background {
    background-size: 70%;
    background-position: center 60%;
}

/* Oggetto */
.preview-card.product-oggetto .preview-background {
    background-size: 80%;
    background-position: center 40%;
}

.preview-background.is-visible {
    opacity: 1;
}
.preview-background::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.45);
    border-radius: 23px;
}
.preview-content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding: 2rem 1.5rem;
}
.preview-badge {
    position: absolute;
    top: 5px;
    left: 50%;
    transform: translateX(-50%);
    background: white;
    padding: 4px 15px;
    border-radius: 20px;
    font-weight: 900;
    font-size: 0.8rem;
    letter-spacing: 1px;
    z-index: 10;
    color: var(--magenta);
}
#preview-icon {
    display: none;
    transition: transform 0.2s ease;
}
#preview-icon img {
    max-height: 120px;
    width: auto;
}
#preview-text {
    font-size: 56px;
    text-align: center;
    word-break: break-word;
    text-shadow: 0 2px 8px rgba(255, 255, 255, 0.9);
}

/* selezione font */
.font-label {
    background: var(--light-pink);
    border-radius: 12px;
    padding: 10px 5px;
    text-align: center;
    cursor: pointer;
    border: 2px solid transparent;
    font-size: 1.2rem;
    display: block;
}
.btn-check:checked + .font-label {
    border-color: var(--magenta);
    background-color: var(--border-pink);
}
.text-size-control {
    background: var(--light-pink);
    border: 2px solid var(--magenta);
    border-radius: 15px;
    padding: 12px 15px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.text-size-range {
    flex: 1;
    accent-color: var(--magenta);
    cursor: pointer;
}

.small-text-label,
.big-text-label {
    font-weight: 700;
    color: var(--magenta);
}

.small-text-label {
    font-size: 0.9rem;
}

.big-text-label {
    font-size: 1.3rem;
}

#text-size-section {
    margin-top: 25px;
}

/* input e quantità */
.input-custom {
    border: 2px solid var(--magenta);
    border-radius: 15px;
    padding: 12px;
}
.quantity-selector {
    background: var(--light-pink);
    border: 2px solid var(--magenta);
    border-radius: 15px;
    padding: 8px 15px;
    margin-bottom: 12px;
}
.qty-input {
    border: none;
    background: transparent;
    width: 40px;
    text-align: center;
    font-weight: bold;
}

/* bottone carrello */
.btn-cart {
    background-color: var(--magenta);
    color: white;
    border-radius: 15px;
    padding: 15px 30px;
    font-weight: bold;
    border: none;
    margin-bottom: 20px;
}
.btn-cart:hover {
    background-color: var(--light-magenta);
    color: white;
}

/* utilità */
.flex-fill-simona {
    flex: 1 1 0;
}