/* ==========================================================================
   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-pontotel-yellow-dark);
    /* #E8B81E */
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(252, 204, 49, 0.3);
    /* Yellow glow */
}

.pt-btn-primary:active {
    transform: translateY(0);
    box-shadow: 0 4px 10px rgba(252, 204, 49, 0.2);
}

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

.pt-btn-secondary:hover {
    background-color: var(--color-pontotel-purple-dark);
    /* #5A2B5E */
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(121, 57, 125, 0.3);
    /* Purple glow */
}

.pt-btn-secondary:active {
    transform: translateY(0);
    box-shadow: 0 4px 10px rgba(121, 57, 125, 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-pontotel-purple);
    color: var(--color-pontotel-purple-contrast);
    /* #FFFFFF */
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(121, 57, 125, 0.2);
}

.pt-btn-outline:active {
    transform: translateY(0);
    box-shadow: 0 4px 10px 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;
}