/* ==========================================================================
   ALPIN WORK — BUTTON SYSTEM
   Універсальні кнопки для всього сайту
========================================================================== */

/* -------------------------------
   БАЗОВИЙ СТИЛЬ КНОПКИ
--------------------------------*/
.aw-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 0.6rem 1.25rem;
    border-radius: 10px;

    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;

    transition:
        background-color .18s ease-out,
        color .18s ease-out,
        border-color .18s ease-out,
        box-shadow .18s ease-out,
        transform .18s ease-out;
    user-select: none;
    /* ВАЖЛИВО: дозволяємо перенесення тексту,
       щоб кнопки не вилазили за екран */
    white-space: normal;
}

.aw-btn i {
    font-size: 1.1rem;
    margin-right: 0.45rem;
}

/* Disabled */
.aw-btn:disabled,
.aw-btn.disabled {
    pointer-events: none;
    opacity: 0.55;
}

/* -------------------------------
   1) PRIMARY — головна кнопка
--------------------------------*/
.aw-btn-primary {
    background: var(--aw-accent-strong, #009e9e);
    color: #ffffff;
    border: 1px solid var(--aw-accent-strong, #009e9e);
}
.aw-btn-primary:hover {
    background: var(--aw-accent-strong-dark, #005f5f);
    border-color: var(--aw-accent-strong-dark, #005f5f);
}

/* -------------------------------
   2) OUTLINE PRIMARY
--------------------------------*/
.aw-btn-outline-primary {
    background: transparent;
    color: var(--aw-accent-strong, #009e9e);
    border: 2px solid var(--aw-accent-strong, #009e9e);
}
.aw-btn-outline-primary:hover {
    background: var(--aw-accent-strong, #009e9e);
    color: #ffffff;
}

/* -------------------------------
   3) DARK — темна кнопка для хедеру
--------------------------------*/
.aw-btn-dark {
    background: #022F3B;
    color: #ffffff;
    border: 1px solid #022F3B;
}
.aw-btn-dark:hover {
    background: #003647;
}

/* -------------------------------
   4) LIGHT — світла кнопка
--------------------------------*/
.aw-btn-light {
    background: #ffffff;
    color: #133040;
    border: 1px solid #d9e2e8;
}
.aw-btn-light:hover {
    border-color: #009e9e;
    color: #009e9e;
}

/* -------------------------------
   5) GOLD — золота кнопка
--------------------------------*/
.aw-btn-gold {
    background: #E5C46A;
    color: #1b2735;
    border: 1px solid #d4b45c;
}
.aw-btn-gold:hover {
    background: #d4b45c;
}

/* -------------------------------
   6) OUTLINE SECONDARY
--------------------------------*/
.aw-btn-outline-secondary {
    background: transparent;
    border: 2px solid #abb8c3;
    color: #41505f;
}
.aw-btn-outline-secondary:hover {
    background: #e7edf2;
}

/* -------------------------------
   7) SOFT BUTTON — м'який фон
--------------------------------*/
.aw-btn-soft {
    background: #e6f5f5;
    color: #006666;
    border: 1px solid #cceeee;
}
.aw-btn-soft:hover {
    background: #d7f0f0;
}

/* -------------------------------
   8) WHITE OUTLINE
--------------------------------*/
.aw-btn-outline-white {
    background: transparent;
    border: 2px solid #ffffff;
    color: #ffffff;
}
.aw-btn-outline-white:hover {
    background: rgba(255,255,255,0.12);
}

/* -------------------------------
   9) PILL SHAPE — круглі кнопки
--------------------------------*/
.aw-btn-pill {
    border-radius: 999px;
    padding: 0.55rem 1.4rem;
}

/* -------------------------------
   10) SMALL / LARGE
--------------------------------*/
.aw-btn-sm {
    padding: 0.4rem 0.9rem;
    font-size: 0.82rem;
    border-radius: 7px;
}
.aw-btn-lg {
    padding: 0.8rem 1.65rem;
    font-size: 1.05rem;
    border-radius: 12px;
}

/* -------------------------------
   11) FULL WIDTH (мануальний)
--------------------------------*/
.aw-btn-block {
    display: flex;
    width: 100%;
}

/* -------------------------------
   12) SHADOW
--------------------------------*/
.aw-btn-shadow {
    box-shadow: 0 6px 20px rgba(0, 158, 158, 0.22);
}
.aw-btn-shadow:hover {
    box-shadow: 0 10px 26px rgba(0, 158, 158, 0.28);
    transform: translateY(-2px);
}

/* -------------------------------
   13) GHOST BUTTON
--------------------------------*/
.aw-btn-ghost {
    background: transparent;
    color: #133040;
    border: none;
}
.aw-btn-ghost:hover {
    color: #009e9e;
}

/* -------------------------------
   14) BUTTON WITH ARROW
--------------------------------*/
.aw-btn-arrow i {
    margin-left: 0.45rem;
    margin-right: 0;
    transition: transform .18s ease-out;
}
.aw-btn-arrow:hover i {
    transform: translateX(4px);
}

/* -------------------------------
   15) ICON LEFT VARIANT
--------------------------------*/
.aw-btn-icon i {
    margin-right: 0.55rem;
}

/* -------------------------------
   16) ICON ONLY (circle)
--------------------------------*/
.aw-btn-icon-circle {
    width: 42px;
    height: 42px;
    border-radius: 999px;
    padding: 0;
    font-size: 1.2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* -------------------------------
   17) HEADER LINK-LIKE BUTTON
--------------------------------*/
.aw-btn-header {
    background: transparent;
    border: none;
    color: #c2d3dc;
    padding: 0.4rem 0.8rem;
}
.aw-btn-header:hover {
    color: #ffffff;
}

/* -------------------------------
   18) MUTED GRAY BUTTON
--------------------------------*/
.aw-btn-muted {
    background: #e7edf2;
    border: 1px solid #d9e3ea;
    color: #3d4b59;
}
.aw-btn-muted:hover {
    background: #dde6ec;
}

/* -------------------------------
   19) FILTER / TAG BUTTON
--------------------------------*/
.aw-btn-filter {
    background: #eef3f6;
    color: #4d5b68;
    border-radius: 999px;
    padding: 0.4rem 1rem;
    border: 1px solid transparent;
}
.aw-btn-filter:hover {
    background: #e1ebf0;
    border-color: #009e9e;
    color: #009e9e;
}

/* -------------------------------
   20) SKELETON LOADING BUTTON
--------------------------------*/
.aw-btn-loading {
    pointer-events: none;
    color: transparent !important;
    position: relative;
}
.aw-btn-loading::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(100deg,
        rgba(255,255,255,0) 0%,
        rgba(255,255,255,0.6) 40%,
        rgba(255,255,255,0) 80%
    );
    animation: awBtnLoading 1.2s infinite;
}

@keyframes awBtnLoading {
    from { transform: translateX(-100%); }
    to   { transform: translateX(100%); }
}

/* ================================================
   VARIANTS OF BUTTON TEXT (FULL / SHORT LABEL)
================================================ */

.aw-btn-text-full {
    display: inline;
}

.aw-btn-text-short {
    display: none;
}

/* ================================================
   MOBILE TWEAKS
   - коротший текст
   - менший радіус pill
   - не вилазить за екран
================================================ */

@media (max-width: 575.98px) {

    /* На мобілі показуємо короткий текст */
    .aw-btn-text-full {
        display: none;
    }

    .aw-btn-text-short {
        display: inline;
    }

    /* Кнопка, позначена як block-mobile, завжди вписується в екран */
    .aw-btn-block-mobile {
        display: flex;
        width: 100%;
        max-width: 100%;

        white-space: normal;
        text-align: center;

        justify-content: center;
        align-items: center;
    }

    /* Pill на мобілці менш круглий */
    .aw-btn.aw-btn-pill {
        border-radius: 10px;
        padding-left: 1.1rem;
        padding-right: 1.1rem;
    }

    /* Стрілка не стискається і не тягне кнопку */
    .aw-btn-arrow i {
        flex-shrink: 0;
        margin-left: 0.4rem;
        margin-right: 0;
    }
}