.tarot-widget {
    max-width: 620px;
    margin: 0 auto;
    /*padding: 20px;
    background-color: #f0f0f0;
    border-radius: 10px;*/
    position: relative;
}

.head-display {
    display: flex;
	flex-direction: column;
    justify-content: space-between;
    align-items: center;
    /*background-color: #f5f5f5;*/
	background-color: #fff;
    /*padding: 10px;*/
    border-radius: 5px;
    margin-bottom: 20px;
}

.head-text {
    flex-grow: 1;
    /*margin-right: 10px;
    font-size: 16px;*/
	color: var(--wp--preset--color--custom-text);
    font-family: var(--wp--preset--font-family--heading);
    font-weight: 500;
    line-height: 1.2;
    font-style: italic;
    font-size: var(--wp--preset--font-size--large);
    text-align: center;
	margin: 1em 0.5em;
}

.new-question-link {
	color: #A4A4A4;
    text-decoration: none;
    border-bottom: 1px solid;
}

@media (max-width: 600px) {
    .spread {
        justify-content: space-between;
    }

    .spread-slot {
        width: 30%;
        min-width: 80px;
    }
}

.spread {
    display: flex;
	flex-wrap: wrap;
    gap: 0.5em;
    /*justify-content: space-around;*/
	justify-content: center;
    margin-bottom: 20px;
}

.spread-slot {
    width: 30%;
    max-width: 100px;
	min-width: 80px;
    aspect-ratio: 400 / 660;
    border: 2px dashed #CFCABE;
    border-radius: 8px;
    perspective: 1000px;
	transition: all 0.3s ease; /*nowe przejscia plynne*/
}
@media (max-width: 500px) {
    .spread-slot {
        min-width: 60px;
    }
}

.spread-slot .card {
    width: 100%;
    height: 100%;
    margin: 0;
    position: absolute;
}

.spread-slot .card .front,
.spread-slot .card .back {
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/*tutaj nowe responsive*/

/* Dla 1 i 2 kart */
.spread-1 .spread-slot,
.spread-2 .spread-slot {
    width: 40%;
	max-width: 120px;
}

/* karta dnia /tarot-na-dzis */
.spread-1-daily .spread-slot {
    width: 40%;
	max-width: 160px;
}
.spread-1-daily .card:hover {
    transform: none;
}
.spread-1-daily .spread-slot {
	border: none;
}

/* dla tak/nie */
.spread-1-tak-nie .spread-slot {
    width: 40%;
	max-width: 140px;
}
.tak-nie h3 {
	text-align: center;
}
.tak-nie p.yes-no-desc {
	text-align: center;
	font-family: var(--wp--preset--font-family--heading);
    max-width: 420px;
    margin: 1em auto;
    line-height: 1.2;
    font-size: var(--wp--preset--font-size--large);
}
.tak-nie p.yes-no-desc span {
	font-weight: bold;
    font-size: 1.2em;
}

/* Dla 3 kart - domyślne ustawienia */

/* Breakpoint dla 5 kart */
@media (max-width: 600px) {
    .spread-5 {
        justify-content: center;
    }
    .spread-5 .spread-slot {
        width: 30%;
    }
}

/* Breakpoint dla 6 kart */
@media (max-width: 700px) {
    .spread-6 {
        justify-content: center;
    }
    .spread-6 .spread-slot {
        width: 30%;
    }
}

/* Dla 10 kart */
.spread-10 {
	max-width:620px;
	margin: 0 auto;
}

@media (max-width: 640px) {
	.spread-10 {
		max-width:620px;
	}
    .spread-10 .spread-slot {
        width: 18%;
        min-width: 45px;
    }
}
@media (max-width: 520px) {
	.spread-10 {
		gap: 0.2em;
	}
}
/*koniec tutaj nowe responsive*/

/*testy alternatywnych ukladow 5 kart*/
.spread-5-alternative {
    /*display: grid !important;*/
    grid-template-areas:
        ".  top  ."
        "left center right"
        ".  bottom  .";
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: auto auto auto;
    gap: 0.5em;
    justify-content: center;
    align-items: center;
    max-width: 320px; /* Dostosuj według potrzeb */
    margin: 0 auto;
}

.spread-5-alternative .spread-slot:nth-child(1) { grid-area: center; }
.spread-5-alternative .spread-slot:nth-child(2) { grid-area: bottom; }
.spread-5-alternative .spread-slot:nth-child(3) { grid-area: left; }
.spread-5-alternative .spread-slot:nth-child(4) { grid-area: right; }
.spread-5-alternative .spread-slot:nth-child(5) { grid-area: top; }

.spread-5-alternative .spread-slot {
    width: 100%;
    max-width: 100px;
    min-width: 80px;
    aspect-ratio: 400 / 660;
}
/*koniec alternatywnych ukladow 5 kart*/

/*uklad milosny*/
.spread-5-love {
    /*display: grid !important;*/
    grid-template-areas:
        ".    .     top    .     ."
        ".    .     .      .     ."
        "left .  center .  right"
        ".    .     .      .     ."
        ".    .  bottom    .     .";
    grid-template-columns: 1fr 0.4fr 1fr 0.4fr 1fr;
    grid-template-rows: 1fr auto 1fr auto 1fr;
    gap: 0.5em;
    justify-content: center;
    align-items: center;
    max-width: 400px;
    margin: 0 auto;
    aspect-ratio: 1 / 1;
}
/* iphone fix z odstępem spread od talii */
@supports (-webkit-touch-callout: none) {
  .spread-5-alternative, .spread-5-love {
    margin: 0 auto 40px;
  }
}

.spread-5-love .spread-slot:nth-child(1) { grid-area: left; }
.spread-5-love .spread-slot:nth-child(2) { grid-area: right; }
.spread-5-love .spread-slot:nth-child(3) { 
    grid-area: center; 
    transform: rotate(-90deg);
    width: 100%;
    height: 100%;
}
.spread-5-love .spread-slot:nth-child(4) { grid-area: bottom; bottom: 2em; position: relative;}
.spread-5-love .spread-slot:nth-child(5) { grid-area: top; top: 2em; position: relative;}

.spread-5-love .spread-slot {
    width: 100%;
    max-width: 100px;
    min-width: 80px;
    aspect-ratio: 400 / 660;
}

/* Dostosowanie dla mniejszych ekranów */
@media (max-width: 500px) {
    .spread-5-love {
        /*max-width: 300px;*/
    }
    .spread-5-love .spread-slot {
        min-width: 60px;
    }
}
/*koniec uklad milosny*/

.deck-container {
    overflow-x: auto;
    white-space: nowrap;
    /*padding: 20px 0;*/
    cursor: grab;
	/*border: 1px solid red; /* Tymczasowe obramowanie dla debugowania */
}

.deck {
    display: inline-flex;
    min-width: 100%;
    transition: all 0.5s ease;
	/*border: 1px solid blue; /* Tymczasowe obramowanie dla debugowania */
	padding: 20px 0px;
}

.card {
    width: 80px;
    height: 136px;
    background-color: #cfcabe;
    border-radius: 8px;
    margin-right: -40px;
    /*transition: all 0.3s ease;*/
    cursor: pointer;
    transform-style: preserve-3d;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    position: relative;
	/*border: 1px solid green; /* Tymczasowe obramowanie dla debugowania */
	transition: transform 0.3s ease-in-out;
	will-change: transform;
}

.card:hover {
    transform: translateY(-10px);
}

.card.selected {
    transform: translateY(-10px);
}

.card.deselected {
    transform: translateY(0);
}

.card.selected .back {
  /*background-color: #4a0080;*/
  background-image: 
    linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.3)),
    url("../../../../uploads/tarot/cards/reverse.png");
  background-size: cover;
}

