/**
 * Frontend styles for Badge block - background spins, text stays upright
 */


/* Base */
.wp-block-mtt-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    padding: 10px;
}

/* Headings inside badge (stay upright) */
.wp-block-mtt-badge h1,
.wp-block-mtt-badge h2,
.wp-block-mtt-badge h3,
.wp-block-mtt-badge h4,
.wp-block-mtt-badge h5,
.wp-block-mtt-badge h6 {
    margin: 0;
    padding: 5px 10px;
    line-height: 1.2;
    color: inherit;
    position: relative;
    z-index: 3; /* above bg layer */
    font-size: 11px;
    font-weight: 700;
    transform: rotate(var(--badge-tilt));
}

/* Positioning: remove rotate here so text doesn't tilt */
.wp-block-mtt-badge.is-position--top-right {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 3;
    transform: translate(20%, 0);
}

@media (max-width: 768px) {
    .wp-block-mtt-badge.is-position--top-right {
        transform: translate(-10px, -70%);
    }

    .wp-block-mtt-badge.is-position--bottom-right {
        transform: translate(-10px, 70%);
    }

    .wp-block-mtt-badge.is-position--bottom-left {
        transform: translate(10px, 70%);
    }

    .wp-block-mtt-badge.is-position--top-left {
        transform: translate(10px, -70%);
    }

    .wp-block-mtt-badge {
        max-width: 120px;
    }
}

.wp-block-mtt-badge.is-position--top-left {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 3;
    transform: translate(-20%, 0);
}

.wp-block-mtt-badge.is-position--bottom-right {
    position: absolute;
    bottom: 0;
    right: 0;
    z-index: 3;
    transform: translate(20%, 0);
}

.wp-block-mtt-badge.is-position--bottom-left {
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 3;
    transform: translate(-20%, 0);
}

/* Default position (no positioning) */
.wp-block-mtt-badge.is-position--default {
    position: relative;
    transform: none;
}

/* ---------- Flower (spinning background, text on top) ---------- */

.wp-block-mtt-badge.is-style-flower {
    /* size of the badge “face” */
    aspect-ratio: 1 / 1;
    width: 91px;
}


.wp-block-mtt-badge.is-style-flower h1,
.wp-block-mtt-badge.is-style-flower h2,
.wp-block-mtt-badge.is-style-flower h3,
.wp-block-mtt-badge.is-style-flower h4,
.wp-block-mtt-badge.is-style-flower h5,
.wp-block-mtt-badge.is-style-flower h6 {
    color: var(--wp--preset--color--cream) !important;
}

/* ---------- Oval (static background by default;) ---------- */

.wp-block-mtt-badge.is-style-oval {
    min-height: 76px;
    width: 142px;
    aspect-ratio: 142 / 76;
}


.wp-block-mtt-badge.is-style-oval h1,
.wp-block-mtt-badge.is-style-oval h2,
.wp-block-mtt-badge.is-style-oval h3,
.wp-block-mtt-badge.is-style-oval h4,
.wp-block-mtt-badge.is-style-oval h5,
.wp-block-mtt-badge.is-style-oval h6 {
    color: var(--wp--preset--color--green) !important;
    transform: translateY(-2px);
    font-weight: 700;
    margin-bottom: -3px;
}

/* ---------- Arrow badges (icon only; keep as backgrounds on container) ---------- */

