/* ==========================================================================
   PONTOTEL BUTTONS - PILL-SHAPED DESIGN
   ========================================================================== */

.pt-btn {
    /* Layout */
    display: inline-block;
    padding: 0.75rem 2rem;
    /* 12px 32px */

    /* Shape */
    border-radius: var(--border-radius-full);
    /* 9999px - Pill Shape */
    border: 2px solid transparent;

    /* Typography */
    font-family: var(--font-family-primary);
    font-weight: var(--font-weight-semibold);
    /* 600 */
    font-size: var(--font-size-base);
    /* 16px */
    text-decoration: none;
    text-align: center;

    /* Interaction */
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    /* Material easing */

    /* Accessibility */
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

/* Primary Button - Yellow */
.pt-btn-primary {
    background-color: var(--color-pontotel-yellow);
    /* #FCCC31 */
    color: var(--color-pontotel-yellow-contrast);
    /* #000000 */
    border-color: var(--color-pontotel-yellow);
}

.pt-btn-primary:hover {
    background-color: var(--color-yellow-500);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(232, 159, 0, 0.25);
}

.pt-btn-primary:active {
    transform: translateY(0);
    box-shadow: 0 2px 6px rgba(232, 159, 0, 0.2);
}

/* Secondary Button - Purple */
.pt-btn-secondary {
    background-color: var(--color-purple-500);
    color: #FFFFFF;
    border-color: var(--color-purple-500);
}

.pt-btn-secondary:hover {
    background-color: var(--color-purple-400);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(64, 31, 68, 0.25);
}

.pt-btn-secondary:active {
    transform: translateY(0);
    box-shadow: 0 2px 6px rgba(64, 31, 68, 0.2);
}

/* Outline Button - Purple Border */
.pt-btn-outline {
    background-color: transparent;
    color: var(--color-pontotel-purple);
    /* #79397D */
    border-color: var(--color-pontotel-purple);
}

.pt-btn-outline:hover {
    background-color: var(--color-purple-400);
    color: #FFFFFF;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(121, 57, 125, 0.2);
}

.pt-btn-outline:active {
    transform: translateY(0);
    box-shadow: 0 2px 6px rgba(121, 57, 125, 0.15);
}

/* Focus State for Accessibility */
.pt-btn:focus-visible {
    outline: 3px solid var(--color-pontotel-purple);
    outline-offset: 2px;
}

/* Disabled State */
.pt-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none !important;
    box-shadow: none !important;
}