/* ========== CHANNEL SOFTECH — BUTTONS ==========
   One button system for every page.

   Markup:
   <a href="#" class="cs-btn cs-btn--primary">
       <span>Button text</span>
       <span class="cs-btn__icon" aria-hidden="true"><i class="fa-solid fa-arrow-right"></i></span>
   </a>

   Variants : --primary (gradient) · --outline (white, gradient border) · --solid (flat blue)
              --light (white, for dark bands) · --glass (see-through, for dark bands)
              --whatsapp · --whatsapp-outline
   Sizes    : --sm · --lg      Width: --block · --block-sm
   ================================================= */
:root {
    --cs-btn-height: 54px;
    --cs-btn-pad-x: 26px;
    --cs-btn-radius: 50px;
    --cs-btn-font: 15px;
    --cs-btn-gap: 12px;
    --cs-btn-chip: 38px;
    --cs-btn-blue: #0870af;
    --cs-btn-blue-dark: #065a8c;
    --cs-btn-cyan: #159dd3;
    --cs-btn-gradient: linear-gradient(120deg, #159dd3 0%, #0870af 42%, #065a8c 72%, #0a86c9 100%);
    --cs-btn-border-gradient: linear-gradient(120deg, #0870af, #159dd3, #0870af);
    --cs-btn-green: #168b49;
    --cs-btn-green-dark: #11743c;
    --cs-btn-ring: #159dd3;
    --cs-btn-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------- base ---------- */
.cs-btn {
    position: relative;
    isolation: isolate;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--cs-btn-gap);
    max-width: 100%;
    min-height: var(--cs-btn-height);
    padding: 12px var(--cs-btn-pad-x);
    overflow: hidden;
    border: 1.5px solid transparent;
    border-radius: var(--cs-btn-radius);
    background: transparent;
    color: inherit;
    font-family: inherit;
    font-size: var(--cs-btn-font);
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: 0.01em;
    text-align: center;
    text-decoration: none;
    white-space: normal;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition:
        transform 0.35s var(--cs-btn-ease),
        box-shadow 0.35s var(--cs-btn-ease),
        background-color 0.3s ease,
        background-position 0.6s ease,
        border-color 0.3s ease,
        color 0.3s ease;
}

.cs-btn:hover,
.cs-btn:focus {
    text-decoration: none;
}

.cs-btn:hover {
    transform: translateY(-3px);
}

.cs-btn:active {
    transform: translateY(0) scale(0.98);
}

.cs-btn:focus-visible {
    outline: 3px solid var(--cs-btn-ring);
    outline-offset: 3px;
}

.cs-btn:disabled,
.cs-btn.is-disabled,
.cs-btn[aria-disabled="true"] {
    opacity: 0.55;
    pointer-events: none;
}

.cs-btn > span:not(.cs-btn__icon) {
    min-width: 0;
}

.cs-btn > i {
    flex-shrink: 0;
    font-size: 1.1em;
    line-height: 1;
}

/* light sweep that crosses the button on hover */
.cs-btn::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: -75%;
    z-index: -1;
    width: 50%;
    background: linear-gradient(100deg, transparent, rgb(255 255 255 / 38%), transparent);
    transform: skewX(-20deg);
    pointer-events: none;
}

.cs-btn:hover::before {
    left: 130%;
    transition: left 0.75s ease;
}

/* ---------- arrow chip ---------- */
.cs-btn__icon {
    position: relative;
    display: grid;
    place-items: center;
    flex: 0 0 var(--cs-btn-chip);
    width: var(--cs-btn-chip);
    height: var(--cs-btn-chip);
    overflow: hidden;
    border-radius: 50%;
    transition:
        transform 0.35s var(--cs-btn-ease),
        background 0.3s ease,
        color 0.3s ease;
}

.cs-btn__icon i {
    font-size: 15px;
    line-height: 1;
}

/* the arrow slides out and comes back in */
.cs-btn:hover .cs-btn__icon i {
    animation: csBtnArrow 0.55s var(--cs-btn-ease);
}

@keyframes csBtnArrow {
    0% {
        transform: translate(0, 0);
        opacity: 1;
    }

    45% {
        transform: translate(160%, 0);
        opacity: 0;
    }

    46% {
        transform: translate(-160%, 0);
        opacity: 0;
    }

    100% {
        transform: translate(0, 0);
        opacity: 1;
    }
}

/* tighter right padding when the button ends with a chip */
.cs-btn:has(> .cs-btn__icon:last-child) {
    padding-top: 7px;
    padding-right: 7px;
    padding-bottom: 7px;
    gap: 16px;
}

/* ---------- PRIMARY — gradient ---------- */
.cs-btn--primary {
    background: var(--cs-btn-gradient);
    background-size: 220% 100%;
    background-position: 0% 50%;
    color: #ffffff;
    box-shadow:
        0 14px 30px rgb(8 112 175 / 28%),
        inset 0 1px 0 rgb(255 255 255 / 30%),
        inset 0 -2px 0 rgb(0 0 0 / 8%);
}

.cs-btn--primary:hover,
.cs-btn--primary:focus {
    color: #ffffff;
}

.cs-btn--primary:hover {
    background-position: 100% 50%;
    box-shadow:
        0 20px 40px rgb(8 112 175 / 34%),
        inset 0 1px 0 rgb(255 255 255 / 30%);
}

.cs-btn--primary .cs-btn__icon {
    background: #ffffff;
    color: var(--cs-btn-blue);
    box-shadow: 0 4px 12px rgb(4 50 80 / 22%);
}

/* ---------- SOLID — flat blue ---------- */
.cs-btn--solid {
    border-color: var(--cs-btn-blue);
    background: var(--cs-btn-blue);
    color: #ffffff;
    box-shadow: 0 10px 24px rgb(8 112 175 / 20%);
}

.cs-btn--solid:hover,
.cs-btn--solid:focus {
    color: #ffffff;
}

.cs-btn--solid:hover {
    border-color: var(--cs-btn-blue-dark);
    background: var(--cs-btn-blue-dark);
    box-shadow: 0 16px 32px rgb(8 112 175 / 28%);
}

.cs-btn--solid .cs-btn__icon {
    background: rgb(255 255 255 / 18%);
}

/* ---------- OUTLINE — white with gradient border ---------- */
.cs-btn--outline {
    background:
        linear-gradient(#ffffff, #ffffff) padding-box,
        var(--cs-btn-border-gradient) border-box;
    color: var(--cs-btn-blue);
    box-shadow: 0 10px 24px rgb(8 72 112 / 8%);
}

.cs-btn--outline:hover,
.cs-btn--outline:focus {
    color: var(--cs-btn-blue-dark);
}

.cs-btn--outline:hover {
    background:
        linear-gradient(#f2fbfe, #f2fbfe) padding-box,
        var(--cs-btn-border-gradient) border-box;
    box-shadow: 0 16px 32px rgb(8 112 175 / 16%);
}

.cs-btn--outline::before {
    background: linear-gradient(100deg, transparent, rgb(21 157 211 / 14%), transparent);
}

.cs-btn--outline .cs-btn__icon {
    background: #e3f5fc;
    color: var(--cs-btn-blue);
}

.cs-btn--outline:hover .cs-btn__icon {
    background: var(--cs-btn-gradient);
    background-size: 220% 100%;
    color: #ffffff;
}

/* ---------- LIGHT — white, for dark or blue bands ---------- */
.cs-btn--light {
    border-color: #ffffff;
    background: #ffffff;
    color: var(--cs-btn-blue);
    box-shadow: 0 14px 30px rgb(0 0 0 / 22%);
}

.cs-btn--light:hover,
.cs-btn--light:focus {
    color: var(--cs-btn-blue-dark);
}

.cs-btn--light:hover {
    box-shadow:
        0 18px 38px rgb(0 0 0 / 26%),
        0 0 0 6px rgb(255 255 255 / 12%);
}

.cs-btn--light::before {
    background: linear-gradient(100deg, transparent, rgb(21 157 211 / 16%), transparent);
}

.cs-btn--light .cs-btn__icon {
    background: var(--cs-btn-gradient);
    background-size: 220% 100%;
    color: #ffffff;
}

/* ---------- GLASS — see-through, for dark bands ---------- */
.cs-btn--glass {
    border-color: rgb(255 255 255 / 34%);
    background: rgb(255 255 255 / 8%);
    color: #ffffff;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.cs-btn--glass:hover,
.cs-btn--glass:focus {
    color: #ffffff;
}

.cs-btn--glass:hover {
    border-color: rgb(255 255 255 / 75%);
    background: rgb(255 255 255 / 16%);
}

.cs-btn--glass .cs-btn__icon {
    background: rgb(255 255 255 / 16%);
}

/* ---------- WHATSAPP ---------- */
.cs-btn--whatsapp {
    border-color: var(--cs-btn-green);
    background: var(--cs-btn-green);
    color: #ffffff;
    box-shadow: 0 12px 26px rgb(22 139 73 / 24%);
}

.cs-btn--whatsapp:hover,
.cs-btn--whatsapp:focus {
    color: #ffffff;
}

.cs-btn--whatsapp:hover {
    border-color: var(--cs-btn-green-dark);
    background: var(--cs-btn-green-dark);
}

.cs-btn--whatsapp-outline {
    border-color: #cfe7d9;
    background: #ffffff;
    color: #147d42;
}

.cs-btn--whatsapp-outline:focus {
    color: #147d42;
}

.cs-btn--whatsapp-outline:hover {
    border-color: var(--cs-btn-green);
    background: var(--cs-btn-green);
    color: #ffffff;
}

.cs-btn--whatsapp > i,
.cs-btn--whatsapp-outline > i {
    font-size: 1.3em;
}

/* ---------- sizes ---------- */
.cs-btn--sm {
    --cs-btn-height: 44px;
    --cs-btn-pad-x: 18px;
    --cs-btn-font: 14px;
    --cs-btn-chip: 32px;
}

.cs-btn--sm .cs-btn__icon i {
    font-size: 13px;
}

.cs-btn--lg {
    --cs-btn-height: 60px;
    --cs-btn-pad-x: 30px;
    --cs-btn-font: 16px;
    --cs-btn-chip: 44px;
}

/* square-ish corners when a section needs them */
.cs-btn--rounded {
    --cs-btn-radius: 14px;
}

.cs-btn--rounded .cs-btn__icon {
    border-radius: 10px;
}

/* ---------- width ---------- */
.cs-btn--block {
    display: flex;
    width: 100%;
}

@media (max-width: 575.98px) {
    .cs-btn--block-sm {
        display: flex;
        width: 100%;
    }
}

/* ---------- button row ---------- */
.cs-btn-group {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    margin-top: 30px;
}

.cs-btn-group--start {
    justify-content: flex-start;
}

.cs-btn-group--center {
    justify-content: center;
}

/* left on desktop, centred once columns stack (pairs with .cs-intro) */
@media (max-width: 991.98px) {
    .cs-btn-group--center-md {
        justify-content: center;
    }
}

/* phones: buttons in a row take the full width, text left and arrow right */
@media (max-width: 575.98px) {
    :root {
        --cs-btn-height: 50px;
        --cs-btn-font: 14px;
        --cs-btn-pad-x: 20px;
        --cs-btn-chip: 36px;
    }

    .cs-btn-group {
        gap: 10px;
        margin-top: 24px;
    }

    .cs-btn-group > .cs-btn {
        flex: 1 1 100%;
    }

    .cs-btn-group > .cs-btn:has(> .cs-btn__icon:last-child) {
        justify-content: space-between;
        text-align: left;
    }
}

@media (prefers-reduced-motion: reduce) {

    .cs-btn,
    .cs-btn__icon {
        transition: none;
    }

    .cs-btn::before {
        display: none;
    }

    .cs-btn:hover,
    .cs-btn:active {
        transform: none;
    }

    .cs-btn:hover .cs-btn__icon i {
        animation: none;
    }
}