.wp-block-mtt-badge.is-style-arrow {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='82.236' height='83.6' viewBox='0 0 82.236 83.6'%3E%3Cdefs%3E%3CclipPath id='clip-path'%3E%3Crect id='Rectangle_242' data-name='Rectangle 242' width='82.236' height='83.6' fill='%23ffcba4'/%3E%3C/clipPath%3E%3C/defs%3E%3Cg id='Group_642' data-name='Group 642' clip-path='url(%23clip-path)'%3E%3Cpath id='Path_336' data-name='Path 336' d='M4.838,1.507c6.784-1.814,15.548-2.776,21.1,1.8,2.785,2.294,3.053,5.775,1.949,9.033-1.526,4.5-9.48,12-4.035,16.256,6.3,4.93,26.169-2.643,33.527,6.682,8.631,10.934-9.308,17.912-9.713,27-.327,7.3,8.315,10.834,14.276,12.185-.931-1.714-3.455-3.287-4.911-4.612a2.723,2.723,0,0,1-1.186-2.033.884.884,0,0,1,.4-.7A1.165,1.165,0,0,1,56.732,67c3.152-.241,5.829,2.327,8.279,4a103.07,103.07,0,0,0,9,5.886c1.617.872,6.525,2.579,7.366,3.342a2.016,2.016,0,0,1,.13,3.2c-1.228.708-7.76-.907-9.863-1.048a45.36,45.36,0,0,0-6.9.175c-2.477.108-4.97.053-7.448-.016a4.412,4.412,0,0,1-2.829-.748,1.108,1.108,0,0,1-.447-.92c.069-.58.752-.838,1.321-.973A50.125,50.125,0,0,0,61.2,78.537c-1.232-.3-2.479-.529-3.7-.889-4.877-1.442-9.991-4.15-12.5-8.779-2.723-5.01-1.055-10.651,1.96-15.116,3.064-4.539,13.528-12.57,5.032-17.291-9.153-5.087-29.95,3.8-33.951-8.949C15.73,20.168,23.1,15.6,24.042,10.252c1.046-5.913-8.779-6.45-12.873-6.264a45.957,45.957,0,0,0-5.15.752c-1.144.184-5.083,1.413-5.868.2a1.163,1.163,0,0,1-.075-.995A3.183,3.183,0,0,1,2.325,2.241c.8-.252,1.639-.5,2.513-.734' transform='translate(0 0)' fill='%23ffcba4'/%3E%3C/g%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    aspect-ratio: 82/84;
    width: 82px;
    height: 84px;
}

.wp-block-mtt-badge.is-style-arrow-purple {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='87.229' height='120.322' viewBox='0 0 87.229 120.322'%3E%3Cg transform='translate(39.769 120.322) rotate(-155)'%3E%3Cpath d='M0,112.25c.046-18.177,6.552-36.1,16.673-51a19.168,19.168,0,0,1-6.952-7.558c-6.012-10.555-3.807-20.681,1.834-30.9C13.922,18.5,16.815,15.153,20.538,11c-2.347.537-4.163,2.323-6.171,3.652a5.142,5.142,0,0,1-2.112.92,1.619,1.619,0,0,1-1-.139c-1.225-.679-.038-2.342.6-2.973a17.721,17.721,0,0,1,1.7-1.411c.361-.276.721-.549,1.082-.823,3.01-2.283,6.047-4.541,9.272-6.514a50.883,50.883,0,0,1,4.953-2.69C30.135.431,32.192-.8,33.3.756c1.414,1.984-3.961,8.355-4.932,10.161C26.737,13.956,25.1,17,23.517,20.059c-.385.743-1.621,2.427-2.59,1.272a1.347,1.347,0,0,1-.075-1.221c.739-2.61,2.283-5.061,2.247-7.773,0,.245-.909,1.026-1.088,1.236q-.608.72-1.183,1.466c-.646.84-1.865,2.1-2.5,2.948a49.216,49.216,0,0,0-4.992,8.981c-3.11,6.519-4.483,13.993-1.727,20.887a23.632,23.632,0,0,0,3.827,6.337,21.17,21.17,0,0,0,2.674,2.692c1.161.969,1.588.918,2.7-.193A37.371,37.371,0,0,1,30.7,49.632c3.125-1.544,7.489-3.1,10.688-.894,3.477,2.4,2.814,6.063,1.011,9.332-3.871,7.018-14.8,9.093-21.683,5.616-.422-.137-.54.166-.779.381-1.068.956-5.516,8.113-6.439,9.783C6.751,86.063,5.682,97.945,1.425,110.4c-.279.816-.3,2.177-1.425,1.851M23.65,60.562c2.3.168,4.435.652,6.788.434,9.728-.9,14.366-13.168,1.818-7.817-1.259.538-10.212,5.839-8.606,7.383' transform='translate(0 0)' fill='%23c084fc'/%3E%3C/g%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    aspect-ratio: 87/120;
    width: 87px;
    height: 120px;
}

