/* =========================================================
   BUTTON BASE
========================================================= */

.landin-btn {
    position: relative;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;

    overflow: hidden;

    cursor: pointer;

    font-family: var(--landin-font-accent);
    text-decoration: none;
    text-transform: uppercase;

    transition:
        transform var(--landin-transition-fast),
        background-color var(--landin-transition-fast),
        border-color var(--landin-transition-fast),
        color var(--landin-transition-fast),
        box-shadow var(--landin-transition-fast);
}

/* =========================================================
   SHINE EFFECT
========================================================= */

.landin-btn::after {
    content: "";

    position: absolute;
    inset: 0 auto 0 -120%;

    width: 80%;

    background: linear-gradient(
        120deg,
        transparent,
        rgba(255, 255, 255, .3),
        transparent
    );

    transition: left .6s ease;
}

.landin-btn:hover::after {
    left: 120%;
}

/* =========================================================
   ACCESSIBILITY
========================================================= */

.landin-btn:focus-visible {
    outline: 2px solid var(--landin-primary);
    outline-offset: 4px;
}

/* =========================================================
   PRIMARY
========================================================= */

.landin-btn--primary {
    color: var(--bs-white);

    background: var(--landin-gradient-gold);

    border: 1px solid var(--landin-primary-light);

    box-shadow: var(--landin-shadow-sm);
}

.landin-btn--primary:hover {
    color: var(--bs-white);

    background: linear-gradient(
        135deg,
        var(--landin-primary-hover),
        var(--landin-primary)
    );

    transform: translateY(-2px);

    box-shadow: var(--landin-shadow-button);
}

/* =========================================================
   OUTLINE
========================================================= */

.landin-btn--outline,
.landin-btn--outline-light {
    color: var(--bs-white);

    background: transparent;

    border: 1px solid var(--bs-white);
}

/* =========================================================
   OUTLINE DEFAULT
========================================================= */

.landin-btn--outline:hover {
    color: var(--landin-bg-dark);

    background: var(--bs-white);

    border-color: var(--bs-white);

    transform: translateY(-2px);
}

/* =========================================================
   OUTLINE LIGHT
========================================================= */

.landin-btn--outline-light:hover {
    color: var(--landin-bg-dark);

    background: var(--landin-gradient-gold);

    border-color: var(--landin-primary);

    transform: translateY(-2px);

    box-shadow: var(--landin-shadow-gold);
}


/* =========================================================
   GOLD OUTLINE PREMIUM
========================================================= */

.landin-btn--gold-outline-premium {
    background: transparent;

    border: 1px solid var(--landin-primary);

    color: transparent;

    background-image: var(--landin-gradient-gold);

    background-clip: text;
    -webkit-background-clip: text;

    transition:
        transform var(--landin-transition-fast),
        box-shadow var(--landin-transition-fast),
        background-color var(--landin-transition-fast);
}

.landin-btn--gold-outline-premium:hover {
    color: var(--bs-white);

    background:
        var(--landin-gradient-gold);

    -webkit-text-fill-color: var(--bs-white);

    transform: translateY(-2px);

    box-shadow: var(--landin-shadow-gold);
}
/* =========================================================
   ROUTE TAG BUTTON
========================================================= */

.landin-btn--route {
    padding: .375rem .875rem;

    font-size: .625rem;
    font-weight: 500;

    color: var(--landin-primary);

    background: rgba(198, 164, 108, .08);

    border: 1px solid rgba(198, 164, 108, .4);
}

/* =========================================================
   FRANCHISE BUTTON
========================================================= */

.landin-btn--franchise {
    padding: .375rem .75rem;

    font-size: .625rem;
    font-weight: 500;

    color: rgba(255, 255, 255, .75);

    background: transparent;

    border: 1px dashed rgba(255, 255, 255, .25);
}

.landin-btn--franchise:hover {
    color: var(--bs-white);

    background: rgba(198, 164, 108, .1);

    border-color: var(--landin-primary);
}

/* =========================================================
   CTA MODIFIER
========================================================= */

.landin-btn--cta {
    padding:
        var(--landin-btn-padding-y)
        var(--landin-btn-padding-x);

    font-weight: 400;
}

.landin-btn--cta:hover {
    transform:
        translateY(-2px)
        scale(1.02);
}

.landin-btn--cta:active {
    transform:
        translateY(0)
        scale(.99);
}

/* =========================================================
   SOCIAL ICONS
========================================================= */

.landin-social-icons {
    display: flex;
    gap: .75rem;
}

.landin-social-icons a {
    width: var(--landin-social-size);
    height: var(--landin-social-size);

    display: flex;
    align-items: center;
    justify-content: center;

    color: var(--landin-primary);

    text-decoration: none;

    border-radius: 50%;

    background: rgba(198, 164, 108, .1);

    border: 1px solid rgba(198, 164, 108, .25);

    -webkit-tap-highlight-color: transparent;

    transition:
        transform var(--landin-transition-fast),
        background-color var(--landin-transition-fast),
        border-color var(--landin-transition-fast),
        color var(--landin-transition-fast),
        box-shadow var(--landin-transition-fast);
}

.landin-social-icons a:hover {
    color: var(--bs-black);

    background: var(--landin-primary);

    border-color: var(--landin-primary);

    transform: translateY(-4px);

    box-shadow: var(--landin-shadow-gold);
}

.landin-social-icons a:focus-visible {
    outline: 2px solid var(--landin-primary-light);
    outline-offset: 4px;
}

.landin-social-icons i {
    font-size: .95rem;
}