/* ============================================================
   Global Button System — .gfBtn
   ============================================================
   Usage:
     <a class="gfBtn gfBtn--solid">Button</a>
     <a class="gfBtn gfBtn--solid gfBtn--lg">Button</a>
     <a class="gfBtn gfBtn--ctaBlue">
       Button
       <span class="gfBtn__arrow"><!-- svg arrow --></span>
     </a>
     <a class="gfBtn gfBtn--solid">
       <span class="gfBtn__icon"><!-- svg icon --></span>
       Button
     </a>
   ============================================================ */

/* ── Base ─────────────────────────────────────────────────── */

.gfBtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 16px;
    font-family: var(--second-family);
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.01em;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
    border: 1.5px solid transparent;
    border-radius: 8px;
    transition:
        background 0.18s ease,
        color 0.18s ease,
        border-color 0.18s ease,
        box-shadow 0.18s ease,
        transform 0.12s ease,
        opacity 0.18s ease;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    position: relative;
}
.gfBtn *{
        transition:
        background 0.18s ease,
        color 0.18s ease,
        border-color 0.18s ease,
        box-shadow 0.18s ease,
        transform 0.12s ease,
        opacity 0.18s ease;
}

.gfBtn:focus-visible {
    outline: 2px solid var(--brand-blue-500);
    outline-offset: 3px;
}

/* ── Size modifiers ───────────────────────────────────────── */

/* Small */
.gfBtn--sm {
    padding: 7px 14px;
    font-size: 13px;
    border-radius: 6px;
    gap: 6px;
}

/* Large / Big */
.gfBtn--lg {
    padding: 14px 24px;
    font-size: 15px;
    border-radius: 10px;
    gap: 10px;
}

/* ── Icon ─────────────────────────────────────────────────── */

.gfBtn__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    pointer-events: none;
}

.gfBtn--sm .gfBtn__icon { width: 16px; height: 16px; }
.gfBtn--lg .gfBtn__icon { width: 20px; height: 20px; }

/* Icon-only: square button */
.gfBtn--iconOnly {
    padding: 10px;
    gap: 0;
}
.gfBtn--iconOnly.gfBtn--sm { padding: 7px; }
.gfBtn--iconOnly.gfBtn--lg { padding: 14px; }

/* ── Arrow badge (CTA types) ──────────────────────────────── */

.gfBtn__arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    border-radius: 6px;
    transition: background 0.18s ease;
    pointer-events: none;
}

.gfBtn--sm .gfBtn__arrow { width: 20px; height: 20px; border-radius: 4px; }
.gfBtn--lg .gfBtn__arrow { width: 28px; height: 28px; border-radius: 8px; }




/* ============================================================
   SOLID — Main (blue)
   ============================================================ */

.gfBtn--solid {
    font-family: var(--second-family);
font-weight: 600;
font-size: 14px;
line-height: 129%;
letter-spacing: 0.01em;
color: var(--base-white);
box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.02), 0 3px 12px 0 rgba(0, 0, 0, 0.03), 0 7px 27px 0 rgba(0, 0, 0, 0.04), 0 13px 57px 0 rgba(0, 0, 0, 0.05), 0 22px 110px 0 rgba(0, 0, 0, 0.07);
background: linear-gradient(180deg, #4b81fe 0%, #1b5df8 100%);
border-radius: 4px;
padding: 12px 16px;
}