.wp-block-mtt-badge.is-style-arrow-yellow {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='69.744' height='119.579' viewBox='0 0 69.744 119.579'%3E%3Cg transform='translate(0 10.616) rotate(-14)'%3E%3Cpath d='M0,.05c.046,18.177,6.552,36.1,16.673,51a19.168,19.168,0,0,0-6.952,7.558c-6.012,10.555-3.807,20.681,1.834,30.9,2.367,4.289,5.26,7.636,8.983,11.787-2.347-.537-4.163-2.323-6.171-3.652a5.142,5.142,0,0,0-2.112-.92,1.619,1.619,0,0,0-1,.139c-1.225.679-.038,2.342.6,2.973a17.721,17.721,0,0,0,1.7,1.411c.361.276.721.549,1.082.823,3.01,2.283,6.047,4.541,9.272,6.514a50.884,50.884,0,0,0,4.953,2.69c1.265.593,3.322,1.823,4.433.268,1.414-1.984-3.961-8.355-4.932-10.161-1.635-3.039-3.267-6.08-4.855-9.142-.385-.743-1.621-2.427-2.59-1.272a1.347,1.347,0,0,0-.075,1.221c.739,2.61,2.283,5.061,2.247,7.773,0-.245-.909-1.026-1.088-1.236q-.608-.72-1.183-1.466c-.646.84-1.865,2.1-2.5,2.948a49.216,49.216,0,0,1-4.992-8.981c-3.11-6.519-4.483-13.993-1.727-20.887a23.632,23.632,0,0,1,3.827-6.337,21.17,21.17,0,0,1,2.674-2.692c1.161-.969,1.588-.918,2.7.193A37.371,37.371,0,0,0,30.7,62.668c3.125,1.544,7.489,3.1,10.688.894,3.477-2.4,2.814-6.063,1.011-9.332-3.871-7.018-14.8-9.093-21.683-5.616-.422.137-.54-.166-.779-.381-1.068-.956-5.516-8.113-6.439-9.783C6.751,26.237,5.682,14.355,1.425,1.9,1.146,1.085,1.128-.277,0,.05M23.65,51.738c2.3-.168,4.435-.652,6.788-.434,9.728.9,14.366,13.168,1.818,7.817C31,58.582,22.044,53.282,23.65,51.738' transform='translate(0 -0.001)' fill='%23e8ff6f'/%3E%3C/g%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    aspect-ratio: 69/120;
    width: 69px;
    height: 120px;
}

/* Hide text for arrow badges (icon-only) */
.wp-block-mtt-badge.is-style-arrow h1,
.wp-block-mtt-badge.is-style-arrow h2,
.wp-block-mtt-badge.is-style-arrow h3,
.wp-block-mtt-badge.is-style-arrow h4,
.wp-block-mtt-badge.is-style-arrow h5,
.wp-block-mtt-badge.is-style-arrow h6,
.wp-block-mtt-badge.is-style-arrow-purple h1,
.wp-block-mtt-badge.is-style-arrow-purple h2,
.wp-block-mtt-badge.is-style-arrow-purple h3,
.wp-block-mtt-badge.is-style-arrow-purple h4,
.wp-block-mtt-badge.is-style-arrow-purple h5,
.wp-block-mtt-badge.is-style-arrow-purple h6,
.wp-block-mtt-badge.is-style-arrow-yellow h1,
.wp-block-mtt-badge.is-style-arrow-yellow h2,
.wp-block-mtt-badge.is-style-arrow-yellow h3,
.wp-block-mtt-badge.is-style-arrow-yellow h4,
.wp-block-mtt-badge.is-style-arrow-yellow h5,
.wp-block-mtt-badge.is-style-arrow-yellow h6 {
    display: none;
}

/* Arrow badge positioning tweaks (keep tilt on the graphic baked into the SVGs) */
.wp-block-mtt-badge.is-style-arrow.is-position--top-right,
.wp-block-mtt-badge.is-style-arrow-purple.is-position--top-right,
.wp-block-mtt-badge.is-style-arrow-yellow.is-position--top-right {
    transform: translate(15%, -10%);
}

.wp-block-mtt-badge.is-style-arrow.is-position--top-left,
.wp-block-mtt-badge.is-style-arrow-purple.is-position--top-left,
.wp-block-mtt-badge.is-style-arrow-yellow.is-position--top-left {
    transform: translate(-15%, -10%);
}

.wp-block-mtt-badge.is-style-arrow.is-position--bottom-right,
.wp-block-mtt-badge.is-style-arrow-purple.is-position--bottom-right,
.wp-block-mtt-badge.is-style-arrow-yellow.is-position--bottom-right {
    transform: translate(15%, 10%);
}

.wp-block-mtt-badge.is-style-arrow.is-position--bottom-left,
.wp-block-mtt-badge.is-style-arrow-purple.is-position--bottom-left,
.wp-block-mtt-badge.is-style-arrow-yellow.is-position--bottom-left {
    transform: translate(-15%, 10%);
}

.wp-block-mtt-badge a {
    text-decoration: none !important;
}