/*jesli nie byloby ponizszej animacji to zostaje: .card.face-up {
    transform: rotateY(180deg);
}*/

/* animacja obrocenia karty z powiekszeniem */
.card {
    transform-style: preserve-3d;
    backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
}

@keyframes card-flip-scale {
    0% {
        transform: rotateY(0) scale(1);
    }
    50% {
        transform: rotateY(90deg) scale(1.15);
    }
    100% {
        transform: rotateY(180deg) scale(1);
    }
}

.card.face-up {
    animation: card-flip-scale 0.5s ease-in-out forwards; /*ile trwa obrót karty*/
}
/* end - animacja obrocenia karty z powiekszeniem */

.card .front,
.card .back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 12px;
}

.card .front {
    background-color: white;
    transform: rotateY(180deg);
}
/*reversed*/
.card.reversed {
    transform: rotateZ(180deg);
}
/* Animacja dla odwróconej karty */
@keyframes card-flip-scale-reversed {
    0% {
        transform: rotateZ(180deg) rotateY(0) scale(1);
    }
    50% {
        transform: rotateZ(180deg) rotateY(90deg) scale(1.15);
    }
    100% {
        transform: rotateZ(180deg) rotateY(180deg) scale(1);
    }
}
.card.face-up.reversed {
    animation: card-flip-scale-reversed 0.5s ease-in-out forwards;
}
/*end reversed*/

.card .back {
    /*background-color: #6a0dad;*/
	background-color: #000;
	background-image: url("../../../../uploads/tarot/cards/reverse.png");
	background-size: cover;
}

.card-hidden {
    opacity: 0;
    visibility: hidden;
    position: absolute;
    pointer-events: none;
}

.card-visible {
    opacity: 1;
    visibility: visible;
    position: relative;
    pointer-events: auto;
}

/*fix, żeby sie nie podnosily jak wszystko wybrane*/
.deck .card.no-hover {
    pointer-events: none;
    transition: none;
}

.deck .card.no-hover:hover {
    transform: none;
    box-shadow: none;
}

