/* ==========================================
   Portal Button Component
   Reusable button component for portal cards
   ========================================== */

/* Base Button */
.portal-btn {
    display: inline-block;
    padding: 0.75rem 1.5rem;
    background: #2D2D2D;
    color: #fff;
    text-decoration: none;
    border-radius: 3.125rem;
    font-size: 0.9rem;
    font-weight: 500;
    border: none;
    cursor: pointer;
    transition: opacity 0.3s ease, transform 0.2s ease;
    width: 100%;
    max-width: 15.625rem;
    text-align: center;
}

.portal-btn:hover {
    opacity: 0.7;
}

.portal-btn:active {
    transform: scale(0.98);
}

/* ==========================================
   Button Variants by Card Type
   ========================================== */

/* Admin Button - Green */
.portal-btn-admin {
    background: linear-gradient(135deg, #4A6741 0%, #5A7751 100%);
}

/* Designer Button - Orange */
.portal-btn-designer {
    background: linear-gradient(135deg, #C4704C 0%, #D4805C 100%);
}

/* Partner Button - Dark */
.portal-btn-partner {
    background: linear-gradient(135deg, #4A3F3F 0%, #5A4F4F 100%);
}

/* ==========================================
   Button States
   ========================================== */

/* Disabled State */
.portal-btn-disabled,
.portal-btn[disabled] {
    background: #ccc;
    color: #888;
    cursor: not-allowed;
    pointer-events: none;
}

.portal-btn-disabled:hover,
.portal-btn[disabled]:hover {
    background: #ccc;
    transform: none;
}

/* ==========================================
   Button Sizes
   ========================================== */

/* Small Button */
.portal-btn-sm {
    padding: 0.5rem 1rem;
    font-size: 0.8rem;
}

/* Large Button */
.portal-btn-lg {
    padding: 1rem 2rem;
    font-size: 1rem;
}

/* Full Width Button */
.portal-btn-full {
    width: 100%;
    text-align: center;
}