/* ============================================
    TA — BUTTONS
    .ta-btn and its colour / shape modifiers.
============================================ */

/* ---- Buttons ----
   .ta-btn is the base; colour + shape come from modifiers. */
.ta-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 9px 22px;
    border: 0;
    border-radius: var(--ta-radius-4);
    font-family: var(--ta-font);
    font-size: var(--ta-fs-15);
    font-weight: var(--ta-fw-book);
    line-height: 1.2;
    text-align: center;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color var(--ta-ease), color var(--ta-ease), border-color var(--ta-ease), transform var(--ta-ease), box-shadow var(--ta-ease);
}
.ta-btn:hover {
    transform: translateY(-1px);
}
.ta-btn:active {
    transform: translateY(0);
}
.ta-btn svg {
    flex-shrink: 0;
}

.ta-btn-orange {
    background-color: var(--ta-orange);
    color: var(--ta-black);
}
.ta-btn-orange:hover {
    background-color: var(--ta-orange-hover);
    color: var(--ta-black);
}
.ta-btn-orange-white {
    background-color: var(--ta-orange);
    color: var(--ta-white);
}
.ta-btn-orange-white:hover {
    background-color: var(--ta-orange-hover);
    color: var(--ta-white);
}
.ta-btn-ink {
    background-color: var(--ta-ink);
    color: #fde4c6;
}
.ta-btn-ink:hover {
    background-color: #1b2036;
    color: #fde4c6;
}
.ta-btn-white {
    background-color: var(--ta-white);
    color: var(--ta-black);
}
.ta-btn-white:hover {
    background-color: var(--ta-peach);
    color: var(--ta-black);
}
.ta-btn-outline-navy {
    background-color: var(--ta-white);
    color: var(--ta-navy);
    border: 1px solid var(--ta-navy);
}
.ta-btn-outline-navy:hover {
    background-color: var(--ta-navy);
    color: var(--ta-white);
}
.ta-btn-pill {
    border-radius: var(--ta-radius-pill);
}
.ta-btn-round {
    border-radius: var(--ta-radius-12);
}


/* ---- Yellow buttons (bundle pages) ---- */
.ta-btn-yellow {
    background-color: var(--ta-yellow);
    color: var(--ta-black);
}
.ta-btn-yellow:hover {
    background-color: #f5b90f;
    color: var(--ta-black);
}
.ta-btn-sun {
    background-color: var(--ta-sun);
    color: var(--ta-black);
}
.ta-btn-sun:hover {
    background-color: #e9a800;
    color: var(--ta-black);
}
.ta-btn-outline-yellow {
    background-color: var(--ta-gray-fb);
    border: 2px solid var(--ta-yellow);
    color: var(--ta-black);
}
.ta-btn-outline-yellow:hover {
    background-color: #fff7dc;
    color: var(--ta-black);
}