button {
    display: block;
    margin: 0 auto;
    background-color: var(--wp--preset--color--custom-dark-bg-button);
    border-radius: 0.33rem;
    border-color: var(--wp--preset--color--contrast);
    border-width: 0;
    color: var(--wp--preset--color--base-2);
    font-family: inherit;
    font-size: var(--wp--preset--font-size--small);
    font-style: normal;
    font-weight: 500;
    line-height: inherit;
    padding: 0.6rem 1rem;
    cursor: pointer;
}

.instructions {
    text-align: center;
    margin-bottom: 20px;
	font-size: 0.875rem;
    font-style: normal;
    font-weight: 600;
    letter-spacing: 0.025rem;
    text-transform: uppercase;
	color: #B5BDBC;
}

#resetButton,
#shuffleButton {
    position: absolute;
    top: 10px;
    width: auto;
    margin: 0;
}

#resetButton {
    right: 10px;
}

#shuffleButton {
    position: static;
    margin: 10px auto;
	background: transparent none;
    border-color: var(--wp--preset--color--contrast);
    border-width: 1px;
    border-style: solid;
    color: var(--wp--preset--color--contrast);
}

#cardDescriptions {
    display: none;
    margin-top: 20px;
    opacity: 0;
    transition: opacity 0.5s ease;
}

@keyframes gatherFan {
    0% {
        transform: translateX(0) rotate(0deg);
    }
    100% {
        transform: translateX(calc(var(--card-width) * -1 * (var(--card-count) - 1) + var(--fan-offset))) rotate(calc(-1 * var(--rotation-angle)));
    }
}

@keyframes spreadFan {
    0% {
        transform: translateX(calc(var(--card-width) * -1 * (var(--card-count) - 1) + var(--fan-offset))) rotate(calc(-1 * var(--rotation-angle)));
    }
    100% {
        transform: translateX(0) rotate(0deg);
    }
}

@keyframes shuffleEffect {
    0%,
    100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(calc(var(--shuffle-offset) * -1));
    }
}

.shuffling .card {
    animation-timing-function: ease-in-out;
    animation-fill-mode: forwards;
}

/*reveal button animacja*/
@keyframes slideDownFadeIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

#revealButton {
    animation: slideDownFadeIn 0.6s ease-out;
	margin-top: 1em;
}
#revealButton {
    transition: opacity 0.6s, transform 0.6s;
}

#revealButton:not([style*="display: none"]) {
    animation: slideDownFadeIn 0.6s ease-out;
}

.sparkle {
    position: absolute;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background-color: #fcb900;
	background-color: #9b51e0;
    opacity: 0;
    pointer-events: none;
    z-index: 10;
}

/* description & upsell */
.tarot-result-container .letter {
	font-style: italic;
    color: var(--wp--preset--color--contrast-3);
    max-width: 620px;
	/*font-size: 1rem;*/
	margin: 2em var(--wp--preset--spacing--20);
}
.tarot-result-container p strong {
	text-transform: uppercase;
    /*font-weight: 800;
    letter-spacing: 0.025em;*/
}
.incentive {
	/*background-color: #f5f5f5;*/
	background-color: #fff;
    border: none;
    align-content: flex-start;
    align-items: stretch;
    border-radius: 4px;
    box-sizing: border-box;
    color: #2f2f2f;
    display: flex;
    font-size: .875em;
    font-weight: 400;
    gap: 12px;
    line-height: 1.5;
    margin: 2em 0 1em 0;
    padding: 16px !important;
}
.incentive ul {
	margin: 0 0 0 24px;
    padding: 0;
    list-style-type: "\2713";
}
.incentive ul li {
	padding-inline-start: 1ch;
}
.tarot-result-container .author-box {
	flex-wrap: nowrap;
    gap: 0;
    flex-direction: column;
    align-items: center;
	margin: 3rem 0 2rem 0;
}
.opinie {
	background-color: #fff;
    border-radius: 4px;
    font-size: .875rem;
    line-height: 1.5;
    margin: 2em 0 1em 0;
    padding-top: var(--wp--preset--spacing--20);
    padding-right: var(--wp--preset--spacing--40);
    padding-bottom: var(--wp--preset--spacing--20);
    padding-left: var(--wp--preset--spacing--40);
}
.opinie :where(.wp-block-columns) {
    margin-bottom: 0;
}

.upsell-section ul {
	font-size: 0.875rem;
    padding: 0;
    list-style-type: none;
}
.upsell-section ul li {
	margin-bottom: 0.5em;
}
.upsell-section ul li a {
    font-size: 0.9em;
    font-weight: 600;
    letter-spacing: 0.025rem;
    text-transform: uppercase;
    border-bottom: 1px solid;
    text-decoration: none;
}
.upsell-section h4 {
	margin-block-start: 2.4em;
}
/*animacja przycisku zamawiania*/
.magic-button {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.3s ease;
}
.magic-button::after {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    background-image: url('../../../../uploads/2024/05/gif-magic.gif');
	filter: invert(1);
    background-size: cover;
    display: none;
}
.magic-button.loading span {
    visibility: hidden;
}
.magic-button.loading::after {
    display: block;
}