/* ============================================
   HFLA Shared Button Styles
   Used across borrowers, donors-demo, home-demo
   ============================================ */

/* Primary - Cyan gradient pill */
.btn-hfla-primary {
    background: linear-gradient(135deg, #33afd9, #29b6f6);
    color: #fff;
    border: none;
    padding: 0.9em 2.2em;
    font-family: "Montserrat-Bold", sans-serif;
    font-size: 0.95rem;
    border-radius: 50px;
    text-decoration: none;
    transition: opacity 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    box-shadow: 0 4px 15px rgba(51, 175, 217, 0.4);
    cursor: pointer;
}
.btn-hfla-primary:hover {
    opacity: 0.9;
    transform: translateY(-2px);
    color: #fff;
    box-shadow: 0 6px 20px rgba(51, 175, 217, 0.5);
}

/* Outline Dark - Navy border on light backgrounds */
.btn-hfla-outline {
    background: transparent;
    color: #1c4489;
    border: 2px solid #1c4489;
    padding: 0.85em 2.2em;
    font-family: "Montserrat-Bold", sans-serif;
    font-size: 0.95rem;
    border-radius: 50px;
    text-decoration: none;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    cursor: pointer;
}
.btn-hfla-outline:hover {
    background: #1c4489;
    color: #fff;
    transform: translateY(-2px);
}

/* Outline Light - White border on dark backgrounds */
.btn-hfla-outline-light {
    background: transparent;
    color: #fff;
    border: 2px solid rgba(255,255,255,0.5);
    padding: 0.85em 2.2em;
    font-family: "Montserrat-Bold", sans-serif;
    font-size: 0.95rem;
    border-radius: 50px;
    text-decoration: none;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    cursor: pointer;
}
.btn-hfla-outline-light:hover {
    border-color: #fff;
    background: rgba(255,255,255,0.1);
    color: #fff;
    transform: translateY(-2px);
}

/* Backwards compatibility aliases */
.btn-banner-primary,
.btn-hero-primary,
.btn-slide-primary,
.btn-apply,
.btn-read-more {
    background: linear-gradient(135deg, #33afd9, #29b6f6);
    color: #fff;
    border: none;
    padding: 0.9em 2.2em;
    font-family: "Montserrat-Bold", sans-serif;
    font-size: 0.95rem;
    border-radius: 50px;
    text-decoration: none;
    transition: opacity 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    box-shadow: 0 4px 15px rgba(51, 175, 217, 0.4);
    cursor: pointer;
}
.btn-banner-primary:hover,
.btn-hero-primary:hover,
.btn-slide-primary:hover,
.btn-apply:hover,
.btn-read-more:hover {
    opacity: 0.9;
    transform: translateY(-2px);
    color: #fff;
    box-shadow: 0 6px 20px rgba(51, 175, 217, 0.5);
}

.btn-banner-outline,
.btn-hero-outline-dark,
.btn-slide-outline,
.btn-steps-outline,
.btn-explore {
    background: transparent;
    color: #1c4489;
    border: 2px solid #1c4489;
    padding: 0.85em 2.2em;
    font-family: "Montserrat-Bold", sans-serif;
    font-size: 0.95rem;
    border-radius: 50px;
    text-decoration: none;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    cursor: pointer;
}
.btn-banner-outline:hover,
.btn-hero-outline-dark:hover,
.btn-slide-outline:hover,
.btn-steps-outline:hover,
.btn-explore:hover {
    background: #1c4489;
    color: #fff;
    transform: translateY(-2px);
}

.btn-hero-outline,
.btn-hero-outline-light {
    background: transparent;
    color: #fff;
    border: 2px solid rgba(255,255,255,0.5);
    padding: 0.85em 2.2em;
    font-family: "Montserrat-Bold", sans-serif;
    font-size: 0.95rem;
    border-radius: 50px;
    text-decoration: none;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    cursor: pointer;
}
.btn-hero-outline:hover,
.btn-hero-outline-light:hover {
    border-color: #fff;
    background: rgba(255,255,255,0.1);
    color: #fff;
    transform: translateY(-2px);
}