/*
Theme Name:         Cox Party
Theme URI:          https://lismarcin.com/
Description:        Theme for client on edited sage workflow.
Version:            1.0
Author:             Templanet
Author URI:         https://lismarcin.com/
Text Domain:        tn-theme
License:            MIT License
License URI:        https://opensource.org/licenses/MIT
Requires PHP:       8.3
Requires at least:  6.9
*/

@font-face {
    font-family: 'Satoshi-Variable';
    src: url('./assets/Satoshi-Variable.woff2') format('woff2'),
    url('./assets/Satoshi-Variable.woff') format('woff');
    font-weight: 300 900;
    font-display: swap;
    font-style: normal;
}

@font-face {
    font-family: 'ClashDisplay-Variable';
    src: url('./assets/ClashDisplay-Variable.woff2') format('woff2'),
    url('./assets/ClashDisplay-Variable.woff') format('woff');
    font-weight: 200 700;
    font-display: swap;
    font-style: normal;
}

*,
*::before,
*::after {
    margin: 0;
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

:root {
    --color-orange-gradient-1: #FF8709;
    --color-orange-gradient-2: #FFD9B0;
    --color-blue-gradient-1: #00BAE2;
    --color-blue-gradient-2: #BFF3FF;
    --color-lime-gradient-1: #0AE448;
    --color-lime-gradient-2: #ABFF84;
    --color-pink-gradient-1: #FF96F9;
    --color-pink-gradient-2: #FFE9FE;
    --color-purple-gradient-1: #8f33ff;
    --color-purple-gradient-2: #e2ccff;
    --color-yellow-gradient-1: #FFC30F;
    --color-yellow-gradient-2: #FFF0B5;
    --color-red-gradient-1: #E4560A;
    --color-red-gradient-2: #FFBF84;
    --color-black: #000;
    --color-white: #FFF;
    --font-family-base: 'Satoshi-Variable', sans-serif;
    --font-family-alt: 'ClashDisplay-Variable', 'Satoshi-Variable', sans-serif;
}


html,
body {
    font-family: var(--font-family-base), sans-serif;
    font-feature-settings: 'ss03' on;
}

body {
    margin: 0;
    padding: 1rem;
    background-color: #555;
}

.b-grid {
    width: 100%;
    margin: 0 auto;
}

.b-card {
    justify-self: center;
    margin-block: 2rem;
    padding-block: 2rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.25);
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .5rem 1rem;
    --one-mm: 1.4492cqi;
    --card-category-gradient-start: var(--color-blue-gradient-2);
    --card-category-gradient-end: var(--color-blue-gradient-1);
    --card-category-gradient-direction: to top right;
    --card-category-gradient: linear-gradient(var(--card-category-gradient-direction), var(--card-category-gradient-start) 0%, var(--card-category-gradient-end) 100%);
    --card-category-text: var(--color-black);
    --card-text-gradient-start: var(--color-blue-gradient-1);
    --card-text-gradient-end: var(--color-blue-gradient-2);
    --card-text-gradient-1: linear-gradient(to bottom, var(--card-text-gradient-start) 0%, var(--card-text-gradient-end) 100%);
    --card-text-gradient-2: linear-gradient(to bottom, rgba(255,255,255,0.9), rgba(255,255,255,0.8));
    --card-plus18-gradient-start: var(--color-lime-gradient-1);
    --card-plus18-gradient-end: var(--color-lime-gradient-2);
    --card-plus18-gradient: linear-gradient(to bottom, var(--card-plus18-gradient-start) 0%, var(--card-plus18-gradient-end) 100%);
    --card-plus18-text: var(--color-black);

    &.game-type-challenge {
        --card-category-gradient-start: var(--color-purple-gradient-2);
        --card-category-gradient-end: var(--color-purple-gradient-1);
        --card-text-gradient-start: var(--color-purple-gradient-1);
        --card-text-gradient-end: var(--color-purple-gradient-2);
    }
}

