/* ===== Page Button Styles ===== */

/* Rich editor text color (Filament textColor mark) */
.color {
    color: var(--color, inherit);
}
@media (prefers-color-scheme: dark) {
    .color {
        color: var(--dark-color, var(--color, inherit));
    }
}

/* Base reset shared by all styles */
.page-btn,
.page-btn * {
    box-sizing: border-box;
}

/* ---------- Style 1: Underline CTA ---------- */
.btn-underline {
    border: none;
    background: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    font-family: inherit;
    color: var(--btn-color, #e63946);
}
.btn-underline span {
    padding-bottom: 7px;
    letter-spacing: 4px;
    font-size: 14px;
    padding-right: 15px;
    text-transform: uppercase;
    font-weight: 700;
}
.btn-underline svg {
    transform: translateX(-8px);
    transition: all 0.3s ease;
    fill: currentColor;
}
.btn-underline:hover svg {
    transform: translateX(0);
}
.btn-underline:active svg {
    transform: scale(0.9);
}
.btn-underline .hover-underline-animation {
    position: relative;
    color: currentColor;
    padding-bottom: 20px;
}
.btn-underline .hover-underline-animation:after {
    content: "";
    position: absolute;
    width: 100%;
    transform: scaleX(0);
    height: 2px;
    bottom: 0;
    left: 0;
    background-color: currentColor;
    transform-origin: bottom right;
    transition: transform 0.25s ease-out;
}
.btn-underline:hover .hover-underline-animation:after {
    transform: scaleX(1);
    transform-origin: bottom left;
}
[dir="rtl"] .btn-underline span {
    padding-right: 0;
    padding-left: 15px;
}
[dir="rtl"] .btn-underline svg {
    transform: translateX(8px);
}
[dir="rtl"] .btn-underline:hover svg {
    transform: translateX(0);
}

/* ---------- Style 2: Circle Sweep ---------- */
.btn-sweep {
    --color: var(--btn-color, #560bad);
    font-family: inherit;
    display: inline-block;
    width: 8em;
    height: 2.6em;
    line-height: 2.5em;
    margin: 20px;
    position: relative;
    cursor: pointer;
    overflow: hidden;
    border: 2px solid var(--color);
    transition: color 0.5s;
    z-index: 1;
    font-size: 17px;
    border-radius: 6px;
    font-weight: 500;
    color: var(--color);
    text-align: center;
    text-decoration: none;
}
.btn-sweep:before {
    content: "";
    position: absolute;
    z-index: -1;
    background: var(--color);
    height: 150px;
    width: 200px;
    border-radius: 50%;
    top: 100%;
    left: 100%;
    transition: all 0.7s;
}
.btn-sweep:hover {
    color: #fff;
}
.btn-sweep:hover:before {
    top: -30px;
    left: -30px;
}
.btn-sweep:active:before {
    background: #3a0ca3;
    transition: background 0s;
}

/* ---------- Style 3: Neon Glow ---------- */
.btn-neon {
    --green: var(--btn-color, #1bfd9c);
    font-size: 15px;
    padding: 0.7em 2.7em;
    letter-spacing: 0.06em;
    position: relative;
    font-family: inherit;
    border-radius: 0.6em;
    overflow: hidden;
    transition: all 0.3s;
    line-height: 1.4em;
    border: 2px solid var(--green);
    background: linear-gradient(to right, rgba(27, 253, 156, 0.1) 1%, transparent 40%, transparent 60%, rgba(27, 253, 156, 0.1) 100%);
    color: var(--green);
    box-shadow: inset 0 0 10px rgba(27, 253, 156, 0.4), 0 0 9px 3px rgba(27, 253, 156, 0.1);
    text-decoration: none;
    display: inline-block;
    font-weight: 600;
}
.btn-neon:hover {
    color: #82ffc9;
    box-shadow: inset 0 0 10px rgba(27, 253, 156, 0.6), 0 0 9px 3px rgba(27, 253, 156, 0.2);
}
.btn-neon:before {
    content: "";
    position: absolute;
    left: -4em;
    width: 4em;
    height: 100%;
    top: 0;
    transition: transform 0.4s ease-in-out;
    background: linear-gradient(to right, transparent 1%, rgba(27, 253, 156, 0.1) 40%, rgba(27, 253, 156, 0.1) 60%, transparent 100%);
}
.btn-neon:hover:before {
    transform: translateX(15em);
}

/* ---------- Style 4: Bottom Slide Fill ---------- */
.btn-slide {
    font-size: 17px;
    background: transparent;
    border: none;
    padding: 1em 1.5em;
    color: #ffedd3;
    text-transform: uppercase;
    position: relative;
    transition: 0.5s ease;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
    font-weight: 600;
    letter-spacing: 1px;
}
.btn-slide::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    height: 2px;
    width: 0;
    background-color: var(--btn-color, #ffc506);
    transition: 0.5s ease;
}
.btn-slide:hover {
    color: #1e1e2b;
    transition-delay: 0.5s;
}
.btn-slide:hover::before {
    width: 100%;
}
.btn-slide::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    height: 0;
    width: 100%;
    background-color: var(--btn-color, #ffc506);
    transition: 0.4s ease;
    z-index: -1;
}
.btn-slide:hover::after {
    height: 100%;
    transition-delay: 0.4s;
    color: aliceblue;
}

/* ---------- Style 5: Gradient Ring ---------- */
.btn-gradient {
    --grad-a: #2dd4bf;
    --grad-b: #3b82f6;
    --grad-c: #a855f7;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 2px;
    border-radius: 12px;
    background: linear-gradient(to right, var(--grad-a), var(--grad-b), var(--grad-c));
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.3s ease-in-out;
    color: #fff;
}
.btn-gradient:hover {
    transform: scale(1.05);
}
.btn-gradient:active {
    transform: scale(0.95);
}
.btn-gradient .btn-gradient-inner {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 24px;
    border-radius: 10px;
    background: #030712;
    color: #fff;
    font-weight: 600;
    font-size: 15px;
    z-index: 1;
    overflow: hidden;
}
.btn-gradient .btn-gradient-inner span {
    transition: transform 0.3s ease-in-out;
}
.btn-gradient:hover .btn-gradient-inner span {
    transform: translateX(4px);
}
[dir="rtl"] .btn-gradient:hover .btn-gradient-inner span {
    transform: translateX(-4px);
}
.btn-gradient svg {
    width: 20px;
    height: 20px;
    fill: currentColor;
    transition: transform 0.3s ease-in-out;
}
.btn-gradient:hover svg {
    transform: translateX(4px);
}
[dir="rtl"] .btn-gradient:hover svg {
    transform: translateX(-4px);
}

/* ---------- Style 6: Stroke Fill ---------- */
.btn-stroke {
    --border-right: 6px;
    --text-stroke-color: rgba(255, 255, 255, 0.6);
    --animation-color: var(--btn-color, #37ff8b);
    --fs-size: 1.5em;
    letter-spacing: 3px;
    text-decoration: none;
    font-size: var(--fs-size);
    font-family: inherit;
    position: relative;
    text-transform: uppercase;
    color: transparent;
    -webkit-text-stroke: 1px var(--text-stroke-color);
    font-weight: 800;
    cursor: pointer;
    line-height: 1;
}
.btn-stroke .hover-text {
    position: absolute;
    box-sizing: border-box;
    color: var(--animation-color);
    width: 0%;
    inset: 0;
    border-right: var(--border-right) solid var(--animation-color);
    overflow: hidden;
    transition: 0.5s;
    -webkit-text-stroke: 1px var(--animation-color);
    white-space: nowrap;
}
.btn-stroke:hover .hover-text {
    width: 100%;
    filter: drop-shadow(0 0 23px var(--animation-color));
}

/* ---------- Style 7: Chitchat ---------- */
.btn-chitchat {
    --btn-default-bg: rgb(41, 41, 41);
    --btn-padding: 15px 20px;
    --btn-hover-bg: rgb(51, 51, 51);
    --btn-transition: 0.3s;
    --btn-letter-spacing: 0.1rem;
    --btn-animation-duration: 1.2s;
    --btn-shadow-color: rgba(0, 0, 0, 0.137);
    --btn-shadow: 0 2px 10px 0 var(--btn-shadow-color);
    --hover-btn-color: var(--btn-color, #fac921);
    --default-btn-color: #fff;
    --font-size: 16px;
    --font-weight: 600;
    box-sizing: border-box;
    padding: var(--btn-padding);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--default-btn-color);
    font-weight: var(--font-weight);
    font-size: var(--font-size);
    font-family: inherit;
    background: var(--btn-default-bg);
    border: none;
    cursor: pointer;
    transition: var(--btn-transition);
    overflow: hidden;
    box-shadow: var(--btn-shadow);
    text-decoration: none;
    border-radius: 6px;
}
.btn-chitchat span {
    letter-spacing: var(--btn-letter-spacing);
    transition: var(--btn-transition);
    box-sizing: border-box;
    position: relative;
    background: inherit;
}
.btn-chitchat span::before {
    box-sizing: border-box;
    position: absolute;
    content: "";
    background: inherit;
}
.btn-chitchat:hover,
.btn-chitchat:focus {
    background: var(--btn-hover-bg);
}
.btn-chitchat:hover span,
.btn-chitchat:focus span {
    color: var(--hover-btn-color);
}
.btn-chitchat:hover span::before,
.btn-chitchat:focus span::before {
    animation: chitchat linear both var(--btn-animation-duration);
}
@keyframes chitchat {
    0% { content: "#"; }
    5% { content: "."; }
    10% { content: "^{"; }
    15% { content: "-!"; }
    20% { content: "#$_"; }
    25% { content: "№:0"; }
    30% { content: "#{+."; }
    35% { content: "@}-?"; }
    40% { content: "?{4@%"; }
    45% { content: "=.,^!"; }
    50% { content: "?2@%"; }
    55% { content: "\;1}]"; }
    60% { content: "?{%:%"; right: 0; }
    65% { content: "|{f[4"; right: 0; }
    70% { content: "{4%0%"; right: 0; }
    75% { content: "'1_0<"; right: 0; }
    80% { content: "{0%"; right: 0; }
    85% { content: "]>'"; right: 0; }
    90% { content: "4"; right: 0; }
    95% { content: "2"; right: 0; }
    100% { content: ""; right: 0; }
}

/* ---------- Style 8: Glitch ---------- */
.btn-glitch,
.btn-glitch::after {
    padding: 16px 20px;
    font-size: 18px;
    background: linear-gradient(45deg, transparent 5%, var(--btn-color, #ff013c) 5%);
    border: 0;
    color: #fff;
    letter-spacing: 3px;
    line-height: 1;
    box-shadow: 6px 0px 0px #00e6f6;
    outline: transparent;
    position: relative;
    font-family: inherit;
    font-weight: 600;
    text-decoration: none;
    display: inline-block;
    cursor: pointer;
}
.btn-glitch::after {
    --slice-0: inset(50% 50% 50% 50%);
    --slice-1: inset(80% -6px 0 0);
    --slice-2: inset(50% -6px 30% 0);
    --slice-3: inset(10% -6px 85% 0);
    --slice-4: inset(40% -6px 43% 0);
    --slice-5: inset(80% -6px 5% 0);
    content: attr(data-text);
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg, transparent 3%, #00e6f6 3%, #00e6f6 5%, #ff013c 5%);
    text-shadow: -3px -3px 0px #f8f005, 3px 3px 0px #00e6f6;
    clip-path: var(--slice-0);
}
.btn-glitch:hover::after {
    animation: 1s glitch;
    animation-timing-function: steps(2, end);
}
@keyframes glitch {
    0% { clip-path: var(--slice-1); transform: translate(-20px, -10px); }
    10% { clip-path: var(--slice-3); transform: translate(10px, 10px); }
    20% { clip-path: var(--slice-1); transform: translate(-10px, 10px); }
    30% { clip-path: var(--slice-3); transform: translate(0px, 5px); }
    40% { clip-path: var(--slice-2); transform: translate(-5px, 0px); }
    50% { clip-path: var(--slice-3); transform: translate(5px, 0px); }
    60% { clip-path: var(--slice-4); transform: translate(5px, 10px); }
    70% { clip-path: var(--slice-2); transform: translate(-10px, 10px); }
    80% { clip-path: var(--slice-5); transform: translate(20px, -10px); }
    90% { clip-path: var(--slice-1); transform: translate(-10px, 0px); }
    100% { clip-path: var(--slice-1); transform: translate(0); }
}

/* ---------- Style 9: Shine ---------- */
.btn-shine {
    padding: 12px 48px;
    color: #fff;
    background: linear-gradient(to right, #9f9f9f 0, #fff 10%, #868686 20%);
    background-position: 0;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: shine 3s infinite linear;
    animation-fill-mode: forwards;
    -webkit-text-size-adjust: none;
    font-weight: 600;
    font-size: 16px;
    text-decoration: none;
    white-space: nowrap;
    font-family: inherit;
    display: inline-block;
}
@keyframes shine {
    0% { background-position: 0; }
    60% { background-position: 180px; }
    100% { background-position: 180px; }
}

/* ---------- Style 10: IO Gradient Sweep ---------- */
.btn-io {
    position: relative;
    font-family: inherit;
    font-weight: 500;
    font-size: 18px;
    letter-spacing: 0.05em;
    border-radius: 0.8em;
    cursor: pointer;
    border: none;
    background: linear-gradient(to right, var(--btn-color, #8e2de2), color-mix(in srgb, var(--btn-color, #8e2de2) 55%, #000));
    color: ghostwhite;
    overflow: hidden;
    text-decoration: none;
    display: inline-block;
}
.btn-io svg {
    width: 1.2em;
    height: 1.2em;
    margin-right: 0.5em;
    fill: currentColor;
}
[dir="rtl"] .btn-io svg {
    margin-right: 0;
    margin-left: 0.5em;
}
.btn-io span {
    position: relative;
    z-index: 10;
    transition: color 0.4s;
    display: inline-flex;
    align-items: center;
    padding: 0.8em 1.2em 0.8em 1.05em;
}
.btn-io::before,
.btn-io::after {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}
.btn-io::before {
    content: "";
    background: #000;
    width: 120%;
    left: -10%;
    transform: skew(30deg);
    transition: transform 0.4s cubic-bezier(0.3, 1, 0.8, 1);
}
.btn-io:hover::before {
    transform: translate3d(100%, 0, 0);
}
.btn-io:active {
    transform: scale(0.95);
}