.gfBtn--solid:hover {
    background: linear-gradient(180deg, #5c8fff 0%, #2d6bf9 100%);
    box-shadow:
        0 1px 3px rgba(27, 93, 248, 0.18),
        0 6px 18px rgba(27, 93, 248, 0.32);
    color: #fff;
}

.gfBtn--solid:active {
    background: linear-gradient(180deg, #3b72ed 0%, #1348d8 100%);
    box-shadow: 0 1px 3px rgba(27, 93, 248, 0.18);
    transform: translateY(1px);
    color: #fff;
}

.gfBtn--solid:disabled,
.gfBtn--solid[disabled],
.gfBtn--solid.is-disabled {
    background: linear-gradient(180deg, #b3c9fd 0%, #99b8fc 100%);
    box-shadow: none;
    cursor: not-allowed;
    pointer-events: none;
    color: rgba(255, 255, 255, 0.65);
}


/* ============================================================
   OUTLINE — Secondary (white bg, border)
   ============================================================ */

.gfBtn--outline {
font-family: var(--second-family);
font-weight: 600;
font-size: 14px;
line-height: 129%;
letter-spacing: 0.01em;
color: var(--base-black);
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.03), 0 24px 32px 0 rgba(0, 0, 0, 0.04);
background: var(--base-white);
border: 1px solid var(--base-border-black);
border-radius: 4px;
padding: 4px 16px;
}

.gfBtn--outline:hover {
    border-color: rgba(18, 23, 51, 0.22);
    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.05),
        0 4px 12px rgba(0, 0, 0, 0.08);
    color: var(--base-black);
}

.gfBtn--outline:active {
    background: var(--brand-blue-25, #f3f7ff);
    border-color: rgba(27, 93, 248, 0.28);
    color: var(--brand-blue-500);
    box-shadow: none;
    transform: translateY(1px);
}

.gfBtn--outline:disabled,
.gfBtn--outline[disabled],
.gfBtn--outline.is-disabled {
    background: var(--gray-100, #f8f9fa);
    border-color: rgba(18, 23, 51, 0.06);
    color: var(--gray-500, #adb5bd);
    box-shadow: none;
    cursor: not-allowed;
    pointer-events: none;
}


/* ============================================================
   CTA BLUE — Blue bg + dark arrow badge
   ============================================================ */

.gfBtn--ctaBlue {
font-family: var(--second-family);
font-weight: 550;
font-size: 16px;
line-height: 150%;
color: var(--base-white);
box-shadow: 0 4px 7px 0 rgba(0, 0, 0, 0.03), 0 21px 26px 0 rgba(0, 0, 0, 0.04), 0 55px 81px 0 rgba(0, 0, 0, 0.07);
background: linear-gradient(180deg, #4b81fe 0%, #1b5df8 100%);
border: 1px solid rgba(0, 5, 25, 0.06);
border-radius: 6px;
padding: 4px 4px 4px 24px;
}

.gfBtn--ctaBlue .gfBtn__arrow {
border-radius: 4px;
padding: 15px;
width: 48px;
height: 48px;
background: var(--base-white);
margin-left: 12px;
}
.gfBtn--ctaBlue .gfBtn__arrow:after{
    content: '';
    display: block;
    height: 10px;
    width: 6px;
    background-size: 100%;
    background-image: url("data:image/svg+xml,%3Csvg width='6' height='10' viewBox='0 0 6 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.71229 4.77394L-3.70903e-07 1.06159L1.06066 0.000943138L5.83366 4.77394L1.06066 9.54687L-4.63628e-08 8.48622L3.71229 4.77394Z' fill='%231B5DF8'/%3E%3C/svg%3E%0A");
}

.gfBtn--ctaBlue:hover {
box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.02), 0 3px 12px 0 rgba(0, 0, 0, 0.03), 0 7px 27px 0 rgba(0, 0, 0, 0.04), 0 13px 57px 0 rgba(0, 0, 0, 0.05), 0 22px 110px 0 rgba(0, 0, 0, 0.07);
background: linear-gradient(180deg, #6b98f3 0%, #1b5df8 100%);
color: var(--base-white);
}

.gfBtn--ctaBlue:hover .gfBtn__arrow {
    background: var(--base-white);
}
.gfBtn--ctaBlue:hover .gfBtn__arrow:after{
    background-image: url("data:image/svg+xml,%3Csvg width='6' height='10' viewBox='0 0 6 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.71229 4.77394L-3.70903e-07 1.06159L1.06066 0.000943138L5.83366 4.77394L1.06066 9.54687L-4.63628e-08 8.48622L3.71229 4.77394Z' fill='%236B98F3' /%3E%3C/svg%3E");
}
.gfBtn--ctaBlue:active {
    background: linear-gradient(180deg, #3b72ed 0%, #1348d8 100%);
    box-shadow: 0 1px 3px rgba(27, 93, 248, 0.18);
    transform: translateY(1px);
    color: #fff;
}

.gfBtn--ctaBlue:active .gfBtn__arrow {
    background: rgba(0, 0, 0, 0.32);
}

.gfBtn--ctaBlue:disabled,
.gfBtn--ctaBlue[disabled],
.gfBtn--ctaBlue.is-disabled {
    background: linear-gradient(180deg, #b3c9fd 0%, #99b8fc 100%);
    box-shadow: none;
    cursor: not-allowed;
    pointer-events: none;
    color: rgba(255, 255, 255, 0.65);
}

.gfBtn--ctaBlue:disabled .gfBtn__arrow,
.gfBtn--ctaBlue[disabled] .gfBtn__arrow,
.gfBtn--ctaBlue.is-disabled .gfBtn__arrow {
    background: rgba(0, 0, 0, 0.1);
}


/* ============================================================
   CTA WHITE — White bg + blue arrow badge
   ============================================================ */

.gfBtn--ctaWhite {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.03), 0 24px 32px 0 rgba(0, 0, 0, 0.04), 0 56px 100px 0 rgba(0, 0, 0, 0.07);
background: var(--base-white);
border: 1px solid var(--base-border-black);
border-radius: 6px;
padding: 4px 4px 4px 24px;
font-family: var(--second-family);
font-weight: 600;
font-size: 16px;
line-height: 125%;
letter-spacing: 0.01em;
text-align: center;
color: var(--base-black);
gap: 16px;

}
.gfBtn--ctaWhite .gfBtn__arrow:after{
    content: '';
    display: block;
    background-image: url("data:image/svg+xml,%3Csvg width='6' height='10' viewBox='0 0 6 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.71229 4.77394L-3.70903e-07 1.06159L1.06066 0.000943138L5.83366 4.77394L1.06066 9.54687L-4.63628e-08 8.48622L3.71229 4.77394Z' fill='white'/%3E%3C/svg%3E%0A");
    width: 6px;
    height: 10px;
}

.gfBtn--ctaWhite .gfBtn__arrow {
background: linear-gradient(180deg, #4b81fe 0%, #1b5df8 100%);
border-radius: 4px;
padding: 10px;
width: 48px;
height: 48px;
display: flex;
align-items: center;
justify-content: center;
}

.gfBtn--ctaWhite:hover {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.03), 0 24px 32px 0 rgba(0, 0, 0, 0.04), 0 56px 100px 0 rgba(0, 0, 0, 0.07);
background: var(--base-bg);
color: var(--base-black);
}

.gfBtn--ctaWhite:hover .gfBtn__arrow {
    background: linear-gradient(180deg, #4b81fe 0%, #1b5df8 100%);
}
.gfBtn--ctaWhite:hover .gfBtn__arrow:after{
background-image: url("data:image/svg+xml,%3Csvg width='6' height='10' viewBox='0 0 6 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.71229 4.77394L-3.70903e-07 1.06159L1.06066 0.000943138L5.83366 4.77394L1.06066 9.54687L-4.63628e-08 8.48622L3.71229 4.77394Z' fill='%236B98F3'/%3E%3C/svg%3E%0A");
}

.gfBtn--ctaWhite:active {
    border: 1px solid var(--base-border-black);
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.03), 0 24px 32px 0 rgba(0, 0, 0, 0.04), 0 56px 100px 0 rgba(0, 0, 0, 0.07);
background: var(--brand-blue-25);
}

.gfBtn--ctaWhite:active .gfBtn__arrow {
    background: var(--brand-blue-700, #193776);
}

.gfBtn--ctaWhite:disabled,
.gfBtn--ctaWhite[disabled],
.gfBtn--ctaWhite.is-disabled {
    background: var(--gray-100, #f8f9fa);
    border-color: rgba(18, 23, 51, 0.06);
    color: var(--gray-500, #adb5bd);
    box-shadow: none;
    cursor: not-allowed;
    pointer-events: none;
}

.gfBtn--ctaWhite:disabled .gfBtn__arrow,
.gfBtn--ctaWhite[disabled] .gfBtn__arrow,
.gfBtn--ctaWhite.is-disabled .gfBtn__arrow {
    background: var(--gray-400, #ced4da);
}


/* ============================================================
   OUTLINE GLASS — Secondary on dark / gradient backgrounds
   (hero sections, 404 page, coloured banners)
   ============================================================ */

.gfBtn--outlineGlass {
    backdrop-filter: blur(5px);
    background: var(--white-transparent-20);
    border-radius: 8px;
    font-family: var(--second-family);
    font-weight: 600;
    font-size: 16px;
    line-height: 125%;
    letter-spacing: 0.01em;
    color: var(--base-white);
    display: flex;
    align-items: center;
    gap: 16px;
}

.gfBtn--arrowGlass{
    font-family: var(--second-family);
    font-weight: 550;
    font-size: 16px;
    line-height: 150%;
    text-align: center;
    color: var(--base-black);
    box-shadow: 0 1px 8px 0 rgba(0, 0, 0, 0.01), 0 6px 17px 0 rgba(0, 0, 0, 0.01), 0 15px 40px 0 rgba(0, 0, 0, 0.02);
    background: var(--base-white);
    border: 1px solid var(--base-border-black);
    border-radius: 6px;
    padding: 16px 32px;
    display: inline-flex;
    align-items: center;
    gap: 16px;
}

.gfBtn--outlineGlass:hover {
    background: rgba(255, 255, 255, 0.22);
    border-color: rgba(255, 255, 255, 0.45);
    color: #fff;
}

.gfBtn--outlineGlass:active {
    background: rgba(255, 255, 255, 0.3);
    transform: translateY(1px);
    color: #fff;
}

.gfBtn--outlineGlass:disabled,
.gfBtn--outlineGlass[disabled],
.gfBtn--outlineGlass.is-disabled {
    opacity: 0.35;
    cursor: not-allowed;
    pointer-events: none;
}


/* ============================================================
   TEXT BTN — Text link with arrow
   ============================================================ */

.gfBtn--text {
    background: none;
    border-color: transparent;
    border-radius: 4px;
    color: var(--brand-blue-500, #1b5df8);
    padding: 4px 6px;
    font-size: 15px;
    box-shadow: none;
}

.gfBtn--text::after {
    content: '›';
    font-size: 1.15em;
    font-weight: 400;
    line-height: 1;
    display: inline-block;
    transition: transform 0.18s ease;
    margin-left: 2px;
}

.gfBtn--text:hover {
    color: var(--brand-blue-600, #1b4ec4);
}

.gfBtn--text:hover::after {
    transform: translateX(3px);
}

.gfBtn--text:active {
    color: var(--brand-blue-700, #193776);
    transform: translateY(1px);
}

.gfBtn--text:disabled,
.gfBtn--text[disabled],
.gfBtn--text.is-disabled {
    color: var(--gray-500, #adb5bd);
    cursor: not-allowed;
    pointer-events: none;
}

/* Text small */
.gfBtn--text.gfBtn--sm {
    font-size: 13px;
    padding: 3px 4px;
}

/* Text large */
.gfBtn--text.gfBtn--lg {
    font-size: 16px;
    padding: 5px 6px;
}

/* Text on dark bg */
.gfBtn--textLight {
    background: none;
    border-color: transparent;
    border-radius: 4px;
    color: #fff;
    padding: 4px 6px;
    font-size: 15px;
    box-shadow: none;
}

.gfBtn--textLight::after {
    content: '›';
    font-size: 1.15em;
    font-weight: 400;
    line-height: 1;
    display: inline-block;
    transition: transform 0.18s ease;
    margin-left: 2px;
}

.gfBtn--textLight:hover {
    color: rgba(255, 255, 255, 0.8);
}

.gfBtn--textLight:hover::after {
    transform: translateX(3px);
}

.gfBtn--textLight:active {
    color: rgba(255, 255, 255, 0.65);
    transform: translateY(1px);
}

.gfBtn--textLight.gfBtn--sm { font-size: 13px; padding: 3px 4px; }
.gfBtn--textLight.gfBtn--lg { font-size: 16px; padding: 5px 6px; }