.b-card__front,
.b-card__back {
    width: 408px;
    /*width: 816px;*/
    max-width: 100%;
    margin: 0 auto;
    position: relative;
    z-index: 1;
    container-name: card;
    container-type: inline-size;
}

.b-card__link {
    grid-column: 1 / -1;
    text-align: center;
    text-decoration: none;
    color: inherit;
}


.b-card__wrapper {
    aspect-ratio: 816 / 1111;
    position: relative;
    z-index: 1;
    overflow: hidden;
    background-color: var(--color-black);
    color: var(--color-white);
    width: 100%;
    display: flex;
    flex-direction: column;
    clip-path: inset(calc(var(--one-mm) * 3) round calc(var(--one-mm) * 6));
}

.b-card__front .b-card__wrapper {
    padding: calc(var(--one-mm) * 12) calc(var(--one-mm) * 8) calc(var(--one-mm) * 10);

}

.b-card__back .b-card__wrapper {
    padding: calc(var(--one-mm) * 10) calc(var(--one-mm) * 8);
}

.b-card__bg-gradient {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    opacity: 0.14;
    background-color: var(--card-category-gradient-end);
}

.b-card__front .b-card__bg-gradient {
    opacity: 0.09;
}

.b-card__logo {
    display: block;
    width: 33cqi;
    transform: rotate(8deg);
    height: auto;
    margin: auto;
}

.b-card__header {
    width: fit-content;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

.b-card__category {
    margin: 0;
    width: fit-content;
    background: var(--card-category-gradient);
    background-size: 100% 100%, 100% 100%;
    background-position: top left, top left;
    color: var(--card-category-text);
    font-size: 7cqi;
    padding: 1.4706cqi 3.5412cqi;
    border-radius: 1.7157cqi;
    line-height: 0.9;
    font-weight: 600;
    transform: translate3d(0,0,0) rotate(-3deg);
    font-family: var(--font-family-alt), sans-serif;
    text-transform: uppercase;
}

.b-card__plus18 {
    margin: 0;
    position: absolute;
    top: 0;
    right: 0;
    transform: translate3d(40%, -70%, 0) rotate(15deg);
    width: fit-content;

    &::before {
        content: '';
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: -2;
        border-radius: 1.7157cqi;
        background-color: rgba(0, 0, 0, 0.25);
        transform: translate(-0.5cqi, 0.625cqi);
    }
}

.b-card__plus18 span {
    display: block;
    background: var(--card-plus18-gradient);
    color: var(--card-plus18-text);
    font-size: 5.8824cqi;
    font-family: var(--font-family-alt), sans-serif;
    padding: 0.9804cqi 1.9608cqi;
    border-radius: 1.7157cqi;
    line-height: 0.9;
    font-weight: 600;
    z-index: 1;
}

.b-card__text-wrapper {
    display: grid;
    margin: auto 0;
}

.b-card__text {
    grid-area: 1 / 1;
    text-align: center;
    text-wrap: balance;
    font-size: 7.1078cqi;
    line-height: 1.23;
    font-weight: 475;
    margin-inline: -0.1em;
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    padding: 0.1em;
}

.b-card__text:nth-child(1) {
    background-image: var(--card-text-gradient-1);
}

.b-card__text:nth-child(2) {
    background-image: var(--card-text-gradient-2);
}

.b-card__template-placeholder {
    position: absolute;
    z-index: -1;
    opacity: 0.5;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.b-card__drinks {
    height: 9cqi;
    display: flex;
    justify-content: center;
    gap: 3.4314cqi;
}

.b-card__drinks-item {
    height: 100%;
}




.b-export-tools {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 9999;
    background: #fff;
    padding: 10px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    display: flex;
    gap: 10px;
}

.b-export-btn {
    background: #00BAE2;
    color: #fff;
    border: none;
    padding: 8px 16px;
    border-radius: 4px;
    cursor: pointer;
    font-family: sans-serif;
    font-weight: bold;
}

.b-export-btn:hover {
    background: #0096b7;
}

.b-export-btn:disabled {
    background: #ccc;
    cursor: not-allowed;
}