/* ====================================================================
   MODERN BUTTONS CSS
   Reusable button styles for modern aesthetics across the site
   ==================================================================== */

/* ===== BASE MODERN BUTTON ===== */
.modern-btn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    border: none !important;
    border-radius: 6px;
    padding: 10px 16px;
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.3s ease;
    min-width: 120px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    line-height: 1.2;
}

.modern-btn .rbText,
.modern-btn .RadButton,
.modern-btn span {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    padding: 0 !important;
    margin: 0 !important;
    line-height: 1 !important;
}

.modern-btn:focus {
    outline: 0;
    box-shadow: 0 0 0 3px rgba(0,0,0,0.15) !important;
}

.modern-btn:disabled,
.modern-btn.disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none !important;
}

/* ===== BUTTON VARIANTS ===== */
.modern-btn.primary {
    background: linear-gradient(135deg, #007bff 0%, #0056b3 100%) !important;
    color: white !important;
    box-shadow: 0 2px 4px rgba(0,123,255,0.3) !important;
}

.modern-btn.primary:hover:not(:disabled) {
    background: linear-gradient(135deg, #0056b3 0%, #004085 100%) !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0,123,255,0.4) !important;
}

.modern-btn.primary:focus {
    box-shadow: 0 0 0 3px rgba(0,123,255,0.25) !important;
}

.modern-btn.secondary {
    background: linear-gradient(135deg, #6c757d 0%, #5a6268 100%) !important;
    color: white !important;
    box-shadow: 0 2px 4px rgba(108,117,125,0.3) !important;
}

.modern-btn.secondary:hover:not(:disabled) {
    background: linear-gradient(135deg, #5a6268 0%, #494f54 100%) !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(108,117,125,0.4) !important;
}

.modern-btn.success {
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%) !important;
    color: white !important;
    box-shadow: 0 2px 4px rgba(40,167,69,0.3) !important;
}

.modern-btn.success:hover:not(:disabled) {
    background: linear-gradient(135deg, #218838 0%, #1e7e34 100%) !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(40,167,69,0.4) !important;
}

.modern-btn.danger {
    background: linear-gradient(135deg, #dc3545 0%, #c82333 100%) !important;
    color: white !important;
    box-shadow: 0 2px 4px rgba(220,53,69,0.3) !important;
}

.modern-btn.danger:hover:not(:disabled) {
    background: linear-gradient(135deg, #c82333 0%, #a71e2a 100%) !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(220,53,69,0.4) !important;
}

.modern-btn.warning {
    background: linear-gradient(135deg, #ffc107 0%, #e0a800 100%) !important;
    color: #212529 !important;
    box-shadow: 0 2px 4px rgba(255,193,7,0.3) !important;
}

.modern-btn.warning:hover:not(:disabled) {
    background: linear-gradient(135deg, #e0a800 0%, #d39e00 100%) !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(255,193,7,0.4) !important;
}

.modern-btn.info {
    background: linear-gradient(135deg, #17a2b8 0%, #138496 100%) !important;
    color: white !important;
    box-shadow: 0 2px 4px rgba(23,162,184,0.3) !important;
}

.modern-btn.info:hover:not(:disabled) {
    background: linear-gradient(135deg, #138496 0%, #117a8b 100%) !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(23,162,184,0.4) !important;
}

.modern-btn.light {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%) !important;
    color: #212529 !important;
    border: 1px solid #dee2e6 !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05) !important;
}

.modern-btn.light:hover:not(:disabled) {
    background: linear-gradient(135deg, #e9ecef 0%, #dee2e6 100%) !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.1) !important;
}

.modern-btn.dark {
    background: linear-gradient(135deg, #343a40 0%, #23272b 100%) !important;
    color: white !important;
    box-shadow: 0 2px 4px rgba(52,58,64,0.3) !important;
}

.modern-btn.dark:hover:not(:disabled) {
    background: linear-gradient(135deg, #23272b 0%, #1d2124 100%) !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(52,58,64,0.4) !important;
}

/* ===== BUTTON SIZES ===== */
.modern-btn.large {
    padding: 12px 20px;
    font-size: 16px;
    min-width: 140px;
}

.modern-btn.small {
    padding: 6px 12px;
    font-size: 12px;
    min-width: 80px;
}

.modern-btn.extra-small {
    padding: 4px 8px;
    font-size: 11px;
    min-width: 60px;
}

/* ===== BUTTON GROUPS ===== */
.modern-btn-group {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.modern-btn-group.vertical {
    flex-direction: column;
    align-items: stretch;
}

.modern-btn-group.center {
    justify-content: center;
}

.modern-btn-group.right {
    justify-content: flex-end;
}

.modern-btn-group.fill .modern-btn {
    flex: 1;
}

/* ===== OUTLINE BUTTONS ===== */
.modern-btn.outline {
    background: transparent !important;
    border: 2px solid !important;
    box-shadow: none !important;
}

.modern-btn.outline.primary {
    border-color: #007bff !important;
    color: #007bff !important;
}

.modern-btn.outline.primary:hover:not(:disabled) {
    background: #007bff !important;
    color: white !important;
}

.modern-btn.outline.secondary {
    border-color: #6c757d !important;
    color: #6c757d !important;
}

.modern-btn.outline.secondary:hover:not(:disabled) {
    background: #6c757d !important;
    color: white !important;
}

.modern-btn.outline.success {
    border-color: #28a745 !important;
    color: #28a745 !important;
}

.modern-btn.outline.success:hover:not(:disabled) {
    background: #28a745 !important;
    color: white !important;
}

.modern-btn.outline.danger {
    border-color: #dc3545 !important;
    color: #dc3545 !important;
}

.modern-btn.outline.danger:hover:not(:disabled) {
    background: #dc3545 !important;
    color: white !important;
}

.modern-btn.outline.warning {
    border-color: #ffc107 !important;
    color: #ffc107 !important;
}

.modern-btn.outline.warning:hover:not(:disabled) {
    background: #ffc107 !important;
    color: #212529 !important;
}

.modern-btn.outline.info {
    border-color: #17a2b8 !important;
    color: #17a2b8 !important;
}

.modern-btn.outline.info:hover:not(:disabled) {
    background: #17a2b8 !important;
    color: white !important;
}

/* ===== SPECIAL BUTTON TYPES ===== */
.modern-btn.icon-only {
    min-width: auto;
    width: 40px;
    height: 40px;
    padding: 0;
    border-radius: 50%;
}

.modern-btn.pill {
    border-radius: 25px;
}

.modern-btn.block {
    width: 100%;
    justify-content: center;
}

/* ===== RESPONSIVE DESIGN ===== */
@media (max-width: 768px) {
    .modern-btn-group {
        flex-direction: column;
    }
    
    .modern-btn-group.horizontal-mobile {
        flex-direction: row;
    }
    
    .modern-btn {
        min-width: auto;
        flex: 1;
    }
}